/* ═══════════════════════════════════════════════════════════════
   CampusFlow — Premium Glassmorphism Design System
   Inspired by Linear, Vercel, Raycast, Notion, Stripe
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   §1  DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root {
  /* ── Primary Palette ── */
  --brand-primary: #7C3AED;
  --brand-primary-rgb: 124, 58, 237;
  --brand-primary-dark: #6D28D9;
  --brand-primary-light: rgba(124, 58, 237, .08);
  --brand-secondary: #06B6D4;
  --brand-secondary-rgb: 6, 182, 212;
  --brand-accent: #EC4899;
  --brand-accent-rgb: 236, 72, 153;

  /* ── Surfaces ── */
  --surface-bg: #F5F3FF;
  --surface-bg-2: #EDE9FE;
  --surface-card: rgba(255, 255, 255, .75);
  --surface-card-solid: #ffffff;
  --surface-glass: rgba(255, 255, 255, .55);

  /* ── Text ── */
  --text-main: #1A1A2E;
  --text-muted: #5E6B78;    /* darkened from #6B7280 for WCAG AA on lavender bg */
  --text-secondary: #4B5563;

  /* ── Borders ── */
  --border-soft: rgba(124, 58, 237, .08);
  --border-glass: rgba(255, 255, 255, .35);

  /* ── Navigation ── */
  --nav-link: #4B5563;
  --nav-hover-bg: rgba(124, 58, 237, .06);

  /* ── Inputs ── */
  --input-bg: rgba(255, 255, 255, .7);

  /* ── Shadows ── */
  --shadow-soft: 0 1px 3px rgba(124, 58, 237, .03), 0 4px 16px rgba(124, 58, 237, .04);
  --shadow-card: 0 4px 24px rgba(124, 58, 237, .06), 0 1px 4px rgba(0, 0, 0, .03);
  --shadow-glow: 0 0 24px rgba(124, 58, 237, .1);
  --shadow-elevated: 0 12px 40px rgba(124, 58, 237, .08), 0 4px 12px rgba(0, 0, 0, .04);

  /* ── Layout ── */
  --sidebar-w: 260px;
  --topnav-h: 60px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  /* ── Glass ── */
  --glass-blur: blur(20px) saturate(1.4);
  --glass-bg: rgba(255, 255, 255, .6);
  --glass-border: rgba(255, 255, 255, .3);

  /* ── Footer ── */
  --footer-bg: rgba(255, 255, 255, .65);

  /* ── Transition Curves ── */
  --ease-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.22, .68, 0, 1.2);
}

/* ═══ Dark Mode ═══ */
[data-theme="dark"] {
  --brand-primary: #8B5CF6;
  --brand-primary-rgb: 139, 92, 246;
  --brand-primary-dark: #A78BFA;
  --brand-primary-light: rgba(139, 92, 246, .12);

  --surface-bg: #080816;
  --surface-bg-2: #0E0E22;
  --surface-card: rgba(255, 255, 255, .025);
  --surface-card-solid: #111128;
  --surface-glass: rgba(255, 255, 255, .035);

  --text-main: #E2E8F0;
  --text-muted: #8494A7;
  --text-secondary: #94A3B8;

  --border-soft: rgba(255, 255, 255, .06);
  --border-glass: rgba(255, 255, 255, .07);

  --nav-link: #CBD5E1;
  --nav-hover-bg: rgba(139, 92, 246, .1);

  --input-bg: rgba(255, 255, 255, .04);

  --shadow-soft: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3);
  --shadow-card: 0 4px 32px rgba(139, 92, 246, .08), 0 1px 4px rgba(0, 0, 0, .2);
  --shadow-glow: 0 0 40px rgba(139, 92, 246, .15);
  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3);

  --glass-blur: blur(24px) saturate(1.6);
  --glass-bg: rgba(12, 12, 30, .65);
  --glass-border: rgba(255, 255, 255, .06);

  --footer-bg: rgba(8, 8, 22, .75);
}

/* ═══════════════════════════════════════════
   §2  BASE & RESET
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth;
}
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  background: var(--surface-bg);
  color: var(--text-main);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.01em;
}

[data-theme="dark"] body {
  background: var(--surface-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, .08), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(6, 182, 212, .04), transparent);
}

main { flex: 1; }

a:not(.btn):not(.pub-nav-pill):not(.pub-login-btn):not(.pub-register-btn):not(.lang-option):not(.footer-link):not(.adm-qaction):not(.sd-hero-btn):not(.id-banner-btn):not(.id-kpi-link):not(.id-card-action):not(.id-row-btn):not(.id-quick-btn):not(.id-empty-cta):not(.sd-link):not(.adm-link-btn):not(.sd-course):not(.sd-course-action):not(.sp-link-btn):not(.nav-link):not(.dropdown-item):not(.sd-completed-name):not(.sd-empty-cta):not(.qd-add-btn):not(.qd-action-btn):not(.qd-edit-q-btn):not(.qd-add-answer-btn):not(.qd-back-btn):not(.lp-btn-primary):not(.lp-btn-ghost):not(.lp-final-btn):not(.lp-cert-cta):not(.lp-contact-btn):not(.pg-btn):not(.es-cta):not(.comm-btn):not(.sw-btn):not(.sw-shortcut):not(.sw-course):not(.sw-link):not(.ip-btn):not(.ip-shortcut):not(.ip-text-link):not(.ip-metric):not(.ip-student-row):not(.ap-btn):not(.ap-shortcut):not(.ap-link):not(.spw-btn):not(.apf-btn):not(.qr-act-btn):not(.ah-retry-btn):not(.rs-btn):not(.ia-rq-btn) {
  /* NOTE: the landing-page CTAs (.lp-btn-ghost / .lp-btn-primary / .lp-final-btn
     / .lp-cert-cta / .lp-contact-btn) are EXCLUDED here. They are <a> elements, and without this
     exclusion this high-specificity !important rule forced their text
     to brand purple (#7C3AED) — the real cause of the "faded/disabled" CTA
     label. Their own white color now applies cleanly.

     Same reason for the quiz CTAs: .qr-act-btn (Result Details hero — "Bütün
     Nəticələr"/"Cəhd Tarixçəsi"/"Kursa qayıt"), .ah-retry-btn (Attempt History
     "Yenidən Cəhd Et", purple gradient → purple-on-purple looked disabled), and
     .rs-btn (Quiz Result hero). These set their own readable colors on warm/
     gradient hero backgrounds; the !important purple here would override them. */
  color: var(--brand-primary) !important;
  text-decoration: none;
  transition: color .15s var(--ease-out);
}
a:not(.btn):not(.pub-nav-pill):not(.pub-login-btn):not(.pub-register-btn):not(.lang-option):not(.footer-link):not(.adm-qaction):not(.sd-hero-btn):not(.id-banner-btn):not(.id-kpi-link):not(.id-card-action):not(.id-row-btn):not(.id-quick-btn):not(.id-empty-cta):not(.sd-link):not(.adm-link-btn):not(.sd-course):not(.sd-course-action):not(.sp-link-btn):not(.nav-link):not(.dropdown-item):not(.sd-completed-name):not(.sd-empty-cta):not(.qd-add-btn):not(.qd-action-btn):not(.qd-edit-q-btn):not(.qd-add-answer-btn):not(.qd-back-btn):not(.lp-btn-primary):not(.lp-btn-ghost):not(.lp-final-btn):not(.lp-cert-cta):not(.lp-contact-btn):not(.pg-btn):not(.es-cta):not(.comm-btn):not(.sw-btn):not(.sw-shortcut):not(.sw-course):not(.sw-link):not(.ip-btn):not(.ip-shortcut):not(.ip-text-link):not(.ip-metric):not(.ip-student-row):not(.ap-btn):not(.ap-shortcut):not(.ap-link):not(.spw-btn):not(.apf-btn):not(.qr-act-btn):not(.ah-retry-btn):not(.rs-btn):not(.ia-rq-btn):hover {
  color: var(--brand-primary-dark) !important;
  text-decoration: underline;
}
.text-primary { color: var(--brand-primary) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--brand-primary-rgb), .15);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-primary-rgb), .3); }
* { scrollbar-width: thin; scrollbar-color: rgba(var(--brand-primary-rgb), .15) transparent; }

::selection {
  background: rgba(var(--brand-primary-rgb), .2);
  color: var(--text-main);
}

/* ═══════════════════════════════════════════
   §3  TOP NAVBAR
   ═══════════════════════════════════════════ */
.top-nav {
  height: var(--topnav-h);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: background .3s var(--ease-out);
}

[data-theme="dark"] .top-nav {
  background: rgba(8, 8, 22, .65);
  border-bottom-color: rgba(255, 255, 255, .04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -.3px;
  color: var(--brand-primary) !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.navbar .nav-link {
  color: var(--nav-link) !important;
  border-radius: var(--radius-md);
  padding: .45rem .85rem;
  font-size: .88rem;
  font-weight: 500;
  transition: all .15s var(--ease-out);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--brand-primary) !important;
  background-color: var(--nav-hover-bg);
}

/* ─── Public Navbar Pills ─── */
.pub-nav-pill {
  display: inline-flex;
  align-items: center;
  padding: .38rem .9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--nav-link) !important;
  text-decoration: none !important;
  transition: all .15s var(--ease-out);
  background: transparent;
  border: 1px solid transparent;
}
.pub-nav-pill:hover {
  background: var(--nav-hover-bg);
  color: var(--brand-primary) !important;
  text-decoration: none !important;
  border-color: rgba(var(--brand-primary-rgb), .1);
}

/* ─── Auth Buttons ─── */
.pub-login-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--nav-link) !important;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .82rem;
  padding: .38rem .85rem;
  text-decoration: none !important;
  transition: all .15s var(--ease-out);
}
.pub-login-btn:hover {
  background: var(--nav-hover-bg);
  border-color: rgba(var(--brand-primary-rgb), .25);
  color: var(--brand-primary) !important;
  text-decoration: none !important;
}

.pub-register-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  border: 1px solid transparent;
  color: #ffffff !important;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: .82rem;
  padding: .38rem .95rem;
  text-decoration: none !important;
  transition: all .2s var(--ease-out);
  box-shadow: 0 2px 12px rgba(var(--brand-primary-rgb), .25);
}
.pub-register-btn:hover {
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--brand-primary-rgb), .35);
}

.pub-logout-btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .78rem;
}

.pub-username {
  font-weight: 500;
  color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════
   §4  LANGUAGE SWITCHER
   ═══════════════════════════════════════════ */
.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-main);
  transition: all .15s var(--ease-out);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.lang-switcher-btn::after { display: none; }
.lang-switcher-btn:hover {
  background: var(--brand-primary-light);
  border-color: rgba(var(--brand-primary-rgb), .2);
  color: var(--brand-primary);
  box-shadow: 0 0 16px rgba(var(--brand-primary-rgb), .08);
}
.lang-flag  { font-size: 1rem; line-height: 1; }
.lang-code  { font-size: .72rem; font-weight: 700; letter-spacing: .03em; }

.lang-dropdown {
  min-width: 175px;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  padding: .3rem !important;
  background: var(--surface-card-solid) !important;
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-elevated) !important;
  border: 1px solid var(--border-soft) !important;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem .8rem;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  font-size: .84rem;
  color: var(--text-main);
  transition: all .12s var(--ease-out);
  text-align: left;
  text-decoration: none !important;
}
.lang-option:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}
.lang-option-active {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  font-weight: 700;
}
.lang-opt-flag { font-size: 1.1rem; flex-shrink: 0; }
.lang-opt-name { flex: 1; }

[data-theme="dark"] .lang-switcher-btn {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .06);
  color: #E2E8F0;
}
[data-theme="dark"] .lang-dropdown {
  box-shadow: 0 12px 48px rgba(0, 0, 0, .55) !important;
}
[data-theme="dark"] .lang-option { color: #E2E8F0; }
[data-theme="dark"] .lang-option:hover { color: #A78BFA; background: rgba(139, 92, 246, .1); }
[data-theme="dark"] .lang-option-active { color: #A78BFA; background: rgba(139, 92, 246, .12); }

/* ═══════════════════════════════════════════
   §5  APP SHELL (PUBLIC PAGES)
   ═══════════════════════════════════════════ */
.app-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  flex: 1 0 auto;
}

/* ═══════════════════════════════════════════
   §6  SIDEBAR LAYOUT
   ═══════════════════════════════════════════ */
.app-with-sidebar {
  display: flex;
  min-height: calc(100vh - var(--topnav-h));
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--border-soft);
  position: sticky;
  top: var(--topnav-h);
  height: calc(100vh - var(--topnav-h));
  overflow-y: auto;
  overflow-x: hidden;
  padding: .75rem .625rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--brand-primary-rgb), .1) transparent;
  transition: transform .25s var(--ease-out), width .25s var(--ease-out), padding .25s var(--ease-out), background .3s var(--ease-out);
  display: flex;
  flex-direction: column;
}

[data-theme="dark"] .sidebar {
  background: rgba(10, 10, 26, .5);
  border-right-color: rgba(255, 255, 255, .04);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .02);
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(var(--brand-primary-rgb), .1); border-radius: 4px; }

.sidebar-content {
  flex: 1;
  min-width: 0;
  padding: 1.75rem 2rem;
  overflow: auto;
}

/* ─── Sidebar Nav Links ─── */
.sidebar .nav-link {
  border-radius: var(--radius-md);
  padding: .6rem .9rem;
  margin-bottom: 3px;
  color: var(--nav-link);
  font-size: .86rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .65rem;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out);
  position: relative;
}

.sidebar .nav-link i {
  width: 18px;
  text-align: center;
  font-size: .95rem;
  flex-shrink: 0;
  opacity: .7;
  transition: all .15s var(--ease-out);
}

.sidebar .nav-link:hover {
  background-color: var(--nav-hover-bg);
  color: var(--brand-primary) !important;
  text-decoration: none;
  transform: translateX(2px);
}
.sidebar .nav-link:hover i {
  opacity: 1;
  color: var(--brand-primary);
}

/* Active state — calm premium fill + crisp accent bar (no blur glow). */
.sidebar .nav-link.active {
  background: rgba(var(--brand-primary-rgb), .10);
  color: var(--brand-primary) !important;
  font-weight: 600;
  text-decoration: none;
}
.sidebar .nav-link.active i { opacity: 1; }

[data-theme="dark"] .sidebar .nav-link.active {
  background: rgba(var(--brand-primary-rgb), .15);
}

/* Active indicator bar — full-height, solid brand (matches Admin nav restraint). */
.sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--brand-primary);
  pointer-events: none;
}

/* ─── Sidebar Section Labels ─── */
.sidebar-section-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  padding: .85rem .875rem .35rem;
  margin-top: .35rem;
}

/* ─── Sidebar User Profile (Bottom) ─── */
.sidebar-user {
  margin-top: auto;
  padding: .75rem;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: .65rem;
}
.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(var(--brand-primary-rgb), .2);
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.sidebar-user-role {
  font-size: .66rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ─── Mobile Sidebar Overlay ─── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out);
}

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: var(--topnav-h);
    left: 0;
    height: calc(100vh - var(--topnav-h));
    z-index: 1045;
    transform: translateX(-100%);
    box-shadow: 8px 0 32px rgba(0, 0, 0, .15);
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-overlay { display: block; }
  .sidebar-overlay.sidebar-open { opacity: 1; pointer-events: auto; }
  .sidebar-content { padding: 1.25rem 1rem; }
}
@media (min-width: 992px) {
  .btn-sidebar-toggle { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   COLLAPSIBLE DESKTOP SIDEBAR
   State is driven by data-sidebar="collapsed" on <html> (set by an
   inline head script for no-flash, kept in sync by sidebar.js).
   Only applies ≥992px; below that the sidebar is an off-canvas drawer.
   ════════════════════════════════════════════════════════════════ */
.btn-sidebar-collapse .bi { transition: transform .25s var(--ease-out); }
[data-sidebar="collapsed"] .btn-sidebar-collapse .bi { transform: rotate(180deg); }

@media (min-width: 992px) {
  [data-sidebar="collapsed"] .sidebar {
    width: 72px;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  /* Icon-only nav: hide the label text node + inline badges via font-size:0,
     then restore the icon glyph size. */
  [data-sidebar="collapsed"] .sidebar .nav-link {
    justify-content: center;
    gap: 0;
    font-size: 0;
    padding-left: 0;
    padding-right: 0;
  }
  [data-sidebar="collapsed"] .sidebar .nav-link i {
    font-size: 1.05rem;
    width: auto;
    opacity: .9;
  }
  [data-sidebar="collapsed"] .sidebar .nav-link .badge { display: none; }
  /* Section labels collapse to a subtle divider dot */
  [data-sidebar="collapsed"] .sidebar-section-label {
    font-size: 0;
    text-align: center;
    padding: .6rem 0 .25rem;
  }
  [data-sidebar="collapsed"] .sidebar-section-label::after {
    content: "•";
    font-size: .7rem;
    color: var(--text-muted);
    opacity: .45;
  }
  /* User card → avatar only */
  [data-sidebar="collapsed"] .sidebar-user { justify-content: center; padding: .75rem .25rem; }
  [data-sidebar="collapsed"] .sidebar-user-info { display: none; }
}

/* ═══════════════════════════════════════════
   §7  GLASS SURFACE CARDS
   ═══════════════════════════════════════════ */
.surface-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

a .surface-card:hover,
.surface-card.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

[data-theme="dark"] a .surface-card:hover,
[data-theme="dark"] .surface-card.hover-lift:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5), 0 0 24px rgba(var(--brand-primary-rgb), .06);
}

/* Bootstrap card overrides */
.card {
  background-color: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text-main);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
}

.list-group-item,
.modal-content,
.accordion-item {
  background-color: var(--surface-card);
  color: var(--text-main);
  border-color: var(--border-soft);
}

/* Bootstrap dropdown dark mode */
.dropdown-menu {
  background-color: var(--surface-card-solid);
  backdrop-filter: var(--glass-blur);
  color: var(--text-main);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  padding: .3rem;
}
.dropdown-item {
  color: var(--text-main);
  border-radius: var(--radius-sm);
  transition: all .12s var(--ease-out);
  font-size: .88rem;
  padding: .45rem .75rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--brand-primary);
  color: #fff;
}

/* ═══════════════════════════════════════════
   §8  KPI STAT CARDS
   ═══════════════════════════════════════════ */
.kpi-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: all .2s var(--ease-out);
}
.kpi-card:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.kpi-label {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .2rem;
}

/* ═══════════════════════════════════════════
   §9  EMPTY STATES
   ═══════════════════════════════════════════ */
.empty-state {
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: rgba(var(--brand-primary-rgb), .08);
  color: var(--brand-primary);
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), .08);
}
[data-theme="dark"] .empty-state-icon {
  background: rgba(var(--brand-primary-rgb), .12);
}
.empty-state h5 {
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--text-main);
  font-size: 1rem;
}
.empty-state p {
  color: var(--text-muted);
  max-width: 360px;
  margin: 0 auto 1.25rem;
  font-size: .85rem;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   §10  PAGE HEADER
   ═══════════════════════════════════════════ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: .75rem;
}
.page-header-title h2 {
  font-weight: 800;
  margin-bottom: .2rem;
  font-size: 1.5rem;
  letter-spacing: -.3px;
}
.page-header-title p {
  color: var(--text-muted);
  margin: 0;
  font-size: .88rem;
}

/* ═══════════════════════════════════════════
   §11  TABLES — Premium SaaS Style
   ═══════════════════════════════════════════ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-soft);
  --bs-table-striped-bg: rgba(var(--brand-primary-rgb), .02);
  --bs-table-striped-color: var(--text-main);
  --bs-table-hover-bg: rgba(var(--brand-primary-rgb), .04);
  border-collapse: separate;
  border-spacing: 0;
}
[data-theme="dark"] .table {
  --bs-table-striped-bg: rgba(255, 255, 255, .015);
  --bs-table-hover-bg: rgba(var(--brand-primary-rgb), .06);
}

.table thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  padding: .75rem 1rem;
  white-space: nowrap;
  background: rgba(var(--brand-primary-rgb), .02);
}
[data-theme="dark"] .table thead th {
  background: rgba(255, 255, 255, .02);
}

.table tbody td {
  padding: .7rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), .04);
}
[data-theme="dark"] .table tbody td {
  border-bottom-color: rgba(255, 255, 255, .03);
}

.table tbody tr {
  transition: all .15s var(--ease-out);
}
.table tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .04) !important;
}
[data-theme="dark"] .table tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .06) !important;
}

/* ═══════════════════════════════════════════
   §12  ALERTS
   ═══════════════════════════════════════════ */
