/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  SMARTCAMPUS — AURORA PRISM DESIGN SYSTEM v4.0                           ║
   ║  Deep-space aurora · Crystal glass · Champagne gold · Vivid contrast     ║
   ║  Inspiration: Premium fintech + night sky + Northern Lights              ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Aurora colour system */
  --aurora-teal:    #06B6D4;
  --aurora-teal2:   #0891B2;
  --aurora-violet:  #7C3AED;
  --aurora-indigo:  #4F46E5;
  --aurora-blue:    #2563EB;

  /* Brand accent (kept) */
  --brand:          #10B981;
  --brand-bright:   #34D399;
  --brand-glow:     rgba(16,185,129,0.35);

  /* Gold */
  --gold:           #F59E0B;
  --gold-bright:    #FCD34D;
  --gold-dim:       rgba(245,158,11,0.22);

  /* Background layers */
  --void:     #03050E;
  --deep:     #050810;
  --base:     #070B18;
  --surface:  #0B1121;
  --elevated: #0F1830;
  --card:     #111A33;

  /* Glass */
  --glass:        rgba(15,24,48,0.72);
  --glass-light:  rgba(20,32,60,0.65);
  --glass-border: rgba(99,179,237,0.22);
  --glass-border-h: rgba(99,179,237,0.45);
  --glass-top:    rgba(148,210,255,0.18);

  /* Text */
  --text-primary:   #E2EEFF;
  --text-secondary: #8BA3C4;
  --text-muted:     rgba(139,163,196,0.55);

  /* Shadows */
  --shadow-deep:   0 24px 64px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-card:   0 8px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(148,210,255,0.12);
  --shadow-teal:   0 0 20px rgba(6,182,212,0.3), 0 0 8px rgba(6,182,212,0.15);
  --shadow-brand:  0 0 20px rgba(16,185,129,0.3), 0 0 8px rgba(16,185,129,0.15);
  --shadow-gold:   0 0 20px rgba(245,158,11,0.3), 0 0 8px rgba(245,158,11,0.15);
}

/* ─────────────────────────────────────────────
   GLOBAL RESET & FOUNDATION
   ───────────────────────────────────────────── */

html, body, #root {
  background-color: var(--void) !important;
  color: var(--text-primary) !important;
  font-feature-settings: "cv11","ss01","kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ─────────────────────────────────────────────
   AURORA BACKGROUND — Deep space with light blooms
   Multi-layer: 3 coloured orbs + base gradient
   ───────────────────────────────────────────── */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Aurora bloom 1 — teal/cyan top-right */
    radial-gradient(ellipse 70% 50% at 80% -10%,
      rgba(6,182,212,0.16) 0%,
      rgba(2,132,199,0.10) 40%,
      transparent 70%
    ),
    /* Aurora bloom 2 — violet/indigo bottom-left */
    radial-gradient(ellipse 65% 55% at -10% 110%,
      rgba(124,58,237,0.18) 0%,
      rgba(79,70,229,0.10) 40%,
      transparent 70%
    ),
    /* Aurora bloom 3 — emerald mid-right */
    radial-gradient(ellipse 45% 40% at 95% 55%,
      rgba(16,185,129,0.10) 0%,
      transparent 60%
    ),
    /* Aurora bloom 4 — gold accent top-left */
    radial-gradient(ellipse 35% 30% at 8% 12%,
      rgba(245,158,11,0.08) 0%,
      transparent 55%
    ),
    /* Deep space base */
    linear-gradient(
      160deg,
      #04060F 0%,
      #060A1A 35%,
      #070C1D 60%,
      #050810 100%
    );
}

/* Animated aurora drift */
@keyframes aurora-drift {
  0%   { opacity: 1; }
  33%  { opacity: 0.85; }
  66%  { opacity: 0.95; }
  100% { opacity: 1; }
}
body::before { animation: aurora-drift 15s ease-in-out infinite; }

/* Subtle dot-grid overlay — just barely visible depth layer */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(99,179,237,0.09) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
}

/* All real content sits above background */
#root > * { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────
   GLASS PANELS — Crystal clear frosted glass
   ───────────────────────────────────────────── */

.glass-panel {
  background:
    linear-gradient(
      145deg,
      rgba(148,210,255,0.06) 0%,
      rgba(15,24,48,0.78) 40%,
      rgba(7,11,24,0.85) 100%
    ) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(24px) saturate(1.6) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) brightness(1.08) !important;
  box-shadow: var(--shadow-card) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ice-blue top edge hairline */
.glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(148,210,255,0.6) 30%,
    rgba(99,240,220,0.8) 50%,
    rgba(148,210,255,0.6) 70%,
    transparent
  );
  z-index: 2;
}

