/* ═══ ULTRA PREMIUM OVERLAY v1.0 ═══ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
  --font-display: 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, sans-serif;
  --ultra-1: #0ff0fc;
  --ultra-2: #a78bfa;
  --ultra-3: #f472b6;
  --ultra-4: #34d399;
  --glow-1: 0 0 30px rgba(15,240,252,.15);
  --glow-2: 0 0 30px rgba(167,139,250,.12);
  --shadow-ultra: 0 4px 6px -1px rgba(0,0,0,.05), 0 10px 15px -3px rgba(0,0,0,.05), 0 20px 40px -4px rgba(0,0,0,.08);
  --shadow-hover: 0 8px 12px -2px rgba(0,0,0,.08), 0 20px 30px -4px rgba(0,0,0,.1), 0 0 40px rgba(15,240,252,.08);
  --ease-spring: cubic-bezier(.175,.885,.32,1.275);
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}

/* ═══ NOISE GRAIN OVERLAY ═══ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--noise);
  pointer-events: none;
  z-index: 9999;
  opacity: .4;
  mix-blend-mode: overlay;
}

/* ═══ ANIMATED MESH GRADIENT BACKGROUND ═══ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(15,240,252,.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(167,139,250,.04) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(244,114,182,.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
  animation: meshMove 20s ease-in-out infinite alternate;
}
@keyframes meshMove {
  0% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-2%,1%) scale(1.02); }
  66% { transform: translate(1%,-1%) scale(.98); }
  100% { transform: translate(-1%,2%) scale(1.01); }
}

/* ═══ TYPOGRAPHY ═══ */
h1,h2,h3,.card-title,.topbar-title,.stat-num,.hero-title,.dept-name {
  font-family: var(--font-display) !important;
}
h1,.hero-title { letter-spacing: -1px !important; }

/* ═══ PREMIUM SIDEBAR ═══ */
.sidebar {
  background: linear-gradient(180deg, #020617 0%, #0a0f23 40%, #0f172a 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 40px rgba(0,0,0,.4), 1px 0 0 rgba(15,240,252,.08) !important;
}
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 5%, rgba(15,240,252,.2) 30%, rgba(167,139,250,.15) 70%, transparent 95%);
  z-index: 2;
}
.brand {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  background: linear-gradient(135deg, #fff 0%, var(--ultra-1) 50%, var(--ultra-2) 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: brandFlow 4s ease infinite !important;
}
@keyframes brandFlow {
  0%,100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}
.nav-item {
  border-radius: 12px !important;
  margin: 1px 0 !important;
  transition: all .3s var(--ease-expo) !important;
  backdrop-filter: none;
}
.nav-item:hover {
  background: rgba(15,240,252,.06) !important;
  transform: translateX(6px) !important;
  box-shadow: inset 3px 0 0 var(--ultra-1), 0 0 20px rgba(15,240,252,.05) !important;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(15,240,252,.1), rgba(167,139,250,.05)) !important;
  box-shadow: inset 3px 0 0 var(--ultra-1), 0 0 30px rgba(15,240,252,.06) !important;
}
.nav-item.active .nav-icon-svg {
  filter: drop-shadow(0 0 10px rgba(15,240,252,.6)) !important;
}

/* ═══ TOPBAR GLASS ═══ */
.topbar {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(40px) saturate(200%) brightness(105%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(105%) !important;
  border-bottom: 1px solid rgba(15,240,252,.06) !important;
  box-shadow: 0 1px 0 rgba(15,240,252,.04), 0 4px 30px rgba(0,0,0,.03) !important;
}

/* ═══ CARD 3D GLASS ═══ */
.card {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-ultra) !important;
  transition: all .4s var(--ease-expo) !important;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(15,240,252,.3), rgba(167,139,250,.2), transparent) !important;
  opacity: 0 !important;
  transition: opacity .4s !important;
}
.card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(15,240,252,.15) !important;
}
.card:hover::before { opacity: 1 !important; }

/* ═══ STAT CARDS 3D ═══ */
.stat-card {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-ultra) !important;
  transition: all .45s var(--ease-spring) !important;
  transform-style: preserve-3d;
  perspective: 800px;
}
.stat-card:hover {
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(15,240,252,.2) !important;
}
.stat-card:hover .stat-icon {
  transform: scale(1.2) rotate(-8deg) !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
}
.stat-num {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
}
.stat-icon {
  border-radius: 16px !important;
  transition: all .4s var(--ease-spring) !important;
}

/* ═══ BUTTONS PREMIUM ═══ */
.btn {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: all .3s var(--ease-expo) !important;
  position: relative;
  overflow: hidden;
  letter-spacing: -.1px;
}
.btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(14,165,233,.3), 0 0 0 1px rgba(14,165,233,.1) !important;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(14,165,233,.4), 0 0 40px rgba(139,92,246,.15) !important;
}
/* Shine sweep */
.btn-primary::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent) !important;
  transition: left .5s !important;
}
.btn-primary:hover::after { left: 100% !important; }

.btn-outline {
  border: 1.5px solid rgba(148,163,184,.25) !important;
  background: rgba(255,255,255,.5) !important;
  backdrop-filter: blur(8px) !important;
}
.btn-outline:hover {
  border-color: rgba(14,165,233,.4) !important;
  background: rgba(14,165,233,.05) !important;
  box-shadow: 0 0 20px rgba(14,165,233,.08) !important;
  transform: translateY(-2px) !important;
}