.alert {
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  padding: .875rem 1.125rem;
  backdrop-filter: blur(8px);
}
.alert-success { background: rgba(34, 197, 94, .08); color: #15803d; border-color: rgba(34, 197, 94, .15); }
.alert-danger  { background: rgba(239, 68, 68, .08); color: #b91c1c; border-color: rgba(239, 68, 68, .15); }
.alert-warning { background: rgba(245, 158, 11, .08); color: #92400e; border-color: rgba(245, 158, 11, .15); }
.alert-info    { background: rgba(59, 130, 246, .08); color: #1d4ed8; border-color: rgba(59, 130, 246, .15); }

[data-theme="dark"] .alert-success { background: rgba(34, 197, 94, .1); color: #4ade80; border-color: rgba(34, 197, 94, .15); }
[data-theme="dark"] .alert-danger  { background: rgba(239, 68, 68, .1); color: #f87171; border-color: rgba(239, 68, 68, .15); }
[data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, .1); color: #fbbf24; border-color: rgba(245, 158, 11, .15); }
[data-theme="dark"] .alert-info    { background: rgba(59, 130, 246, .1); color: #60a5fa; border-color: rgba(59, 130, 246, .15); }

/* ═══════════════════════════════════════════
   §13  BUTTONS
   ═══════════════════════════════════════════ */
.btn {
  transition: all .15s var(--ease-out);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: -.01em;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  border: 1px solid transparent;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), .2);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(var(--brand-primary-rgb), .3);
  transform: translateY(-1px);
}

.btn-outline-primary {
  border-color: rgba(var(--brand-primary-rgb), .3);
  color: var(--brand-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--brand-primary-light);
  border-color: rgba(var(--brand-primary-rgb), .5);
  color: var(--brand-primary);
}

.btn:focus, .btn:active:focus,
.form-control:focus, .form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .15);
  border-color: rgba(var(--brand-primary-rgb), .4);
}

/* Keyboard-only focus ring (visible ring, no ring on mouse click) */
.btn:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible) {
  box-shadow: none;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .25);
  outline: none;
}

/* ═══════════════════════════════════════════
   §14  FORMS
   ═══════════════════════════════════════════ */
.form-control,
.form-select {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  min-height: 2.7rem;
  background-color: var(--input-bg);
  backdrop-filter: blur(8px);
  color: var(--text-main);
  transition: all .15s var(--ease-out);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  border-color: rgba(var(--brand-primary-rgb), .4);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .1), 0 0 16px rgba(var(--brand-primary-rgb), .05);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label {
  font-weight: 600;
  font-size: .86rem;
  color: var(--text-main);
  margin-bottom: .35rem;
}
/* ═══ ROOT-CAUSE FIX (auth inputs invisible in dark mode) ═════════════
 * The previous rule set a dark input BACKGROUND but never set `color`, so
 * typed text inherited the base .form-control colour (dark) → dark-on-dark,
 * almost invisible. Only input[type=password] had a colour fix (§30.4), which
 * is why password fields looked fine but Full name / Username / Email / Role
 * did not. Set an explicit light text colour + caret for ALL inputs/selects,
 * and harden every state (placeholder, focus, hover, validation, disabled,
 * autofill, select options).
 * ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  border-color: rgba(255, 255, 255, .16);
  background-color: rgba(255, 255, 255, .06);
  color: #F8FAFC !important;
  caret-color: #FFFFFF;
}
[data-theme="dark"] .form-control::placeholder {
  color: rgba(226, 232, 240, .55) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .55);
  opacity: 1;
}
[data-theme="dark"] .form-control:hover,
[data-theme="dark"] .form-select:hover {
  border-color: rgba(255, 255, 255, .24);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(168, 85, 247, .70);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .18), 0 0 16px rgba(168, 85, 247, .10);
  color: #FFFFFF !important;
}
/* Validation states must keep light typed text (Bootstrap only recolours the
   border/icon, leaving the dark inherited text → invisible without this). */
[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .form-control.input-validation-error,
[data-theme="dark"] .form-control.is-valid,
[data-theme="dark"] .form-select.is-invalid,
[data-theme="dark"] .form-select.input-validation-error {
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-control[readonly] {
  color: rgba(226, 232, 240, .45) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .45) !important;
  background-color: rgba(255, 255, 255, .03);
}
/* §33  Role <select> — readable control + native option list */
[data-theme="dark"] .form-select {
  color: #F8FAFC !important;
}
[data-theme="dark"] .form-select option {
  background-color: #14142A;
  color: #F8FAFC;
}
[data-theme="dark"] .form-select option[value=""],
[data-theme="dark"] .form-select option:disabled {
  color: rgba(226, 232, 240, .55);
}
/* §34  Browser autofill — force the premium dark surface + light text instead
 * of Chrome's white/yellow box-with-black-text. The 1000px inset shadow trick
 * paints over the UA autofill background; text-fill keeps glyphs light. */
[data-theme="dark"] .form-control:-webkit-autofill,
[data-theme="dark"] .form-control:-webkit-autofill:hover,
[data-theme="dark"] .form-control:-webkit-autofill:focus,
[data-theme="dark"] .form-control:-webkit-autofill:active,
[data-theme="dark"] .form-select:-webkit-autofill {
  -webkit-text-fill-color: #F8FAFC !important;
  caret-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0 1000px #181830 inset !important;
  box-shadow: 0 0 0 1000px #181830 inset !important;
  border-color: rgba(255, 255, 255, .16) !important;
  transition: background-color 9999s ease-out 0s;
}
.form-check-label {
  color: var(--text-muted);
  font-size: .88rem;
}

/* Password visibility toggle */
.pwd-toggle-btn {
  border-color: var(--border-soft);
  background: transparent;
  color: var(--text-muted);
  transition: all .15s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
}
.pwd-toggle-btn:hover {
  color: var(--brand-primary);
  background: var(--brand-primary-light);
  border-color: rgba(var(--brand-primary-rgb), .2);
}
.pwd-toggle-btn:focus {
  box-shadow: none;
  border-color: rgba(var(--brand-primary-rgb), .4);
  color: var(--brand-primary);
}
[data-theme="dark"] .pwd-toggle-btn {
  border-color: rgba(255, 255, 255, .06);
  color: var(--text-muted);
}
[data-theme="dark"] .pwd-toggle-btn:hover {
  background: rgba(var(--brand-primary-rgb), .1);
  border-color: rgba(var(--brand-primary-rgb), .3);
  color: var(--brand-primary);
}

/* ═══════════════════════════════════════════
   §15  PROGRESS BAR
   ═══════════════════════════════════════════ */
.progress {
  background-color: rgba(var(--brand-primary-rgb), .08);
  border-radius: 999px;
  overflow: hidden;
  height: 6px;
}
.progress-bar {
  background: linear-gradient(90deg, var(--brand-primary), #9333EA);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(var(--brand-primary-rgb), .3);
}

/* ═══════════════════════════════════════════
   §16  THEME TOGGLE
   ═══════════════════════════════════════════ */
.theme-toggle {
  border-radius: var(--radius-md);
  border-color: var(--border-soft);
  color: var(--text-main);
  background-color: transparent;
  min-width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s var(--ease-out);
}
.theme-toggle:hover,
.theme-toggle:focus {
  color: var(--brand-primary);
  background-color: var(--brand-primary-light);
  border-color: rgba(var(--brand-primary-rgb), .2);
  box-shadow: 0 0 12px rgba(var(--brand-primary-rgb), .1);
}

/* ═══════════════════════════════════════════
   §17  AUTH PAGES
   ═══════════════════════════════════════════ */
.auth-card {
  max-width: 440px;
  width: min(100%, 480px);
  margin: 3rem auto 1.5rem;
}
.auth-card .card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
}
[data-theme="dark"] .auth-card .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .028));
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .45), 0 0 32px rgba(var(--brand-primary-rgb), .06);
}
.auth-card .card-body { padding: 2.5rem 2rem !important; }
.auth-card h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.5px;
  margin-bottom: .25rem !important;
}
.auth-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: .75rem;
  box-shadow: 0 4px 16px rgba(99, 102, 241, .3);
}
.auth-card .btn-primary.btn-lg {
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: .95rem;
  min-height: 44px;
  padding: .75rem 1rem;
  transition: all .2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-card .btn-primary.btn-lg:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(var(--brand-primary-rgb), .3);
}
.auth-card .form-label,
.auth-card .form-check-label {
  color: var(--text-main);
}
.auth-card .text-muted {
  color: var(--text-muted) !important;
}
.auth-card .input-group .form-control {
  border-right: 0;
}
.auth-card .input-group .pwd-toggle-btn {
  width: 2.9rem;
  min-width: 2.9rem;
  border-left: 0;
  border-color: var(--border-soft);
  background: var(--input-bg);
}
.auth-card .input-group .form-control:focus + .pwd-toggle-btn {
  border-color: rgba(var(--brand-primary-rgb), .4);
}
[data-theme="dark"] .auth-card .form-label,
[data-theme="dark"] .auth-card .form-check-label {
  color: #E2E8F0;
}
[data-theme="dark"] .auth-card .input-group .pwd-toggle-btn {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: #CBD5E1;
}
[data-theme="dark"] .auth-card .input-group .form-control:focus + .pwd-toggle-btn {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(168, 85, 247, .70);
  color: #FFFFFF;
}
[data-theme="dark"] .auth-card .alert-danger {
  background: rgba(185, 28, 28, .18);
  border-color: rgba(248, 113, 113, .25);
  color: #FCA5A5;
}
[data-theme="dark"] .auth-card .text-danger {
  color: #FCA5A5 !important;
}
.auth-status-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: .9rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--auth-status-border);
  background:
    linear-gradient(135deg, var(--auth-status-bg-start), var(--auth-status-bg-end)),
    var(--surface-glass);
  box-shadow: 0 16px 36px var(--auth-status-shadow), inset 0 1px 0 rgba(255, 255, 255, .42);
  backdrop-filter: var(--glass-blur);
  overflow: hidden;
}
.auth-status-card::before {
  content: "";
  position: absolute;
  inset: -35% auto auto -18%;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--auth-status-glow), transparent 68%);
  animation: authPulseGlow 2.8s ease-in-out infinite;
}
.auth-status-icon {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-status-accent);
  background: var(--auth-status-icon-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 10px 20px var(--auth-status-shadow);
  font-size: 1.25rem;
}
.auth-status-content,
.auth-status-card > div:last-child {
  position: relative;
  z-index: 1;
}
.auth-status-title {
  color: var(--text-main);
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.25;
}
.auth-status-text {
  color: var(--text-secondary);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: .18rem;
}
.auth-status-eta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem;
  color: var(--text-muted);
  font-size: .78rem;
}
.auth-status-eta strong {
  color: var(--auth-status-accent);
  padding: .26rem .55rem;
  border-radius: 999px;
  background: var(--auth-status-chip-bg);
  font-size: .8rem;
}
.auth-status-note {
  margin-top: .65rem;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.45;
}
.auth-status-card-pending {
  --auth-status-accent: #B45309;
  --auth-status-bg-start: rgba(245, 158, 11, .16);
  --auth-status-bg-end: rgba(251, 191, 36, .055);
  --auth-status-border: rgba(245, 158, 11, .24);
  --auth-status-shadow: rgba(180, 83, 9, .12);
  --auth-status-glow: rgba(245, 158, 11, .28);
  --auth-status-icon-bg: rgba(245, 158, 11, .14);
  --auth-status-chip-bg: rgba(245, 158, 11, .12);
}
.auth-status-card-success {
  --auth-status-accent: #047857;
  --auth-status-bg-start: rgba(34, 197, 94, .14);
  --auth-status-bg-end: rgba(16, 185, 129, .05);
  --auth-status-border: rgba(34, 197, 94, .24);
  --auth-status-shadow: rgba(4, 120, 87, .12);
  --auth-status-glow: rgba(34, 197, 94, .24);
  --auth-status-icon-bg: rgba(34, 197, 94, .13);
  --auth-status-chip-bg: rgba(34, 197, 94, .12);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.45rem 0;
}
.auth-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-primary-rgb), .18), transparent);
}
.auth-divider em {
  color: var(--text-muted);
  font-size: .78rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
}
.external-login-form {
  margin-bottom: 1.5rem;
}
.btn-google-login {
  min-height: 52px;
  border: 1px solid rgba(var(--brand-primary-rgb), .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: var(--text-main);
  font-weight: 600;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .72rem;
  padding: .85rem 1rem;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .62);
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
}
.btn-google-login:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--brand-primary-rgb), .24);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 16px 30px rgba(var(--brand-primary-rgb), .13), inset 0 1px 0 rgba(255, 255, 255, .75);
}
.btn-google-login:focus-visible {
  outline: 3px solid rgba(var(--brand-primary-rgb), .26);
  outline-offset: 3px;
  border-color: rgba(var(--brand-primary-rgb), .44);
  box-shadow: 0 0 0 1px rgba(var(--brand-primary-rgb), .22), 0 14px 28px rgba(var(--brand-primary-rgb), .14);
}
.btn-google-login:disabled,
.btn-google-login.is-loading {
  cursor: wait;
  opacity: .82;
  transform: none;
}
.google-logo {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.google-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.google-login-loader {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 2px solid rgba(var(--brand-primary-rgb), .2);
  border-top-color: var(--brand-primary);
  animation: authSpinner .7s linear infinite;
}
.btn-google-login.is-loading .google-logo {
  display: none;
}
.btn-google-login.is-loading .google-login-loader {
  display: inline-block;
}
.auth-btn-spinner {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .46);
  border-top-color: #fff;
  animation: authSpinner .7s linear infinite;
}
.auth-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.auth-loading-overlay[hidden] {
  display: none !important;
}
.auth-loading-panel {
  width: min(100%, 340px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.auth-loading-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--text-main);
  font-weight: 900;
  font-size: 1.08rem;
}
.auth-loading-logo .bi {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), #7c3aed);
  box-shadow: 0 8px 22px rgba(var(--brand-primary-rgb), .28);
}
.auth-loading-spinner {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 3px solid rgba(var(--brand-primary-rgb), .18);
  border-top-color: var(--brand-primary);
  animation: authSpinner .72s linear infinite;
}
.auth-loading-text {
  color: var(--text-main);
  font-weight: 700;
}
body.auth-loading-active {
  cursor: wait;
}
[data-theme="dark"] .auth-loading-overlay {
  background: rgba(2, 6, 23, .48);
}
[data-theme="dark"] .auth-loading-panel {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(15, 23, 42, .86);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
}
[data-theme="dark"] .auth-loading-logo,
[data-theme="dark"] .auth-loading-text {
  color: #F8FAFC;
}
[data-theme="dark"] .auth-status-card {
  box-shadow: 0 16px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
}
[data-theme="dark"] .auth-status-card-pending {
  --auth-status-accent: #FCD34D;
  --auth-status-bg-start: rgba(245, 158, 11, .14);
  --auth-status-bg-end: rgba(245, 158, 11, .035);
  --auth-status-border: rgba(245, 158, 11, .2);
  --auth-status-shadow: rgba(0, 0, 0, .22);
  --auth-status-glow: rgba(245, 158, 11, .22);
  --auth-status-icon-bg: rgba(245, 158, 11, .12);
  --auth-status-chip-bg: rgba(245, 158, 11, .14);
}
[data-theme="dark"] .auth-status-card-success {
  --auth-status-accent: #86EFAC;
  --auth-status-bg-start: rgba(34, 197, 94, .12);
  --auth-status-bg-end: rgba(34, 197, 94, .035);
  --auth-status-border: rgba(34, 197, 94, .2);
  --auth-status-shadow: rgba(0, 0, 0, .22);
  --auth-status-glow: rgba(34, 197, 94, .18);
  --auth-status-icon-bg: rgba(34, 197, 94, .12);
  --auth-status-chip-bg: rgba(34, 197, 94, .14);
}
[data-theme="dark"] .auth-status-text {
  color: #CBD5E1;
}
[data-theme="dark"] .btn-google-login {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .12);
  color: #F8FAFC;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
}
[data-theme="dark"] .btn-google-login:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32), 0 0 24px rgba(var(--brand-primary-rgb), .12);
}
@keyframes authSpinner {
  to { transform: rotate(360deg); }
}
@keyframes authPulseGlow {
  0%, 100% { opacity: .58; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

body.auth-page {
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
body.auth-page .auth-shell {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: min(1120px, 100%);
  min-height: auto;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
body.auth-page .auth-shell > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: auto;
}
body.auth-page .auth-card {
  flex: 0 0 auto;
  width: min(100%, 480px);
  max-width: 480px;
  margin-bottom: 2rem;
  overflow: visible;
}
body.auth-page .auth-card .card,
body.auth-page .auth-card .card-body,
body.auth-page .auth-card form {
  max-height: none;
  overflow: visible;
}
body.auth-page .auth-footer {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto;
  flex-shrink: 0;
  width: 100%;
  transform: none !important;
}

/* ═══════════════════════════════════════════
   §18  HERO (PUBLIC HOME)
   ═══════════════════════════════════════════ */
.hero {
  padding: 4.5rem 1.5rem 4rem;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  margin-bottom: .85rem;
  background: linear-gradient(135deg, var(--brand-primary) 0%, #9333EA 40%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .hero h1 {
  background: linear-gradient(135deg, #8B5CF6 0%, #C084FC 40%, #F0ABFC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  line-height: 1.75;
}

/* ═══════════════════════════════════════════
   §19  COURSE CARDS
   ═══════════════════════════════════════════ */
.course-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: all .25s var(--ease-out);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-elevated);
}
[data-theme="dark"] .course-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5), 0 0 20px rgba(var(--brand-primary-rgb), .08);
}

.course-card-img {
  height: 180px;
  object-fit: cover;
  width: 100%;
}
.course-card-img-placeholder {
  height: 180px;
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .08), rgba(var(--brand-primary-rgb), .15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  opacity: .5;
}
.course-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-card-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .4rem;
  line-height: 1.4;
  color: var(--text-main);
}
.course-card-desc {
  font-size: .85rem;
  color: var(--text-muted);
  flex: 1;
  margin-bottom: 1rem;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════
   §20  FOOTER
   ═══════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  padding: .85rem 0;
  margin-top: auto;
  flex-shrink: 0;
  background-color: var(--footer-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .82rem;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-brand {
  font-weight: 700;
  font-size: .82rem;
  color: var(--brand-primary);
}
.footer-copy { color: var(--text-muted); }
.footer-link {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color .15s var(--ease-out);
}
.footer-link:hover { color: var(--brand-primary) !important; }

/* ═══════════════════════════════════════════
   §21  TEXT & BADGE HELPERS
   ═══════════════════════════════════════════ */
.text-muted, .form-text, small { color: var(--text-muted) !important; }

.badge {
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 8px;
  padding: .3em .65em;
  font-size: .72rem;
}

/* ═══════════════════════════════════════════
   §22  ANIMATIONS & MICRO-INTERACTIONS
   ═══════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--brand-primary-rgb), .15); }
  50% { box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), .25); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.fade-in-up { animation: fadeInUp .45s var(--ease-out) both; }
.fade-in { animation: fadeIn .3s var(--ease-out) both; }
.scale-in { animation: scaleIn .3s var(--ease-out) both; }

.stagger-children > * { animation: fadeInUp .4s var(--ease-out) both; }
.stagger-children > *:nth-child(1) { animation-delay: 0s; }
.stagger-children > *:nth-child(2) { animation-delay: .05s; }
.stagger-children > *:nth-child(3) { animation-delay: .1s; }
.stagger-children > *:nth-child(4) { animation-delay: .15s; }
.stagger-children > *:nth-child(5) { animation-delay: .2s; }
.stagger-children > *:nth-child(6) { animation-delay: .25s; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), .06) 25%, rgba(var(--brand-primary-rgb), .1) 50%, rgba(var(--brand-primary-rgb), .06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
}

/* Skeleton text shorthand */
.skeleton-text { height: 14px; border-radius: 6px; }
.skeleton-text--sm { height: 10px; }
.skeleton-text--lg { height: 20px; }
.skeleton-circle { border-radius: 50%; }

/* Content-loaded fade transition for async sections */
.async-content {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.async-content.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children 7-10 */
.stagger-children > *:nth-child(7) { animation-delay: .3s; }
.stagger-children > *:nth-child(8) { animation-delay: .35s; }
.stagger-children > *:nth-child(9) { animation-delay: .4s; }
.stagger-children > *:nth-child(10) { animation-delay: .45s; }

/* ═══════════════════════════════════════════
   §23  ADMIN DASHBOARD COMPONENTS
   ═══════════════════════════════════════════ */
.adm-stat {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  box-shadow: var(--shadow-soft);
}
.adm-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated);
}

.adm-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform .2s var(--ease-out);
}
.adm-stat:hover .adm-stat-icon {
  transform: scale(1.08);
}

.adm-stat-text { min-width: 0; }

.adm-stat-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  color: var(--text-main);
}

.adm-stat-label {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .15rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.adm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  gap: .5rem;
}
.adm-card-title {
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-main);
  display: flex;
  align-items: center;
}
.adm-card-body { padding: 1.25rem; }

/* Admin Table */
.adm-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-soft);
}
.adm-table thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  border-bottom-width: 1px;
  padding: .7rem 1rem;
  white-space: nowrap;
  background: rgba(var(--brand-primary-rgb), .02);
}
[data-theme="dark"] .adm-table thead th {
  background: rgba(255, 255, 255, .02);
}
.adm-table thead th a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
}
.adm-table thead th a:hover { color: var(--brand-primary) !important; }
.adm-table thead th .bi-sort-up,
.adm-table thead th .bi-sort-down { color: var(--brand-primary) !important; }

.adm-table tbody td {
  padding: .7rem 1rem;
  font-size: .84rem;
  vertical-align: middle;
}
.adm-table tbody tr {
  transition: all .15s var(--ease-out);
  border-left: 3px solid transparent;
}
.adm-table tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .04);
  border-left-color: var(--brand-primary);
}
[data-theme="dark"] .adm-table tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .06);
}

.adm-table tbody tr:nth-child(even) {
  background: rgba(var(--brand-primary-rgb), .015);
}
.adm-table tbody tr:nth-child(even):hover {
  background: rgba(var(--brand-primary-rgb), .04);
}
[data-theme="dark"] .adm-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .015);
}
[data-theme="dark"] .adm-table tbody tr:nth-child(even):hover {
  background: rgba(var(--brand-primary-rgb), .06);
}

/* Row stagger animation */
.adm-table.adm-stagger tbody tr { animation: fadeInUp .3s var(--ease-out) both; }
.adm-table.adm-stagger tbody tr:nth-child(1)  { animation-delay: 0s; }
.adm-table.adm-stagger tbody tr:nth-child(2)  { animation-delay: .03s; }
.adm-table.adm-stagger tbody tr:nth-child(3)  { animation-delay: .06s; }
.adm-table.adm-stagger tbody tr:nth-child(4)  { animation-delay: .09s; }
.adm-table.adm-stagger tbody tr:nth-child(5)  { animation-delay: .12s; }
.adm-table.adm-stagger tbody tr:nth-child(6)  { animation-delay: .15s; }
.adm-table.adm-stagger tbody tr:nth-child(7)  { animation-delay: .18s; }
.adm-table.adm-stagger tbody tr:nth-child(8)  { animation-delay: .21s; }
.adm-table.adm-stagger tbody tr:nth-child(9)  { animation-delay: .24s; }
.adm-table.adm-stagger tbody tr:nth-child(10) { animation-delay: .27s; }

/* Admin Empty State */
.adm-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}
.adm-empty-state .adm-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: .75rem;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), .08);
}
.adm-empty-state h6 { font-weight: 700; color: var(--text-main); margin-bottom: .25rem; }
.adm-empty-state p { color: var(--text-muted); font-size: .84rem; margin: 0; }

