/* ============================================================
   Razapan Service – Multi‑Theme System
   Themes:  Light · Dark · Ocean · Forest
   ============================================================ */

/* ── Shared transition tokens ────────────────────────────── */
:root {
  --transition-fast:   180ms ease;
  --transition-smooth: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   THEME: Light  (default)
   ============================================================ */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --app-bg:           #f4f7fb;
  --surface:          #ffffff;
  --surface-2:        #eef2f7;
  --surface-3:        #e4ebf4;
  --surface-4:        #d9e3f0;

  /* Text */
  --text:             #132033;
  --text-2:           #526173;
  --text-inverse:     #ffffff;

  /* Borders */
  --border:           #d8e1ee;
  --border-strong:    #c3cedd;

  /* Accent */
  --primary:          #d12a35;
  --primary-2:        #7c3aed;
  --primary-contrast: #ffffff;

  /* Semantic */
  --success:          #198754;
  --warning:          #f59e0b;
  --danger:           #dc2626;
  --info:             #0284c7;

  /* Shadows */
  --shadow:           0 18px 40px rgba(16, 24, 40, 0.08);
  --shadow-2:         0 10px 28px rgba(16, 24, 40, 0.12);
  --shadow-lg:        0 24px 56px rgba(16, 24, 40, 0.14);

  /* Nav / Sidebar */
  --nav-bg:           rgba(255, 255, 255, 0.82);
  --nav-text:         #132033;
  --sidebar-bg:       #f7f9fd;
  --sidebar-text:     #223047;
  --sidebar-muted:    #64748b;
  --sidebar-hover:    #eaf0f8;
  --sidebar-active:   #dbe7f5;

  /* Inputs */
  --input-bg:         #ffffff;
  --input-text:       #132033;
  --input-placeholder:#8b97a8;

  /* Toggle */
  --toggle-bg:        #e8eef6;
  --toggle-thumb:     #ffffff;
  --toggle-icon:      #132033;

  /* Focus */
  --focus-ring:       0 0 0 0.2rem rgba(209, 42, 53, 0.18);

  /* Settings drawer */
  --drawer-bg:        #ffffff;
  --drawer-text:      #132033;
  --drawer-border:    #e2e8f0;
  --drawer-hover:     #f1f5f9;
  --drawer-active:    #d12a35;
}

/* ============================================================
   THEME: Dark
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  --app-bg:           #0b1220;
  --surface:          #111a2b;
  --surface-2:        #162132;
  --surface-3:        #1c2940;
  --surface-4:        #22324b;

  --text:             #e5edf7;
  --text-2:           #a9b7c8;
  --text-inverse:     #0b1220;

  --border:           #25344a;
  --border-strong:    #33455f;

  --primary:          #ff5c68;
  --primary-2:        #8b5cf6;
  --primary-contrast: #ffffff;

  --success:          #22c55e;
  --warning:          #fbbf24;
  --danger:           #f87171;
  --info:             #38bdf8;

  --shadow:           0 18px 42px rgba(0, 0, 0, 0.38);
  --shadow-2:         0 12px 28px rgba(0, 0, 0, 0.32);
  --shadow-lg:        0 24px 56px rgba(0, 0, 0, 0.42);

  --nav-bg:           rgba(11, 18, 32, 0.86);
  --nav-text:         #e5edf7;
  --sidebar-bg:       #0d1727;
  --sidebar-text:     #e5edf7;
  --sidebar-muted:    #92a3b8;
  --sidebar-hover:    #162132;
  --sidebar-active:   #1d2a41;

  --input-bg:         #111a2b;
  --input-text:       #e5edf7;
  --input-placeholder:#7b8aa0;

  --toggle-bg:        #1a2638;
  --toggle-thumb:     #ffffff;
  --toggle-icon:      #e5edf7;

  --focus-ring:       0 0 0 0.2rem rgba(255, 92, 104, 0.25);

  --drawer-bg:        #111a2b;
  --drawer-text:      #e5edf7;
  --drawer-border:    #25344a;
  --drawer-hover:     #1c2940;
  --drawer-active:    #ff5c68;
}

/* ============================================================
   THEME: Ocean  –  cool blue & teal
   ============================================================ */
html[data-theme="ocean"] {
  color-scheme: dark;

  --app-bg:           #0c1929;
  --surface:          #13243a;
  --surface-2:        #182f4a;
  --surface-3:        #1e3a58;
  --surface-4:        #264668;

  --text:             #ddeeff;
  --text-2:           #8aadc8;
  --text-inverse:     #0c1929;

  --border:           #1f3d5a;
  --border-strong:    #2c506e;

  --primary:          #38bdf8;
  --primary-2:        #2dd4bf;
  --primary-contrast: #0c1929;

  --success:          #2dd4bf;
  --warning:          #fbbf24;
  --danger:           #fb7185;
  --info:             #60a5fa;

  --shadow:           0 18px 42px rgba(0, 0, 0, 0.40);
  --shadow-2:         0 12px 28px rgba(0, 0, 0, 0.34);
  --shadow-lg:        0 24px 56px rgba(0, 0, 0, 0.45);

  --nav-bg:           rgba(12, 25, 41, 0.86);
  --nav-text:         #ddeeff;
  --sidebar-bg:       #0e1e30;
  --sidebar-text:     #ddeeff;
  --sidebar-muted:    #6e95b2;
  --sidebar-hover:    #182f4a;
  --sidebar-active:   #1e3a58;

  --input-bg:         #13243a;
  --input-text:       #ddeeff;
  --input-placeholder:#6e90ad;

  --toggle-bg:        #182f4a;
  --toggle-thumb:     #ffffff;
  --toggle-icon:      #ddeeff;

  --focus-ring:       0 0 0 0.2rem rgba(56, 189, 248, 0.30);

  --drawer-bg:        #13243a;
  --drawer-text:      #ddeeff;
  --drawer-border:    #1f3d5a;
  --drawer-hover:     #182f4a;
  --drawer-active:    #38bdf8;
}

