:root,
:root[data-ui-theme="classic_light"] {
  --app-shell-bg: #eef3fb;
  --app-shell-bg-accent: rgba(65, 84, 241, 0.08);
  --app-surface: #ffffff;
  --app-surface-muted: #f6f9ff;
  --app-surface-elevated: #fbfcff;
  --app-border: rgba(1, 41, 112, 0.10);
  --app-border-strong: rgba(1, 41, 112, 0.18);
  --app-shadow: 0 20px 45px rgba(1, 41, 112, 0.08);
  --app-sidebar-bg: rgba(255, 255, 255, 0.92);
  --app-sidebar-border: rgba(1, 41, 112, 0.08);
  --app-header-bg: rgba(255, 255, 255, 0.86);
  --app-header-border: rgba(1, 41, 112, 0.08);
  --app-primary: #4154f1;
  --app-primary-hover: #5969f3;
  --app-primary-soft: rgba(65, 84, 241, 0.10);
  --app-primary-contrast: #ffffff;
  --app-heading: #012970;
  --app-text: #475569;
  --app-text-muted: #7b8ba8;
  --app-link: #4154f1;
  --app-success: #1f9d60;
  --app-warning: #d97706;
  --app-danger: #dc2626;
  --app-info: #0891b2;
  --app-chip-bg: rgba(255, 255, 255, 0.75);
  --app-table-hover: rgba(65, 84, 241, 0.05);
  --app-backdrop: rgba(15, 23, 42, 0.35);
}

:root[data-ui-theme="midnight_slate"] {
  --app-shell-bg: #f2f6fb;
  --app-shell-bg-accent: rgba(77, 143, 139, 0.12);
  --app-surface: #ffffff;
  --app-surface-muted: #edf4f7;
  --app-surface-elevated: #ffffff;
  --app-border: rgba(74, 98, 127, 0.12);
  --app-border-strong: rgba(74, 98, 127, 0.20);
  --app-shadow: 0 22px 48px rgba(74, 98, 127, 0.12);
  --app-sidebar-bg: linear-gradient(180deg, rgba(231, 239, 246, 0.98), rgba(244, 248, 252, 0.96));
  --app-sidebar-border: rgba(74, 98, 127, 0.10);
  --app-header-bg: rgba(248, 251, 254, 0.92);
  --app-header-border: rgba(74, 98, 127, 0.10);
  --app-primary: #4d8f8b;
  --app-primary-hover: #3f7875;
  --app-primary-soft: rgba(77, 143, 139, 0.14);
  --app-primary-contrast: #ffffff;
  --app-heading: #22324a;
  --app-text: #4d5f73;
  --app-text-muted: #75859b;
  --app-link: #3f7875;
  --app-success: #2f8a5b;
  --app-warning: #b96a13;
  --app-danger: #c94d4d;
  --app-info: #2b84a6;
  --app-chip-bg: rgba(255, 255, 255, 0.82);
  --app-table-hover: rgba(77, 143, 139, 0.06);
  --app-backdrop: rgba(34, 50, 74, 0.28);
}

:root[data-ui-theme="navy_copper"] {
  --app-shell-bg: #faf4ee;
  --app-shell-bg-accent: rgba(167, 114, 78, 0.12);
  --app-surface: #fffefd;
  --app-surface-muted: #f5ede4;
  --app-surface-elevated: #ffffff;
  --app-border: rgba(95, 101, 112, 0.14);
  --app-border-strong: rgba(167, 114, 78, 0.22);
  --app-shadow: 0 22px 48px rgba(95, 101, 112, 0.12);
  --app-sidebar-bg: linear-gradient(180deg, rgba(249, 242, 234, 0.98), rgba(255, 250, 245, 0.97));
  --app-sidebar-border: rgba(95, 101, 112, 0.10);
  --app-header-bg: rgba(255, 250, 245, 0.92);
  --app-header-border: rgba(95, 101, 112, 0.10);
  --app-primary: #a7724e;
  --app-primary-hover: #8f5f40;
  --app-primary-soft: rgba(167, 114, 78, 0.14);
  --app-primary-contrast: #ffffff;
  --app-heading: #2f3a47;
  --app-text: #5e6570;
  --app-text-muted: #867d77;
  --app-link: #8f5f40;
  --app-success: #3b8a69;
  --app-warning: #b96a13;
  --app-danger: #bf4d4d;
  --app-info: #3a8d93;
  --app-chip-bg: rgba(255, 255, 255, 0.80);
  --app-table-hover: rgba(167, 114, 78, 0.06);
  --app-backdrop: rgba(47, 58, 71, 0.28);
}

