/* ═══════════════════════════════════════════════════════════════════════
   Trainly Modern Theme  —  v3.0  (ERPNext / WorkDo DRY architecture)

   STRUCTURE
   ─────────
   §1   Tokens — Light  [data-theme="modern"]
   §2   Tokens — Dark   [data-theme="modern-dark"]
   §3   Bootstrap CSS variable overrides (light)
   §4   Bootstrap CSS variable overrides (dark)
   §5+  Components — written ONCE using
        [data-theme="modern"], [data-theme="modern-dark"] { … }
        Tokens do the colour work; only truly diverging visuals are split.

   Zero effect on Default theme — every rule is scoped.
═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   §1  DESIGN TOKENS — Light
══════════════════════════════════════════════════════════ */
[data-theme="modern"] {
  /* Brand */
  --brand-primary:       #5b21b6;
  --brand-primary-dark:  #4c1d95;
  --brand-primary-light: #ede9fe;
  --brand-success:       #059669;
  --brand-warning:       #d97706;
  --brand-danger:        #dc2626;
  --brand-info:          #4f46e5;

  /* Surfaces */
  --surface-page:    #f5f4ff;
  --surface-card:    #ffffff;
  --surface-raised:  #ffffff;
  --surface-input:   #fdfcff;
  --surface-subtle:  #f5f3ff;
  --surface-muted:   #ede9fe;
  --surface-overlay: #ffffff;
  --surface-view:    #f5f3ff;

  /* Identity */
  --identity-bg:   #ede9fe;
  --identity-text: #4c1d95;

  /* Borders */
  --border-default: #e4e0f8;
  --border-subtle:  #ede9fe;
  --border-strong:  #c4b5fd;
  --border-brand:   #7c3aed;
  --border-focus:   #7c3aed;

  /* Text */
  --text-primary:        #111827;
  --text-secondary:      #4b5563;
  --text-muted:          #9ca3af;
  --text-inverse:        #ffffff;
  --text-link:           #5b21b6;
  --text-on-brand:       #ffffff;
  --text-heading-accent: #1e1b4b;
  --label-accent:        #5b21b6;

  /* Radii */
  --radius-xs:   0.25rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.625rem;
  --radius-xl:   0.875rem;
  --radius-2xl:    1.125rem;
  --radius-pill:   50rem;
  --radius-card:   1.125rem;
  --radius-button: 0.625rem;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:    0 8px 20px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl:    0 16px 36px rgba(0,0,0,.10), 0 6px 12px rgba(0,0,0,.05);
  --shadow-2xl:   0 24px 52px rgba(0,0,0,.12);
  --shadow-focus: 0 0 0 3px rgba(91,33,182,.22);

  /* Nav */
  --navbar-bg:       #5b21b6;
  --navbar-border:   #4c1d95;
  --sidebar-bg:      #ffffff;
  --sidebar-border:  #e4e0f8;
  --sidebar-link:    #374151;
  --sidebar-link-hover-bg: var(--surface-subtle);
  --sidebar-link-hover-color: var(--brand-primary);
  --sidebar-active-bg: var(--brand-primary-light);
  --sidebar-active-color: var(--brand-primary);
  --sidebar-active-border: var(--brand-primary);

  /* Table */
  --table-head-bg:   #f5f3ff;
  --table-head-text: #4c1d95;
  --table-hover-bg:  var(--surface-subtle);

  /* Section accent stripe */
  --section-accent: #a78bfa;
}

/* ══════════════════════════════════════════════════════════
   §2  DESIGN TOKENS — Dark
══════════════════════════════════════════════════════════ */
[data-theme="modern-dark"] {
  --brand-primary:       #8b5cf6;
  --brand-primary-dark:  #7c3aed;
  --brand-primary-light: rgba(139,92,246,.20);
  --brand-success:       #10b981;
  --brand-warning:       #f59e0b;
  --brand-danger:        #f43f5e;
  --brand-info:          #818cf8;

  --surface-page:    #0f0e18;
  --surface-card:    #1a1827;
  --surface-raised:  #201e30;
  --surface-input:   #17152a;
  --surface-subtle:  #15132a;
  --surface-muted:   #201e30;
  --surface-overlay: #1a1827;
  --surface-view:    #15132a;

  --identity-bg:   #201e30;
  --identity-text: #c4b5fd;

  --border-default: #2a2740;
  --border-subtle:  #231f38;
  --border-strong:  #3b3760;
  --border-brand:   #8b5cf6;
  --border-focus:   #8b5cf6;

  --text-primary:        #f1f5f9;
  --text-secondary:      #cbd5e1;
  --text-muted:          #64748b;
  --text-inverse:        #0f172a;
  --text-link:           #a78bfa;
  --text-on-brand:       #ffffff;
  --text-heading-accent: #c4b5fd;
  --label-accent:        #a78bfa;

  --radius-xs:   0.25rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.625rem;
  --radius-xl:   0.875rem;
  --radius-2xl:    1.125rem;
  --radius-pill:   50rem;
  --radius-card:   1.125rem;
  --radius-button: 0.625rem;

  --shadow-xs:    0 1px 2px rgba(0,0,0,.40);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
  --shadow-md:    0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.25);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.30);
  --shadow-xl:    0 16px 40px rgba(0,0,0,.60);
  --shadow-2xl:   0 24px 52px rgba(0,0,0,.65);
  --shadow-focus: 0 0 0 3px rgba(139,92,246,.35);

  --navbar-bg:       #3b0764;
  --navbar-border:   #4c1d95;
  --sidebar-bg:      #1a1827;
  --sidebar-border:  #2a2740;
  --sidebar-link:    #94a3b8;
  --sidebar-link-hover-bg: rgba(139,92,246,.10);
  --sidebar-link-hover-color: #c4b5fd;
  --sidebar-active-bg: rgba(139,92,246,.18);
  --sidebar-active-color: #c4b5fd;
  --sidebar-active-border: #8b5cf6;

  --table-head-bg:   #15132a;
  --table-head-text: #c4b5fd;
  --table-hover-bg:  rgba(139,92,246,.10);

  --section-accent: #6d28d9;
}

/* ══════════════════════════════════════════════════════════
   §3  BOOTSTRAP CSS VAR OVERRIDES — Light
══════════════════════════════════════════════════════════ */
[data-theme="modern"] {
  --bs-body-bg:                    #f5f4ff;
  --bs-body-color:                 #111827;
  --bs-border-color:               #e4e0f8;
  --bs-border-radius:              0.5rem;
  --bs-border-radius-sm:           0.375rem;
  --bs-border-radius-lg:           0.625rem;
  --bs-border-radius-xl:           0.875rem;
  --bs-border-radius-2xl:          1.125rem;
  --bs-border-radius-pill:         50rem;
  --bs-primary-rgb:                91,33,182;
  --bs-link-color:                 #5b21b6;
  --bs-link-hover-color:           #4c1d95;
  --bs-card-border-radius:         1.125rem;
  --bs-card-border-color:          #e4e0f8;
  --bs-card-bg:                    #ffffff;
  --bs-card-cap-bg:                #f5f3ff;
  --bs-modal-bg:                   #ffffff;
  --bs-modal-border-color:         #e4e0f8;
  --bs-input-focus-border-color:   #7c3aed;
  --bs-input-focus-box-shadow:     0 0 0 3px rgba(91,33,182,.22);
  --bs-table-hover-bg:             #ede9fe;
  --bs-table-striped-bg:           rgba(245,243,255,.55);
  --bs-nav-pills-link-active-bg:   #5b21b6;
  --bs-list-group-active-bg:       #5b21b6;
  --bs-pagination-active-bg:       #5b21b6;
  --bs-pagination-active-border:   #5b21b6;
  --bs-progress-bar-bg:            #5b21b6;
  --bs-tooltip-bg:                 #1e1b4b;
  --bs-accordion-active-bg:        #ede9fe;
  --bs-accordion-active-color:     #5b21b6;
  --bs-dropdown-link-active-bg:    #5b21b6;
}

/* ══════════════════════════════════════════════════════════
   §4  BOOTSTRAP CSS VAR OVERRIDES — Dark
══════════════════════════════════════════════════════════ */
[data-theme="modern-dark"] {
  --bs-body-bg:               #0f0e18;
  --bs-body-color:            #f1f5f9;
  --bs-border-color:          #2a2740;
  --bs-card-bg:               #1a1827;
  --bs-card-cap-bg:           #17152a;
  --bs-card-border-color:     #2a2740;
  --bs-modal-bg:              #1a1827;
  --bs-modal-border-color:    #2a2740;
  --bs-dropdown-bg:           #1a1827;
  --bs-dropdown-border-color: #2a2740;
  --bs-list-group-bg:         #1a1827;
  --bs-list-group-border-color:#231f38;
  --bs-accordion-bg:          #1a1827;
  --bs-accordion-border-color:#2a2740;
  --bs-pagination-bg:         #1a1827;
  --bs-pagination-border-color:#2a2740;
  --bs-offcanvas-bg:          #1a1827;
  --bs-popover-bg:            #1a1827;
  --bs-progress-bg:           #2a2740;
  --bs-link-color:            #a78bfa;
}

/* ══════════════════════════════════════════════════════════
   §5  BASE — body & typography
══════════════════════════════════════════════════════════ */
[data-theme="modern"],
[data-theme="modern-dark"] {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
}

[data-theme="modern"] body,
[data-theme="modern-dark"] body {
  background-color: var(--surface-page);
  color: var(--text-primary);
}

[data-theme="modern"] h1, [data-theme="modern"] h2,
[data-theme="modern"] h3, [data-theme="modern"] h4, [data-theme="modern"] h5,
[data-theme="modern-dark"] h1, [data-theme="modern-dark"] h2,
[data-theme="modern-dark"] h3, [data-theme="modern-dark"] h4, [data-theme="modern-dark"] h5 {
  color: var(--text-heading-accent);
  letter-spacing: -0.018em;
}

/* ══════════════════════════════════════════════════════════
   §6  NAVBAR  (top bar) — purple in both themes
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .navbar-custom,
[data-theme="modern-dark"] .navbar-custom {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}

/* Navbar chrome → white. NOTE: do NOT list .navbar-custom itself here —
   color is inherited so putting it on the container bleeds into dropdown panels. */
[data-theme="modern"] .navbar-custom .nav-link,
[data-theme="modern"] .navbar-custom .navbar-brand,
[data-theme="modern"] .navbar-custom .navbar-text,
[data-theme="modern"] .navbar-custom .btn-link,
[data-theme="modern-dark"] .navbar-custom .nav-link,
[data-theme="modern-dark"] .navbar-custom .navbar-brand,
[data-theme="modern-dark"] .navbar-custom .navbar-text,
[data-theme="modern-dark"] .navbar-custom .btn-link {
  color: rgba(255,255,255,.92) !important;
}
/* Navbar chrome SVGs → white; dropdown-menu SVGs override to dark via higher specificity */
[data-theme="modern"] .navbar-custom svg,
[data-theme="modern-dark"] .navbar-custom svg { color: rgba(255,255,255,.85) !important; stroke: rgba(255,255,255,.85) !important; }
[data-theme="modern"] .navbar-custom .dropdown-menu svg,
[data-theme="modern-dark"] .navbar-custom .dropdown-menu svg { color: var(--text-secondary) !important; stroke: var(--text-secondary) !important; }
[data-theme="modern"] .navbar-custom .nav-link:hover,
[data-theme="modern-dark"] .navbar-custom .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.12) !important; border-radius: var(--radius-md) !important; }
[data-theme="modern"] .navbar-custom .nav-link.active,
[data-theme="modern-dark"] .navbar-custom .nav-link.active { color: #fff !important; background: rgba(255,255,255,.18) !important; }

/* Icon buttons inside navbar */
[data-theme="modern"] .navbar-custom .btn-icon,
[data-theme="modern-dark"] .navbar-custom .btn-icon { color: rgba(255,255,255,.85) !important; background: transparent !important; border-color: transparent !important; }
[data-theme="modern"] .navbar-custom .btn-icon:hover,
[data-theme="modern-dark"] .navbar-custom .btn-icon:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; border-radius: var(--radius-md) !important; }