/* ============================================================
   THEME: Forest  –  earthy green & amber
   ============================================================ */
html[data-theme="forest"] {
  color-scheme: dark;

  --app-bg:           #0f1a12;
  --surface:          #17281d;
  --surface-2:        #1d3326;
  --surface-3:        #243f2e;
  --surface-4:        #2c4a37;

  --text:             #d9f0e0;
  --text-2:           #8ab89a;
  --text-inverse:     #0f1a12;

  --border:           #243f2e;
  --border-strong:    #2e543c;

  --primary:          #4ade80;
  --primary-2:        #fbbf24;
  --primary-contrast: #0f1a12;

  --success:          #4ade80;
  --warning:          #f59e0b;
  --danger:           #f87171;
  --info:             #38bdf8;

  --shadow:           0 18px 42px rgba(0, 0, 0, 0.38);
  --shadow-2:         0 12px 28px rgba(0, 0, 0, 0.32);
  --shadow-lg:        0 24px 56px rgba(0, 0, 0, 0.42);

  --nav-bg:           rgba(15, 26, 18, 0.86);
  --nav-text:         #d9f0e0;
  --sidebar-bg:       #111c15;
  --sidebar-text:     #d9f0e0;
  --sidebar-muted:    #6da080;
  --sidebar-hover:    #1d3326;
  --sidebar-active:   #243f2e;

  --input-bg:         #17281d;
  --input-text:       #d9f0e0;
  --input-placeholder:#68987a;

  --toggle-bg:        #1d3326;
  --toggle-thumb:     #ffffff;
  --toggle-icon:      #d9f0e0;

  --focus-ring:       0 0 0 0.2rem rgba(74, 222, 128, 0.30);

  --drawer-bg:        #17281d;
  --drawer-text:      #d9f0e0;
  --drawer-border:    #243f2e;
  --drawer-hover:     #1d3326;
  --drawer-active:    #4ade80;
}

/* ============================================================
   GLOBAL ELEMENT STYLES
   ============================================================ */
html,
body {
  min-height: 100%;
  background: var(--app-bg);
  color: var(--text);
  transition:
    background-color var(--transition-smooth),
    color var(--transition-smooth);
}

/* Smooth transitions on all themed elements */
*,
*::before,
*::after {
  transition:
    background-color var(--transition-smooth),
    border-color var(--transition-smooth),
    color var(--transition-smooth),
    box-shadow var(--transition-smooth);
}

a {
  color: var(--primary);
  transition: color var(--transition-fast);
}
a:hover,
a:focus {
  color: var(--primary);
  filter: brightness(1.15);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Text helpers ──────────────────────────────────────── */
html[data-theme="dark"] .text-dark,
html[data-theme="ocean"]  .text-dark,
html[data-theme="forest"] .text-dark,
body.theme-dark  .text-dark,
body.theme-ocean .text-dark,
body.theme-forest .text-dark {
  color: var(--text) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="ocean"]  .text-muted,
html[data-theme="ocean"]  .text-secondary,
html[data-theme="forest"] .text-muted,
html[data-theme="forest"] .text-secondary,
body.theme-dark  .text-muted,
body.theme-dark  .text-secondary,
body.theme-ocean .text-muted,
body.theme-ocean .text-secondary,
body.theme-forest .text-muted,
body.theme-forest .text-secondary {
  color: var(--text-2) !important;
}

/* ── Cards / Surfaces ─────────────────────────────────── */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .list-group-item,
html[data-theme="ocean"]  .bg-white,
html[data-theme="ocean"]  .bg-light,
html[data-theme="ocean"]  .card,
html[data-theme="ocean"]  .dropdown-menu,
html[data-theme="ocean"]  .modal-content,
html[data-theme="ocean"]  .offcanvas,
html[data-theme="ocean"]  .list-group-item,
html[data-theme="forest"] .bg-white,
html[data-theme="forest"] .bg-light,
html[data-theme="forest"] .card,
html[data-theme="forest"] .dropdown-menu,
html[data-theme="forest"] .modal-content,
html[data-theme="forest"] .offcanvas,
html[data-theme="forest"] .list-group-item,
body.theme-dark  .bg-white,
body.theme-dark  .bg-light,
body.theme-dark  .card,
body.theme-dark  .dropdown-menu,
body.theme-dark  .modal-content,
body.theme-dark  .offcanvas,
body.theme-dark  .list-group-item,
body.theme-ocean .bg-white,
body.theme-ocean .bg-light,
body.theme-ocean .card,
body.theme-ocean .dropdown-menu,
body.theme-ocean .modal-content,
body.theme-ocean .offcanvas,
body.theme-ocean .list-group-item,
body.theme-forest .bg-white,
body.theme-forest .bg-light,
body.theme-forest .card,
body.theme-forest .dropdown-menu,
body.theme-forest .modal-content,
body.theme-forest .offcanvas,
body.theme-forest .list-group-item {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow);
}

/* ── Borders ──────────────────────────────────────────── */
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-light,
html[data-theme="ocean"]  .border,
html[data-theme="ocean"]  .border-light,
html[data-theme="forest"] .border,
html[data-theme="forest"] .border-light,
body.theme-dark  .border,
body.theme-dark  .border-light,
body.theme-ocean .border,
body.theme-ocean .border-light,
body.theme-forest .border,
body.theme-forest .border-light {
  border-color: var(--border) !important;
}

