/* ============================================================
 * ENTERPRISE THEME ENGINE & DESIGN SYSTEM
 * School Management System - Centralized Design Tokens
 * ============================================================ */

/* --- 1. BASE TYPOGRAPHY & LAYOUT INTEGRATION --- */
body {
  font-family: var(--theme-font-body, 'Inter', system-ui, -apple-system, sans-serif);
  font-size: var(--theme-font-size-base, 14px);
  line-height: var(--theme-line-height, 1.5);
  letter-spacing: var(--theme-letter-spacing, -0.2px);
  background-color: var(--theme-body-bg, #f8fafc);
  color: var(--theme-text-primary, #0f172a);
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6,
.page-title, .project-title, .sidebar-company-name, .navbar-brand {
  font-family: var(--theme-font-heading, 'Outfit', 'Inter', sans-serif);
  font-weight: var(--theme-font-weight-heading, 700);
}

/* --- 2. UNIVERSAL COMPONENT TOKEN BINDINGS --- */
.card, .stat-card, .filter-card {
  background-color: var(--theme-card-bg, #ffffff) !important;
  border-radius: var(--theme-radius-lg, 14px) !important;
  box-shadow: var(--theme-shadow-card, 0 4px 16px rgba(15,23,42,0.05)) !important;
  border: 1px solid var(--theme-border, #e2e8f0) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Universal Page Header & Banner Alignment */
.project-header, .builder-header-banner {
  background: var(--theme-brand-gradient, linear-gradient(135deg, var(--theme-secondary, #292326) 0%, var(--theme-primary, #B9828F) 100%)) !important;
  border-bottom: 1px solid var(--theme-border-strong, rgba(200, 169, 107, 0.3)) !important;
  color: #ffffff !important;
  box-shadow: var(--theme-shadow-card, 0 10px 30px rgba(0, 0, 0, 0.15)) !important;
}

.project-title, .builder-header-title {
  color: #ffffff !important;
  font-family: var(--theme-font-heading, 'Outfit', sans-serif) !important;
}

.project-title i, .builder-header-title i {
  color: var(--theme-accent, #C8A96B) !important;
  filter: drop-shadow(0 0 8px rgba(200, 169, 107, 0.6)) !important;
}

.category-card {
  background: var(--theme-card-bg, #ffffff) !important;
  border-radius: var(--theme-radius-xl, 18px) !important;
  border: 1px solid var(--theme-border, #E9DFD8) !important;
  box-shadow: var(--theme-shadow-card, 0 4px 16px rgba(0, 0, 0, 0.04)) !important;
}

.category-card-header {
  background: var(--theme-surface-secondary, #F3ECE7) !important;
  border-bottom: 1px solid var(--theme-border, #E9DFD8) !important;
}

.dashboard-card {
  background: var(--theme-card-bg, #ffffff) !important;
  border: 1px solid var(--theme-border, #E9DFD8) !important;
  border-radius: var(--theme-radius-lg, 14px) !important;
  box-shadow: var(--theme-shadow-card, 0 4px 16px rgba(0, 0, 0, 0.04)) !important;
}

.dashboard-card-header {
  border-bottom: 1px solid var(--theme-border, #E9DFD8) !important;
}

.modern-table {
  background: var(--theme-card-bg, #ffffff) !important;
  color: var(--theme-text-primary, #332D2F) !important;
}

.modern-table thead {
  background: var(--theme-surface-secondary, #F3ECE7) !important;
  border-bottom: 1.5px solid var(--theme-border, #E9DFD8) !important;
}

.modern-table th {
  color: var(--theme-text-muted, #817477) !important;
}

.modern-table tbody tr {
  border-bottom: 1px solid var(--theme-border, #E9DFD8) !important;
}

.modern-table tbody tr:hover {
  background: var(--theme-surface-secondary, #F3ECE7) !important;
}

/* Buttons */
.btn-primary, .btn-header-action {
  background: var(--theme-primary, #B9828F) !important;
  border-color: var(--theme-primary, #B9828F) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
  border-radius: var(--theme-radius-md, 10px) !important;
  padding-top: var(--theme-btn-padding-y, 9px) !important;
  padding-bottom: var(--theme-btn-padding-y, 9px) !important;
  padding-left: var(--theme-btn-padding-x, 18px) !important;
  padding-right: var(--theme-btn-padding-x, 18px) !important;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover, .btn-header-action:hover {
  background: var(--theme-primary-hover, var(--theme-primary, #B9828F)) !important;
  border-color: var(--theme-primary-hover, var(--theme-primary, #B9828F)) !important;
  color: var(--theme-btn-primary-hover-text, var(--theme-btn-primary-text, #ffffff)) !important;
  transform: translateY(-1px);
  box-shadow: var(--theme-btn-hover-shadow, 0 4px 14px rgba(var(--theme-primary-rgb), 0.35)) !important;
}

.btn-primary:active, .btn-header-action:active,
.btn-primary:focus-visible, .btn-header-action:focus-visible {
  background: var(--theme-primary-active, var(--theme-primary-hover, var(--theme-primary))) !important;
  border-color: var(--theme-primary-active, var(--theme-primary-hover, var(--theme-primary))) !important;
  color: var(--theme-btn-primary-hover-text, var(--theme-btn-primary-text, #ffffff)) !important;
  box-shadow: var(--theme-focus-ring, 0 0 0 3px rgba(var(--theme-primary-rgb), 0.2)) !important;
  transform: translateY(0);
}

.btn-secondary {
  border-radius: var(--theme-radius-md, 10px) !important;
}

/* Form Controls */
.form-control, .form-select, textarea.form-control {
  border-radius: var(--theme-radius-md, 10px) !important;
  border-color: var(--theme-input-border, var(--theme-border, #e2e8f0)) !important;
  background-color: var(--theme-input-actual-bg, var(--theme-input-bg, #ffffff)) !important;
  backdrop-filter: var(--theme-input-actual-backdrop-filter, none);
  -webkit-backdrop-filter: var(--theme-input-actual-backdrop-filter, none);
  color: var(--theme-input-text, var(--theme-text-primary, #0f172a)) !important;
  padding-top: var(--theme-input-padding-y, 9px) !important;
  padding-bottom: var(--theme-input-padding-y, 9px) !important;
  font-size: var(--theme-font-size-base, 14px) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder, textarea.form-control::placeholder {
  color: var(--theme-input-placeholder, var(--theme-text-muted, #94a3b8)) !important;
  opacity: 0.85;
}

.form-control:focus, .form-select:focus, textarea.form-control:focus {
  border-color: var(--theme-input-focus, var(--theme-border-focus, var(--theme-primary))) !important;
  box-shadow: var(--theme-focus-ring) !important;
  outline: none !important;
}

/* Tables */
.table {
  color: var(--theme-table-text, var(--theme-text-primary, #0f172a));
  background-color: var(--theme-table-actual-bg, var(--theme-table-bg, var(--theme-card-bg, transparent)));
  backdrop-filter: var(--theme-table-actual-backdrop-filter, none);
  -webkit-backdrop-filter: var(--theme-table-actual-backdrop-filter, none);
}

.table th, .table td {
  padding-top: var(--theme-table-padding-y, 11px) !important;
  padding-bottom: var(--theme-table-padding-y, 11px) !important;
  padding-left: var(--theme-table-padding-x, 16px) !important;
  padding-right: var(--theme-table-padding-x, 16px) !important;
  border-color: var(--theme-table-border, var(--theme-border, #e2e8f0));
}

.table thead th {
  background-color: var(--theme-table-header-bg, var(--theme-surface-secondary, #f1f5f9)) !important;
  color: var(--theme-table-header-color, var(--theme-text-secondary, #475569)) !important;
  font-weight: 700;
  font-size: 0.775rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--theme-table-stripe-bg, rgba(var(--theme-primary-rgb), 0.025)) !important;
}

.table tbody tr:hover > *,
.table-hover tbody tr:hover > * {
  background-color: var(--theme-table-hover-bg, rgba(var(--theme-primary-rgb), 0.08)) !important;
}

/* Modals & Dropdowns */
.modal-content {
  background-color: var(--theme-modal-bg, var(--theme-card-bg, #ffffff)) !important;
  border-radius: var(--theme-radius-xl, 20px) !important;
  box-shadow: var(--theme-shadow-modal, 0 20px 40px rgba(15,23,42,0.18)) !important;
  border: 1px solid var(--theme-border, #e2e8f0) !important;
  overflow: hidden;
}

.dropdown-menu {
  border-radius: var(--theme-radius-lg, 14px) !important;
  box-shadow: var(--theme-shadow-dropdown, 0 10px 30px rgba(15,23,42,0.12)) !important;
  border: 1px solid var(--theme-border, #e2e8f0) !important;
  background-color: var(--theme-card-bg, #ffffff) !important;
}

/* Badges */
.badge-pill, .badge-status, .badge.rounded-pill {
  border-radius: var(--theme-radius-pill, 9999px) !important;
}

/* Links */
a {
  color: var(--theme-link, var(--theme-primary));
}
a:hover {
  color: var(--theme-link-hover, var(--theme-primary-hover));
}

/* Section 2B: (Legacy 20 pre-configured design families removed in favor of the 6 Enterprise Themes) */

/* ============================================================
 * 3. 10 SIDEBAR DESIGN STYLES
 * ============================================================ */

/* Base Sidebar Sizing */
.sidebar {
  width: var(--theme-sidebar-width, 280px);
  background: var(--theme-sidebar-bg, var(--theme-brand-gradient, linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%)));
  box-shadow: var(--theme-shadow-sidebar, 0 0 30px rgba(15, 23, 42, 0.25));
}

#page-content-wrapper {
  left: var(--theme-sidebar-width, 280px);
}

body.sidebar-collapsed #page-content-wrapper {
  left: var(--theme-sidebar-collapsed-width, 70px) !important;
}

body.sidebar-collapsed .sidebar {
  width: var(--theme-sidebar-collapsed-width, 70px) !important;
}

/* Style 1: Classic Enterprise (Default) */
[data-sidebar-style="classic"] .sidebar {
  background: var(--theme-sidebar-bg, var(--theme-brand-gradient, linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%)));
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
[data-sidebar-style="classic"] .sidebar .nav-link.active,
[data-sidebar-style="classic"] .sidebar .dropdown-item.active {
  background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.25) 0%, rgba(var(--theme-accent-rgb), 0.18) 100%);
  border-left: 3px solid var(--theme-primary);
}

/* Style 2: Modern Rounded */
[data-sidebar-style="modern"] .sidebar {
  background: var(--theme-sidebar-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
[data-sidebar-style="modern"] .sidebar .nav-item {
  margin: 6px 12px;
}
[data-sidebar-style="modern"] .sidebar .nav-link,
[data-sidebar-style="modern"] .sidebar .dropdown-item {
  border-radius: 9999px !important;
  padding: 10px 18px;
}
[data-sidebar-style="modern"] .sidebar .nav-link.active,
[data-sidebar-style="modern"] .sidebar .dropdown-item.active {
  background: var(--theme-brand-gradient, var(--theme-primary)) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
  box-shadow: var(--theme-btn-hover-shadow, 0 4px 18px rgba(var(--theme-primary-rgb), 0.35));
}

/* Style 3: Compact High-Density */
[data-sidebar-style="compact"] .sidebar {
  width: 230px !important;
}
[data-sidebar-style="compact"] #page-content-wrapper {
  left: 230px !important;
}
[data-sidebar-style="compact"] .sidebar .sidebar-header {
  padding: 12px 14px;
}
[data-sidebar-style="compact"] .sidebar .sidebar-logo-card {
  width: 36px; height: 36px; min-width: 36px;
}
[data-sidebar-style="compact"] .sidebar .nav-link,
[data-sidebar-style="compact"] .sidebar .dropdown-header {
  padding: 8px 12px;
  font-size: 0.825rem;
}
[data-sidebar-style="compact"] .sidebar .category-title {
  padding: 6px 12px 2px;
  font-size: 0.65rem;
}

/* Style 4: Icon Rail */
[data-sidebar-style="icon-rail"] .sidebar {
  width: 82px;
  overflow-x: hidden;
}
[data-sidebar-style="icon-rail"] #page-content-wrapper {
  left: 82px;
}
[data-sidebar-style="icon-rail"] .sidebar:not(:hover) .sidebar-brand-text-container,
[data-sidebar-style="icon-rail"] .sidebar:not(:hover) .nav-link span,
[data-sidebar-style="icon-rail"] .sidebar:not(:hover) .dropdown-title span,
[data-sidebar-style="icon-rail"] .sidebar:not(:hover) .category-title,
[data-sidebar-style="icon-rail"] .sidebar:not(:hover) .dropdown-arrow,
[data-sidebar-style="icon-rail"] .sidebar:not(:hover) .dropdown-content {
  display: none !important;
}
[data-sidebar-style="icon-rail"] .sidebar:hover {
  width: 280px;
  z-index: 1060;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
[data-sidebar-style="icon-rail"] .sidebar:hover .sidebar-brand-text-container,
[data-sidebar-style="icon-rail"] .sidebar:hover .nav-link span,
[data-sidebar-style="icon-rail"] .sidebar:hover .dropdown-title span,
[data-sidebar-style="icon-rail"] .sidebar:hover .category-title,
[data-sidebar-style="icon-rail"] .sidebar:hover .dropdown-arrow,
[data-sidebar-style="icon-rail"] .sidebar:hover .dropdown-content {
  display: block !important;
}

/* Style 5: Floating Island */
[data-sidebar-style="floating"] .sidebar {
  top: 14px;
  left: 14px;
  height: calc(100vh - 28px);
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
[data-sidebar-style="floating"] #page-content-wrapper {
  left: calc(var(--theme-sidebar-width, 280px) + 28px);
}

/* Style 6: Glassmorphic Blur */
[data-sidebar-style="glass"] .sidebar {
  background: var(--theme-sidebar-bg, rgba(255, 255, 255, 0.75)) !important;
  backdrop-filter: blur(var(--theme-glass-blur, 16px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--theme-glass-blur, 16px)) saturate(160%);
  border-right: 1px solid var(--theme-glass-border, rgba(255, 255, 255, 0.5));
}
[data-sidebar-style="glass"] .sidebar .nav-link:hover,
[data-sidebar-style="glass"] .sidebar .dropdown-header:hover {
  background: rgba(var(--theme-primary-rgb, 2, 132, 199), 0.08);
}
[data-sidebar-style="glass"] .sidebar .nav-link.active {
  background: rgba(var(--theme-primary-rgb, 2, 132, 199), 0.16) !important;
  color: var(--theme-primary) !important;
  border: 1px solid rgba(var(--theme-primary-rgb, 2, 132, 199), 0.35);
}

/* Style 7: Vibrant Gradient */
[data-sidebar-style="gradient"] .sidebar {
  background: var(--theme-brand-gradient, linear-gradient(145deg, var(--theme-primary) 0%, var(--theme-secondary) 100%)) !important;
  border-right: none;
}
[data-sidebar-style="gradient"] .sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Style 8: Scandinavian Minimal */
/* NOTE: minimal-atelier theme overrides these via [data-theme-id="minimal-atelier"] selectors below */
[data-sidebar-style="minimal"] .sidebar {
  background: var(--theme-sidebar-bg, #0f172a);
  border-right: 1px solid var(--theme-sidebar-border, #1e293b);
  box-shadow: none;
}
[data-sidebar-style="minimal"] .sidebar .nav-link {
  border-radius: 4px;
}
[data-sidebar-style="minimal"] .sidebar .nav-link.active {
  background: var(--theme-sidebar-active-bg, #1e293b);
  color: var(--theme-sidebar-active-text, #ffffff);
  border-left: 3px solid var(--theme-sidebar-active-text, #ffffff);
}

/* Style 9: Dark Pro Obsidian */
[data-sidebar-style="dark-pro"] .sidebar {
  background: var(--theme-sidebar-bg, #090d16) !important;
  border-right: 1px solid var(--theme-sidebar-border, #1e293b);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
[data-sidebar-style="dark-pro"] .sidebar .sidebar-logo-card {
  background: var(--theme-surface-secondary, #0f172a);
  border-color: var(--theme-accent);
  box-shadow: 0 0 15px rgba(var(--theme-accent-rgb, 56, 189, 248), 0.2);
}
[data-sidebar-style="dark-pro"] .sidebar .nav-link.active {
  background: rgba(var(--theme-accent-rgb, 56, 189, 248), 0.12) !important;
  color: var(--theme-accent) !important;
  border-left: 3px solid var(--theme-accent);
}

/* Style 10: Soft Material Touch */
[data-sidebar-style="soft-material"] .sidebar {
  background: #1e2238;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}
[data-sidebar-style="soft-material"] .sidebar .nav-link {
  margin: 3px 10px;
  border-radius: 12px;
}
[data-sidebar-style="soft-material"] .sidebar .nav-link.active {
  background: #272c47;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(255,255,255,0.05);
  color: var(--theme-accent);
}

/* ============================================================
 * 4. 10 NAVBAR DESIGN STYLES
 * ============================================================ */

.top-navbar {
  height: var(--theme-navbar-height, 68px);
  background-color: var(--theme-navbar-bg, #ffffff);
  box-shadow: var(--theme-shadow-navbar, 0 2px 8px rgba(15, 23, 42, 0.04));
  border-bottom: 1px solid var(--theme-border, #e2e8f0);
  transition: all 0.25s ease;
}

/* Style 1: Classic Full-Width */
[data-navbar-style="classic"] .top-navbar {
  background-color: var(--theme-navbar-bg, #ffffff);
  border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

/* Style 2: Minimal Borderless */
[data-navbar-style="minimal"] .top-navbar {
  background: transparent;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  box-shadow: none;
}
[data-navbar-style="minimal"] .context-badge-btn {
  background: transparent !important;
  border-color: transparent !important;
}

/* Style 3: Floating Pill Nav */
[data-navbar-style="floating"] .top-navbar {
  margin: 12px 18px 0;
  border-radius: 18px;
  border: 1px solid var(--theme-border, #e2e8f0);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

/* Style 4: Frosted Glass */
[data-navbar-style="glass"] .top-navbar {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/* Style 5: Dark Pro Header */
[data-navbar-style="dark-pro"] .top-navbar {
  background: #090d16 !important;
  border-bottom: 1px solid #1e293b;
  color: #f8fafc;
}
[data-navbar-style="dark-pro"] .context-badge-btn,
[data-navbar-style="dark-pro"] .navbar-toggle-btn,
[data-navbar-style="dark-pro"] .nav-icon-btn {
  background: #111827 !important;
  border-color: #1e293b !important;
  color: #f8fafc !important;
}

/* Style 6: Centered Campus Branding */
[data-navbar-style="centered"] .top-navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
[data-navbar-style="centered"] .top-navbar > div:nth-child(2) {
  justify-self: center;
}

/* Style 7: Compact 52px */
[data-navbar-style="compact"] .top-navbar {
  height: 52px !important;
  padding: 0 1rem !important;
}
[data-navbar-style="compact"] .context-badge-btn {
  padding: 5px 10px !important;
  font-size: 0.775rem !important;
}

/* Style 8: Executive Large 80px */
[data-navbar-style="large"] .top-navbar {
  height: 80px !important;
  padding: 0 2.25rem !important;
}
[data-navbar-style="large"] .context-badge-btn {
  padding: 8px 16px !important;
  font-size: 0.9rem !important;
}

/* Style 9: Rounded Geometry */
[data-navbar-style="rounded"] .top-navbar {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom: 2px solid var(--theme-border, #e2e8f0);
}

/* Style 10: Enterprise Command Rail */
[data-navbar-style="enterprise"] .top-navbar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 2px solid var(--theme-primary);
}

/* ============================================================
 * 5. LAYOUT DENSITY CONTROLS
 * ============================================================ */

[data-density="compact"] main.container-fluid {
  padding: 1rem !important;
}
[data-density="compact"] .card,
[data-density="compact"] .stat-card,
[data-density="compact"] .filter-card {
  padding: 12px 16px !important;
}
[data-density="compact"] .row.g-4 {
  --bs-gutter-y: 0.75rem !important;
  --bs-gutter-x: 0.75rem !important;
}

[data-density="spacious"] main.container-fluid {
  padding: 2.5rem !important;
}
[data-density="spacious"] .card,
[data-density="spacious"] .stat-card,
[data-density="spacious"] .filter-card {
  padding: 28px 32px !important;
}
[data-density="spacious"] .row.g-4 {
  --bs-gutter-y: 2rem !important;
  --bs-gutter-x: 2rem !important;
}

/* ============================================================
 * 6. DARK MODE STRUCTURAL ENGINE
 * Applies structural/behavioral dark mode rules.
 * Per-theme color tokens are set by ThemeManager::renderCssVariables() inline.
 * This block must NOT override --theme-* color variables already set inline.
 * ============================================================ */

[data-theme-mode="dark"] {
  color-scheme: dark;
}

/* Dark mode body & page background — use theme token, not hardcoded value */
[data-theme-mode="dark"] body {
  background-color: var(--theme-body-bg) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme-mode="dark"] #page-content-wrapper {
  background-color: var(--theme-body-bg) !important;
}

[data-theme-mode="dark"] .card,
[data-theme-mode="dark"] .stat-card,
[data-theme-mode="dark"] .filter-card,
[data-theme-mode="dark"] .bg-white {
  background-color: var(--theme-card-bg) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme-mode="dark"] .card-header,
[data-theme-mode="dark"] .card-footer,
[data-theme-mode="dark"] .bg-light {
  background-color: var(--theme-surface-secondary) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme-mode="dark"] .text-dark {
  color: var(--theme-text-primary) !important;
}

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

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

[data-theme-mode="dark"] .form-control,
[data-theme-mode="dark"] .form-select {
  background-color: var(--theme-input-bg) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme-mode="dark"] .form-control:focus,
[data-theme-mode="dark"] .form-select:focus {
  background-color: var(--theme-input-bg) !important;
  border-color: var(--theme-accent) !important;
  color: var(--theme-text-primary) !important;
}

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

[data-theme-mode="dark"] .table {
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border) !important;
}

[data-theme-mode="dark"] .table thead th {
  background-color: var(--theme-surface-secondary) !important;
  color: var(--theme-text-secondary) !important;
  border-color: var(--theme-border) !important;
}

[data-theme-mode="dark"] .table tbody tr {
  background-color: transparent !important;
  color: var(--theme-text-primary) !important;
}

[data-theme-mode="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

[data-theme-mode="dark"] .top-navbar {
  background-color: var(--theme-navbar-bg) !important;
  border-color: var(--theme-border) !important;
}

[data-theme-mode="dark"] .context-badge-btn,
[data-theme-mode="dark"] .navbar-toggle-btn,
[data-theme-mode="dark"] .nav-icon-btn,
[data-theme-mode="dark"] .user-profile-toggle {
  background-color: var(--theme-surface-secondary) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme-mode="dark"] .dropdown-menu {
  background-color: var(--theme-card-bg) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme-mode="dark"] .dropdown-item {
  color: var(--theme-text-secondary) !important;
}

[data-theme-mode="dark"] .dropdown-item:hover {
  background-color: var(--theme-surface-secondary) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme-mode="dark"] .branch-option-item:hover {
  background-color: var(--theme-surface-secondary) !important;
  color: var(--theme-accent) !important;
}

[data-theme-mode="dark"] .modal-content {
  background-color: var(--theme-modal-bg) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme-mode="dark"] footer {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-muted) !important;
}

[data-theme-mode="dark"] .toast-item {
  background-color: var(--theme-card-bg) !important;
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border-strong) !important;
}

/* System Mode Auto-Switching — defers to per-theme tokens set inline */
@media (prefers-color-scheme: dark) {
  [data-theme-mode="system"] {
    color-scheme: dark;
  }
  [data-theme-mode="system"] body,
  [data-theme-mode="system"] #page-content-wrapper {
    background-color: var(--theme-body-bg) !important;
    color: var(--theme-text-primary) !important;
  }
  [data-theme-mode="system"] .card,
  [data-theme-mode="system"] .stat-card,
  [data-theme-mode="system"] .filter-card,
  [data-theme-mode="system"] .bg-white {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-primary) !important;
  }
  [data-theme-mode="system"] .top-navbar {
    background-color: var(--theme-navbar-bg) !important;
    border-color: var(--theme-border) !important;
  }
  [data-theme-mode="system"] .form-control,
  [data-theme-mode="system"] .form-select {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-border-strong) !important;
    color: var(--theme-text-primary) !important;
  }
}

/* ============================================================
 * 3. 30 COMPLETE THEME VISUAL IDENTITIES & COMPONENT ENGINE
 * ============================================================ */

/* Legacy theme identities pruned for enterprise 6-theme system */
/* --- C. UNIVERSAL DARK LUXURY ENGINE (ALL 5 DARK THEMES) --- */
[data-theme-mode="dark"],




[data-theme-id="obsidian-dark"] {
  color-scheme: dark !important;
}

[data-theme-mode="dark"] body,
[data-theme-mode="dark"] #wrapper,
[data-theme-mode="dark"] #page-content-wrapper,
[data-theme-id="obsidian-dark"] body,
[data-theme-id="obsidian-dark"] #wrapper,
[data-theme-id="obsidian-dark"] body,
[data-theme-id="obsidian-dark"] #wrapper,
[data-theme-id="obsidian-dark"] body,
[data-theme-id="obsidian-dark"] #wrapper,
[data-theme-id="obsidian-dark"] body,
[data-theme-id="obsidian-dark"] #wrapper,
[data-theme-id="obsidian-dark"] body,
[data-theme-id="obsidian-dark"] #wrapper {
  background-color: var(--theme-body-bg, #0D0E12) !important;
  color: var(--theme-text-primary, #EDEDF0) !important;
}

[data-theme-mode="dark"] .card,
[data-theme-mode="dark"] .stat-card,
[data-theme-mode="dark"] .filter-card,
[data-theme-mode="dark"] .dashboard-card,
[data-theme-mode="dark"] .category-card,
[data-theme-mode="dark"] .bg-white,
[data-theme-id="obsidian-dark"] .card,
[data-theme-id="obsidian-dark"] .stat-card,
[data-theme-id="obsidian-dark"] .dashboard-card,
[data-theme-id="obsidian-dark"] .card,
[data-theme-id="obsidian-dark"] .stat-card,
[data-theme-id="obsidian-dark"] .dashboard-card,
[data-theme-id="obsidian-dark"] .card,
[data-theme-id="obsidian-dark"] .stat-card,
[data-theme-id="obsidian-dark"] .dashboard-card,
[data-theme-id="obsidian-dark"] .card,
[data-theme-id="obsidian-dark"] .stat-card,
[data-theme-id="obsidian-dark"] .dashboard-card,
[data-theme-id="obsidian-dark"] .card,
[data-theme-id="obsidian-dark"] .stat-card,
[data-theme-id="obsidian-dark"] .dashboard-card {
  background-color: var(--theme-card-bg, #15171E) !important;
  border-color: var(--theme-border, #262936) !important;
  color: var(--theme-text-primary, #EDEDF0) !important;
}

[data-theme-mode="dark"] .top-navbar,
[data-theme-id="obsidian-dark"] .top-navbar,
[data-theme-id="obsidian-dark"] .top-navbar,
[data-theme-id="obsidian-dark"] .top-navbar,
[data-theme-id="obsidian-dark"] .top-navbar,
[data-theme-id="obsidian-dark"] .top-navbar {
  background-color: var(--theme-navbar-bg, #12141A) !important;
  border-color: var(--theme-border, #262936) !important;
}

[data-theme-mode="dark"] .sidebar,
[data-theme-id="obsidian-dark"] .sidebar,
[data-theme-id="obsidian-dark"] .sidebar,
[data-theme-id="obsidian-dark"] .sidebar,
[data-theme-id="obsidian-dark"] .sidebar,
[data-theme-id="obsidian-dark"] .sidebar,
[data-sidebar-style="dark-pro"] .sidebar {
  background: var(--theme-sidebar-bg, #090A0D) !important;
  border-right: 1px solid var(--theme-border, #262936) !important;
}

[data-theme-mode="dark"] .text-dark,
[data-theme-id="obsidian-dark"] .text-dark,
[data-theme-id="obsidian-dark"] .text-dark,
[data-theme-id="obsidian-dark"] .text-dark,
[data-theme-id="obsidian-dark"] .text-dark,
[data-theme-id="obsidian-dark"] .text-dark {
  color: var(--theme-text-primary, #EDEDF0) !important;
}

[data-theme-mode="dark"] .stat-info h3,
[data-theme-id="obsidian-dark"] .stat-info h3,
[data-theme-id="obsidian-dark"] .stat-info h3 {
  color: var(--theme-text-primary, #EDEDF0) !important;
}

[data-theme-mode="dark"] .stat-info p,
[data-theme-id="obsidian-dark"] .stat-info p {
  color: var(--theme-text-muted, #72768A) !important;
}

[data-theme-mode="dark"] .modern-table,
[data-theme-id="obsidian-dark"] .modern-table,
[data-theme-id="obsidian-dark"] .modern-table {
  background: var(--theme-card-bg, #15171E) !important;
  color: var(--theme-text-primary, #EDEDF0) !important;
}

[data-theme-mode="dark"] .modern-table thead,
[data-theme-id="obsidian-dark"] .modern-table thead {
  background: var(--theme-surface-secondary, #1C1F28) !important;
  border-color: var(--theme-border, #262936) !important;
}

[data-theme-mode="dark"] .modern-table th,
[data-theme-id="obsidian-dark"] .modern-table th {
  color: var(--theme-text-secondary, #A2A5B5) !important;
}

[data-theme-mode="dark"] .modern-table tbody tr,
[data-theme-id="obsidian-dark"] .modern-table tbody tr {
  border-color: var(--theme-border, #262936) !important;
}

[data-theme-mode="dark"] .modern-table tbody tr:hover,
[data-theme-id="obsidian-dark"] .modern-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme-mode="dark"] .form-control,
[data-theme-mode="dark"] .form-select,
[data-theme-id="obsidian-dark"] .form-control,
[data-theme-id="obsidian-dark"] .form-select {
  background-color: var(--theme-input-bg, #1C1F28) !important;
  border-color: var(--theme-border, #262936) !important;
  color: var(--theme-text-primary, #EDEDF0) !important;
}

[data-theme-mode="dark"] .form-control:focus,
[data-theme-mode="dark"] .form-select:focus {
  border-color: var(--theme-accent, #D4AF37) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2) !important;
}

[data-theme-mode="dark"] .dropdown-menu,
[data-theme-id="obsidian-dark"] .dropdown-menu {
  background-color: var(--theme-card-bg, #15171E) !important;
  border-color: var(--theme-border, #262936) !important;
  color: var(--theme-text-primary, #EDEDF0) !important;
}

[data-theme-mode="dark"] .modal-content,
[data-theme-id="obsidian-dark"] .modal-content {
  background-color: var(--theme-modal-bg, #181A22) !important;
  border-color: var(--theme-border, #262936) !important;
  color: var(--theme-text-primary, #EDEDF0) !important;
}

[data-theme-mode="dark"] .category-card-header,
[data-theme-id="obsidian-dark"] .category-card-header {
  background: var(--theme-surface-secondary, #1C1F28) !important;
  border-color: var(--theme-border, #262936) !important;
}

/* --- D. EXECUTIVE THEMES (SAPPHIRE, PLATINUM, NAVY, EMERALD, TITANIUM) --- */
[data-theme-id="sapphire-executive"] .sidebar,
[data-theme-id="royal-navy"] .sidebar,
[data-theme-id="platinum-corporate"] .sidebar,
[data-theme-id="emerald-executive"] .sidebar,
[data-theme-id="titanium-business"] .sidebar {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

[data-theme-id="sapphire-executive"] .table th,
[data-theme-id="platinum-corporate"] .table th,
[data-theme-id="titanium-business"] .table th {
  font-size: 0.72rem !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

/* --- E. HERITAGE THEMES (BURGUNDY, EMERALD, SAPPHIRE, CHAMPAGNE, IVORY) --- */
[data-theme-id="royal-burgundy"] .card,
[data-theme-id="imperial-emerald"] .card,
[data-theme-id="regal-sapphire"] .card,
[data-theme-id="classic-champagne"] .card,
[data-theme-id="royal-ivory"] .card {
  border: 1px solid var(--theme-border) !important;
}

[data-theme-id="royal-burgundy"] .sidebar .nav-link.active,
[data-theme-id="imperial-emerald"] .sidebar .nav-link.active,
[data-theme-id="regal-sapphire"] .sidebar .nav-link.active {
  border-left: 3px solid var(--theme-accent) !important;
}

/* --- F. COMPONENT STYLE VARIANTS --- */
/* Card Style Variants */
[data-card-style="sharp"] .card,
[data-card-style="sharp"] .dashboard-card,
[data-card-style="sharp"] .stat-card {
  border-radius: 4px !important;
}

[data-card-style="elevated"] .card,
[data-card-style="elevated"] .dashboard-card,
[data-card-style="elevated"] .stat-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

[data-card-style="glass"] .card,
[data-card-style="glass"] .dashboard-card {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Table Style Variants */
[data-table-style="compact"] .table th,
[data-table-style="compact"] .table td,
[data-table-style="compact"] .modern-table th,
[data-table-style="compact"] .modern-table td {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 0.8125rem !important;
}

[data-table-style="bordered"] .table,
[data-table-style="bordered"] .modern-table {
  border: 1px solid var(--theme-border) !important;
}

[data-table-style="bordered"] .table td,
[data-table-style="bordered"] .table th,
[data-table-style="bordered"] .modern-table td,
[data-table-style="bordered"] .modern-table th {
  border: 1px solid var(--theme-border) !important;
}

/* Density Modifiers */
[data-density="compact"] .container-fluid {
  padding: 1rem !important;
}
[data-density="spacious"] .container-fluid {
  padding: 2.25rem !important;
}

/* ==========================================================================
 * PHASE 5B.3A: 50 COMPLETE THEME VISUAL IDENTITIES
 * REUSABLE UI-STYLE MODIFIER FAMILIES (THEMES 31–50 ARCHITECTURAL ENHANCEMENT)
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. GLASS STYLE FAMILY (e.g. crystal-glass, dark-glass-elite, onyx-glass,
 *                        champagne-frost, crystal-executive)
 * -------------------------------------------------------------------------- */
[data-ui-style="glass"] .card,
[data-ui-style="glass"] .stat-card,
[data-ui-style="glass"] .dashboard-card,
[data-ui-style="glass"] .category-card,
[data-ui-style="glass"] .filter-card {
  background: rgba(var(--theme-surface-rgb), var(--ui-surface-opacity, 0.82)) !important;
  backdrop-filter: blur(var(--ui-backdrop-blur, 14px)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--ui-backdrop-blur, 14px)) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, var(--ui-highlight-opacity, 0.22)) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, calc(var(--ui-shadow-depth, 1) * 0.07)) !important;
}

[data-ui-style="glass"] .modal-content {
  background: rgba(var(--theme-surface-rgb), 0.88) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
}

[data-ui-style="glass"] .dropdown-menu {
  background: rgba(var(--theme-surface-rgb), 0.90) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

[data-ui-style="glass"] .navbar,
[data-ui-style="glass"] .app-header {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-ui-style="glass"] .table-responsive {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: var(--theme-radius-lg, 14px);
}

[data-ui-style="glass"] .input-group-text {
  background: rgba(var(--theme-surface-rgb), 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-color: var(--theme-border) !important;
}

[data-ui-style="glass"] .badge {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* --------------------------------------------------------------------------
 * 2. NEUMORPH STYLE FAMILY (e.g. soft-neumorph, satin-shadow)
 * -------------------------------------------------------------------------- */
[data-ui-style="neumorph"] .card,
[data-ui-style="neumorph"] .stat-card,
[data-ui-style="neumorph"] .dashboard-card,
[data-ui-style="neumorph"] .category-card {
  box-shadow: 6px 6px 16px rgba(0, 0, 0, calc(var(--ui-shadow-depth, 1) * 0.08)),
              -6px -6px 16px rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: var(--theme-radius-xl, 18px) !important;
}

[data-theme-mode="dark"][data-ui-style="neumorph"] .card,
[data-theme-mode="dark"][data-ui-style="neumorph"] .stat-card,
[data-theme-mode="dark"][data-ui-style="neumorph"] .dashboard-card,
[data-theme-mode="dark"][data-ui-style="neumorph"] .category-card {
  box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.45),
              -3px -3px 10px rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-ui-style="neumorph"] .btn {
  border-radius: var(--theme-radius-lg, 12px) !important;
  transition: all 0.2s ease !important;
}

[data-ui-style="neumorph"] .btn-primary {
  box-shadow: 3px 3px 8px rgba(var(--theme-primary-rgb), 0.35),
              -2px -2px 6px rgba(255, 255, 255, 0.5) !important;
}

[data-ui-style="neumorph"] .btn-secondary {
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.08),
              -3px -3px 8px rgba(255, 255, 255, 0.8) !important;
  border: 1px solid var(--theme-border) !important;
}

[data-theme-mode="dark"][data-ui-style="neumorph"] .btn-secondary {
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3),
              -2px -2px 6px rgba(255, 255, 255, 0.05) !important;
}

[data-ui-style="neumorph"] .btn:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.15),
              inset -2px -2px 5px rgba(255, 255, 255, 0.5) !important;
  transform: none !important;
}

[data-ui-style="neumorph"] .dropdown-menu {
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.10),
              -6px -6px 16px rgba(255, 255, 255, 0.7) !important;
  border-radius: var(--theme-radius-lg, 14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

[data-theme-mode="dark"][data-ui-style="neumorph"] .dropdown-menu {
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.45),
              -3px -3px 10px rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--theme-border) !important;
}

[data-ui-style="neumorph"] .table-responsive {
  border-radius: var(--theme-radius-lg, 14px);
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.04);
}

[data-ui-style="neumorph"] .form-control,
[data-ui-style="neumorph"] .form-select {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.06),
              inset -1px -1px 3px rgba(255, 255, 255, 0.5) !important;
  border-radius: var(--theme-radius-md, 10px) !important;
}

[data-theme-mode="dark"][data-ui-style="neumorph"] .form-control,
[data-theme-mode="dark"][data-ui-style="neumorph"] .form-select {
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* --------------------------------------------------------------------------
 * 3. BENTO STYLE FAMILY (e.g. bento-luxe, royal-bento)
 * -------------------------------------------------------------------------- */
[data-ui-style="bento"] .card,
[data-ui-style="bento"] .stat-card,
[data-ui-style="bento"] .dashboard-card,
[data-ui-style="bento"] .category-card {
  border-radius: var(--theme-radius-xl, 18px) !important;
  border: 1.5px solid var(--theme-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

[data-ui-style="bento"] .card:hover,
[data-ui-style="bento"] .stat-card:hover,
[data-ui-style="bento"] .dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(0, 0, 0, 0.06) !important;
}

[data-ui-style="bento"] .card-header {
  border-bottom: 1.5px solid var(--theme-border) !important;
  padding: 1.1rem 1.4rem !important;
  background: transparent !important;
}

[data-ui-style="bento"] .table-responsive {
  border: 1.5px solid var(--theme-border) !important;
  border-radius: var(--theme-radius-lg, 14px) !important;
  overflow: hidden;
}

[data-ui-style="bento"] .modal-content {
  border-radius: var(--theme-radius-xl, 20px) !important;
  border: 2px solid var(--theme-border) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
}

/* --------------------------------------------------------------------------
 * 4. AURORA STYLE FAMILY (e.g. aurora-gradient, pearl-aurora)
 * -------------------------------------------------------------------------- */
[data-ui-style="aurora"] .card,
[data-ui-style="aurora"] .stat-card,
[data-ui-style="aurora"] .dashboard-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb), 0.09) !important;
  border-color: rgba(var(--theme-primary-rgb), 0.25) !important;
}

[data-ui-style="aurora"] .card::before,
[data-ui-style="aurora"] .dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--theme-brand-gradient, linear-gradient(90deg, var(--theme-primary), var(--theme-accent)));
  opacity: 0.85;
  pointer-events: none;
}

[data-ui-style="aurora"] .btn-primary {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
  box-shadow: 0 4px 18px rgba(var(--theme-primary-rgb), 0.38) !important;
  transition: all 0.25s ease !important;
}

[data-ui-style="aurora"] .btn-primary:hover {
  background: var(--theme-primary-hover, var(--theme-primary)) !important;
  border-color: var(--theme-primary-hover, var(--theme-primary)) !important;
  color: var(--theme-btn-primary-hover-text, var(--theme-btn-primary-text, #ffffff)) !important;
  box-shadow: 0 6px 24px rgba(var(--theme-primary-rgb), 0.55), 0 0 12px rgba(var(--theme-accent-rgb), 0.35) !important;
  transform: translateY(-1px);
}

[data-ui-style="aurora"] .nav-tabs .nav-link.active {
  border-color: transparent transparent var(--theme-primary) transparent !important;
  border-bottom-width: 3px !important;
  box-shadow: 0 4px 14px rgba(var(--theme-primary-rgb), 0.25);
  background: transparent !important;
}

[data-ui-style="aurora"] .badge.bg-primary {
  box-shadow: 0 2px 10px rgba(var(--theme-primary-rgb), 0.45) !important;
}

/* --------------------------------------------------------------------------
 * 5. CHROME STYLE FAMILY (e.g. liquid-chrome, obsidian-chrome)
 * -------------------------------------------------------------------------- */
[data-ui-style="chrome"] .card,
[data-ui-style="chrome"] .stat-card,
[data-ui-style="chrome"] .dashboard-card {
  border: 1px solid var(--theme-border-strong, rgba(200, 210, 220, 0.4)) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
}

[data-ui-style="chrome"] .card-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.03) 100%), var(--theme-surface-secondary) !important;
  border-bottom: 1.5px solid var(--theme-border-strong, #CBD5E1) !important;
}

[data-ui-style="chrome"] .table thead th {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.04) 100%), var(--theme-table-header-bg) !important;
  border-bottom: 2px solid var(--theme-border-strong, #CBD5E1) !important;
  letter-spacing: 0.5px;
}

[data-ui-style="chrome"] .btn-outline-primary {
  border: 1.5px solid var(--theme-primary) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease !important;
}

[data-ui-style="chrome"] .btn-outline-primary:hover {
  background: var(--theme-primary) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
  box-shadow: 0 4px 14px rgba(var(--theme-primary-rgb), 0.35) !important;
}

/* --------------------------------------------------------------------------
 * 6. EDITORIAL STYLE FAMILY (e.g. editorial-prestige, velvet-noir, marble-atelier)
 * -------------------------------------------------------------------------- */
[data-ui-style="editorial"] .card,
[data-ui-style="editorial"] .dashboard-card {
  border: 1px solid var(--theme-border-strong) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  border-radius: var(--theme-radius-sm, 6px) !important;
}

[data-ui-style="editorial"] .card-header {
  border-bottom: 2px solid var(--theme-border-strong) !important;
  font-family: var(--theme-font-heading, 'Outfit', serif) !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
}

[data-ui-style="editorial"] .table thead th {
  border-bottom: 2px solid var(--theme-border-strong) !important;
  font-family: var(--theme-font-heading, 'Outfit', serif) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

[data-ui-style="editorial"] .nav-tabs .nav-link.active {
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2.5px solid var(--theme-primary) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
 * 7. SWISS STYLE FAMILY (e.g. swiss-modern)
 * -------------------------------------------------------------------------- */
[data-ui-style="swiss"] .card,
[data-ui-style="swiss"] .stat-card,
[data-ui-style="swiss"] .dashboard-card,
[data-ui-style="swiss"] .category-card {
  border-radius: 2px !important;
  border: 1.5px solid var(--theme-border-strong, #000000) !important;
  box-shadow: none !important;
}

[data-ui-style="swiss"] .btn {
  border-radius: 2px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

[data-ui-style="swiss"] .form-control,
[data-ui-style="swiss"] .form-select {
  border-radius: 2px !important;
  border-width: 1.5px !important;
}

[data-ui-style="swiss"] .table thead th {
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--theme-text-primary) !important;
}

[data-ui-style="swiss"] .table-responsive {
  border: 1.5px solid var(--theme-border-strong, #000000) !important;
  border-radius: 2px !important;
}

/* --------------------------------------------------------------------------
 * 8. CLAY STYLE FAMILY (e.g. clay-luxe)
 * -------------------------------------------------------------------------- */
[data-ui-style="clay"] .card,
[data-ui-style="clay"] .stat-card,
[data-ui-style="clay"] .dashboard-card {
  border-radius: var(--theme-radius-xl, 20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06), inset 0 2px 3px rgba(255, 255, 255, 0.6) !important;
}

[data-ui-style="clay"] .btn {
  border-radius: var(--theme-radius-pill, 9999px) !important;
  box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.45) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

[data-ui-style="clay"] .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb), 0.32), inset 0 2px 2px rgba(255, 255, 255, 0.5) !important;
}

[data-ui-style="clay"] .badge {
  border-radius: var(--theme-radius-pill, 9999px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  padding: 0.45em 0.85em !important;
}

[data-ui-style="clay"] .table-responsive {
  border-radius: var(--theme-radius-xl, 18px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

/* --------------------------------------------------------------------------
 * 9. MINIMAL STYLE FAMILY (e.g. neo-minimal, imperial-minimal)
 * -------------------------------------------------------------------------- */
[data-ui-style="minimal"] .card,
[data-ui-style="minimal"] .stat-card,
[data-ui-style="minimal"] .dashboard-card,
[data-ui-style="minimal"] .category-card {
  box-shadow: none !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius-sm, 6px) !important;
}

[data-ui-style="minimal"] .dropdown-menu {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius-sm, 6px) !important;
}

[data-ui-style="minimal"] .modal-content {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius-md, 8px) !important;
}

[data-ui-style="minimal"] .table-responsive {
  box-shadow: none !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius-sm, 6px) !important;
}

[data-ui-style="minimal"] .btn {
  box-shadow: none !important;
  border-radius: var(--theme-radius-sm, 6px) !important;
}

/* ==========================================================================
 * PHASE 5B.3B: REUSABLE THEME SEMANTIC UTILITY CLASSES
 * Standard semantic utility classes to replace hardcoded inline color declarations
 * ========================================================================== */
.theme-text { color: var(--theme-text-primary, #0f172a) !important; }
.theme-muted { color: var(--theme-text-muted, #64748b) !important; }
.theme-surface { background-color: var(--theme-surface, #ffffff) !important; }
.theme-surface-alt { background-color: var(--theme-surface-secondary, #f1f5f9) !important; }
.theme-border { border-color: var(--theme-border, #e2e8f0) !important; }
.theme-primary { color: var(--theme-primary) !important; }
.theme-primary-bg {
  background: var(--theme-primary, #B9828F) !important;
  border-color: var(--theme-primary, #B9828F) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
}
.theme-secondary { color: var(--theme-secondary, #0f172a) !important; }
.theme-accent { color: var(--theme-accent, #c8a96b) !important; }

/* Keep Bootstrap utilities and shared action controls bound to the active palette. */
html[data-theme-id] .btn-primary,
html[data-theme-id] .btn-header-action,
html[data-theme-id] .btn-lx-action-primary,
html[data-theme-id] .btn-save,
html[data-theme-id] .btn-submit,
html[data-theme-id] .btn-wiz-next,
html[data-theme-id] .btn-wiz-submit {
  background: var(--theme-primary, #B9828F) !important;
  border-color: var(--theme-primary, #B9828F) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
}

html[data-theme-id] .btn-primary:hover,
html[data-theme-id] .btn-header-action:hover,
html[data-theme-id] .btn-lx-action-primary:hover,
html[data-theme-id] .btn-save:hover,
html[data-theme-id] .btn-submit:hover,
html[data-theme-id] .btn-wiz-next:hover,
html[data-theme-id] .btn-wiz-submit:hover,
html[data-theme-id] .btn-primary:focus-visible,
html[data-theme-id] .btn-header-action:focus-visible,
html[data-theme-id] .btn-lx-action-primary:focus-visible,
html[data-theme-id] .btn-save:focus-visible,
html[data-theme-id] .btn-submit:focus-visible,
html[data-theme-id] .btn-wiz-next:focus-visible,
html[data-theme-id] .btn-wiz-submit:focus-visible {
  background: var(--theme-primary-hover, var(--theme-primary, #B9828F)) !important;
  border-color: var(--theme-primary-hover, var(--theme-primary, #B9828F)) !important;
  color: var(--theme-btn-primary-hover-text, #ffffff) !important;
  box-shadow: var(--theme-btn-hover-shadow, var(--theme-focus-ring)) !important;
}

html[data-theme-id] .btn-primary:active,
html[data-theme-id] .btn-header-action:active,
html[data-theme-id] .btn-lx-action-primary:active,
html[data-theme-id] .btn-save:active,
html[data-theme-id] .btn-submit:active,
html[data-theme-id] .btn-wiz-next:active,
html[data-theme-id] .btn-wiz-submit:active {
  background: var(--theme-primary-active, var(--theme-primary-hover, var(--theme-primary, #B9828F))) !important;
  border-color: var(--theme-primary-active, var(--theme-primary-hover, var(--theme-primary, #B9828F))) !important;
  color: var(--theme-btn-primary-hover-text, #ffffff) !important;
}

html[data-theme-id] .btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
}

html[data-theme-id] .btn-outline-primary:hover,
html[data-theme-id] .btn-outline-primary:focus-visible {
  background-color: var(--theme-primary-subtle) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
}

html[data-theme-id] .btn-secondary {
  background-color: var(--theme-surface-secondary) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

html[data-theme-id] .btn-success,
html[data-theme-id] .btn-warning,
html[data-theme-id] .btn-danger,
html[data-theme-id] .btn-info {
  color: #ffffff !important;
}

html[data-theme-id] .btn-success {
  background-color: var(--theme-success) !important;
  border-color: var(--theme-success) !important;
}

html[data-theme-id] .btn-warning {
  background-color: var(--theme-warning) !important;
  border-color: var(--theme-warning) !important;
}

html[data-theme-id] .btn-danger {
  background-color: var(--theme-danger) !important;
  border-color: var(--theme-danger) !important;
}

html[data-theme-id] .btn-info {
  background-color: var(--theme-info) !important;
  border-color: var(--theme-info) !important;
}

html[data-theme-id] .btn-link {
  color: var(--theme-primary) !important;
}

html[data-theme-id] .btn-link:hover,
html[data-theme-id] .btn-link:focus-visible {
  color: var(--theme-primary-hover) !important;
}

html[data-theme-id] .card-header,
html[data-theme-id] .dashboard-card-header,
html[data-theme-id] .category-card-header,
html[data-theme-id] .modal-header {
  background: var(--theme-surface-secondary) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

html[data-theme-id] .top-navbar {
  background: var(--theme-navbar-bg) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

html[data-theme-id] .bg-light {
  background-color: var(--theme-surface-secondary) !important;
}

html[data-theme-id] .bg-white {
  background-color: var(--theme-card-bg) !important;
}

html[data-theme-id] .text-dark {
  color: var(--theme-text-primary) !important;
}

html[data-theme-id] .border-light {
  border-color: var(--theme-border) !important;
}

html[data-theme-id] .bg-primary {
  background-color: var(--theme-primary) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
}

html[data-theme-id] .text-primary {
  color: var(--theme-primary) !important;
}

html[data-theme-id] .border-primary {
  border-color: var(--theme-primary) !important;
}

html[data-theme-id] .badge.bg-primary {
  background-color: var(--theme-primary) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
}

html[data-theme-id] .badge.bg-primary-subtle {
  background-color: rgba(var(--theme-primary-rgb), 0.14) !important;
  color: var(--theme-primary) !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.25) !important;
}

html[data-theme-id] .alert-primary {
  background-color: rgba(var(--theme-primary-rgb), 0.12) !important;
  border-color: rgba(var(--theme-primary-rgb), 0.3) !important;
  color: var(--theme-primary) !important;
}

html[data-theme-id] .form-check-input:checked,
html[data-theme-id] .form-switch .form-check-input:checked {
  background-color: var(--theme-toggle-color, var(--theme-primary)) !important;
  border-color: var(--theme-toggle-color, var(--theme-primary)) !important;
}

html[data-theme-id] .form-check-input:focus,
html[data-theme-id] .form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(var(--theme-toggle-color-rgb, var(--theme-primary-rgb)), 0.25) !important;
}

/* Custom status toggle switches (.status-switch / .status-slider) used across
   schools, branches, students, employees, users and document module tables.
   Local per-view rules hardcode a green gradient; these !important rules make
   the configured "Toggle Buttons" color win everywhere. */
html[data-theme-id] .status-switch input:checked + .status-slider,
html[data-theme-id] input:checked + .status-slider {
  background: var(--theme-toggle-color, var(--theme-primary)) !important;
  border-color: var(--theme-toggle-color, var(--theme-primary)) !important;
}

html[data-theme-id] .status-switch input:focus-visible + .status-slider,
html[data-theme-id] input:focus-visible + .status-slider {
  outline: 3px solid rgba(var(--theme-toggle-color-rgb, var(--theme-primary-rgb)), 0.3) !important;
  outline-offset: 2px !important;
}

/* Toggle text: any label/caption rendered on or beside a toggle/switch.
   Includes Bootstrap .form-check-label next to .form-switch controls and the
   Active/Inactive .status-badge-text captions in module tables. */
html[data-theme-id] .form-switch .form-check-label,
html[data-theme-id] .form-check-input:checked ~ .form-check-label {
  color: var(--theme-toggle-text-color, var(--theme-text-primary)) !important;
}

html[data-theme-id] .status-badge-text,
html[data-theme-id] .status-badge-text.active,
html[data-theme-id] .status-badge-text.inactive {
  color: var(--theme-toggle-text-color, var(--theme-primary)) !important;
}

html[data-theme-id] .form-control:focus,
html[data-theme-id] .form-select:focus {
  border-color: var(--theme-border-focus) !important;
  box-shadow: var(--theme-focus-ring) !important;
}

html[data-theme-id] .pagination .page-item.active .page-link {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
}

html[data-theme-id] .nav-pills .nav-link.active,
html[data-theme-id] .nav-pills .show > .nav-link {
  background-color: var(--theme-primary) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
}

html[data-theme-id] .nav-tabs .nav-link {
  color: var(--theme-text-secondary);
}

html[data-theme-id] .nav-tabs .nav-link:hover {
  color: var(--theme-primary);
  border-color: transparent transparent var(--theme-border);
}

html[data-theme-id] .nav-tabs .nav-link.active {
  border-color: var(--theme-border) var(--theme-border) var(--theme-card-bg) !important;
  background-color: var(--theme-card-bg) !important;
  color: var(--theme-primary) !important;
}

/* ============================================================
   UNIVERSAL ENTERPRISE TABLE SYSTEM (Dynamic Themed Tables)
   Synchronizes all table variants (.table, .modern-table, .table-custom,
   .table-library, .children-table, .rp-tbl, .table-card table) with the
   11 Table Color tokens configured in Theme Customize.
   Reference standard: public/students table.
   ============================================================ */

/* 1. Universal Table Shell & CSS Variables */
html[data-theme-id] table,
html[data-theme-id] .table,
html[data-theme-id] .modern-table,
html[data-theme-id] .table-custom,
html[data-theme-id] .table-library,
html[data-theme-id] .children-table,
html[data-theme-id] .rp-tbl,
html[data-theme-id] .table-responsive table {
  --bs-table-bg: var(--theme-table-actual-bg, var(--theme-table-bg, var(--theme-card-bg)));
  --bs-table-color: var(--theme-table-text, var(--theme-text-primary));
  --bs-table-border-color: var(--theme-table-border, var(--theme-border));
  --bs-table-striped-bg: var(--theme-table-stripe-bg, rgba(var(--theme-primary-rgb), 0.025));
  --bs-table-striped-color: var(--theme-table-text, var(--theme-text-primary));
  --bs-table-hover-bg: var(--theme-table-hover-bg, rgba(var(--theme-primary-rgb), 0.08));
  --bs-table-hover-color: var(--theme-table-text, var(--theme-text-primary));
  background-color: var(--theme-table-actual-bg, var(--theme-table-bg, var(--theme-card-bg))) !important;
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
  border-color: var(--theme-table-border, var(--theme-border)) !important;
}

/* 2. Table Headers (Background, Text & Borders) */
html[data-theme-id] table thead,
html[data-theme-id] .table thead,
html[data-theme-id] .modern-table thead,
html[data-theme-id] .table-custom thead,
html[data-theme-id] .table-library thead,
html[data-theme-id] .children-table thead,
html[data-theme-id] .rp-tbl thead,
html[data-theme-id] table thead.bg-light,
html[data-theme-id] table thead.table-light,
html[data-theme-id] table thead.bg-body-tertiary,
html[data-theme-id] table thead.bg-white,
html[data-theme-id] table thead th,
html[data-theme-id] .table thead th,
html[data-theme-id] .modern-table thead th,
html[data-theme-id] .table-custom thead th,
html[data-theme-id] .table-library thead th,
html[data-theme-id] .children-table thead th,
html[data-theme-id] .rp-tbl thead th,
html[data-theme-id] table thead th.bg-light,
html[data-theme-id] table thead th.bg-body-tertiary,
html[data-theme-id] table thead th.bg-white,
html[data-theme-id] table thead th.text-muted,
html[data-theme-id] table thead th.text-secondary,
html[data-theme-id] table thead th.text-dark,
html[data-theme-id] table thead th * {
  background-color: var(--theme-table-header-bg, var(--theme-surface-secondary)) !important;
  color: var(--theme-table-header-color, var(--theme-text-secondary)) !important;
  border-color: var(--theme-table-border, var(--theme-border)) !important;
}

html[data-theme-id] table thead th i,
html[data-theme-id] table thead th svg,
html[data-theme-id] .table thead th i,
html[data-theme-id] .modern-table thead th i,
html[data-theme-id] .table-library thead th i {
  color: var(--theme-table-header-color, var(--theme-text-secondary)) !important;
}

/* 3. Table Rows & Data Cells */
html[data-theme-id] table tbody tr,
html[data-theme-id] .table tbody tr,
html[data-theme-id] .modern-table tbody tr,
html[data-theme-id] .table-custom tbody tr,
html[data-theme-id] .table-library tbody tr,
html[data-theme-id] .children-table tbody tr,
html[data-theme-id] .rp-tbl tbody tr {
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
  border-color: var(--theme-table-border, var(--theme-border)) !important;
}

html[data-theme-id] table tbody td,
html[data-theme-id] .table tbody td,
html[data-theme-id] .modern-table tbody td,
html[data-theme-id] .table-custom tbody td,
html[data-theme-id] .table-library tbody td,
html[data-theme-id] .children-table tbody td,
html[data-theme-id] .rp-tbl tbody td,
html[data-theme-id] table tfoot td {
  background-color: var(--theme-table-actual-bg, var(--theme-table-bg, var(--theme-card-bg))) !important;
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
  border-color: var(--theme-table-border, var(--theme-border)) !important;
}

/* 4. Cell Text Elements (Primary Titles, Names, Usernames) */
html[data-theme-id] table tbody td .text-dark,
html[data-theme-id] table tbody td.text-dark,
html[data-theme-id] table tbody td .school-name-text,
html[data-theme-id] table tbody td .user-name,
html[data-theme-id] table tbody td .user-name-text,
html[data-theme-id] table tbody td .name-text,
html[data-theme-id] table tbody td .title-text,
html[data-theme-id] table tbody td .table-title,
html[data-theme-id] table tbody td .contact-phone,
html[data-theme-id] table tbody td .school-phone,
html[data-theme-id] table tbody td .fw-bold:not(.text-danger):not(.text-success):not(.text-warning):not([class*="badge"]),
html[data-theme-id] table tbody td a:not(.btn):not([class*="badge"]):not([class*="text-"]):not(.dropdown-item) {
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
}

/* 5. Cell Subtext & Metadata (Locations, Emails, Dates, Secondary details) */
html[data-theme-id] table tbody td .school-location-text,
html[data-theme-id] table tbody td .contact-email,
html[data-theme-id] table tbody td .school-email,
html[data-theme-id] table tbody td .meta-text,
html[data-theme-id] table tbody td .text-muted:not(i):not([class*="badge"]),
html[data-theme-id] table tbody td.text-muted:not([class*="badge"]),
html[data-theme-id] table tbody td small.text-muted:not([class*="badge"]) {
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
  opacity: 0.75;
}

/* 6. Striped & Hover Rows */
html[data-theme-id] .table-striped > tbody > tr:nth-of-type(odd):not(.table-active):not(.table-primary):not(.table-secondary):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-light):not(.table-dark) > *,
html[data-theme-id] table.table-striped > tbody > tr:nth-of-type(odd):not(.table-active):not(.table-primary):not(.table-secondary):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-light):not(.table-dark) > *,
html[data-theme-id] .modern-table.table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme-id] .table-library.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--theme-table-stripe-bg, rgba(var(--theme-primary-rgb), 0.025));
  background-color: var(--theme-table-stripe-bg, rgba(var(--theme-primary-rgb), 0.025)) !important;
}

html[data-theme-id] .table-hover > tbody > tr:hover > *,
html[data-theme-id] table tbody tr:hover:not(.table-active):not(.table-primary):not(.table-secondary):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-light):not(.table-dark) > *,
html[data-theme-id] .modern-table tbody tr:hover:not(.table-active):not(.table-primary):not(.table-secondary):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-light):not(.table-dark) > *,
html[data-theme-id] .table-custom tbody tr:hover:not(.table-active):not(.table-primary):not(.table-secondary):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-light):not(.table-dark) > *,
html[data-theme-id] .table-library tbody tr:hover > *,
html[data-theme-id] .children-table tbody tr:hover > *,
html[data-theme-id] .rp-tbl tbody tr:hover > *,
html[data-theme-id] table tbody tr:hover > td,
html[data-theme-id] .table tbody tr:hover > td {
  --bs-table-bg-state: var(--theme-table-hover-bg, rgba(var(--theme-primary-rgb), 0.08));
  background-color: var(--theme-table-hover-bg, rgba(var(--theme-primary-rgb), 0.08)) !important;
}

/* 7. Table Containers & Wrappers */
html[data-theme-id] .table-card,
html[data-theme-id] .card:has(table) {
  background-color: var(--theme-table-actual-bg, var(--theme-table-bg, var(--theme-card-bg))) !important;
  border-color: var(--theme-table-border, var(--theme-border)) !important;
}

html[data-theme-id] .table-responsive {
  background-color: var(--theme-table-actual-bg, var(--theme-table-bg, var(--theme-card-bg))) !important;
  border-color: var(--theme-table-border, var(--theme-border)) !important;
}

html[data-theme-id] .table-card > div:first-child:not(.table-responsive),
html[data-theme-id] .table-card .card-header,
html[data-theme-id] .card:has(table) .card-header {
  background-color: var(--theme-table-actual-bg, var(--theme-table-bg, var(--theme-card-bg))) !important;
  border-bottom-color: var(--theme-table-border, var(--theme-border)) !important;
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
}

html[data-theme-id] .table-card > div:first-child i.fa-solid:first-child,
html[data-theme-id] .table-card .card-header i.fa-solid:first-child {
  color: var(--theme-table-icon-color, var(--theme-primary)) !important;
}

/* 8. Table Badges, Code Pills & Affiliations */
html[data-theme-id] .table .badge:not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]):not([class*="bg-primary"]):not([class*="bg-info"]):not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="success"]):not([class*="danger"]):not([class*="warning"]),
html[data-theme-id] table .badge:not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]):not([class*="bg-primary"]):not([class*="bg-info"]):not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="success"]):not([class*="danger"]):not([class*="warning"]),
html[data-theme-id] .modern-table .badge:not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]):not([class*="bg-primary"]):not([class*="bg-info"]):not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="success"]):not([class*="danger"]):not([class*="warning"]),
html[data-theme-id] .table-custom .badge:not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]):not([class*="bg-primary"]):not([class*="bg-info"]):not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="success"]):not([class*="danger"]):not([class*="warning"]),
html[data-theme-id] .table .code-badge,
html[data-theme-id] table .code-badge,
html[data-theme-id] .modern-table .code-badge,
html[data-theme-id] .table-custom .code-badge,
html[data-theme-id] .table .affiliation-badge,
html[data-theme-id] table .affiliation-badge,
html[data-theme-id] .modern-table .affiliation-badge,
html[data-theme-id] .table-custom .affiliation-badge,
html[data-theme-id] table tbody td code:not(pre code) {
  background-color: var(--theme-table-badge-bg, var(--theme-surface-secondary)) !important;
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
  border: 1px solid var(--theme-table-border, var(--theme-border)) !important;
}

html[data-theme-id] .table .affiliation-badge i,
html[data-theme-id] table .affiliation-badge i,
html[data-theme-id] .modern-table .affiliation-badge i,
html[data-theme-id] .table-custom .affiliation-badge i,
html[data-theme-id] .code-badge i,
html[data-theme-id] table .code-badge i {
  color: var(--theme-table-icon-color, var(--theme-primary)) !important;
}

/* 9. Table Action Buttons & Menus (Normal & Hover) */
html[data-theme-id] .action-btn-table,
html[data-theme-id] .table-action-btn,
html[data-theme-id] .action-dots-btn,
html[data-theme-id] .action-btn-circle,
html[data-theme-id] .action-toggle-btn,
html[data-theme-id] .btn-dots-menu,
html[data-theme-id] .btn-dots-sm,
html[data-theme-id] .rp-action-btn,
html[data-theme-id] table td .btn-light.border,
html[data-theme-id] table td a.btn-light.border,
html[data-theme-id] table td button.btn-light.border,
html[data-theme-id] table td .btn-outline-secondary {
  background-color: var(--theme-table-action-bg, var(--theme-card-bg)) !important;
  border-color: var(--theme-table-border, var(--theme-border)) !important;
  color: var(--theme-table-icon-color, var(--theme-table-text)) !important;
}

html[data-theme-id] .action-btn-table:hover,
html[data-theme-id] .table-action-btn:hover,
html[data-theme-id] .action-btn-table.view:hover,
html[data-theme-id] .action-btn-table.edit:hover,
html[data-theme-id] .action-dots-btn:hover,
html[data-theme-id] .action-dots-btn:focus,
html[data-theme-id] .show > .action-dots-btn,
html[data-theme-id] .action-btn-circle:hover,
html[data-theme-id] .action-toggle-btn:hover,
html[data-theme-id] .btn-dots-menu:hover,
html[data-theme-id] .btn-dots-sm:hover,
html[data-theme-id] .rp-action-btn:hover,
html[data-theme-id] table td .btn-light.border:hover,
html[data-theme-id] table td a.btn-light.border:hover,
html[data-theme-id] table td button.btn-light.border:hover,
html[data-theme-id] table td .btn-outline-secondary:hover {
  background-color: var(--theme-table-action-hover-bg, var(--theme-primary)) !important;
  border-color: var(--theme-table-action-hover-bg, var(--theme-primary)) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
  box-shadow: var(--theme-btn-shadow) !important;
}

html[data-theme-id] .action-btn-table.delete:hover,
html[data-theme-id] table td .btn-light.border.text-danger:hover,
html[data-theme-id] table td .btn-danger:hover {
  background-color: var(--theme-danger, #ef4444) !important;
  border-color: var(--theme-danger, #ef4444) !important;
  color: #ffffff !important;
}

/* 10. Table Action Dropdowns */
html[data-theme-id] .action-dropdown-menu,
html[data-theme-id] table .dropdown-menu,
html[data-theme-id] .table-card .dropdown-menu {
  background-color: var(--theme-card-bg, #ffffff) !important;
  border-color: var(--theme-table-border, var(--theme-border)) !important;
  box-shadow: var(--theme-shadow-dropdown, 0 10px 25px rgba(15, 23, 42, 0.12)) !important;
}

html[data-theme-id] .action-dropdown-menu .dropdown-item,
html[data-theme-id] table .dropdown-menu .dropdown-item {
  color: var(--theme-table-text, #334155) !important;
}

html[data-theme-id] .action-dropdown-menu .dropdown-item:hover,
html[data-theme-id] table .dropdown-menu .dropdown-item:hover {
  background-color: var(--theme-table-hover-bg, var(--theme-surface-secondary)) !important;
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
}

/* 11. Table Pagination Footer */
html[data-theme-id] .table-card #paginationContainer,
html[data-theme-id] .table-card .pagination-wrapper,
html[data-theme-id] .table-card > #paginationContainer > .pagination-wrapper,
html[data-theme-id] #paginationContainer {
  background-color: var(--theme-table-actual-bg, var(--theme-table-bg, var(--theme-card-bg))) !important;
  border-top-color: var(--theme-table-border, var(--theme-border)) !important;
}

html[data-theme-id] .table-card .page-link,
html[data-theme-id] #paginationContainer .page-link,
html[data-theme-id] .soft-pagination .page-link {
  background-color: var(--theme-table-action-bg, var(--theme-card-bg)) !important;
  border-color: var(--theme-table-border, var(--theme-border)) !important;
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
}

html[data-theme-id] .table-card .page-item.active .page-link,
html[data-theme-id] #paginationContainer .page-item.active .page-link,
html[data-theme-id] .soft-pagination .page-item.active .page-link {
  background: var(--theme-brand-gradient, var(--theme-primary)) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
}

/* 12. Universal Cell Icons (Respects Table Icon Color Token) */
html[data-theme-id] table td i:not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="text-muted"]):not([class*="text-secondary"]),
html[data-theme-id] .table td i:not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="text-muted"]):not([class*="text-secondary"]),
html[data-theme-id] .modern-table td i:not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="text-muted"]):not([class*="text-secondary"]),
html[data-theme-id] .table-custom td i:not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="text-muted"]):not([class*="text-secondary"]),
html[data-theme-id] .table-library td i:not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="text-muted"]):not([class*="text-secondary"]),
html[data-theme-id] .children-table td i:not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="text-muted"]):not([class*="text-secondary"]),
html[data-theme-id] .rp-tbl td i:not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="text-muted"]):not([class*="text-secondary"]) {
  color: var(--theme-table-icon-color, var(--theme-primary)) !important;
}

/* Override utility color classes on table icons */
html[data-theme-id] table td i.text-primary,
html[data-theme-id] table td i.text-indigo,
html[data-theme-id] table td i.text-info,
html[data-theme-id] table td i.text-dark {
  color: var(--theme-table-icon-color, var(--theme-primary)) !important;
}

/* Contact block icons across all module tables */
html[data-theme-id] .contact-info-block .contact-phone i,
html[data-theme-id] .contact-info-block .contact-email i,
html[data-theme-id] .contact-phone i,
html[data-theme-id] .contact-email i,
html[data-theme-id] .school-phone i,
html[data-theme-id] .school-email i,
html[data-theme-id] .school-location-text i {
  color: var(--theme-table-icon-color, var(--theme-primary)) !important;
}

html[data-theme-id] table i,
html[data-theme-id] table svg,
html[data-theme-id] .table i,
html[data-theme-id] .table svg,
html[data-theme-id] .modern-table i,
html[data-theme-id] .modern-table svg,
html[data-theme-id] .table-custom i,
html[data-theme-id] .table-custom svg,
html[data-theme-id] .table-library i,
html[data-theme-id] .table-library svg,
html[data-theme-id] .children-table i,
html[data-theme-id] .children-table svg,
html[data-theme-id] .rp-tbl i,
html[data-theme-id] .rp-tbl svg,
html[data-theme-id] .table-responsive table i,
html[data-theme-id] .table-responsive table svg,
html[data-theme-id] table tbody td i,
html[data-theme-id] table tbody td svg,
html[data-theme-id] .table tbody td i,
html[data-theme-id] .table tbody td svg,
html[data-theme-id] .modern-table tbody td i,
html[data-theme-id] .modern-table tbody td svg,
html[data-theme-id] .table-custom tbody td i,
html[data-theme-id] .table-custom tbody td svg,
html[data-theme-id] .table thead th i,
html[data-theme-id] table thead th i,
html[data-theme-id] .modern-table thead th i,
html[data-theme-id] .table-custom thead th i,
html[data-theme-id] .table thead th svg,
html[data-theme-id] table thead th svg,
html[data-theme-id] .modern-table thead th svg,
html[data-theme-id] .table-custom thead th svg,
html[data-theme-id] .table .action-dots-btn i,
html[data-theme-id] table .action-dots-btn i,
html[data-theme-id] .modern-table .action-dots-btn i,
html[data-theme-id] .table-custom .action-dots-btn i,
html[data-theme-id] .table .action-btn-table i,
html[data-theme-id] table .action-btn-table i,
html[data-theme-id] .modern-table .action-btn-table i,
html[data-theme-id] .table-custom .action-btn-table i,
html[data-theme-id] .table .table-action-btn i,
html[data-theme-id] table .table-action-btn i,
html[data-theme-id] .modern-table .table-action-btn i,
html[data-theme-id] .table-custom .table-action-btn i,
html[data-theme-id] .table .action-btn-circle i,
html[data-theme-id] table .action-btn-circle i,
html[data-theme-id] .modern-table .action-btn-circle i,
html[data-theme-id] .table-custom .action-btn-circle i,
html[data-theme-id] .table .action-toggle-btn i,
html[data-theme-id] table .action-toggle-btn i,
html[data-theme-id] .modern-table .action-toggle-btn i,
html[data-theme-id] .table-custom .action-toggle-btn i,
html[data-theme-id] .table .btn-dots-menu i,
html[data-theme-id] table .btn-dots-menu i,
html[data-theme-id] .modern-table .btn-dots-menu i,
html[data-theme-id] .table-custom .btn-dots-menu i,
html[data-theme-id] .table .btn-dots-sm i,
html[data-theme-id] table .btn-dots-sm i,
html[data-theme-id] .modern-table .btn-dots-sm i,
html[data-theme-id] .table-custom .btn-dots-sm i,
html[data-theme-id] .table .btn.btn-light i,
html[data-theme-id] table .btn.btn-light i,
html[data-theme-id] .modern-table .btn.btn-light i,
html[data-theme-id] .table-custom .btn.btn-light i,
html[data-theme-id] .table .btn-outline-secondary i,
html[data-theme-id] table .btn-outline-secondary i,
html[data-theme-id] .modern-table .btn-outline-secondary i,
html[data-theme-id] .table-custom .btn-outline-secondary i,
html[data-theme-id] .table .table-action-buttons i,
html[data-theme-id] table .table-action-buttons i,
html[data-theme-id] .modern-table .table-action-buttons i,
html[data-theme-id] .table-custom .table-action-buttons i,
html[data-theme-id] .action-dots-btn i,
html[data-theme-id] .action-dots-btn svg,
html[data-theme-id] .action-btn-table i,
html[data-theme-id] .action-btn-table svg,
html[data-theme-id] .table-action-btn i,
html[data-theme-id] .table-action-btn svg,
html[data-theme-id] .action-btn-circle i,
html[data-theme-id] .action-btn-circle svg,
html[data-theme-id] .action-toggle-btn i,
html[data-theme-id] .action-toggle-btn svg,
html[data-theme-id] .btn-dots-menu i,
html[data-theme-id] .btn-dots-menu svg,
html[data-theme-id] .btn-dots-sm i,
html[data-theme-id] .btn-dots-sm svg,
html[data-theme-id] .rp-action-btn i,
html[data-theme-id] .rp-action-btn svg,
html[data-theme-id] .table-action-buttons i,
html[data-theme-id] .table-action-buttons svg,
html[data-theme-id] .table-icon,
html[data-theme-id] .mock-table-icon,
html[data-theme-id] .mock-table-action-icon i,
html[data-theme-id] .table .card-action-wrapper i,
html[data-theme-id] table .card-action-wrapper i,
html[data-theme-id] .modern-table .card-action-wrapper i,
html[data-theme-id] .table-custom .card-action-wrapper i,
html[data-theme-id] .card-action-wrapper i,
html[data-theme-id] .card-action-wrapper svg,
html[data-theme-id] .table-card i,
html[data-theme-id] .table-card svg,
html[data-theme-id] .table-card-item i,
html[data-theme-id] .table-card-item svg,
html[data-theme-id] .table .action-dropdown-menu .dropdown-item i,
html[data-theme-id] table .action-dropdown-menu .dropdown-item i,
html[data-theme-id] .modern-table .action-dropdown-menu .dropdown-item i,
html[data-theme-id] .table-custom .action-dropdown-menu .dropdown-item i,
/* Standalone selectors: dropdowns rendered outside <table> by Bootstrap JS */
html[data-theme-id] .action-dropdown-menu i,
html[data-theme-id] .action-dropdown-menu svg,
html[data-theme-id] .action-dropdown-menu .dropdown-item i,
html[data-theme-id] .action-dropdown-menu .dropdown-item svg,
html[data-theme-id] [data-table-dropdown] i,
html[data-theme-id] [data-table-dropdown] svg,
html[data-theme-id] [data-table-dropdown] .dropdown-item i,
html[data-theme-id] [data-table-dropdown] .dropdown-item svg {
  color: var(--theme-table-icon-color, var(--theme-primary)) !important;
}

/* Override hardcoded text-* utility classes on action icons inside table dropdowns.
   Icons with text-primary, text-info, text-warning, text-success, text-secondary
   on action dropdown items must still respect the theme icon color token.
   Exception: danger (delete) items keep their red color intentionally. */
html[data-theme-id] .action-dropdown-menu .dropdown-item:not(.text-danger) i[class*="text-"],
html[data-theme-id] [data-table-dropdown] .dropdown-item:not(.text-danger) i[class*="text-"],
html[data-theme-id] .table .action-dropdown-menu .dropdown-item:not(.text-danger) i[class*="text-"],
html[data-theme-id] table .action-dropdown-menu .dropdown-item:not(.text-danger) i[class*="text-"],
html[data-theme-id] .modern-table .action-dropdown-menu .dropdown-item:not(.text-danger) i[class*="text-"],
html[data-theme-id] .table-custom .action-dropdown-menu .dropdown-item:not(.text-danger) i[class*="text-"] {
  color: var(--theme-table-icon-color, var(--theme-primary)) !important;
}

/* Keep the icon legible when the action button flips to its hover fill.
   Buttons whose hover fill becomes the themed primary fill need light glyphs;
   controls that only soften their background on hover keep the themed icon
   color so the glyph stays readable on the neutral surface. */
html[data-theme-id] .table .action-dots-btn:hover i,
html[data-theme-id] table .action-dots-btn:hover i,
html[data-theme-id] .modern-table .action-dots-btn:hover i,
html[data-theme-id] .table-custom .action-dots-btn:hover i,
html[data-theme-id] .action-dots-btn:hover i,
html[data-theme-id] .table .action-btn-table:hover i,
html[data-theme-id] table .action-btn-table:hover i,
html[data-theme-id] .modern-table .action-btn-table:hover i,
html[data-theme-id] .table-custom .action-btn-table:hover i,
html[data-theme-id] .action-btn-table:hover i,
html[data-theme-id] .table .table-action-btn:hover i,
html[data-theme-id] table .table-action-btn:hover i,
html[data-theme-id] .modern-table .table-action-btn:hover i,
html[data-theme-id] .table-custom .table-action-btn:hover i,
html[data-theme-id] .table-action-btn:hover i,
html[data-theme-id] .table .btn-dots-menu:hover i,
html[data-theme-id] table .btn-dots-menu:hover i,
html[data-theme-id] .modern-table .btn-dots-menu:hover i,
html[data-theme-id] .table-custom .btn-dots-menu:hover i,
html[data-theme-id] .btn-dots-menu:hover i,
html[data-theme-id] .table .btn-dots-sm:hover i,
html[data-theme-id] table .btn-dots-sm:hover i,
html[data-theme-id] .modern-table .btn-dots-sm:hover i,
html[data-theme-id] .table-custom .btn-dots-sm:hover i,
html[data-theme-id] .btn-dots-sm:hover i,
html[data-theme-id] .table .show > .action-dots-btn i,
html[data-theme-id] table .show > .action-dots-btn i,
html[data-theme-id] .modern-table .show > .action-dots-btn i,
html[data-theme-id] .table-custom .show > .action-dots-btn i,
html[data-theme-id] .show > .action-dots-btn i,
html[data-theme-id] .table .show > .btn-dots-menu i,
html[data-theme-id] table .show > .btn-dots-menu i,
html[data-theme-id] .modern-table .show > .btn-dots-menu i,
html[data-theme-id] .table-custom .show > .btn-dots-menu i,
html[data-theme-id] .show > .btn-dots-menu i,
html[data-theme-id] .table .show > .btn-dots-sm i,
html[data-theme-id] table .show > .btn-dots-sm i,
html[data-theme-id] .modern-table .show > .btn-dots-sm i,
html[data-theme-id] .table-custom .show > .btn-dots-sm i,
html[data-theme-id] .show > .btn-dots-sm i {
  color: var(--theme-btn-primary-text, #ffffff) !important;
}

html[data-theme-id] .table .action-btn-circle:hover i,
html[data-theme-id] table .action-btn-circle:hover i,
html[data-theme-id] .modern-table .action-btn-circle:hover i,
html[data-theme-id] .table-custom .action-btn-circle:hover i,
html[data-theme-id] .action-btn-circle:hover i,
html[data-theme-id] .table .action-toggle-btn:hover i,
html[data-theme-id] table .action-toggle-btn:hover i,
html[data-theme-id] .modern-table .action-toggle-btn:hover i,
html[data-theme-id] .table-custom .action-toggle-btn:hover i,
html[data-theme-id] .action-toggle-btn:hover i,
html[data-theme-id] .table .show > .action-btn-circle i,
html[data-theme-id] table .show > .action-btn-circle i,
html[data-theme-id] .modern-table .show > .action-btn-circle i,
html[data-theme-id] .table-custom .show > .action-btn-circle i,
html[data-theme-id] .show > .action-btn-circle i,
html[data-theme-id] .table .show > .action-toggle-btn i,
html[data-theme-id] table .show > .action-toggle-btn i,
html[data-theme-id] .modern-table .show > .action-toggle-btn i,
html[data-theme-id] .table-custom .show > .action-toggle-btn i,
html[data-theme-id] .show > .action-toggle-btn i,
html[data-theme-id] .table .action-dropdown-menu .dropdown-item:hover i,
html[data-theme-id] table .action-dropdown-menu .dropdown-item:hover i,
html[data-theme-id] .modern-table .action-dropdown-menu .dropdown-item:hover i,
html[data-theme-id] .table-custom .action-dropdown-menu .dropdown-item:hover i,
html[data-theme-id] .action-dropdown-menu .dropdown-item:hover i,
html[data-theme-id] [data-table-dropdown] .dropdown-item:hover i {
  color: var(--theme-table-icon-color, var(--theme-primary)) !important;
}

/* Ensure danger / delete action items retain danger status color */
html[data-theme-id] .action-dropdown-menu .dropdown-item.text-danger i,
html[data-theme-id] .action-dropdown-menu .dropdown-item.text-danger svg,
html[data-theme-id] .action-dropdown-menu .dropdown-item-danger i,
html[data-theme-id] .action-dropdown-menu .dropdown-item-danger svg,
html[data-theme-id] [data-table-dropdown] .dropdown-item.text-danger i,
html[data-theme-id] [data-table-dropdown] .dropdown-item.text-danger svg,
html[data-theme-id] .action-btn-table.delete i {
  color: var(--theme-danger, #ef4444) !important;
}
html[data-theme-id] .action-dropdown-menu .dropdown-item.text-danger:hover i,
html[data-theme-id] .action-dropdown-menu .dropdown-item.text-danger:hover svg,
html[data-theme-id] .action-dropdown-menu .dropdown-item-danger:hover i,
html[data-theme-id] .action-dropdown-menu .dropdown-item-danger:hover svg,
html[data-theme-id] [data-table-dropdown] .dropdown-item.text-danger:hover i,
html[data-theme-id] [data-table-dropdown] .dropdown-item.text-danger:hover svg,
html[data-theme-id] .action-btn-table.delete:hover i {
  color: #ffffff !important;
}

/* Retain semantic status colors on table badge icons */
html[data-theme-id] table .badge[class*="success"] i,
html[data-theme-id] table .badge[class*="danger"] i,
html[data-theme-id] table .badge[class*="warning"] i,
html[data-theme-id] table .badge[class*="info"] i,
html[data-theme-id] .table .badge[class*="success"] i,
html[data-theme-id] .table .badge[class*="danger"] i,
html[data-theme-id] .table .badge[class*="warning"] i,
html[data-theme-id] .table .badge[class*="info"] i,
html[data-theme-id] .modern-table .badge[class*="success"] i,
html[data-theme-id] .modern-table .badge[class*="danger"] i,
html[data-theme-id] .modern-table .badge[class*="warning"] i,
html[data-theme-id] .modern-table .badge[class*="info"] i,
html[data-theme-id] .table-custom .badge[class*="success"] i,
html[data-theme-id] .table-custom .badge[class*="danger"] i,
html[data-theme-id] .table-custom .badge[class*="warning"] i,
html[data-theme-id] .table-custom .badge[class*="info"] i {
  color: inherit !important;
}

html[data-theme-id] .pagination .page-link {
  background-color: var(--theme-card-bg) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

html[data-theme-id] .pagination .page-link:hover {
  background-color: var(--theme-surface-secondary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
}

html[data-theme-id] .pagination .page-item.active .page-link {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-btn-primary-text, #ffffff) !important;
}

/* Status Semantic Classes (Bound to Semantic Theme Variables) */
.status-success { color: var(--theme-success, #10b981) !important; }
.status-warning { color: var(--theme-warning, #f59e0b) !important; }
.status-danger { color: var(--theme-danger, #ef4444) !important; }
.status-info { color: var(--theme-info, #0284c7) !important; }
.status-success-bg { background-color: rgba(var(--bs-success-rgb, 16, 185, 129), 0.12) !important; color: var(--theme-success, #10b981) !important; }
.status-warning-bg { background-color: rgba(var(--bs-warning-rgb, 245, 158, 11), 0.12) !important; color: var(--theme-warning, #f59e0b) !important; }
.status-danger-bg { background-color: rgba(var(--bs-danger-rgb, 239, 68, 68), 0.12) !important; color: var(--theme-danger, #ef4444) !important; }
.status-info-bg { background-color: rgba(2, 132, 199, 0.12) !important; color: var(--theme-info, #0284c7) !important; }

/* ============================================================
 * CRYSTAL GLASS GENUINE GLASSMORPHIC ENGINE
 * ============================================================ */
html[data-theme-id="crystal-glass"] body {
  background: #EDF3F9 !important;
  background-image: 
    radial-gradient(at 0% 0%, rgba(2, 132, 199, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.10) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(14, 165, 233, 0.06) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(2, 132, 199, 0.06) 0px, transparent 50%) !important;
  background-attachment: fixed !important;
  color: #0F172A !important;
}

/* Fallback when backdrop-filter is NOT supported */
html[data-theme-id="crystal-glass"] .sidebar,
/* Fallback for Non-Backdrop-Filter Browsers */
html[data-theme-id="crystal-glass"] .sidebar,
html[data-theme-id="crystal-glass"] .top-navbar,
html[data-theme-id="crystal-glass"] .card,
html[data-theme-id="crystal-glass"] .stat-card,
html[data-theme-id="crystal-glass"] .dashboard-card,
html[data-theme-id="crystal-glass"] .form-card,
html[data-theme-id="crystal-glass"] .wizard-steps-container,
html[data-theme-id="crystal-glass"] .modal-content,
html[data-theme-id="crystal-glass"] .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(186, 230, 253, 0.7) !important;
}

/* Level 4: Form Controls Glass */
html[data-theme-id="crystal-glass"] .form-control,
html[data-theme-id="crystal-glass"] .form-select,
html[data-theme-id="crystal-glass"] .input-group-text {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(186, 230, 253, 0.75) !important;
  color: #0f172a !important;
}
html[data-theme-id="crystal-glass"] .form-control:focus,
html[data-theme-id="crystal-glass"] .form-select:focus {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.22) !important;
}

/* Modern Browsers with Backdrop-Filter (5-Level Hierarchy) */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  /* Level 2: Sidebar & Navbar Glass */
  html[data-theme-id="crystal-glass"] .sidebar {
    background: rgba(245, 249, 253, 0.82) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.65) !important;
  }

  html[data-theme-id="crystal-glass"] .top-navbar {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
  }

  /* Level 3: Cards, Panels & Wizards */
  html[data-theme-id="crystal-glass"] .card,
  html[data-theme-id="crystal-glass"] .stat-card,
  html[data-theme-id="crystal-glass"] .dashboard-card,
  html[data-theme-id="crystal-glass"] .category-card,
  html[data-theme-id="crystal-glass"] .filter-card,
  html[data-theme-id="crystal-glass"] .form-card,
  html[data-theme-id="crystal-glass"] .wizard-steps-container {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 8px 32px 0 rgba(2, 132, 199, 0.08) !important;
  }

  /* Level 4: Inputs with Backdrop Blur */
  html[data-theme-id="crystal-glass"] .form-control,
  html[data-theme-id="crystal-glass"] .form-select {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Level 5: Modals & Dropdowns */
  html[data-theme-id="crystal-glass"] .modal-content {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15) !important;
  }

  html[data-theme-id="crystal-glass"] .dropdown-menu {
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1) !important;
  }
}

html[data-theme-id="crystal-glass"] .card-header,
html[data-theme-id="crystal-glass"] .modal-header,
html[data-theme-id="crystal-glass"] .form-footer-action {
  background: rgba(240, 246, 252, 0.65) !important;
  border-bottom: 1px solid rgba(186, 230, 253, 0.5) !important;
}

html[data-theme-id="crystal-glass"] .table-responsive {
  border-radius: var(--theme-radius-lg, 14px);
  background: rgba(255, 255, 255, 0.72) !important;
}

/* Crystal Glass Dark Mode */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .sidebar {
    background: rgba(15, 23, 42, 0.78) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .top-navbar {
    background: rgba(15, 23, 42, 0.75) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .card,
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .stat-card,
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .dashboard-card,
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .form-card,
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .wizard-steps-container {
    background: rgba(21, 29, 48, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important;
  }
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .modal-content {
    background: rgba(21, 29, 48, 0.90) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .form-control,
  html[data-theme-id="crystal-glass"][data-theme-mode="dark"] .form-select {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
  }
}

/* ===== Contact Info & Metadata Blocks (Universal Table Alignment) ===== */
html[data-theme-id] .contact-info-block .contact-phone,
html[data-theme-id] .contact-phone,
html[data-theme-id] .school-phone,
html[data-theme-id] table td .contact-phone,
html[data-theme-id] table td .school-phone {
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
}

html[data-theme-id] .contact-info-block .contact-email,
html[data-theme-id] .contact-email,
html[data-theme-id] .school-email,
html[data-theme-id] .school-location-text,
html[data-theme-id] table td .contact-email,
html[data-theme-id] table td .school-email,
html[data-theme-id] table td .school-location-text {
  color: var(--theme-table-text, var(--theme-text-primary)) !important;
  opacity: 0.8;
}

/* Contact icons respect the Table Icon color token everywhere */
html[data-theme-id] .contact-info-block .contact-phone i,
html[data-theme-id] .contact-info-block .contact-email i,
html[data-theme-id] .contact-phone i,
html[data-theme-id] .contact-email i,
html[data-theme-id] .school-phone i,
html[data-theme-id] .school-email i,
html[data-theme-id] .school-location-text i,
html[data-theme-id] table td .contact-phone i,
html[data-theme-id] table td .contact-email i,
html[data-theme-id] table td .school-phone i,
html[data-theme-id] table td .school-email i,
html[data-theme-id] table td .school-location-text i {
  color: var(--theme-table-icon-color, var(--theme-primary)) !important;
}