/* Shared navbar elements */
[data-theme="modern"] .navbar-custom .dropdown-menu,
[data-theme="modern-dark"] .navbar-custom .dropdown-menu {
  background: var(--surface-overlay) !important;
  border-color: var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-theme="modern"] .navbar-custom .dropdown-menu .dropdown-item,
[data-theme="modern-dark"] .navbar-custom .dropdown-menu .dropdown-item {
  color: var(--text-primary) !important;
}

[data-theme="modern"] .navbar-custom .dropdown-menu .dropdown-item:hover,
[data-theme="modern-dark"] .navbar-custom .dropdown-menu .dropdown-item:hover {
  background: var(--surface-subtle) !important;
  color: var(--brand-primary) !important;
}

[data-theme="modern"] .notification-dot,  [data-theme="modern"] .notif-badge,
[data-theme="modern-dark"] .notification-dot, [data-theme="modern-dark"] .notif-badge {
  background: var(--brand-primary) !important;
  border-radius: var(--radius-pill) !important;
}
[data-theme="modern"] .notification-dot,
[data-theme="modern-dark"] .notification-dot { border: 2px solid var(--navbar-bg) !important; }

[data-theme="modern"] .navbar-custom .badge,
[data-theme="modern-dark"] .navbar-custom .badge {
  border-radius: var(--radius-pill) !important;
}