/* Light sweep shimmer */
@keyframes light-sweep {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 0.8; }
  100% { transform: translateX(280%) skewX(-20deg); opacity: 0; }
}

.glass-panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(148,210,255,0.025) 45%,
    rgba(200,240,255,0.045) 50%,
    rgba(148,210,255,0.025) 55%,
    transparent 100%
  );
  animation: light-sweep 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.glass-panel:hover {
  border-color: var(--glass-border-h) !important;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.65),
    0 0 32px rgba(6,182,212,0.12),
    inset 0 1px 0 rgba(148,210,255,0.25),
    inset 0 0 0 0.5px rgba(148,210,255,0.1) !important;
  transform: translateY(-2px) !important;
}

.glass-panel-hover {
  background: rgba(10,17,36,0.5) !important;
  border: 1px solid rgba(99,179,237,0.15) !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.25s ease !important;
}
.glass-panel-hover:hover {
  border-color: rgba(6,182,212,0.35) !important;
  background: rgba(6,182,212,0.06) !important;
  box-shadow: var(--shadow-teal), 0 4px 24px rgba(0,0,0,0.5) !important;
  transform: translateY(-2px) !important;
}

/* ─────────────────────────────────────────────
   SIDEBAR — Aurora nav
   ───────────────────────────────────────────── */

aside {
  background:
    linear-gradient(
      180deg,
      rgba(6,182,212,0.04) 0%,
      rgba(7,11,24,0.85) 20%,
      rgba(5,8,16,0.90) 100%
    ) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  border-right: 1px solid rgba(99,179,237,0.12) !important;
}

/* Active nav item — electric blue-teal glow */
.bg-emerald-500\/15 {
  background: linear-gradient(
    95deg,
    rgba(6,182,212,0.18) 0%,
    rgba(16,185,129,0.12) 60%,
    rgba(16,185,129,0.05) 100%
  ) !important;
  border: 1px solid rgba(6,182,212,0.35) !important;
  box-shadow:
    0 0 16px rgba(6,182,212,0.15),
    inset 0 0 12px rgba(6,182,212,0.06) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Glowing left-bar indicator */
.bg-emerald-500\/15::after {
  content: '';
  position: absolute;
  left: 0; top: 8%; bottom: 8%;
  width: 3px;
  background: linear-gradient(180deg,
    rgba(6,182,212,0.4) 0%,
    #06B6D4 30%,
    #34D399 60%,
    #06B6D4 80%,
    rgba(6,182,212,0.4) 100%
  );
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px rgba(6,182,212,0.9), 0 0 4px rgba(52,211,153,0.8);
}

.bg-emerald-500\/15.text-emerald-200 {
  color: #67E8F9 !important;
  text-shadow: 0 0 12px rgba(6,182,212,0.6) !important;
  font-weight: 600 !important;
}

/* Inactive nav hover */
a.text-slate-300,
a.text-slate-400 {
  border: 1px solid transparent !important;
  transition: all 0.18s ease !important;
  color: rgba(139,163,196,0.75) !important;
}
a.text-slate-300:hover,
a.text-slate-400:hover {
  background: rgba(6,182,212,0.05) !important;
  border-color: rgba(6,182,212,0.15) !important;
  color: rgba(103,232,249,0.85) !important;
  transform: translateX(2px) !important;
}

/* Section labels */
.text-\[10px\].uppercase.tracking-\[0\.35em\],
p.text-xs.uppercase.tracking-\[0\.3em\] {
  background: linear-gradient(90deg,
    rgba(6,182,212,0.8) 0%,
    rgba(16,185,129,0.6) 50%,
    rgba(139,163,196,0.5) 100%
  );
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
}

/* ─────────────────────────────────────────────
   SECTION / CARD BACKGROUNDS
   ───────────────────────────────────────────── */

section.rounded-2xl {
  background:
    linear-gradient(145deg,
      rgba(148,210,255,0.04) 0%,
      rgba(10,17,36,0.68) 40%,
      rgba(5,8,16,0.78) 100%
    ) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  border: 1px solid rgba(99,179,237,0.16) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
section.rounded-2xl:hover {
  border-color: rgba(6,182,212,0.28) !important;
  box-shadow: 0 0 24px rgba(6,182,212,0.06) !important;
}

.rounded-2xl[class*="border-white\/\[0\.07\]"],
.rounded-2xl[class*="border-white\/\[0\.06\]"],
.rounded-2xl[class*="border-white\/\[0\.05\]"] {
  border-color: rgba(99,179,237,0.15) !important;
  background:
    linear-gradient(145deg,
      rgba(148,210,255,0.04) 0%,
      rgba(10,17,36,0.65) 50%,
      rgba(5,8,16,0.78) 100%
    ) !important;
  backdrop-filter: blur(20px) !important;
}
.rounded-2xl[class*="border-white\/\[0\.07\]"]:hover,
.rounded-2xl[class*="border-white\/\[0\.06\]"]:hover {
  border-color: rgba(6,182,212,0.3) !important;
  box-shadow: 0 0 20px rgba(6,182,212,0.07) !important;
}

/* ─────────────────────────────────────────────
   TABLES — Crisp aurora grid
   ───────────────────────────────────────────── */

table { border-collapse: separate !important; border-spacing: 0 !important; }

thead tr {
  background:
    linear-gradient(90deg,
      rgba(6,182,212,0.10) 0%,
      rgba(79,70,229,0.06) 50%,
      rgba(16,185,129,0.08) 100%
    ) !important;
  border-bottom: 1px solid rgba(6,182,212,0.2) !important;
}

thead th {
  color: rgba(6,182,212,0.9) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 11px 16px !important;
  white-space: nowrap !important;
  text-shadow: 0 0 14px rgba(6,182,212,0.4) !important;
  border-bottom: 1px solid rgba(6,182,212,0.15) !important;
}
thead th:first-child {
  border-left: 2px solid rgba(6,182,212,0.35) !important;
  padding-left: 20px !important;
}

tbody tr {
  border-bottom: 1px solid rgba(99,179,237,0.06) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}
tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.015) !important;
}
tbody tr:hover {
  background: linear-gradient(
    90deg,
    rgba(6,182,212,0.08) 0%,
    rgba(6,182,212,0.04) 50%,
    transparent 100%
  ) !important;
  box-shadow: inset 3px 0 0 rgba(6,182,212,0.7) !important;
}
tbody td {
  padding: 11px 16px !important;
  font-size: 13px !important;
  color: rgba(220,230,248,0.88) !important;
}
tbody td:first-child { padding-left: 20px !important; }