/* ── Tables ───────────────────────────────────────────── */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="ocean"]  .table,
html[data-theme="ocean"]  .table > :not(caption) > * > *,
html[data-theme="forest"] .table,
html[data-theme="forest"] .table > :not(caption) > * > *,
body.theme-dark  .table,
body.theme-dark  .table > * > *,
body.theme-ocean .table,
body.theme-ocean .table > * > *,
body.theme-forest .table,
body.theme-forest .table > * > * {
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="ocean"]  .table thead th,
html[data-theme="ocean"]  .table-light,
html[data-theme="ocean"]  .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="forest"] .table thead th,
html[data-theme="forest"] .table-light,
html[data-theme="forest"] .table-striped > tbody > tr:nth-of-type(odd) > *,
body.theme-dark  .table thead th,
body.theme-dark  .table-light,
body.theme-dark  .table-striped > tbody > tr:nth-of-type(odd) > *,
body.theme-ocean .table thead th,
body.theme-ocean .table-light,
body.theme-ocean .table-striped > tbody > tr:nth-of-type(odd) > *,
body.theme-forest .table thead th,
body.theme-forest .table-light,
body.theme-forest .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ── Forms ────────────────────────────────────────────── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="ocean"]  .form-control,
html[data-theme="ocean"]  .form-select,
html[data-theme="forest"] .form-control,
html[data-theme="forest"] .form-select,
body.theme-dark  .form-control,
body.theme-dark  .form-select,
body.theme-ocean .form-control,
body.theme-ocean .form-select,
body.theme-forest .form-control,
body.theme-forest .form-select {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="ocean"]  .form-control::placeholder,
html[data-theme="forest"] .form-control::placeholder,
body.theme-dark  .form-control::placeholder,
body.theme-ocean .form-control::placeholder,
body.theme-forest .form-control::placeholder {
  color: var(--input-placeholder);
}
html[data-theme="dark"] .input-group-text,
html[data-theme="ocean"]  .input-group-text,
html[data-theme="forest"] .input-group-text,
body.theme-dark  .input-group-text,
body.theme-ocean .input-group-text,
body.theme-forest .input-group-text {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

/* ── Buttons ──────────────────────────────────────────── */
html[data-theme="dark"] .btn-light,
html[data-theme="ocean"]  .btn-light,
html[data-theme="forest"] .btn-light,
body.theme-dark  .btn-light,
body.theme-ocean .btn-light,
body.theme-forest .btn-light {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .btn-dark,
html[data-theme="ocean"]  .btn-dark,
html[data-theme="forest"] .btn-dark,
body.theme-dark  .btn-dark,
body.theme-ocean .btn-dark,
body.theme-forest .btn-dark {
  background-color: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="ocean"]  .btn-outline-secondary,
html[data-theme="forest"] .btn-outline-secondary,
body.theme-dark  .btn-outline-secondary,
body.theme-ocean .btn-outline-secondary,
body.theme-forest .btn-outline-secondary {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .btn-outline-light,
html[data-theme="ocean"]  .btn-outline-light,
html[data-theme="forest"] .btn-outline-light,
body.theme-dark  .btn-outline-light,
body.theme-ocean .btn-outline-light,
body.theme-forest .btn-outline-light {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── Alerts / Badges ──────────────────────────────────── */
html[data-theme="dark"] .alert-light,
html[data-theme="ocean"]  .alert-light,
html[data-theme="forest"] .alert-light,
body.theme-dark  .alert-light,
body.theme-ocean .alert-light,
body.theme-forest .alert-light {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .badge.bg-light,
html[data-theme="ocean"]  .badge.bg-light,
html[data-theme="forest"] .badge.bg-light,
body.theme-dark  .badge.bg-light,
body.theme-ocean .badge.bg-light,
body.theme-forest .badge.bg-light {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ── Sections with data-bgcolor ───────────────────────── */
html[data-theme="dark"] section[data-bgcolor],
html[data-theme="dark"] div[data-bgcolor],
html[data-theme="dark"] span[data-bgcolor],
html[data-theme="ocean"]  section[data-bgcolor],
html[data-theme="ocean"]  div[data-bgcolor],
html[data-theme="ocean"]  span[data-bgcolor],
html[data-theme="forest"] section[data-bgcolor],
html[data-theme="forest"] div[data-bgcolor],
html[data-theme="forest"] span[data-bgcolor],
body.theme-dark  section[data-bgcolor],
body.theme-dark  div[data-bgcolor],
body.theme-dark  span[data-bgcolor],
body.theme-ocean section[data-bgcolor],
body.theme-ocean div[data-bgcolor],
body.theme-ocean span[data-bgcolor],
body.theme-forest section[data-bgcolor],
body.theme-forest div[data-bgcolor],
body.theme-forest span[data-bgcolor] {
  background-color: var(--app-bg) !important;
  background-image: none !important;
}

/* ── Navbar ───────────────────────────────────────────── */
html[data-theme="dark"] .navbar-fixed-top,
html[data-theme="ocean"]  .navbar-fixed-top,
html[data-theme="forest"] .navbar-fixed-top,
body.theme-dark  .navbar-fixed-top,
body.theme-ocean .navbar-fixed-top,
body.theme-forest .navbar-fixed-top {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--nav-text);
}
html[data-theme="dark"] .navbar-fixed-top .icon-menu i,
html[data-theme="dark"] .navbar-fixed-top .navbar-nav > li > a,
html[data-theme="ocean"]  .navbar-fixed-top .icon-menu i,
html[data-theme="ocean"]  .navbar-fixed-top .navbar-nav > li > a,
html[data-theme="forest"] .navbar-fixed-top .icon-menu i,
html[data-theme="forest"] .navbar-fixed-top .navbar-nav > li > a,
body.theme-dark  .navbar-fixed-top .icon-menu i,
body.theme-dark  .navbar-fixed-top .navbar-nav > li > a,
body.theme-ocean .navbar-fixed-top .icon-menu i,
body.theme-ocean .navbar-fixed-top .navbar-nav > li > a,
body.theme-forest .navbar-fixed-top .icon-menu i,
body.theme-forest .navbar-fixed-top .navbar-nav > li > a {
  color: var(--nav-text) !important;
}

/* ── Sidebar ──────────────────────────────────────────── */
html[data-theme="dark"] #left-sidebar,
html[data-theme="ocean"]  #left-sidebar,
html[data-theme="forest"] #left-sidebar,
body.theme-dark  #left-sidebar,
body.theme-ocean #left-sidebar,
body.theme-forest #left-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border) !important;
  color: var(--sidebar-text);
}
html[data-theme="dark"] #left-sidebar .navbar-brand,
html[data-theme="dark"] #left-sidebar .user-account,
html[data-theme="ocean"]  #left-sidebar .navbar-brand,
html[data-theme="ocean"]  #left-sidebar .user-account,
html[data-theme="forest"] #left-sidebar .navbar-brand,
html[data-theme="forest"] #left-sidebar .user-account,
body.theme-dark  #left-sidebar .navbar-brand,
body.theme-dark  #left-sidebar .user-account,
body.theme-ocean #left-sidebar .navbar-brand,
body.theme-ocean #left-sidebar .user-account,
body.theme-forest #left-sidebar .navbar-brand,
body.theme-forest #left-sidebar .user-account {
  border-color: var(--border) !important;
  color: var(--sidebar-text) !important;
}
html[data-theme="dark"] #left-sidebar .sidebar-nav .metismenu a,
html[data-theme="ocean"]  #left-sidebar .sidebar-nav .metismenu a,
html[data-theme="forest"] #left-sidebar .sidebar-nav .metismenu a,
body.theme-dark  #left-sidebar .sidebar-nav .metismenu a,
body.theme-ocean #left-sidebar .sidebar-nav .metismenu a,
body.theme-forest #left-sidebar .sidebar-nav .metismenu a {
  color: var(--sidebar-text) !important;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
html[data-theme="dark"] #left-sidebar .sidebar-nav .metismenu a:hover,
html[data-theme="dark"] #left-sidebar .sidebar-nav .metismenu a:focus,
html[data-theme="ocean"]  #left-sidebar .sidebar-nav .metismenu a:hover,
html[data-theme="ocean"]  #left-sidebar .sidebar-nav .metismenu a:focus,
html[data-theme="forest"] #left-sidebar .sidebar-nav .metismenu a:hover,
html[data-theme="forest"] #left-sidebar .sidebar-nav .metismenu a:focus,
body.theme-dark  #left-sidebar .sidebar-nav .metismenu a:hover,
body.theme-dark  #left-sidebar .sidebar-nav .metismenu a:focus,
body.theme-ocean #left-sidebar .sidebar-nav .metismenu a:hover,
body.theme-ocean #left-sidebar .sidebar-nav .metismenu a:focus,
body.theme-forest #left-sidebar .sidebar-nav .metismenu a:hover,
body.theme-forest #left-sidebar .sidebar-nav .metismenu a:focus {
  background: var(--sidebar-hover) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] #left-sidebar .sidebar-nav .metismenu > li.active > a,
html[data-theme="dark"] #left-sidebar .sidebar-nav .metismenu > li.mm-active > a,
html[data-theme="ocean"]  #left-sidebar .sidebar-nav .metismenu > li.active > a,
html[data-theme="ocean"]  #left-sidebar .sidebar-nav .metismenu > li.mm-active > a,
html[data-theme="forest"] #left-sidebar .sidebar-nav .metismenu > li.active > a,
html[data-theme="forest"] #left-sidebar .sidebar-nav .metismenu > li.mm-active > a,
body.theme-dark  #left-sidebar .sidebar-nav .metismenu > li.active > a,
body.theme-dark  #left-sidebar .sidebar-nav .metismenu > li.mm-active > a,
body.theme-ocean #left-sidebar .sidebar-nav .metismenu > li.active > a,
body.theme-ocean #left-sidebar .sidebar-nav .metismenu > li.mm-active > a,
body.theme-forest #left-sidebar .sidebar-nav .metismenu > li.active > a,
body.theme-forest #left-sidebar .sidebar-nav .metismenu > li.mm-active > a {
  background: var(--sidebar-active) !important;
  color: var(--primary) !important;
}

/* ── Headers / Content ────────────────────────────────── */
html[data-theme="dark"] .block-header h2,
html[data-theme="dark"] .sidebar-heading,
html[data-theme="ocean"]  .block-header h2,
html[data-theme="ocean"]  .sidebar-heading,
html[data-theme="forest"] .block-header h2,
html[data-theme="forest"] .sidebar-heading,
body.theme-dark  .block-header h2,
body.theme-dark  .sidebar-heading,
body.theme-ocean .block-header h2,
body.theme-ocean .sidebar-heading,
body.theme-forest .block-header h2,
body.theme-forest .sidebar-heading {
  color: var(--text) !important;
}

html[data-theme="dark"] #main-content,
html[data-theme="dark"] .page-content-wrapper,
html[data-theme="dark"] #wrapper,
html[data-theme="ocean"]  #main-content,
html[data-theme="ocean"]  .page-content-wrapper,
html[data-theme="ocean"]  #wrapper,
html[data-theme="forest"] #main-content,
html[data-theme="forest"] .page-content-wrapper,
html[data-theme="forest"] #wrapper,
body.theme-dark  #main-content,
body.theme-dark  .page-content-wrapper,
body.theme-dark  #wrapper,
body.theme-ocean #main-content,
body.theme-ocean .page-content-wrapper,
body.theme-ocean #wrapper,
body.theme-forest #main-content,
body.theme-forest .page-content-wrapper,
body.theme-forest #wrapper {
  background: var(--app-bg);
  color: var(--text);
}

