/* ==========================================================================
   AI CAMPUS MEDIA STUDIO — MASTER ADMIN THEME
   Version: 3.0 — Complete Reconstruction
   
   ROOT CAUSE OF PREVIOUS FAILURES:
   1. The HTML shell uses Tailwind CDN (bg-slate-950, text-white, etc.) which
      generates atomic utilities that override theme.css variable-based rules.
   2. header.php has a hardcoded <style> block (sidebar-active, scrollbar,
      body font) that overwrites our rules.
   3. Pages use literal Tailwind classes (bg-slate-900/90, bg-indigo-600,
      text-slate-400, etc.) on every structural element — not the CSS variables.
   
   SOLUTION:
   - Use strategic specificity (element + class, or grouped selectors) to
     match and override the actual Tailwind classes applied in the DOM.
   - Target the exact selectors and Tailwind classes used in the PHP files.
   - Use !important ONLY where a Tailwind utility class directly conflicts
     with a structural rule we must enforce.
   - Preserve all application behavior and layout structure.
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
  /* ── Brand: Champagne Gold Palette ── */
  --gold:               #D8B56A;
  --gold-deep:          #A9791F;
  --gold-dark:          #8C5B12;
  --gold-light:         #E8CD8F;
  --gold-pale:          #F3E7C9;
  --gold-surface:       #F3EADB;
  --gold-border:        #DCC79D;
  --gold-highlight:     #EBD59E;

  /* ── Brand: Warm Neutrals ── */
  --warm-ivory:         #F7F4EC;
  --warm-white:         #FCFBF8;
  --pure-white:         #FFFFFF;
  --warm-gray:          #D7D0C2;
  --muted-warm-gray:    #8F897E;

  /* ── Dark Surface Hierarchy ── */
  --deep-black:         #0A0A0A;
  --rich-charcoal:      #141414;
  --dark-surface:       #1B1A18;
  --elevated-dark:      #22211E;
  --muted-dark:         #292722;
  --warm-dark-border:   #37342C;

  /* ── Text Dark ── */
  --dark-text:          #191714;
  --secondary-dark-text:#514B41;

  /* ── Text Light ── */
  --light-text:         #F7F4EC;
  --secondary-light-text:#B9B2A6;
  --muted-light-text:   #918B80;

  /* ── AI Intelligence (Violet) ── */
  --ai-violet:          #9B5CFF;
  --ai-violet-light:    #B37FFF;
  --ai-violet-glow:     rgba(155, 92, 255, 0.18);

  /* ── Semantic Status ── */
  --success:            #18794E;
  --success-surface:    #E7F5EC;
  --warning:            #946200;
  --warning-surface:    #FBF1D9;
  --error:              #B42318;
  --error-surface:      #FCE9E7;
  --info:               #3F5F79;
  --info-surface:       #EAF2F8;

  /* ── Radius Scale ── */
  --radius-xs:          6px;
  --radius-sm:          8px;
  --radius-md:          10px;
  --radius-controls:    12px;
  --radius-input:       12px;
  --radius-card:        16px;
  --radius-large:       20px;
  --radius-hero:        24px;
  --radius-nav:         32px;
  --radius-pill:        9999px;

  /* ── Spacing Scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Motion Tokens ── */
  --transition-fast:    120ms cubic-bezier(0.33, 1, 0.68, 1);
  --transition-std:     200ms cubic-bezier(0.33, 1, 0.68, 1);
  --transition-slow:    320ms cubic-bezier(0.65, 0, 0.35, 1);

  /* ── DARK MODE (Default) ── */
  --bg:                 #0A0A0A;
  --bg-main:            #10100F;
  --surface:            #141414;
  --surface-2:          #1B1A18;
  --surface-3:          #22211E;
  --surface-modal:      #181715;

  --text-primary:       #F7F4EC;
  --text-secondary:     #C3BBAE;
  --text-muted:         #918B80;
  --text-placeholder:   #918B80;

  --accent:             #D8B56A;
  --accent-hover:       #E8CD8F;
  --accent-active:      #C69B42;
  --accent-soft:        #302718;
  --accent-selected:    #392E1B;
  --accent-border:      #69542C;

  --border:             #302F2B;
  --border-strong:      #454035;

  --sidebar-bg:         #0D0D0D;
  --sidebar-border:     #302F2B;
  --sidebar-text:       #C3BBAE;
  --sidebar-icon:       #B8B0A3;
  --sidebar-hover:      #1D1A14;
  --sidebar-active-bg:  #302718;
  --sidebar-active-text:#F7F4EC;
  --sidebar-active-icon:#E8CD8F;

  --header-bg:          #10100F;
  --header-border:      #302F2B;

  --input-bg:           #141414;
  --input-border:       #37342C;
  --input-text:         #F7F4EC;

  --table-header-bg:    #201D17;
  --table-row-bg:       #141414;
  --table-row-hover:    #201D17;

  --modal-bg:           #181715;
  --dropdown-bg:        #181715;
  --divider:            #302F2B;

  --status-success:     #55C995;
  --status-success-bg:  #173126;
  --status-warning:     #E8C16D;
  --status-warning-bg:  #352B18;
  --status-error:       #FF827A;
  --status-error-bg:    #351B1A;
  --status-info:        #8DBBE0;
  --status-info-bg:     #192936;

  /* For compatibility with pages using old vars */
  --gold-glow:          rgba(216, 181, 106, 0.18);
  --gold-border-rgba:   rgba(105, 84, 44, 0.50);
  --surface-secondary:  #1B1A18;
  --surface-elevated:   #22211E;
  --border-light:       #302F2B;
  --danger:             #FF827A;
  --ai-violet-border:   rgba(155, 92, 255, 0.30);
}