/* Health dots */
.adm-health-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .35rem;
}
.adm-dot-green {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, .5);
  animation: pulse-soft 2s infinite;
}
.adm-dot-red {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, .5);
  animation: pulse-soft 1.5s infinite;
}
.adm-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Avatar gradients */
.adm-avatar[data-hue="0"] { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.adm-avatar[data-hue="1"] { background: linear-gradient(135deg, #ec4899, #a855f7); }
.adm-avatar[data-hue="2"] { background: linear-gradient(135deg, #14b8a6, #06b6d4); }
.adm-avatar[data-hue="3"] { background: linear-gradient(135deg, #f97316, #ef4444); }
.adm-avatar[data-hue="4"] { background: linear-gradient(135deg, #22c55e, #10b981); }
.adm-avatar[data-hue="5"] { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.adm-avatar[data-hue="6"] { background: linear-gradient(135deg, #f59e0b, #f97316); }
.adm-avatar[data-hue="7"] { background: linear-gradient(135deg, #8b5cf6, #ec4899); }

/* Trend buttons */
.trend-btn {
  border-color: var(--border-soft) !important;
  color: var(--text-muted) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: .2rem .55rem !important;
  transition: all .15s var(--ease-out) !important;
  border-radius: var(--radius-sm) !important;
}
.trend-btn:hover,
.trend-btn.active {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), .25) !important;
}

/* ═══════════════════════════════════════════
   §24  ADMIN ACTION BUTTONS & AVATAR
   ═══════════════════════════════════════════ */
.btn-adm-action {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  transition: all .15s var(--ease-out);
}
.btn-adm-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.adm-avatar {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(var(--brand-primary-rgb), .15);
}

/* Admin pagination */
.adm-pagination .page-link {
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 600;
  min-width: 32px;
  text-align: center;
  margin: 0 2px;
  border-color: var(--border-soft);
  color: var(--text-main);
  background: var(--surface-card);
  transition: all .15s var(--ease-out);
}
.adm-pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), .2);
}
.adm-pagination .page-link:hover {
  background: var(--nav-hover-bg);
  color: var(--brand-primary);
  border-color: rgba(var(--brand-primary-rgb), .2);
}

/* Admin search */
.adm-search-input {
  transition: border-color .2s, box-shadow .2s;
}
.adm-search-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .1), 0 0 16px rgba(var(--brand-primary-rgb), .05);
}
.adm-search-input.adm-searching {
  border-color: var(--brand-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237c3aed' viewBox='0 0 16 16'%3E%3Cpath d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 14px;
  padding-right: 2rem;
}

/* Row count badge */
.adm-row-count {
  font-size: .72rem;
  font-weight: 700;
  padding: .2em .55em;
  border-radius: 8px;
  transition: transform .2s var(--ease-out);
}
.adm-row-count.adm-count-updated { animation: scaleIn .3s var(--ease-out); }

/* Chart toolbar */
.adm-chart-toolbar { display: flex; gap: .35rem; }
.adm-chart-toolbar .btn {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: .78rem;
}

/* Chart fullscreen */
.adm-chart-fullscreen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--surface-card-solid);
  padding: 1.5rem;
  display: flex; flex-direction: column;
  animation: fadeIn .2s var(--ease-out);
}
.adm-chart-fullscreen .adm-chart-fs-close { position: absolute; top: 1rem; right: 1rem; z-index: 1; }
.adm-chart-fullscreen canvas { flex: 1; max-height: calc(100vh - 4rem); }

/* Date preset */
.adm-date-preset.active {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), .2) !important;
}

/* Report cards */
.adm-report-card {
  transition: all .2s var(--ease-out);
}
.adm-report-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

/* ═══════════════════════════════════════════
   §25  DARK MODE COMPREHENSIVE OVERRIDES
   ═══════════════════════════════════════════ */
[data-theme="dark"] .adm-stat:hover {
  box-shadow: 0 0 32px rgba(var(--brand-primary-rgb), .12);
}
[data-theme="dark"] .adm-card { border-color: var(--border-soft); }

/* bg-opacity dark mode */
[data-theme="dark"] .bg-primary.bg-opacity-10 { background: rgba(139, 92, 246, .15) !important; }
[data-theme="dark"] .bg-success.bg-opacity-10 { background: rgba(34, 197, 94, .15) !important; }
[data-theme="dark"] .bg-warning.bg-opacity-10 { background: rgba(245, 158, 11, .15) !important; }
[data-theme="dark"] .bg-info.bg-opacity-10    { background: rgba(6, 182, 212, .15) !important; }
[data-theme="dark"] .bg-danger.bg-opacity-10  { background: rgba(239, 68, 68, .15) !important; }

[data-theme="dark"] .text-primary { color: #8B5CF6 !important; }
[data-theme="dark"] .text-success { color: #4ade80 !important; }
[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .text-info    { color: #22d3ee !important; }
[data-theme="dark"] .text-danger  { color: #f87171 !important; }

[data-theme="dark"] .adm-stat .text-primary { color: #8B5CF6 !important; }
[data-theme="dark"] .adm-stat .text-success { color: #4ade80 !important; }
[data-theme="dark"] .adm-stat .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .adm-stat .text-info    { color: #22d3ee !important; }
[data-theme="dark"] .adm-stat .text-danger  { color: #f87171 !important; }

/* Dark borders */
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end,
[data-theme="dark"] .border { border-color: var(--border-soft) !important; }

/* Dark code */
[data-theme="dark"] code {
  background: rgba(139, 92, 246, .1);
  color: #A78BFA;
  padding: .15em .35em;
  border-radius: 5px;
  font-size: .85em;
}

/* Dark warning badge fix */
[data-theme="dark"] .badge.bg-warning.text-dark { color: #fde68a !important; }
[data-theme="dark"] .btn-warning.text-dark { color: #fde68a !important; }

/* Dark form-check */
[data-theme="dark"] .form-check-input {
  background-color: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Dark outline buttons */
[data-theme="dark"] .btn-outline-secondary {
  border-color: rgba(255, 255, 255, .08);
  color: var(--text-muted);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: var(--text-main);
}
[data-theme="dark"] .btn-outline-primary {
  border-color: rgba(139, 92, 246, .3);
  color: #8B5CF6;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background: rgba(139, 92, 246, .1);
  border-color: #8B5CF6;
  color: #A78BFA;
}
[data-theme="dark"] .btn-outline-danger {
  border-color: rgba(239, 68, 68, .3);
  color: #f87171;
}
[data-theme="dark"] .btn-outline-danger:hover {
  background: rgba(239, 68, 68, .1);
  border-color: #f87171;
  color: #fca5a5;
}
[data-theme="dark"] .btn-outline-success {
  border-color: rgba(34, 197, 94, .3);
  color: #4ade80;
}
[data-theme="dark"] .btn-outline-success:hover {
  background: rgba(34, 197, 94, .1);
  border-color: #4ade80;
  color: #86efac;
}
[data-theme="dark"] .btn-outline-warning {
  border-color: rgba(245, 158, 11, .3);
  color: #fbbf24;
}
[data-theme="dark"] .btn-outline-warning:hover {
  background: rgba(245, 158, 11, .1);
  border-color: #fbbf24;
  color: #fde68a;
}
[data-theme="dark"] .btn-outline-info {
  border-color: rgba(6, 182, 212, .3);
  color: #22d3ee;
}
[data-theme="dark"] .btn-outline-info:hover {
  background: rgba(6, 182, 212, .1);
  border-color: #22d3ee;
  color: #67e8f9;
}

/* Dark bg-opacity badges */
[data-theme="dark"] .bg-primary.bg-opacity-75 { background: rgba(139, 92, 246, .4) !important; }
[data-theme="dark"] .bg-success.bg-opacity-75 { background: rgba(34, 197, 94, .35) !important; }
[data-theme="dark"] .bg-danger.bg-opacity-75  { background: rgba(239, 68, 68, .35) !important; }
[data-theme="dark"] .bg-warning.bg-opacity-75 { background: rgba(245, 158, 11, .35) !important; color: #fde68a !important; }
[data-theme="dark"] .bg-secondary             { background: rgba(148, 163, 184, .15) !important; color: #94a3b8 !important; }
[data-theme="dark"] .bg-secondary.bg-opacity-75 { background: rgba(148, 163, 184, .25) !important; }

/* Dark progress */
[data-theme="dark"] .progress { background-color: rgba(139, 92, 246, .08); }

/* Dark form-text */
[data-theme="dark"] .form-text { color: var(--text-muted) !important; }

/* Dark star icons */
[data-theme="dark"] .bi-star.text-muted { color: rgba(148, 163, 184, .25) !important; }

/* Dark dl/dt/dd */
[data-theme="dark"] dt { color: var(--text-muted); }
[data-theme="dark"] dd { color: var(--text-main); }

/* Dark notification dropdown items */
[data-theme="dark"] .nd-item { border-bottom-color: rgba(255, 255, 255, .04); }
[data-theme="dark"] .nd-item:hover { background: rgba(139, 92, 246, .08); }
[data-theme="dark"] .nd-item-unread { background: rgba(139, 92, 246, .06); }
[data-theme="dark"] .nd-item-title { color: var(--text-main); }
[data-theme="dark"] .nd-footer { border-top-color: rgba(255, 255, 255, .04); }

/* Dark badge overrides */
[data-theme="dark"] .badge.bg-primary { background: rgba(139, 92, 246, .2) !important; color: #A78BFA !important; }
[data-theme="dark"] .badge.bg-success { background: rgba(34, 197, 94, .15) !important; color: #4ade80 !important; }
[data-theme="dark"] .badge.bg-warning { background: rgba(245, 158, 11, .15) !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge.bg-danger  { background: rgba(239, 68, 68, .15) !important; color: #f87171 !important; }
[data-theme="dark"] .badge.bg-info    { background: rgba(6, 182, 212, .15) !important; color: #22d3ee !important; }
[data-theme="dark"] .badge.bg-dark     { background: rgba(148, 163, 184, .15) !important; color: #94a3b8 !important; }
[data-theme="dark"] .badge.bg-dark.bg-opacity-50 { background: rgba(148, 163, 184, .2) !important; color: #CBD5E1 !important; }

/* Dark alert-dark */
[data-theme="dark"] .alert-dark { background: rgba(148, 163, 184, .08); color: #CBD5E1; border-color: rgba(148, 163, 184, .15); }

/* Dark bg-light: prevent jarring white backgrounds */
[data-theme="dark"] .bg-light { background: rgba(255, 255, 255, .04) !important; }
[data-theme="dark"] .card-header.bg-light { background: rgba(255, 255, 255, .03) !important; }
[data-theme="dark"] .card-footer.bg-light { background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .04) !important; }

/* Dark text-dark override: prevent invisible text */
[data-theme="dark"] .text-dark { color: var(--text-main) !important; }
[data-theme="dark"] .fw-semibold.text-dark { color: var(--text-main) !important; }

/* Dark modal */
[data-theme="dark"] .modal-content {
  background: var(--surface-card-solid);
  backdrop-filter: var(--glass-blur);
  border-color: rgba(255, 255, 255, .06);
  color: var(--text-main);
  box-shadow: var(--shadow-elevated);
}
[data-theme="dark"] .modal-header { border-color: rgba(255, 255, 255, .04); }
[data-theme="dark"] .modal-footer { border-color: rgba(255, 255, 255, .04); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(2); }

/* Dark cards */
[data-theme="dark"] .card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  border-color: var(--border-soft);
  color: var(--text-main);
}
[data-theme="dark"] .card-header {
  background: rgba(255, 255, 255, .02);
  border-color: rgba(255, 255, 255, .04);
  color: var(--text-main);
}
[data-theme="dark"] .list-group-item {
  background: var(--surface-card);
  border-color: var(--border-soft);
  color: var(--text-main);
}

/* Dark pagination */
[data-theme="dark"] .page-link {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .06);
  color: var(--text-main);
}
[data-theme="dark"] .page-link:hover {
  background: rgba(var(--brand-primary-rgb), .1);
  color: var(--brand-primary);
}
[data-theme="dark"] .page-item.active .page-link {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  border-color: transparent;
}

/* Dark tooltip */
.tooltip-inner {
  background: var(--surface-card-solid);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: .78rem;
  padding: .4rem .7rem;
  box-shadow: var(--shadow-elevated);
}

/* Dark navbar */
.navbar-toggler { border-color: var(--border-soft); }
[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(2);
}

/* ═══════════════════════════════════════════
   §26  MOBILE RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 575.98px) {
  .app-shell { padding: 1rem .75rem 2rem; }
  .auth-card { margin: 1.5rem auto 0; }
  .auth-card .card-body { padding: 2rem 1.25rem !important; }

  .adm-table-mobile thead { display: none; }
  .adm-table-mobile tbody tr {
    display: block;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    margin-bottom: .35rem;
    background: var(--surface-card);
  }
  .adm-table-mobile tbody tr:hover { border-left-color: var(--brand-primary); }
  .adm-table-mobile tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25rem 0;
    border: none;
    font-size: .82rem;
  }
  .adm-table-mobile tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-right: .75rem;
    flex-shrink: 0;
  }
  .adm-table-mobile tbody td:last-child {
    justify-content: flex-end;
    padding-top: .5rem;
  }

  .btn-adm-action { width: 40px; height: 40px; font-size: .85rem; }
  .adm-pagination .page-link {
    min-width: 40px; min-height: 40px;
    display: flex; align-items: center; justify-content: center;
  }
  canvas { min-height: 200px; }
}

/* Tablet breakpoint */
@media (min-width: 576px) and (max-width: 991.98px) {
  .app-shell { padding: 1.25rem 1rem 2rem; }
  canvas { min-height: 220px; }
}

/* Chart container overflow fix on all sizes */
.table-responsive { -webkit-overflow-scrolling: touch; }
canvas { max-width: 100%; }

/* ═══════════════════════════════════════════
   §27  REDUCED MOTION
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════
   §27.9  SHARED INTERIOR COMPONENTS
   _PageHeader + _EmptyState partials. Token-driven → dark/light parity is
   automatic. Roll these out across interior pages for one design language.
   ═══════════════════════════════════════════ */

/* ── Page header ── */
.pg-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.pg-header-main { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.pg-header-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, var(--pg-accent, #7C3AED),
              color-mix(in srgb, var(--pg-accent, #7C3AED) 60%, #1a1a2e));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pg-accent, #7C3AED) 30%, transparent);
}
.pg-header-text { min-width: 0; }
.pg-header-title { font-size: 1.45rem; font-weight: 800; margin: 0; color: var(--text-main); letter-spacing: -.3px; line-height: 1.2; }
.pg-header-sub { font-size: .85rem; color: var(--text-muted); margin: .15rem 0 0; }
.pg-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pg-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: 12px; min-height: 42px;
  font-size: .85rem; font-weight: 700; text-decoration: none;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s, border-color .15s;
}
.pg-btn--primary {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), .28);
}
.pg-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), .4); }
.pg-btn--ghost {
  background: var(--surface-bg-2); color: var(--text-main) !important;
  border: 1px solid var(--border-soft);
}
.pg-btn--ghost:hover { border-color: rgba(var(--brand-primary-rgb), .4); color: var(--brand-primary) !important; }
.pg-btn:focus-visible { outline: 3px solid rgba(var(--brand-primary-rgb), .5); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .pg-header-title { font-size: 1.2rem; }
  .pg-header-actions { width: 100%; }
  .pg-btn { flex: 1; justify-content: center; }
}

/* ── Empty state ── */
.es {
  text-align: center; padding: 3rem 1.5rem;
  background: var(--surface-bg-2); border: 1px dashed var(--border-soft);
  border-radius: 18px;
}
.es--compact { padding: 1.75rem 1rem; }
.es-icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1rem;
  display: grid; place-items: center; font-size: 1.7rem;
  background: rgba(var(--brand-primary-rgb), .1); color: var(--brand-primary);
}
.es--compact .es-icon { width: 48px; height: 48px; font-size: 1.3rem; margin-bottom: .65rem; }
.es-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin: 0 0 .35rem; }
.es-desc { font-size: .85rem; color: var(--text-muted); margin: 0 auto 1.1rem; max-width: 360px; line-height: 1.55; }
.es--compact .es-desc { margin-bottom: .85rem; }
.es-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  color: #fff !important; font-size: .84rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), .28);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.es-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), .4); }
.es-cta:focus-visible { outline: 3px solid rgba(var(--brand-primary-rgb), .5); outline-offset: 2px; }
[data-theme="dark"] .es { background: rgba(255,255,255,.02); }

/* ═══════════════════════════════════════════
   §28  PREMIUM GLASSMORPHISM UTILITIES
   ═══════════════════════════════════════════ */

/* Glass card utility */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-primary), #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow effect on hover */
.glow-hover {
  transition: box-shadow .3s var(--ease-out);
}
.glow-hover:hover {
  box-shadow: var(--shadow-glow);
}

/* Neon border */
.neon-border {
  border: 1px solid rgba(var(--brand-primary-rgb), .15);
  box-shadow: inset 0 0 20px rgba(var(--brand-primary-rgb), .03);
}
[data-theme="dark"] .neon-border {
  border-color: rgba(var(--brand-primary-rgb), .2);
  box-shadow: inset 0 0 30px rgba(var(--brand-primary-rgb), .04), 0 0 20px rgba(var(--brand-primary-rgb), .05);
}

/* Gradient backgrounds */
.bg-gradient-primary { background: linear-gradient(135deg, var(--brand-primary), #9333EA) !important; }
.bg-gradient-secondary { background: linear-gradient(135deg, #06B6D4, #3B82F6) !important; }
.bg-gradient-accent { background: linear-gradient(135deg, #EC4899, #8B5CF6) !important; }
.bg-gradient-success { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }
.bg-gradient-warning { background: linear-gradient(135deg, #f59e0b, #ef4444) !important; }

/* Subtle mesh background for dark mode */
[data-theme="dark"] .mesh-bg {
  background-image:
    radial-gradient(at 40% 20%, rgba(139, 92, 246, .06) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(6, 182, 212, .04) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(236, 72, 153, .03) 0px, transparent 50%);
}

/* Premium card with gradient border */
.premium-card {
  position: relative;
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  overflow: hidden;
}
.premium-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .2), rgba(6, 182, 212, .1), rgba(236, 72, 153, .1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Floating/lifted effect */
.float-card {
  transition: all .3s var(--ease-out);
}
.float-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-elevated);
}

/* Tag/chip styles */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  border: 1px solid rgba(var(--brand-primary-rgb), .1);
}

/* Divider with glow */
.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-primary-rgb), .2), transparent);
  border: none;
  margin: 1.5rem 0;
}

/* Status indicator */
.status-online { color: #22c55e; }
.status-online::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: .4rem;
  box-shadow: 0 0 6px rgba(34, 197, 94, .5);
  animation: pulse-soft 2s infinite;
}

/* Ambient glow for sections (dark mode only) */
[data-theme="dark"] .ambient-glow {
  position: relative;
}
[data-theme="dark"] .ambient-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(var(--brand-primary-rgb), .06) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ═══════════════════════════════════════════
   §29  CONTRAST + BUTTON STATE SYSTEM
   Global fixes for readability, WCAG, eye strain
   ═══════════════════════════════════════════ */

/* ── 29.1  Disabled button states ──────────────────────── */
.btn:disabled,
.btn[aria-disabled="true"],
.btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(.2);
  box-shadow: none;
  transform: none;
}

/* ── 29.2  btn-primary — ensure white text always wins ── */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #ffffff !important;
}
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #8B5CF6, #A855F7);
  box-shadow: 0 2px 10px rgba(139, 92, 246, .3);
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  box-shadow: 0 4px 18px rgba(139, 92, 246, .4);
}

/* ── 29.3  btn-outline-primary — readable on all surfaces ── */
[data-theme="dark"] .btn-outline-primary {
  color: #C4B5FD;
  border-color: rgba(196, 181, 253, .35);
}
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus {
  background: rgba(139, 92, 246, .15);
  color: #E9D5FF;
  border-color: rgba(196, 181, 253, .5);
}

/* ── 29.4  Focus ring — stronger visibility ─────────────── */
.btn:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .35) !important;
  outline: 2px solid rgba(var(--brand-primary-rgb), .5);
  outline-offset: 2px;
}
[data-theme="dark"] .btn:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(196, 181, 253, .3) !important;
  outline-color: rgba(196, 181, 253, .5);
}

/* ── 29.5  Ghost/glass buttons on purple surfaces ────────── */
/*
 * .sd-hero-btn--ghost, .adm-qaction, and similar buttons sit
 * on gradient-purple banners. Text must be bright white.
 */
.sd-hero-btn--ghost,
.id-banner-btn-ghost,
.adm-qaction,
.id-banner-btn {
  color: #ffffff !important;
  font-weight: 700;
}
.sd-hero-btn--ghost,
.id-banner-btn-ghost {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
}
.sd-hero-btn--ghost:hover,
.id-banner-btn-ghost:hover {
  background: rgba(255, 255, 255, .3);
  border-color: rgba(255, 255, 255, .5);
}
.adm-qaction {
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .3);
}
.adm-qaction:hover {
  background: rgba(255, 255, 255, .35);
  border-color: rgba(255, 255, 255, .45);
}
/* Instructor primary banner button — ensure readable */
.id-banner-btn-primary {
  background: rgba(255, 255, 255, .97);
  color: var(--brand-primary) !important;
  font-weight: 700;
}
.id-banner-btn-primary:hover {
  background: #ffffff;
  color: var(--brand-primary-dark) !important;
}

/* ── 29.6  CTA on purple gradient backgrounds ────────────── */
.sd-hero-btn--primary {
  background: rgba(255, 255, 255, .97);
  color: var(--brand-primary) !important;
  font-weight: 700;
}
.sd-hero-btn--primary:hover {
  background: #ffffff;
  color: var(--brand-primary-dark) !important;
}

/* ── 29.7  Empty state CTA buttons — solid gradient ──────── */
.sd-empty-cta,
.empty-state .btn-primary,
.adm-empty-state .btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA) !important;
  color: #ffffff !important;
  font-weight: 700;
  border: none;
  box-shadow: 0 3px 14px rgba(var(--brand-primary-rgb), .25);
}
.sd-empty-cta:hover,
.empty-state .btn-primary:hover,
.adm-empty-state .btn-primary:hover {
  box-shadow: 0 5px 22px rgba(var(--brand-primary-rgb), .35);
  transform: translateY(-2px);
}
[data-theme="dark"] .sd-empty-cta,
[data-theme="dark"] .empty-state .btn-primary,
[data-theme="dark"] .adm-empty-state .btn-primary {
  background: linear-gradient(135deg, #8B5CF6, #A855F7) !important;
  box-shadow: 0 3px 14px rgba(139, 92, 246, .35);
}

/* ── 29.8  Active filled CTA text lock ─────────────────────── */
/*
 * Component CTAs are often <a> elements. Keep filled/gradient active buttons
 * from inheriting global link purple or muted child icon colors.
 */
.cta-solid,
.btn-action,
.profile-action-primary,
.empty-state-cta,
.pg-btn--primary,
.es-cta,
.comm-btn-primary,
.sw-btn-primary,
.ip-btn--primary,
.ap-btn-primary,
.spw-btn-primary,
.apf-btn-primary,
.sd-empty-cta,
.id-empty-cta,
.empty-state .btn-primary,
.adm-empty-state .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-decoration: none !important;
}

.cta-solid:hover,
.btn-action:hover,
.profile-action-primary:hover,
.empty-state-cta:hover,
.pg-btn--primary:hover,
.es-cta:hover,
.comm-btn-primary:hover,
.sw-btn-primary:hover,
.ip-btn--primary:hover,
.ap-btn-primary:hover,
.spw-btn-primary:hover,
.apf-btn-primary:hover,
.sd-empty-cta:hover,
.id-empty-cta:hover,
.empty-state .btn-primary:hover,
.adm-empty-state .btn-primary:hover,
.cta-solid:focus,
.btn-action:focus,
.profile-action-primary:focus,
.empty-state-cta:focus,
.pg-btn--primary:focus,
.es-cta:focus,
.comm-btn-primary:focus,
.sw-btn-primary:focus,
.ip-btn--primary:focus,
.ap-btn-primary:focus,
.spw-btn-primary:focus,
.apf-btn-primary:focus,
.sd-empty-cta:focus,
.id-empty-cta:focus,
.empty-state .btn-primary:focus,
.adm-empty-state .btn-primary:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}

.cta-solid :is(i, span, svg),
.btn-action :is(i, span, svg),
.profile-action-primary :is(i, span, svg),
.empty-state-cta :is(i, span, svg),
.pg-btn--primary :is(i, span, svg),
.es-cta :is(i, span, svg),
.comm-btn-primary :is(i, span, svg),
.sw-btn-primary :is(i, span, svg),
.ip-btn--primary :is(i, span, svg),
.ap-btn-primary :is(i, span, svg),
.spw-btn-primary :is(i, span, svg),
.apf-btn-primary :is(i, span, svg),
.sd-empty-cta :is(i, span, svg),
.id-empty-cta :is(i, span, svg),
.empty-state .btn-primary :is(i, span, svg),
.adm-empty-state .btn-primary :is(i, span, svg) {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ── 29.8  Dark mode eye-strain reduction ────────────────── */
/*
 * Slightly reduce purple saturation on large dark surfaces
 * to avoid eye strain without losing brand feel.
 */
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, .05), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(6, 182, 212, .03), transparent);
}

/* ── 29.9  Notification dropdown text — dark mode fix ────── */
[data-theme="dark"] .nd-item-title { color: #E2E8F0; }
[data-theme="dark"] .nd-item-ago { color: #8494A7; }
[data-theme="dark"] .nd-empty-msg { color: #8494A7; }

/* ── 29.10  Sidebar icon opacity — ensure visibility ─────── */
.sidebar .nav-link i {
  opacity: .7;
}
.sidebar .nav-link:hover i,
.sidebar .nav-link.active i {
  opacity: 1;
}

/* ── 29.11  Admin welcome banner text on purple ──────────── */
.adm-welcome-text h1 { color: #ffffff; }
.adm-welcome-text p {
  color: rgba(255, 255, 255, .9);
}
.adm-health-badge {
  color: rgba(255, 255, 255, .9);
}

/* ── 29.12  Admin topbar profile dropdown ─────────────────── */
.adm-profile-dropdown {
  min-width: 200px;
  border-radius: var(--radius-lg) !important;
  padding: .3rem !important;
}
.adm-profile-dropdown .dropdown-header {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border-soft);
}
.adm-profile-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  font-size: .84rem;
  border-radius: var(--radius-sm);
}
.adm-profile-dropdown .dropdown-item i {
  width: 16px;
  text-align: center;
  font-size: .9rem;
  color: var(--text-muted);
}
.adm-profile-dropdown .dropdown-item:hover i {
  color: var(--brand-primary);
}
.adm-profile-dropdown .dropdown-divider {
  margin: .25rem .5rem;
  border-color: var(--border-soft);
}

/* ── 29.13  Admin notification badge — conditional ────────── */
.adm-notif-badge {
  display: none;  /* hidden by default — JS shows when count > 0 */
}
.adm-notif-badge.has-unread {
  display: block;
}

/* ── 29.14  Notification bell accessible label ────────────── */
.adm-icon-btn[aria-label] {
  position: relative;
}

/* ═══════════════════════════════════════════
   §29B  ACTION LINK VISIBILITY + DARK MODE
   Fixes faded action links, inherited opacity,
   interactive hierarchy, purple-on-purple washout
   ═══════════════════════════════════════════ */

/* ── 29B.1  Action link base — ensure active appearance ──────
 * All "→" links, "View All" links, card-action links across
 * Admin, Instructor, and Student dashboards.
 */
.adm-link-btn,
.id-card-action,
.id-kpi-link,
.sd-link {
  opacity: 1 !important;
  filter: none !important;
}

/* Dark mode: brighten brand-primary links for perceived contrast.
 * Double attribute selector [data-theme="dark"][data-theme="dark"]
 * boosts specificity to beat inline <style> !important rules
 * that use var(--brand-primary).
 */
[data-theme="dark"][data-theme="dark"] .adm-link-btn,
[data-theme="dark"][data-theme="dark"] .id-card-action,
[data-theme="dark"][data-theme="dark"] .sd-link {
  color: #A78BFA !important;   /* lighter purple — 5.2:1 on dark surface */
}
[data-theme="dark"][data-theme="dark"] .adm-link-btn:hover,
[data-theme="dark"][data-theme="dark"] .id-card-action:hover,
[data-theme="dark"][data-theme="dark"] .sd-link:hover {
  color: #C4B5FD !important;   /* even brighter on hover */
  background: rgba(167, 139, 250, .1);
}

/* ── 29B.2  KPI accent links — fix reverse-hover bug ─────────
 * .id-kpi-link had opacity:.75 on hover making it dimmer.
 * Fix: hover should brighten, not dim.
 */
[data-theme="dark"] .id-kpi-link {
  filter: brightness(1.2);
}
.id-kpi-link:hover {
  opacity: 1 !important;
  filter: brightness(1.15);
}
[data-theme="dark"] .id-kpi-link:hover {
  filter: brightness(1.35);
}

/* ── 29B.3  Table row action buttons — not disabled ──────────
 * .id-row-btn uses --text-muted which looks inactive.
 * Fix: use brand-primary tint, stronger on hover.
 */
.id-row-btn {
  color: var(--brand-primary);
  border-color: rgba(var(--brand-primary-rgb), .15);
}
[data-theme="dark"] .id-row-btn {
  color: #A78BFA;
  border-color: rgba(167, 139, 250, .2);
}
[data-theme="dark"] .id-row-btn:hover {
  color: #C4B5FD;
  background: rgba(167, 139, 250, .12);
  border-color: rgba(196, 181, 253, .35);
}

/* ── 29B.4  Inherited opacity removal on banner subtexts ─────
 * Banner sub-texts use `opacity: .65–.85` creating faded look.
 * Replace with explicit rgba color — no child inheritance issue.
 */
.id-greeting-sub {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .85);
}
.id-greeting-hint {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .78);
}
.sd-hero-greeting {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .88);
}
.sd-ring-sub {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .78);
}

/* ── 29B.5  Quick action buttons — dark mode brightness ──────
 * .id-quick-btn uses color-mix with accent colors that
 * can appear dim on dark surfaces. Boost text brightness.
 */
[data-theme="dark"] .id-quick-btn {
  filter: brightness(1.1);
}
[data-theme="dark"] .id-quick-btn:hover {
  filter: brightness(1.25);
}

/* ── 29B.6  Dark mode text hierarchy — tuned luminance ───────
 * --text-muted (#8494A7) is acceptable but stat labels,
 * sub-descriptions, and secondary text benefit from a
 * slightly cooler, brighter muted tone.
 */
[data-theme="dark"] .id-kpi-lbl,
[data-theme="dark"] .id-card-sub,
[data-theme="dark"] .id-feed-course,
[data-theme="dark"] .id-prog-pct,
[data-theme="dark"] .id-rating-na,
[data-theme="dark"] .sd-stat-label,
[data-theme="dark"] .sd-course-instructor,
[data-theme="dark"] .sd-prog-text,
[data-theme="dark"] .sd-empty-state p {
  color: #94A3B8;   /* +1 step brighter than #8494A7 */
}

/* ── 29B.7  Interactive hierarchy enforcement ────────────────
 * PRIMARY   = solid gradient/filled buttons — already bright
 * SECONDARY = outline/glass buttons — need clear border+color
 * TERTIARY  = text links with arrows — must look clickable
 * DISABLED  = opacity .5 + grayscale (§29.1)
 *
 * Ensure tertiary never looks disabled:
 */
.id-card-action,
.sd-link,
.adm-link-btn,
.id-kpi-link {
  cursor: pointer;
  text-decoration: none;
}
.id-card-action::after,
.sd-link .bi-arrow-right,
.adm-link-btn .bi-arrow-right {
  transition: transform .18s var(--ease-out);
}
.id-card-action:hover i,
.sd-link:hover .bi-arrow-right,
.adm-link-btn:hover .bi-arrow-right {
  transform: translateX(3px);
}

/* Outline/glass secondary buttons — clearer in dark mode */
[data-theme="dark"] .btn-outline-secondary {
  color: #CBD5E1;
  border-color: rgba(203, 213, 225, .25);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  color: #E2E8F0;
  background: rgba(203, 213, 225, .08);
  border-color: rgba(203, 213, 225, .4);
}

/* ── 29B.8  Hover & focus visibility for action links ────────*/
.id-card-action:focus-visible,
.sd-link:focus-visible,
.adm-link-btn:focus-visible,
.id-kpi-link:focus-visible,
.id-row-btn:focus-visible,
.id-quick-btn:focus-visible {
  outline: 2px solid rgba(var(--brand-primary-rgb), .5);
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .2);
}
[data-theme="dark"] .id-card-action:focus-visible,
[data-theme="dark"] .sd-link:focus-visible,
[data-theme="dark"] .adm-link-btn:focus-visible,
[data-theme="dark"] .id-kpi-link:focus-visible,
[data-theme="dark"] .id-row-btn:focus-visible,
[data-theme="dark"] .id-quick-btn:focus-visible {
  outline-color: rgba(167, 139, 250, .5);
  box-shadow: 0 0 0 .2rem rgba(167, 139, 250, .2);
}

/* ── 29B.9  Admin stat label — dark mode bump ────────────────*/
[data-theme="dark"] .adm-stat-label {
  color: #9CA3AF;   /* slightly brighter than token #94a3b8 */
}

/* ── 29B.10  Empty state secondary text — ensure readable ────*/
[data-theme="dark"] .id-empty-title {
  color: #94A3B8;
}
[data-theme="dark"] .adm-empty-state p,
[data-theme="dark"] .adm-empty-state .text-muted {
  color: #94A3B8;
}

/* ── 29B.11  btn-link.text-muted — dark mode readability ─────
 * "Back" links on admin detail pages use btn-link + text-muted,
 * which is nearly invisible in dark mode.
 */
[data-theme="dark"] .btn-link.text-muted {
  color: #94A3B8 !important;
}
[data-theme="dark"] .btn-link.text-muted:hover {
  color: #C4B5FD !important;
}

/* ── 29B.12  Profile / hardcoded indigo links — dark fix ─────
 * sp-link-btn uses hardcoded #6366f1 which is dim on dark bg.
 */
[data-theme="dark"] .sp-link-btn {
  color: #A5B4FC;
  border-color: rgba(165, 180, 252, .3);
}
[data-theme="dark"] .sp-link-btn:hover {
  color: #C7D2FE;
  background: rgba(165, 180, 252, .1);
  border-color: rgba(165, 180, 252, .45);
}

/* ── 29B.13  Notification dropdown action links — dark mode ──*/
[data-theme="dark"] .dropdown-menu a[href="/Notifications"] {
  color: #E2E8F0;
}

/* ── 29B.14  Admin topbar icon buttons — active state ────────
 * Ensure admin topbar icons never look disabled.
 */
.adm-icon-btn {
  opacity: 1;
  filter: none;
}

/* ── 29B.15  Generic a.text-muted — dark mode back-links ─────
 * Chat back-links, breadcrumb-style nav links use a.text-muted.
 * Ensure they're visible as interactive in dark mode.
 */
[data-theme="dark"] a.text-muted,
[data-theme="dark"] a.text-decoration-none.text-muted {
  color: #94A3B8 !important;
}
[data-theme="dark"] a.text-muted:hover,
[data-theme="dark"] a.text-decoration-none.text-muted:hover {
  color: #C4B5FD !important;
}

/* ── 29B.16  Sidebar nav links — no inherited opacity/filter ──*/
.sidebar .nav-link {
  opacity: 1;
  filter: none;
}

/* ── 29B.17  Accordion module headers — dark mode ────────────
 * Instructor course details uses Bootstrap .accordion-button
 * with .badge.bg-light.text-dark for lesson count.
 * In dark mode the accordion header needs a surface-appropriate bg
 * and the badge needs to remain readable.
 */
[data-theme="dark"] .accordion-item {
  background: var(--surface-card);
  border-color: var(--border-soft) !important;
}
[data-theme="dark"] .accordion-button {
  background: var(--surface-card);
  color: var(--text-main);
  box-shadow: none;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: rgba(var(--brand-primary-rgb), .08);
  color: var(--text-main);
  box-shadow: none;
}
[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(1.5);
}
[data-theme="dark"] .accordion-button .badge.bg-light {
  background: rgba(var(--brand-primary-rgb), .12) !important;
  color: #C4B5FD !important;
}
[data-theme="dark"] .accordion-body {
  background: var(--surface-card);
  color: var(--text-main);
}
[data-theme="dark"] .accordion-body .list-group-item {
  background: rgba(255, 255, 255, .03);
  border-color: var(--border-soft) !important;
  color: var(--text-main);
}
[data-theme="dark"] .accordion-body .text-primary {
  color: #A78BFA !important;
}

/* General bg-light.text-dark badges in dark mode */
[data-theme="dark"] .badge.bg-light.text-dark {
  background: rgba(255, 255, 255, .1) !important;
  color: #CBD5E1 !important;
}

/* ═══════════════════════════════════════════════════════
   §29B.18 – Quiz Details dark-mode contrast
   ═══════════════════════════════════════════════════════ */
[data-theme="dark"] .qd-add-answer-btn {
  color: #818CF8;
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.3);
}
[data-theme="dark"] .qd-add-answer-btn:hover {
  background: rgba(99,102,241,.22);
}
[data-theme="dark"] .qd-chip--active {
  color: #818CF8;
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.3);
}
[data-theme="dark"] .qd-correct-label {
  color: #4ade80;
  background: rgba(34,197,94,.16);
}
[data-theme="dark"] .qd-action--settings {
  color: #fbbf24;
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.3);
}
[data-theme="dark"] .qd-action--settings:hover {
  background: rgba(245,158,11,.22);
  color: #fbbf24;
}
[data-theme="dark"] .qd-action--analytics {
  color: #4ade80;
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.3);
}
[data-theme="dark"] .qd-action--analytics:hover {
  background: rgba(34,197,94,.22);
  color: #4ade80;
}
[data-theme="dark"] .qd-empty-icon {
  color: #818CF8;
  background: rgba(99,102,241,.16);
}
[data-theme="dark"] .qd-timer-toggle-btn {
  color: #60a5fa;
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.3);
}
[data-theme="dark"] .qd-timer-toggle-btn:hover {
  background: rgba(59,130,246,.22);
}
[data-theme="dark"] .qd-timer-remove-btn {
  color: #f87171;
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
}
[data-theme="dark"] .qd-timer-remove-btn:hover {
  background: rgba(239,68,68,.2);
}
[data-theme="dark"] .qd-edit-q-btn:hover {
  color: #818CF8;
  background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.35);
}