[data-theme="modern"] .cp-navbar { background: #ffffff !important; border-bottom: 1px solid #e4e0f8 !important; }
[data-theme="modern-dark"] .cp-navbar { background: #1a1827 !important; border-bottom: 1px solid #2a2740 !important; }

/* Theme switcher pills */
.trainly-nba-theme-btn { border: none; background: transparent; border-radius: var(--radius-pill,50rem); padding: 3px 9px; font-size:.72rem; font-weight:600; color:#6b7280; cursor:pointer; transition:background .15s,color .15s; }
.trainly-nba-theme-btn.active-modern { background:linear-gradient(135deg,#5b21b6,#8b5cf6); color:#fff; }
[data-theme="modern"] .trainly-nba-theme-btn { color:var(--text-muted) !important; }
[data-theme="modern"] .trainly-nba-theme-btn.active-modern,
[data-theme="modern-dark"] .trainly-nba-theme-btn.active-modern { background:linear-gradient(135deg,#5b21b6,#8b5cf6) !important; color:#fff !important; }

/* ══════════════════════════════════════════════════════════
   §7  SIDEBAR
   Split: light = white / dark = navy  (different enough to split)
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .sidebar,
[data-theme="modern"] .admin-sidebar,
[data-theme="modern"] .cp-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: 1px 0 4px rgba(91,33,182,.04) !important;
}

[data-theme="modern-dark"] .sidebar,
[data-theme="modern-dark"] .admin-sidebar,
[data-theme="modern-dark"] .cp-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}

/* Section labels — same in both, tokens handle color */
[data-theme="modern"] .nav-section-title,
[data-theme="modern-dark"] .nav-section-title {
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  padding-left: 1rem !important;
  margin-top: 1.25rem !important;
}

/* Nav links — ONE rule, tokens colour them */
[data-theme="modern"] .cp-sidebar .nav-link,
[data-theme="modern"] .sidebar .nav-link,
[data-theme="modern-dark"] .cp-sidebar .nav-link,
[data-theme="modern-dark"] .sidebar .nav-link {
  color: var(--sidebar-link) !important;
  border-radius: var(--radius-md) !important;
  margin: 1px 8px !important;
  padding: .45rem .85rem !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  border-left: 3px solid transparent !important;
  transition: background .15s, color .15s;
}

[data-theme="modern"] .cp-sidebar .nav-link:hover,
[data-theme="modern"] .sidebar .nav-link:hover,
[data-theme="modern-dark"] .cp-sidebar .nav-link:hover,
[data-theme="modern-dark"] .sidebar .nav-link:hover {
  background: var(--sidebar-link-hover-bg) !important;
  color: var(--sidebar-link-hover-color) !important;
}

[data-theme="modern"] .cp-sidebar .nav-link.active,
[data-theme="modern"] .sidebar .nav-link.active,
[data-theme="modern-dark"] .cp-sidebar .nav-link.active,
[data-theme="modern-dark"] .sidebar .nav-link.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-color) !important;
  font-weight: 600 !important;
  border-left-color: var(--sidebar-active-border) !important;
}

/* ══════════════════════════════════════════════════════════
   §8  MOBILE / BOTTOM NAV BARS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .mobile-bottom-nav,
[data-theme="modern"] .parent-bottom-nav {
  background: rgba(255,255,255,.97) !important;
  border-top: 1px solid #e4e0f8 !important;
  box-shadow: 0 -2px 12px rgba(91,33,182,.07) !important;
}

[data-theme="modern-dark"] .mobile-bottom-nav,
[data-theme="modern-dark"] .parent-bottom-nav {
  background: rgba(26,24,39,.97) !important;
  border-top: 1px solid #2a2740 !important;
}

[data-theme="modern"] .mobile-bottom-nav a.active,
[data-theme="modern"] .parent-bottom-nav a.active,
[data-theme="modern-dark"] .mobile-bottom-nav a.active,
[data-theme="modern-dark"] .parent-bottom-nav a.active {
  color: var(--brand-primary) !important;
  background: var(--brand-primary-light) !important;
}

/* Hub & Dev navbars */
[data-theme="modern"] .hub-navbar,
[data-theme="modern"] .dev-navbar {
  background: linear-gradient(135deg,#1e1b4b,#2d1b69) !important;
}

[data-theme="modern"] .hub-nav-link       { color: rgba(255,255,255,.65); }
[data-theme="modern"] .hub-nav-link:hover { color: #ede9fe; background: rgba(255,255,255,.08); }
[data-theme="modern"] .hub-nav-link.active{ color: #c4b5fd; background: rgba(255,255,255,.1); }

/* ══════════════════════════════════════════════════════════
   §9  PAGE SHELL
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .main-content,   [data-theme="modern-dark"] .main-content,
[data-theme="modern"] .content-wrapper,[data-theme="modern-dark"] .content-wrapper,
[data-theme="modern"] .page-wrapper,   [data-theme="modern-dark"] .page-wrapper,
[data-theme="modern"] .cp-content,     [data-theme="modern-dark"] .cp-content,
[data-theme="modern"] .cp-content-area,[data-theme="modern-dark"] .cp-content-area {
  background: var(--surface-page) !important;
}

[data-theme="modern"] footer,
[data-theme="modern"] footer.bg-light,
[data-theme="modern-dark"] footer,
[data-theme="modern-dark"] footer.bg-light {
  background: var(--surface-subtle) !important;
  border-top: 1px solid var(--border-default) !important;
  color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════
   §10  PAGE HEADER & BREADCRUMB
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .page-header,
[data-theme="modern-dark"] .page-header {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="modern"] .page-header-title,
[data-theme="modern-dark"] .page-header-title {
  color: var(--text-heading-accent) !important;
  font-weight: 700;
}

[data-theme="modern"] .breadcrumb-item a,
[data-theme="modern"] .page-header-inner a,
[data-theme="modern-dark"] .breadcrumb-item a,
[data-theme="modern-dark"] .page-header-inner a {
  color: var(--brand-primary) !important;
}

[data-theme="modern"] .breadcrumb-item.active,
[data-theme="modern-dark"] .breadcrumb-item.active {
  color: var(--text-muted) !important;
}

[data-theme="modern"] .breadcrumb-item + .breadcrumb-item::before,
[data-theme="modern-dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════
   §11  BUTTONS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .btn,
[data-theme="modern-dark"] .btn {
  border-radius: var(--radius-lg) !important;
  font-weight: 500;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
[data-theme="modern"] .btn-sm, [data-theme="modern-dark"] .btn-sm { border-radius: var(--radius-md) !important; }
[data-theme="modern"] .btn-lg, [data-theme="modern-dark"] .btn-lg { border-radius: var(--radius-xl) !important; }

[data-theme="modern"] .btn-primary,
[data-theme="modern-dark"] .btn-primary {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(91,33,182,.25);
}
[data-theme="modern"] .btn-primary:hover, [data-theme="modern"] .btn-primary:focus,
[data-theme="modern-dark"] .btn-primary:hover, [data-theme="modern-dark"] .btn-primary:focus {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(91,33,182,.35) !important;
  transform: translateY(-1px);
}

[data-theme="modern"] .btn-secondary,
[data-theme="modern-dark"] .btn-secondary {
  background: var(--surface-muted) !important;
  border-color: var(--border-default) !important;
  color: var(--brand-primary-dark) !important;
}
[data-theme="modern"] .btn-secondary:hover,
[data-theme="modern-dark"] .btn-secondary:hover {
  background: var(--border-default) !important;
}

[data-theme="modern"] .btn-outline-primary,
[data-theme="modern-dark"] .btn-outline-primary {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}
[data-theme="modern"] .btn-outline-primary:hover,
[data-theme="modern-dark"] .btn-outline-primary:hover {
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary-dark) !important;
}

[data-theme="modern"] .btn-outline-secondary,
[data-theme="modern-dark"] .btn-outline-secondary {
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
[data-theme="modern"] .btn-outline-secondary:hover,
[data-theme="modern-dark"] .btn-outline-secondary:hover {
  background: var(--surface-subtle) !important;
  color: var(--text-primary) !important;
}

[data-theme="modern"] .btn-danger,
[data-theme="modern-dark"] .btn-danger {
  background: var(--brand-danger) !important;
  border-color: var(--brand-danger) !important;
}

[data-theme="modern"] .btn-outline-danger,
[data-theme="modern-dark"] .btn-outline-danger {
  color: var(--brand-danger) !important;
  border-color: var(--brand-danger) !important;
}
[data-theme="modern"] .btn-outline-danger:hover,
[data-theme="modern-dark"] .btn-outline-danger:hover {
  background: rgba(220,38,38,.08) !important;
}

[data-theme="modern"] .btn-success, [data-theme="modern-dark"] .btn-success {
  background: var(--brand-success) !important;
  border-color: var(--brand-success) !important;
}
[data-theme="modern"] .btn-warning, [data-theme="modern-dark"] .btn-warning {
  background: var(--brand-warning) !important;
  border-color: var(--brand-warning) !important;
}
[data-theme="modern"] .btn-info, [data-theme="modern-dark"] .btn-info {
  background: var(--brand-info) !important;
  border-color: var(--brand-info) !important;
}

[data-theme="modern"] .btn-brand,
[data-theme="modern-dark"] .btn-brand {
  background: linear-gradient(135deg,#5b21b6,#8b5cf6) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(91,33,182,.3);
}
[data-theme="modern"] .btn-brand:hover,
[data-theme="modern-dark"] .btn-brand:hover {
  background: linear-gradient(135deg,#4c1d95,#7c3aed) !important;
  box-shadow: 0 4px 14px rgba(91,33,182,.4) !important;
  transform: translateY(-1px);
}

[data-theme="modern"] .btn-icon,
[data-theme="modern-dark"] .btn-icon { border-radius: var(--radius-md) !important; }
[data-theme="modern"] .btn-icon:hover,
[data-theme="modern-dark"] .btn-icon:hover {
  background: var(--surface-muted) !important;
  color: var(--brand-primary) !important;
}

[data-theme="modern"] .btn-close,
[data-theme="modern-dark"] .btn-close { opacity: .55; }
[data-theme="modern"] .btn-close:hover,
[data-theme="modern-dark"] .btn-close:hover {
  background: var(--surface-muted) !important;
  opacity: 1;
  border-radius: var(--radius-sm);
}

[data-theme="modern"] .btn:focus-visible,
[data-theme="modern-dark"] .btn:focus-visible { box-shadow: var(--shadow-focus) !important; }

[data-theme="modern"] *:focus-visible,
[data-theme="modern-dark"] *:focus-visible { outline: none; box-shadow: var(--shadow-focus) !important; }

/* ══════════════════════════════════════════════════════════
   §12  CARDS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .card,
[data-theme="modern-dark"] .card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="modern"] .card:hover,
[data-theme="modern-dark"] .card:hover { box-shadow: var(--shadow-md) !important; }

[data-theme="modern"] .card-header,
[data-theme="modern-dark"] .card-header {
  background: var(--surface-subtle) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
  color: var(--text-heading-accent) !important;
}

[data-theme="modern"] .card-footer,
[data-theme="modern-dark"] .card-footer {
  background: var(--surface-subtle) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl) !important;
}

[data-theme="modern"] .card-glass,
[data-theme="modern"] .card-glass-26 {
  background: rgba(255,254,255,.88) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(228,224,248,.7) !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="modern-dark"] .card-glass,
[data-theme="modern-dark"] .card-glass-26 {
  background: rgba(26,24,39,.88) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(42,39,64,.8) !important;
}

[data-theme="modern"] .cp-card, [data-theme="modern-dark"] .cp-card,
[data-theme="modern"] .cp-stat-card, [data-theme="modern-dark"] .cp-stat-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════
   §13  FORM CONTROLS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .form-control,
[data-theme="modern"] .form-select,
[data-theme="modern-dark"] .form-control,
[data-theme="modern-dark"] .form-select {
  background-color: var(--surface-input) !important;
  border-color: var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  transition: border-color .15s, box-shadow .15s;
}
/* Restore chevron arrow — use :not([multiple]) to match Bootstrap specificity */
[data-theme="modern"] .form-select:not([multiple]):not([size]),
[data-theme="modern"] .form-select:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c3aed' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.5rem !important;
}
[data-theme="modern-dark"] .form-select:not([multiple]):not([size]),
[data-theme="modern-dark"] .form-select:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c4b5fd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.5rem !important;
}
[data-theme="modern"] .form-control:hover, [data-theme="modern"] .form-select:hover,
[data-theme="modern-dark"] .form-control:hover, [data-theme="modern-dark"] .form-select:hover {
  border-color: var(--border-strong) !important;
}
[data-theme="modern"] .form-control:focus, [data-theme="modern"] .form-select:focus,
[data-theme="modern-dark"] .form-control:focus, [data-theme="modern-dark"] .form-select:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  background-color: var(--surface-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="modern"] .form-control:disabled, [data-theme="modern"] .form-control[readonly],
[data-theme="modern"] .form-select:disabled,
[data-theme="modern-dark"] .form-control:disabled, [data-theme="modern-dark"] .form-control[readonly],
[data-theme="modern-dark"] .form-select:disabled {
  background: var(--surface-muted) !important;
  border-color: var(--border-default) !important;
  color: var(--text-muted) !important;
}
/* Date/time picker calendar icon — invisible in dark mode without this */
[data-theme="modern-dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="modern-dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.85);
  opacity: 0.8;
  cursor: pointer;
}
[data-theme="modern"] .form-control::placeholder,
[data-theme="modern-dark"] .form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }


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

[data-theme="modern"] .ui-field-label,
[data-theme="modern-dark"] .ui-field-label { color: var(--label-accent) !important; font-weight: 600; }

[data-theme="modern"] .form-control.is-valid,
[data-theme="modern-dark"] .form-control.is-valid { border-color: #10b981 !important; }
[data-theme="modern"] .valid-feedback,
[data-theme="modern-dark"] .valid-feedback { color: var(--brand-success) !important; }
[data-theme="modern"] .form-control.is-invalid,
[data-theme="modern-dark"] .form-control.is-invalid { border-color: var(--brand-danger) !important; }
[data-theme="modern"] .invalid-feedback,
[data-theme="modern-dark"] .invalid-feedback { color: var(--brand-danger) !important; }

[data-theme="modern"] .form-control-plaintext,
[data-theme="modern-dark"] .form-control-plaintext {
  background: var(--surface-view) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: .375rem .75rem;
  color: var(--text-primary) !important;
}

[data-theme="modern"] .input-group-text,
[data-theme="modern-dark"] .input-group-text {
  background: var(--surface-muted) !important;
  border-color: var(--border-default) !important;
  color: var(--label-accent) !important;
  border-radius: var(--radius-md) !important;
}

[data-theme="modern"] .form-section-heading,
[data-theme="modern-dark"] .form-section-heading {
  color: var(--text-heading-accent) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* ══════════════════════════════════════════════════════════
   §14  CHECKBOX, RADIO & TOGGLE SWITCH
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .form-check-input:not(:checked),
[data-theme="modern-dark"] .form-check-input:not(:checked) { border-color: var(--border-strong) !important; }

[data-theme="modern"] .form-check-input:checked,
[data-theme="modern-dark"] .form-check-input:checked {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

[data-theme="modern"] .form-check-input:focus,
[data-theme="modern-dark"] .form-check-input:focus { box-shadow: var(--shadow-focus) !important; }

/* iOS-style toggle — shared track styling */
[data-theme="modern"] .form-check.form-switch .form-check-input,
[data-theme="modern-dark"] .form-check.form-switch .form-check-input {
  width: 2.5em !important;
  height: 1.375em !important;
  border-radius: 2em !important;
  border: none !important;
  cursor: pointer;
  transition: background-color .2s ease, background-position .2s ease !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff' filter='drop-shadow(0 1px 2px rgba(0,0,0,.2))'/%3e%3c/svg%3e") !important;
  background-size: 1.1em 1.1em !important;
}
/* Off state — split because off-colour differs */
[data-theme="modern"] .form-check.form-switch .form-check-input:not(:checked) { background-color: #d1d5db !important; }
[data-theme="modern-dark"] .form-check.form-switch .form-check-input:not(:checked) { background-color: #374151 !important; }
/* On state */
[data-theme="modern"] .form-check.form-switch .form-check-input:checked,
[data-theme="modern-dark"] .form-check.form-switch .form-check-input:checked {
  background-color: var(--brand-primary) !important;
  background-position: right center !important;
}
[data-theme="modern"] .form-check.form-switch .form-check-input:focus,
[data-theme="modern-dark"] .form-check.form-switch .form-check-input:focus { box-shadow: var(--shadow-focus) !important; }

/* ══════════════════════════════════════════════════════════
   §15  SELECT2
══════════════════════════════════════════════════════════ */
/* Select2 inside Bootstrap input-group */
.input-group {
    flex-wrap: nowrap !important;
}
.input-group .select2-container {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 50px) !important;
}

[data-theme="modern"] .select2-container--bootstrap-5 .select2-selection,
[data-theme="modern-dark"] .select2-container--bootstrap-5 .select2-selection {
  background: var(--surface-input) !important;
  border-color: var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
}
[data-theme="modern"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-theme="modern"] .select2-container--bootstrap-5.select2-container--open .select2-selection,
[data-theme="modern-dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-theme="modern-dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
}
[data-theme="modern"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
[data-theme="modern-dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary-dark) !important; /* use token not raw hex */
  border-color: var(--border-strong) !important;
}
[data-theme="modern"] .select2-container--bootstrap-5 .select2-dropdown,
[data-theme="modern-dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background: var(--surface-overlay) !important;
  border-color: var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
[data-theme="modern"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option,
[data-theme="modern-dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option {
  color: var(--text-primary) !important;
}
[data-theme="modern"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted,
[data-theme="modern-dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted {
  background: var(--brand-primary) !important;
  color: #fff !important;
}
[data-theme="modern-dark"] .select2-container--bootstrap-5 .select2-search__field {
  background: var(--surface-input) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
/* Violet chevron arrow on single selects */
[data-theme="modern"] .select2-container--bootstrap-5 .select2-selection--single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b21b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 10px) center !important;
  background-size: 16px !important;
  padding-right: 36px !important;
}
[data-theme="modern-dark"] .select2-container--bootstrap-5 .select2-selection--single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 10px) center !important;
  background-size: 16px !important;
  padding-right: 36px !important;
}
/* Dark mode: ensure selected value text is visible */
[data-theme="modern-dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════
   §16  TABLES
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .table thead th,
[data-theme="modern-dark"] .table thead th {
  background-color: var(--table-head-bg) !important;
  color: var(--table-head-text) !important;
  border-bottom: 2px solid var(--border-strong) !important;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
[data-theme="modern"] .table-hover > tbody > tr:hover > td,
[data-theme="modern"] .table-hover > tbody > tr:hover > th,
[data-theme="modern-dark"] .table-hover > tbody > tr:hover > td,
[data-theme="modern-dark"] .table-hover > tbody > tr:hover > th {
  background-color: var(--table-hover-bg) !important;
}
[data-theme="modern"] .table .sort-icon,
[data-theme="modern-dark"] .table .sort-icon { color: var(--brand-primary) !important; }

[data-theme="modern"] .table-bordered > :not(caption) > * > *,
[data-theme="modern-dark"] .table-bordered > :not(caption) > * > * { border-color: var(--border-subtle) !important; }

/* Dark-specific table text (light doesn't need override — Bootstrap default is fine) */
[data-theme="modern-dark"] .table { color: var(--text-primary) !important; }
[data-theme="modern-dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="modern-dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(139,92,246,.05) !important;
}

[data-theme="modern"] .tbl-section-header,
[data-theme="modern-dark"] .tbl-section-header { border-bottom-color: var(--border-subtle) !important; }
[data-theme="modern"] .tbl-title,
[data-theme="modern-dark"] .tbl-title { color: var(--text-primary) !important; }
[data-theme="modern"] .tbl-count,
[data-theme="modern-dark"] .tbl-count { background: var(--brand-primary-light) !important; color: var(--brand-primary) !important; }

[data-theme="modern"] .table-mobile-cards tr,
[data-theme="modern-dark"] .table-mobile-cards tr {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════
   §17  ACTION ICON BUTTONS  (act-btn)
   WorkDo pattern: neutral resting, semantic on hover.
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .act-btn,
[data-theme="modern-dark"] .act-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  background: var(--surface-subtle) !important;
  border-color: var(--border-default) !important;
  color: var(--text-muted) !important;
  transition: background .15s, color .15s, border-color .15s, transform .12s !important;
}
[data-theme="modern"] .act-btn svg,   [data-theme="modern"] .act-btn i,
[data-theme="modern-dark"] .act-btn svg, [data-theme="modern-dark"] .act-btn i {
  width: 14px !important; height: 14px !important; stroke-width: 2 !important;
}
[data-theme="modern"] .act-btn:hover,
[data-theme="modern-dark"] .act-btn:hover {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  transform: scale(1.07) !important;
}
[data-theme="modern"] .act-btn.view-btn:hover,
[data-theme="modern-dark"] .act-btn.view-btn:hover {
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary) !important;
  border-color: var(--border-brand) !important;
}
[data-theme="modern"] .act-btn.edit-btn:hover,   [data-theme="modern"] .act-btn.freeze-btn:hover,
[data-theme="modern-dark"] .act-btn.edit-btn:hover,[data-theme="modern-dark"] .act-btn.freeze-btn:hover {
  background: rgba(5,150,105,.10) !important;
  color: var(--brand-success) !important;
  border-color: rgba(5,150,105,.30) !important;
}
[data-theme="modern"] .act-btn.transfer-btn:hover,
[data-theme="modern-dark"] .act-btn.transfer-btn:hover {
  background: rgba(59,130,246,.10) !important;
  color: #3b82f6 !important;
  border-color: rgba(59,130,246,.30) !important;
}
[data-theme="modern"] .act-btn.del-btn:hover,
[data-theme="modern-dark"] .act-btn.del-btn:hover {
  background: rgba(220,38,38,.08) !important;
  color: var(--brand-danger) !important;
  border-color: rgba(220,38,38,.28) !important;
}
[data-theme="modern"] .act-btn.warn-btn:hover,
[data-theme="modern-dark"] .act-btn.warn-btn:hover {
  background: rgba(217,119,6,.08) !important;
  color: var(--brand-warning) !important;
  border-color: rgba(217,119,6,.28) !important;
}

[data-theme="modern"] .btn-row-actions,
[data-theme="modern-dark"] .btn-row-actions {
  background: var(--surface-subtle) !important;
  border-color: var(--border-default) !important;
  color: var(--text-muted) !important;
  border-radius: 6px !important;
}
[data-theme="modern"] .btn-row-actions:hover,
[data-theme="modern-dark"] .btn-row-actions:hover {
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

/* ══════════════════════════════════════════════════════════
   §18  FILTER BAR & CHIPS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .filter-chip,
[data-theme="modern-dark"] .filter-chip {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  transition: all .15s;
}
[data-theme="modern"] .filter-chip:hover:not(.active),
[data-theme="modern-dark"] .filter-chip:hover:not(.active) {
  background: var(--brand-primary-light) !important;
  border-color: var(--border-brand) !important;
  color: var(--brand-primary) !important;
}
[data-theme="modern"] .filter-chip.active,
[data-theme="modern-dark"] .filter-chip.active {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(91,33,182,.25) !important;
}
[data-theme="modern"] .filter-divider,
[data-theme="modern-dark"] .filter-divider { background: var(--border-default) !important; }

/* ══════════════════════════════════════════════════════════
   §19  BADGES
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .badge,
[data-theme="modern-dark"] .badge { border-radius: var(--radius-pill) !important; font-weight: 600; }

[data-theme="modern"] .badge.bg-primary, [data-theme="modern-dark"] .badge.bg-primary { background: var(--brand-primary) !important; }
[data-theme="modern"] .badge.bg-success, [data-theme="modern-dark"] .badge.bg-success { background: var(--brand-success) !important; }
[data-theme="modern"] .badge.bg-danger,  [data-theme="modern-dark"] .badge.bg-danger  { background: var(--brand-danger)  !important; }
[data-theme="modern"] .badge.bg-warning, [data-theme="modern-dark"] .badge.bg-warning { background: var(--brand-warning) !important; }
[data-theme="modern"] .badge.bg-info,    [data-theme="modern-dark"] .badge.bg-info    { background: var(--brand-info)    !important; }

[data-theme="modern"] .badge.bg-light, [data-theme="modern"] .badge.bg-secondary,
[data-theme="modern-dark"] .badge.bg-light, [data-theme="modern-dark"] .badge.bg-secondary {
  background: var(--surface-muted) !important;
  color: var(--text-secondary) !important;
}

[data-theme="modern"] .badge-neutral, [data-theme="modern-dark"] .badge-neutral {
  background: var(--surface-muted) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-default) !important;
}
[data-theme="modern"] .badge-flat, [data-theme="modern-dark"] .badge-flat {
  background: var(--surface-muted) !important;
  color: var(--text-secondary) !important;
}
[data-theme="modern"] .new-badge, [data-theme="modern-dark"] .new-badge {
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary) !important;
}
[data-theme="modern"] .optional-tag, [data-theme="modern-dark"] .optional-tag { color: var(--text-muted) !important; }

/* Dark gender badges (no light equivalent needed) */
[data-theme="modern-dark"] .badge-male   { background: rgba(29,78,216,.22)  !important; color: #93c5fd !important; border-color: rgba(147,197,253,.3) !important; }
[data-theme="modern-dark"] .badge-female { background: rgba(184,50,128,.22) !important; color: #f9a8d4 !important; border-color: rgba(249,168,212,.3) !important; }

/* Coach task badges */
[data-theme="modern"] .coach-task-badge.badge-done    { background: #d1fae5 !important; color: #065f46 !important; }
[data-theme="modern"] .coach-task-badge.badge-pending { background: #fef3c7 !important; color: #92400e !important; }
[data-theme="modern"] .coach-task-badge.badge-urgent  { background: #ffe4e6 !important; color: #9f1239 !important; }
[data-theme="modern"] .coach-task-badge.badge-neutral { background: var(--brand-primary-light) !important; color: var(--brand-primary-dark) !important; }
[data-theme="modern"] .coach-task-badge.badge-info    { background: #e0e7ff !important; color: #3730a3 !important; }

/* ══════════════════════════════════════════════════════════
   §20  MODALS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .modal-content,
[data-theme="modern-dark"] .modal-content {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-xl) !important;
}
[data-theme="modern"] .modal-header,
[data-theme="modern-dark"] .modal-header {
  background: var(--surface-subtle) !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
}
[data-theme="modern"] .modal-title,
[data-theme="modern-dark"] .modal-title { color: var(--text-heading-accent) !important; font-weight: 700; }
[data-theme="modern"] .modal-footer,
[data-theme="modern-dark"] .modal-footer {
  background: var(--surface-subtle) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl) !important;
}
[data-theme="modern"] .modal-backdrop  { background-color: rgba(15,14,24,.60) !important; }
[data-theme="modern-dark"] .modal-backdrop { background-color: rgba(0,0,0,.75) !important; }

/* Global search modal */
[data-theme="modern"] #globalSearchModal .modal-content,
[data-theme="modern-dark"] #globalSearchModal .modal-content {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-2xl) !important;
}
[data-theme="modern"] #globalSearchModal .search-result-item:hover,
[data-theme="modern-dark"] #globalSearchModal .search-result-item:hover {
  background: var(--surface-subtle) !important;
}

/* ══════════════════════════════════════════════════════════
   §21  DROPDOWNS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .dropdown-menu,
[data-theme="modern-dark"] .dropdown-menu {
  background: var(--surface-overlay) !important;
  border-color: var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}
[data-theme="modern"] .dropdown-item,
[data-theme="modern-dark"] .dropdown-item { color: var(--text-primary) !important; }
[data-theme="modern"] .dropdown-item:hover, [data-theme="modern"] .dropdown-item:focus,
[data-theme="modern-dark"] .dropdown-item:hover, [data-theme="modern-dark"] .dropdown-item:focus {
  background: var(--surface-subtle) !important;
  color: var(--brand-primary) !important;
}
[data-theme="modern"] .dropdown-item.active,
[data-theme="modern-dark"] .dropdown-item.active { background: var(--brand-primary) !important; color: #fff !important; }
[data-theme="modern"] .dropdown-divider,
[data-theme="modern-dark"] .dropdown-divider { border-color: var(--border-subtle) !important; }

[data-theme="modern"] .search-suggestions-dropdown,
[data-theme="modern-dark"] .search-suggestions-dropdown {
  background: var(--surface-overlay) !important;
  border-color: var(--border-default) !important;
  box-shadow: var(--shadow-lg) !important;
}
[data-theme="modern"] .suggestion-item:hover,
[data-theme="modern-dark"] .suggestion-item:hover { background: var(--surface-muted) !important; }
[data-theme="modern"] .search-footer,
[data-theme="modern-dark"] .search-footer { background: var(--surface-subtle) !important; }

/* ══════════════════════════════════════════════════════════
   §22  NAV TABS & PILLS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .nav-tabs,
[data-theme="modern-dark"] .nav-tabs { border-bottom-color: var(--border-default) !important; }

[data-theme="modern"] .nav-tabs .nav-link,
[data-theme="modern-dark"] .nav-tabs .nav-link { color: var(--text-secondary) !important; border-color: transparent !important; }
[data-theme="modern"] .nav-tabs .nav-link:hover,
[data-theme="modern-dark"] .nav-tabs .nav-link:hover { color: var(--brand-primary) !important; background: var(--brand-primary-light) !important; border-color: transparent !important; }
[data-theme="modern"] .nav-tabs .nav-link.active,
[data-theme="modern-dark"] .nav-tabs .nav-link.active {
  background: var(--surface-card) !important;
  color: var(--brand-primary) !important;
  border-color: var(--border-default) var(--border-default) var(--surface-card) !important;
}

[data-theme="modern"] .nav-pills .nav-link,
[data-theme="modern-dark"] .nav-pills .nav-link { color: var(--text-secondary) !important; }
[data-theme="modern"] .nav-pills .nav-link.active,
[data-theme="modern-dark"] .nav-pills .nav-link.active { background: var(--brand-primary) !important; color: #fff !important; }
[data-theme="modern"] .nav-pills .nav-link:hover:not(.active),
[data-theme="modern-dark"] .nav-pills .nav-link:hover:not(.active) { background: var(--surface-muted) !important; color: var(--brand-primary) !important; }

[data-theme="modern"] .nav-settings,
[data-theme="modern-dark"] .nav-settings {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
}
[data-theme="modern"] .nav-settings .nav-link,
[data-theme="modern-dark"] .nav-settings .nav-link { color: var(--text-secondary) !important; border-radius: var(--radius-lg) !important; }
[data-theme="modern"] .nav-settings .nav-link:hover:not(.active),
[data-theme="modern-dark"] .nav-settings .nav-link:hover:not(.active) { background: var(--surface-muted) !important; color: var(--text-primary) !important; }
[data-theme="modern"] .nav-settings .nav-link.active,
[data-theme="modern-dark"] .nav-settings .nav-link.active { background: var(--brand-primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(91,33,182,.25) !important; }

[data-theme="modern"] .nav-segmented,
[data-theme="modern-dark"] .nav-segmented { background: var(--surface-muted) !important; border-radius: var(--radius-lg) !important; border: 1px solid var(--border-subtle) !important; }
[data-theme="modern"] .nav-segmented .nav-link,
[data-theme="modern-dark"] .nav-segmented .nav-link { color: var(--text-secondary) !important; border-radius: var(--radius-md) !important; }
[data-theme="modern"] .nav-segmented .nav-link.active,
[data-theme="modern-dark"] .nav-segmented .nav-link.active { background: var(--surface-card) !important; color: var(--brand-primary) !important; box-shadow: var(--shadow-sm) !important; }

/* ══════════════════════════════════════════════════════════
   §23  LIST GROUPS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .list-group-item,
[data-theme="modern-dark"] .list-group-item {
  background: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
[data-theme="modern"] .list-group-item:hover,
[data-theme="modern-dark"] .list-group-item:hover { background: var(--surface-subtle) !important; }
[data-theme="modern"] .list-group-item.active,
[data-theme="modern-dark"] .list-group-item.active { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; }

/* ══════════════════════════════════════════════════════════
   §24  PAGINATION
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .page-link,
[data-theme="modern-dark"] .page-link {
  background: var(--surface-card) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
}
[data-theme="modern"] .page-link:hover,
[data-theme="modern-dark"] .page-link:hover { background: var(--surface-muted) !important; color: var(--brand-primary) !important; }
[data-theme="modern"] .page-item.active .page-link,
[data-theme="modern-dark"] .page-item.active .page-link { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; }
[data-theme="modern"] .page-item.disabled .page-link,
[data-theme="modern-dark"] .page-item.disabled .page-link { background: var(--surface-subtle) !important; color: var(--text-muted) !important; }

/* ══════════════════════════════════════════════════════════
   §25  ACCORDION
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .accordion-item,
[data-theme="modern-dark"] .accordion-item { border-color: var(--border-default) !important; background: var(--surface-card) !important; }
[data-theme="modern"] .accordion-button,
[data-theme="modern-dark"] .accordion-button { background: var(--surface-input) !important; color: var(--text-heading-accent) !important; font-weight: 600; }
[data-theme="modern"] .accordion-button:not(.collapsed),
[data-theme="modern-dark"] .accordion-button:not(.collapsed) { background: var(--surface-muted) !important; color: var(--brand-primary) !important; box-shadow: none !important; }
[data-theme="modern"] .accordion-button:focus,
[data-theme="modern-dark"] .accordion-button:focus { box-shadow: var(--shadow-focus) !important; }
[data-theme="modern"] .accordion-body,
[data-theme="modern-dark"] .accordion-body { background: var(--surface-card) !important; }

/* ══════════════════════════════════════════════════════════
   §26  OFFCANVAS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .offcanvas,
[data-theme="modern-dark"] .offcanvas { background: var(--surface-overlay) !important; border-color: var(--border-default) !important; }
[data-theme="modern"] .offcanvas-header,
[data-theme="modern-dark"] .offcanvas-header { background: var(--surface-subtle) !important; border-bottom: 1px solid var(--border-default) !important; }
[data-theme="modern"] .offcanvas-title,
[data-theme="modern-dark"] .offcanvas-title { color: var(--text-heading-accent) !important; font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   §27  PROGRESS BARS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .progress,
[data-theme="modern-dark"] .progress { background: var(--border-default) !important; border-radius: var(--radius-pill) !important; }
[data-theme="modern"] .progress-bar,
[data-theme="modern-dark"] .progress-bar { background: var(--brand-primary) !important; border-radius: var(--radius-pill) !important; }

/* ══════════════════════════════════════════════════════════
   §28  ALERTS (dark only; light Bootstrap defaults are fine)
══════════════════════════════════════════════════════════ */
[data-theme="modern-dark"] .alert-info    { background: rgba(79,70,229,.14)  !important; border-color: rgba(79,70,229,.30)  !important; color: #c7d2fe !important; }
[data-theme="modern-dark"] .alert-success { background: rgba(5,150,105,.14)  !important; border-color: rgba(5,150,105,.30)  !important; color: #6ee7b7 !important; }
[data-theme="modern-dark"] .alert-warning { background: rgba(217,119,6,.14)  !important; border-color: rgba(217,119,6,.30)  !important; color: #fcd34d !important; }
[data-theme="modern-dark"] .alert-danger  { background: rgba(220,38,38,.14)  !important; border-color: rgba(220,38,38,.30)  !important; color: #fda4af !important; }

/* ══════════════════════════════════════════════════════════
   §29  TOOLTIPS & POPOVERS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .tooltip .tooltip-inner,
[data-theme="modern-dark"] .tooltip .tooltip-inner { background: #1e1b4b !important; border-radius: var(--radius-sm) !important; }
[data-theme="modern"] .popover,
[data-theme="modern-dark"] .popover { background: var(--surface-overlay) !important; border-color: var(--border-default) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important; }
[data-theme="modern"] .popover-header,
[data-theme="modern-dark"] .popover-header { background: var(--surface-subtle) !important; border-bottom-color: var(--border-subtle) !important; color: var(--text-heading-accent) !important; }

/* ══════════════════════════════════════════════════════════
   §30  TOASTS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .toast,
[data-theme="modern-dark"] .toast { background: var(--surface-overlay) !important; border-color: var(--border-default) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important; }

/* ══════════════════════════════════════════════════════════
   §31  HR
══════════════════════════════════════════════════════════ */
[data-theme="modern"] hr,
[data-theme="modern-dark"] hr { border-color: var(--border-default) !important; opacity: 1; }

/* ══════════════════════════════════════════════════════════
   §32  SKELETON / SPINNER
══════════════════════════════════════════════════════════ */
@keyframes modernSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
[data-theme="modern"] .skeleton,
[data-theme="modern"] .placeholder {
  background: linear-gradient(90deg,#ede9fe 25%,#f5f3ff 50%,#ede9fe 75%) !important;
  background-size: 200% 100% !important;
  animation: modernSkeleton 1.5s ease-in-out infinite !important;
}
[data-theme="modern-dark"] .skeleton,
[data-theme="modern-dark"] .placeholder {
  background: linear-gradient(90deg,#201e30 25%,#2a2740 50%,#201e30 75%) !important;
  background-size: 200% 100% !important;
  animation: modernSkeleton 1.5s ease-in-out infinite !important;
}
[data-theme="modern"] .spinner-border, [data-theme="modern"] .spinner-grow,
[data-theme="modern-dark"] .spinner-border, [data-theme="modern-dark"] .spinner-grow { color: var(--brand-primary) !important; }

/* ══════════════════════════════════════════════════════════
   §33  EMPTY STATES
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .empty-state-icon,
[data-theme="modern-dark"] .empty-state-icon {
  background: var(--surface-muted) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--brand-primary) !important;
  border-radius: var(--radius-2xl) !important;
}
[data-theme="modern"] .empty-state-title,
[data-theme="modern-dark"] .empty-state-title { color: var(--text-heading-accent) !important; }
[data-theme="modern"] .empty-state-text,
[data-theme="modern-dark"] .empty-state-text  { color: var(--text-secondary) !important; }

/* ══════════════════════════════════════════════════════════
   §34  IDENTITY BLOCK & SECTION HEADER
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .identity-block,
[data-theme="modern-dark"] .identity-block {
  background: var(--identity-bg) !important;
  color: var(--identity-text) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
}
[data-theme="modern"] .section-header-ios,
[data-theme="modern-dark"] .section-header-ios { border-left: 3px solid var(--section-accent); padding-left: .75rem; }

/* ══════════════════════════════════════════════════════════
   §35  ACTION BAR  (sticky bottom on forms / invoices)
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .inv-action-bar,
[data-theme="modern"] .invoice-action-bar,
[data-theme="modern"] .page-action-bar {
  background: rgba(255,255,255,.97) !important;
  border-top: 1px solid var(--border-default) !important;
  backdrop-filter: blur(10px) !important;
}
[data-theme="modern-dark"] .inv-action-bar,
[data-theme="modern-dark"] .invoice-action-bar,
[data-theme="modern-dark"] .page-action-bar {
  background: rgba(26,24,39,.97) !important;
  border-top: 1px solid var(--border-default) !important;
  backdrop-filter: blur(10px) !important;
}

/* ══════════════════════════════════════════════════════════
   §36  BULK ACTION TOOLBAR
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .bulk-action, [data-theme="modern"] .bulk-action-bar,
[data-theme="modern-dark"] .bulk-action, [data-theme="modern-dark"] .bulk-action-bar {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="modern"] .bulk-count-badge,
[data-theme="modern-dark"] .bulk-count-badge { background: var(--brand-primary) !important; color: #fff !important; border-radius: var(--radius-pill) !important; }

/* ══════════════════════════════════════════════════════════
   §37  WIZARD / STEP PROGRESS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .step-circle,
[data-theme="modern-dark"] .step-circle { background: var(--surface-muted) !important; border: 2px solid var(--border-strong) !important; color: var(--label-accent) !important; border-radius: 50% !important; }
[data-theme="modern"] .wizard-step.active .step-circle,
[data-theme="modern-dark"] .wizard-step.active .step-circle { background: var(--surface-card) !important; border: 3px solid var(--brand-primary) !important; color: var(--brand-primary) !important; }
[data-theme="modern"] .wizard-step.completed .step-circle, [data-theme="modern"] .wizard-step.done .step-circle,
[data-theme="modern-dark"] .wizard-step.completed .step-circle, [data-theme="modern-dark"] .wizard-step.done .step-circle { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; }
[data-theme="modern"] .step-label,
[data-theme="modern-dark"] .step-label { color: var(--text-secondary) !important; }
[data-theme="modern"] .wizard-step.active .step-label,
[data-theme="modern-dark"] .wizard-step.active .step-label { color: var(--text-heading-accent) !important; font-weight: 600; }
[data-theme="modern"] .step-pane,
[data-theme="modern-dark"] .step-pane { background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-xl) !important; }
[data-theme="modern"] .wizard-line,
[data-theme="modern-dark"] .wizard-line { background: var(--border-default) !important; }
[data-theme="modern"] .step-number.done, [data-theme="modern"] .step-number.completed,
[data-theme="modern-dark"] .step-number.done, [data-theme="modern-dark"] .step-number.completed { background: var(--brand-success) !important; border-color: var(--brand-success) !important; color: #fff !important; }
[data-theme="modern"] .step-number.active,
[data-theme="modern-dark"] .step-number.active { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; }

/* ══════════════════════════════════════════════════════════
   §38  THEME SWITCHER WIDGET
══════════════════════════════════════════════════════════ */
.trainly-theme-btn { border: none; background: transparent; border-radius: 50rem; padding: 4px 10px; font-size: .73rem; font-weight: 600; color: var(--text-secondary,#64748b); cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all .16s; }
.trainly-theme-btn:hover { background: rgba(255,255,255,.6); }
.trainly-theme-btn.active-modern { background: linear-gradient(135deg,#5b21b6,#8b5cf6); color: #fff; box-shadow: 0 2px 8px rgba(91,33,182,.35); }
.trainly-theme-btn.active-dark   { background: #1e293b; color: #e2e8f0; }

/* ══════════════════════════════════════════════════════════
   §39  FLATPICKR
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .flatpickr-calendar,
[data-theme="modern-dark"] .flatpickr-calendar {
  background: var(--surface-overlay) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-xl) !important;
}
[data-theme="modern"] .flatpickr-months,  [data-theme="modern"] .flatpickr-month,
[data-theme="modern-dark"] .flatpickr-months, [data-theme="modern-dark"] .flatpickr-month {
  background: var(--surface-subtle) !important;
  color: var(--text-heading-accent) !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}
[data-theme="modern"] .flatpickr-weekdays, [data-theme="modern"] span.flatpickr-weekday,
[data-theme="modern-dark"] .flatpickr-weekdays, [data-theme="modern-dark"] span.flatpickr-weekday {
  background: var(--surface-subtle) !important;
  color: var(--label-accent) !important;
}
[data-theme="modern"] .flatpickr-day,
[data-theme="modern-dark"] .flatpickr-day { color: var(--text-primary) !important; border-radius: var(--radius-md) !important; }
[data-theme="modern"] .flatpickr-day:hover,
[data-theme="modern-dark"] .flatpickr-day:hover { background: var(--surface-muted) !important; border-color: var(--border-default) !important; color: var(--brand-primary) !important; }
[data-theme="modern"] .flatpickr-day.selected, [data-theme="modern"] .flatpickr-day.startRange, [data-theme="modern"] .flatpickr-day.endRange,
[data-theme="modern-dark"] .flatpickr-day.selected,[data-theme="modern-dark"] .flatpickr-day.startRange,[data-theme="modern-dark"] .flatpickr-day.endRange {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}
[data-theme="modern"] .flatpickr-day.today,
[data-theme="modern-dark"] .flatpickr-day.today { border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; }
[data-theme="modern"] .flatpickr-day.inRange,
[data-theme="modern-dark"] .flatpickr-day.inRange { background: var(--surface-muted) !important; border-color: var(--border-subtle) !important; }
[data-theme="modern"] .flatpickr-day.prevMonthDay, [data-theme="modern"] .flatpickr-day.nextMonthDay, [data-theme="modern"] .flatpickr-day.flatpickr-disabled,
[data-theme="modern-dark"] .flatpickr-day.prevMonthDay,[data-theme="modern-dark"] .flatpickr-day.nextMonthDay,[data-theme="modern-dark"] .flatpickr-day.flatpickr-disabled { color: var(--text-muted) !important; }
[data-theme="modern"] .flatpickr-time,
[data-theme="modern-dark"] .flatpickr-time { border-top: 1px solid var(--border-subtle) !important; }
[data-theme="modern"] .flatpickr-time input, [data-theme="modern"] .flatpickr-time .flatpickr-am-pm,
[data-theme="modern-dark"] .flatpickr-time input, [data-theme="modern-dark"] .flatpickr-time .flatpickr-am-pm { background: var(--surface-input) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
[data-theme="modern"] .flatpickr-prev-month svg, [data-theme="modern"] .flatpickr-next-month svg { fill: var(--brand-primary) !important; }

/* ══════════════════════════════════════════════════════════
   §40  KPI / STAT CARDS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .kpi-card,
[data-theme="modern-dark"] .kpi-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-xl) !important;
}
[data-theme="modern"] .kpi-card:hover,
[data-theme="modern-dark"] .kpi-card:hover { box-shadow: var(--shadow-md) !important; }

/* Colour-coded top border — tokens handle light/dark via brand vars */
[data-theme="modern"] .kpi-card.kpi-blue,  [data-theme="modern-dark"] .kpi-card.kpi-blue  { border-top: 3px solid var(--brand-info)    !important; }
[data-theme="modern"] .kpi-card.kpi-green, [data-theme="modern-dark"] .kpi-card.kpi-green { border-top: 3px solid var(--brand-success) !important; }
[data-theme="modern"] .kpi-card.kpi-amber, [data-theme="modern-dark"] .kpi-card.kpi-amber { border-top: 3px solid var(--brand-warning) !important; }
/* teal doesn't map to a token, keep split */
[data-theme="modern"] .kpi-card.kpi-teal  { border-top: 3px solid #0d9488 !important; }
[data-theme="modern-dark"] .kpi-card.kpi-teal { border-top: 3px solid #2dd4bf !important; }

/* Icon circles — light vs dark opacity differs */
[data-theme="modern"] .kpi-icon-blue  { background: rgba(79,70,229,.10)  !important; color: #4f46e5 !important; }
[data-theme="modern"] .kpi-icon-green { background: rgba(5,150,105,.10)  !important; color: #059669 !important; }
[data-theme="modern"] .kpi-icon-teal  { background: rgba(13,148,136,.10) !important; color: #0d9488 !important; }
[data-theme="modern"] .kpi-icon-amber { background: rgba(217,119,6,.10)  !important; color: #d97706 !important; }
[data-theme="modern-dark"] .kpi-icon-blue  { background: rgba(99,102,241,.20)  !important; color: #818cf8 !important; }
[data-theme="modern-dark"] .kpi-icon-green { background: rgba(16,185,129,.18)  !important; color: #34d399 !important; }
[data-theme="modern-dark"] .kpi-icon-teal  { background: rgba(20,184,166,.18)  !important; color: #2dd4bf !important; }
[data-theme="modern-dark"] .kpi-icon-amber { background: rgba(245,158,11,.18)  !important; color: #fbbf24 !important; }

[data-theme="modern"] .kpi-number,     [data-theme="modern-dark"] .kpi-number     { color: var(--text-primary)  !important; }
[data-theme="modern"] .kpi-label-text, [data-theme="modern-dark"] .kpi-label-text { color: var(--text-muted)    !important; }
[data-theme="modern-dark"] .kpi-trend.up      { color: #4ade80 !important; background: rgba(74,222,128,.12) !important; }
[data-theme="modern-dark"] .kpi-trend.down    { color: #f87171 !important; background: rgba(248,113,113,.12) !important; }
[data-theme="modern-dark"] .kpi-trend.neutral { color: var(--text-muted) !important; background: var(--surface-subtle) !important; }

/* Dashboard hp-* cards */
[data-theme="modern"] .hp-sc,
[data-theme="modern-dark"] .hp-sc { background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-sm) !important; }
[data-theme="modern"] .hp-sc:hover,
[data-theme="modern-dark"] .hp-sc:hover { box-shadow: var(--shadow-md) !important; }
[data-theme="modern"] .hp-sc.v:hover { border-color: rgba(91,33,182,.28)  !important; }
[data-theme="modern"] .hp-sc.t:hover { border-color: rgba(16,185,129,.22) !important; }
[data-theme="modern"] .hp-sc.a:hover { border-color: rgba(217,119,6,.22)  !important; }

[data-theme="modern"] .hp-qa-btn,
[data-theme="modern-dark"] .hp-qa-btn { background: var(--surface-card) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
[data-theme="modern"] .hp-qa-btn:hover,
[data-theme="modern-dark"] .hp-qa-btn:hover { border-color: rgba(91,33,182,.28) !important; box-shadow: var(--shadow-md) !important; }
[data-theme="modern"] .hp-qa-lbl,
[data-theme="modern-dark"] .hp-qa-lbl { color: var(--text-secondary) !important; }

[data-theme="modern"] .hp-empty,
[data-theme="modern-dark"] .hp-empty { background: var(--surface-card) !important; border: 1px solid var(--border-subtle) !important; }
[data-theme="modern"] .hp-cls,
[data-theme="modern-dark"] .hp-cls { background: var(--surface-card) !important; border-color: var(--border-default) !important; box-shadow: var(--shadow-xs) !important; }
[data-theme="modern"] .hp-cls:hover,
[data-theme="modern-dark"] .hp-cls:hover { box-shadow: var(--shadow-md) !important; }
[data-theme="modern"] .hp-cls-div,
[data-theme="modern-dark"] .hp-cls-div { background: var(--border-subtle) !important; }
[data-theme="modern"] .hp-cls-name,
[data-theme="modern-dark"] .hp-cls-name { color: var(--text-primary) !important; }
[data-theme="modern"] .hp-sb-card,
[data-theme="modern-dark"] .hp-sb-card { background: var(--surface-card) !important; border-color: var(--border-default) !important; box-shadow: var(--shadow-sm) !important; }
[data-theme="modern"] .hp-sb-head,
[data-theme="modern-dark"] .hp-sb-head { border-bottom-color: var(--border-subtle) !important; }
[data-theme="modern"] .hp-sb-title,
[data-theme="modern-dark"] .hp-sb-title { color: var(--text-primary) !important; }
[data-theme="modern"] .hp-guide-item,
[data-theme="modern-dark"] .hp-guide-item { border-bottom-color: var(--border-subtle) !important; }
[data-theme="modern"] .hp-guide-label,
[data-theme="modern-dark"] .hp-guide-label { color: var(--text-secondary) !important; }
[data-theme="modern"] .hp-guide-desc,
[data-theme="modern-dark"] .hp-guide-desc { color: var(--text-muted) !important; }
[data-theme="modern"] .hp-dyk-card,
[data-theme="modern-dark"] .hp-dyk-card { background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; }
[data-theme="modern"] .hp-dyk-title::after,
[data-theme="modern-dark"] .hp-dyk-title::after { background: var(--border-default) !important; }
[data-theme="modern"] .hp-tip-text,
[data-theme="modern-dark"] .hp-tip-text { color: var(--text-secondary) !important; }

/* ══════════════════════════════════════════════════════════
   §41  ATTENDANCE CELLS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .attendance-cell.present,
[data-theme="modern-dark"] .attendance-cell.present { background: #d1fae5 !important; color: #065f46 !important; border-radius: var(--radius-sm) !important; }
[data-theme="modern"] .attendance-cell.absent,
[data-theme="modern-dark"] .attendance-cell.absent  { background: #ffe4e6 !important; color: #9f1239 !important; border-radius: var(--radius-sm) !important; }
[data-theme="modern"] .attendance-cell.late,
[data-theme="modern-dark"] .attendance-cell.late    { background: #fef3c7 !important; color: #92400e !important; border-radius: var(--radius-sm) !important; }
[data-theme="modern"] .att-page-wrap,
[data-theme="modern-dark"] .att-page-wrap { background: var(--surface-page) !important; }

/* ══════════════════════════════════════════════════════════
   §42  INVOICE / POS / FINANCIAL
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .invoice-header,
[data-theme="modern-dark"] .invoice-header { background: var(--surface-subtle) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-xl) !important; }
[data-theme="modern"] .invoice-totals,
[data-theme="modern-dark"] .invoice-totals { background: var(--surface-subtle) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg) !important; }
[data-theme="modern"] .pos-item-card, [data-theme="modern"] .inventory-card,
[data-theme="modern-dark"] .pos-item-card, [data-theme="modern-dark"] .inventory-card {
  background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-sm) !important;
}
[data-theme="modern"] .pos-item-card:hover,
[data-theme="modern-dark"] .pos-item-card:hover { box-shadow: var(--shadow-md) !important; border-color: var(--border-strong) !important; transform: translateY(-1px); }
[data-theme="modern"] .wallet-balance-display, [data-theme="modern"] .wallet-amount,
[data-theme="modern-dark"] .wallet-balance-display, [data-theme="modern-dark"] .wallet-amount { color: var(--brand-primary) !important; }

/* ══════════════════════════════════════════════════════════
   §43  CRM PIPELINE / KANBAN
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .pipeline-column, [data-theme="modern"] .kanban-column,
[data-theme="modern-dark"] .pipeline-column, [data-theme="modern-dark"] .kanban-column {
  background: var(--surface-subtle) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-xl) !important;
}
[data-theme="modern"] .pipeline-column-header, [data-theme="modern"] .kanban-column-header,
[data-theme="modern-dark"] .pipeline-column-header, [data-theme="modern-dark"] .kanban-column-header {
  background: var(--surface-muted) !important; border-bottom: 1px solid var(--border-default) !important; color: var(--label-accent) !important;
}
[data-theme="modern"] .pipeline-card, [data-theme="modern"] .kanban-card,
[data-theme="modern-dark"] .pipeline-card, [data-theme="modern-dark"] .kanban-card {
  background: var(--surface-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════
   §44  SCHEDULE / TIMETABLE
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .schedule-slot, [data-theme="modern"] .timetable-cell,
[data-theme="modern-dark"] .schedule-slot, [data-theme="modern-dark"] .timetable-cell { border-color: var(--border-subtle) !important; }
[data-theme="modern"] .schedule-slot.booked,
[data-theme="modern-dark"] .schedule-slot.booked { background: var(--surface-muted) !important; border-color: var(--border-strong) !important; }
[data-theme="modern"] .schedule-slot.available:hover,
[data-theme="modern-dark"] .schedule-slot.available:hover { background: var(--surface-subtle) !important; }
[data-theme="modern"] .schedule-table thead tr,
[data-theme="modern-dark"] .schedule-table thead tr { background: var(--surface-subtle) !important; }
[data-theme="modern"] .schedule-table thead th,
[data-theme="modern-dark"] .schedule-table thead th { color: var(--text-heading-accent) !important; border-color: var(--border-subtle) !important; }
[data-theme="modern"] .schedule-table tbody td,
[data-theme="modern-dark"] .schedule-table tbody td { background: var(--surface-card) !important; border-color: var(--border-subtle) !important; }
[data-theme="modern"] .schedule-table tbody td:first-child,
[data-theme="modern-dark"] .schedule-table tbody td:first-child { background: var(--surface-subtle) !important; color: var(--text-secondary) !important; }
[data-theme="modern-dark"] .class-slot { border-color: rgba(255,255,255,.16) !important; }

/* ══════════════════════════════════════════════════════════
   §45  ZATCA / COMPLIANCE
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .zatca-step-card,
[data-theme="modern-dark"] .zatca-step-card { background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-xl) !important; }
[data-theme="modern"] .zatca-status-processing .zatca-spinner,
[data-theme="modern-dark"] .zatca-status-processing .zatca-spinner { color: var(--brand-primary) !important; }
[data-theme="modern"] .zatca-status-success .zatca-icon,
[data-theme="modern-dark"] .zatca-status-success .zatca-icon { color: var(--brand-success) !important; }
[data-theme="modern"] .zatca-status-error .zatca-icon,
[data-theme="modern-dark"] .zatca-status-error .zatca-icon { color: var(--brand-danger) !important; }

/* ══════════════════════════════════════════════════════════
   §46  TRAINEE PAGES
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .trainee-edit-sidebar,
[data-theme="modern-dark"] .trainee-edit-sidebar { background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-sm) !important; }
[data-theme="modern"] .trainee-sidebar-name,   [data-theme="modern-dark"] .trainee-sidebar-name   { color: var(--text-primary)   !important; }
[data-theme="modern"] .trainee-sidebar-code,   [data-theme="modern-dark"] .trainee-sidebar-code   { color: var(--text-muted)     !important; }
[data-theme="modern"] .trainee-sidebar-divider,[data-theme="modern-dark"] .trainee-sidebar-divider { background: var(--border-subtle) !important; }
[data-theme="modern"] .trainee-sidebar-row .lbl,[data-theme="modern-dark"] .trainee-sidebar-row .lbl { color: var(--text-muted)   !important; }
[data-theme="modern"] .trainee-sidebar-row .val,[data-theme="modern-dark"] .trainee-sidebar-row .val { color: var(--text-secondary) !important; }

[data-theme="modern"] .trainee-tabs,
[data-theme="modern-dark"] .trainee-tabs { background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-sm) !important; }
[data-theme="modern"] .trainee-tab-btn,
[data-theme="modern-dark"] .trainee-tab-btn { color: var(--text-muted) !important; background: transparent !important; }
[data-theme="modern"] .trainee-tab-btn.active,
[data-theme="modern-dark"] .trainee-tab-btn.active { background: var(--brand-primary) !important; color: #fff !important; }
[data-theme="modern"] .trainee-tab-btn:hover:not(.active),
[data-theme="modern-dark"] .trainee-tab-btn:hover:not(.active) { background: var(--brand-primary-light) !important; color: var(--brand-primary) !important; }

[data-theme="modern"] .trainee-section-card,
[data-theme="modern-dark"] .trainee-section-card { background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-sm) !important; }
[data-theme="modern"] .trainee-section-head,
[data-theme="modern-dark"] .trainee-section-head { border-bottom-color: var(--border-subtle) !important; }
[data-theme="modern"] .trainee-section-icon,
[data-theme="modern-dark"] .trainee-section-icon { background: var(--brand-primary-light) !important; color: var(--brand-primary) !important; }
[data-theme="modern"] .trainee-section-title,
[data-theme="modern-dark"] .trainee-section-title { color: var(--text-primary) !important; }
[data-theme="modern"] .trainee-section-subtitle,
[data-theme="modern-dark"] .trainee-section-subtitle { color: var(--text-muted) !important; }

[data-theme="modern"] .trainee-edit-footer,
[data-theme="modern-dark"] .trainee-edit-footer { background: var(--surface-card) !important; border-top-color: var(--border-default) !important; box-shadow: 0 -4px 16px rgba(91,33,182,.07) !important; }
[data-theme="modern"] .trainee-edit-footer-info,
[data-theme="modern-dark"] .trainee-edit-footer-info { color: var(--text-muted) !important; }
[data-theme="modern"] .trainee-edit-footer-info strong,
[data-theme="modern-dark"] .trainee-edit-footer-info strong { color: var(--text-primary) !important; }
[data-theme="modern"] .trainee-page-breadcrumb a,
[data-theme="modern-dark"] .trainee-page-breadcrumb a { color: var(--brand-primary) !important; }

/* Trainee card grid */
[data-theme="modern"] .tc-card,
[data-theme="modern-dark"] .tc-card { background: var(--surface-card) !important; border-color: var(--border-default) !important; box-shadow: var(--shadow-sm) !important; }
[data-theme="modern"] .tc-card:hover,
[data-theme="modern-dark"] .tc-card:hover { border-color: var(--border-brand) !important; box-shadow: var(--shadow-md) !important; }
[data-theme="modern"] .tc-name,       [data-theme="modern-dark"] .tc-name       { color: var(--text-primary)   !important; }
[data-theme="modern"] .tc-meta-label, [data-theme="modern-dark"] .tc-meta-label { color: var(--text-muted)     !important; }
[data-theme="modern"] .tc-meta-value, [data-theme="modern-dark"] .tc-meta-value { color: var(--text-secondary) !important; }
[data-theme="modern"] .tc-meta-grid,  [data-theme="modern-dark"] .tc-meta-grid  { border-top-color: var(--border-subtle) !important; }
[data-theme="modern"] .tc-footer .tc-btn,
[data-theme="modern-dark"] .tc-footer .tc-btn { background: var(--surface-subtle) !important; border-color: var(--border-default) !important; color: var(--text-secondary) !important; }
[data-theme="modern"] .tc-footer .tc-btn.tc-btn-view:hover,
[data-theme="modern-dark"] .tc-footer .tc-btn.tc-btn-view:hover { background: var(--brand-primary-light) !important; color: var(--brand-primary) !important; border-color: var(--border-brand) !important; }

/* Avatar colour cycles */
[data-theme="modern-dark"] .ta-blue  { background: rgba(79,70,229,.22)  !important; color: #a5b4fc !important; }
[data-theme="modern-dark"] .ta-teal  { background: rgba(13,148,136,.22) !important; color: #5eead4 !important; }
[data-theme="modern-dark"] .ta-green { background: rgba(22,163,74,.22)  !important; color: #86efac !important; }
[data-theme="modern-dark"] .ta-amber { background: rgba(217,119,6,.22)  !important; color: #fcd34d !important; }
[data-theme="modern-dark"] .ta-rose  { background: rgba(220,38,38,.22)  !important; color: #fda4af !important; }
[data-theme="modern-dark"] .enroll-pill { background: rgba(13,148,136,.16) !important; border-color: rgba(45,212,191,.22) !important; color: #2dd4bf !important; }

/* ══════════════════════════════════════════════════════════
   §47  CLASS FORM — tf-* system
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .tf-root,
[data-theme="modern-dark"] .tf-root {
  --c:    var(--brand-primary);
  --c-dk: var(--brand-primary-dark);
  --c-lt: var(--brand-primary-light);
  --c-bd: var(--border-brand);
}
[data-theme="modern"] .tf-header, [data-theme="modern-dark"] .tf-header,
[data-theme="modern"] .tf-tabs-wrap, [data-theme="modern-dark"] .tf-tabs-wrap { background: var(--surface-card) !important; border-bottom-color: var(--border-default) !important; }
[data-theme="modern"] .tf-tab, [data-theme="modern-dark"] .tf-tab { color: var(--text-muted) !important; border-bottom-color: transparent !important; }
[data-theme="modern"] .tf-tab.active, [data-theme="modern-dark"] .tf-tab.active { color: var(--brand-primary) !important; border-bottom-color: var(--brand-primary) !important; }
[data-theme="modern"] .tf-tab:hover:not(.active), [data-theme="modern-dark"] .tf-tab:hover:not(.active) { color: var(--brand-primary) !important; background: var(--brand-primary-light) !important; }
[data-theme="modern"] .tf-title, [data-theme="modern-dark"] .tf-title { color: var(--text-primary) !important; }
[data-theme="modern"] .tf-breadcrumb a, [data-theme="modern-dark"] .tf-breadcrumb a { color: var(--brand-primary) !important; }
[data-theme="modern"] .tf-section, [data-theme="modern-dark"] .tf-section { background: var(--surface-card) !important; border-color: var(--border-default) !important; box-shadow: var(--shadow-sm) !important; }
[data-theme="modern"] .tf-section-head, [data-theme="modern-dark"] .tf-section-head { border-bottom-color: var(--border-subtle) !important; color: var(--text-primary) !important; }
[data-theme="modern"] .tf-label, [data-theme="modern-dark"] .tf-label { color: var(--label-accent) !important; font-weight: 600 !important; }
[data-theme="modern"] .tf-input, [data-theme="modern"] .tf-select, [data-theme="modern"] .tf-textarea,
[data-theme="modern-dark"] .tf-input, [data-theme="modern-dark"] .tf-select, [data-theme="modern-dark"] .tf-textarea { background: var(--surface-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
[data-theme="modern-dark"] .tf-input[readonly], [data-theme="modern-dark"] .tf-input[disabled], [data-theme="modern-dark"] .tf-select[disabled] { background: var(--surface-muted) !important; color: var(--text-muted) !important; border-color: var(--border-subtle) !important; }
[data-theme="modern"] .tf-field-help, [data-theme="modern-dark"] .tf-field-help { color: var(--text-muted) !important; }
[data-theme="modern"] .cc-schedule-row, [data-theme="modern"] .cc-coach-row,
[data-theme="modern-dark"] .cc-schedule-row, [data-theme="modern-dark"] .cc-coach-row { background: var(--surface-subtle) !important; border-color: var(--border-default) !important; }
[data-theme="modern"] .tf-btn-ghost, [data-theme="modern-dark"] .tf-btn-ghost { background: var(--surface-subtle) !important; border-color: var(--border-default) !important; color: var(--text-secondary) !important; }

[data-theme="modern"] .trainee-section-card .form-label, [data-theme="modern"] .tf-section-body .form-label,
[data-theme="modern-dark"] .trainee-section-card .form-label, [data-theme="modern-dark"] .tf-section-body .form-label { font-weight: 600 !important; }
[data-theme="modern"] .trainee-section-card .form-text, [data-theme="modern"] .tf-section-body .form-text,
[data-theme="modern-dark"] .trainee-section-card .form-text, [data-theme="modern-dark"] .tf-section-body .form-text { color: var(--text-muted) !important; }

/* ══════════════════════════════════════════════════════════
   §48  ENROLLMENT DETAIL — enr-detail / ed-*
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .enr-detail {
  --bg: var(--surface-page); --surface: var(--surface-card); --surface2: var(--surface-subtle);
  --border: var(--border-default); --border2: var(--border-subtle);
  --text: var(--text-primary); --text2: var(--text-secondary); --text3: var(--text-muted);
  --purple-light: var(--brand-primary-light); --purple-mid: var(--brand-primary);
}
[data-theme="modern"] .enr-detail .ed-card-head { background: var(--surface-subtle) !important; border-bottom: 1px solid var(--border-subtle) !important; }
[data-theme="modern"] .enr-detail .ed-badge-gray { background: var(--surface-muted) !important; color: var(--text-secondary) !important; border-color: var(--border-default) !important; }
[data-theme="modern"] .enr-detail .ed-trainee-banner { background: linear-gradient(135deg,rgba(91,33,182,.06),rgba(139,92,246,.03)) !important; border-bottom: 1px solid var(--border-subtle) !important; }
[data-theme="modern"] .enr-detail .ed-form-input { background: var(--surface-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; border-radius: var(--radius-md) !important; }
[data-theme="modern"] .enr-detail .ed-form-input:focus { border-color: var(--border-focus) !important; box-shadow: var(--shadow-focus) !important; }
[data-theme="modern"] .enr-detail .ed-btn-ghost:hover  { background: var(--surface-subtle) !important; }
[data-theme="modern"] .enr-detail .ed-btn-purple:hover { background: var(--brand-primary-light) !important; }
[data-theme="modern"] .enr-detail .ed-btn-amber:hover  { background: #fef3c7 !important; }
[data-theme="modern"] .enr-detail .ed-btn-green:hover  { background: #ecfdf5 !important; }
[data-theme="modern"] .enr-detail .ed-invoice-row.total { background: var(--surface-subtle) !important; border-top: 1px solid var(--border-default) !important; }
[data-theme="modern"] .enr-detail .ed-toast { background: var(--surface-overlay) !important; border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-md) !important; }

/* ══════════════════════════════════════════════════════════
   §49  COACH / HUB / DEV PORTALS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .coach-class-card .card-body  { background: var(--surface-card) !important; }
[data-theme="modern"] .coach-class-card .card-footer { background: var(--surface-subtle) !important; border-top-color: var(--border-subtle) !important; }
[data-theme="modern"] .coach-page-header { background: var(--surface-subtle) !important; border-bottom: 1px solid var(--border-default) !important; }

[data-theme="modern"] .hub-card, [data-theme="modern"] .hub-post-card, [data-theme="modern"] .hub-profile-card,
[data-theme="modern"] .dev-card, [data-theme="modern"] .course-card, [data-theme="modern"] .lesson-card {
  background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-2xl) !important; box-shadow: var(--shadow-sm) !important;
}
[data-theme="modern"] .hero-section, [data-theme="modern"] .marketing-hero { background: linear-gradient(135deg,#3b0764,#5b21b6 50%,#7c3aed) !important; }
[data-theme="modern"] .login-card { background: #fdfcff !important; border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-lg) !important; }

/* ══════════════════════════════════════════════════════════
   §50  SCROLLBAR
══════════════════════════════════════════════════════════ */
[data-theme="modern"] ::-webkit-scrollbar,
[data-theme="modern-dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme="modern"] ::-webkit-scrollbar-track  { background: var(--surface-subtle); }
[data-theme="modern-dark"] ::-webkit-scrollbar-track { background: #15132a; }
[data-theme="modern"] ::-webkit-scrollbar-thumb,
[data-theme="modern-dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong) !important; border-radius: 3px; }
[data-theme="modern"] ::-webkit-scrollbar-thumb:hover,
[data-theme="modern-dark"] ::-webkit-scrollbar-thumb:hover { background: var(--brand-primary) !important; }

/* ══════════════════════════════════════════════════════════
   §51  BOOTSTRAP UTILITY PATCHES
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .bg-light, [data-theme="modern-dark"] .bg-light { background-color: var(--surface-subtle) !important; }
[data-theme="modern"] .bg-white, [data-theme="modern-dark"] .bg-white  { background-color: var(--surface-card)   !important; }
[data-theme="modern"] .text-muted,    [data-theme="modern-dark"] .text-muted    { color: var(--text-muted)     !important; }
[data-theme="modern"] .text-secondary,[data-theme="modern-dark"] .text-secondary{ color: var(--text-secondary)  !important; }
[data-theme="modern"] .text-dark,     [data-theme="modern-dark"] .text-dark     { color: var(--text-primary)   !important; }
[data-theme="modern"] .border,        [data-theme="modern-dark"] .border        { border-color: var(--border-default) !important; }
[data-theme="modern"] .border-top,    [data-theme="modern-dark"] .border-top    { border-top-color:    var(--border-default) !important; }
[data-theme="modern"] .border-bottom, [data-theme="modern-dark"] .border-bottom { border-bottom-color: var(--border-default) !important; }
[data-theme="modern"] .border-start,  [data-theme="modern-dark"] .border-start  { border-left-color:   var(--border-default) !important; }
[data-theme="modern"] .border-end,    [data-theme="modern-dark"] .border-end    { border-right-color:  var(--border-default) !important; }
[data-theme="modern-dark"] [class*="border-"]:not([class*="border-0"]):not(.border-primary):not(.border-success):not(.border-danger):not(.border-warning):not(.border-info) { border-color: var(--border-default) !important; }

[data-theme="modern-dark"] h1,[data-theme="modern-dark"] h2,[data-theme="modern-dark"] h3,
[data-theme="modern-dark"] h4,[data-theme="modern-dark"] h5,[data-theme="modern-dark"] h6 { color: var(--text-heading-accent) !important; }

/* ══════════════════════════════════════════════════════════
   §52  INLINE-STYLE HEURISTIC OVERRIDES
   Catches slate/gray backgrounds hard-coded in templates.
══════════════════════════════════════════════════════════ */
[data-theme="modern"] div[style*="background:#f8fafc"],
[data-theme="modern"] div[style*="background: #f8fafc"],
[data-theme="modern"] div[style*="background:#f1f5f9"],
[data-theme="modern"] div[style*="background: #f1f5f9"],
[data-theme="modern"] div[style*="background:#eef1f5"],
[data-theme="modern"] div[style*="background:#f8f9fa"],
[data-theme="modern"] div[style*="background: #f8f9fa"],
[data-theme="modern"] div[style*="background-color:#f8f9fa"] { background: var(--surface-subtle) !important; }

[data-theme="modern"] td[style*="background:#f8fafc"],
[data-theme="modern"] td[style*="background:#f1f5f9"] { background: var(--surface-subtle) !important; }
[data-theme="modern"] td[style*="border-top:2px solid #334155"],
[data-theme="modern-dark"] td[style*="border-top:2px solid #334155"] { border-top-color: var(--border-strong) !important; }
[data-theme="modern"] td[style*="background:#f8fafc"],
[data-theme="modern-dark"] td[style*="background:#f8fafc"] { background: var(--surface-subtle) !important; }

[data-theme="modern-dark"] div[style*="background:#f8fafc"],
[data-theme="modern-dark"] div[style*="background: #f8fafc"],
[data-theme="modern-dark"] div[style*="background:#f1f5f9"],
[data-theme="modern-dark"] div[style*="background: #f1f5f9"],
[data-theme="modern-dark"] div[style*="background:#eef1f5"],
[data-theme="modern-dark"] div[style*="background:#f8f9fa"],
[data-theme="modern-dark"] div[style*="background:white"],
[data-theme="modern-dark"] div[style*="background: white"],
[data-theme="modern-dark"] div[style*="background:#fff"],
[data-theme="modern-dark"] div[style*="background:#ffffff"] { background: var(--surface-subtle) !important; color: var(--text-primary) !important; }

/* ══════════════════════════════════════════════════════════
   §53  LINKS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] a:not(.btn):not(.nav-link):not(.dropdown-item)       { color: var(--text-link); }
[data-theme="modern"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--brand-primary-dark); }

/* ══════════════════════════════════════════════════════════
   §54  MISC REPORT ELEMENTS
══════════════════════════════════════════════════════════ */
[data-theme="modern"] .mini-bar,  [data-theme="modern-dark"] .mini-bar  { background: var(--border-default) !important; }
[data-theme="modern"] .stock-bar, [data-theme="modern-dark"] .stock-bar { background: var(--border-default) !important; }

/* ══════════════════════════════════════════════════════════
   §55  PEOPLE PAGE  (Parents & Trainees 3-column layout)
══════════════════════════════════════════════════════════ */

/* Left column — parent list */
[data-theme="modern"] .ppl-left,
[data-theme="modern-dark"] .ppl-left {
  background: var(--surface-card) !important;
  border-right-color: var(--border-default) !important;
}
[data-theme="modern"] .ppl-left-header,
[data-theme="modern-dark"] .ppl-left-header {
  background: var(--surface-card) !important;
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="modern"] .ppl-left-title,
[data-theme="modern-dark"] .ppl-left-title {
  color: var(--text-heading-accent) !important;
  font-weight: 700;
}

/* Search input */
[data-theme="modern"] #ppl-search-input,
[data-theme="modern-dark"] #ppl-search-input {
  background: var(--surface-input) !important;
  border-color: var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
}
[data-theme="modern"] #ppl-search-input:focus,
[data-theme="modern-dark"] #ppl-search-input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  background: var(--surface-card) !important;
}

/* Parent list rows */
[data-theme="modern"] .ppl-item,
[data-theme="modern-dark"] .ppl-item {
  border-bottom-color: var(--border-subtle) !important;
  transition: background .12s, border-color .12s;
}
[data-theme="modern"] .ppl-item:hover,
[data-theme="modern-dark"] .ppl-item:hover {
  background: var(--surface-subtle) !important;
}
[data-theme="modern"] .ppl-item.active,
[data-theme="modern-dark"] .ppl-item.active {
  background: var(--brand-primary-light) !important;
  border-left: 3px solid var(--brand-primary) !important;
}

/* Parent avatar */
[data-theme="modern"] .ppl-item-avatar,
[data-theme="modern-dark"] .ppl-item-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--radius-md) !important;
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary) !important;
  font-weight: 700;
  flex-shrink: 0;
}

/* Parent name & meta */
[data-theme="modern"] .ppl-item-name,
[data-theme="modern-dark"] .ppl-item-name {
  color: var(--text-primary) !important;
  font-weight: 600;
}
[data-theme="modern"] .ppl-item-meta,
[data-theme="modern-dark"] .ppl-item-meta {
  color: var(--text-muted) !important;
}

/* Trainee-count badge — pill, pushed to far right */
[data-theme="modern"] .ppl-item-badge,
[data-theme="modern-dark"] .ppl-item-badge {
  margin-left: auto !important;
  flex-shrink: 0;
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-pill) !important;
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 7px;
}

/* Matched-trainee sub-rows */
[data-theme="modern"] .ppl-sub-trainee-row,
[data-theme="modern-dark"] .ppl-sub-trainee-row {
  background: var(--surface-subtle) !important;
  border-top-color: var(--border-subtle) !important;
}
[data-theme="modern"] .ppl-sub-trainee-row:hover,
[data-theme="modern-dark"] .ppl-sub-trainee-row:hover {
  background: var(--brand-primary-light) !important;
}
[data-theme="modern"] .ppl-sub-trainee-avatar,
[data-theme="modern-dark"] .ppl-sub-trainee-avatar {
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
}
[data-theme="modern"] .ppl-sub-trainee-name,
[data-theme="modern-dark"] .ppl-sub-trainee-name {
  color: var(--text-primary) !important;
}
[data-theme="modern"] .ppl-sub-trainee-code,
[data-theme="modern-dark"] .ppl-sub-trainee-code {
  color: var(--text-muted) !important;
}
[data-theme="modern"] .ppl-sub-trainee-arrow,
[data-theme="modern-dark"] .ppl-sub-trainee-arrow {
  color: var(--brand-primary) !important;
}

/* Middle column — trainees list */
[data-theme="modern"] .ppl-mid,
[data-theme="modern-dark"] .ppl-mid {
  background: var(--surface-subtle) !important;
  border-right-color: var(--border-default) !important;
}

/* Right column — trainee detail */
[data-theme="modern"] .ppl-right,
[data-theme="modern-dark"] .ppl-right {
  background: var(--surface-card) !important;
  border-left-color: var(--border-default) !important;
}