/* ─────────────────────────────────────────────
   BUTTONS — Aurora glow style
   ───────────────────────────────────────────── */

button[class*="bg-emerald-500"],
a[class*="bg-emerald-500"] {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  border: 1px solid rgba(16,185,129,0.4) !important;
  box-shadow:
    0 0 20px rgba(16,185,129,0.35),
    0 2px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.22s cubic-bezier(0.22,1,0.36,1) !important;
}
button[class*="bg-emerald-500"]:hover,
a[class*="bg-emerald-500"]:hover {
  box-shadow:
    0 0 30px rgba(16,185,129,0.55),
    0 4px 16px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.1) !important;
}
button[class*="bg-emerald-500"]:active { transform: translateY(0) scale(0.98) !important; }

button[class*="border"][class*="border-white"],
button[class*="border"][class*="border-slate"] {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(99,179,237,0.22) !important;
  color: rgba(148,210,255,0.85) !important;
  transition: all 0.2s ease !important;
}
button[class*="border"][class*="border-white"]:hover,
button[class*="border"][class*="border-slate"]:hover {
  background: rgba(6,182,212,0.08) !important;
  border-color: rgba(6,182,212,0.4) !important;
  box-shadow: 0 0 14px rgba(6,182,212,0.18) !important;
  color: #67E8F9 !important;
  transform: translateY(-1px) !important;
}

button[class*="bg-rose-500"],
button[class*="bg-red-500"] {
  box-shadow: 0 0 18px rgba(244,63,94,0.35), 0 2px 8px rgba(0,0,0,0.4) !important;
  transition: all 0.2s ease !important;
}
button[class*="bg-rose-500"]:hover { transform: translateY(-1px) !important; box-shadow: 0 0 28px rgba(244,63,94,0.55) !important; }

button[class*="rounded-full"] { transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1) !important; }
button[class*="rounded-full"]:hover { transform: scale(1.12) rotate(5deg) !important; }

button { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, filter 0.2s ease !important; }
button:hover:not([disabled]) { transform: translateY(-1px) !important; }
button:active:not([disabled]) { transform: translateY(1px) scale(0.98) !important; }