/* ═══════════════════════════════════════════
   §30  FINAL VISUAL QA SPRINT
   Dark theme consistency, opacity, passwords,
   Grade Book, accessibility, Bootstrap overrides
   ═══════════════════════════════════════════ */

/* ── 30.1  Global dark mode overrides for Bootstrap bg-* utilities ── */
[data-theme="dark"] .bg-white {
  background-color: var(--surface-card-solid) !important;
}
[data-theme="dark"] .bg-light {
  background-color: rgba(255,255,255,.04) !important;
}
[data-theme="dark"] .table-light {
  --bs-table-bg: rgba(255,255,255,.03);
  --bs-table-border-color: rgba(255,255,255,.06);
  --bs-table-color: var(--text-main);
}
[data-theme="dark"] .table-light th {
  color: var(--text-secondary) !important;
  border-color: rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .text-dark {
  color: var(--text-main) !important;
}
[data-theme="dark"] .card-header.bg-white {
  background-color: var(--surface-card-solid) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}

/* ── 30.2  Grade Book dark mode ──────────────────────────────── */
[data-theme="dark"] .card {
  background: var(--surface-card-solid);
  border-color: var(--border-soft);
}
[data-theme="dark"] .card .card-header {
  background: var(--surface-card-solid) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .card .card-title.text-primary {
  color: #A78BFA !important;
}
[data-theme="dark"] .card .text-muted {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .table-hover > tbody > tr:hover {
  --bs-table-hover-bg: rgba(139,92,246,.06);
  --bs-table-hover-color: var(--text-main);
}
[data-theme="dark"] .badge.bg-success {
  background-color: #15803d !important;
  color: #bbf7d0 !important;
}
[data-theme="dark"] .badge.bg-primary {
  background: linear-gradient(135deg,#7C3AED,#8B5CF6) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .badge.bg-warning {
  background-color: #92400e !important;
  color: #fef3c7 !important;
}
[data-theme="dark"] .badge.bg-danger {
  background-color: #991b1b !important;
  color: #fecaca !important;
}
[data-theme="dark"] .badge.bg-secondary {
  background-color: rgba(148,163,184,.15) !important;
  color: #94A3B8 !important;
}

/* ── 30.3  Form label icon opacity fix ───────────────────────── */
/*
 * Form label icons (<i> inside <label>) used inline opacity:.6
 * which made them look disabled. Use color instead.
 */
.form-label i.bi {
  opacity: .85 !important;
  color: var(--text-muted);
}
[data-theme="dark"] .form-label i.bi {
  color: var(--text-secondary);
}

/* ── 30.4  Password input polish ─────────────────────────────── */
/*
 * Password dots should be clearly visible with solid background.
 * Focus glow uses premium purple.
 */
input[type="password"].form-control {
  letter-spacing: .15em;
  font-size: .95rem;
}
[data-theme="dark"] input[type="password"].form-control {
  background-color: rgba(255,255,255,.06);
  color: #F8FAFC;
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] input[type="password"].form-control:focus {
  background-color: rgba(255,255,255,.08);
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 0 0 3px rgba(139,92,246,.15), 0 0 16px rgba(139,92,246,.08);
}
/* Input group with password toggle — ensure consistent height & border */
.input-group .form-control[type="password"] {
  border-right: 0;
}
.input-group .pwd-toggle-btn {
  border-left: 0;
  min-height: 2.7rem;
}
[data-theme="dark"] .input-group .pwd-toggle-btn {
  background: rgba(255,255,255,.04);
}

/* ── 30.5  Quiz Result score text readability ────────────────── */
.rs-score-sep { opacity: .7; }
.rs-score-total { opacity: .85; }
.rs-pct { opacity: .9; }
.rs-meta { opacity: .75; }
.rs-attempt-info { opacity: .9; }
.rs-remaining { opacity: .85; }

/* ── 30.6  Quiz Result Details opacity fix ───────────────────── */
.qr-ring-sub { opacity: .85; }
.qr-pill-lbl { opacity: .85; }
.qr-pill-div { opacity: .55; }
.qr-hero-meta { opacity: .8; }

/* ── 30.7  Course Preview readability ────────────────────────── */
.cp-desc { opacity: .88; }
.cp-back { opacity: .85; }
.cp-back:hover { opacity: 1; }
/* Enroll button on hero — never look disabled */
.cp-enroll-btn:hover { opacity: 1; transform: translateY(-1px); }
.cp-enroll-btn-card:hover { opacity: 1; transform: translateY(-1px); }
/* Dark mode: price tag readable */
[data-theme="dark"] .cp-price-tag {
  color: #A5B4FC;
}

/* ── 30.8  Home page CTA ghost button readability ────────────── */
/* Overridden by §31 — kept for reference */

/* ── 30.9  Student Profile opacity fix ───────────────────────── */
.sp-hero-bio--empty { opacity: .65; }
.sp-see-all:hover { opacity: .85; }
.sp-cert-view:hover { opacity: .85; }

/* ── 30.10  Instructor Dashboard opacity fix ─────────────────── */
.id-greeting-hint { opacity: 1 !important; color: rgba(255,255,255,.78); }
.id-kpi-link:hover { opacity: 1 !important; }

/* ── 30.11  Review create dark mode ──────────────────────────── */
[data-theme="dark"] .card-header.bg-white.border-bottom-0 {
  background: var(--surface-card-solid) !important;
}

/* ── 30.12  Alert dark mode improvements ─────────────────────── */
[data-theme="dark"] .alert-info {
  background-color: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.2);
  color: #93C5FD;
}

/* ── 30.13  Chat bg-light dark mode ──────────────────────────── */
[data-theme="dark"] .card-footer.bg-light {
  background-color: rgba(255,255,255,.03) !important;
}

/* ── 30.14  QuizResults Index attempt badge ──────────────────── */
[data-theme="dark"] .badge.bg-light.text-dark {
  background-color: rgba(255,255,255,.08) !important;
  color: var(--text-main) !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* ── 30.15  Instructor Course Details badge ──────────────────── */
[data-theme="dark"] .badge.bg-light.text-dark.small {
  background-color: rgba(255,255,255,.08) !important;
  color: var(--text-secondary) !important;
}

/* ── 30.16  Enrollment Request bg-light panels ───────────────── */
[data-theme="dark"] .p-2.bg-light.rounded {
  background-color: rgba(255,255,255,.04) !important;
  color: var(--text-main);
}

/* ── 30.17  Question Create loading state — use disabled pattern ── */
.qb-submit-btn.loading {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── 30.18  Session dots separator ───────────────────────────── */
[data-theme="dark"] .sec-dot-sep,
[data-theme="dark"] [style*="background: var(--text-muted)"] {
  opacity: .5;
}

/* ── 30.19  Accessibility — focus-visible rings ──────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(var(--brand-primary-rgb), .5);
  outline-offset: 2px;
}
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible {
  outline-color: rgba(167, 139, 250, .5);
}

/* ── 30.20  Disabled states — enforce correct pattern ────────── */
button:disabled,
a.disabled,
.btn:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ── 30.21  Progress bar dark mode — visible track ───────────── */
[data-theme="dark"] .progress {
  background-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .progress-bar.bg-success {
  background: linear-gradient(90deg, #15803d, #22c55e) !important;
}

/* ═══════════════════════════════════════════
   §31  OPACITY + HERO CONTRAST FIX SPRINT
   Solid dark surfaces, interactive buttons,
   reduced decorative noise, explicit colors
   ═══════════════════════════════════════════ */

/* ── 31.1  Hero text — explicit color, no opacity ────────────── */
/*
 * Root cause: .lp-hero-sub used opacity:.8 which fades ALL content
 * including text. Use explicit color instead so decorative layers
 * don't compound the fade effect.
 */
.lp-hero-sub {
  opacity: 1 !important;
  color: #CBD5E1;
}
.lp-cta p {
  opacity: 1 !important;
  color: #CBD5E1;
}
/* Hero badge — slightly brighter for readability */
.lp-badge {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
  color: #F1F5F9;
}

/* ── 31.2  Ghost button — match sd-hero-btn--ghost style ──────── */
/*
 * Matches the Student Dashboard ghost button: rgba(.2) bg, blur(8px),
 * hover to rgba(.32) — looks clearly interactive, never disabled.
 */
/* ═══ DEBUG / CONTRAST-SPRINT FIX (real root cause) ═══════════════════
 * This §31.2 block — NOT the inline <style> in Home/Index.cshtml — is the
 * rule that actually wins the cascade (external sheet + !important). The old
 * values (.2 fill / .35 border) made the secondary CTA "Kursları kəşf et"
 * read as DISABLED over the bright purple hero gradient. The inline edits had
 * no effect because they carry no !important and lose to these declarations.
 *
 * Fix: bright, near-solid border (.85) so it reads as a clickable outline
 * button, a stronger fill (.24), and a text-shadow for crisp white text.
 * Element opacity stays a hard 1 — the alpha is on the fill/border only.
 * ════════════════════════════════════════════════════════════════════ */
.lp-btn-ghost {
  /* ROUND-3 FIX: keep a strong dark text-shadow + bright border, and apply the
     requested fill/border/box-shadow. A faint top-edge inset highlight gives a
     premium glass look without lightening the text area. */
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.78) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  box-shadow:
    0 16px 34px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
/* Anchor state colours — INCLUDING :visited, which a bare-text <a> needs or the
   browser's visited colour can tint the label. This was the gap in the prior
   child-lock (it had no :visited). */
.lp-btn-ghost,
.lp-btn-ghost:link,
.lp-btn-ghost:visited,
.lp-btn-ghost:hover,
.lp-btn-ghost:focus,
.lp-btn-ghost:focus-visible,
.lp-btn-ghost:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}
.lp-btn-ghost:hover,
.lp-btn-ghost:focus-visible {
  background: rgba(255,255,255,.30) !important;
  border-color: rgba(255,255,255,.95) !important;
  box-shadow:
    0 16px 34px rgba(15,23,42,.26),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
  transform: translateY(-1px);
}
.lp-btn-ghost:active {
  background: rgba(255,255,255,.40) !important;
  transform: translateY(0);
}
/* Bulletproof child lock: no inherited link/utility colour (e.g. .text-primary,
   global icon colour, anchor :visited) can fade the inner text or icon. Covers
   <i>, <span>, <svg> and bare text spans. */
.lp-btn-ghost *,
.lp-btn-ghost i,
.lp-btn-ghost .bi,
.lp-btn-ghost span,
.lp-btn-ghost svg {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
/* SVG icons (if any future icon swap uses inline SVG) inherit white via fill. */
.lp-btn-ghost svg,
.lp-btn-ghost svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ── 31.3  Primary button — solid, never faded ───────────────── */
.lp-btn-primary {
  opacity: 1 !important;
  cursor: pointer;
}
.lp-btn-primary:hover {
  opacity: 1 !important;
}

/* ── 31.4  Decorative overlays — reduce noise ────────────────── */
/*
 * Root cause: hero particles (circles) had rgba(.06) bg + opacity
 * animation .5→.8 — creates muddy wash over text.
 * Fix: reduce max animation opacity, shrink radii.
 */
.lp-hero-particles span {
  background: rgba(255,255,255,.03) !important;
}
/* Ensure hero content is always above overlay layers */
.lp-hero-content {
  position: relative;
  z-index: 2;
}
.lp-hero-bg {
  z-index: 0;
}
.lp-hero-particles {
  z-index: 1;
}

/* ── 31.5  Testimonial / review cards — solid dark surface ──── */
/*
 * Root cause: var(--surface-card) in dark mode = rgba(255,255,255,.025)
 * which is nearly transparent. Cards look ghostly.
 * Fix: solid dark surface for landing page cards.
 */
[data-theme="dark"] .lp-testimonial-card {
  background: #12182A;
  border-color: rgba(148,163,184,.14);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
[data-theme="dark"] .lp-testimonial-card:hover {
  border-color: rgba(148,163,184,.22);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  transform: translateY(-3px);
}
/* Testimonial author name — brighter in dark mode */
[data-theme="dark"] .lp-test-name {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-test-comment {
  color: #E2E8F0;
}
/* Star icons — ensure visibility */
.lp-star-on {
  color: #FBBF24 !important;
}
[data-theme="dark"] .lp-star-off {
  color: rgba(148,163,184,.25) !important;
}

/* ── 31.6  Feature cards — solid dark surface ────────────────── */
[data-theme="dark"] .lp-feature-card {
  background: #12182A;
  border-color: rgba(148,163,184,.12);
}
[data-theme="dark"] .lp-feature-card:hover {
  border-color: rgba(148,163,184,.2);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
[data-theme="dark"] .lp-feature-card h5 {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-feature-card p {
  color: #94A3B8;
}

/* ── 31.7  Course cards — solid dark surface ──────────────────── */
[data-theme="dark"] .lp-course-card {
  background: #12182A;
  border-color: rgba(148,163,184,.12);
}
[data-theme="dark"] .lp-course-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,.4);
  border-color: rgba(148,163,184,.2);
}
[data-theme="dark"] .lp-course-title {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-course-desc {
  color: #94A3B8;
}
[data-theme="dark"] .lp-course-footer {
  border-top-color: rgba(148,163,184,.1);
}

/* ── 31.8  Stats bar — solid dark surface ─────────────────────── */
[data-theme="dark"] .lp-stats {
  background: #12182A;
  border-color: rgba(148,163,184,.12);
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
[data-theme="dark"] .lp-stat-num {
  color: #A78BFA;
}
[data-theme="dark"] .lp-stat-label {
  color: #94A3B8;
}
[data-theme="dark"] .lp-stat-divider {
  background: rgba(148,163,184,.15);
}

/* ── 31.9  Section headings — brighter in dark ────────────────── */
[data-theme="dark"] .lp-section-title {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-section-sub {
  color: #94A3B8;
}

/* ── 31.10  Steps — solid dark ────────────────────────────────── */
[data-theme="dark"] .lp-step h6 {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-step p {
  color: #94A3B8;
}
[data-theme="dark"] .lp-step-connector {
  background: rgba(148,163,184,.15);
}

/* ── 31.11  Global active button defense ──────────────────────── */
/*
 * Active interactive buttons must NEVER inherit faded opacity.
 * Only :disabled, .disabled, and [aria-disabled] get reduced opacity.
 */
.btn:not(:disabled):not(.disabled):not([aria-disabled="true"]),
a.btn:not(.disabled):not([aria-disabled="true"]),
.lp-btn-primary,
.lp-btn-ghost,
.cp-enroll-btn,
.cp-enroll-btn-card {
  opacity: 1;
  filter: none;
}
/* Ensure hover never reduces opacity */
.btn:not(:disabled):hover,
.btn:not(:disabled):focus-visible,
a.btn:not(.disabled):hover,
a.btn:not(.disabled):focus-visible {
  opacity: 1 !important;
}
/* Outline buttons — stronger in dark mode */
[data-theme="dark"] .btn-outline-primary {
  color: #A78BFA;
  border-color: rgba(139,92,246,.5);
}
[data-theme="dark"] .btn-outline-primary:hover {
  background: rgba(139,92,246,.15);
  color: #C4B5FD;
  border-color: rgba(139,92,246,.7);
}
[data-theme="dark"] .btn-outline-secondary {
  color: #94A3B8;
  border-color: rgba(148,163,184,.35);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(148,163,184,.1);
  color: #CBD5E1;
  border-color: rgba(148,163,184,.5);
}

/* ── 31.12  CTA section — richer depth ────────────────────────── */
/*
 * The CTA inner text area needs explicit z-index above the bg layer.
 */
.lp-cta-inner {
  position: relative;
  z-index: 2;
}
.lp-cta-bg {
  z-index: 0;
}
.lp-cta h2 {
  color: #FFFFFF;
}

/* ── 31.13  Hero gradient — deeper for dark mode readability ─── */
[data-theme="dark"] .lp-hero {
  background: linear-gradient(135deg, #080816 0%, #0f0a2e 25%, #1e1b4b 55%, #4f46e5 85%, #7c3aed 100%);
}
[data-theme="dark"] .lp-cta {
  background: linear-gradient(135deg, #0f0a2e 0%, #1e1b4b 40%, #4f46e5 75%, #7c3aed 100%);
}

/* ── 31.14  Course preview hero — enroll button never faded ──── */
.cp-enroll-btn {
  opacity: 1 !important;
}
.cp-enroll-btn-card {
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §32  GLOBAL ACTIVE-BUTTON SAFETY NET
   ─────────────────────────────────────────────────────────────────
   Defensive last-line rule. Every active button or button-like link
   must look clickable: opacity 1, no greyscale, no `pointer-events:
   none`, and cursor:pointer.

   The selector chain explicitly EXCLUDES every legitimate disabled
   marker so true disabled states keep their reduced look. Order:

     1. Component-level rules win at lower specificity but provide
        the design.
     2. This safety net ONLY enforces "not visually disabled" — it
        does not override colors, backgrounds, or borders.

   Touched markers (kept as-is):
     :disabled            (form buttons)
     [aria-disabled=true] (links acting as disabled buttons)
     .disabled            (Bootstrap-style)
     .btn-disabled        (defensive — for any future variant)
   ═══════════════════════════════════════════════════════════════ */

button:not(:disabled):not([aria-disabled="true"]):not(.disabled),
.btn:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.btn-disabled),
a.btn:not([aria-disabled="true"]):not(.disabled),
[class*="btn-"]:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.btn-disabled),
.lp-btn-primary, .lp-btn-ghost,
.lp-final-btn, .lp-final-btn--primary, .lp-final-btn--ghost,
.lp-cert-cta,
.rs-btn, .rs-btn--retry, .rs-btn--ghost,
.qr-act-btn, .qr-act-ghost, .qr-act-primary,
.sd-hero-btn, .sd-hero-btn--primary, .sd-hero-btn--ghost {
  opacity: 1;
  filter: none;
  cursor: pointer;
}

/* Icons inside any active button must inherit the button's text colour
   and stay fully opaque — fixes the "faded icon on white button" bug. */
button:not(:disabled):not([aria-disabled="true"]):not(.disabled) > i,
.btn:not(:disabled):not([aria-disabled="true"]):not(.disabled) > i,
.btn:not(:disabled):not([aria-disabled="true"]):not(.disabled) > .bi,
a.btn:not([aria-disabled="true"]):not(.disabled) > i,
a.btn:not([aria-disabled="true"]):not(.disabled) > .bi,
[class*="btn-"]:not(:disabled):not([aria-disabled="true"]):not(.disabled) > i,
[class*="btn-"]:not(:disabled):not([aria-disabled="true"]):not(.disabled) > .bi,
.lp-btn-primary > i, .lp-btn-ghost > i,
.lp-final-btn > i, .lp-cert-cta > i,
.rs-btn > i, .qr-act-btn > i, .sd-hero-btn > i {
  color: currentColor;
  opacity: 1;
}

/* Minimum accessible tap target — only applied where a component
   hasn't already specified its own height. */
.lp-btn-primary,
.lp-btn-ghost,
.lp-final-btn,
.lp-cert-cta {
  min-height: 44px;
}

/* Re-assert disabled visuals so the safety net above can never override
   a true disabled state. This block intentionally repeats the §29.1
   intent at higher specificity. */
button:disabled,
button[aria-disabled="true"],
.btn:disabled,
.btn[aria-disabled="true"],
.btn.disabled,
a.btn[aria-disabled="true"],
a.btn.disabled,
[class*="btn-"]:disabled,
[class*="btn-"][aria-disabled="true"],
[class*="btn-"].disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(.2) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── 32.1  Buttons on brand-gradient backgrounds ─────────────────
   Any button placed inside .lp-cta, .lp-final, or any element
   styled as the purple/indigo/pink brand gradient must use
   high-contrast text. Prevents the "purple text on purple" trap. */
.lp-cta .lp-btn-primary,
.lp-final .lp-final-btn--primary {
  color: #6D28D9 !important;
  background: #ffffff !important;
}
.lp-cta .lp-btn-primary:hover,
.lp-final .lp-final-btn--primary:hover {
  color: #6D28D9 !important;
}
/* DEBUG / CONTRAST-SPRINT FIX: these parent-scoped rules (.lp-final ...) beat
 * the inline <style> on SPECIFICITY (0,2,0 vs 0,1,0), so the inline border bump
 * never showed. Brighten border to .85 + add text-shadow so the ghost CTA on
 * the gradient final-CTA band is clearly clickable, not disabled. */
.lp-cta .lp-btn-ghost,
.lp-final .lp-final-btn--ghost {
  color: #ffffff !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.85) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  opacity: 1 !important;
}
.lp-cta .lp-btn-ghost *,
.lp-final .lp-final-btn--ghost * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
.lp-cta .lp-btn-ghost:hover,
.lp-final .lp-final-btn--ghost:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.30) !important;
  border-color: #ffffff !important;
}

/* ── 32.1b  Certificate CTA — fix sub-AA white-on-light-purple ────────
 * DEBUG / CONTRAST-SPRINT FIX (real root cause for "Sertifikatlı kursları
 * gör" looking faded):
 *   The inline gradient ended in #A855F7 / #EC4899 (light purple + pink).
 *   White text on those stops measures only ~2.6:1 — BELOW WCAG AA (4.5:1) —
 *   so the label genuinely renders low-contrast / "disabled-looking". This
 *   was NOT a parent opacity/filter issue; the button is fully active.
 *
 * Fix: shift the gradient to darker BRAND purples (#5B21B6 → #6D28D9 →
 *   #7C3AED). White now clears ~4.6–6.5:1 across the whole button. Pink was
 *   the worst offender and is dropped from the fill; brand purple identity is
 *   preserved. Solid #FFFFFF text + text-shadow guarantees crisp contrast.
 *   Declared here (external sheet + !important) so it wins over the inline
 *   <style> in Home/Index.cshtml regardless of specificity. */
.lp-cert-cta {
  background: linear-gradient(135deg, #5B21B6 0%, #6D28D9 50%, #7C3AED 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  border-color: rgba(255,255,255,.55) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}
.lp-cert-cta:hover {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #8B47F0 100%) !important;
  color: #ffffff !important;
  filter: brightness(1.06) !important;
}
.lp-cert-cta > i {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ── 32.2  Focus-visible default for every button-like control ──
   Components may override; this guarantees there is ALWAYS a ring. */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
[class*="btn-"]:focus-visible {
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════
   §33  PREMIUM ACTION-BUTTON SYSTEM  (.btn-action)
   One consistent, confident action button for Grade / Review / Approve /
   Manage / Open / Continue etc. Lives in site.css (static, cache-busted) so it
   applies on a browser refresh with no rebuild. Dark + light parity by design
   (solid gradient + white text reads on any background).
   ════════════════════════════════════════════════════════════════ */
.btn-action {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: linear-gradient(135deg, #8B5CF6, #A855F7);
  color: #ffffff !important; -webkit-text-fill-color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  padding: .55rem 1.15rem; min-height: 42px;
  font-weight: 700; font-size: .85rem; line-height: 1; text-decoration: none;
  box-shadow: 0 12px 32px rgba(168,85,247,.30), inset 0 1px 0 rgba(255,255,255,.22);
  cursor: pointer; opacity: 1; filter: none;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), filter .15s;
}
.btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(168,85,247,.40), inset 0 1px 0 rgba(255,255,255,.28);
  filter: brightness(1.06);
  color: #ffffff !important;
}
.btn-action:active { transform: translateY(0); filter: brightness(1); }
.btn-action:focus-visible { outline: 3px solid rgba(168,85,247,.6); outline-offset: 2px; }
/* Icons always match the text and are never faded (Phase 6) */
.btn-action > i, .btn-action > .bi, .btn-action i, .btn-action .bi {
  color: currentColor !important; opacity: 1 !important;
}
.btn-action svg, .btn-action svg * { fill: currentColor; stroke: currentColor; }
/* Smaller variant for dense rows */
.btn-action--sm { padding: .4rem .9rem; min-height: 36px; font-size: .8rem; border-radius: 11px; box-shadow: 0 8px 22px rgba(168,85,247,.28), inset 0 1px 0 rgba(255,255,255,.2); }
/* TRUE disabled — ONLY genuinely disabled buttons may look faded (Phase 4) */
.btn-action:disabled, .btn-action.disabled, .btn-action[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; pointer-events: none;
  box-shadow: none; filter: grayscale(.2); transform: none;
}

/* ── 33.1  Grade button (Phase 7) — adopt the premium action look ──
   !important beats any stale inline .ug-grade-btn from a not-yet-rebuilt view,
   so the Grade button becomes confident on a plain refresh. */
.ug-grade-btn {
  background: linear-gradient(135deg, #8B5CF6, #A855F7) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 13px !important; min-height: 42px;
  font-weight: 700 !important;
  box-shadow: 0 12px 32px rgba(168,85,247,.30), inset 0 1px 0 rgba(255,255,255,.22) !important;
  opacity: 1 !important; filter: none;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), filter .15s !important;
}
.ug-grade-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(168,85,247,.40), inset 0 1px 0 rgba(255,255,255,.28) !important;
  filter: brightness(1.06);
  color: #ffffff !important;
}
.ug-grade-btn:active { transform: translateY(0); filter: brightness(1); }
.ug-grade-btn:focus-visible { outline: 3px solid rgba(168,85,247,.6); outline-offset: 2px; }
.ug-grade-btn i, .ug-grade-btn .bi { color: currentColor !important; opacity: 1 !important; }

/* ── 33.2  Enroll-card button — purple primary on a NEUTRAL card → align to
   the system. It was the old #6366f1→#7c3aed gradient with a faded-on-hover
   (opacity:.9). Now: system gradient + lift-on-hover. (The other enroll button,
   .cp-enroll-btn, is white-on-hero and is deliberately left alone.) */
.cp-enroll-btn-card {
  background: linear-gradient(135deg, #8B5CF6, #A855F7) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 32px rgba(168,85,247,.30), inset 0 1px 0 rgba(255,255,255,.22) !important;
  opacity: 1 !important;
}
.cp-enroll-btn-card:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(168,85,247,.40), inset 0 1px 0 rgba(255,255,255,.28) !important;
  filter: brightness(1.06);
}
.cp-enroll-btn-card:focus-visible { outline: 3px solid rgba(168,85,247,.6); outline-offset: 2px; }
.cp-enroll-btn-card i, .cp-enroll-btn-card .bi { color: currentColor !important; opacity: 1 !important; }

/* ==========================================================================
   34  GLOBAL PREMIUM CONSISTENCY LAYER
   Shared polish for legacy Bootstrap surfaces without changing page markup.
   ========================================================================== */

.card.border-0.shadow-sm,
.card.shadow-sm:not(.auth-card),
.surface-card,
.adm-card {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), var(--surface-card));
  box-shadow: 0 14px 42px rgba(var(--brand-primary-rgb), .075), 0 2px 8px rgba(15, 23, 42, .04) !important;
}

[data-theme="dark"] .card.border-0.shadow-sm,
[data-theme="dark"] .card.shadow-sm:not(.auth-card),
[data-theme="dark"] .surface-card,
[data-theme="dark"] .adm-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), var(--surface-card));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35), 0 0 18px rgba(var(--brand-primary-rgb), .05) !important;
}

.card.border-0.shadow-sm,
.card.shadow-sm:not(.auth-card) {
  overflow: hidden;
}

.card.border-0.shadow-sm .card-header,
.card.shadow-sm:not(.auth-card) .card-header {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, .45);
}

.card.border-0.shadow-sm .card-footer,
.card.shadow-sm:not(.auth-card) .card-footer {
  border-color: var(--border-soft);
}

.course-card {
  border-color: rgba(var(--brand-primary-rgb), .10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), var(--surface-card));
  box-shadow: 0 14px 42px rgba(var(--brand-primary-rgb), .08), 0 2px 8px rgba(15, 23, 42, .04);
}

[data-theme="dark"] .course-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), var(--surface-card));
  border-color: rgba(255, 255, 255, .075);
}

.course-card:hover {
  transform: translateY(-3px);
}

.course-card-img,
.course-card-img-placeholder {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 176px;
}

.course-card-img-placeholder {
  opacity: 1;
  color: var(--brand-primary);
  background:
    radial-gradient(circle at 24% 18%, rgba(var(--brand-secondary-rgb), .14), transparent 34%),
    linear-gradient(135deg, rgba(var(--brand-primary-rgb), .08), rgba(var(--brand-primary-rgb), .16));
}

.course-card-img-placeholder i,
.course-card-img-placeholder .bi {
  color: currentColor;
  opacity: .88;
}

.course-card-body .btn {
  margin-top: auto;
}

.table-responsive {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card-solid);
  box-shadow: var(--shadow-soft);
  overflow: auto;
}

.adm-card .table-responsive,
.comm-panel .table-responsive,
.card .table-responsive,
.surface-card .table-responsive {
  box-shadow: none;
}

[data-theme="dark"] .table-responsive {
  background: rgba(255, 255, 255, .025);
}

.table-responsive > .table {
  margin-bottom: 0;
}

.table:not(.adm-table) {
  color: var(--text-main);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-soft);
}

.table:not(.adm-table) thead th {
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom-color: var(--border-soft);
  background: rgba(var(--brand-primary-rgb), .025);
  white-space: nowrap;
}

.table:not(.adm-table) tbody td,
.table:not(.adm-table) tbody th {
  color: var(--text-main);
  border-color: var(--border-soft);
  vertical-align: middle;
}

.table:not(.adm-table) tbody tr {
  transition: background .15s var(--ease-out);
}

.table:not(.adm-table) tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .045);
}