/* ═══ CHIPS PREMIUM ═══ */
.chip {
  border-radius: 10px !important;
  border: 1.5px solid rgba(148,163,184,.2) !important;
  font-weight: 600 !important;
  transition: all .25s var(--ease-spring) !important;
  backdrop-filter: blur(8px);
}
.chip:hover {
  transform: translateY(-2px) scale(1.05) !important;
  border-color: rgba(14,165,233,.3) !important;
  box-shadow: 0 4px 12px rgba(14,165,233,.1) !important;
}
.chip.selected {
  background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(139,92,246,.08)) !important;
  border-color: rgba(14,165,233,.4) !important;
  color: #0284c7 !important;
  box-shadow: 0 4px 15px rgba(14,165,233,.15), inset 0 0 0 1px rgba(14,165,233,.1) !important;
  transform: scale(1.05) !important;
}

/* ═══ FORMS PREMIUM ═══ */
.form-input, .form-select, .form-textarea {
  border: 1.5px solid rgba(148,163,184,.2) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(8px) !important;
  transition: all .3s var(--ease-expo) !important;
  font-weight: 500 !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--ultra-1) !important;
  box-shadow: 0 0 0 4px rgba(15,240,252,.08), 0 0 30px rgba(15,240,252,.06) !important;
  background: #fff !important;
  transform: translateY(-1px) !important;
}
.form-label {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
}

/* ═══ BADGES GLOW ═══ */
.badge {
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  letter-spacing: .2px !important;
  backdrop-filter: blur(4px);
  transition: all .2s !important;
}
.badge-blue { box-shadow: inset 0 0 0 1px rgba(14,165,233,.15); }
.badge-green { box-shadow: inset 0 0 0 1px rgba(52,211,153,.15); }
.badge-yellow { box-shadow: inset 0 0 0 1px rgba(251,191,36,.15); }
.badge-red { box-shadow: inset 0 0 0 1px rgba(239,68,68,.15); }
.badge-purple { box-shadow: inset 0 0 0 1px rgba(139,92,246,.15); }

/* ═══ TABS PREMIUM ═══ */
.tab {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  transition: all .3s var(--ease-expo) !important;
  position: relative;
}
.tab.active {
  color: #0ea5e9 !important;
}
.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(14,165,233,.3);
}

/* ═══ MODAL PREMIUM ═══ */
.modal-overlay {
  backdrop-filter: blur(12px) saturate(120%) !important;
  background: rgba(2,6,23,.5) !important;
}
.modal {
  border-radius: 24px !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.2), 0 0 0 1px rgba(15,240,252,.06), 0 0 80px rgba(15,240,252,.04) !important;
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #0ea5e9, #8b5cf6, #0ea5e9) 1 !important;
}

/* ═══ TOAST PREMIUM ═══ */
.toast {
  background: rgba(2,6,23,.92) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

/* ═══ TABLE PREMIUM ═══ */
thead th {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  background: rgba(248,250,252,.8) !important;
  backdrop-filter: blur(8px) !important;
}
tbody tr {
  transition: all .2s var(--ease-smooth) !important;
}
tbody tr:hover {
  background: linear-gradient(90deg, rgba(14,165,233,.03), rgba(139,92,246,.02)) !important;
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(14,165,233,.2), rgba(139,92,246,.15));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(14,165,233,.4), rgba(139,92,246,.3));
}

/* ═══ SELECTION ═══ */
::selection { background: rgba(14,165,233,.15); color: inherit; }

/* ═══ FOCUS ═══ */
*:focus-visible {
  outline: 2px solid rgba(14,165,233,.5) !important;
  outline-offset: 2px;
}

/* ═══ MOBILE BOTTOM NAV ═══ */
.mobile-bottom-nav {
  backdrop-filter: blur(30px) saturate(200%) !important;
  background: rgba(255,255,255,.8) !important;
  border-top: 1px solid rgba(14,165,233,.06) !important;
  box-shadow: 0 -4px 30px rgba(0,0,0,.05) !important;
}

/* ═══ SEARCH BOX ═══ */
.search-box {
  border-radius: 14px !important;
  border: 1.5px solid rgba(148,163,184,.15) !important;
  background: rgba(255,255,255,.6) !important;
  backdrop-filter: blur(12px) !important;
  transition: all .3s var(--ease-expo) !important;
}
.search-box:focus-within {
  border-color: rgba(14,165,233,.3) !important;
  box-shadow: 0 0 0 4px rgba(14,165,233,.06), 0 0 20px rgba(14,165,233,.05) !important;
  background: rgba(255,255,255,.9) !important;
}

/* ═══ DARK MODE ═══ */
[data-theme="dark"] .card,
body.dark-mode .card {
  background: rgba(15,23,42,.75) !important;
  border: 1px solid rgba(15,240,252,.06) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 0 1px rgba(15,240,252,.03) !important;
}
[data-theme="dark"] .card:hover,
body.dark-mode .card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 40px rgba(15,240,252,.05) !important;
  border-color: rgba(15,240,252,.12) !important;
}
[data-theme="dark"] .stat-card,
body.dark-mode .stat-card {
  background: rgba(15,23,42,.8) !important;
  border-color: rgba(15,240,252,.08) !important;
}
[data-theme="dark"] .topbar,
body.dark-mode .topbar {
  background: rgba(2,6,23,.85) !important;
  border-color: rgba(15,240,252,.06) !important;
}
[data-theme="dark"] .mobile-bottom-nav,
body.dark-mode .mobile-bottom-nav {
  background: rgba(2,6,23,.9) !important;
}
[data-theme="dark"] .btn-outline,
body.dark-mode .btn-outline {
  background: rgba(15,23,42,.5) !important;
  border-color: rgba(15,240,252,.1) !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .chip,
body.dark-mode .chip {
  background: rgba(15,23,42,.6) !important;
  border-color: rgba(15,240,252,.08) !important;
}
[data-theme="dark"] .toast,
body.dark-mode .toast {
  background: rgba(2,6,23,.95) !important;
  border-color: rgba(15,240,252,.08) !important;
}