html[data-theme="dark"] .block-header,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="ocean"]  .block-header,
html[data-theme="ocean"]  .card-header,
html[data-theme="ocean"]  .modal-header,
html[data-theme="ocean"]  .modal-footer,
html[data-theme="forest"] .block-header,
html[data-theme="forest"] .card-header,
html[data-theme="forest"] .modal-header,
html[data-theme="forest"] .modal-footer,
body.theme-dark  .block-header,
body.theme-dark  .card-header,
body.theme-dark  .modal-header,
body.theme-dark  .modal-footer,
body.theme-ocean .block-header,
body.theme-ocean .card-header,
body.theme-ocean .modal-header,
body.theme-ocean .modal-footer,
body.theme-forest .block-header,
body.theme-forest .card-header,
body.theme-forest .modal-header,
body.theme-forest .modal-footer {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Pagination ───────────────────────────────────────── */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span,
html[data-theme="ocean"]  .pagination > li > a,
html[data-theme="ocean"]  .pagination > li > span,
html[data-theme="forest"] .pagination > li > a,
html[data-theme="forest"] .pagination > li > span,
body.theme-dark  .pagination > li > a,
body.theme-dark  .pagination > li > span,
body.theme-ocean .pagination > li > a,
body.theme-ocean .pagination > li > span,
body.theme-forest .pagination > li > a,
body.theme-forest .pagination > li > span {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .pagination li.active a,
html[data-theme="ocean"]  .pagination li.active a,
html[data-theme="forest"] .pagination li.active a,
body.theme-dark  .pagination li.active a,
body.theme-ocean .pagination li.active a,
body.theme-forest .pagination li.active a {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* ── Header (public site) ─────────────────────────────── */
html[data-theme="dark"] header,
html[data-theme="ocean"]  header,
html[data-theme="forest"] header,
body.theme-dark  header,
body.theme-ocean header,
body.theme-forest header {
  color: var(--text);
}
html[data-theme="dark"] header.transparent,
html[data-theme="ocean"]  header.transparent,
html[data-theme="forest"] header.transparent,
body.theme-dark  header.transparent,
body.theme-ocean header.transparent,
body.theme-forest header.transparent {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

/* ── Header area / sidenav ────────────────────────────── */
html[data-theme="dark"] .header-area,
html[data-theme="dark"] .header-content,
html[data-theme="dark"] .sidenav-wrapper,
html[data-theme="dark"] .offcanvas,
html[data-theme="ocean"]  .header-area,
html[data-theme="ocean"]  .header-content,
html[data-theme="ocean"]  .sidenav-wrapper,
html[data-theme="ocean"]  .offcanvas,
html[data-theme="forest"] .header-area,
html[data-theme="forest"] .header-content,
html[data-theme="forest"] .sidenav-wrapper,
html[data-theme="forest"] .offcanvas,
body.theme-dark  .header-area,
body.theme-dark  .header-content,
body.theme-dark  .sidenav-wrapper,
body.theme-dark  .offcanvas,
body.theme-ocean .header-area,
body.theme-ocean .header-content,
body.theme-ocean .sidenav-wrapper,
body.theme-ocean .offcanvas,
body.theme-forest .header-area,
body.theme-forest .header-content,
body.theme-forest .sidenav-wrapper,
body.theme-forest .offcanvas {
  background: var(--app-bg);
  color: var(--text);
}
html[data-theme="dark"] .header-content .logo,
html[data-theme="dark"] .header-content .logo-2,
html[data-theme="ocean"]  .header-content .logo,
html[data-theme="ocean"]  .header-content .logo-2,
html[data-theme="forest"] .header-content .logo,
html[data-theme="forest"] .header-content .logo-2,
body.theme-dark  .header-content .logo,
body.theme-dark  .header-content .logo-2,
body.theme-ocean .header-content .logo,
body.theme-ocean .header-content .logo-2,
body.theme-forest .header-content .logo,
body.theme-forest .header-content .logo-2 {
  filter: brightness(0.95) contrast(1.05);
}

/* ── Main menu ────────────────────────────────────────── */
html[data-theme="dark"] #mainmenu a,
html[data-theme="ocean"]  #mainmenu a,
html[data-theme="forest"] #mainmenu a,
body.theme-dark  #mainmenu a,
body.theme-ocean #mainmenu a,
body.theme-forest #mainmenu a {
  color: var(--text) !important;
}
html[data-theme="dark"] #mainmenu a.active,
html[data-theme="ocean"]  #mainmenu a.active,
html[data-theme="forest"] #mainmenu a.active,
body.theme-dark  #mainmenu a.active,
body.theme-ocean #mainmenu a.active,
body.theme-forest #mainmenu a.active {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* ── Buttons (custom) ─────────────────────────────────── */
html[data-theme="dark"] .btn-custom,
html[data-theme="dark"] .btn-border,
html[data-theme="ocean"]  .btn-custom,
html[data-theme="ocean"]  .btn-border,
html[data-theme="forest"] .btn-custom,
html[data-theme="forest"] .btn-border,
body.theme-dark  .btn-custom,
body.theme-dark  .btn-border,
body.theme-ocean .btn-custom,
body.theme-ocean .btn-border,
body.theme-forest .btn-custom,
body.theme-forest .btn-border {
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}
html[data-theme="dark"] .btn-custom,
html[data-theme="ocean"]  .btn-custom,
html[data-theme="forest"] .btn-custom,
body.theme-dark  .btn-custom,
body.theme-ocean .btn-custom,
body.theme-forest .btn-custom {
  background: var(--primary) !important;
}
html[data-theme="dark"] .btn-border,
html[data-theme="ocean"]  .btn-border,
html[data-theme="forest"] .btn-border,
body.theme-dark  .btn-border,
body.theme-ocean .btn-border,
body.theme-forest .btn-border {
  background: transparent !important;
}
html[data-theme="dark"] .btn-border.light,
html[data-theme="ocean"]  .btn-border.light,
html[data-theme="forest"] .btn-border.light,
body.theme-dark  .btn-border.light,
body.theme-ocean .btn-border.light,
body.theme-forest .btn-border.light {
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Widgets / Boxes ──────────────────────────────────── */
html[data-theme="dark"] .widget,
html[data-theme="dark"] .box-rounded,
html[data-theme="dark"] .form-border,
html[data-theme="ocean"]  .widget,
html[data-theme="ocean"]  .box-rounded,
html[data-theme="ocean"]  .form-border,
html[data-theme="forest"] .widget,
html[data-theme="forest"] .box-rounded,
html[data-theme="forest"] .form-border,
body.theme-dark  .widget,
body.theme-dark  .box-rounded,
body.theme-dark  .form-border,
body.theme-ocean .widget,
body.theme-ocean .box-rounded,
body.theme-ocean .form-border,
body.theme-forest .widget,
body.theme-forest .box-rounded,
body.theme-forest .form-border {
  color: var(--text);
}
html[data-theme="dark"] .form-border input,
html[data-theme="dark"] .form-border textarea,
html[data-theme="ocean"]  .form-border input,
html[data-theme="ocean"]  .form-border textarea,
html[data-theme="forest"] .form-border input,
html[data-theme="forest"] .form-border textarea,
body.theme-dark  .form-border input,
body.theme-dark  .form-border textarea,
body.theme-ocean .form-border input,
body.theme-ocean .form-border textarea,
body.theme-forest .form-border input,
body.theme-forest .form-border textarea {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border) !important;
}

/* ── Footer ───────────────────────────────────────────── */
html[data-theme="dark"] .footer,
html[data-theme="dark"] footer,
html[data-theme="ocean"]  .footer,
html[data-theme="ocean"]  footer,
html[data-theme="forest"] .footer,
html[data-theme="forest"] footer,
body.theme-dark  .footer,
body.theme-dark  footer,
body.theme-ocean .footer,
body.theme-ocean footer,
body.theme-forest .footer,
body.theme-forest footer {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-top-color: var(--border) !important;
}
html[data-theme="dark"] .footer a,
html[data-theme="dark"] footer a,
html[data-theme="ocean"]  .footer a,
html[data-theme="ocean"]  footer a,
html[data-theme="forest"] .footer a,
html[data-theme="forest"] footer a,
body.theme-dark  .footer a,
body.theme-dark  footer a,
body.theme-ocean .footer a,
body.theme-ocean footer a,
body.theme-forest .footer a,
body.theme-forest footer a {
  color: var(--text) !important;
}

/* ── Section headers ──────────────────────────────────── */
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .section-header,
html[data-theme="ocean"]  .section-title h2,
html[data-theme="ocean"]  .section-header,
html[data-theme="forest"] .section-title h2,
html[data-theme="forest"] .section-header,
body.theme-dark  .section-title h2,
body.theme-dark  .section-header,
body.theme-ocean .section-title h2,
body.theme-ocean .section-header,
body.theme-forest .section-title h2,
body.theme-forest .section-header {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-left-color: var(--primary) !important;
}

/* ── Card bg / overlay ────────────────────────────────── */
html[data-theme="dark"] .card-bg-img,
html[data-theme="dark"] .bg-overlay,
html[data-theme="ocean"]  .card-bg-img,
html[data-theme="ocean"]  .bg-overlay,
html[data-theme="forest"] .card-bg-img,
html[data-theme="forest"] .bg-overlay,
body.theme-dark  .card-bg-img,
body.theme-dark  .bg-overlay,
body.theme-ocean .card-bg-img,
body.theme-ocean .bg-overlay,
body.theme-forest .card-bg-img,
body.theme-forest .bg-overlay {
  color: var(--text-inverse);
}

/* ── Table responsive ─────────────────────────────────── */
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .table-responsive table,
html[data-theme="ocean"]  .table-responsive,
html[data-theme="ocean"]  .table-responsive table,
html[data-theme="forest"] .table-responsive,
html[data-theme="forest"] .table-responsive table,
body.theme-dark  .table-responsive,
body.theme-dark  .table-responsive table,
body.theme-ocean .table-responsive,
body.theme-ocean .table-responsive table,
body.theme-forest .table-responsive,
body.theme-forest .table-responsive table {
  color: var(--text);
}
html[data-theme="dark"] .table-responsive thead th,
html[data-theme="ocean"]  .table-responsive thead th,
html[data-theme="forest"] .table-responsive thead th,
body.theme-dark  .table-responsive thead th,
body.theme-ocean .table-responsive thead th,
body.theme-forest .table-responsive thead th {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .table-responsive tbody tr,
html[data-theme="ocean"]  .table-responsive tbody tr,
html[data-theme="forest"] .table-responsive tbody tr,
body.theme-dark  .table-responsive tbody tr,
body.theme-ocean .table-responsive tbody tr,
body.theme-forest .table-responsive tbody tr {
  background: var(--surface) !important;
}

/* ── Bootgrid loading / no-results row ────────────────── */
html[data-theme="dark"] .bootgrid-table td.loading,
html[data-theme="dark"] .bootgrid-table td.no-results,
html[data-theme="ocean"]  .bootgrid-table td.loading,
html[data-theme="ocean"]  .bootgrid-table td.no-results,
html[data-theme="forest"] .bootgrid-table td.loading,
html[data-theme="forest"] .bootgrid-table td.no-results,
body.theme-dark  .bootgrid-table td.loading,
body.theme-dark  .bootgrid-table td.no-results,
body.theme-ocean .bootgrid-table td.loading,
body.theme-ocean .bootgrid-table td.no-results,
body.theme-forest .bootgrid-table td.loading,
body.theme-forest .bootgrid-table td.no-results {
  background: var(--surface) !important;
  color: var(--text-2) !important;
}

/* ── DataTables processing indicator ──────────────────── */
html[data-theme="dark"] .dataTables_processing,
html[data-theme="ocean"]  .dataTables_processing,
html[data-theme="forest"] .dataTables_processing,
body.theme-dark  .dataTables_processing,
body.theme-ocean .dataTables_processing,
body.theme-forest .dataTables_processing {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-2);
}

html[data-theme="dark"] .dataTables_processing > *,
html[data-theme="ocean"]  .dataTables_processing > *,
html[data-theme="forest"] .dataTables_processing > *,
body.theme-dark  .dataTables_processing > *,
body.theme-ocean .dataTables_processing > *,
body.theme-forest .dataTables_processing > * {
  color: var(--text) !important;
}

/* DataTables processing spinner */
html[data-theme="dark"] .dataTables_processing::after,
html[data-theme="ocean"]  .dataTables_processing::after,
html[data-theme="forest"] .dataTables_processing::after,
body.theme-dark  .dataTables_processing::after,
body.theme-ocean .dataTables_processing::after,
body.theme-forest .dataTables_processing::after {
  border-top-color: var(--primary) !important;
  border-right-color: var(--border-strong) !important;
  border-bottom-color: var(--border-strong) !important;
  border-left-color: var(--border-strong) !important;
}

/* ── Datatable wrapper styling for dark themes ────────── */
html[data-theme="dark"] table.dataTable,
html[data-theme="ocean"]  table.dataTable,
html[data-theme="forest"] table.dataTable,
body.theme-dark  table.dataTable,
body.theme-ocean table.dataTable,
body.theme-forest table.dataTable {
  color: var(--text);
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="ocean"]  table.dataTable thead th,
html[data-theme="forest"] table.dataTable thead th,
body.theme-dark  table.dataTable thead th,
body.theme-ocean table.dataTable thead th,
body.theme-forest table.dataTable thead th {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="ocean"]  table.dataTable tbody td,
html[data-theme="forest"] table.dataTable tbody td,
body.theme-dark  table.dataTable tbody td,
body.theme-ocean table.dataTable tbody td,
body.theme-forest table.dataTable tbody td {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] table.dataTable tbody tr:hover td,
html[data-theme="ocean"]  table.dataTable tbody tr:hover td,
html[data-theme="forest"] table.dataTable tbody tr:hover td,
body.theme-dark  table.dataTable tbody tr:hover td,
body.theme-ocean table.dataTable tbody tr:hover td,
body.theme-forest table.dataTable tbody tr:hover td {
  background: var(--surface-2);
}

html[data-theme="dark"] table.dataTable.stripe tbody tr.odd td,
html[data-theme="ocean"]  table.dataTable.stripe tbody tr.odd td,
html[data-theme="forest"] table.dataTable.stripe tbody tr.odd td,
body.theme-dark  table.dataTable.stripe tbody tr.odd td,
body.theme-ocean table.dataTable.stripe tbody tr.odd td,
body.theme-forest table.dataTable.stripe tbody tr.odd td {
  background: var(--surface-2);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="ocean"]  .dataTables_wrapper .dataTables_filter input,
html[data-theme="ocean"]  .dataTables_wrapper .dataTables_length select,
html[data-theme="forest"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="forest"] .dataTables_wrapper .dataTables_length select,
body.theme-dark  .dataTables_wrapper .dataTables_filter input,
body.theme-dark  .dataTables_wrapper .dataTables_length select,
body.theme-ocean .dataTables_wrapper .dataTables_filter input,
body.theme-ocean .dataTables_wrapper .dataTables_length select,
body.theme-forest .dataTables_wrapper .dataTables_filter input,
body.theme-forest .dataTables_wrapper .dataTables_length select {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
html[data-theme="ocean"]  .dataTables_wrapper .dataTables_paginate .paginate_button,
html[data-theme="forest"] .dataTables_wrapper .dataTables_paginate .paginate_button,
body.theme-dark  .dataTables_wrapper .dataTables_paginate .paginate_button,
body.theme-ocean .dataTables_wrapper .dataTables_paginate .paginate_button,
body.theme-forest .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="ocean"]  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="forest"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.theme-dark  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.theme-ocean .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.theme-forest .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary) !important;
}

/* ── Admin color skin overrides (fix hardcoded colors) ── */
html[data-theme="dark"] .slim_scroll .card,
html[data-theme="ocean"]  .slim_scroll .card,
html[data-theme="forest"] .slim_scroll .card,
body.theme-dark  .slim_scroll .card,
body.theme-ocean .slim_scroll .card,
body.theme-forest .slim_scroll .card {
  background-color: var(--surface) !important;
}

html[data-theme="dark"] .card .header h2,
html[data-theme="ocean"]  .card .header h2,
html[data-theme="forest"] .card .header h2,
body.theme-dark  .card .header h2,
body.theme-ocean .card .header h2,
body.theme-forest .card .header h2 {
  color: var(--text) !important;
}

html[data-theme="dark"] .bootgrid-table th > .column-header-anchor,
html[data-theme="ocean"]  .bootgrid-table th > .column-header-anchor,
html[data-theme="forest"] .bootgrid-table th > .column-header-anchor,
body.theme-dark  .bootgrid-table th > .column-header-anchor,
body.theme-ocean .bootgrid-table th > .column-header-anchor,
body.theme-forest .bootgrid-table th > .column-header-anchor {
  color: var(--text) !important;
}

html[data-theme="dark"] .bootgrid-table th:active,
html[data-theme="dark"] .bootgrid-table th:hover,
html[data-theme="ocean"]  .bootgrid-table th:active,
html[data-theme="ocean"]  .bootgrid-table th:hover,
html[data-theme="forest"] .bootgrid-table th:active,
html[data-theme="forest"] .bootgrid-table th:hover,
body.theme-dark  .bootgrid-table th:active,
body.theme-dark  .bootgrid-table th:hover,
body.theme-ocean .bootgrid-table th:active,
body.theme-ocean .bootgrid-table th:hover,
body.theme-forest .bootgrid-table th:active,
body.theme-forest .bootgrid-table th:hover {
  background: var(--surface-2) !important;
}

html[data-theme="dark"] .card .body,
html[data-theme="ocean"]  .card .body,
html[data-theme="forest"] .card .body,
body.theme-dark  .card .body,
body.theme-ocean .card .body,
body.theme-forest .card .body {
  color: var(--text) !important;
}

html[data-theme="dark"] .page-item a,
html[data-theme="ocean"]  .page-item a,
html[data-theme="forest"] .page-item a,
body.theme-dark  .page-item a,
body.theme-ocean .page-item a,
body.theme-forest .page-item a {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── Feeds widget ─────────────────────────────────────── */
html[data-theme="dark"] .feeds_widget li a,
html[data-theme="ocean"]  .feeds_widget li a,
html[data-theme="forest"] .feeds_widget li a,
body.theme-dark  .feeds_widget li a,
body.theme-ocean .feeds_widget li a,
body.theme-forest .feeds_widget li a {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .feeds_widget li a:hover,
html[data-theme="ocean"]  .feeds_widget li a:hover,
html[data-theme="forest"] .feeds_widget li a:hover,
body.theme-dark  .feeds_widget li a:hover,
body.theme-ocean .feeds_widget li a:hover,
body.theme-forest .feeds_widget li a:hover {
  background: var(--surface-3) !important;
}

/* ============================================================
   SETTINGS BUTTON  (fixed right‑center)
   ============================================================ */
.settings-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 8px 0 0 8px;
  background: var(--primary);
  color: var(--primary-contrast);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth),
    background-color var(--transition-smooth);
}

.settings-btn:hover {
  transform: translateY(-50%) translateX(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);
}

.settings-btn:active {
  transform: translateY(-50%) translateX(0);
}

.settings-btn svg {
  display: block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-btn:hover svg {
  transform: rotate(60deg);
}

/* ============================================================
   SETTINGS OVERLAY
   ============================================================ */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-smooth),
    visibility var(--transition-smooth);
}