/* ── LIGHT MODE (Editorial) ── */
html[data-theme="light"] {
  --bg:                 #F7F4EC;
  --bg-main:            #F7F4EC;
  --surface:            #FFFFFF;
  --surface-2:          #FCFBF8;
  --surface-3:          #FFFFFF;
  --surface-modal:      #FFFFFF;

  --text-primary:       #191714;
  --text-secondary:     #514B41;
  --text-muted:         #81796C;
  --text-placeholder:   #91897C;

  --accent:             #A9791F;
  --accent-hover:       #8C5B12;
  --accent-active:      #7A4D0E;
  --accent-soft:        #F3EADB;
  --accent-selected:    #F1E5C9;
  --accent-border:      #DCC79D;

  --border:             #E3D9C5;
  --border-strong:      #D5C6A7;

  --sidebar-bg:         #FFFFFF;
  --sidebar-border:     #E4DCCB;
  --sidebar-text:       #514B41;
  --sidebar-icon:       #625A4D;
  --sidebar-hover:      #F7F1E4;
  --sidebar-active-bg:  #F3EADB;
  --sidebar-active-text:#191714;
  --sidebar-active-icon:#A9791F;

  --header-bg:          #F7F4EC;
  --header-border:      #E3D9C5;

  --input-bg:           #FFFFFF;
  --input-border:       #DED5C3;
  --input-text:         #191714;

  --table-header-bg:    #F3EADB;
  --table-row-bg:       #FFFFFF;
  --table-row-hover:    #FAF6EC;

  --modal-bg:           #FFFFFF;
  --dropdown-bg:        #FFFFFF;
  --divider:            #E3D9C5;

  --status-success:     #18794E;
  --status-success-bg:  #E7F5EC;
  --status-warning:     #946200;
  --status-warning-bg:  #FBF1D9;
  --status-error:       #B42318;
  --status-error-bg:    #FCE9E7;
  --status-info:        #3F5F79;
  --status-info-bg:     #EAF2F8;

  --gold:               #A9791F;
  --gold-light:         #C7963C;
  --gold-glow:          rgba(169, 121, 34, 0.15);
  --gold-border-rgba:   rgba(169, 121, 34, 0.40);
  --surface-secondary:  #FCFBF8;
  --surface-elevated:   #FFFFFF;
  --border-light:       #EDE8D8;
  --danger:             #B42318;
  --ai-violet:          #7447C7;
  --ai-violet-light:    #8D5DF2;
  --ai-violet-glow:     rgba(116, 71, 199, 0.15);
  --ai-violet-border:   rgba(116, 71, 199, 0.28);
}

/* ==========================================================================
   SECTION 2 — BASE RESET & BODY CANVAS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Override Tailwind's html class="bg-slate-950" */
html {
  background-color: var(--bg) !important;
  color: var(--text-primary);
}

html[data-theme="light"] {
  background-color: var(--bg) !important;
}

body {
  background-color: var(--bg) !important;
  color: var(--text-primary) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  margin: 0;
}

/* ==========================================================================
   SECTION 3 — APPLICATION SHELL (Sidebar, Header, Main)
   Theme must override Tailwind's bg-slate-* classes on these structural elements
   ========================================================================== */

/* ── Sidebar ── */
aside#sidebar,
.sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right-color: var(--sidebar-border) !important;
  width: 240px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 30;
  transition: background-color var(--transition-std);
}

/* Sidebar brand header */
aside#sidebar > div:first-child,
.sidebar > div:first-child {
  border-bottom-color: var(--sidebar-border) !important;
}

/* Brand name text — override text-white */
aside#sidebar h1,
.sidebar h1 {
  color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700;
}

/* Brand subtitle — override text-indigo-400 */
aside#sidebar span.text-indigo-400,
.sidebar span.text-indigo-400 {
  color: var(--accent) !important;
}

/* Brand logo icon container — override from-indigo-600 to-violet-500 */
aside#sidebar .from-indigo-600,
aside#sidebar .from-indigo-600.to-violet-500,
.sidebar .bg-gradient-to-tr {
  background: linear-gradient(135deg, var(--accent), #B8860B) !important;
  box-shadow: 0 4px 12px rgba(169, 121, 34, 0.25) !important;
}

/* College context chip */
aside#sidebar .bg-slate-950\/80,
.sidebar .bg-slate-950\/80 {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* ── Navigation Items ── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-controls);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--sidebar-text) !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.nav-item i,
.nav-item svg {
  color: var(--sidebar-icon) !important;
  width: 18px;
  text-align: center;
}

.nav-item:hover {
  background-color: var(--sidebar-hover) !important;
  color: var(--text-primary) !important;
}

.nav-item:hover i {
  color: var(--accent) !important;
}

.nav-item.active,
.nav-item.sidebar-active {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  border-left-color: var(--accent) !important;
}

.nav-item.active i,
.nav-item.sidebar-active i {
  color: var(--sidebar-active-icon) !important;
}

/* ── User Profile Card in Sidebar ── */
aside#sidebar .p-4.mt-auto,
.sidebar .p-4.mt-auto {
  background-color: var(--surface-2) !important;
  border-top-color: var(--border) !important;
  border-radius: var(--radius-card);
  margin: 0 8px 8px;
}

/* Override hardcoded inline style sidebar-active rule from header.php <style> block */
.sidebar-active {
  background: linear-gradient(90deg, var(--sidebar-active-bg) 0%, rgba(48, 39, 24, 0.3) 100%) !important;
  color: var(--sidebar-active-icon) !important;
  border-left: 3px solid var(--accent) !important;
}

