/**
 * PlainShield Admin Panel
 * Replaces WowDash style.css (316KB -> ~20KB)
 * Requires: Bootstrap 5, remixicon.css
 */

/* ============================================================
   1. FONTS
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

/* ============================================================
   2. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* ---- Typography ---- */
  --h1: clamp(1.375rem, 1.5vw, 1.75rem);
  --h2: clamp(1.25rem, 1.3vw, 1.5rem);
  --h3: clamp(1.125rem, 1.2vw, 1.3rem);
  --h4: clamp(1rem, 1.1vw, 1.125rem);
  --h5: clamp(0.875rem, 1vw, 1rem);
  --h6: clamp(0.8125rem, 0.9vw, 0.875rem);

  --font-2xxl: 2rem;
  --font-2xl: 1.75rem;
  --font-xxl: 1.5rem;
  --font-xl: 1.25rem;
  --font-lg: 1.125rem;
  --font-md: 1rem;
  --font-sm: 0.875rem;
  --font-xs: 0.75rem;
  --font-xxs: 0.625rem;

  /* ---- Size scale ---- */
  --size-2: 0.125rem;
  --size-4: 0.25rem;
  --size-6: 0.375rem;
  --size-8: 0.5rem;
  --size-9: 0.5625rem;
  --size-10: 0.625rem;
  --size-11: 0.6875rem;
  --size-12: 0.75rem;
  --size-13: 0.8125rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-28: 1.75rem;
  --size-32: 2rem;
  --size-36: 2.25rem;
  --size-40: 2.5rem;
  --size-44: 2.75rem;
  --size-48: 3rem;
  --size-50: 3.125rem;
  --size-56: 3.5rem;
  --size-60: 3.75rem;
  --size-64: 4rem;
  --size-72: 4.5rem;
  --size-76: 4.75rem;
  --size-80: 5rem;
  --size-90: 5.625rem;
  --size-110: 6.875rem;
  --size-120: 7.5rem;
  --size-144: 9rem;
  --size-160: 10rem;
  --size-170: 10.625rem;
  --size-190: 11.875rem;
  --size-200: 12.5rem;
  --size-240: 15rem;
  --size-440: 27.5rem;

  /* ---- Border-radius scale ---- */
  --rounded-4: 0.25rem;
  --rounded-8: 0.5rem;
  --rounded-12: 0.75rem;
  --rounded-16: 1rem;

  /* ---- Shadows ---- */
  --shadow-card: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
  --shadow-dropdown: 0px 4px 16px 0px rgba(46, 45, 116, 0.08);

  /* ---- Primary (steel-blue) ---- */
  --primary-50: #F0F3F6;
  --primary-100: #D9E0E8;
  --primary-200: #B3C1D1;
  --primary-300: #8DA2B9;
  --primary-400: #6783A2;
  --primary-500: #47668C;
  --primary-600: #334F73;
  --primary-700: #293F5C;
  --primary-800: #1F3048;
  --primary-900: #202B3B;

  /* ---- Neutral ---- */
  --neutral-50: #F7F8FA;
  --neutral-100: #EEF0F4;
  --neutral-200: #D8DCE3;
  --neutral-300: #B8BFC9;
  --neutral-400: #899BAF;
  --neutral-500: #7A7F83;
  --neutral-600: #6C747C;
  --neutral-700: #4A5568;
  --neutral-800: #2D3748;
  --neutral-900: #1A202C;

  /* ---- Danger ---- */
  --danger-50: #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-200: #FECACA;
  --danger-300: #FCA5A5;
  --danger-400: #F87171;
  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;
  --danger-800: #991B1B;
  --danger-900: #7F1D1D;

  /* ---- Success ---- */
  --success-50: #F0FDF4;
  --success-100: #DCFCE7;
  --success-200: #BBF7D0;
  --success-300: #86EFAC;
  --success-400: #4ADE80;
  --success-500: #22C55E;
  --success-600: #16A34A;
  --success-700: #15803D;
  --success-800: #166534;
  --success-900: #14532D;

  /* ---- Warning ---- */
  --warning-50: #FEFCE8;
  --warning-100: #FEF3C7;
  --warning-200: #FEF08A;
  --warning-300: #FDE047;
  --warning-400: #FACC15;
  --warning-500: #EAB308;
  --warning-600: #D97706;
  --warning-700: #B45309;
  --warning-800: #92400E;
  --warning-900: #78350F;

  /* ---- Info ---- */
  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-200: #BFDBFE;
  --info-300: #93C5FD;
  --info-400: #60A5FA;
  --info-500: #3B82F6;
  --info-600: #2563EB;
  --info-700: #1D4ED8;
  --info-800: #1E40AF;
  --info-900: #1E3A8A;

  /* ---- Cyan (stat icons) ---- */
  --cyan: #0097C7;

  /* ---- Semantic main/focus/surface ---- */
  --success-main: #16A34A;
  --success-surface: #DCFCE7;
  --success-focus: rgba(22, 163, 74, 0.15);
  --info-main: #2563EB;
  --info-surface: #DBEAFE;
  --info-focus: rgba(37, 99, 235, 0.15);
  --warning-main: #D97706;
  --warning-surface: #FEF3C7;
  --warning-focus: rgba(217, 119, 6, 0.15);
  --danger-main: #DC2626;
  --danger-surface: #FEE2E2;
  --danger-focus: rgba(220, 38, 38, 0.15);

  /* ---- Semantic aliases ---- */
  --base: #fff;
  --brand: var(--primary-600);
  --black: var(--neutral-800);
  --white: var(--base);
  --bg-color: var(--neutral-50);
  --text-primary-light: var(--neutral-900);
  --text-secondary-light: var(--neutral-600);
  --text-secondary-dark: var(--neutral-300);
  --input-form-light: var(--neutral-300);
  --input-bg: var(--neutral-50);
  --input-stroke: var(--neutral-300);
  --border-color: #d1d5db80;
}

/* ============================================================
   3. DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --black: var(--base);
  --white: #273142;
  --bg-color: #1B2431;
  --text-primary-light: var(--base);
  --text-secondary-light: #D1D5DB;
  --text-secondary-dark: #273142;
  --input-form-light: #6B7280;
  --input-bg: #323D4E;
  --input-stroke: #F3F4F6;
  --border-color: #d1d5db33;

  /* Invert neutral scale for dark */
  --neutral-50: #1B2431;
  --neutral-100: #273142;
  --neutral-200: #323D4E;
  --neutral-300: #4B5563;
  --neutral-400: #6B7280;
  --neutral-500: #9CA3AF;
  --neutral-600: #D1D5DB;
  --neutral-700: #EBECEF;
  --neutral-800: #F3F4F6;
  --neutral-900: #F5F6FA;

  /* Subdue light tints */
  --primary-50: rgba(240, 243, 246, 0.06);
  --info-50: rgba(239, 246, 255, 0.06);
  --warning-50: rgba(254, 252, 232, 0.06);
  --success-50: rgba(240, 253, 244, 0.06);
  --danger-50: rgba(254, 242, 242, 0.06);
  --success-100: rgba(220, 252, 231, 0.06);
  --danger-100: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .sidebar-logo img.light-logo { display: none; }
[data-theme="dark"] .sidebar-logo img.dark-logo { display: inline-block; }
[data-theme="dark"] .sidebar.active .sidebar-logo img.light-logo { display: none; }
[data-theme="dark"] .sidebar.active:hover .sidebar-logo img.light-logo { display: none; }
[data-theme="dark"] .sidebar.active:hover .sidebar-logo img.dark-logo { display: inline-block; }