.settings-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   SETTINGS DRAWER  (right side, slim)
   ============================================================ */
.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100001;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;
  background: var(--drawer-bg);
  color: var(--drawer-text);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.settings-drawer.open {
  transform: translateX(0);
}

/* ── Header ────────────────────────────────────────────── */
.settings-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--drawer-border);
  flex-shrink: 0;
}

.settings-drawer__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--drawer-text);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}

.settings-drawer__title svg {
  color: var(--primary);
  flex-shrink: 0;
}

.settings-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--drawer-text);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.settings-drawer__close:hover {
  background: var(--drawer-hover);
  transform: scale(1.08);
}

.settings-drawer__close:active {
  transform: scale(0.94);
}

/* ── Body ──────────────────────────────────────────────── */
.settings-drawer__body {
  padding: 20px 24px 32px;
  flex: 1;
  overflow-y: auto;
}

.settings-drawer__subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 18px;
}

/* ── Theme grid ────────────────────────────────────────── */
.settings-drawer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.settings-drawer__option {
  display: block;
  cursor: pointer;
}

.settings-drawer__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Theme card ────────────────────────────────────────── */
.settings-drawer__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 12px;
  border-radius: 12px;
  border: 2px solid var(--drawer-border);
  background: var(--drawer-hover);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.settings-drawer__radio:checked + .settings-drawer__card {
  border-color: var(--drawer-active);
  background: var(--drawer-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--drawer-active) 20%, transparent);
}