/* ── Scrollbars ── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--bg) !important;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong) !important;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
}

/* ── Mobile Header Bar ── */
body > div.md\:hidden,
.md\:hidden.flex.items-center.justify-between {
  background-color: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}

/* mobile nav title */
body > div.md\:hidden span.font-bold {
  color: var(--text-primary) !important;
}

/* mobile hamburger button */
body > div.md\:hidden button {
  color: var(--text-muted) !important;
}
body > div.md\:hidden button:hover {
  color: var(--text-primary) !important;
  background-color: var(--surface-2) !important;
}

/* ── Main Content Area ── */
main.flex-1,
main {
  background-color: var(--bg-main) !important;
  color: var(--text-primary) !important;
}

/* ── Header/Topbar ── */
header.header,
main > header {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}

header.header h2,
main > header h2 {
  color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 17px;
  font-weight: 700;
}

/* ── Page Content Wrapper ── */
main .p-6 {
  padding: 24px;
}

/* ==========================================================================
   SECTION 4 — TYPOGRAPHY
   ========================================================================== */

/* Override Tailwind text-white, text-slate-* globally in context */
main h1, main h2, main h3, main h4, main h5, main h6 {
  color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
}

main p,
main span.text-slate-400,
main p.text-slate-400,
main .text-slate-400 {
  color: var(--text-muted) !important;
}

main .text-slate-300 {
  color: var(--text-secondary) !important;
}

main .text-white {
  color: var(--text-primary) !important;
}

/* Display Scale */
.display-lg {
  font-family: 'Outfit', sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--text-primary);
}
.display-md {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.20;
  letter-spacing: -0.6px;
  color: var(--text-primary);
}
.display-sm {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

/* Headline Scale */
.headline-lg { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--text-primary); }
.headline-md { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.30; color: var(--text-primary); }
.headline-sm { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }

/* Title Scale */
.title-lg { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.40; color: var(--text-primary); }
.title-md { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.40; color: var(--text-primary); }
.title-sm { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.33; color: var(--text-secondary); }

/* Body Scale */
.body-lg  { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--text-primary); }
.body-md  { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); }
.body-sm  { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--text-muted); }

/* Label Scale */
.label-lg { font-family: 'Outfit', sans-serif;            font-size: 13px; font-weight: 600; letter-spacing: 0.4px; color: var(--text-primary); }
.label-md { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: var(--text-secondary); }
.label-sm { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-muted); }

/* Section labels */
.section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
}

/* Playfair Editorial */
.quote-lg { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 600; font-style: italic; line-height: 1.25; color: var(--text-primary); }
.quote-md { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; font-style: italic; line-height: 1.30; color: var(--text-primary); }
.quote-sm { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 500; font-style: italic; line-height: 1.40; color: var(--text-secondary); }

/* ==========================================================================
   SECTION 5 — CARDS & CONTAINERS
   Targeting Tailwind classes used in the actual PHP pages
   ========================================================================== */