.list-group-item {
  border-radius: var(--radius-md);
}

.accordion-item.shadow-sm,
.list-group-item.border {
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

.alert.alert-light.border {
  color: var(--text-main);
  border-color: var(--border-soft) !important;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .58);
}

[data-theme="dark"] .alert.alert-light.border {
  background: rgba(255, 255, 255, .04);
}

.empty-state-icon,
.adm-empty-state .adm-empty-icon {
  border: 1px solid rgba(var(--brand-primary-rgb), .12);
}

.adm-empty-state,
.comm-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
}

.adm-empty-state > *,
.comm-empty > * {
  max-width: 540px;
}

.btn-primary > i,
.btn-primary > .bi,
.btn-success > i,
.btn-success > .bi,
.btn-outline-primary > i,
.btn-outline-primary > .bi,
.btn-outline-secondary > i,
.btn-outline-secondary > .bi {
  color: currentColor;
  opacity: 1;
}

.btn-primary,
.btn-success {
  box-shadow: 0 10px 26px rgba(var(--brand-primary-rgb), .20);
}

.btn-primary:hover,
.btn-success:hover {
  box-shadow: 0 14px 34px rgba(var(--brand-primary-rgb), .28);
}

@media (max-width: 767.98px) {
  .container > .d-flex.justify-content-between.align-items-center.mb-4,
  .container > .d-flex.align-items-start.justify-content-between.mb-4 {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 1rem;
  }

  .container > .d-flex.justify-content-between.align-items-center.mb-4 > .btn,
  .container > .d-flex.align-items-start.justify-content-between.mb-4 > .btn,
  .container > .d-flex.align-items-start.justify-content-between.mb-4 > .d-flex {
    width: 100%;
  }

  .container > .d-flex.align-items-start.justify-content-between.mb-4 > .d-flex .btn {
    flex: 1 1 160px;
  }

  .course-card-img,
  .course-card-img-placeholder {
    min-height: 148px;
  }

  .table-responsive {
    border-radius: var(--radius-md);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §  Soft status pills  (opt-in — does NOT override Bootstrap .badge)
   Reusable, theme-aware status chips for tables/cards. Use:
     <span class="badge-soft badge-soft--success"><i class="bi bi-check"></i>Passed</span>
   ═══════════════════════════════════════════════════════════════════════ */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3rem .62rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-soft i { font-size: .92em; }

.badge-soft--success { background: rgba(34, 197, 94, .12);  color: #15803d; border-color: rgba(34, 197, 94, .22); }
.badge-soft--danger  { background: rgba(239, 68, 68, .12);  color: #b91c1c; border-color: rgba(239, 68, 68, .22); }
.badge-soft--warning { background: rgba(245, 158, 11, .14); color: #b45309; border-color: rgba(245, 158, 11, .24); }
.badge-soft--info    { background: rgba(6, 182, 212, .12);  color: #0e7490; border-color: rgba(6, 182, 212, .22); }
.badge-soft--primary { background: rgba(var(--brand-primary-rgb), .12); color: var(--brand-primary); border-color: rgba(var(--brand-primary-rgb), .22); }
.badge-soft--neutral { background: rgba(100, 116, 139, .12); color: #475569; border-color: rgba(100, 116, 139, .20); }

[data-theme="dark"] .badge-soft--success { background: rgba(34, 197, 94, .15);  color: #4ade80; border-color: rgba(34, 197, 94, .25); }
[data-theme="dark"] .badge-soft--danger  { background: rgba(239, 68, 68, .15);  color: #f87171; border-color: rgba(239, 68, 68, .25); }
[data-theme="dark"] .badge-soft--warning { background: rgba(245, 158, 11, .15); color: #fbbf24; border-color: rgba(245, 158, 11, .25); }
[data-theme="dark"] .badge-soft--info    { background: rgba(6, 182, 212, .15);  color: #22d3ee; border-color: rgba(6, 182, 212, .25); }
[data-theme="dark"] .badge-soft--primary { background: rgba(var(--brand-primary-rgb), .18); color: #A78BFA; border-color: rgba(var(--brand-primary-rgb), .28); }
[data-theme="dark"] .badge-soft--neutral { background: rgba(148, 163, 184, .15); color: #cbd5e1; border-color: rgba(148, 163, 184, .22); }


/* ============================================================================
   ===== CampusFlow Student Premium Dashboard v3 =================================
   Scoped entirely under  body.area-student  (set only for the Student shell in
   _SidebarLayout.cshtml). Admin / Instructor areas are deliberately untouched.
   Purely additive & cosmetic — no layout/DOM/logic dependencies. Deep-navy
   atmosphere is gated to dark mode so the light theme is unaffected.
   ========================================================================== */
body.area-student {
    --eds-bg:        #050718;
    --eds-purple:    #8b5cf6;
    --eds-violet:    #7c3aed;
    --eds-cyan:      #06b6d4;
    --eds-warning:   #f59e0b;
    --eds-glow-purple: rgba(124, 58, 237, .45);
    --eds-glow-cyan:   rgba(6, 182, 212, .35);
    --eds-radius:    20px;
}

/* ── Atmosphere (dark mode only) ──────────────────────────────────────────── */
[data-theme="dark"] body.area-student {
    background:
        radial-gradient(1100px 560px at 12% -8%,  rgba(124, 58, 237, .16), transparent 60%),
        radial-gradient(900px 520px at 102% 2%,   rgba(6, 182, 212, .12),  transparent 55%),
        radial-gradient(820px 620px at 50% 118%,  rgba(139, 92, 246, .09), transparent 60%),
        var(--eds-bg);
    background-attachment: fixed;
}

/* ════════════════════════════════════════════════════════════════════════
   1 · SIDEBAR — premium glass + glow
   ════════════════════════════════════════════════════════════════════════ */
body.area-student .sidebar {
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}
[data-theme="dark"] body.area-student .sidebar {
    background: linear-gradient(180deg, rgba(22, 18, 48, .74), rgba(9, 9, 24, .74));
    border-right: 1px solid rgba(139, 92, 246, .16);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .03),
                28px 0 70px -34px var(--eds-glow-purple);
}
[data-theme="light"] body.area-student .sidebar {
    border-right: 1px solid rgba(124, 58, 237, .12);
    box-shadow: 22px 0 60px -40px rgba(124, 58, 237, .25);
}

/* Section labels — brighter, wider tracking */
body.area-student .sidebar-section-label {
    letter-spacing: .16em;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--eds-purple));
}

/* ── Nav items: pill + icon capsule ── */
body.area-student .sidebar .nav-link {
    border-radius: 14px;
    padding: .5rem .6rem;
    gap: .7rem;
    margin-bottom: 4px;
}
body.area-student .sidebar .nav-link i {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; opacity: 1; font-size: 1rem;
    background: rgba(124, 58, 237, .08);
    border: 1px solid rgba(139, 92, 246, .12);
    transition: background .18s var(--ease-out), color .18s var(--ease-out),
                box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
[data-theme="dark"] body.area-student .sidebar .nav-link i {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .07);
}

/* Hover — slide + capsule glow */
body.area-student .sidebar .nav-link:hover {
    transform: translateX(4px);
    background: rgba(124, 58, 237, .07);
}
[data-theme="dark"] body.area-student .sidebar .nav-link:hover { background: rgba(255, 255, 255, .05); }
body.area-student .sidebar .nav-link:hover i {
    background: rgba(124, 58, 237, .18);
    color: var(--eds-purple);
    box-shadow: 0 0 14px rgba(124, 58, 237, .3);
    transform: scale(1.05);
}

/* Active — gradient fill + glowing accent line + indicator dot + bright capsule */
body.area-student .sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(124, 58, 237, .26), rgba(6, 182, 212, .12));
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .28),
                0 10px 26px -10px var(--eds-glow-purple);
}
[data-theme="dark"] body.area-student .sidebar .nav-link.active { background: linear-gradient(135deg, rgba(124, 58, 237, .34), rgba(6, 182, 212, .16)); }
body.area-student .sidebar .nav-link.active i {
    background: linear-gradient(135deg, var(--eds-violet), var(--eds-purple));
    border-color: transparent; color: #fff;
    box-shadow: 0 5px 16px -2px var(--eds-glow-purple);
}
/* left glowing accent line */
body.area-student .sidebar .nav-link.active::before {
    width: 4px; top: 7px; bottom: 7px; border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg, var(--eds-purple), var(--eds-cyan));
    box-shadow: 0 0 12px 1px var(--eds-glow-purple);
}
/* right glowing indicator dot */
body.area-student .sidebar .nav-link.active::after {
    content: ''; position: absolute; right: 11px; top: 50%;
    width: 7px; height: 7px; border-radius: 50%; margin-top: -3.5px;
    background: var(--eds-cyan);
    box-shadow: 0 0 9px 2px var(--eds-glow-cyan);
    pointer-events: none;
}

/* ── Bottom user profile card ── */
body.area-student .sidebar-user {
    margin: .5rem .35rem .15rem; padding: .65rem .7rem;
    border: 1px solid rgba(139, 92, 246, .18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(6, 182, 212, .05));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.area-student .sidebar-user-avatar {
    position: relative;
    background: linear-gradient(135deg, var(--eds-violet), var(--eds-purple));
    box-shadow: 0 5px 18px -3px var(--eds-glow-purple);
}
/* green online dot */
body.area-student .sidebar-user-avatar::after {
    content: ''; position: absolute; right: -2px; bottom: -2px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #22c55e; border: 2px solid var(--surface-card);
    box-shadow: 0 0 8px rgba(34, 197, 94, .8);
}
body.area-student .sidebar-user-name { font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   2 · TOP NAVBAR — floating command-bar treatment
   ════════════════════════════════════════════════════════════════════════ */
body.area-student .top-nav {
    border-radius: 0 0 18px 18px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}
[data-theme="dark"] body.area-student .top-nav {
    background: linear-gradient(180deg, rgba(18, 15, 44, .82), rgba(8, 8, 22, .62));
    border-bottom: 1px solid rgba(139, 92, 246, .18);
    box-shadow: 0 12px 34px -14px var(--eds-glow-purple);
}
/* Brand logo → gradient capsule icon */
body.area-student .navbar-brand i {
    width: 28px; height: 28px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--eds-violet), var(--eds-purple));
    color: #fff !important; font-size: .9rem;
    box-shadow: 0 4px 14px -2px var(--eds-glow-purple);
}
/* Navbar action buttons → rounded glass chips */
body.area-student .top-nav .btn-sm { border-radius: 12px; }
body.area-student .top-nav .lang-switcher-btn,
body.area-student .top-nav .theme-toggle,
body.area-student .top-nav .btn-outline-secondary {
    transition: box-shadow .18s var(--ease-out), transform .15s var(--ease-out), background .18s var(--ease-out);
}
body.area-student .top-nav .btn-outline-secondary:hover { transform: translateY(-1px); }
/* Logout → soft red glow */
body.area-student .top-nav .btn-outline-danger {
    border-radius: 12px;
    transition: box-shadow .18s var(--ease-out), background .18s var(--ease-out), transform .15s var(--ease-out);
}
body.area-student .top-nav .btn-outline-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, .4), 0 8px 22px -6px rgba(239, 68, 68, .5);
}

/* ════════════════════════════════════════════════════════════════════════
   3 · HERO — richer gradient + wave lines + glow particles
   ════════════════════════════════════════════════════════════════════════ */
body.area-student .sd-hero { border-radius: 26px; }
[data-theme="dark"] body.area-student .sd-hero {
    background: linear-gradient(125deg, #3b1d8f 0%, #6d28d9 45%, #7c3aed 70%, #4338ca 100%);
    box-shadow: 0 22px 60px -22px var(--eds-glow-purple),
                inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Wave lines — soft concentric arcs, drawn with CSS only */
body.area-student .sd-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(120% 140% at 100% 0%, transparent 38%, rgba(255, 255, 255, .07) 39%, transparent 40%),
        radial-gradient(120% 140% at 100% 0%, transparent 50%, rgba(6, 182, 212, .10) 51%, transparent 52%),
        radial-gradient(120% 140% at 100% 0%, transparent 63%, rgba(255, 255, 255, .05) 64%, transparent 65%);
    opacity: .9;
}
/* Glow particles — scattered dots */
body.area-student .sd-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(3px 3px at 20% 30%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(2px 2px at 65% 22%, rgba(6, 182, 212, .7),   transparent),
        radial-gradient(2px 2px at 42% 70%, rgba(255, 255, 255, .4),  transparent),
        radial-gradient(3px 3px at 80% 60%, rgba(167, 139, 250, .65), transparent),
        radial-gradient(2px 2px at 30% 80%, rgba(255, 255, 255, .35), transparent);
}
body.area-student .sd-hero-content,
body.area-student .sd-hero-bg { position: relative; z-index: 1; }
/* Premium CTAs */
body.area-student .sd-hero-btn { border-radius: 14px; padding: .6rem 1.3rem; }
body.area-student .sd-hero-btn--primary { box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .35); }
body.area-student .sd-hero-btn--ghost {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.area-student .sd-hero-btn--ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .4);
}
/* Circular progress widget — soft glass ring plate */
body.area-student .sd-hero-ring {
    padding: 6px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, .12);
}
body.area-student .sd-ring-fill { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .55)); }