/* ============================================================
   4. RESET / BASE
   ============================================================ */
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  color: var(--text-secondary-light);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  padding: 0;
  margin: 0;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.overlay-active::after { width: 100%; }
body::after {
  position: absolute;
  content: "";
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  transition: all 0.3s;
}

h1, .h1 { font-size: var(--h1); font-weight: 700; line-height: 1.2; color: var(--text-primary-light); }
h2, .h2 { font-size: var(--h2); font-weight: 600; line-height: 1.25; color: var(--text-primary-light); }
h3, .h3 { font-size: var(--h3); font-weight: 600; line-height: 1.3; color: var(--text-primary-light); }
h4, .h4 { font-size: var(--h4); font-weight: 600; line-height: 1.35; color: var(--text-primary-light); }
h5, .h5 { font-size: var(--h5); font-weight: 600; line-height: 1.4; color: var(--text-primary-light); }
h6, .h6 { font-size: var(--h6); font-weight: 600; line-height: 1.45; color: var(--text-primary-light); }

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.8125rem;
}

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 40px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

/* ============================================================
   5. LAYOUT - SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: -100%;
  width: 15.625rem;
  height: 100vh;
  background-color: var(--white);
  z-index: 3;
  transition: all 0.3s;
}
@media (min-width: 1200px) { .sidebar { inset-inline-start: 0; width: 13.75rem; } }
@media (min-width: 1400px) { .sidebar { width: 17.1875rem; } }
@media (min-width: 1650px) { .sidebar { width: 19.5rem; } }

.sidebar.sidebar-open { inset-inline-start: 0; }

.sidebar.active { width: 86px; }
.sidebar.active:hover { width: auto; }
@media (min-width: 1200px) { .sidebar.active:hover { inset-inline-start: 0; } }
@media (min-width: 1400px) { .sidebar.active:hover { width: 17.1875rem; } }
@media (min-width: 1650px) { .sidebar.active:hover { width: 19.5rem; } }

/* Collapsed: hide text, show icons */
.sidebar.active .sidebar-logo img.light-logo,
.sidebar.active .sidebar-logo img.dark-logo { display: none; }
.sidebar.active .sidebar-logo img.logo-icon { display: inline-block; }
.sidebar.active .sidebar-menu li a span { display: none; }
.sidebar.active .sidebar-menu li a .menu-icon { margin-inline-end: 0; }
.sidebar.active .sidebar-menu li a i { margin-inline-end: 16px; }
.sidebar.active .sidebar-menu li.sidebar-menu-group-title { display: none; }
.sidebar.active .sidebar-menu li.dropdown.dropdown-open .sidebar-submenu,
.sidebar.active .sidebar-menu li.dropdown.open .sidebar-submenu { display: none !important; }
.sidebar.active .sidebar-menu li.dropdown a::after { display: none; }

/* Collapsed hover: restore text */
.sidebar.active:hover .sidebar-logo img.light-logo { display: inline-block; }
.sidebar.active:hover .sidebar-logo img.logo-icon { display: none; }
.sidebar.active:hover .sidebar-menu li a span { display: inline-block; }
.sidebar.active:hover .sidebar-menu li a .menu-icon { margin-inline-end: 0.5rem; }
.sidebar.active:hover .sidebar-menu li.sidebar-menu-group-title { display: inline-block; }
.sidebar.active:hover .sidebar-menu li.dropdown.dropdown-open .sidebar-submenu,
.sidebar.active:hover .sidebar-menu li.dropdown.open .sidebar-submenu { display: block !important; }
.sidebar.active:hover .sidebar-menu li.dropdown a::after { display: inline-block; }

.sidebar-close-btn {
  position: absolute;
  top: 0.625rem;
  inset-inline-end: 0.625rem;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--input-form-light);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media (min-width: 1200px) { .sidebar-close-btn { display: none; } }

