/*
 * Cynventory Dark Mode Stylesheet
 * Applied via html[data-theme="dark"] — higher specificity than :root,
 * so these variables win over any page-level :root definitions.
 */

/* ═══════════════════════════════════════════════════════════════
   CSS VARIABLE OVERRIDES
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* ── Blue palette (brighter for dark bg legibility) ── */
  --blue-900: #0a1628;
  --blue-800: #0e1e40;
  --blue-700: #1a3a6b;
  --blue-600: #1e4d8c;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --blue-200: #3b6bb5;
  --blue-100: #162a50;
  --blue-50:  #0f1e38;

  /* ── Gray palette → inverted for dark surfaces ── */
  --gray-900: #e2e8f5;   /* primary text */
  --gray-800: #ccd8ed;
  --gray-700: #a8bcd4;   /* secondary text */
  --gray-600: #8899b5;
  --gray-500: #6a7fa0;   /* muted text */
  --gray-400: #546785;
  --gray-300: #263550;   /* borders */
  --gray-200: #1e2d46;   /* subtle borders — replaces #e5e7eb fallback */
  --gray-100: #182035;   /* subtle bg */
  --gray-50:  #131d30;   /* card / panel bg */
  --white:    #0e1524;   /* page background */

  /* ── Semantic colors (adjusted for dark bg) ── */
  --accent:       #22c5f5;
  --accent-light: #4dd6f7;
  --green:        #22d3a0;
  --amber:        #fbbf24;
  --red:          #f87171;
  --purple:       #a78bfa;

  /* ── Tinted light colors (for notification icons, badges) ── */
  --red-light:    #2d1117;
  --amber-light:  #271e0a;
  --green-light:  #0d2018;
  --purple-light: #1e1535;

  /* ── Shadow (stronger in dark mode) ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:   0 20px 48px rgba(0,0,0,.65);
  --shadow-blue: 0 8px 32px rgba(59,130,246,.3);

  /* ── Scrollbar ── */
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════
   BASE ELEMENTS
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body {
  background: var(--white);
  color: var(--gray-900);
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .topbar {
  background: #121c2e !important;
  border-bottom-color: #1a2840 !important;
  box-shadow: 0 1px 0 #1a2840, 0 2px 12px rgba(0,0,0,.3) !important;
}
html[data-theme="dark"] .menu-btn {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .menu-btn:hover {
  background: #1e2840 !important;
  border-color: #263550 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .icon-btn {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .icon-btn:hover {
  background: #1e2840 !important;
  border-color: #263550 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .notif-dot {
  border-color: #121c2e !important;
}
html[data-theme="dark"] .topbar-search {
  background: #182035 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .topbar-search:focus-within {
  background: #1e2840 !important;
  border-color: var(--blue-400) !important;
}
html[data-theme="dark"] .topbar-search input {
  color: var(--gray-900) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWNS (topbar)
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .tb-dropdown {
  background: #192540 !important;
  border-color: #1f2f4a !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) !important;
}
html[data-theme="dark"] .tb-dropdown-header {
  border-bottom-color: #1e2d46 !important;
}
html[data-theme="dark"] .tb-dropdown-footer {
  border-top-color: #1e2d46 !important;
}
html[data-theme="dark"] .tb-dropdown-footer:hover {
  background: #1e2840 !important;
}

/* Notification items */
html[data-theme="dark"] .notif-item {
  border-bottom-color: #1e2d46 !important;
}
html[data-theme="dark"] .notif-item:hover {
  background: #1e2840 !important;
}
html[data-theme="dark"] .notif-item.unread {
  background: #122038 !important;
}
html[data-theme="dark"] .notif-item.unread:hover {
  background: #183050 !important;
}
html[data-theme="dark"] .notif-icon.red    { background: #2d1117 !important; }
html[data-theme="dark"] .notif-icon.amber  { background: #271e0a !important; }
html[data-theme="dark"] .notif-icon.green  { background: #0d2018 !important; }
html[data-theme="dark"] .notif-icon.blue   { background: #0f1e38 !important; border-color: #162a50 !important; }
html[data-theme="dark"] .notif-icon.purple { background: #1e1535 !important; }

/* Calendar */
html[data-theme="dark"] .cal-nav button {
  background: #1f2d48 !important;
  border-color: #263550 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .cal-nav button:hover {
  background: #263a58 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .cal-day {
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .cal-day:hover:not(.today) {
  background: #1e2840 !important;
}
html[data-theme="dark"] .cal-day.other-month {
  color: #2e3e5a !important;
}

/* Avatar dropdown */
html[data-theme="dark"] .avatar-dd-divider {
  background: #1e2d46 !important;
}
html[data-theme="dark"] .avatar-dd-item:hover {
  background: #1e2840 !important;
}
html[data-theme="dark"] .avatar-dd-item.danger:hover {
  background: #2d1117 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .sidebar {
  background: #080f1e !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.04) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE TOGGLE BUTTON (in sidebar)
═══════════════════════════════════════════════════════════════ */
.sw-theme-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
}
.sw-theme-row:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.12);
}
.sw-theme-icon-wrap {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
.sw-theme-icon-wrap svg {
  width: 15px; height: 15px;
  fill: none; stroke: rgba(255,255,255,.75);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sw-theme-label {
  flex: 1;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  font-family: var(--font-display, 'Sora', sans-serif);
}
.sw-theme-switch {
  width: 34px; height: 20px;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  position: relative;
  flex-shrink: 0;
  transition: background .22s;
  border: none;
  cursor: pointer;
  padding: 0;
}
.sw-theme-switch.active {
  background: var(--blue-500, #3b82f6);
}
.sw-theme-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.sw-theme-switch.active .sw-theme-thumb {
  transform: translateX(14px);
}

/* Theme toggle in topbar */
.theme-icon-btn .icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-btn .icon-sun  { display: none; }
html[data-theme="dark"] .theme-icon-btn .icon-moon { display: block; }

/* ═══════════════════════════════════════════════════════════════
   COMMON PAGE ELEMENTS
═══════════════════════════════════════════════════════════════ */

/* Cards / stat cards */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .content-card {
  background: var(--gray-50) !important;
  border-color: var(--gray-200) !important;
}

/* Tables */
html[data-theme="dark"] table {
  background: transparent !important;
}
html[data-theme="dark"] thead th,
html[data-theme="dark"] .table-header {
  background: #182035 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] tbody tr:hover {
  background: #182035 !important;
}
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  border-color: #1e2d46 !important;
}

/* Form inputs */
html[data-theme="dark"] .field-input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .field-input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  background: #1e2840 !important;
  border-color: var(--blue-400) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.12) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--gray-500) !important;
}

/* Select options */
html[data-theme="dark"] select option {
  background: #192540;
  color: var(--gray-900);
}

/* ── Buttons ── */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .social-btn {
  background: #1f2d48 !important;
  border-color: #263550 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .social-btn:hover {
  background: #263a58 !important;
  border-color: #2e4570 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .btn-primary {
  background: var(--blue-500) !important;
  color: #fff !important;
  border-color: var(--blue-500) !important;
}
html[data-theme="dark"] .btn-primary:hover {
  background: var(--blue-400) !important;
  border-color: var(--blue-400) !important;
}
html[data-theme="dark"] .btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .btn-ghost:hover {
  background: #1e2840 !important;
}
html[data-theme="dark"] .btn-danger {
  background: #2d1117 !important;
  border-color: #3d1920 !important;
  color: var(--red) !important;
}
html[data-theme="dark"] .btn-danger:hover {
  background: #3d1920 !important;
}

/* ── Custom checkbox ── */
html[data-theme="dark"] .custom-check {
  background: #182035 !important;
  border-color: #263550 !important;
}

/* ── Badges — base ── */
html[data-theme="dark"] .badge {
  background: #1e2840 !important;
  border-color: #263550 !important;
  color: var(--gray-700) !important;
}
/* ── Badges — specific variants (WCAG AA contrast on dark backgrounds) ── */
html[data-theme="dark"] .badge-green {
  background: #0d2018 !important;
  border-color: #1a4030 !important;
  color: #34d399 !important;
}
html[data-theme="dark"] .badge-amber {
  background: #271e0a !important;
  border-color: #3a2e10 !important;
  color: #fbbf24 !important;
}
html[data-theme="dark"] .badge-red {
  background: #2d1117 !important;
  border-color: #3d1920 !important;
  color: #f87171 !important;
}
html[data-theme="dark"] .badge-blue {
  background: #0f1e38 !important;
  border-color: #162a50 !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .badge-purple {
  background: #1e1535 !important;
  border-color: #2d1f50 !important;
  color: #c4b5fd !important;
}
html[data-theme="dark"] .badge-gray {
  background: #1e2840 !important;
  border-color: #263550 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .badge-dot {
  background: currentColor !important;
}

/* ── Toast ── */
html[data-theme="dark"] .toast {
  background: #1f2d48 !important;
  border-color: #263550 !important;
}

/* ── Modal / overlay backgrounds ── */
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .overlay,
html[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,.65) !important;
}
html[data-theme="dark"] .modal,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .drawer {
  background: #1a2538 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-900) !important;
}

/* ── Modal internal sections ── */
html[data-theme="dark"] .modal-header {
  background: #162030 !important;
  border-bottom-color: #1e2d46 !important;
}
html[data-theme="dark"] .modal-title {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .modal-close {
  background: #182035 !important;
  border-color: #263550 !important;
  color: var(--gray-600) !important;
}
html[data-theme="dark"] .modal-close:hover {
  background: #1e2840 !important;
  border-color: #2e4570 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .modal-body {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .modal-footer {
  background: #162030 !important;
  border-top-color: #1e2d46 !important;
}

/* ── Form labels & sections inside modals and pages ── */
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .field-label {
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .form-section-title {
  color: var(--gray-500) !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .form-hint,
html[data-theme="dark"] .field-hint {
  color: var(--gray-500) !important;
}

/* ── Confirm / alert dialogs ── */
html[data-theme="dark"] .confirm-modal {
  background: #1a2538 !important;
}
html[data-theme="dark"] .confirm-body {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .confirm-icon {
  background: #2d1117 !important;
}
html[data-theme="dark"] .confirm-title {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .confirm-msg {
  color: var(--gray-600) !important;
}

/* ── Side/detail panels ── */
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .alert-list-card {
  background: #1a2538 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .side-card-header,
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .alert-list-header {
  background: #162030 !important;
  border-bottom-color: #1e2d46 !important;
}
html[data-theme="dark"] .side-card-title,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .alert-list-title {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .side-card-body {
  color: var(--gray-900) !important;
}

/* ── Alert items (alerts page) ── */
html[data-theme="dark"] .alert-item {
  border-bottom-color: #1e2d46 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .alert-item:hover {
  background: #1e2840 !important;
}
html[data-theme="dark"] .alert-title {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .alert-msg {
  color: var(--gray-600) !important;
}
html[data-theme="dark"] .alert-time,
html[data-theme="dark"] .alert-tag {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .rule-item,
html[data-theme="dark"] .channel-item {
  border-bottom-color: #1e2d46 !important;
}
html[data-theme="dark"] .rule-name,
html[data-theme="dark"] .channel-name {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .rule-desc,
html[data-theme="dark"] .channel-desc {
  color: var(--gray-500) !important;
}

/* ── Search boxes in modals ── */
html[data-theme="dark"] .search-sm,
html[data-theme="dark"] .al-toolbar select {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .search-sm:focus-within {
  background: #1e2840 !important;
  border-color: var(--blue-400) !important;
}
html[data-theme="dark"] .search-sm input {
  color: var(--gray-900) !important;
  background: transparent !important;
}

/* ── Filter tabs ── */
html[data-theme="dark"] .filter-tabs {
  background: #182035 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .filter-tab {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .filter-tab:hover:not(.active) {
  background: #1e2840 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .filter-tab:not(.active) .tab-count {
  background: #263550 !important;
  color: var(--gray-500) !important;
}

/* ── Stat cards ── */
html[data-theme="dark"] .stat-val {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .stat-label {
  color: var(--gray-500) !important;
}

/* ── Tables in modal/panel context ── */
html[data-theme="dark"] .modal table,
html[data-theme="dark"] .side-card table {
  background: transparent !important;
}

/* ── Panel overlay (supplier/sales detail) ── */
html[data-theme="dark"] .panel-overlay {
  background: rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .detail-panel {
  background: #1a2538 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .detail-panel-header {
  background: #162030 !important;
  border-bottom-color: #1e2d46 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .detail-panel-body {
  color: var(--gray-900) !important;
}

/* ── Dropdown selects inside modals ── */
html[data-theme="dark"] .modal select,
html[data-theme="dark"] .modal input[type="text"],
html[data-theme="dark"] .modal input[type="number"],
html[data-theme="dark"] .modal input[type="email"],
html[data-theme="dark"] .modal input[type="tel"],
html[data-theme="dark"] .modal textarea {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .modal input:focus,
html[data-theme="dark"] .modal select:focus,
html[data-theme="dark"] .modal textarea:focus {
  background: #1e2840 !important;
  border-color: var(--blue-400) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.12) !important;
}

/* ── Alert boxes inside modals (restock warning, etc.) ── */
html[data-theme="dark"] .alert-box.critical {
  background: #2d1117 !important;
  border-color: #3d1920 !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .alert-box.warning,
html[data-theme="dark"] [style*="amber-light"] {
  background: #271e0a !important;
  border-color: #3a2e10 !important;
}

/* ── Inline style overrides: amber/green/red info boxes in modals ── */
html[data-theme="dark"] [style*="var(--amber-light)"] {
  background: #271e0a !important;
  border-color: #3a2e10 !important;
}
html[data-theme="dark"] [style*="var(--green-light)"] {
  background: #0d2018 !important;
  border-color: #1a4030 !important;
}
html[data-theme="dark"] [style*="var(--red-light)"] {
  background: #2d1117 !important;
  border-color: #3d1920 !important;
}

/* ── Dividers ── */
html[data-theme="dark"] .divider-line,
html[data-theme="dark"] hr {
  background: #1e2d46 !important;
}

/* ── Scrollbar ── */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px; height: 6px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #263550;
  border-radius: 3px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #2e3f5e;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN / REGISTER PAGES
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .form-panel {
  background: #111827 !important;
}
html[data-theme="dark"] .social-btn {
  background: #1f2d48 !important;
  border-color: #263550 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .social-btn:hover {
  background: #263a58 !important;
  border-color: #2e4570 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .trust-row {
  border-top-color: #1e2d46 !important;
}

/* 2FA step */
html[data-theme="dark"] .otp-digit {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .otp-digit:focus {
  background: #1e2840 !important;
  border-color: var(--blue-400) !important;
}
html[data-theme="dark"] .otp-digit.filled {
  background: #0f1e38 !important;
  border-color: var(--blue-500) !important;
  color: var(--blue-400) !important;
}
html[data-theme="dark"] .otp-digit.has-error {
  background: #2d1117 !important;
}
html[data-theme="dark"] .tfa-security-note {
  background: #182035 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .tfa-timer-badge {
  background: #182035 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .tfa-timer-badge.urgent {
  background: #2d1117 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DISCOUNT / REFERRAL PANEL (topbar)
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .disc-tier {
  background: #1a2538 !important;
  border-color: #263550 !important;
}
html[data-theme="dark"] .disc-tier.locked {
  background: #131d30 !important;
}
html[data-theme="dark"] .disc-tier.t-green.unlocked {
  background: linear-gradient(135deg, #0d2018, #112818) !important;
  border-color: #1a4030 !important;
}
html[data-theme="dark"] .disc-tier.t-blue.unlocked {
  background: linear-gradient(135deg, #0f1e38, #112040) !important;
  border-color: #1a3060 !important;
}
html[data-theme="dark"] .disc-tier.t-purple.unlocked {
  background: linear-gradient(135deg, #1e1535, #201540) !important;
  border-color: #301e5a !important;
}
html[data-theme="dark"] .disc-code-row {
  background: #182035 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .disc-code-row:hover {
  background: #1e2840 !important;
  border-color: #263a58 !important;
}
html[data-theme="dark"] .disc-stats {
  border-top-color: #1e2d46 !important;
}
html[data-theme="dark"] .disc-ref-note {
  background: #182035 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .disc-friend-empty {
  background: #182035 !important;
  border-color: #263550 !important;
}
html[data-theme="dark"] .disc-badge {
  border-color: #121c2e !important;
}
html[data-theme="dark"] .disc-upgrade-card {
  background: linear-gradient(135deg, #1e1a0a, #271e0a) !important;
  border-color: #3a2e10 !important;
}
html[data-theme="dark"] .disc-upgrade-title { color: #fcd34d !important; }
html[data-theme="dark"] .disc-upgrade-sub   { color: #d4a330 !important; }
html[data-theme="dark"] .disc-upgrade-feat  { color: #d4a330 !important; }

/* ── Referral tier cards (topbar panel) ── */
/* Unlocked tier percentages use their accent colour */
html[data-theme="dark"] .disc-tier.t-green.unlocked .disc-tier-pct { color: #34d399 !important; }
html[data-theme="dark"] .disc-tier.t-blue.unlocked  .disc-tier-pct { color: #60a5fa !important; }
html[data-theme="dark"] .disc-tier.t-purple.unlocked .disc-tier-pct { color: #c4b5fd !important; }
/* Locked tiers: muted but readable */
html[data-theme="dark"] .disc-tier.locked .disc-tier-pct { color: #4a6080 !important; }
/* Labels, counts, fake codes — all tiers */
html[data-theme="dark"] .disc-tier-pct    { color: #a8bcd4 !important; }
html[data-theme="dark"] .disc-tier-label  { color: #6a7fa0 !important; }
html[data-theme="dark"] .disc-tier-count  { color: #8899b5 !important; }
html[data-theme="dark"] .disc-tier.locked .disc-tier-count { color: #4a6080 !important; }
html[data-theme="dark"] .disc-fake-code   { color: #6a7fa0 !important; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .disc-tier.unlocked .disc-fake-code { color: #c8d8f0 !important; background: rgba(255,255,255,.10) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15) !important; }
html[data-theme="dark"] .disc-tier.t-green.unlocked .disc-fake-code { color: #6ee7b7 !important; }
html[data-theme="dark"] .disc-tier.t-blue.unlocked  .disc-fake-code { color: #93c5fd !important; }
html[data-theme="dark"] .disc-tier.t-purple.unlocked .disc-fake-code { color: #c4b5fd !important; }
html[data-theme="dark"] .disc-tier.copied .disc-fake-code { color: #34d399 !important; }
html[data-theme="dark"] .disc-tier-copied { background: rgba(30,40,60,.95) !important; color: #34d399 !important; box-shadow: 0 3px 10px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] .disc-tier-icon   { background: rgba(255,255,255,.07) !important; }
html[data-theme="dark"] .disc-tier.locked .disc-tier-icon { background: rgba(255,255,255,.04) !important; }

/* ── Referral note & friend list ── */
html[data-theme="dark"] .disc-ref-note-title { color: #c8d8ee !important; }
html[data-theme="dark"] .disc-ref-note-text  { color: #8899b5 !important; }
html[data-theme="dark"] .disc-friend-empty   { color: #6a7fa0 !important; }

/* ── Discount code text legibility (topbar panel) ── */
html[data-theme="dark"] .disc-code-row *,
html[data-theme="dark"] .disc-code-val,
html[data-theme="dark"] .disc-code-label { color: var(--gray-900) !important; }
html[data-theme="dark"] .disc-code-sub   { color: var(--gray-500) !important; }
html[data-theme="dark"] .disc-pct        { color: var(--accent-light, #4dd6f7) !important; font-weight: 700 !important; }
html[data-theme="dark"] .disc-codes-title { color: #6a7fa0 !important; }
html[data-theme="dark"] .disc-ref-note p,
html[data-theme="dark"] .disc-ref-note span { color: #8899b5 !important; }
html[data-theme="dark"] .disc-stat        { color: #8899b5 !important; }
html[data-theme="dark"] .tb-dropdown-header > span { color: #c8d8ee !important; }
html[data-theme="dark"] .disc-panel-title,
html[data-theme="dark"] .disc-section-title { color: var(--gray-900) !important; }
html[data-theme="dark"] .disc-panel-sub   { color: var(--gray-500) !important; }
/* Inline coupon/promo code box */
html[data-theme="dark"] .promo-code-box,
html[data-theme="dark"] .coupon-code,
html[data-theme="dark"] .discount-code { background: #0f1e38 !important; border-color: #1e3060 !important; color: #93c5fd !important; }
html[data-theme="dark"] .promo-label,
html[data-theme="dark"] .discount-label { color: var(--gray-700) !important; }
html[data-theme="dark"] .promo-value,
html[data-theme="dark"] .discount-value { color: var(--green) !important; font-weight: 700 !important; }

/* Discount/referral text: keep every code and helper label comfortably above
   WCAG AA contrast on dark panels, even when page-level inline colors exist. */
html[data-theme="dark"] .disc-code-row,
html[data-theme="dark"] .disc-code-row div,
html[data-theme="dark"] .disc-code-row span,
html[data-theme="dark"] .disc-code-row code,
html[data-theme="dark"] [class*="discount"] code,
html[data-theme="dark"] [class*="coupon"] code,
html[data-theme="dark"] [class*="promo"] code {
  color: #eef6ff !important;
}
html[data-theme="dark"] .disc-code-val,
html[data-theme="dark"] .discount-code,
html[data-theme="dark"] .coupon-code,
html[data-theme="dark"] .promo-code-box {
  background: #082f49 !important;
  border-color: #38bdf8 !important;
  color: #f8fafc !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .disc-code-sub,
html[data-theme="dark"] .disc-code-label,
html[data-theme="dark"] .promo-label,
html[data-theme="dark"] .discount-label {
  color: #cbd5e1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   STOCK CENTER PAGE
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .kpi { background: var(--gray-50) !important; border-color: var(--gray-200) !important; }
html[data-theme="dark"] .kpi-val { color: var(--gray-900) !important; }
html[data-theme="dark"] .kpi-val.danger { color: var(--red) !important; }
html[data-theme="dark"] .kpi-val.warn   { color: var(--amber) !important; }
html[data-theme="dark"] .kpi-lbl { color: var(--gray-500) !important; }
html[data-theme="dark"] .tabs-bar { background: var(--gray-50) !important; border-color: var(--gray-200) !important; }
html[data-theme="dark"] .tab-btn { color: var(--gray-500) !important; }
html[data-theme="dark"] .tab-btn:hover { background: var(--gray-100) !important; color: var(--gray-900) !important; }
html[data-theme="dark"] .tab-btn.active { background: var(--blue-500) !important; color: #fff !important; }
html[data-theme="dark"] .panel { background: var(--gray-50) !important; border-color: var(--gray-200) !important; }
html[data-theme="dark"] .panel-head { border-color: var(--gray-200) !important; }
html[data-theme="dark"] .panel-head-left h3 { color: var(--gray-900) !important; }
html[data-theme="dark"] .panel-head-left p  { color: var(--gray-500) !important; }
html[data-theme="dark"] .ctrl { background: var(--gray-100) !important; border-color: var(--gray-300) !important; color: var(--gray-900) !important; }
html[data-theme="dark"] .ctrl:focus { border-color: var(--blue-400) !important; box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important; }
html[data-theme="dark"] .ctrl::placeholder { color: var(--gray-400) !important; }
html[data-theme="dark"] .product-result-item { background: var(--gray-100) !important; border-color: var(--gray-300) !important; }
html[data-theme="dark"] .product-result-item:hover { background: var(--blue-50) !important; border-color: var(--blue-300) !important; }
html[data-theme="dark"] .product-result-item .name { color: var(--gray-900) !important; }
html[data-theme="dark"] .selected-product-box { background: var(--blue-50) !important; border-color: var(--blue-300) !important; }
html[data-theme="dark"] .loc-card { background: var(--gray-100) !important; border-color: var(--gray-300) !important; }
html[data-theme="dark"] .loc-card.default { background: var(--blue-50) !important; border-color: var(--blue-200) !important; }
html[data-theme="dark"] .loc-name { color: var(--gray-900) !important; }
html[data-theme="dark"] .loc-icon { background: var(--gray-200) !important; }
html[data-theme="dark"] .mov-row { background: var(--gray-100) !important; border-color: var(--gray-200) !important; }
html[data-theme="dark"] .mov-name { color: var(--gray-900) !important; }
html[data-theme="dark"] .mov-detail { color: var(--gray-500) !important; }
html[data-theme="dark"] .barcode-hit { background: var(--gray-100) !important; border-color: var(--gray-200) !important; }
html[data-theme="dark"] .barcode-hit:hover { border-color: var(--blue-400) !important; }
html[data-theme="dark"] .barcode-hit .name { color: var(--gray-900) !important; }
html[data-theme="dark"] .alert-strip { background: #2d1117 !important; border-color: #5c1d1d !important; color: #fca5a5 !important; }
html[data-theme="dark"] table th { background: var(--gray-100) !important; color: var(--gray-500) !important; border-color: var(--gray-200) !important; }
html[data-theme="dark"] table td { border-color: var(--gray-200) !important; color: var(--gray-700) !important; }
html[data-theme="dark"] tbody tr:hover td { background: var(--gray-100) !important; }
html[data-theme="dark"] .btn-ghost { background: var(--gray-100) !important; border-color: var(--gray-300) !important; color: var(--gray-700) !important; }
html[data-theme="dark"] .btn-ghost:hover { background: var(--gray-200) !important; }
html[data-theme="dark"] .modal-box { background: var(--gray-50) !important; }
html[data-theme="dark"] .modal-box h3 { color: var(--gray-900) !important; }
html[data-theme="dark"] .modal-box p  { color: var(--gray-500) !important; }

/* ═══════════════════════════════════════════════════════════════
   POS FAB — keep same (it's a CTA, stays bright)
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PAGE-SPECIFIC: COMMON DASHBOARD PATTERNS
═══════════════════════════════════════════════════════════════ */

/* Section headers / page headers */
html[data-theme="dark"] .page-header {
  border-bottom-color: #1e2d46 !important;
}

/* Status tabs */
html[data-theme="dark"] .status-tab,
html[data-theme="dark"] .tab-item {
  color: var(--gray-500) !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .status-tab:hover,
html[data-theme="dark"] .tab-item:hover {
  background: #182035 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .status-tab.active,
html[data-theme="dark"] .tab-item.active {
  color: var(--blue-400) !important;
  border-color: var(--blue-400) !important;
  background: transparent !important;
}

/* Filter bar */
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .table-toolbar {
  background: #131d30 !important;
  border-color: #1e2d46 !important;
}

/* Empty states */
html[data-theme="dark"] .empty-state {
  background: #131d30 !important;
  border-color: #1e2d46 !important;
}

/* Pagination */
html[data-theme="dark"] .page-btn {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .page-btn:hover {
  background: #1e2840 !important;
}
html[data-theme="dark"] .page-btn.active {
  background: var(--blue-500) !important;
  border-color: var(--blue-500) !important;
  color: #fff !important;
}

/* Toggle switches */
html[data-theme="dark"] .toggle-switch {
  background: #263550 !important;
}
html[data-theme="dark"] .toggle-switch.on {
  background: var(--blue-500) !important;
}
html[data-theme="dark"] .toggle-thumb {
  box-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
}

/* Settings sections */
html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .settings-card {
  background: #131d30 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .settings-row {
  border-bottom-color: #1e2d46 !important;
}
html[data-theme="dark"] .settings-row:last-child {
  border-bottom: none !important;
}

/* Chart containers */
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] canvas {
  filter: brightness(.95) saturate(.9);
}

/* ═══════════════════════════════════════════════════════════════
   POS PAGE (sales2.php) — full dark mode
═══════════════════════════════════════════════════════════════ */

/* ── POS layout base ── */
html[data-theme="dark"] .pos-header {
  background: #0e1524 !important;
  border-bottom-color: #1a2840 !important;
  box-shadow: 0 1px 0 #1a2840, 0 2px 12px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .pos-brand span {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .pos-brand small {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .pos-back {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .pos-back:hover {
  background: #1e2840 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .pos-clock {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .pos-date-lbl,
html[data-theme="dark"] .pos-time-lbl {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .pos-hdr-btn {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .pos-hdr-btn:hover {
  background: #1e2840 !important;
  color: var(--gray-900) !important;
}

/* ── POS left panel (product grid) ── */
html[data-theme="dark"] .pos-left {
  background: #0d1117 !important;
  border-color: #1a2840 !important;
}
html[data-theme="dark"] .pos-search-wrap {
  background: #0d1117 !important;
  border-bottom-color: #1a2840 !important;
}
html[data-theme="dark"] .pos-search {
  background: #182035 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .pos-search input {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .pos-search input::placeholder {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .pos-cat-bar {
  background: #0d1117 !important;
  border-bottom-color: #1a2840 !important;
}
html[data-theme="dark"] .pos-cat-btn {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-600) !important;
}
html[data-theme="dark"] .pos-cat-btn.active {
  background: var(--blue-500) !important;
  border-color: var(--blue-500) !important;
  color: #fff !important;
}
html[data-theme="dark"] .pos-product-grid {
  background: #0d1117 !important;
}
html[data-theme="dark"] .pos-product-card {
  background: #131d30 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .pos-product-card:hover {
  background: #1a2840 !important;
  border-color: #2a3e60 !important;
}
html[data-theme="dark"] .ppc-name {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .ppc-price {
  color: var(--blue-400) !important;
}
html[data-theme="dark"] .ppc-stock {
  color: var(--gray-500) !important;
}

/* ── POS right panel (cart) ── */
html[data-theme="dark"] .pos-right {
  background: #0e1524 !important;
  border-left-color: #1a2840 !important;
}
html[data-theme="dark"] .cart-hdr {
  background: #0e1524 !important;
  border-bottom-color: #1a2840 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .cart-list {
  background: #0e1524 !important;
}
html[data-theme="dark"] .cart-item {
  border-bottom-color: #1a2840 !important;
}
html[data-theme="dark"] .cart-item:hover {
  background: #131d30 !important;
}
html[data-theme="dark"] .cart-item-name {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .cart-item-price {
  color: var(--gray-600) !important;
}
html[data-theme="dark"] .cart-item-total {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .cart-qty-btn {
  background: #1e2840 !important;
  border-color: #263550 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .cart-qty-btn:hover {
  background: #263a58 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .cart-qty-val {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .cart-remove-btn {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .cart-remove-btn:hover {
  color: var(--red) !important;
}
html[data-theme="dark"] .cart-footer {
  background: #0e1524 !important;
  border-top-color: #1a2840 !important;
}
html[data-theme="dark"] .cart-summary-row {
  color: var(--gray-600) !important;
}
html[data-theme="dark"] .cart-summary-row.total {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .cart-discount-row {
  color: var(--green) !important;
}
html[data-theme="dark"] .payment-tabs {
  background: #131d30 !important;
  border-color: #1e2d46 !important;
}
html[data-theme="dark"] .payment-tab {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .payment-tab.active {
  background: var(--blue-500) !important;
  color: #fff !important;
}
html[data-theme="dark"] .cart-note-input {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .cart-note-input::placeholder {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .charge-btn:disabled {
  background: #182035 !important;
  color: var(--gray-500) !important;
}

/* ── Recent Sales Panel ── */
html[data-theme="dark"] .recent-panel {
  background: #0e1524 !important;
  box-shadow: -8px 0 32px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .rp-list {
  background: #0e1524 !important;
}
html[data-theme="dark"] .rs-row {
  border-bottom-color: #1a2840 !important;
}
html[data-theme="dark"] .rs-row:hover {
  background: #131d30 !important;
}
html[data-theme="dark"] .rs-row.returned {
  background: #12111a !important;
  border-left: 3px solid #ef4444 !important;
  padding-left: 17px !important;
}
html[data-theme="dark"] .rs-row.returned:hover {
  background: #17151f !important;
}
html[data-theme="dark"] .rs-id {
  color: var(--blue-400) !important;
}
html[data-theme="dark"] .rs-meta,
html[data-theme="dark"] .rs-method {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .rs-total {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .no-recent {
  color: var(--gray-500) !important;
}

/* ── Recent sales action buttons ── */
html[data-theme="dark"] .rs-print-btn {
  background: #0f1e38 !important;
  border-color: #1a3060 !important;
  color: var(--blue-400) !important;
}
html[data-theme="dark"] .rs-print-btn:hover {
  background: var(--blue-500) !important;
  border-color: var(--blue-500) !important;
  color: #fff !important;
}
html[data-theme="dark"] .rs-return-btn {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.25) !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .rs-return-btn:hover {
  background: rgba(245,158,11,.22) !important;
  border-color: rgba(245,158,11,.45) !important;
  color: #fff !important;
}
html[data-theme="dark"] .rs-rereturn-btn {
  background: rgba(239,68,68,.1) !important;
  border-color: rgba(239,68,68,.25) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .rs-rereturn-btn:hover {
  background: rgba(239,68,68,.22) !important;
  border-color: rgba(239,68,68,.45) !important;
  color: #fff !important;
}
html[data-theme="dark"] .rs-returned-tag {
  background: rgba(239,68,68,.14) !important;
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,.28) !important;
}

/* ── Receipt Modal ── */
html[data-theme="dark"] .receipt-modal {
  background: #131d30 !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .rcpt-body {
  background: #131d30 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .rcpt-items {
  border-top-color: #1e2d46 !important;
}
html[data-theme="dark"] .rcpt-item {
  border-bottom-color: #1e2d46 !important;
}
html[data-theme="dark"] .rcpt-item-name {
  color: var(--gray-800) !important;
}
html[data-theme="dark"] .rcpt-item-qty {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .rcpt-item-total {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .rcpt-totals {
  border-top-color: #1e2d46 !important;
}
html[data-theme="dark"] .rcpt-total-row {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .rcpt-total-row.grand {
  color: var(--gray-900) !important;
  border-top-color: #263550 !important;
}
html[data-theme="dark"] .rcpt-pay-badge {
  background: #182035 !important;
  color: var(--gray-600) !important;
}
html[data-theme="dark"] .rcpt-actions {
  background: #131d30 !important;
  border-top: 1px solid #1a2840;
}
html[data-theme="dark"] .rcpt-btn.ghost {
  background: #1e2840 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .rcpt-btn.ghost:hover {
  background: #263a58 !important;
  color: var(--gray-900) !important;
}

/* ── Receipt No Modal ── */
html[data-theme="dark"] .receipt-no-overlay .receipt-modal,
html[data-theme="dark"] .receipt-no-modal {
  background: #131d30 !important;
}

/* ── Return Modal ── */
html[data-theme="dark"] .return-modal {
  background: #131d30 !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .ret-body {
  background: #131d30 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .ret-section-lbl {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .ret-item {
  border-bottom-color: #1e2d46 !important;
}
html[data-theme="dark"] .ret-item-name {
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .ret-item-sub {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .ret-qty-lbl {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .ret-qty-inp {
  background: #182035 !important;
  border-color: #1e2d46 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .ret-qty-inp:focus {
  border-color: var(--amber) !important;
  background: #1e2840 !important;
}
html[data-theme="dark"] .ret-qty-inp:disabled {
  background: #131d30 !important;
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .ret-divider {
  border-top-color: #1e2d46 !important;
}
html[data-theme="dark"] .ret-total-lbl {
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .ret-all-returned {
  color: var(--gray-500) !important;
}
html[data-theme="dark"] .ret-actions {
  background: #131d30 !important;
  border-top: 1px solid #1a2840;
}
html[data-theme="dark"] .ret-btn.ghost {
  background: #1e2840 !important;
  color: var(--gray-700) !important;
}
html[data-theme="dark"] .ret-btn.ghost:hover {
  background: #263a58 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .ret-btn.primary:disabled {
  background: #182035 !important;
  color: var(--gray-500) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .ret-close:hover {
  background: rgba(255,255,255,.25) !important;
}

/* ── POS page toasts ── */
html[data-theme="dark"] .p-toast {
  background: #1f2d48 !important;
  color: var(--gray-900) !important;
}
html[data-theme="dark"] .p-toast.success { background: #0d2018 !important; color: var(--green) !important; }
html[data-theme="dark"] .p-toast.error   { background: #2d1117 !important; color: var(--red) !important; }
html[data-theme="dark"] .p-toast.warning { background: #271e0a !important; color: var(--amber) !important; }

/* ═══════════════════════════════════════════════════════════════
   TRANSITION — smooth theme switch
═══════════════════════════════════════════════════════════════ */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color .28s cubic-bezier(.4,0,.2,1),
    border-color     .28s cubic-bezier(.4,0,.2,1),
    color            .2s  cubic-bezier(.4,0,.2,1),
    box-shadow       .28s cubic-bezier(.4,0,.2,1) !important;
}