:root[data-ui-theme="graphite_lime"] {
  --app-shell-bg: #f3f7f2;
  --app-shell-bg-accent: rgba(115, 150, 84, 0.12);
  --app-surface: #fcfefb;
  --app-surface-muted: #edf4ea;
  --app-surface-elevated: #ffffff;
  --app-border: rgba(86, 102, 91, 0.14);
  --app-border-strong: rgba(115, 150, 84, 0.20);
  --app-shadow: 0 22px 48px rgba(86, 102, 91, 0.12);
  --app-sidebar-bg: linear-gradient(180deg, rgba(235, 243, 233, 0.98), rgba(248, 251, 247, 0.96));
  --app-sidebar-border: rgba(86, 102, 91, 0.10);
  --app-header-bg: rgba(248, 251, 247, 0.92);
  --app-header-border: rgba(86, 102, 91, 0.10);
  --app-primary: #739654;
  --app-primary-hover: #5f8044;
  --app-primary-soft: rgba(115, 150, 84, 0.14);
  --app-primary-contrast: #ffffff;
  --app-heading: #253229;
  --app-text: #56665b;
  --app-text-muted: #7d8d80;
  --app-link: #5f8044;
  --app-success: #3a8c57;
  --app-warning: #b7791f;
  --app-danger: #c25151;
  --app-info: #3c87a8;
  --app-chip-bg: rgba(255, 255, 255, 0.80);
  --app-table-hover: rgba(115, 150, 84, 0.06);
  --app-backdrop: rgba(37, 50, 41, 0.28);
}

html, body {
  background:
    radial-gradient(circle at top left, var(--app-shell-bg-accent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--app-shell-bg) 92%, #ffffff 8%) 0%, var(--app-shell-bg) 100%);
  color: var(--app-text);
}

body {
  color: var(--app-text);
}

a {
  color: var(--app-link);
}

a:hover {
  color: var(--app-primary-hover);
}

.pagetitle h1,
.card-title,
.logo span,
.header .toggle-sidebar-btn,
.header-nav .nav-icon,
.sidebar-nav .nav-link.collapsed,
.sidebar-nav .nav-content a,
.profile .profile-overview .card-title,
.dashboard .info-card h6 {
  color: var(--app-heading);
}

#main {
  background: transparent;
}

.header {
  background: var(--app-header-bg);
  border-bottom: 1px solid var(--app-header-border);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px);
}

.header .search-form input,
.header .search-form input:focus {
  background: color-mix(in srgb, var(--app-surface) 92%, transparent 8%);
  border-color: var(--app-border);
  color: var(--app-heading);
}

.sidebar {
  background: var(--app-sidebar-bg);
  border-right: 1px solid var(--app-sidebar-border);
  box-shadow: 18px 0 40px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(18px);
}

.sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar-track {
  background-color: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--app-text-muted) 50%, transparent 50%);
}

.sidebar-nav .nav-heading,
.sidebar-storage-quota,
.sidebar-storage-label,
.header-nav .badge-number {
  color: var(--app-text-muted);
}

.sidebar-nav .nav-link {
  color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary-soft) 55%, transparent 45%);
  border: 1px solid transparent;
  border-radius: 14px;
}

.sidebar-nav .nav-link i,
.sidebar-storage-title i {
  color: inherit;
}

.sidebar-nav .nav-link.collapsed {
  background: transparent;
  border-color: transparent;
  color: color-mix(in srgb, var(--app-heading) 82%, var(--app-text-muted) 18%);
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:not(.collapsed) {
  color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary-soft) 82%, transparent 18%);
  border-color: color-mix(in srgb, var(--app-primary) 18%, transparent 82%);
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: var(--app-primary);
}

.sidebar-nav .nav-content a.active i {
  background-color: var(--app-primary);
}

.sidebar-storage-usage {
  background: color-mix(in srgb, var(--app-surface) 12%, var(--app-chip-bg) 88%);
  border: 1px solid color-mix(in srgb, var(--app-border) 70%, transparent 30%);
}

.sidebar-storage-title,
.sidebar-storage-gauge-value {
  color: var(--app-heading);
}

.sidebar-storage-gauge-track {
  stroke: color-mix(in srgb, var(--app-text-muted) 45%, transparent 55%);
}

.sidebar-storage-gauge-fill {
  stroke: var(--app-primary);
}

.card,
.dropdown-menu,
.modal-content,
.accordion-item,
.list-group-item,
.settings-section-card,
.settings-field {
  background: color-mix(in srgb, var(--app-surface) 94%, transparent 6%);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background: color-mix(in srgb, var(--app-surface-elevated) 92%, transparent 8%);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}