/* ════════════════════════════════════════════════════════════════════════
   4 · STAT CARDS + CONTENT PANELS — glassier depth
   ════════════════════════════════════════════════════════════════════════ */
body.area-student .sd-stat,
body.area-student .sd-widget,
body.area-student .sd-course,
body.area-student .sd-empty-state {
    border-radius: var(--eds-radius);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}
[data-theme="dark"] body.area-student .sd-stat,
[data-theme="dark"] body.area-student .sd-widget,
[data-theme="dark"] body.area-student .sd-course {
    background: linear-gradient(160deg, rgba(22, 20, 50, .66), rgba(12, 12, 30, .62));
    border: 1px solid rgba(139, 92, 246, .14);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .7),
                inset 0 1px 0 rgba(255, 255, 255, .04);
}
body.area-student .sd-stat-icon {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sc) 26%, transparent),
        color-mix(in srgb, var(--sc) 8%, transparent));
    color: var(--sc);
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--sc) 55%, transparent);
}
[data-theme="dark"] body.area-student .sd-stat:hover {
    border-color: rgba(139, 92, 246, .32);
    box-shadow: 0 16px 40px -16px var(--eds-glow-purple);
}
[data-theme="dark"] body.area-student .sd-widget:hover {
    border-color: rgba(139, 92, 246, .26);
    box-shadow: 0 16px 44px -18px var(--eds-glow-purple);
}

/* ════════════════════════════════════════════════════════════════════════
   5 · CONTINUE-LEARNING COURSE CARD
   ════════════════════════════════════════════════════════════════════════ */
body.area-student .sd-course-banner { height: 92px; }
body.area-student .sd-course-pct {
    background: rgba(8, 12, 30, .55);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
    padding: 3px 10px;
}
[data-theme="dark"] body.area-student .sd-course:hover {
    border-color: rgba(6, 182, 212, .3);
    box-shadow: 0 18px 44px -18px var(--eds-glow-cyan);
}
body.area-student .sd-course-action { letter-spacing: .01em; }

/* ════════════════════════════════════════════════════════════════════════
   6 · RECENT GRADES / ACTIVITY PANELS — spacing, badges, hierarchy
   ════════════════════════════════════════════════════════════════════════ */
body.area-student .sd-section-title { font-size: 1rem; letter-spacing: -.2px; }
body.area-student .sd-link {
    border: 1px solid transparent; padding: .25rem .6rem; border-radius: 999px;
}
body.area-student .sd-link:hover {
    background: rgba(124, 58, 237, .12);
    border-color: rgba(139, 92, 246, .3);
}
/* dashed separators between rows */
body.area-student .sd-grade-row + .sd-grade-row,
body.area-student .sd-activity-item + .sd-activity-item,
body.area-student .sd-completed-item + .sd-completed-item {
    border-top: 1px dashed var(--border-soft);
}
body.area-student .sd-grade-row { padding: .65rem; border-radius: 12px; }
body.area-student .sd-grade-badge {
    padding: 3px 10px; letter-spacing: .02em;
    border: 1px solid currentColor;
}
body.area-student .sd-grade-pct { font-size: .92rem; }
/* glowing amber activity dots */
body.area-student .sd-activity-dot { box-shadow: 0 0 8px 1px currentColor; }
body.area-student .sd-completed-dot { box-shadow: 0 0 9px 1px rgba(34, 197, 94, .55); }

/* ════════════════════════════════════════════════════════════════════════
   7 · ACCESSIBILITY — focus-visible + reduced motion
   ════════════════════════════════════════════════════════════════════════ */
body.area-student .sidebar .nav-link:focus-visible,
body.area-student .sd-hero-btn:focus-visible,
body.area-student .sd-course:focus-visible,
body.area-student .sd-grade-row:focus-visible,
body.area-student .sd-link:focus-visible {
    outline: 2px solid var(--eds-cyan);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    body.area-student .sidebar .nav-link,
    body.area-student .sidebar .nav-link i,
    body.area-student .sd-stat,
    body.area-student .sd-course,
    body.area-student .sd-hero-btn,
    body.area-student .top-nav .btn-sm {
        transition: none !important;
    }
}


/* ============================================================================
   ===== CampusFlow Student Premium Dashboard v3.1 — refinements ================
   Follow-up polish (all still under body.area-student): relocated sidebar
   collapse toggle, lighter/softer sidebar glow, tighter spacing, navbar balance,
   card/grade alignment, and collapsed-rail behavior. Appended after v3 so these
   refined values win.
   ========================================================================== */

/* ── 1 · Relocated sidebar collapse/expand toggle (desktop) ──────────────── */
body.area-student .sidebar-rail-head {
    align-items: center; justify-content: flex-end;
    padding: .1rem .3rem .55rem; margin-bottom: .35rem;
    border-bottom: 1px solid var(--border-soft);
}
body.area-student .sidebar-rail-toggle {
    width: 32px; height: 32px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-soft);
    background: rgba(124, 58, 237, .07); color: var(--text-muted);
    cursor: pointer; transition: color .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
[data-theme="dark"] body.area-student .sidebar-rail-toggle { background: rgba(255, 255, 255, .04); }
body.area-student .sidebar-rail-toggle:hover {
    color: var(--eds-purple); border-color: rgba(139, 92, 246, .4);
    box-shadow: 0 0 12px rgba(124, 58, 237, .2);
}
body.area-student .sidebar-rail-toggle:focus-visible { outline: 2px solid var(--eds-cyan); outline-offset: 2px; }
body.area-student .sidebar-rail-toggle .bi { transition: transform .25s var(--ease-out); font-size: .9rem; }
[data-sidebar="collapsed"] body.area-student .sidebar-rail-toggle .bi { transform: rotate(180deg); }
[data-sidebar="collapsed"] body.area-student .sidebar-rail-head { justify-content: center; padding-left: 0; padding-right: 0; }

/* ── 2 · Sidebar: softer glow, thinner border, cleaner spacing (item 3) ──── */
[data-theme="dark"] body.area-student .sidebar {
    border-right: 1px solid rgba(139, 92, 246, .10);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .025), 16px 0 44px -38px var(--eds-glow-purple);
}
[data-theme="light"] body.area-student .sidebar {
    border-right: 1px solid rgba(124, 58, 237, .10);
    box-shadow: 14px 0 40px -42px rgba(124, 58, 237, .22);
}
body.area-student .sidebar .nav-link { margin-bottom: 6px; padding: .5rem .55rem; }
body.area-student .sidebar .nav-link i {
    width: 32px; height: 32px; border-radius: 9px; font-size: .95rem;
    background: rgba(124, 58, 237, .07); border-color: rgba(139, 92, 246, .10);
}
[data-theme="dark"] body.area-student .sidebar .nav-link i {
    background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .06);
}
body.area-student .sidebar .nav-link:hover i { box-shadow: 0 0 10px rgba(124, 58, 237, .2); }

/* Active — premium but lighter (item 3) */
body.area-student .sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(6, 182, 212, .07));
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .18), 0 6px 18px -12px var(--eds-glow-purple);
}
[data-theme="dark"] body.area-student .sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(124, 58, 237, .24), rgba(6, 182, 212, .10));
}
body.area-student .sidebar .nav-link.active i { box-shadow: 0 3px 12px -3px var(--eds-glow-purple); }
body.area-student .sidebar .nav-link.active::before {
    width: 3px; box-shadow: 0 0 8px 0 var(--eds-glow-purple);
}
body.area-student .sidebar .nav-link.active::after {
    width: 6px; height: 6px; margin-top: -3px; box-shadow: 0 0 7px 1px var(--eds-glow-cyan);
}

/* Collapsed rail polish: keep capsule + accent line, drop the cramped right dot */
[data-sidebar="collapsed"] body.area-student .sidebar .nav-link { padding-left: 0; padding-right: 0; gap: 0; justify-content: center; }
[data-sidebar="collapsed"] body.area-student .sidebar .nav-link.active::after { display: none; }
[data-sidebar="collapsed"] body.area-student .sidebar-user { padding: .55rem .25rem; }

/* Compact, clean bottom profile card (item 3) */
body.area-student .sidebar-user { padding: .55rem .6rem; gap: .55rem; border-radius: 14px; }
body.area-student .sidebar-user-avatar { width: 34px; height: 34px; }

/* ── 3 · Top navbar balance (item 2) ─────────────────────────────────────── */
body.area-student .top-nav .navbar-brand { margin-right: .15rem; }
body.area-student .top-nav .btn-sm { height: 34px; display: inline-flex; align-items: center; }

/* ── 4 · Card / panel consistency (item 3) ───────────────────────────────── */
body.area-student .sd-stat,
body.area-student .sd-widget,
body.area-student .sd-course { border-radius: 18px; }
body.area-student .sd-stat { padding: 1rem 1.05rem; }
body.area-student .sd-widget { padding: 1.2rem 1.3rem; }
[data-theme="dark"] body.area-student .sd-stat,
[data-theme="dark"] body.area-student .sd-widget,
[data-theme="dark"] body.area-student .sd-course { border-color: rgba(139, 92, 246, .12); }

/* Course card alignment (item 3) */
body.area-student .sd-course-body { padding: .8rem .95rem .65rem; }
body.area-student .sd-course-name { min-height: 2.3em; margin-bottom: .35rem; }
body.area-student .sd-course-progress { margin-top: .4rem; }

/* "Son Qiymətlər" spacing + hierarchy (item 3) */
body.area-student .sd-section-head { margin-bottom: 1rem; }
body.area-student .sd-grade-list { gap: 0; }
body.area-student .sd-grade-row { padding: .7rem .6rem; align-items: center; }
body.area-student .sd-grade-course { font-size: .82rem; }
body.area-student .sd-grade-lesson { font-size: .7rem; margin-top: 1px; }
body.area-student .sd-grade-score { margin-right: .5rem; }


/* ============================================================================
   ===== CampusFlow Student Premium Dashboard v3.2 ==============================
   Three scoped, Student-only upgrades (all under body.area-student, no JS/markup
   changes): (1) navbar search pill, (2) theme toggle as a pill switch, (3) a
   truly floating top navbar on desktop. The search pill is the existing
   command-palette button (.cp-nav-btn, injected by command-palette.js and already
   wired to open the Ctrl+K palette on click) — only its Student appearance changes.
   ========================================================================== */

/* ── 1 · Navbar search pill (restyle the existing .cp-nav-btn) ────────────── */
/* The button carries inline styles set in command-palette.js, so a few !important
   overrides are required to win — strictly scoped to the Student shell. */