/* Primary card used by dashboard, events, users, categories tables */
.bg-slate-900\/90,
div.bg-slate-900\/90 {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Secondary card used in colleges.php form sections */
.bg-slate-900\/90.border.border-slate-800,
div.bg-slate-900\/90.border.border-slate-800 {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Elevated dark card (bg-[#0b0c10]) in events modal */
div[style*="background: #0b0c10"],
div.bg-\[#0b0c10\] {
  background-color: var(--surface-modal) !important;
}

/* Inner form panels (bg-[#121318]) */
div.bg-\[#121318\] {
  background-color: var(--surface-2) !important;
}

/* Slate-950 form inputs inner bg */
.bg-slate-950 {
  background-color: var(--input-bg) !important;
}

/* General card utility class (used in login page etc.) */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  transition: background-color var(--transition-std), border-color var(--transition-std), box-shadow var(--transition-std);
}

.card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
}

html[data-theme="light"] .card {
  box-shadow: 0 1px 8px rgba(25, 23, 20, 0.06);
}

html[data-theme="light"] .card:hover {
  box-shadow: 0 4px 16px rgba(25, 23, 20, 0.10);
}

/* Stat Cards */
.stat-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
  transition: background-color var(--transition-std), border-color var(--transition-std);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--ai-violet));
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.stat-card .value {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.stat-card .label {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.0px;
  text-transform: uppercase;
}

/* Media cards */
div.bg-slate-900.border.border-slate-800.rounded-xl {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

div.bg-slate-900 {
  background-color: var(--surface) !important;
}

/* Template card inner bg */
div.bg-slate-900\/90.border.border-slate-800.rounded-2xl {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* ==========================================================================
   SECTION 6 — TABLES
   Targeting exact classes from events.php, users.php, categories.php
   ========================================================================== */

/* Table container */
.bg-slate-900\/90.border.border-slate-800.rounded-2xl.shadow-lg.overflow-hidden {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-card) !important;
}

/* Table header */
thead.bg-slate-950 {
  background-color: var(--table-header-bg) !important;
}

thead tr,
thead.bg-slate-950 {
  border-bottom-color: var(--border) !important;
}

thead th {
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.0px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  padding: 12px 16px !important;
  background-color: var(--table-header-bg) !important;
}

/* Table body */
tbody tr {
  background-color: var(--table-row-bg) !important;
  border-bottom-color: var(--border) !important;
  transition: background-color var(--transition-fast);
}

tbody tr:hover,
tbody tr.hover\:bg-slate-800\/30:hover {
  background-color: var(--table-row-hover) !important;
}

tbody td {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: var(--text-secondary) !important;
  padding: 14px 16px;
  border-bottom-color: var(--border) !important;
}

tbody td.font-bold.text-white,
tbody td:first-child {
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* Table dividers */
.divide-y.divide-slate-800\/60 > * {
  border-color: var(--border) !important;
}

.divide-y.divide-slate-800\/60 > :not(:first-child) {
  border-top-color: var(--border) !important;
}

/* Monospaced cells */
tbody td.font-mono {
  color: var(--text-secondary) !important;
}

/* Category slug — override text-indigo-400 */
tbody td.text-indigo-400 {
  color: var(--accent) !important;
}

/* ==========================================================================
   SECTION 7 — BUTTONS
   ========================================================================== */

/* Primary Gold Button */
.btn-primary,
a.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--accent) 100%) !important;
  color: #0A0A0A !important;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 10px 22px;
  border-radius: var(--radius-controls);
  border: none !important;
  box-shadow: 0 3px 12px rgba(169, 121, 34, 0.30);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(169, 121, 34, 0.40);
  filter: brightness(1.05);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Indigo-600 (CTA) buttons — override Tailwind bg-indigo-600 on action buttons */
button.bg-indigo-600,
a.bg-indigo-600,
.bg-indigo-600 {
  background-color: var(--accent) !important;
  color: #0A0A0A !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

button.bg-indigo-600:hover,
a.bg-indigo-600:hover,
.bg-indigo-600:hover,
button.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-500:hover {
  background-color: var(--accent-hover) !important;
  color: #0A0A0A !important;
}

/* Shadow override for indigo buttons */
.shadow-indigo-600\/30,
.shadow-lg.shadow-indigo-600\/30 {
  box-shadow: 0 4px 14px rgba(169, 121, 34, 0.28) !important;
}

/* AI Violet Button */
.btn-ai,
button.bg-violet-600,
.bg-violet-600 {
  background: linear-gradient(135deg, var(--ai-violet-light), var(--ai-violet)) !important;
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--radius-controls);
  border: none !important;
  box-shadow: 0 3px 12px var(--ai-violet-glow);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}

.btn-ai:hover,
button.bg-violet-600:hover,
.hover\:bg-violet-500:hover {
  background: linear-gradient(135deg, var(--ai-violet), #7A3FE0) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(155, 92, 255, 0.38) !important;
}

/* Outline Button */
.btn-outline,
a.btn-outline,
button.btn-outline {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-controls);
  transition: all var(--transition-std);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}

.btn-outline:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* Danger Button */
.btn-danger,
a.btn-danger,
button.btn-danger {
  background: var(--status-error-bg) !important;
  color: var(--status-error) !important;
  border: 1px solid rgba(180, 35, 24, 0.30) !important;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-controls);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn-danger:hover {
  background: rgba(180, 35, 24, 0.18) !important;
}

/* Slate-800 generic "cancel/secondary" buttons */
button.bg-slate-800 {
  background-color: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-controls);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
}

button.bg-slate-800:hover {
  background-color: var(--surface-3) !important;
  color: var(--text-primary) !important;
}

/* Disabled */
button:disabled, .btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   SECTION 8 — BADGES & STATUS PILLS
   ========================================================================== */

.badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.badge-active, .bg-emerald-500\/10.text-emerald-400 {
  background: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border: 1px solid rgba(85, 201, 149, 0.25) !important;
}

html[data-theme="light"] .badge-active,
html[data-theme="light"] .bg-emerald-500\/10.text-emerald-400 {
  background: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border-color: rgba(24, 121, 78, 0.25) !important;
}

.badge-draft {
  background: rgba(145, 139, 128, 0.10);
  color: var(--text-muted);
  border: 1px solid rgba(145, 139, 128, 0.20);
}

.badge-pending,
.bg-amber-500\/10.text-amber-400,
.bg-amber-500\/10 {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning) !important;
  border: 1px solid rgba(148, 98, 0, 0.25) !important;
}

.badge-error, .badge-danger,
.bg-rose-500\/10.text-rose-400,
.bg-rose-500\/10 {
  background: var(--status-error-bg) !important;
  color: var(--status-error) !important;
  border: 1px solid rgba(180, 35, 24, 0.25) !important;
}

.badge-ai {
  background: var(--ai-violet-glow);
  color: var(--ai-violet);
  border: 1px solid var(--ai-violet-border);
}

/* Slug/ID label in indigo (categories, templates) */
.text-indigo-400 {
  color: var(--accent) !important;
}

.text-indigo-300 {
  color: var(--gold-light) !important;
}

/* Event category pills override */
.bg-slate-800.text-indigo-300 {
  background-color: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}

/* Status badges in events/categories table */
.bg-emerald-500\/80.text-white,
.bg-emerald-500\/10.text-emerald-400.border.border-emerald-500\/30 {
  background: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border-color: rgba(85, 201, 149, 0.30) !important;
}

.bg-rose-500\/80.text-white,
.bg-rose-500\/10.text-rose-400.border.border-rose-500\/30 {
  background: var(--status-error-bg) !important;
  color: var(--status-error) !important;
  border-color: rgba(180, 35, 24, 0.30) !important;
}

/* Role badge override in users table */
.bg-indigo-500\/20.text-indigo-300.border.border-indigo-500\/40 {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}

/* ==========================================================================
   SECTION 9 — FORMS & INPUTS
   ========================================================================== */

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="number"],
input[type="file"],
select,
textarea {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius-input) !important;
  color: var(--input-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-placeholder) !important;
}