.settings-drawer__option:hover .settings-drawer__card {
  border-color: var(--drawer-active);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.settings-drawer__option:active .settings-drawer__card {
  transform: translateY(0);
}

/* ── Preview swatch ────────────────────────────────────── */
.settings-drawer__preview {
  width: 56px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.settings-drawer__preview-inner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* Light preview */
.settings-drawer__preview--light {
  background: linear-gradient(135deg, #f4f7fb 40%, #ffffff 100%);
}
.settings-drawer__preview--light .settings-drawer__preview-inner {
  background: radial-gradient(circle, #d12a35 40%, #d12a35 100%);
}

/* Dark preview */
.settings-drawer__preview--dark {
  background: linear-gradient(135deg, #0b1220 40%, #111a2b 100%);
}
.settings-drawer__preview--dark .settings-drawer__preview-inner {
  background: radial-gradient(circle, #ff5c68 40%, #ff5c68 100%);
}

/* Ocean preview */
.settings-drawer__preview--ocean {
  background: linear-gradient(135deg, #0c1929 40%, #13243a 100%);
}
.settings-drawer__preview--ocean .settings-drawer__preview-inner {
  background: radial-gradient(circle, #38bdf8 40%, #2dd4bf 100%);
}

/* Forest preview */
.settings-drawer__preview--forest {
  background: linear-gradient(135deg, #0f1a12 40%, #17281d 100%);
}
.settings-drawer__preview--forest .settings-drawer__preview-inner {
  background: radial-gradient(circle, #4ade80 40%, #4ade80 100%);
}

/* ── Theme label ───────────────────────────────────────── */
.settings-drawer__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--drawer-text);
  text-align: center;
  line-height: 1.2;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767.98px) {
  .settings-btn {
    width: 38px;
    height: 38px;
  }
  .settings-btn svg {
    width: 18px;
    height: 18px;
  }
  .settings-drawer {
    width: 280px;
  }
  .settings-drawer__grid {
    gap: 10px;
  }
  .settings-drawer__card {
    padding: 10px 8px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  html,
  body,
  .settings-btn,
  .settings-drawer,
  .settings-overlay {
    transition: none !important;
    animation: none !important;
  }
}