.sidebar-logo {
  height: 4.5rem;
  padding: 0.875rem 1rem;
  border-inline-end: 1px solid var(--neutral-200);
  border-block-end: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.sidebar-logo img { max-height: 3.4375rem; }
.sidebar-logo img.dark-logo { display: none; }
.sidebar-logo img.logo-icon { display: none; }

.sidebar-menu-area {
  height: calc(100vh - 72px);
  padding: 0.75rem 1rem;
  overflow-y: auto;
  border-inline-end: 1px solid var(--neutral-200);
}
.sidebar-menu-area::-webkit-scrollbar { width: 6px; background-color: var(--white); }
.sidebar-menu-area::-webkit-scrollbar-thumb { background-color: var(--white); }
.sidebar-menu-area:hover::-webkit-scrollbar-thumb { background-color: var(--neutral-200); }

.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li { list-style: none; }

.sidebar-menu li a {
  padding: 0.625rem 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  color: var(--text-secondary-light);
  border-radius: 8px;
  font-size: 0.875rem;
  transition: color 0.15s, background-color 0.15s;
  cursor: pointer;
}
@media (min-width: 1650px) { .sidebar-menu li a { font-size: 1rem; } }
.sidebar-menu li a:hover { color: var(--primary-600); }

.sidebar-menu li a .menu-icon {
  font-size: 1.125rem;
  margin-inline-end: 0.5rem;
}
@media (min-width: 1650px) {
  .sidebar-menu li a .menu-icon { font-size: 1.375rem; margin-inline-end: 0.75rem; }
}

.sidebar-menu li a i {
  line-height: 1.2;
  width: 24px;
  margin-inline-end: 0.75rem;
  font-size: 1.375rem;
}

/* Active state (from PHP $activeClass and from jQuery active-page) */
.sidebar-menu li > a.active,
.sidebar-menu li > a.active-page {
  background-color: var(--primary-600);
  color: #fff;
}
.sidebar-menu li > a.active:hover,
.sidebar-menu li > a.active-page:hover { color: #fff; }

/* Dropdown open state */
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a {
  background-color: var(--primary-600);
  color: #fff;
}
.sidebar-menu li.dropdown.open > a:hover,
.sidebar-menu li.dropdown.dropdown-open > a:hover { color: #fff; }

.sidebar-menu-group-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-400);
  padding: 1.25rem 0.75rem 0.375rem;
  display: block;
}

/* ============================================================
   5b. LAYOUT - NAVBAR & DASHBOARD MAIN
   ============================================================ */
.navbar-header {
  height: 4.5rem;
  background-color: var(--white);
  position: sticky;
  top: 0;
  padding: 1rem 1.5rem;
  z-index: 2;
}

.sidebar-toggle,
.sidebar-mobile-toggle {
  line-height: 1.2;
  color: var(--text-primary-light);
  cursor: pointer;
  background: none;
  border: none;
}
.sidebar-toggle .icon,
.sidebar-mobile-toggle .icon { font-size: 1.375rem; }

.sidebar-toggle { display: none; }
@media (min-width: 1200px) { .sidebar-toggle { display: inline-block; } }

.sidebar-toggle.active .icon.non-active { display: none; }
.sidebar-toggle.active .icon.active { display: inline-block; }
.sidebar-toggle .icon.active { display: none; }

.sidebar-mobile-toggle { display: inline-block; }
@media (min-width: 1200px) { .sidebar-mobile-toggle { display: none; } }

.dashboard-main {
  margin-inline-start: 0;
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  min-height: 100vh;
  transition: all 0.3s;
}
@media (min-width: 1200px) { .dashboard-main { margin-inline-start: 13.75rem; } }
@media (min-width: 1400px) { .dashboard-main { margin-inline-start: 17.1875rem; } }
@media (min-width: 1650px) { .dashboard-main { margin-inline-start: 19.5rem; } }

@media (min-width: 1199px) {
  .dashboard-main.active { margin-inline-start: 5.375rem; }
}

.dashboard-main-body { padding: 0.9375rem; }
@media (min-width: 1400px) { .dashboard-main-body { padding: 1.5rem; } }
/* Cap readable width on ultrawide screens — prevents content from
   stretching edge-to-edge on 27"+ monitors while respecting the
   sidebar margin. Max inner width of 1600px, auto-centered. */
@media (min-width: 1600px) {
  .dashboard-main-body { max-width: 1600px; margin-inline: auto; width: 100%; }
}

/* Navbar stays full-width so the sidebar-toggle sits at the true
   left edge of the main column (no awkward gap on ultrawide screens).
   Only the content body is capped at 1600px. */
.navbar-header { width: 100%; }

/* Theme toggle button */
[data-theme-toggle] {
  font-size: 0;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
}
[data-theme-toggle]::after {
  position: absolute;
  content: "\f1bf";
  font-family: remixicon;
  font-style: normal;
  font-size: 1.25rem;
  color: var(--text-primary-light);
}
[data-theme-toggle][aria-label="dark"]::after {
  content: "\ef6f";
  color: #fff;
}

/* ============================================================
   6. CARDS
   ============================================================ */
.card {
  background-color: var(--white);
  border-color: var(--border-color);
  box-shadow: var(--shadow-card);
}
.card-header { background-color: var(--white); }

/* Gradient cards for dashboard stats */
.bg-gradient-start-1 { background: linear-gradient(to right, #E6F9FF, #FEFFFF); }
.bg-gradient-start-2 { background: linear-gradient(to right, #F7E9FF, #FFFEFD); }
.bg-gradient-start-3 { background: linear-gradient(to right, #E6EBFF, #FFFFFF); }
.bg-gradient-start-4 { background: linear-gradient(to right, #E8FFF5, #FFFFFF); }

html[data-theme="dark"] .bg-gradient-start-1 { background: linear-gradient(to right, rgba(230, 249, 255, 0.15), rgba(254, 255, 255, 0.1)); }
html[data-theme="dark"] .bg-gradient-start-2 { background: linear-gradient(to right, rgba(247, 233, 255, 0.15), rgba(255, 254, 253, 0.1)); }
html[data-theme="dark"] .bg-gradient-start-3 { background: linear-gradient(to right, rgba(230, 235, 255, 0.15), rgba(255, 255, 255, 0.1)); }
html[data-theme="dark"] .bg-gradient-start-4 { background: linear-gradient(to right, rgba(232, 255, 245, 0.15), rgba(255, 255, 255, 0.1)); }

/* ============================================================
   7. TABLES
   ============================================================ */
.bordered-table {
  border-spacing: 0;
  border-collapse: separate;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  min-width: max-content;
  vertical-align: middle;
}
.bordered-table thead tr th {
  background-color: var(--neutral-50) !important;
  border-bottom: 1px solid var(--neutral-200) !important;
  color: var(--text-primary-light) !important;
  padding: 16px !important;
  font-size: 0.8125rem;
  font-weight: 600;
}
.bordered-table thead tr th:first-child { border-start-start-radius: 8px; }
.bordered-table thead tr th:last-child { border-start-end-radius: 8px; }
.bordered-table thead tr th:not(:last-child) { border-inline-end: 0 !important; }
.bordered-table thead tr th:not(:first-child) { border-inline-start: 0 !important; }

.bordered-table tbody tr:last-child td { border-bottom: 0; }
.bordered-table tbody tr:last-child td:first-child { border-end-start-radius: 8px; }
.bordered-table tbody tr:last-child td:last-child { border-end-end-radius: 8px; }

.bordered-table tbody tr td {
  color: var(--text-secondary-light);
  padding: 16px !important;
  border-bottom: 1px solid var(--neutral-200);
  background-color: var(--white);
  vertical-align: middle;
}

.sm-table thead tr th, .sm-table thead tr td,
.sm-table tbody tr th, .sm-table tbody tr td {
  padding: 10px 16px !important;
}

.scroll-sm::-webkit-scrollbar { width: 4px !important; height: 4px !important; border-radius: 40px; }
.scroll-sm::-webkit-scrollbar-thumb { background-color: #b1b3b8; border-radius: 40px; }
.scroll-sm::-webkit-scrollbar-thumb:hover { background-color: #939393; }
.scroll-sm::-webkit-scrollbar-track { background-color: #d6d9de; border-radius: 40px; }

/* ============================================================
   8. BUTTONS — Site-wide pill design
   Base .btn applies pill shape + medium weight + smooth transitions.
   All variant classes (btn-primary-600, btn-outline-*, etc.) inherit
   this shape so every button across the app auto-upgrades.
   ============================================================ */
.btn {
  border-radius: 999px !important;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  border-width: 1.5px;
  padding-inline: 1.25rem;
}
.btn.btn-sm { padding-inline: 1rem; }
.btn.btn-lg { padding-inline: 2rem; }
.btn:active { transform: translateY(1px); }
/* .radius-8 was the legacy square corner — override for buttons so pill wins.
   Non-button surfaces (cards, inputs) keep their 8px corners. */
.btn.radius-8 { border-radius: 999px !important; }

/* Primary = ink-black (primary-900) with neutral-grey hover.
   Matches the reference CTA aesthetic used across pill buttons. */
.btn-primary-600 { background-color: var(--primary-900); color: #fff; border-color: var(--primary-900); }
.btn-primary-600:hover { background-color: var(--neutral-500); color: #fff !important; border-color: var(--neutral-500); }
.btn-primary-600:active, .btn-primary-600:focus { background-color: var(--primary-700) !important; color: #fff !important; border-color: var(--primary-700) !important; }

.btn-danger-600 { background-color: var(--danger-600); color: #fff; border-color: var(--danger-600); }
.btn-danger-600:hover { background-color: var(--danger-700); color: #fff !important; border-color: var(--danger-700); }
.btn-danger-600:active, .btn-danger-600:focus { background-color: var(--danger-800) !important; color: #fff !important; border-color: var(--danger-800) !important; }

.btn-success-600 { background-color: var(--success-600); color: #fff; border-color: var(--success-600); }
.btn-success-600:hover { background-color: var(--success-700); color: #fff !important; border-color: var(--success-700); }
.btn-success-600:active, .btn-success-600:focus { background-color: var(--success-800) !important; color: #fff !important; border-color: var(--success-800) !important; }

/* Outline variants — neutral-grey border with soft-fill hover, keeping
   the text in the accent color. This matches the "View Our Work" style
   from the reference — transparent with subtle hover feedback. */
.btn-outline-primary-600 { background-color: transparent !important; color: var(--primary-900) !important; border-color: var(--neutral-300) !important; }
.btn-outline-primary-600:hover { background-color: var(--neutral-100) !important; color: var(--primary-900) !important; border-color: var(--neutral-400) !important; }
.btn-outline-primary-600:active, .btn-outline-primary-600:focus { background-color: var(--neutral-200) !important; color: var(--primary-900) !important; border-color: var(--neutral-500) !important; }

.btn-outline-danger-600 { background-color: transparent !important; color: var(--danger-600) !important; border-color: var(--neutral-300) !important; }
.btn-outline-danger-600:hover { background-color: var(--danger-focus) !important; color: var(--danger-600) !important; border-color: var(--danger-600) !important; }
.btn-outline-danger-600:active, .btn-outline-danger-600:focus { background-color: var(--danger-600) !important; color: #fff !important; border-color: var(--danger-600) !important; }

.btn-outline-warning-600 { background-color: transparent !important; color: var(--warning-600) !important; border-color: var(--neutral-300) !important; }
.btn-outline-warning-600:hover { background-color: var(--warning-focus) !important; color: var(--warning-600) !important; border-color: var(--warning-600) !important; }
.btn-outline-warning-600:active, .btn-outline-warning-600:focus { background-color: var(--warning-600) !important; color: #fff !important; border-color: var(--warning-600) !important; }

.btn-outline-neutral-600 { background-color: transparent !important; color: var(--primary-900) !important; border-color: var(--neutral-300) !important; }
.btn-outline-neutral-600:hover { background-color: var(--neutral-100) !important; color: var(--primary-900) !important; border-color: var(--neutral-400) !important; }
.btn-outline-neutral-600:active, .btn-outline-neutral-600:focus { background-color: var(--neutral-200) !important; color: var(--primary-900) !important; border-color: var(--neutral-500) !important; }

/* ============================================================
   8.1 PILL BUTTONS — marketing CTAs and hero actions
   Rounded pill shape with inky-black primary and neutral-grey hover.
   Use for top-level marketing surfaces (pricing CTAs, hero downloads,
   bottom conversion blocks). Keep .btn-primary-600 for dense admin UI.
   ============================================================ */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1.4;
  border-radius: 999px !important;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn-pill:active { transform: translateY(1px); }
.btn-pill-lg {
  padding: 0.9375rem 2rem;
  font-size: var(--font-md);
}
.btn-pill-sm {
  padding: 0.5rem 1.25rem;
  font-size: var(--font-xs);
}

/* Primary pill — ink-black background, grey on hover (like the reference) */
.btn-pill-primary {
  background-color: var(--primary-900);
  color: #fff !important;
  border-color: var(--primary-900);
}
.btn-pill-primary:hover {
  background-color: var(--neutral-500);
  border-color: var(--neutral-500);
  color: #fff !important;
}
.btn-pill-primary:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

/* Outline pill — transparent with subtle neutral-grey hover fill */
.btn-pill-outline {
  background-color: transparent;
  color: var(--primary-900) !important;
  border-color: var(--neutral-300);
}
.btn-pill-outline:hover {
  background-color: var(--neutral-100);
  border-color: var(--neutral-400);
  color: var(--primary-900) !important;
}
.btn-pill-outline:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

/* Brand-coloured pill — for secondary CTAs that want to pop steel-blue */
.btn-pill-brand {
  background-color: var(--primary-600);
  color: #fff !important;
  border-color: var(--primary-600);
}
.btn-pill-brand:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  color: #fff !important;
}

/* Success pill — for trial-start / complete actions */
.btn-pill-success {
  background-color: var(--success-600);
  color: #fff !important;
  border-color: var(--success-600);
}
.btn-pill-success:hover {
  background-color: var(--success-700);
  border-color: var(--success-700);
  color: #fff !important;
}

/* White pill on dark backgrounds (gradient CTA blocks) */
.btn-pill-on-dark {
  background-color: #fff;
  color: var(--primary-700) !important;
  border-color: #fff;
  font-weight: 600;
}
.btn-pill-on-dark:hover {
  background-color: var(--neutral-100);
  border-color: var(--neutral-100);
  color: var(--primary-900) !important;
}

/* ============================================================
   Accent "Generate" button — warm amber gradient for produce/create
   actions that should pop against ink-black primary CTAs.
   ============================================================ */
.btn-token-generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  border: 1.5px solid #D97706;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  text-decoration: none;
  min-height: 38px;
}
.btn-token-generate:hover {
  color: #ffffff;
  filter: brightness(1.05);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.btn-token-generate:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(217, 119, 6, 0.25); }
.btn-token-generate i { font-size: 16px; }

/* ============================================================
   Token banner — celebrates a freshly generated token at top of page
   ============================================================ */
.token-banner {
  border: 2px solid #16A34A;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.06) 0%, rgba(255, 255, 255, 1) 50%);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.10);
  padding: 20px 24px;
  animation: tokenBannerSlideIn 0.35s ease;
}
@keyframes tokenBannerSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.token-banner__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.token-banner__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #16A34A;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.token-banner__title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: #14532d;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.token-banner__subtitle {
  font-size: var(--font-sm);
  color: var(--neutral-600);
  margin: 0;
  line-height: 1.5;
}
.token-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(217, 119, 6, 0.1);
  color: #B45309;
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 600;
  border: 1px solid rgba(217, 119, 6, 0.3);
}
.token-banner__body {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.token-banner__code {
  flex: 1 1 320px;
  min-width: 0;
  padding: 12px 16px;
  background: #ffffff;
  border: 1.5px solid #16A34A;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--primary-900);
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
  display: flex;
  align-items: center;
}
.token-banner__copy {
  padding: 0 20px;
  background: #16A34A;
  color: #ffffff !important;
  border: 1.5px solid #16A34A;
  border-radius: 10px;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  min-height: 44px;
}
.token-banner__copy:hover { background: #15803D; border-color: #15803D; }
.token-banner__copy:active { transform: translateY(1px); }
.token-banner__copy--done { background: #14532d; border-color: #14532d; }
.token-banner__hint {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 163, 74, 0.15);
  font-size: var(--font-xs);
  color: var(--neutral-600);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
}
.token-banner__hint i { color: #16A34A; margin-top: 2px; flex-shrink: 0; }

/* ============================================================
   User avatar + dropdown (nav header)
   ============================================================ */
.user-avatar-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-900) 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(51, 79, 115, 0.18);
  letter-spacing: 0.02em;
}
.user-avatar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(51, 79, 115, 0.28);
}
.user-avatar-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(51, 79, 115, 0.18), 0 2px 8px rgba(51, 79, 115, 0.22);
}

.user-dropdown-menu {
  width: 280px !important;
  min-width: 280px !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  box-shadow: 0 12px 32px rgba(32, 43, 59, 0.12) !important;
  margin-top: 10px !important;
  overflow: hidden;
}
.user-dropdown-menu__header {
  padding: 16px;
  background: linear-gradient(135deg, var(--primary-50) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-dropdown-menu__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-900) 100%);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(51, 79, 115, 0.2);
}
.user-dropdown-menu__info {
  min-width: 0;
  flex: 1;
}
.user-dropdown-menu__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-900);
  margin: 0 0 2px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.user-dropdown-menu__email {
  font-size: 12px;
  color: var(--neutral-500);
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.2;
}
.user-dropdown-menu__list {
  list-style: none;
  padding: 6px;
  margin: 0;
}
.user-dropdown-menu__list li { margin: 0; padding: 0; }
.user-dropdown-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-900) !important;
  text-decoration: none !important;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.user-dropdown-menu__link:hover {
  background: var(--neutral-100);
  color: var(--primary-900) !important;
}
.user-dropdown-menu__link iconify-icon,
.user-dropdown-menu__link i {
  font-size: 18px;
  color: var(--neutral-500);
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.user-dropdown-menu__link:hover iconify-icon,
.user-dropdown-menu__link:hover i {
  color: var(--primary-600);
}
.user-dropdown-menu__divider {
  height: 1px;
  background: var(--neutral-200);
  margin: 6px 8px;
}
.user-dropdown-menu__link--danger:hover {
  background: rgba(220, 38, 38, 0.06) !important;
  color: var(--danger-600) !important;
}
.user-dropdown-menu__link--danger:hover i,
.user-dropdown-menu__link--danger:hover iconify-icon {
  color: var(--danger-600) !important;
}

/* ============================================================
   DARK-MODE BUTTON + CARD OVERRIDES
   In dark mode, ink-black pill buttons disappear against the dark
   page bg (both are near-#202B3B). Flip the treatment: light pills
   with dark ink-black text. Also ensure cards, icon tiles, and
   hardcoded white surfaces respect --white / --bg-color tokens.
   ============================================================ */

/* Primary pill — light fill with dark text */
[data-theme="dark"] .btn-pill-primary,
[data-theme="dark"] .btn-primary-600 {
  background-color: #F5F6FA !important;
  color: #202B3B !important;
  border-color: #F5F6FA !important;
}
[data-theme="dark"] .btn-pill-primary:hover,
[data-theme="dark"] .btn-primary-600:hover {
  background-color: #D1D5DB !important;
  color: #202B3B !important;
  border-color: #D1D5DB !important;
}
[data-theme="dark"] .btn-pill-primary:active,
[data-theme="dark"] .btn-pill-primary:focus,
[data-theme="dark"] .btn-primary-600:active,
[data-theme="dark"] .btn-primary-600:focus {
  background-color: #F5F6FA !important;
  color: #202B3B !important;
  border-color: #F5F6FA !important;
}

/* Brand pill stays steel-blue but slightly brighter */
[data-theme="dark"] .btn-pill-brand {
  background-color: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-pill-brand:hover {
  background-color: var(--primary-400) !important;
  border-color: var(--primary-400) !important;
}

/* Outline variants — neutral border, light text, dark-gray hover fill */
[data-theme="dark"] .btn-pill-outline,
[data-theme="dark"] .btn-outline-primary-600,
[data-theme="dark"] .btn-outline-neutral-600 {
  background-color: transparent !important;
  color: #F5F6FA !important;
  border-color: #4B5563 !important;
}
[data-theme="dark"] .btn-pill-outline:hover,
[data-theme="dark"] .btn-outline-primary-600:hover,
[data-theme="dark"] .btn-outline-neutral-600:hover {
  background-color: #323D4E !important;
  color: #F5F6FA !important;
  border-color: #6B7280 !important;
}

/* On-dark pill (used inside dark gradient CTA blocks) keeps its white bg */

/* Ensure Bootstrap cards inherit --white token (already set) plus
   subtle border override so it doesn't blend into page bg. */
[data-theme="dark"] .card {
  background-color: var(--white) !important;
  border-color: #323D4E !important;
}

/* ============================================================
   Targeted dark-mode fixes for surfaces that hardcoded #fff / #ffffff
   ============================================================ */

/* Pricing plan cards (pricing.php inline styles) */
[data-theme="dark"] .plan-card {
  background-color: var(--white) !important;
  border-color: #323D4E !important;
}
[data-theme="dark"] .plan-card--popular {
  border-color: var(--primary-400) !important;
}
[data-theme="dark"] .plan-card--active {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.08) 0%, var(--white) 120px) !important;
  border-color: #16A34A !important;
}

/* Pricing calculator card */
[data-theme="dark"] .calculator-card {
  background-color: var(--white) !important;
}

/* Pricing teaser cards on landing page */
[data-theme="dark"] .pricing-teaser {
  background-color: var(--white) !important;
  border-color: #323D4E !important;
}
[data-theme="dark"] .pricing-teaser--popular {
  border-color: var(--primary-400) !important;
}

/* Feature cards (landing page + sites page download cards) */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .download-card,
[data-theme="dark"] .step-card {
  background-color: var(--white) !important;
  border-color: #323D4E !important;
}
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .download-card:hover,
[data-theme="dark"] .step-card:hover {
  border-color: var(--primary-400) !important;
}

/* Health-grid cards — fix left accent border in dark mode */
[data-theme="dark"] .health-card {
  background-color: var(--white) !important;
  border-color: #323D4E !important;
}
[data-theme="dark"] .health-card:hover {
  border-color: var(--primary-400) !important;
}

/* Stat cards on dashboard home */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .site-card {
  background-color: var(--white) !important;
  border-color: #323D4E !important;
}
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .site-card:hover {
  border-color: var(--primary-400) !important;
}

/* Icon tiles — the various bg-*-focus and bg-primary-50 chips inside
   stat cards etc. In dark mode the light-tint versions nearly match
   the card bg; boost them to the inverted neutral-100 so they stay
   visible. */
[data-theme="dark"] .bg-primary-50 { background-color: rgba(71, 102, 140, 0.22) !important; }
[data-theme="dark"] .bg-neutral-100 { background-color: #323D4E !important; }

/* Landing page hero + stats + sections adapt to dark mode */
[data-theme="dark"] .landing-hero { background: linear-gradient(180deg, #151C27 0%, #1B2431 100%) !important; }
[data-theme="dark"] .landing-stats { background: var(--bg-color) !important; border-color: #323D4E !important; }
[data-theme="dark"] .landing-section--muted { background: #151C27 !important; }
[data-theme="dark"] .landing-header {
  background: rgba(27, 36, 49, 0.92) !important;
  border-bottom-color: #323D4E !important;
}
[data-theme="dark"] .philosophy-card--bad {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}
[data-theme="dark"] .philosophy-card--good {
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

/* Token banner — green-accented card at top of sites page */
[data-theme="dark"] .token-banner {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.12) 0%, var(--white) 50%) !important;
  border-color: #16A34A !important;
}
[data-theme="dark"] .token-banner__code {
  background-color: #151C27 !important;
  color: #F5F6FA !important;
  border-color: #16A34A !important;
}

/* User dropdown header in dark mode */
[data-theme="dark"] .user-dropdown-menu {
  background-color: var(--white) !important;
  border-color: #323D4E !important;
}
[data-theme="dark"] .user-dropdown-menu__header {
  background: linear-gradient(135deg, rgba(71, 102, 140, 0.18) 0%, var(--white) 100%) !important;
  border-bottom-color: #323D4E !important;
}
[data-theme="dark"] .user-dropdown-menu__name {
  color: #F5F6FA !important;
}
[data-theme="dark"] .user-dropdown-menu__link {
  color: #F5F6FA !important;
}
[data-theme="dark"] .user-dropdown-menu__link:hover {
  background-color: #323D4E !important;
  color: #F5F6FA !important;
}
[data-theme="dark"] .user-dropdown-menu__divider {
  background-color: #323D4E !important;
}

/* Pricing ticks + slider adaptations */
[data-theme="dark"] .tick-label { color: #9CA3AF !important; }

/* ============================================================
   DARK-MODE TEXT INSIDE CARDS
   Many surfaces use inline style="color:var(--primary-900)" which
   stays dark in dark mode (primary scale isn't inverted). Force
   these into light text when inside dark cards.
   ============================================================ */

/* Any element inside a card/plan/feature/step/etc in dark mode inherits
   a light text color unless explicitly overridden. */
[data-theme="dark"] .plan-card,
[data-theme="dark"] .plan-card *:not(.btn):not(.btn-pill):not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]):not([class*="bg-info"]),
[data-theme="dark"] .pricing-teaser,
[data-theme="dark"] .pricing-teaser *:not(.pricing-teaser-badge),
[data-theme="dark"] .feature-card,
[data-theme="dark"] .feature-card *:not([class*="bg-"]),
[data-theme="dark"] .download-card,
[data-theme="dark"] .download-card *:not(.btn):not(.btn-pill):not([class*="bg-"]),
[data-theme="dark"] .step-card,
[data-theme="dark"] .step-card *:not(.step-number),
[data-theme="dark"] .health-card,
[data-theme="dark"] .health-card *:not([class*="bg-"]),
[data-theme="dark"] .stat-card,
[data-theme="dark"] .stat-card *:not([class*="bg-"]),
[data-theme="dark"] .site-card,
[data-theme="dark"] .site-card *:not([class*="bg-"]):not(.btn):not(.btn-pill) {
  color: var(--text-primary-light);
}

/* Overrides for semantic text colors inside dark-mode cards — the colored
   variants should still pop. */
[data-theme="dark"] .plan-card .text-success-600,
[data-theme="dark"] .pricing-teaser .text-success-600,
[data-theme="dark"] .feature-card .text-success-600,
[data-theme="dark"] .download-card .text-success-600 {
  color: #4ADE80 !important;
}
[data-theme="dark"] .plan-card .text-danger-600,
[data-theme="dark"] .feature-card .text-danger-600 {
  color: #F87171 !important;
}
[data-theme="dark"] .plan-card .text-warning-600,
[data-theme="dark"] .feature-card .text-warning-600 {
  color: #FBBF24 !important;
}
[data-theme="dark"] .plan-card .text-info-600,
[data-theme="dark"] .feature-card .text-info-600 {
  color: #60A5FA !important;
}
[data-theme="dark"] .plan-card .text-primary-light,
[data-theme="dark"] .pricing-teaser .text-primary-light,
[data-theme="dark"] .feature-card .text-primary-light,
[data-theme="dark"] .download-card .text-primary-light,
[data-theme="dark"] .step-card .text-primary-light,
[data-theme="dark"] .health-card .text-primary-light,
[data-theme="dark"] .stat-card .text-primary-light,
[data-theme="dark"] .site-card .text-primary-light,
[data-theme="dark"] .token-banner .text-primary-light {
  color: var(--text-primary-light) !important;
}
[data-theme="dark"] .plan-card .text-secondary-light,
[data-theme="dark"] .pricing-teaser .text-secondary-light,
[data-theme="dark"] .feature-card .text-secondary-light,
[data-theme="dark"] .download-card .text-secondary-light,
[data-theme="dark"] .step-card .text-secondary-light,
[data-theme="dark"] .health-card .text-secondary-light,
[data-theme="dark"] .stat-card .text-secondary-light,
[data-theme="dark"] .site-card .text-secondary-light,
[data-theme="dark"] .token-banner .text-secondary-light {
  color: var(--text-secondary-light) !important;
}

/* The pricing plan-card amount and percentages use inline
   style="font-size:2.5rem" — ensure parent color inheritance works. */
[data-theme="dark"] .plan-card .fw-bold,
[data-theme="dark"] .pricing-teaser .amount,
[data-theme="dark"] .pricing-teaser-price .amount {
  color: var(--text-primary-light) !important;
}
[data-theme="dark"] .pricing-teaser-title {
  color: var(--text-secondary-light) !important;
}

/* Token banner title uses hardcoded #14532d (dark green) that disappears
   on dark card. Flip to light green. */
[data-theme="dark"] .token-banner__title { color: #4ADE80 !important; }
[data-theme="dark"] .token-banner__subtitle { color: var(--text-secondary-light) !important; }

/* Feature descriptions on landing page */
[data-theme="dark"] .feature-desc,
[data-theme="dark"] .step-desc {
  color: var(--text-secondary-light) !important;
}
[data-theme="dark"] .feature-title,
[data-theme="dark"] .step-title {
  color: var(--text-primary-light) !important;
}

/* Philosophy list items on landing page */
[data-theme="dark"] .philosophy-list li {
  color: var(--text-primary-light);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .philosophy-header h3 {
  color: var(--text-primary-light) !important;
}

/* Stat numbers on landing page */
[data-theme="dark"] .stat-number {
  color: var(--text-primary-light);
}
[data-theme="dark"] .hero-title {
  color: var(--text-primary-light) !important;
}
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .hero-trust,
[data-theme="dark"] .section-subtitle {
  color: var(--text-secondary-light) !important;
}
[data-theme="dark"] .section-title {
  color: var(--text-primary-light) !important;
}
[data-theme="dark"] .hero-eyebrow {
  background: var(--white) !important;
  border-color: #323D4E !important;
  color: var(--text-primary-light) !important;
}
[data-theme="dark"] .landing-nav-link {
  color: var(--text-primary-light) !important;
}
[data-theme="dark"] .footer-tagline,
[data-theme="dark"] .footer-copy {
  color: var(--text-secondary-light) !important;
}
[data-theme="dark"] .footer-links a {
  color: var(--text-primary-light) !important;
}
[data-theme="dark"] .landing-footer {
  background: #151C27 !important;
  border-top-color: #323D4E !important;
}

/* ============================================================
   CATCH-ALL DARK-MODE TEXT INSIDE CARDS
   Broad fix — any element inside any .card (Bootstrap) gets its text
   forced to the token color in dark mode. This catches admin pages,
   site detail tables, collapsed details blocks, and other surfaces
   we haven't hand-tuned yet.
   ============================================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6,
[data-theme="dark"] .card p,
[data-theme="dark"] .card li,
[data-theme="dark"] .card label,
[data-theme="dark"] .card > :not(.btn):not(.btn-pill) span:not(.badge),
[data-theme="dark"] .card > :not(.btn):not(.btn-pill) strong,
[data-theme="dark"] .card > :not(.btn):not(.btn-pill) div:not([class*="bg-"]):not([class*="badge"]):not(.btn):not(.btn-pill) {
  color: var(--text-primary-light);
}

/* Ensure button descendants keep the button's color (don't get overridden
   by catch-all rules above). Applies to pills, Bootstrap buttons, and
   all their icon/span/div children. */
[data-theme="dark"] .btn,
[data-theme="dark"] .btn *,
[data-theme="dark"] .btn-pill,
[data-theme="dark"] .btn-pill *,
[data-theme="dark"] .btn-token-generate,
[data-theme="dark"] .btn-token-generate * {
  color: inherit !important;
}
/* Primary button children use the primary button's dark-mode text color */
[data-theme="dark"] .btn-pill-primary *,
[data-theme="dark"] .btn-primary-600 * {
  color: #202B3B !important;
}
/* Outline button children inherit light text */
[data-theme="dark"] .btn-pill-outline *,
[data-theme="dark"] .btn-outline-primary-600 *,
[data-theme="dark"] .btn-outline-neutral-600 * {
  color: #F5F6FA !important;
}
/* on-dark pill has a WHITE background by design (used inside dark
   gradient CTA blocks), so its text must stay dark (primary-700)
   in both light and dark modes */
[data-theme="dark"] .btn-pill-on-dark,
[data-theme="dark"] .btn-pill-on-dark * {
  color: var(--primary-700) !important;
}

/* Success + brand buttons keep white text (both have coloured bg) */
[data-theme="dark"] .btn-pill-success *,
[data-theme="dark"] .btn-pill-brand *,
[data-theme="dark"] .btn-success-600 *,
[data-theme="dark"] .btn-danger-600 * {
  color: #ffffff !important;
}
/* Token generate button keeps its white text */
[data-theme="dark"] .btn-token-generate * {
  color: #ffffff !important;
}
[data-theme="dark"] .card .text-secondary-light,
[data-theme="dark"] .card .text-secondary {
  color: var(--text-secondary-light) !important;
}
[data-theme="dark"] .card .text-primary-light {
  color: var(--text-primary-light) !important;
}
[data-theme="dark"] .card .text-muted {
  color: var(--neutral-400) !important;
}

/* Semantic text colors keep popping in dark mode */
[data-theme="dark"] .text-success-600 { color: #4ADE80 !important; }
[data-theme="dark"] .text-danger-600  { color: #F87171 !important; }
[data-theme="dark"] .text-warning-600 { color: #FBBF24 !important; }
[data-theme="dark"] .text-info-600    { color: #60A5FA !important; }

/* Code / pre / kbd blocks — were showing dark text on darker bg */
[data-theme="dark"] code,
[data-theme="dark"] pre,
[data-theme="dark"] kbd {
  color: var(--text-primary-light);
  background: #151C27 !important;
  border-color: #323D4E !important;
}
[data-theme="dark"] pre code {
  background: transparent !important;
  border: none !important;
}

/* Details/summary content (the collapsible "How to install" block on
   sites page) */
[data-theme="dark"] details,
[data-theme="dark"] details > summary,
[data-theme="dark"] details > div,
[data-theme="dark"] details ol,
[data-theme="dark"] details li,
[data-theme="dark"] details h4,
[data-theme="dark"] details p {
  color: var(--text-primary-light);
}
[data-theme="dark"] details {
  border-color: #323D4E !important;
}

/* Admin detail pages — tables and dt/dd layouts */
[data-theme="dark"] .card-body dt,
[data-theme="dark"] .card-body dd,
[data-theme="dark"] .card-body table,
[data-theme="dark"] .card-body th,
[data-theme="dark"] .card-body td {
  color: var(--text-primary-light);
}
[data-theme="dark"] table.table { color: var(--text-primary-light); }
[data-theme="dark"] table.table thead th {
  color: var(--text-secondary-light);
  border-color: #323D4E;
}
[data-theme="dark"] table.table td { border-color: #323D4E; }

/* Section eyebrow pill (pricing hero, landing hero) — primary-50 bg
   is way too dim in dark mode. Use a brighter tinted bg. */
[data-theme="dark"] .hero-eyebrow,
[data-theme="dark"] .section-eyebrow {
  color: #B3C1D1 !important;
}
[data-theme="dark"] .hero-eyebrow {
  background: rgba(71, 102, 140, 0.22) !important;
  border-color: rgba(141, 162, 185, 0.3) !important;
  color: #E8ECF1 !important;
}

/* Pricing hero "Pay less as you grow" accent line uses inline
   style="color:var(--primary-600)" — too dim in dark. Brighten. */
[data-theme="dark"] h1 span[style*="primary-600"],
[data-theme="dark"] h1 span[style*="--primary-600"] {
  color: #8DA2B9 !important;
}

/* Hero and section titles on pricing/landing */
[data-theme="dark"] .hero-title,
[data-theme="dark"] .cta-title {
  color: var(--text-primary-light) !important;
}
[data-theme="dark"] .hero-title span[style] {
  color: #8DA2B9 !important;
}

/* Admin page headings with inline gray style */
[data-theme="dark"] h1[style*="color"],
[data-theme="dark"] h2[style*="color"],
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
  color: var(--text-primary-light) !important;
}

/* Bootstrap border utilities in dark mode */
[data-theme="dark"] .border { border-color: #323D4E !important; }

/* Alerts in dark mode keep their semantic tint but with adjusted contrast */
[data-theme="dark"] .alert-info {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.4);
  color: #93C5FD;
}
[data-theme="dark"] .alert-warning {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.4);
  color: #FCD34D;
}
[data-theme="dark"] .alert-danger {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.4);
  color: #FCA5A5;
}
[data-theme="dark"] .alert-success {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.4);
  color: #86EFAC;
}

/* ============================================================
   PRICING CALCULATOR — dark mode price breakdown box
   The inner "YOUR BRACKET / MONTHLY TOTAL" panel uses inline
   background:var(--primary-50) + color:var(--primary-700). In dark
   mode primary-50 is near-transparent white (invisible) and primary-700
   stays #293F5C (still dark). Fix both with explicit overrides.
   ============================================================ */
[data-theme="dark"] .calculator-card [style*="background:var(--primary-50)"],
[data-theme="dark"] .calculator-card [style*="background: var(--primary-50)"] {
  background: rgba(71, 102, 140, 0.22) !important;
  border: 1px solid rgba(141, 162, 185, 0.15);
}
[data-theme="dark"] .calculator-card [style*="color:var(--primary-700)"],
[data-theme="dark"] .calculator-card [style*="color: var(--primary-700)"] {
  color: #F5F6FA !important;
}

/* All spans inside the calculator's price-breakdown get light text */
[data-theme="dark"] .calculator-card .radius-12 .fw-semibold,
[data-theme="dark"] .calculator-card .radius-12 .fw-bold,
[data-theme="dark"] .calculator-card .radius-12 span,
[data-theme="dark"] .calculator-card .radius-12 div {
  color: var(--text-primary-light);
}
[data-theme="dark"] .calculator-card .radius-12 .text-secondary-light,
[data-theme="dark"] .calculator-card .radius-12 .text-xs.text-secondary-light {
  color: var(--text-secondary-light) !important;
}

/* "You save $X/month" savings callout — ensure green text stays bright */
[data-theme="dark"] .calculator-card .text-success-600 { color: #4ADE80 !important; }

/* Uppercase section labels in dark calculator */
[data-theme="dark"] .calculator-card [class*="text-uppercase"] {
  color: var(--neutral-400) !important;
}

/* Number input inside calculator */
[data-theme="dark"] .calculator-card input[type="number"],
[data-theme="dark"] .calculator-card input[type="text"] {
  background: #1B2431 !important;
  color: var(--text-primary-light) !important;
  border-color: #4B5563 !important;
}
[data-theme="dark"] .pricing-slider {
  background: #323D4E;
}
[data-theme="dark"] .pricing-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--primary-400) 0%, var(--primary-400) calc(var(--fill, 0%)), #323D4E calc(var(--fill, 0%)), #323D4E 100%);
}
[data-theme="dark"] .pricing-slider::-webkit-slider-thumb {
  background: #F5F6FA;
  border-color: var(--primary-400);
}

/* ============================================================
   9. FORMS
   ============================================================ */
.form-select, .form-control, textarea {
  border: 1px solid var(--input-form-light);
  color: var(--text-primary-light) !important;
  background-color: var(--white);
  padding: 0.5625rem 1.25rem;
}
.form-select::placeholder, .form-control::placeholder, textarea::placeholder {
  color: var(--text-secondary-light);
  font-size: 0.875rem !important;
}
.form-select:focus, .form-select:active,
.form-control:focus, .form-control:active,
textarea:focus, textarea:active {
  box-shadow: none;
  border-color: var(--primary-600) !important;
  background-color: transparent;
}

.form-select { padding: 0.5625rem 1.875rem 0.5625rem 0.9375rem; background-position-x: right; }
.form-select, .form-control:not(textarea) { height: 2.75rem; }
.form-select.form-select-sm { height: 40px; font-size: 0.875rem; }
.form-control[readonly] { background-color: var(--neutral-50); }

.form-label { font-size: 0.875rem; color: var(--text-secondary-light); margin-bottom: 0.25rem; }
.form-text { font-size: 0.8125rem; color: var(--text-secondary-light); }

.form-check-input { cursor: pointer; }
.form-check-input:checked { background-color: var(--primary-600); border-color: var(--primary-600); }
.form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(51, 79, 115, 0.25); border-color: var(--primary-400); }

/* ============================================================
   10. BADGES (semantic bg-*-focus + text-*-600 patterns)
   ============================================================ */
.bg-success-focus { background-color: var(--success-focus) !important; }
.bg-info-focus { background-color: var(--info-focus) !important; }
.bg-warning-focus { background-color: var(--warning-focus) !important; }
.bg-danger-focus { background-color: var(--danger-focus) !important; }
.bg-primary-focus { background-color: rgba(51, 79, 115, 0.12) !important; }
.bg-secondary-focus { background-color: rgba(108, 116, 124, 0.12) !important; }

/* ============================================================
   11. UTILITIES
   ============================================================ */

/* ---- Text colors ---- */
.text-primary-light { color: var(--text-primary-light) !important; }
.text-secondary-light { color: var(--text-secondary-light); }
.text-primary-600 { color: var(--primary-600) !important; }
.text-danger-600 { color: var(--danger-600) !important; }
.text-success-600 { color: var(--success-600) !important; }
.text-warning-600 { color: var(--warning-600) !important; }
.text-info-600 { color: var(--info-600) !important; }
.text-neutral-600 { color: var(--neutral-600) !important; }
.text-black { color: var(--black) !important; }

/* ---- Background colors ---- */
.bg-base { background-color: var(--white) !important; }
.bg-primary-50 { background-color: var(--primary-50) !important; }
.bg-primary-600 { background-color: var(--primary-600) !important; }
.bg-neutral-50 { background-color: var(--neutral-50) !important; }
.bg-neutral-100 { background-color: var(--neutral-100) !important; }
.bg-neutral-200 { background-color: var(--neutral-200) !important; }
.bg-cyan { background-color: var(--cyan) !important; }

/* ---- Border colors ---- */
.border-success-main { border-color: var(--success-main) !important; }
.border-info-main { border-color: var(--info-main) !important; }
.border-warning-main { border-color: var(--warning-main) !important; }
.border-danger-main { border-color: var(--danger-main) !important; }

/* ---- Hover utilities ---- */
.hover-text-primary:hover, .btn.hover-text-primary:hover { color: var(--primary-600) !important; }
.hover-text-danger:hover, .btn.hover-text-danger:hover { color: var(--danger-main) !important; }
.hover-bg-transparent { background-color: transparent !important; }

/* ---- Typography sizes ---- */
.text-2xl { font-size: var(--font-2xl) !important; }
.text-xl { font-size: var(--font-xl) !important; }
.text-lg { font-size: var(--font-lg) !important; }
.text-md { font-size: var(--font-md) !important; }
.text-sm { font-size: var(--font-sm) !important; }
.text-xs { font-size: var(--font-xs) !important; }

.font-monospace { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important; }

/* ---- Font weights (supplement Bootstrap) ---- */
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }

/* ---- Border radius ---- */
.radius-4 { border-radius: 0.25rem; }
.radius-8 { border-radius: 0.5rem; }
.radius-12 { border-radius: 0.75rem; }

/* ---- Fixed dimensions ---- */
.w-40-px { width: 2.5rem !important; }
.w-50-px { width: 3.125rem !important; }
.h-40-px { height: 2.5rem !important; }
.h-50-px { height: 3.125rem !important; }

/* ---- Spacing (margin) ----
   WowDash pixel-based spacing supplements Bootstrap's 0-5 scale.
   These use !important to layer on top of Bootstrap. */
.mb-0 { margin-block-end: 0 !important; }
.mb-1 { margin-block-end: var(--size-2) !important; }
.mb-2 { margin-block-end: var(--size-4) !important; }
.mb-4 { margin-block-end: var(--size-4) !important; }
.mb-8 { margin-block-end: var(--size-8) !important; }
.mb-12 { margin-block-end: var(--size-12) !important; }
.mb-16 { margin-block-end: var(--size-16) !important; }
.mb-24 { margin-block-end: var(--size-24) !important; }
.mb-32 { margin-block-end: var(--size-32) !important; }

.mt-8 { margin-block-start: var(--size-8) !important; }
.mt-12 { margin-block-start: var(--size-12) !important; }
.mt-16 { margin-block-start: var(--size-16) !important; }
.mt-24 { margin-block-start: var(--size-24) !important; }
.mt-32 { margin-block-start: var(--size-32) !important; }

.ms-4 { margin-inline-start: var(--size-4) !important; }
.ms-8 { margin-inline-start: var(--size-8) !important; }
.ms-16 { margin-inline-start: var(--size-16) !important; }

.me-14 { margin-inline-end: 0.875rem !important; }

.my-24 { margin-block: var(--size-24) !important; }

/* ---- Spacing (padding) ---- */
.p-0 { padding: 0 !important; }
.p-16 { padding: var(--size-16) !important; }
.p-20 { padding: var(--size-20) !important; }
.p-24 { padding: var(--size-24) !important; }
.p-40 { padding: var(--size-40) !important; }

.px-0 { padding-inline: 0 !important; }
.px-4 { padding-inline: var(--size-4) !important; }
.px-8 { padding-inline: var(--size-8) !important; }
.px-16 { padding-inline: var(--size-16) !important; }
.px-24 { padding-inline: var(--size-24) !important; }

.py-4 { padding-block: var(--size-4) !important; }
.py-8 { padding-block: var(--size-8) !important; }
.py-12 { padding-block: var(--size-12) !important; }
.py-16 { padding-block: var(--size-16) !important; }

.ps-16 { padding-inline-start: var(--size-16) !important; }

/* ---- Gap (WowDash-specific only; Bootstrap handles gap-0 through gap-5) ---- */
.gap-8 { gap: var(--size-8) !important; }
.gap-12 { gap: var(--size-12) !important; }

/* ============================================================
   12. DROPDOWN / PROFILE
   ============================================================ */
.dropdown-menu.to-top {
  top: calc(100% - 28px) !important;
}
@media (min-width: 375px) { .dropdown-menu-sm { width: 312px; } }

.to-top-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.to-top-list li { list-style: none; }
.to-top-list li a,
.to-top-list li button { transition: color 0.15s; }

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .sidebar {
    inset-inline-start: -100%;
    transition: inset-inline-start 0.3s;
  }
  .sidebar.sidebar-open { inset-inline-start: 0; }
  .dashboard-main { margin-inline-start: 0; }
}

/* ============================================================
   14. MISC HELPERS
   ============================================================ */
.alert .btn-close:focus { box-shadow: none; }
.cursor-pointer { cursor: pointer; }
.user-select-none { user-select: none; }
.text-nowrap { white-space: nowrap !important; }
.overflow-x-auto { overflow-x: auto !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-wrap { white-space: pre-wrap !important; }
.text-uppercase { text-transform: uppercase !important; }
.small, small { font-size: 0.8125rem; }