body.area-student .cp-nav-btn {
    width: clamp(170px, 22vw, 320px);
    justify-content: flex-start !important;
    gap: .55rem !important;
    background: var(--surface-bg-2) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-muted) !important;
    border-radius: 12px !important;
    padding: .42rem .8rem !important;
    margin-left: .35rem;
    transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out) !important;
}
[data-theme="dark"] body.area-student .cp-nav-btn {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(139, 92, 246, .18) !important;
}
body.area-student .cp-nav-btn:hover {
    color: var(--text-main) !important;
    border-color: rgba(139, 92, 246, .5) !important;
    background: var(--surface-card) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12) !important;
}
body.area-student .cp-nav-btn:focus-visible {
    outline: 2px solid var(--eds-cyan) !important;
    outline-offset: 2px;
}
/* "Ctrl K" badge pushed to the right edge, themed */
body.area-student .cp-nav-btn kbd {
    margin-left: auto !important;
    background: rgba(124, 58, 237, .12) !important;
    border: 1px solid rgba(139, 92, 246, .25) !important;
    color: var(--eds-purple) !important;
}
body.area-student .cp-nav-btn .bi { color: var(--eds-purple); }

/* ── 2 · Theme toggle → premium pill switch ──────────────────────────────── */
/* Restyle only; the click handler in site.js is untouched. Knob slides by the
   current [data-theme]; site.js keeps swapping the ☀️/🌙 glyph inside the knob. */
body.area-student #theme-toggle {
    position: relative;
    width: 50px; height: 26px; padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--surface-bg-2);
    flex-shrink: 0;
    transition: background .22s var(--ease-out), border-color .22s var(--ease-out);
}
body.area-student #theme-toggle:hover { border-color: rgba(139, 92, 246, .5); }
body.area-student #theme-toggle:focus-visible {
    outline: 2px solid var(--eds-cyan); outline-offset: 2px;
}
[data-theme="dark"] body.area-student #theme-toggle {
    background: linear-gradient(135deg, rgba(124, 58, 237, .4), rgba(6, 182, 212, .22));
    border-color: rgba(139, 92, 246, .45);
}
/* Knob = the existing icon span; slide + glow by theme */
body.area-student #theme-toggle #theme-toggle-icon {
    position: absolute; top: 2px; left: 2px;
    width: 21px; height: 21px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    font-size: .66rem; line-height: 1;
    transition: left .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
[data-theme="dark"] body.area-student #theme-toggle #theme-toggle-icon {
    left: calc(100% - 23px);
    box-shadow: 0 0 10px rgba(124, 58, 237, .7), 0 2px 6px rgba(0, 0, 0, .3);
}

/* ── 3 · Floating top navbar (desktop only) ──────────────────────────────── */
@media (min-width: 992px) {
    body.area-student .top-nav {
        margin: .6rem .8rem 0;
        top: .6rem;                 /* sticky gap matches the top margin */
        border-radius: 16px;
        border: 1px solid rgba(139, 92, 246, .18);
        box-shadow: 0 14px 36px -16px var(--eds-glow-purple);
    }
    [data-theme="dark"] body.area-student .top-nav {
        border-color: rgba(139, 92, 246, .22);
        box-shadow: 0 16px 40px -16px var(--eds-glow-purple);
    }
    /* Re-seat the sidebar below the now-taller floating bar so nothing overlaps. */
    body.area-student .sidebar {
        top: calc(var(--topnav-h) + 1.1rem);
        height: calc(100vh - var(--topnav-h) - 1.1rem);
    }
}
/* On tablet/mobile the navbar stays flush (v3 rounded-bottom look) — the search
   pill is d-none below md, so there is no horizontal overflow. */


/* ============================================================================
   ===== CampusFlow Instructor — Teaching Analytics Command Center ==============
   Scoped entirely under  body.area-instructor  (set only for the Instructor
   shell in _SidebarLayout.cshtml). Student/Admin are untouched. The Instructor
   identity is analytics-first: deep navy, cyan/emerald/blue/amber accents,
   minimal purple. We re-point the brand tokens to cyan for this subtree so every
   var(--brand-primary) usage in the shared shell + dashboard recolors at once.
   ========================================================================== */
body.area-instructor {
    --brand-primary: #06b6d4;
    --brand-primary-rgb: 6, 182, 212;
    --brand-primary-dark: #0e7490;
    --brand-primary-light: rgba(6, 182, 212, .10);

    --ia-bg: #050718;
    --ia-cyan: #06b6d4;
    --ia-emerald: #10b981;
    --ia-blue: #3b82f6;
    --ia-amber: #f59e0b;
    --ia-glow-cyan: rgba(6, 182, 212, .42);
    --ia-glow-blue: rgba(59, 130, 246, .35);
}

/* ── Atmosphere (dark only) ──────────────────────────────────────────────── */
[data-theme="dark"] body.area-instructor {
    background:
        radial-gradient(1100px 560px at 10% -8%,  rgba(6, 182, 212, .14),  transparent 60%),
        radial-gradient(900px 520px at 100% 0%,   rgba(59, 130, 246, .12), transparent 55%),
        radial-gradient(820px 620px at 50% 120%,  rgba(16, 185, 129, .08), transparent 60%),
        var(--ia-bg);
    background-attachment: fixed;
}

/* ════════════════════════════════════════════════════════════════════════
   SHELL · Sidebar control center
   ════════════════════════════════════════════════════════════════════════ */
body.area-instructor .sidebar {
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}
[data-theme="dark"] body.area-instructor .sidebar {
    background: linear-gradient(180deg, rgba(10, 22, 40, .76), rgba(6, 10, 24, .76));
    border-right: 1px solid rgba(6, 182, 212, .12);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .025), 16px 0 44px -38px var(--ia-glow-cyan);
}
[data-theme="light"] body.area-instructor .sidebar {
    border-right: 1px solid rgba(6, 182, 212, .12);
    box-shadow: 14px 0 40px -42px rgba(6, 182, 212, .22);
}
body.area-instructor .sidebar-section-label {
    letter-spacing: .16em;
    color: color-mix(in srgb, var(--text-muted) 86%, var(--ia-cyan));
}
/* nav items: pill + cyan icon capsule */
body.area-instructor .sidebar .nav-link { margin-bottom: 6px; padding: .5rem .55rem; border-radius: 13px; }
body.area-instructor .sidebar .nav-link i {
    width: 32px; height: 32px; border-radius: 9px; font-size: .95rem; opacity: 1;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(6, 182, 212, .08); border: 1px solid rgba(6, 182, 212, .12);
    transition: background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
[data-theme="dark"] body.area-instructor .sidebar .nav-link i {
    background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .06);
}
body.area-instructor .sidebar .nav-link:hover { transform: translateX(4px); }
body.area-instructor .sidebar .nav-link:hover i {
    background: rgba(6, 182, 212, .18); color: var(--ia-cyan); box-shadow: 0 0 12px rgba(6, 182, 212, .28); transform: scale(1.04);
}
/* active: cyan→blue gradient, accent line + indicator dot + bright capsule */
body.area-instructor .sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(6, 182, 212, .2), rgba(59, 130, 246, .1));
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(6, 182, 212, .22), 0 6px 18px -12px var(--ia-glow-cyan);
}
[data-theme="dark"] body.area-instructor .sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(6, 182, 212, .28), rgba(59, 130, 246, .14));
}
body.area-instructor .sidebar .nav-link.active i {
    background: linear-gradient(135deg, var(--ia-cyan), var(--ia-blue));
    border-color: transparent; color: #fff; box-shadow: 0 4px 14px -2px var(--ia-glow-cyan);
}
body.area-instructor .sidebar .nav-link.active::before {
    width: 3px; top: 7px; bottom: 7px; border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg, var(--ia-cyan), var(--ia-blue));
    box-shadow: 0 0 9px 0 var(--ia-glow-cyan);
}
body.area-instructor .sidebar .nav-link.active::after {
    content: ''; position: absolute; right: 11px; top: 50%; margin-top: -3px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--ia-cyan);
    box-shadow: 0 0 8px 1px var(--ia-glow-cyan); pointer-events: none;
}
[data-sidebar="collapsed"] body.area-instructor .sidebar .nav-link { padding-left: 0; padding-right: 0; gap: 0; justify-content: center; }
[data-sidebar="collapsed"] body.area-instructor .sidebar .nav-link.active::after { display: none; }
/* compact glass profile card */
body.area-instructor .sidebar-user {
    margin: .5rem .35rem .15rem; padding: .55rem .6rem; gap: .55rem; border-radius: 14px;
    border: 1px solid rgba(6, 182, 212, .16);
    background: linear-gradient(135deg, rgba(6, 182, 212, .1), rgba(59, 130, 246, .05));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.area-instructor .sidebar-user-avatar {
    width: 34px; height: 34px; position: relative;
    background: linear-gradient(135deg, var(--ia-cyan), var(--ia-blue));
    box-shadow: 0 5px 18px -3px var(--ia-glow-cyan);
}
body.area-instructor .sidebar-user-avatar::after {
    content: ''; position: absolute; right: -2px; bottom: -2px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--ia-emerald); border: 2px solid var(--surface-card);
    box-shadow: 0 0 8px rgba(16, 185, 129, .8);
}
body.area-instructor .sidebar-user-name { font-weight: 700; }

/* ── Sidebar rail collapse toggle (relocated) ────────────────────────────── */
body.area-instructor .sidebar-rail-head {
    align-items: center; justify-content: flex-end;
    padding: .1rem .3rem .55rem; margin-bottom: .35rem;
    border-bottom: 1px solid var(--border-soft);
}
body.area-instructor .sidebar-rail-toggle {
    width: 32px; height: 32px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-soft);
    background: rgba(6, 182, 212, .07); color: var(--text-muted); cursor: pointer;
    transition: color .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
[data-theme="dark"] body.area-instructor .sidebar-rail-toggle { background: rgba(255, 255, 255, .04); }
body.area-instructor .sidebar-rail-toggle:hover {
    color: var(--ia-cyan); border-color: rgba(6, 182, 212, .45); box-shadow: 0 0 12px rgba(6, 182, 212, .22);
}
body.area-instructor .sidebar-rail-toggle:focus-visible { outline: 2px solid var(--ia-cyan); outline-offset: 2px; }
body.area-instructor .sidebar-rail-toggle .bi { transition: transform .25s var(--ease-out); font-size: .9rem; }
[data-sidebar="collapsed"] body.area-instructor .sidebar-rail-toggle .bi { transform: rotate(180deg); }
[data-sidebar="collapsed"] body.area-instructor .sidebar-rail-head { justify-content: center; padding-left: 0; padding-right: 0; }

/* ════════════════════════════════════════════════════════════════════════
   SHELL · Navbar (search pill, theme switch, floating bar)
   ════════════════════════════════════════════════════════════════════════ */
body.area-instructor .top-nav {
    border-radius: 0 0 18px 18px;
    backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
}
[data-theme="dark"] body.area-instructor .top-nav {
    background: linear-gradient(180deg, rgba(8, 18, 36, .82), rgba(6, 10, 24, .62));
    border-bottom: 1px solid rgba(6, 182, 212, .16);
    box-shadow: 0 12px 34px -14px var(--ia-glow-cyan);
}
body.area-instructor .navbar-brand i {
    width: 28px; height: 28px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ia-cyan), var(--ia-blue));
    color: #fff !important; font-size: .9rem;
    box-shadow: 0 4px 14px -2px var(--ia-glow-cyan);
}
/* search pill */
body.area-instructor .cp-nav-btn {
    width: clamp(170px, 22vw, 320px);
    justify-content: flex-start !important; gap: .55rem !important;
    background: var(--surface-bg-2) !important; border: 1px solid var(--border-soft) !important;
    color: var(--text-muted) !important; border-radius: 12px !important;
    padding: .42rem .8rem !important; margin-left: .35rem;
    transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out) !important;
}
[data-theme="dark"] body.area-instructor .cp-nav-btn { background: rgba(255, 255, 255, .04) !important; border-color: rgba(6, 182, 212, .18) !important; }
body.area-instructor .cp-nav-btn:hover {
    color: var(--text-main) !important; border-color: rgba(6, 182, 212, .5) !important;
    background: var(--surface-card) !important; box-shadow: 0 0 0 3px rgba(6, 182, 212, .12) !important;
}
body.area-instructor .cp-nav-btn:focus-visible { outline: 2px solid var(--ia-cyan) !important; outline-offset: 2px; }
body.area-instructor .cp-nav-btn .bi { color: var(--ia-cyan); }
body.area-instructor .cp-nav-btn kbd {
    margin-left: auto !important; background: rgba(6, 182, 212, .12) !important;
    border: 1px solid rgba(6, 182, 212, .25) !important; color: var(--ia-cyan) !important;
}
/* theme switch */
body.area-instructor #theme-toggle {
    position: relative; width: 50px; height: 26px; padding: 0; border-radius: 999px;
    border: 1px solid var(--border-soft); background: var(--surface-bg-2); flex-shrink: 0;
    transition: background .22s var(--ease-out), border-color .22s var(--ease-out);
}
body.area-instructor #theme-toggle:hover { border-color: rgba(6, 182, 212, .5); }
body.area-instructor #theme-toggle:focus-visible { outline: 2px solid var(--ia-cyan); outline-offset: 2px; }
[data-theme="dark"] body.area-instructor #theme-toggle {
    background: linear-gradient(135deg, rgba(6, 182, 212, .4), rgba(59, 130, 246, .22)); border-color: rgba(6, 182, 212, .45);
}
body.area-instructor #theme-toggle #theme-toggle-icon {
    position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); font-size: .66rem; line-height: 1;
    transition: left .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