/* ─────────────────────────────────────────────
   FORM INPUTS — Crystal input fields
   ───────────────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: rgba(5,8,20,0.75) !important;
  border: 1px solid rgba(99,179,237,0.18) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(8px) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover, textarea:hover {
  border-color: rgba(6,182,212,0.28) !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(6,182,212,0.55) !important;
  background: rgba(6,182,212,0.04) !important;
  box-shadow:
    0 0 0 3px rgba(6,182,212,0.1),
    0 0 16px rgba(6,182,212,0.14),
    inset 0 1px 0 rgba(148,210,255,0.08) !important;
  transform: scale(1.004) !important;
}
input::placeholder { color: rgba(139,163,196,0.45) !important; }

select {
  appearance: none !important; -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2306B6D4' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}
select option { background: #070B18 !important; color: #E2EEFF !important; }

input[type="date"] { color: rgba(139,163,196,0.7) !important; cursor: pointer !important; }
input[type="date"]:focus { color: var(--text-primary) !important; }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(3) hue-rotate(175deg) brightness(1.1) !important;
  cursor: pointer !important;
}

/* ─────────────────────────────────────────────
   STATUS BADGES — Vivid gem pills
   ───────────────────────────────────────────── */

[class*="rounded-full"][class*="px-2"],
[class*="rounded-full"][class*="px-3"] {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
[class*="rounded-full"][class*="px-2"]:hover,
[class*="rounded-full"][class*="px-3"]:hover { transform: scale(1.08) !important; }

.border-emerald-500\/40.bg-emerald-500\/10 {
  border-color: rgba(16,185,129,0.55) !important;
  box-shadow: 0 0 10px rgba(16,185,129,0.25), inset 0 1px 0 rgba(52,211,153,0.25) !important;
  text-shadow: 0 0 8px rgba(16,185,129,0.5) !important;
}
.border-rose-500\/40.bg-rose-500\/10 {
  border-color: rgba(244,63,94,0.55) !important;
  box-shadow: 0 0 10px rgba(244,63,94,0.25), inset 0 1px 0 rgba(255,100,130,0.25) !important;
  text-shadow: 0 0 8px rgba(244,63,94,0.5) !important;
}
.border-amber-500\/40.bg-amber-500\/10 {
  border-color: rgba(245,158,11,0.55) !important;
  box-shadow: 0 0 10px rgba(245,158,11,0.25), inset 0 1px 0 rgba(255,190,60,0.25) !important;
}
.border-indigo-500\/40.bg-indigo-500\/10 {
  border-color: rgba(99,102,241,0.55) !important;
  box-shadow: 0 0 10px rgba(99,102,241,0.25) !important;
}

/* ─────────────────────────────────────────────
   TAB BAR
   ───────────────────────────────────────────── */

[class*="overflow-x-auto"][class*="rounded-2xl"][class*="border"] {
  background: rgba(5,8,20,0.7) !important;
  border-color: rgba(99,179,237,0.14) !important;
  backdrop-filter: blur(12px) !important;
}
[class*="border-b-2"][class*="border-\[#"] {
  text-shadow: 0 0 14px currentColor !important;
  font-weight: 600 !important;
}
.flex-shrink-0[class*="border-b-2"] {
  transition: all 0.2s ease !important;
}
.flex-shrink-0[class*="border-b-2"]:hover {
  background: rgba(6,182,212,0.05) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────
   PAGE HERO / HEADER BANNERS
   ───────────────────────────────────────────── */

[style*="linear-gradient(135deg"][class*="rounded-3xl"],
[style*="linear-gradient(135deg"][class*="overflow-hidden"] {
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(148,210,255,0.1) !important;
}
[class*="rounded-3xl"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
[class*="rounded-3xl"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 28px rgba(6,182,212,0.1) !important;
}

/* Module badges */
[class*="px-3"][class*="py-1"][class*="rounded-full"][class*="text-xs"][class*="font-bold"] {
  letter-spacing: 0.1em !important;
  font-size: 10px !important;
  background: rgba(6,182,212,0.12) !important;
  border: 1px solid rgba(6,182,212,0.3) !important;
  color: #67E8F9 !important;
  box-shadow: 0 0 10px rgba(6,182,212,0.15) !important;
  text-shadow: 0 0 8px rgba(6,182,212,0.5) !important;
}

/* Section titles — aurora gradient text */
.text-lg.font-display.font-semibold,
h2.text-lg.font-display,
h1[class*="text-2xl"], h1[class*="text-3xl"],
h2[class*="text-xl"], h2[class*="text-2xl"] {
  background: linear-gradient(
    120deg,
    #E2EEFF 0%,
    rgba(103,232,249,0.9) 45%,
    #E2EEFF 100%
  );
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.02em !important;
}

/* ─────────────────────────────────────────────
   KPI STAT CARDS
   ───────────────────────────────────────────── */

.grid > .rounded-2xl,
.grid > div > .rounded-2xl {
  will-change: transform !important;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}
.grid > .rounded-2xl:hover,
.grid > div > .rounded-2xl:hover {
  transform: translateY(-5px) scale(1.014) !important;
  box-shadow:
    0 20px 56px rgba(0,0,0,0.65),
    0 0 28px rgba(6,182,212,0.12),
    inset 0 1px 0 rgba(148,210,255,0.28) !important;
  border-color: rgba(6,182,212,0.38) !important;
}

.text-2xl.font-bold,
.text-3xl.font-bold,
.text-2xl.font-semibold,
.text-3xl.font-semibold {
  letter-spacing: -0.025em !important;
  font-variant-numeric: tabular-nums !important;
}

/* ─────────────────────────────────────────────
   INLINE STYLE OVERRIDES — Login page
   ───────────────────────────────────────────── */

div[style*="#070b12"] {
  background: rgba(3,5,14,0.82) !important;
}
[style*="linear-gradient(150deg, #0a1f3a"] {
  background:
    linear-gradient(150deg,
      rgba(4,12,32,0.78) 0%,
      rgba(3,5,14,0.65) 55%,
      rgba(2,4,12,0.72) 100%
    ) !important;
  backdrop-filter: blur(8px) !important;
  border-right: 1px solid rgba(6,182,212,0.1) !important;
}

/* ─────────────────────────────────────────────
   MODALS & OVERLAYS
   ───────────────────────────────────────────── */

.fixed.inset-0[style*="rgba(0,0,0"] {
  backdrop-filter: blur(10px) saturate(1.2) brightness(0.65) !important;
}
.fixed.inset-0 > .w-full[class*="max-w"],
.fixed.inset-0 > div > .w-full[class*="max-w"] {
  background: linear-gradient(145deg, rgba(148,210,255,0.06) 0%, rgba(7,11,24,0.94) 40%, rgba(4,6,14,0.97) 100%) !important;
  border: 1px solid rgba(6,182,212,0.28) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.8),
    0 0 80px rgba(6,182,212,0.08),
    0 0 0 0.5px rgba(148,210,255,0.15) inset !important;
  backdrop-filter: blur(48px) saturate(1.4) !important;
}

/* ─────────────────────────────────────────────
   DROPDOWNS & TOOLTIPS
   ───────────────────────────────────────────── */

[role="menu"], [role="listbox"] {
  background: rgba(5,8,20,0.97) !important;
  border: 1px solid rgba(6,182,212,0.22) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 24px rgba(6,182,212,0.08) !important;
  backdrop-filter: blur(32px) !important;
}
[role="tooltip"], [data-tooltip] {
  background: rgba(5,8,20,0.97) !important;
  border: 1px solid rgba(6,182,212,0.22) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 12px rgba(6,182,212,0.12) !important;
  color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────────
   TEXT COLOURS
   ───────────────────────────────────────────── */

.text-white    { color: #E2EEFF !important; }
.text-slate-300{ color: rgba(210,225,248,0.9) !important; }
.text-slate-400{ color: rgba(139,163,196,0.78) !important; }
.text-slate-500{ color: rgba(110,130,170,0.65) !important; }
.text-emerald-200 { color: #A7F3D0 !important; }
.text-emerald-300 { color: #6EE7B7 !important; }
.text-emerald-400 { color: #34D399 !important; }

td[class*="text-emerald"], td[class*="text-green"] { font-weight: 600 !important; font-variant-numeric: tabular-nums !important; }
td[class*="text-rose"], td[class*="text-red"] { font-weight: 600 !important; }

[class*="text-\[10px\]"][class*="uppercase"][class*="tracking"] {
  color: rgba(6,182,212,0.65) !important;
  letter-spacing: 0.15em !important;
}

/* ─────────────────────────────────────────────
   RECHARTS
   ───────────────────────────────────────────── */

.recharts-wrapper svg { filter: drop-shadow(0 0 6px rgba(6,182,212,0.15)); }
.recharts-line path { filter: drop-shadow(0 0 4px rgba(16,185,129,0.7)); }
.recharts-bar-rectangle path { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }

/* ─────────────────────────────────────────────
   ICON/AVATAR BOXES
   ───────────────────────────────────────────── */

[style*="border-radius: 6px"][style*="background: linear-gradient"],
[style*="border-radius:6px"][style*="background:linear-gradient"] {
  box-shadow: 0 0 14px rgba(6,182,212,0.35) !important;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease !important;
}
[style*="border-radius: 6px"][style*="background: linear-gradient"]:hover,
[style*="border-radius:6px"][style*="background:linear-gradient"]:hover {
  transform: scale(1.1) rotate(-4deg) !important;
}
[style*="border-radius:50%"][style*="background:linear-gradient"] {
  box-shadow: 0 0 12px rgba(99,102,241,0.5) !important;
}

/* ─────────────────────────────────────────────
   INLINE STYLE COLOUR GLOW
   ───────────────────────────────────────────── */

[style*="color:#818cf8"],[style*="color: #818cf8"] { text-shadow: 0 0 18px rgba(129,140,248,0.5) !important; }
[style*="color:#6ee7b7"],[style*="color: #6ee7b7"] { text-shadow: 0 0 18px rgba(110,231,183,0.5) !important; }
[style*="color:#34d399"],[style*="color: #34d399"] { text-shadow: 0 0 18px rgba(52,211,153,0.5) !important; }

[style*="background:rgba(16,185,129"]  { box-shadow: 0 0 10px rgba(16,185,129,0.3) !important; }
[style*="background:rgba(239,68,68"]   { box-shadow: 0 0 10px rgba(239,68,68,0.3) !important; }
[style*="background:rgba(245,158,11"]  { box-shadow: 0 0 10px rgba(245,158,11,0.25) !important; }
[style*="background:rgba(99,102,241"]  { box-shadow: 0 0 10px rgba(99,102,241,0.3) !important; }

/* ─────────────────────────────────────────────
   SCROLLBAR — Aurora cyan thread
   ───────────────────────────────────────────── */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(6,182,212,0.6), rgba(16,185,129,0.4), rgba(6,182,212,0.6));
  border-radius: 999px;
  box-shadow: 0 0 4px rgba(6,182,212,0.4);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(6,182,212,0.9), rgba(16,185,129,0.7));
  box-shadow: 0 0 8px rgba(6,182,212,0.6);
}
.overflow-x-auto { scrollbar-width: thin; scrollbar-color: rgba(6,182,212,0.4) transparent; }

/* ─────────────────────────────────────────────
   SELECTION & FOCUS
   ───────────────────────────────────────────── */

::selection { background: rgba(6,182,212,0.25); color: #E2EEFF; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid rgba(6,182,212,0.55) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 10px rgba(6,182,212,0.28) !important;
}

/* ─────────────────────────────────────────────
   MISC
   ───────────────────────────────────────────── */

hr,
.border-t.border-slate-800,
.border-t.border-white\/\[0\.07\] {
  border-color: rgba(6,182,212,0.08) !important;
}
kbd {
  background: rgba(6,182,212,0.07) !important;
  border: 1px solid rgba(6,182,212,0.22) !important;
  color: rgba(6,182,212,0.8) !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}
#global-print-btn {
  background: linear-gradient(135deg, #06B6D4, #0891B2) !important;
  box-shadow: 0 0 20px rgba(6,182,212,0.45), 0 2px 8px rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(103,232,249,0.3) !important;
  color: #04060F !important;
}
#global-print-btn:hover { box-shadow: 0 0 32px rgba(6,182,212,0.7) !important; }

/* Info / warning / error panels */
.rounded-2xl.border.border-rose-500\/40.bg-rose-500\/10 {
  box-shadow: 0 0 24px rgba(244,63,94,0.12), inset 0 0 16px rgba(244,63,94,0.04) !important;
}
.rounded-2xl.border.border-amber-500\/30.bg-amber-500\/10 {
  box-shadow: 0 0 24px rgba(245,158,11,0.1) !important;
}
.rounded-2xl.border.border-emerald-500\/30.bg-emerald-500\/10 {
  box-shadow: 0 0 24px rgba(16,185,129,0.1) !important;
}

/* Clickable rows */
tr[class*="cursor-pointer"]:hover, tr[onclick]:hover { transform: translateX(2px) !important; }

/* Aside search input */
aside input[placeholder="Find section"]:focus {
  border-color: rgba(6,182,212,0.45) !important;
  box-shadow: 0 0 10px rgba(6,182,212,0.12) !important;
}

/* Print */
.print-area table thead tr { background: transparent !important; }
.print-area table th { border-bottom: 1px solid #e2e8f0 !important; color: #374151 !important; }
@media print {
  body::before, body::after { display: none !important; }
  html, body { background: white !important; color: black !important; }
}

@media (max-width: 768px) {
  .glass-panel::before, .glass-panel::after { display: none; }
  body::after { display: none; }
}

/* ─────────────────────────────────────────────
   SECTION / DIV TRANSPARENCY FIXES
   ───────────────────────────────────────────── */

div[class*="min-h-screen"] { background: transparent !important; }

/* ─────────────────────────────────────────────
   SMOOTH SCROLL
   ───────────────────────────────────────────── */

html { scroll-behavior: smooth; }
.overflow-y-auto, .overflow-auto, main { scroll-behavior: smooth !important; }

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  FEATHERLIGHT ANIMATION SYSTEM v2.0 — "Aurora Motion"                    ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────
   KEYFRAMES
   ───────────────────────────────────────────── */

@keyframes feather-in {
  0%   { opacity: 0; transform: translateY(16px) scale(0.987); filter: blur(1.5px); }
  65%  { opacity: 0.92; transform: translateY(-1px) scale(1.002); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes nav-feather {
  0%   { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes row-cascade {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes prism-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes gold-reveal {
  0%   { opacity: 0; transform: scale(0.90); letter-spacing: -0.05em; }
  100% { opacity: 1; transform: scale(1); letter-spacing: inherit; }
}

@keyframes banner-unfurl {
  0%   { opacity: 0; transform: scaleY(0.93) translateY(10px); transform-origin: top; }
  100% { opacity: 1; transform: scaleY(1) translateY(0); }
}

@keyframes border-breathe {
  0%, 100% { box-shadow: var(--shadow-card); }
  50%       {
    box-shadow:
      0 8px 40px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(148,210,255,0.18),
      0 0 24px rgba(6,182,212,0.08);
  }
}

@keyframes number-breath {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 14px rgba(6,182,212,0.22); }
}

@keyframes prism-shimmer {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%       { filter: brightness(1.18) saturate(1.25); }
}

@keyframes divider-sweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes aurora-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.82; }
}

/* ─────────────────────────────────────────────
   ENTRANCES — Applied to real elements
   ───────────────────────────────────────────── */

/* Main content area */
.col-span-12.md\:col-span-9,
.col-span-12.lg\:col-span-10 {
  animation: feather-in 0.42s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* Glass panels with cascade stagger */
.glass-panel {
  animation:
    feather-in 0.38s cubic-bezier(0.22,1,0.36,1) both,
    border-breathe 7s ease-in-out 1s infinite !important;
  will-change: transform, box-shadow !important;
}
.glass-panel:nth-of-type(1) { animation-delay: 0s, 0s !important; }
.glass-panel:nth-of-type(2) { animation-delay: 0.06s, 0.3s !important; }
.glass-panel:nth-of-type(3) { animation-delay: 0.12s, 0.6s !important; }
.glass-panel:nth-of-type(4) { animation-delay: 0.18s, 0.9s !important; }
.glass-panel:nth-of-type(5) { animation-delay: 0.24s, 1.2s !important; }

/* Sections */
section.rounded-2xl {
  animation: feather-in 0.38s cubic-bezier(0.22,1,0.36,1) both !important;
}
section.rounded-2xl:nth-child(1) { animation-delay: 0.00s !important; }
section.rounded-2xl:nth-child(2) { animation-delay: 0.07s !important; }
section.rounded-2xl:nth-child(3) { animation-delay: 0.14s !important; }
section.rounded-2xl:nth-child(4) { animation-delay: 0.21s !important; }
section.rounded-2xl:nth-child(5) { animation-delay: 0.28s !important; }

/* Grid KPI cards */
.grid > .rounded-2xl,
.grid > div > .rounded-2xl {
  animation: feather-in 0.42s cubic-bezier(0.22,1,0.36,1) both !important;
}
.grid > .rounded-2xl:nth-child(1), .grid > div:nth-child(1) > .rounded-2xl { animation-delay: 0.02s !important; }
.grid > .rounded-2xl:nth-child(2), .grid > div:nth-child(2) > .rounded-2xl { animation-delay: 0.08s !important; }
.grid > .rounded-2xl:nth-child(3), .grid > div:nth-child(3) > .rounded-2xl { animation-delay: 0.14s !important; }
.grid > .rounded-2xl:nth-child(4), .grid > div:nth-child(4) > .rounded-2xl { animation-delay: 0.20s !important; }
.grid > .rounded-2xl:nth-child(5), .grid > div:nth-child(5) > .rounded-2xl { animation-delay: 0.26s !important; }
.grid > .rounded-2xl:nth-child(6), .grid > div:nth-child(6) > .rounded-2xl { animation-delay: 0.32s !important; }

/* Stat numbers */
.text-2xl.font-bold, .text-3xl.font-bold,
.text-2xl.font-semibold, .text-3xl.font-semibold {
  animation: gold-reveal 0.5s cubic-bezier(0.22,1,0.36,1) 0.15s both,
             number-breath 5.5s ease-in-out 1s infinite !important;
  display: inline-block !important;
}

/* Table rows */
tbody tr {
  animation: row-cascade 0.3s cubic-bezier(0.22,1,0.36,1) both !important;
  will-change: transform, opacity !important;
}
tbody tr:nth-child(1)  { animation-delay: 0.04s !important; }
tbody tr:nth-child(2)  { animation-delay: 0.08s !important; }
tbody tr:nth-child(3)  { animation-delay: 0.12s !important; }
tbody tr:nth-child(4)  { animation-delay: 0.16s !important; }
tbody tr:nth-child(5)  { animation-delay: 0.20s !important; }
tbody tr:nth-child(6)  { animation-delay: 0.24s !important; }
tbody tr:nth-child(7)  { animation-delay: 0.27s !important; }
tbody tr:nth-child(8)  { animation-delay: 0.30s !important; }
tbody tr:nth-child(9)  { animation-delay: 0.33s !important; }
tbody tr:nth-child(10) { animation-delay: 0.36s !important; }
tbody tr:nth-child(n+11) { animation-delay: 0.38s !important; }

tbody tr:hover {
  transform: translateX(3px) !important;
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), background 0.18s ease, box-shadow 0.18s ease !important;
}

/* Status badges */
[class*="rounded-full"][class*="px-2"],
[class*="rounded-full"][class*="px-3"] {
  animation: prism-pop 0.32s cubic-bezier(0.34,1.56,0.64,1) both,
             prism-shimmer 4.5s ease-in-out 0.5s infinite !important;
  display: inline-flex !important;
  align-items: center !important;
}
[class*="rounded-full"][class*="px-2"]:nth-child(1) { animation-delay: 0.08s, 0.5s !important; }
[class*="rounded-full"][class*="px-2"]:nth-child(2) { animation-delay: 0.12s, 1.2s !important; }
[class*="rounded-full"][class*="px-2"]:nth-child(3) { animation-delay: 0.16s, 1.9s !important; }

/* Sidebar nav items */
aside nav a, aside a {
  animation: nav-feather 0.32s cubic-bezier(0.22,1,0.36,1) both !important;
}
aside nav a:nth-child(1)  { animation-delay: 0.02s !important; }
aside nav a:nth-child(2)  { animation-delay: 0.06s !important; }
aside nav a:nth-child(3)  { animation-delay: 0.10s !important; }
aside nav a:nth-child(4)  { animation-delay: 0.14s !important; }
aside nav a:nth-child(5)  { animation-delay: 0.18s !important; }
aside nav a:nth-child(6)  { animation-delay: 0.22s !important; }
aside nav a:nth-child(7)  { animation-delay: 0.26s !important; }
aside nav a:nth-child(8)  { animation-delay: 0.30s !important; }
aside nav a:nth-child(n+9) { animation-delay: 0.32s !important; }

/* Hero banners */
[class*="rounded-3xl"] {
  animation: banner-unfurl 0.5s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* Grid cols cascade */
.grid.grid-cols-12 > [class*="col-span"] {
  animation: feather-in 0.36s cubic-bezier(0.22,1,0.36,1) both !important;
}
.grid.grid-cols-12 > [class*="col-span"]:nth-child(1) { animation-delay: 0.00s !important; }
.grid.grid-cols-12 > [class*="col-span"]:nth-child(2) { animation-delay: 0.06s !important; }
.grid.grid-cols-12 > [class*="col-span"]:nth-child(3) { animation-delay: 0.12s !important; }
.grid.grid-cols-12 > [class*="col-span"]:nth-child(4) { animation-delay: 0.18s !important; }
.grid.grid-cols-12 > [class*="col-span"]:nth-child(5) { animation-delay: 0.24s !important; }
.grid.grid-cols-12 > [class*="col-span"]:nth-child(6) { animation-delay: 0.30s !important; }

/* Charts */
.recharts-wrapper { animation: feather-in 0.55s cubic-bezier(0.22,1,0.36,1) 0.2s both !important; }

/* Active nav ambient */
.bg-emerald-500\/15 { animation: border-breathe 4.5s ease-in-out infinite !important; }

/* Dividers */
hr,
.border-t.border-slate-800,
.border-t.border-white\/\[0\.07\] {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(6,182,212,0.15) 40%,
    rgba(6,182,212,0.25) 50%,
    rgba(6,182,212,0.15) 60%,
    transparent 100%
  ) !important;
  background-size: 200% 1px !important;
  background-repeat: no-repeat !important;
  height: 1px !important;
  border: none !important;
  animation: divider-sweep 5s ease-in-out 0.3s infinite !important;
}

/* Page root entrance */
#root { animation: feather-in 0.3s cubic-bezier(0.22,1,0.36,1) both !important; }

/* GPU hints */
.glass-panel, section.rounded-2xl, aside a, tbody tr, button,
[class*="rounded-full"][class*="px-2"], [class*="rounded-full"][class*="px-3"],
.grid > .rounded-2xl {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
}

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