.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(169, 121, 34, 0.15) !important;
}

/* Override focus:border-indigo-500 used in colleges.php, events.php etc */
input.focus\:border-indigo-500:focus,
select.focus\:border-indigo-500:focus,
input.focus\:border-amber-500:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(169, 121, 34, 0.15) !important;
}

/* Labels */
label,
label.block {
  color: var(--text-secondary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

/* Slate-300/400 label overrides from colleges, events pages */
label.text-slate-300,
label.text-xs.font-semibold.text-slate-300,
.text-slate-300 {
  color: var(--text-secondary) !important;
}

label.text-slate-400,
.text-xs.text-slate-400 {
  color: var(--text-muted) !important;
}

/* File input custom button */
input[type="file"]::file-selector-button {
  background-color: var(--accent) !important;
  color: #0A0A0A !important;
  border: none !important;
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color var(--transition-fast);
}

input[type="file"]::file-selector-button:hover {
  background-color: var(--accent-hover) !important;
}

/* Checkboxes */
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  border-radius: 4px !important;
}

/* Color inputs */
input[type="color"] {
  background: transparent;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

/* ==========================================================================
   SECTION 10 — MODALS & OVERLAYS
   ========================================================================== */

/* Modal overlay backdrop */
.modal-overlay,
div.fixed.inset-0.bg-slate-950\/80,
div.fixed.inset-0.bg-slate-950\/90,
div.fixed.inset-0.bg-slate-950\/95,
div.fixed.inset-0.bg-slate-950\/80.backdrop-blur-sm,
div.fixed.inset-0.bg-slate-950\/80.backdrop-blur-md {
  background-color: rgba(10, 10, 10, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Modal card panels */
.modal,
div.bg-slate-900.border.border-slate-800.rounded-2xl.max-w-lg,
div.bg-slate-900.border.border-slate-800.rounded-2xl.max-w-md,
div.bg-slate-900.border.border-slate-800.rounded-2xl.max-w-xl,
div.bg-\[#0b0c10\].border.border-slate-800.rounded-3xl {
  background-color: var(--modal-bg) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-large) !important;
}

/* Modal headers */
.modal h4,
div.bg-slate-900 > h4.font-bold.text-white,
div.bg-\[#0b0c10\] h4.font-bold.text-white,
div.bg-\[#0b0c10\] h5 {
  color: var(--text-primary) !important;
}

div.bg-\[#0b0c10\] h5.text-amber-500,
.text-amber-500 {
  color: var(--accent) !important;
  font-family: 'Outfit', sans-serif;
}

/* Image viewer modal */
div.fixed.inset-0.bg-slate-950\/95.backdrop-blur-md {
  background-color: rgba(10, 10, 10, 0.96) !important;
}

/* Modal entry animation */
div[id$="Modal"] > div {
  animation: modalIn 220ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   SECTION 11 — DASHBOARD COMPONENTS
   ========================================================================== */

/* Welcome Banner */
main .mb-8.p-6.md\:p-8 {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Quick Action shortcut cards */
main .p-4.rounded-\[var\(--radius-input\)\] {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  transition: border-color var(--transition-std), background-color var(--transition-std);
}

main .p-4.rounded-\[var\(--radius-input\)\]:hover {
  border-color: var(--accent-border) !important;
  background-color: var(--accent-soft) !important;
}

/* Server info panel */
main .lg\:col-span-1.card {
  background-color: var(--surface) !important;
}

/* Recent events list in dashboard */
main .flex.items-center.justify-between.py-3 {
  border-color: var(--divider) !important;
}

/* Flash message overrides */
.bg-emerald-500\/10.border.border-emerald-500\/30.text-emerald-400 {
  background: var(--status-success-bg) !important;
  border-color: rgba(85, 201, 149, 0.30) !important;
  color: var(--status-success) !important;
}

.bg-rose-500\/10.border.border-rose-500\/30.text-rose-400 {
  background: var(--status-error-bg) !important;
  border-color: rgba(180, 35, 24, 0.30) !important;
  color: var(--status-error) !important;
}

/* ==========================================================================
   SECTION 12 — EVENTS PAGE
   ========================================================================== */

/* Events page header text overrides */
main h3.text-xl.font-bold.text-white {
  color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
}

main p.text-slate-400.text-sm {
  color: var(--text-muted) !important;
}

/* Step tabs in the create event modal */
.step-btn {
  border-radius: var(--radius-controls) !important;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  transition: all var(--transition-fast);
}

/* Active step tab — override border-amber-500/50 bg-amber-500/10 text-amber-500 */
.step-btn.border-amber-500\/50.bg-amber-500\/10.text-amber-500 {
  background-color: var(--accent-selected) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

/* Inactive step tab — override border-slate-800 bg-slate-900/50 text-slate-500 */
.step-btn.border-slate-800.bg-slate-900\/50.text-slate-500 {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* Delete action button in events table */
button.text-rose-400 {
  color: var(--status-error) !important;
}

button.text-rose-400:hover,
.hover\:text-rose-300:hover {
  color: var(--status-error) !important;
  opacity: 0.80;
}

/* ==========================================================================
   SECTION 13 — TEMPLATES PAGE
   ========================================================================== */

/* Template card */
div.bg-slate-900\/90.border.border-slate-800.rounded-2xl.overflow-hidden.shadow-lg {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-card) !important;
  transition: border-color var(--transition-std), transform var(--transition-std), box-shadow var(--transition-std);
}

div.bg-slate-900\/90.border.border-slate-800.rounded-2xl.overflow-hidden.shadow-lg:hover {
  border-color: var(--accent-border) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Template thumbnail area */
div.h-52.bg-slate-950.relative.overflow-hidden {
  background-color: var(--deep-black) !important;
  border-bottom-color: var(--border) !important;
}

/* Template category label (text-indigo-400) */
span.text-\[10px\].font-bold.uppercase.text-indigo-400 {
  color: var(--accent) !important;
  font-family: 'Outfit', sans-serif;
}

/* Template title */
h4.font-bold.text-white.text-sm {
  color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
}

/* Template metadata text */
div.mt-2.text-\[11px\].text-slate-400 {
  color: var(--text-muted) !important;
}

/* Template metadata values */
span.font-mono.text-slate-300 {
  color: var(--text-secondary) !important;
}

/* Template field count (text-indigo-300) */
span.font-mono.text-indigo-300.font-bold {
  color: var(--accent) !important;
}

/* Publishing mode */
span.font-bold.text-indigo-400 {
  color: var(--accent) !important;
}

/* Template card inner divider */
div.mt-4.pt-3.border-t.border-slate-800\/80 {
  border-top-color: var(--border) !important;
}

/* Template info divider */
div.mt-2.pt-2.border-t.border-slate-700\/50 {
  border-top-color: var(--border) !important;
}

/* Enable/Disable toggle button */
button.text-xs.font-semibold.text-slate-400 {
  color: var(--text-muted) !important;
}

button.text-xs.font-semibold.text-slate-400:hover {
  color: var(--text-primary) !important;
}

/* Template ID tag */
span.text-\[10px\].text-slate-500.font-mono {
  color: var(--text-muted) !important;
}

/* Upload button override */
button.bg-indigo-600.hover\:bg-indigo-500.text-white.text-xs.font-semibold.rounded-xl {
  background-color: var(--accent) !important;
  color: #0A0A0A !important;
}

/* Template upload modal */
div.bg-slate-900.border.border-slate-800.rounded-2xl.max-w-lg.w-full.p-6 {
  background-color: var(--modal-bg) !important;
  border-color: var(--border) !important;
}

/* ==========================================================================
   SECTION 14 — MEDIA LIBRARY
   ========================================================================== */

/* Media card */
div.bg-slate-900.border.border-slate-800.rounded-xl.overflow-hidden.shadow-lg {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-controls) !important;
  transition: border-color var(--transition-std);
}

div.bg-slate-900.border.border-slate-800.rounded-xl.overflow-hidden.shadow-lg:hover {
  border-color: var(--accent-border) !important;
}

/* Media thumbnail area */
div.h-36.bg-slate-950.flex.items-center {
  background-color: var(--deep-black) !important;
}

/* Media type label */
span.absolute.top-1\.5.left-1\.5 {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

/* Media info panel */
div.p-3.border-t.border-slate-800\/80 {
  border-top-color: var(--border) !important;
}

p.text-xs.font-semibold.text-white.truncate {
  color: var(--text-primary) !important;
}

div.text-\[10px\].text-slate-500 {
  color: var(--text-muted) !important;
}

/* Collage + upload buttons for media page */
button.bg-violet-600 {
  background: linear-gradient(135deg, var(--ai-violet-light), var(--ai-violet)) !important;
  color: #FFFFFF !important;
}

button.hover\:bg-violet-500:hover {
  background: linear-gradient(135deg, var(--ai-violet), #7A3FE0) !important;
  color: #FFFFFF !important;
}

/* Delete icon button */
button.text-rose-400:hover {
  color: var(--status-error) !important;
}

/* ==========================================================================
   SECTION 15 — COLLEGE & BRANDING PAGE
   ========================================================================== */

/* Colleges form panels */
div.bg-slate-900\/90.border.border-slate-800.rounded-2xl.p-6.shadow-lg {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Section headers in colleges — override text-indigo-400 */
h4.text-sm.font-bold.uppercase.tracking-wider.text-indigo-400 {
  color: var(--accent) !important;
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: 1.0px;
}

/* Color picker inner containers */
div.bg-slate-950.p-4.rounded-xl.border.border-slate-800 {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-controls) !important;
}

/* Color picker labels */
label.block.text-xs.font-bold.text-slate-300.mb-2 {
  color: var(--text-secondary) !important;
}

/* Hex inputs */
input[id$="Hex"] {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  font-family: 'Courier New', monospace;
}

/* Not found warning */
.bg-amber-500\/10.border.border-amber-500\/30.text-amber-300 {
  background: var(--status-warning-bg) !important;
  border-color: rgba(148, 98, 0, 0.30) !important;
  color: var(--status-warning) !important;
}

/* ==========================================================================
   SECTION 16 — CATEGORIES PAGE
   ========================================================================== */

/* Categories table — same structure as events */
/* Switch toggle button */
button.text-indigo-400.hover\:text-indigo-300 {
  color: var(--accent) !important;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

button.text-indigo-400.hover\:text-indigo-300:hover {
  color: var(--accent-hover) !important;
}

/* Category ID column */
td.font-mono.text-slate-500 {
  color: var(--text-muted) !important;
}

/* ==========================================================================
   SECTION 17 — USERS & ROLES PAGE
   ========================================================================== */

/* User avatar circle */
div.w-8.h-8.rounded-full.bg-slate-800.border.border-slate-700 {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
}

div.w-8.h-8.rounded-full.bg-slate-800 .text-indigo-400 {
  color: var(--accent) !important;
}

/* User avatar in sidebar */
div.w-9.h-9.rounded-full.gradient-ai {
  background: linear-gradient(135deg, var(--ai-violet-light), var(--ai-violet)) !important;
  color: #FFFFFF !important;
}

/* Email monospace */
td.font-mono.text-slate-400 {
  color: var(--text-muted) !important;
  font-size: 12px;
}

/* Add User modal */
div.bg-slate-900.border.border-slate-800.rounded-2xl.p-6 {
  background-color: var(--modal-bg) !important;
  border-color: var(--border) !important;
}

/* ==========================================================================
   SECTION 18 — LOGIN PAGE
   ========================================================================== */

/* Login page body bg */
html.h-full.bg-slate-950 {
  background-color: var(--bg) !important;
}

body.h-full {
  background-color: var(--bg) !important;
}

/* Login logo icon */
.gradient-ai {
  background: linear-gradient(135deg, var(--ai-violet-light), var(--ai-violet)) !important;
}

/* Login card */
body .card {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Login headings */
body h1.display-sm {
  color: var(--text-primary) !important;
}

/* Login credentials helper box */
.bg-\[var\(--surface-secondary\)\] {
  background-color: var(--surface-2) !important;
}

/* Footer text on login */
.text-slate-500 {
  color: var(--text-muted) !important;
}

/* ==========================================================================
   SECTION 19 — GRADIENT UTILITIES
   ========================================================================== */

.gradient-gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--accent) 100%);
}

.gradient-ai {
  background: linear-gradient(135deg, var(--ai-violet-light) 0%, var(--ai-violet) 100%);
}

.gradient-luxury {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
}

/* ==========================================================================
   SECTION 20 — SHADOWS
   ========================================================================== */

.shadow-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.shadow-float {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 1px 8px rgba(169, 121, 34, 0.08);
}

.shadow-modal {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.70);
}

html[data-theme="light"] .shadow-card {
  box-shadow: 0 2px 8px rgba(25, 23, 20, 0.06);
}

html[data-theme="light"] .shadow-float {
  box-shadow: 0 6px 16px rgba(25, 23, 20, 0.10), 0 1px 4px rgba(169, 121, 34, 0.08);
}

html[data-theme="light"] .shadow-modal {
  box-shadow: 0 12px 32px rgba(25, 23, 20, 0.14);
}

/* ==========================================================================
   SECTION 21 — SKELETON / SHIMMER LOADING
   ========================================================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--surface-2) 50%,
    var(--surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ==========================================================================
   SECTION 22 — INTERACTIVE UTILITIES
   ========================================================================== */

.interactive {
  transition: transform var(--transition-std), box-shadow var(--transition-std);
}

.interactive:hover {
  transform: translateY(-1.5px);
}

.interactive:active {
  transform: translateY(0);
  transition-duration: 100ms;
}

/* Focus ring — visible keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   SECTION 23 — HEADER COMPONENT (actual DOM selector in header.php)
   ========================================================================== */

.header {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ==========================================================================
   SECTION 24 — LIGHT MODE STRUCTURAL OVERRIDES
   All dark-mode hardcoded Tailwind classes need light-mode counterparts
   ========================================================================== */

html[data-theme="light"] .bg-slate-900\/90,
html[data-theme="light"] div.bg-slate-900\/90 {
  background-color: #FFFFFF !important;
  border-color: #E3D9C5 !important;
}

html[data-theme="light"] thead.bg-slate-950 {
  background-color: #F3EADB !important;
}

html[data-theme="light"] thead th {
  background-color: #F3EADB !important;
  color: #514B41 !important;
}

html[data-theme="light"] tbody tr {
  background-color: #FFFFFF !important;
}

html[data-theme="light"] tbody tr:hover {
  background-color: #FAF6EC !important;
}

html[data-theme="light"] tbody td {
  color: #514B41 !important;
  border-color: #E3D9C5 !important;
}

html[data-theme="light"] tbody td.font-bold.text-white,
html[data-theme="light"] tbody td:first-child {
  color: #191714 !important;
}

html[data-theme="light"] .bg-slate-950 {
  background-color: #F7F4EC !important;
}

html[data-theme="light"] div.bg-slate-900 {
  background-color: #FFFFFF !important;
}

html[data-theme="light"] div.bg-slate-900.border.border-slate-800.rounded-xl {
  background-color: #FFFFFF !important;
  border-color: #E3D9C5 !important;
}

html[data-theme="light"] div.h-52.bg-slate-950,
html[data-theme="light"] div.h-36.bg-slate-950 {
  background-color: #F7F4EC !important;
}

html[data-theme="light"] div.h-52.bg-slate-950.relative.overflow-hidden,
html[data-theme="light"] div.h-36.bg-slate-950.flex.items-center {
  background-color: #F7F4EC !important;
}

html[data-theme="light"] .modal,
html[data-theme="light"] div.bg-slate-900.border.border-slate-800.rounded-2xl {
  background-color: #FFFFFF !important;
  border-color: #E3D9C5 !important;
}

html[data-theme="light"] div.bg-\[#0b0c10\],
html[data-theme="light"] div.bg-\[#121318\] {
  background-color: #F7F4EC !important;
  border-color: #E3D9C5 !important;
}

html[data-theme="light"] .text-white {
  color: #191714 !important;
}

html[data-theme="light"] h3.text-xl.font-bold.text-white {
  color: #191714 !important;
}

html[data-theme="light"] main h3,
html[data-theme="light"] main h4,
html[data-theme="light"] main h1,
html[data-theme="light"] main h2 {
  color: #191714 !important;
}

html[data-theme="light"] aside#sidebar,
html[data-theme="light"] .sidebar {
  background-color: #FFFFFF !important;
  border-color: #E4DCCB !important;
}

html[data-theme="light"] .nav-item {
  color: #514B41 !important;
}

html[data-theme="light"] .nav-item i {
  color: #625A4D !important;
}

html[data-theme="light"] .nav-item:hover {
  background-color: #F7F1E4 !important;
  color: #191714 !important;
}

html[data-theme="light"] .nav-item.active {
  background-color: #F3EADB !important;
  color: #191714 !important;
  border-left-color: #A9791F !important;
}

html[data-theme="light"] .nav-item.active i {
  color: #A9791F !important;
}

html[data-theme="light"] aside#sidebar .from-indigo-600,
html[data-theme="light"] .sidebar .bg-gradient-to-tr {
  background: linear-gradient(135deg, #A9791F, #7A4D0E) !important;
  box-shadow: 0 4px 12px rgba(169, 121, 34, 0.20) !important;
}

html[data-theme="light"] aside#sidebar span.text-indigo-400 {
  color: #A9791F !important;
}

html[data-theme="light"] aside#sidebar h1 {
  color: #191714 !important;
}

html[data-theme="light"] .header {
  background-color: #F7F4EC !important;
  border-bottom-color: #E3D9C5 !important;
}

html[data-theme="light"] main {
  background-color: #F7F4EC !important;
}

html[data-theme="light"] body {
  background-color: #F7F4EC !important;
  color: #191714 !important;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #F7F4EC !important;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #D5C6A7 !important;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #A9791F !important;
}

html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500 {
  color: #81796C !important;
}

html[data-theme="light"] .text-slate-300 {
  color: #514B41 !important;
}

html[data-theme="light"] .divide-y.divide-slate-800\/60 > * {
  border-color: #E3D9C5 !important;
}

html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-800\/80,
html[data-theme="light"] .border-slate-800\/60 {
  border-color: #E3D9C5 !important;
}

html[data-theme="light"] .border-slate-700 {
  border-color: #D5C6A7 !important;
}

html[data-theme="light"] .bg-indigo-500\/20.text-indigo-300.border.border-indigo-500\/40 {
  background: #F3EADB !important;
  color: #A9791F !important;
  border-color: #DCC79D !important;
}

html[data-theme="light"] .bg-slate-800.text-indigo-300 {
  background-color: #F3EADB !important;
  color: #A9791F !important;
  border-color: #DCC79D !important;
}

html[data-theme="light"] .step-btn.border-amber-500\/50.bg-amber-500\/10.text-amber-500 {
  background-color: #F1E5C9 !important;
  border-color: #DCC79D !important;
  color: #A9791F !important;
}

html[data-theme="light"] .step-btn.border-slate-800.bg-slate-900\/50.text-slate-500 {
  background-color: #FCFBF8 !important;
  border-color: #E3D9C5 !important;
  color: #81796C !important;
}

html[data-theme="light"] button.bg-indigo-600,
html[data-theme="light"] a.bg-indigo-600 {
  color: #FFFFFF !important;
}

html[data-theme="light"] .bg-violet-600 {
  color: #FFFFFF !important;
}

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background-color: #FFFFFF !important;
  border-color: #DED5C3 !important;
  color: #191714 !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #91897C !important;
}

html[data-theme="light"] aside#sidebar .p-4.mt-auto,
html[data-theme="light"] .sidebar .p-4.mt-auto {
  background-color: #FCFBF8 !important;
  border-top-color: #E4DCCB !important;
}

html[data-theme="light"] .sidebar-active {
  background: linear-gradient(90deg, #F3EADB 0%, rgba(243, 234, 219, 0.3) 100%) !important;
  color: #A9791F !important;
  border-left-color: #A9791F !important;
}

/* ==========================================================================
   SECTION 25 — RESPONSIVE LAYOUT
   ========================================================================== */

@media (max-width: 768px) {
  aside#sidebar,
  .sidebar {
    width: 100%;
    position: relative;
    height: auto;
  }

  main.flex-1,
  main {
    margin-left: 0 !important;
  }

  .stat-card .value {
    font-size: 22px;
  }
}

@media (min-width: 768px) {
  aside#sidebar.hidden,
  .sidebar.hidden {
    display: flex !important;
  }
}

/* ==========================================================================
   SECTION 26 — MOTION PREFERENCES (Accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .skeleton {
    animation: none;
    background: var(--surface-2);
  }
}

/* ==========================================================================
   SECTION 27 — THEME TOGGLE CONTROL
   ========================================================================== */

.theme-toggle {
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: var(--radius-pill);
  position: relative;
  cursor: pointer;
  transition: background-color var(--transition-std);
  border: none;
  padding: 0;
}

.theme-toggle.active,
.theme-toggle[data-active="true"] {
  background: var(--accent);
}

.theme-toggle::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform var(--transition-std);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}

.theme-toggle.active::after,
.theme-toggle[data-active="true"]::after {
  transform: translateX(20px);
}

/* ════════════════════════════════════════════════════════════════════════════
   GRADIENT WAVES BACKGROUND (Canvas 2D Engine)
   ════════════════════════════════════════════════════════════════════════════ */
.gradient-waves-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: #0A0A0A;
}

[data-theme="light"] .gradient-waves-bg {
  background-color: #F8F6F0;
}

#gradient-waves-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Ensure foreground content stacks cleanly above the canvas background */
body > *:not(.gradient-waves-bg) {
  position: relative;
  z-index: 1;
}

aside#sidebar,
nav,
header,
.sticky,
.fixed {
  z-index: 30;
}

.modal,
.modal-backdrop,
#mobileMenu {
  z-index: 50;
}