[data-theme="dark"] body.area-instructor #theme-toggle #theme-toggle-icon {
    left: calc(100% - 23px); box-shadow: 0 0 10px rgba(6, 182, 212, .7), 0 2px 6px rgba(0, 0, 0, .3);
}
/* floating bar (desktop) + sidebar re-seat */
@media (min-width: 992px) {
    body.area-instructor .top-nav {
        margin: .6rem .8rem 0; top: .6rem; border-radius: 16px;
        border: 1px solid rgba(6, 182, 212, .18); box-shadow: 0 14px 36px -16px var(--ia-glow-cyan);
    }
    [data-theme="dark"] body.area-instructor .top-nav { border-color: rgba(6, 182, 212, .22); box-shadow: 0 16px 40px -16px var(--ia-glow-cyan); }
    body.area-instructor .sidebar { top: calc(var(--topnav-h) + 1.1rem); height: calc(100vh - var(--topnav-h) - 1.1rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD · Hero "Teaching Analytics"
   ════════════════════════════════════════════════════════════════════════ */
body.area-instructor .id-banner.ia-hero {
    border-radius: 24px; overflow: hidden;
    background: linear-gradient(125deg, #07243a 0%, #0b3a52 38%, #0e4f6b 62%, #123a6b 100%);
    box-shadow: 0 22px 60px -24px var(--ia-glow-cyan), inset 0 1px 0 rgba(255, 255, 255, .06);
}
[data-theme="dark"] body.area-instructor .id-banner.ia-hero {
    background: linear-gradient(125deg, #061a2c 0%, #07293c 40%, #0a3a52 65%, #0c2f54 100%);
}
/* analytics grid pattern */
body.area-instructor .ia-hero-grid {
    position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 30%, transparent 75%);
            mask-image: radial-gradient(120% 120% at 100% 0%, #000 30%, transparent 75%);
}
/* glow particles */
body.area-instructor .ia-hero-particles {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(3px 3px at 22% 32%, rgba(6, 182, 212, .8), transparent),
        radial-gradient(2px 2px at 64% 22%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(2px 2px at 44% 72%, rgba(59, 130, 246, .7), transparent),
        radial-gradient(3px 3px at 82% 58%, rgba(16, 185, 129, .6), transparent),
        radial-gradient(2px 2px at 32% 84%, rgba(255, 255, 255, .35), transparent);
    animation: iaFloat 8s ease-in-out infinite alternate;
}
@keyframes iaFloat { from { transform: translateY(0); } to { transform: translateY(-6px); } }
body.area-instructor .ia-hero .id-banner-content { position: relative; z-index: 1; align-items: center; }
body.area-instructor .ia-hero .id-banner-actions { margin-top: 1.1rem; }
/* hero right side: ring + date card */
body.area-instructor .ia-hero-side { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
body.area-instructor .ia-hero-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
body.area-instructor .ia-hero-ring svg { width: 92px; height: 92px; transform: rotate(-90deg); }
body.area-instructor .ia-ring-track { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 7; }
body.area-instructor .ia-ring-fill {
    fill: none; stroke: #22d3ee; stroke-width: 7; stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, .6));
    transition: stroke-dasharray 1.1s cubic-bezier(.22, 1, .36, 1);
}
body.area-instructor .ia-hero-ring-lbl {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;
}
body.area-instructor .ia-hero-ring-pct { font-size: 1.35rem; font-weight: 900; line-height: 1; }
body.area-instructor .ia-hero-ring-sub { font-size: .56rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
body.area-instructor .ia-date-card {
    display: flex; align-items: center; gap: .6rem;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px; padding: .6rem .85rem; color: #fff;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.area-instructor .ia-date-card .bi { font-size: 1.05rem; color: #67e8f9; }
body.area-instructor .ia-date-text { display: flex; flex-direction: column; line-height: 1.25; }
body.area-instructor .ia-date-lbl { font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; opacity: .75; }
body.area-instructor .ia-date-val { font-size: .82rem; font-weight: 800; }
@media (max-width: 767.98px) {
    body.area-instructor .ia-hero-side { width: 100%; justify-content: flex-start; margin-top: 1rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD · KPI palette correction + glass depth
   ════════════════════════════════════════════════════════════════════════ */
/* Recolor the two off-palette KPI accents (purple, pink) toward analytics blue/cyan
   by overriding the inline custom property. */
body.area-instructor .id-kpi[style*="7C3AED"] { --kpi-accent: #3b82f6 !important; }
body.area-instructor .id-kpi[style*="f472b6"] { --kpi-accent: #06b6d4 !important; }
[data-theme="dark"] body.area-instructor .id-kpi {
    background: linear-gradient(160deg, rgba(12, 26, 44, .66), rgba(8, 14, 30, .62));
    border: 1px solid rgba(6, 182, 212, .12);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
}
[data-theme="dark"] body.area-instructor .id-kpi:hover {
    border-color: rgba(6, 182, 212, .3); box-shadow: 0 16px 40px -16px var(--ia-glow-cyan);
}
/* feed avatar + default progress fill: drop hardcoded purple for cyan/blue */
body.area-instructor .id-feed-avatar { background: linear-gradient(135deg, var(--ia-cyan), var(--ia-blue)); box-shadow: 0 0 10px rgba(6, 182, 212, .18); }
body.area-instructor .id-prog-fill { background: linear-gradient(90deg, var(--ia-cyan), var(--ia-blue)); box-shadow: 0 0 6px rgba(6, 182, 212, .25); }
[data-theme="dark"] body.area-instructor .id-card,
[data-theme="dark"] body.area-instructor .id-courses-panel {
    background: linear-gradient(160deg, rgba(12, 26, 44, .6), rgba(8, 14, 30, .58));
    border: 1px solid rgba(6, 182, 212, .1);
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD · Review Queue
   ════════════════════════════════════════════════════════════════════════ */
body.area-instructor .ia-review-card {
    background: var(--surface-card); border: 1px solid var(--border-soft);
    border-radius: 18px; padding: 1.25rem; margin-bottom: 1.5rem;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-left: 3px solid var(--ia-amber);
    transition: box-shadow .25s var(--ease-out);
}
[data-theme="dark"] body.area-instructor .ia-review-card {
    background: linear-gradient(160deg, rgba(28, 22, 10, .5), rgba(10, 12, 26, .6));
    border-color: rgba(245, 158, 11, .18); border-left-color: var(--ia-amber);
}
body.area-instructor .ia-review-card .id-card-title .bi { color: var(--ia-amber); }
body.area-instructor .ia-rq-wrap { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
body.area-instructor .ia-rq-table { width: 100%; border-collapse: collapse; }
body.area-instructor .ia-rq-table th {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); padding: .45rem .7rem; border-bottom: 1px solid var(--border-soft); white-space: nowrap; text-align: left;
}
body.area-instructor .ia-rq-table td {
    padding: .6rem .7rem; border-bottom: 1px solid var(--border-soft);
    font-size: .82rem; color: var(--text-main); vertical-align: middle;
}
body.area-instructor .ia-rq-table tr:last-child td { border-bottom: none; }
body.area-instructor .ia-rq-table tbody tr { transition: background .15s var(--ease-out); }
body.area-instructor .ia-rq-table tbody tr:hover { background: rgba(245, 158, 11, .06); }
body.area-instructor .ia-rq-student { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
body.area-instructor .ia-rq-avatar {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--ia-amber), #ea580c);
}
body.area-instructor .ia-rq-assignment { color: var(--text-main); }
body.area-instructor .ia-rq-course { color: var(--text-muted); }
body.area-instructor .ia-rq-time { color: var(--text-muted); font-size: .76rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.area-instructor .ia-rq-btn {
    display: inline-flex; align-items: center; padding: .35rem .85rem; border-radius: 9px;
    background: linear-gradient(135deg, var(--ia-amber), #ea580c); color: #fff !important;
    font-size: .76rem; font-weight: 800; text-decoration: none; white-space: nowrap;
    box-shadow: 0 4px 12px -4px rgba(245, 158, 11, .6); transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), filter .15s;
}
body.area-instructor .ia-rq-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 16px -4px rgba(245, 158, 11, .7); }
body.area-instructor .ia-rq-btn:focus-visible { outline: 2px solid var(--ia-cyan); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   Accessibility · reduced motion
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body.area-instructor .ia-hero-particles { animation: none; }
    body.area-instructor .sidebar .nav-link,
    body.area-instructor .sidebar .nav-link i,
    body.area-instructor .id-kpi,
    body.area-instructor .ia-rq-btn,
    body.area-instructor .ia-ring-fill { transition: none !important; }
}


/* ============================================================================
   ===== CampusFlow Admin — Platform Intelligence Command Center ================
   Scoped under  body.area-admin  (set only for the Admin shell). Student /
   Instructor untouched. Identity = "Mission Control": deep navy, VIOLET primary
   (kept), cyan intelligence + emerald/amber/red status accents. Retones the
   SHARED .adm-* primitives so every admin page becomes one cohesive system.
   ========================================================================== */
body.area-admin {
    --adm-violet: #7c3aed;
    --adm-cyan:   #06b6d4;
    --adm-emerald:#10b981;
    --adm-amber:  #f59e0b;
    --adm-red:    #ef4444;
    --adm-bg:     #050718;
    --adm-glow-violet: rgba(124, 58, 237, .42);
    --adm-glow-cyan:   rgba(6, 182, 212, .32);
}

/* ── Atmosphere (dark only) ──────────────────────────────────────────────── */
[data-theme="dark"] body.area-admin {
    background:
        radial-gradient(1100px 560px at 8% -8%,  rgba(124, 58, 237, .15), transparent 60%),
        radial-gradient(960px 520px at 100% 2%,  rgba(6, 182, 212, .11),  transparent 55%),
        radial-gradient(820px 620px at 55% 122%, rgba(16, 185, 129, .07), transparent 60%),
        var(--adm-bg);
    background-attachment: fixed;
}

/* ════════════════════════════════════════════════════════════════════════
   SHELL · Executive navigation rail (sidebar)
   ════════════════════════════════════════════════════════════════════════ */
body.area-admin .sidebar { backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }
[data-theme="dark"] body.area-admin .sidebar {
    background: linear-gradient(180deg, rgba(20, 14, 44, .76), rgba(8, 8, 22, .76));
    border-right: 1px solid rgba(124, 58, 237, .12);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .025), 16px 0 44px -38px var(--adm-glow-violet);
}
[data-theme="light"] body.area-admin .sidebar {
    border-right: 1px solid rgba(124, 58, 237, .1);
    box-shadow: 14px 0 40px -42px rgba(124, 58, 237, .22);
}
body.area-admin .sidebar-section-label { letter-spacing: .16em; color: color-mix(in srgb, var(--text-muted) 86%, var(--adm-violet)); }
body.area-admin .sidebar .nav-link { margin-bottom: 6px; padding: .5rem .55rem; border-radius: 13px; }
body.area-admin .sidebar .nav-link i {
    width: 32px; height: 32px; border-radius: 9px; font-size: .95rem; opacity: 1;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(124, 58, 237, .08); border: 1px solid rgba(124, 58, 237, .12);
    transition: background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
[data-theme="dark"] body.area-admin .sidebar .nav-link i { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .06); }
body.area-admin .sidebar .nav-link:hover { transform: translateX(4px); }
body.area-admin .sidebar .nav-link:hover i { background: rgba(124, 58, 237, .18); color: var(--adm-violet); box-shadow: 0 0 12px rgba(124, 58, 237, .28); transform: scale(1.04); }
body.area-admin .sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(6, 182, 212, .1));
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .24), 0 6px 18px -12px var(--adm-glow-violet);
}
[data-theme="dark"] body.area-admin .sidebar .nav-link.active { background: linear-gradient(135deg, rgba(124, 58, 237, .3), rgba(6, 182, 212, .12)); }
body.area-admin .sidebar .nav-link.active i { background: linear-gradient(135deg, var(--adm-violet), var(--adm-cyan)); border-color: transparent; color: #fff; box-shadow: 0 4px 14px -2px var(--adm-glow-violet); }
body.area-admin .sidebar .nav-link.active::before { width: 3px; top: 7px; bottom: 7px; border-radius: 0 5px 5px 0; background: linear-gradient(180deg, var(--adm-violet), var(--adm-cyan)); box-shadow: 0 0 9px 0 var(--adm-glow-violet); }
body.area-admin .sidebar .nav-link.active::after { content: ''; position: absolute; right: 11px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--adm-cyan); box-shadow: 0 0 8px 1px var(--adm-glow-cyan); pointer-events: none; }
[data-sidebar="collapsed"] body.area-admin .sidebar .nav-link { padding-left: 0; padding-right: 0; gap: 0; justify-content: center; }
[data-sidebar="collapsed"] body.area-admin .sidebar .nav-link.active::after { display: none; }
body.area-admin .sidebar-user {
    margin: .5rem .35rem .15rem; padding: .55rem .6rem; gap: .55rem; border-radius: 14px;
    border: 1px solid rgba(124, 58, 237, .16);
    background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(6, 182, 212, .05));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.area-admin .sidebar-user-avatar { width: 34px; height: 34px; position: relative; background: linear-gradient(135deg, var(--adm-violet), #a855f7); box-shadow: 0 5px 18px -3px var(--adm-glow-violet); }
body.area-admin .sidebar-user-avatar::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--adm-emerald); border: 2px solid var(--surface-card); box-shadow: 0 0 8px rgba(16, 185, 129, .8); }
body.area-admin .sidebar-user-name { font-weight: 700; }

/* Sidebar rail collapse toggle (relocated) */
body.area-admin .sidebar-rail-head { align-items: center; justify-content: flex-end; padding: .1rem .3rem .55rem; margin-bottom: .35rem; border-bottom: 1px solid var(--border-soft); }
body.area-admin .sidebar-rail-toggle {
    width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-soft); background: rgba(124, 58, 237, .07); color: var(--text-muted); cursor: pointer;
    transition: color .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
[data-theme="dark"] body.area-admin .sidebar-rail-toggle { background: rgba(255, 255, 255, .04); }
body.area-admin .sidebar-rail-toggle:hover { color: var(--adm-violet); border-color: rgba(124, 58, 237, .45); box-shadow: 0 0 12px rgba(124, 58, 237, .22); }
body.area-admin .sidebar-rail-toggle:focus-visible { outline: 2px solid var(--adm-cyan); outline-offset: 2px; }
body.area-admin .sidebar-rail-toggle .bi { transition: transform .25s var(--ease-out); font-size: .9rem; }
[data-sidebar="collapsed"] body.area-admin .sidebar-rail-toggle .bi { transform: rotate(180deg); }
[data-sidebar="collapsed"] body.area-admin .sidebar-rail-head { justify-content: center; padding-left: 0; padding-right: 0; }

/* ════════════════════════════════════════════════════════════════════════
   SHELL · Floating command navbar + search pill + theme switch
   ════════════════════════════════════════════════════════════════════════ */
body.area-admin .top-nav { border-radius: 0 0 18px 18px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
[data-theme="dark"] body.area-admin .top-nav {
    background: linear-gradient(180deg, rgba(16, 12, 40, .82), rgba(8, 8, 22, .62));
    border-bottom: 1px solid rgba(124, 58, 237, .16); box-shadow: 0 12px 34px -14px var(--adm-glow-violet);
}
body.area-admin .navbar-brand i {
    width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--adm-violet), var(--adm-cyan)); color: #fff !important; font-size: .9rem;
    box-shadow: 0 4px 14px -2px var(--adm-glow-violet);
}
body.area-admin .cp-nav-btn {
    width: clamp(170px, 22vw, 340px); justify-content: flex-start !important; gap: .55rem !important;
    background: var(--surface-bg-2) !important; border: 1px solid var(--border-soft) !important; color: var(--text-muted) !important;
    border-radius: 12px !important; padding: .42rem .8rem !important; margin-left: .35rem;
    transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out) !important;
}
[data-theme="dark"] body.area-admin .cp-nav-btn { background: rgba(255, 255, 255, .04) !important; border-color: rgba(124, 58, 237, .18) !important; }
body.area-admin .cp-nav-btn:hover { color: var(--text-main) !important; border-color: rgba(124, 58, 237, .5) !important; background: var(--surface-card) !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12) !important; }
body.area-admin .cp-nav-btn:focus-visible { outline: 2px solid var(--adm-cyan) !important; outline-offset: 2px; }
body.area-admin .cp-nav-btn .bi { color: var(--adm-violet); }
body.area-admin .cp-nav-btn kbd { margin-left: auto !important; background: rgba(124, 58, 237, .12) !important; border: 1px solid rgba(124, 58, 237, .25) !important; color: var(--adm-violet) !important; }
body.area-admin #theme-toggle {
    position: relative; width: 50px; height: 26px; padding: 0; border-radius: 999px;
    border: 1px solid var(--border-soft); background: var(--surface-bg-2); flex-shrink: 0;
    transition: background .22s var(--ease-out), border-color .22s var(--ease-out);
}
body.area-admin #theme-toggle:hover { border-color: rgba(124, 58, 237, .5); }
body.area-admin #theme-toggle:focus-visible { outline: 2px solid var(--adm-cyan); outline-offset: 2px; }
[data-theme="dark"] body.area-admin #theme-toggle { background: linear-gradient(135deg, rgba(124, 58, 237, .4), rgba(6, 182, 212, .22)); border-color: rgba(124, 58, 237, .45); }
body.area-admin #theme-toggle #theme-toggle-icon {
    position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    font-size: .66rem; line-height: 1; transition: left .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
[data-theme="dark"] body.area-admin #theme-toggle #theme-toggle-icon { left: calc(100% - 23px); box-shadow: 0 0 10px rgba(124, 58, 237, .7), 0 2px 6px rgba(0, 0, 0, .3); }
@media (min-width: 992px) {
    body.area-admin .top-nav { margin: .6rem .8rem 0; top: .6rem; border-radius: 16px; border: 1px solid rgba(124, 58, 237, .18); box-shadow: 0 14px 36px -16px var(--adm-glow-violet); }
    [data-theme="dark"] body.area-admin .top-nav { border-color: rgba(124, 58, 237, .22); box-shadow: 0 16px 40px -16px var(--adm-glow-violet); }
    body.area-admin .sidebar { top: calc(var(--topnav-h) + 1.1rem); height: calc(100vh - var(--topnav-h) - 1.1rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   PRIMITIVES · cards, stats, tables, empty states, pagination, inputs
   These retone the SHARED .adm-* classes used across all admin pages.
   ════════════════════════════════════════════════════════════════════════ */
body.area-admin .adm-stat, body.area-admin .adm-card { border-radius: 18px; }
[data-theme="dark"] body.area-admin .adm-stat,
[data-theme="dark"] body.area-admin .adm-card {
    background: linear-gradient(160deg, rgba(22, 18, 48, .62), rgba(10, 12, 28, .6));
    border: 1px solid rgba(124, 58, 237, .12);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
}
[data-theme="dark"] body.area-admin .adm-stat:hover {
    border-color: rgba(124, 58, 237, .3); box-shadow: 0 16px 40px -16px var(--adm-glow-violet); transform: translateY(-3px);
}
[data-theme="dark"] body.area-admin .adm-card:hover { border-color: rgba(124, 58, 237, .22); }
body.area-admin .adm-stat-icon { box-shadow: 0 6px 18px -8px currentColor; }

/* Data-grid feel: stronger header + row hover glow */
[data-theme="dark"] body.area-admin .adm-table thead th { background: rgba(124, 58, 237, .06); }
body.area-admin .adm-table tbody tr:hover {
    background: rgba(124, 58, 237, .06);
    border-left-color: var(--adm-violet);
    box-shadow: inset 0 0 24px -12px var(--adm-glow-violet);
}
[data-theme="dark"] body.area-admin .adm-table tbody tr:hover { background: rgba(124, 58, 237, .1); }

/* Empty states — premium */
[data-theme="dark"] body.area-admin .adm-empty-state { background: linear-gradient(160deg, rgba(22, 18, 48, .4), rgba(10, 12, 28, .5)); }
body.area-admin .adm-empty-state .adm-empty-icon { box-shadow: 0 0 24px rgba(124, 58, 237, .14); }

/* Pagination + search input */
body.area-admin .adm-pagination .page-item.active .page-link { box-shadow: 0 6px 16px -6px var(--adm-glow-violet); }
body.area-admin .adm-search-input:focus { box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); }

/* Status chips (soft badges) — crisper borders for the command-center look */
body.area-admin .badge-soft { border-width: 1px; font-weight: 700; letter-spacing: .01em; }

/* ════════════════════════════════════════════════════════════════════════
   Accessibility · reduced motion
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body.area-admin .sidebar .nav-link,
    body.area-admin .sidebar .nav-link i,
    body.area-admin .adm-stat,
    body.area-admin .adm-card,
    body.area-admin .adm-table tbody tr { transition: none !important; }

    .auth-btn-spinner,
    .auth-loading-spinner,
    .google-login-loader { animation: none !important; }
}


/* ============================================================================
   ===== Admin Phase 2 · Identity & Access Center (UserManagement/Index) =====
   Scoped under body.area-admin. Hero header + real-count KPI row + enterprise
   filter bar + Joined column. Reuses the shared .adm-stat primitive.
   ========================================================================== */
body.area-admin .adm-hero { margin-bottom: 1.25rem; }
body.area-admin .adm-hero-title {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 900; letter-spacing: -.4px;
    margin: 0 0 .25rem; color: var(--text-main); display: inline-flex; align-items: center; gap: .6rem;
}
body.area-admin .adm-hero-title .bi {
    font-size: .95em;
    background: linear-gradient(135deg, var(--adm-violet), var(--adm-cyan));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.area-admin .adm-hero-sub { font-size: .9rem; color: var(--text-muted); margin: 0; max-width: 64ch; }

body.area-admin .adm-kpi-row {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin-bottom: 1.25rem;
}
@media (max-width: 1199.98px) { body.area-admin .adm-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px)  { body.area-admin .adm-kpi-row { grid-template-columns: repeat(2, 1fr); } }
body.area-admin .adm-kpi-row .adm-stat { position: relative; overflow: hidden; padding: 1rem; }
body.area-admin .adm-kpi-row .adm-stat::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--adm-accent, var(--adm-violet)); opacity: .9;
}
body.area-admin .adm-kpi-row .adm-stat-icon { width: 40px; height: 40px; font-size: 1.05rem; }
body.area-admin .adm-kpi-row .adm-stat-value { font-size: 1.5rem; }
[data-theme="dark"] body.area-admin .adm-kpi-row .adm-stat:hover {
    border-color: color-mix(in srgb, var(--adm-accent) 40%, transparent);
    box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--adm-accent) 55%, transparent);
}

/* Enterprise filter bar */
body.area-admin .adm-filterbar {
    background: var(--surface-card); border: 1px solid var(--border-soft);
    border-radius: 14px; padding: .7rem .8rem;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
[data-theme="dark"] body.area-admin .adm-filterbar {
    background: linear-gradient(160deg, rgba(22, 18, 48, .5), rgba(10, 12, 28, .55));
    border-color: rgba(124, 58, 237, .12);
}
body.area-admin .adm-filterbar .form-select,
body.area-admin .adm-filterbar .form-control { border-radius: 10px; }

/* Joined column */
body.area-admin .adm-joined-val { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 767.98px) { body.area-admin .adm-col-joined { display: none; } }

/* Landing support CTA: keep the mail action crisp over its gradient in every state. */
.lp-contact-btn--primary,
.lp-contact-btn--primary:link,
.lp-contact-btn--primary:visited,
.lp-contact-btn--primary:hover,
.lp-contact-btn--primary:focus,
.lp-contact-btn--primary:focus-visible,
.lp-contact-btn--primary:active,
.lp-contact-btn--primary *,
.lp-contact-btn--primary i,
.lp-contact-btn--primary .bi,
.lp-contact-btn--primary span,
.lp-contact-btn--primary svg {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  opacity: 1 !important;
}

.lp-contact-btn--primary svg,
.lp-contact-btn--primary svg * {
  fill: currentColor;
  stroke: currentColor;
}

/* Shared password UX */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}
.password-field input {
  width: 100%;
  padding-right: 3.25rem !important;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: .25rem;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .78;
  transition: opacity .16s ease, color .16s ease, box-shadow .16s ease;
}
.password-toggle:hover {
  opacity: 1;
  color: var(--text-main);
}
.password-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .22);
}
.password-toggle i {
  font-size: 1.05rem;
  pointer-events: none;
}
.password-strength,
.password-match {
  display: grid;
  gap: .3rem;
  min-height: 1.1rem;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 800;
}
.password-strength-bar {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .25);
}
.password-strength-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  transition: width .18s ease, background-color .18s ease;
}
.password-strength.is-weak .password-strength-bar span { background: #dc2626; }
.password-strength.is-medium .password-strength-bar span { background: #f97316; }
.password-strength.is-strong .password-strength-bar span { background: #16a34a; }
.password-strength.is-very-strong .password-strength-bar span { background: #2563eb; }
.password-strength.is-weak .password-strength-text { color: #dc2626; }
.password-strength.is-medium .password-strength-text { color: #f97316; }
.password-strength.is-strong .password-strength-text { color: #16a34a; }
.password-strength.is-very-strong .password-strength-text { color: #2563eb; }
.password-match.is-match { color: #16a34a; }
.password-match.is-mismatch { color: #dc2626; }

/* CampusFlow certificate */
.certificate-detail-page {
  --cf-navy: #0F2747;
  --cf-gold: #C8A86B;
  --cf-ink: #243247;
  --cf-muted: #697386;
  background: #f4f6f8;
  min-height: 100vh;
  padding: 2rem 1rem 3rem;
}
.certificate-actions {
  max-width: 1120px;
  margin: 0 auto 1rem;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}
.cf-certificate {
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  aspect-ratio: 1.414 / 1;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
  border: 2px solid var(--cf-navy);
  box-shadow: 0 20px 60px rgba(15, 39, 71, .08);
  color: var(--cf-ink);
}
.cf-certificate::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px solid var(--cf-gold);
  pointer-events: none;
}
.cf-watermark {
  position: absolute;
  right: 7%;
  top: 20%;
  font-size: clamp(8rem, 22vw, 15rem);
  line-height: 1;
  font-weight: 900;
  color: rgba(15, 39, 71, .04);
}
.cf-cert-header,
.cf-cert-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.cf-brand {
  grid-column: 2;
  text-align: center;
  color: var(--cf-navy);
}
.cf-brand strong {
  display: block;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  letter-spacing: 0;
}
.cf-brand span,
.cf-cert-id span {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
}
.cf-cert-id {
  grid-column: 3;
  justify-self: end;
  text-align: right;
  color: var(--cf-navy);
}
.cf-cert-id strong {
  font-size: clamp(.75rem, 1.3vw, 1rem);
}
.cf-cert-title {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: clamp(.6rem, 2vw, 1.3rem);
  color: var(--cf-navy);
}
.cf-cert-title i {
  color: var(--cf-gold);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}
.cf-cert-title h1 {
  margin: .35rem 0 0;
  font-size: clamp(2rem, 5vw, 4.1rem);
  font-weight: 800;
  letter-spacing: .18em;
}
.cf-cert-title p {
  margin: 0;
  color: var(--cf-gold);
  font-weight: 700;
  letter-spacing: .38em;
}
.cf-cert-body {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: clamp(.8rem, 2vw, 1.4rem) auto 0;
}
.cf-cert-body p {
  margin: .45rem 0;
  color: var(--cf-muted);
  font-size: clamp(.82rem, 1.5vw, 1.08rem);
}
.cf-cert-body h2 {
  margin: .25rem 0;
  color: var(--cf-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
}
.cf-gold-rule {
  display: block;
  width: 82px;
  height: 2px;
  margin: .35rem auto .65rem;
  background: var(--cf-gold);
}
.cf-course-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: .7rem auto;
  padding: clamp(.7rem, 1.6vw, 1rem) 1.4rem;
  max-width: 620px;
  background: #f2f5f8;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: var(--cf-navy);
}
.cf-course-block i {
  color: var(--cf-navy);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
}
.cf-course-block strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
}
.cf-description {
  max-width: 620px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cf-meta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 780px;
  margin: clamp(.75rem, 2vw, 1.4rem) auto 0;
}
.cf-meta div {
  padding: 0 .8rem;
  text-align: center;
  border-right: 1px solid #d8c8a8;
}
.cf-meta div:last-child {
  border-right: 0;
}
.cf-meta dt {
  color: var(--cf-muted);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cf-meta dd {
  margin: .2rem 0 0;
  color: var(--cf-navy);
  font-weight: 700;
  font-size: clamp(.72rem, 1.35vw, 1rem);
}
.cf-cert-footer {
  margin-top: clamp(.8rem, 2vw, 1.5rem);
  align-items: end;
}
.cf-signature {
  color: var(--cf-navy);
}
.cf-signature strong {
  display: block;
  width: 180px;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--cf-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-style: italic;
  font-weight: 400;
}
.cf-signature span,
.cf-signature em,
.cf-verify strong,
.cf-verify a {
  display: block;
  font-size: .75rem;
}
.cf-signature span,
.cf-verify strong {
  margin-top: .35rem;
  color: var(--cf-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cf-signature em {
  color: var(--cf-navy);
  font-style: normal;
  font-weight: 700;
}
.cf-seal {
  justify-self: center;
  width: clamp(70px, 10vw, 92px);
  height: clamp(70px, 10vw, 92px);
  border: 1px solid var(--cf-gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cf-navy);
  background: #fff;
  padding: .65rem;
}
.cf-seal span,
.cf-seal small {
  font-size: clamp(.38rem, .8vw, .52rem);
  letter-spacing: .12em;
}
.cf-seal strong {
  font-size: clamp(1.2rem, 2.8vw, 2rem);
}
.cf-verify {
  justify-self: end;
  text-align: right;
  color: var(--cf-navy);
}
.cf-qr {
  margin-left: auto;
  width: clamp(52px, 7vw, 76px);
  height: clamp(52px, 7vw, 76px);
  border: 1px solid var(--cf-navy);
  display: grid;
  place-items: center;
  font-size: clamp(2rem, 5vw, 3.6rem);
  background: #fff;
}
.cf-verify a {
  color: var(--cf-navy);
  text-decoration: none;
}
.certificate-verify-page {
  min-height: 100vh;
  padding: 4rem 1rem;
  background: #f5f7fa;
}
.certificate-verify-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
  border: 1px solid #d8c8a8;
  border-top: 5px solid #0F2747;
  color: #243247;
}
.certificate-verify-brand {
  color: #0F2747;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.certificate-status {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
.certificate-status.valid {
  color: #14532d;
  background: #dcfce7;
}
.certificate-status.invalid {
  color: #7f1d1d;
  background: #fee2e2;
}
.certificate-verify-shell h1 {
  color: #0F2747;
  margin: 1rem 0 1.5rem;
}
.certificate-verify-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}
.certificate-verify-grid div {
  padding: 1rem;
  border: 1px solid #e5e7eb;
}
.certificate-verify-grid dt {
  color: #697386;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.certificate-verify-grid dd {
  margin: .3rem 0 0;
  color: #0F2747;
  font-weight: 700;
}
@media (max-width: 720px) {
  .certificate-detail-page {
    padding-inline: .5rem;
  }
  .cf-certificate {
    padding: 1rem;
  }
  .cf-meta {
    grid-template-columns: repeat(2, 1fr);
    row-gap: .5rem;
  }
  .cf-meta div:nth-child(2) {
    border-right: 0;
  }
  .certificate-verify-grid {
    grid-template-columns: 1fr;
  }
}
@media print {
  .certificate-actions {
    display: none;
  }
  .certificate-detail-page {
    background: #fff;
    padding: 0;
  }
  .cf-certificate {
    box-shadow: none;
    max-width: none;
  }
}