.dropdown-menu .dropdown-item:hover,
.table-hover tbody tr:hover,
.datatable-table > tbody > tr:hover,
.settings-matrix-table tbody tr:hover {
  background: var(--app-table-hover);
}

.table,
.dropdown-menu,
.breadcrumb-item,
.text-muted,
.card-title span,
.profile .profile-card h3 {
  color: var(--app-text-muted) !important;
}

.table,
.table th,
.table td,
.dropdown-menu .dropdown-item,
.list-group-item,
.profile .profile-overview .label,
.profile .profile-overview .row,
.modal-body,
.accordion-body {
  color: var(--app-text);
}

.bg-primary-light,
.dashboard .sales-card .card-icon,
.dashboard .activity .activity-item .activity-badge,
.dashboard .news .post-item .post-title,
.dashboard .recent-sales .filter,
.dashboard .top-selling .filter {
  background-color: color-mix(in srgb, var(--app-primary-soft) 88%, transparent 12%);
  color: var(--app-primary);
}

.dashboard .revenue-card .card-icon {
  background: color-mix(in srgb, var(--app-success) 16%, transparent 84%);
  color: var(--app-success);
}

.dashboard .customers-card .card-icon {
  background: color-mix(in srgb, var(--app-warning) 18%, transparent 82%);
  color: var(--app-warning);
}

.btn-primary,
.back-to-top,
.sidebar-nav .nav-content a.active i,
.header-nav .badge-number,
.pwa-install-banner,
.page-link.active,
.active > .page-link {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-primary-contrast);
}

.btn-primary:hover,
.btn-primary:focus,
.back-to-top:hover {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  color: var(--app-primary-contrast);
}

.btn-outline-primary {
  color: var(--app-primary);
  border-color: color-mix(in srgb, var(--app-primary) 36%, transparent 64%);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-primary-contrast);
}

.form-control,
.form-select,
.dataTable-input {
  background: color-mix(in srgb, var(--app-surface-elevated) 94%, transparent 6%);
  border-color: var(--app-border);
  color: var(--app-heading);
  border-radius: 12px;
}

.form-control:focus,
.form-select:focus,
.dataTable-input:focus {
  border-color: color-mix(in srgb, var(--app-primary) 45%, transparent 55%);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--app-primary-soft) 72%, transparent 28%);
}

.form-check-input:checked {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

.nav-tabs-bordered .nav-link.active,
.settings-page .nav-tabs-bordered .nav-link.active {
  color: var(--app-primary);
  border-bottom-color: var(--app-primary);
}

.breadcrumb-item a,
.page-link,
.nav-link,
.header-nav .nav-link {
  color: var(--app-link);
}

.alert-primary {
  background: color-mix(in srgb, var(--app-primary-soft) 88%, transparent 12%);
  border-color: color-mix(in srgb, var(--app-primary) 18%, transparent 82%);
  color: color-mix(in srgb, var(--app-primary) 70%, var(--app-heading) 30%);
}

.alert-success {
  background: color-mix(in srgb, var(--app-success) 14%, transparent 86%);
  border-color: color-mix(in srgb, var(--app-success) 24%, transparent 76%);
  color: color-mix(in srgb, var(--app-success) 78%, var(--app-heading) 22%);
}

.alert-warning {
  background: color-mix(in srgb, var(--app-warning) 15%, transparent 85%);
  border-color: color-mix(in srgb, var(--app-warning) 25%, transparent 75%);
  color: color-mix(in srgb, var(--app-warning) 82%, var(--app-heading) 18%);
}

.alert-danger {
  background: color-mix(in srgb, var(--app-danger) 12%, transparent 88%);
  border-color: color-mix(in srgb, var(--app-danger) 20%, transparent 80%);
  color: color-mix(in srgb, var(--app-danger) 80%, var(--app-heading) 20%);
}

.badge,
.settings-current-plan-badge,
.platform-plan-badge {
  background: var(--app-primary);
  color: var(--app-primary-contrast);
  border-color: var(--app-primary);
}

.modal-backdrop.show {
  opacity: 1;
  background: var(--app-backdrop);
}

:root[data-ui-theme="midnight_slate"] .card,
:root[data-ui-theme="navy_copper"] .card,
:root[data-ui-theme="graphite_lime"] .card {
  border-radius: 18px;
}

@media (max-width: 1199px) {
  .header {
    background: color-mix(in srgb, var(--app-header-bg) 94%, transparent 6%);
  }
}