/* ══════════════════════════════════════════════════════════════
   VUTEX IT HELPDESK — Aurora Glass Design System v5.0
   Brand: Blue #002878 · Green #287800 · Red #f02800
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --vb:   #002878; --vb1: #003494; --vb2: #0040b0; --vb3: #1a56cc; --vb4: #4a8fff;
  --vg:   #287800; --vg1: #308f00; --vg2: #3aaa00; --vg3: #50c800;
  --vr:   #f02800; --vr1: #c01e00; --vr2: #ff3a0f;
  /* ── Dark base ──────────────────────────────────────────── */
  --bg0:  #000308; --bg1: #030810; --bg2: #060c18; --bg3: #0a1020;
  /* ── Glass layers ───────────────────────────────────────── */
  --g03:  rgba(255,255,255,.03);
  --g05:  rgba(255,255,255,.05);
  --g08:  rgba(255,255,255,.08);
  --g12:  rgba(255,255,255,.12);
  --g18:  rgba(255,255,255,.18);
  --g24:  rgba(255,255,255,.24);
  /* ── Vibrancy ───────────────────────────────────────────── */
  --vib1: rgba(255,255,255,.055);
  --vib2: rgba(255,255,255,.09);
  --vib3: rgba(255,255,255,.15);
  /* ── Text ──────────────────────────────────────────────── */
  --tx:   #ffffff; --t2: rgba(255,255,255,.78); --t3: rgba(255,255,255,.48);
  --t4: rgba(255,255,255,.30); --t5: rgba(255,255,255,.15);
  /* ── Semantic ──────────────────────────────────────────── */
  --gn:   #30d158; --gnd: rgba(48,209,88,.12); --gnb: rgba(48,209,88,.28);
  --rd:   #ff453a; --rdd: rgba(255,69,58,.12); --rdb: rgba(255,69,58,.28);
  --am:   #ffd60a; --amd: rgba(255,214,10,.12); --amb: rgba(255,214,10,.28);
  --pu:   #bf5af2; --pud: rgba(191,90,242,.12); --pub: rgba(191,90,242,.28);
  --cy:   #32ade6; --cyd: rgba(50,173,230,.12); --cyb: rgba(50,173,230,.28);
  /* ── Blur ───────────────────────────────────────────────── */
  --blur-xs: blur(12px) saturate(1.6);
  --blur-sm: blur(20px) saturate(1.8);
  --blur:    blur(40px) saturate(2.0);
  --blur-lg: blur(60px) saturate(2.2);
  --blur-xl: blur(80px) saturate(2.4);
  /* ── Shadows ────────────────────────────────────────────── */
  --sh-xs: 0 2px 8px rgba(0,0,0,.35);
  --sh:    0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --sh-lg: 0 20px 60px rgba(0,0,0,.65), 0 8px 20px rgba(0,0,0,.4);
  --sh-xl: 0 32px 80px rgba(0,0,0,.75), 0 12px 32px rgba(0,0,0,.5);
  --shine: inset 0 1px 0 rgba(255,255,255,.13);
  --shine2:inset 0 1px 0 rgba(255,255,255,.22);
  /* ── Glows ──────────────────────────────────────────────── */
  --glow-b: 0 0 40px rgba(74,143,255,.28), 0 0 80px rgba(74,143,255,.12);
  --glow-g: 0 0 40px rgba(48,209,88,.22),  0 0 80px rgba(48,209,88,.08);
  --glow-r: 0 0 40px rgba(255,69,58,.28),  0 0 80px rgba(255,69,58,.10);
  --glow-p: 0 0 40px rgba(191,90,242,.22), 0 0 80px rgba(191,90,242,.08);
  /* ── Radius ─────────────────────────────────────────────── */
  --r-xs: 8px; --r-sm: 12px; --r: 14px; --r2: 18px; --r3: 24px; --r4: 32px; --r5: 44px;
  /* ── Easing ─────────────────────────────────────────────── */
  --spring: cubic-bezier(.34,1.56,.64,1);
  --ease:   cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  background: var(--bg0);
  color: var(--tx);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Aurora background (orbs injected by JS) ────────────────── */
#vx-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); will-change: transform;
}
.orb1 {
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(0,56,200,.3) 0%, rgba(0,30,120,.15) 45%, transparent 70%);
  top: -15%; left: -10%;
  animation: orb1 28s ease-in-out infinite alternate;
}
.orb2 {
  width: 45vw; height: 45vw;
  background: radial-gradient(circle, rgba(30,110,0,.2) 0%, rgba(15,60,0,.1) 45%, transparent 70%);
  bottom: -20%; right: -10%;
  animation: orb2 35s ease-in-out infinite alternate;
}
.orb3 {
  width: 35vw; height: 35vw;
  background: radial-gradient(circle, rgba(80,30,180,.15) 0%, transparent 65%);
  top: 30%; right: 5%;
  animation: orb3 22s ease-in-out infinite alternate;
}
.orb4 {
  width: 28vw; height: 28vw;
  background: radial-gradient(circle, rgba(0,100,200,.12) 0%, transparent 65%);
  bottom: 10%; left: 20%;
  animation: orb4 18s ease-in-out infinite alternate;
}

@keyframes orb1 {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(8vw, 12vh) scale(1.08); }
  66%  { transform: translate(-5vw, 25vh) scale(.94); }
  100% { transform: translate(15vw, 5vh) scale(1.05); }
}
@keyframes orb2 {
  0%   { transform: translate(0,0) scale(1); }
  40%  { transform: translate(-12vw, -15vh) scale(1.1); }
  80%  { transform: translate(8vw, -28vh) scale(.92); }
  100% { transform: translate(-6vw, -10vh) scale(1.03); }
}
@keyframes orb3 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-10vw, -20vh) scale(1.15); }
  100% { transform: translate(5vw, 15vh) scale(.88); }
}
@keyframes orb4 {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  60%  { transform: translate(10vw, -8vh) scale(1.2) rotate(10deg); }
  100% { transform: translate(-5vw, 12vh) scale(.9) rotate(-5deg); }
}

/* Noise texture */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

a { color: var(--vb4); text-decoration: none; transition: color .15s; }
img { max-width: 100%; }

/* ── z-index layers ─────────────────────────────────────────── */
.v-nav, .v-wrap, .card, .modal-bg, .float-nav,
.toast-wrap, .adm-layout, .adm-sb { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.v-nav {
  position: sticky; top: 0; z-index: 200; height: 58px;
  background: rgba(2,6,18,.7);
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 40px rgba(0,0,0,.5);
  display: flex; align-items: center; padding: 0 20px;
}
.v-nav-inner { display: flex; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; gap: 4px; padding: 0 24px; }
.v-logo { display: flex; align-items: center; margin-right: 20px; flex-shrink: 0; text-decoration: none; }
.v-logo img { height: 30px; width: auto; display: block; }
.v-nav-links { display: flex; align-items: center; flex: 1; gap: 2px; }
.v-nav-link {
  padding: 6px 14px; font-size: 13px; font-weight: 500;
  color: var(--t3); border-radius: var(--r5);
  transition: all .2s var(--ease);
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; border: 1px solid transparent;
  white-space: nowrap;
}
.v-nav-link:hover { color: var(--t2); background: var(--g08); border-color: var(--g12); }
.v-nav-link.active {
  color: #fff; background: var(--g12);
  border-color: rgba(255,255,255,.1);
  box-shadow: var(--shine);
}
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t5); transition: all .2s; flex-shrink: 0; }
.v-nav-link.active .nav-dot { background: var(--vb4); box-shadow: 0 0 6px var(--vb4); }
.v-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
#v-clock { font-size: 12px; color: var(--t4); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */
.v-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 24px 100px; box-sizing: border-box; width: 100%; }
.v-wrap-wide { max-width: 1400px; margin: 0 auto; padding: 24px; }

/* ── Page header ────────────────────────────────────────────── */
.page-hdr { margin-bottom: 28px; }
.page-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vb4); opacity: .7; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.page-eyebrow::before {
  content: ''; width: 18px; height: 1px;
  background: linear-gradient(90deg, var(--vb4), transparent);
}
.page-title {
  font-size: 24px; font-weight: 800; color: #fff;
  letter-spacing: -.035em; margin-bottom: 5px; line-height: 1.15;
}
.page-title-grad {
  background: linear-gradient(135deg, #fff 30%, rgba(120,170,255,.75) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-sub { font-size: 13px; color: var(--t3); margin-bottom: 24px; line-height: 1.6; }
.page-divider {
  display: flex; align-items: center; gap: 16px; margin: 28px 0 20px;
}
.page-divider-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t4); white-space: nowrap;
}
.page-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--g12), transparent); }

/* ═══════════════════════════════════════════════════════════
   GLASS CARDS
   ═══════════════════════════════════════════════════════════ */
.card {
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.04);
  border: 1px solid rgba(255,255,255,.13);
  border-top-color: rgba(255,255,255,.22);
  border-radius: var(--r3);
  padding: 20px 24px; margin-bottom: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.15) inset;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--spring), background .25s;
  position: relative; overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}
/* Let native <select> dropdown popups escape the card's overflow clipping
   (fixes dropdown lists being cut off / covered by content below) */
.card:has(select) { overflow: visible; }

/* Let native <select> dropdown popups escape the card's overflow clipping
   (fixes dropdown lists being cut off / covered by content below) */
.card:has(select) { overflow: visible; }

.card::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--ease);
  pointer-events: none;
}
.card:hover {
  border-color: rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.08);
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.22) inset;
}
.card:hover::after { left: 150%; }

.card-h {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t4); padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--g08);
  display: flex; align-items: center; justify-content: space-between;
}
.card-h span { display: flex; align-items: center; gap: 7px; }

/* Action cards */
.action-card {
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255,255,255,.1);
  border-top-color: rgba(255,255,255,.2);
  border-radius: var(--r2); padding: 20px;
  cursor: pointer; transition: all .28s var(--spring);
  box-shadow: 0 2px 20px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.14) inset;
  text-decoration: none; display: block;
  position: relative; overflow: hidden;
}
.action-card::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: skewX(-18deg); transition: left .5s var(--ease); pointer-events: none;
}
.action-card:hover {
  border-color: rgba(74,143,255,.4);
  border-top-color: rgba(74,143,255,.6);
  background: rgba(74,143,255,.1);
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--sh-lg), var(--glow-b), 0 1px 0 rgba(255,255,255,.22) inset;
}
.action-card:hover::after { left: 150%; }
.action-card:active { transform: scale(.96); transition-duration: .1s; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,.13); border-radius: var(--r5);
  background: rgba(255,255,255,.08); color: var(--t2);
  cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .2s var(--spring);
  text-decoration: none;
  backdrop-filter: var(--blur-xs);
  -webkit-backdrop-filter: var(--blur-xs);
  box-shadow: var(--shine);
  white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn:hover { background: var(--g12); color: var(--tx); border-color: var(--g18); transform: scale(1.03) translateY(-1px); }
.btn:active { transform: scale(.93); transition-duration: .08s; }

.btn-p {
  background: linear-gradient(135deg, rgba(74,143,255,.9) 0%, rgba(0,56,180,.95) 100%);
  border-color: rgba(74,143,255,.45); color: #fff;
  box-shadow: var(--glow-b), 0 4px 16px rgba(0,0,0,.35), var(--shine2);
}
.btn-p:hover {
  background: linear-gradient(135deg, rgba(90,160,255,.95) 0%, rgba(20,80,210,.95) 100%);
  border-color: rgba(110,170,255,.55); color: #fff;
  box-shadow: 0 0 50px rgba(74,143,255,.45), 0 4px 20px rgba(0,0,0,.35), var(--shine2);
}
.btn-g {
  background: linear-gradient(135deg, rgba(48,209,88,.82) 0%, rgba(30,160,60,.88) 100%);
  border-color: rgba(48,209,88,.35); color: #fff;
  box-shadow: var(--glow-g), var(--shine);
}
.btn-g:hover { background: linear-gradient(135deg, rgba(60,225,100,.9) 0%, rgba(40,180,70,.9) 100%); box-shadow: 0 0 40px rgba(48,209,88,.35), var(--sh), var(--shine2); }
.btn-r {
  background: linear-gradient(135deg, rgba(255,69,58,.78) 0%, rgba(200,40,30,.88) 100%);
  border-color: rgba(255,69,58,.35); color: #fff;
  box-shadow: var(--glow-r), var(--shine);
}
.btn-am {
  background: linear-gradient(135deg, rgba(255,214,10,.8) 0%, rgba(200,160,0,.85) 100%);
  border-color: rgba(255,214,10,.35); color: #000;
}
.btn-sm { padding: 5px 14px; font-size: 12px; border-radius: var(--r5); }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
.btn-row {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding-top: 16px; border-top: 1px solid var(--g08); margin-top: 10px;
}

/* ── Ripple (injected by JS) ──────────────────────────────── */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.22);
  animation: rippleAnim .45s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(2.8); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fg label { font-size: 12px; font-weight: 600; color: var(--t2); letter-spacing: .01em; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }

input, select, textarea {
  width: 100%; font-size: 14px; padding: 11px 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r);
  color: var(--tx); font-family: inherit; color-scheme: dark;
  transition: border-color .18s, box-shadow .18s, background .18s;
  backdrop-filter: var(--blur-xs);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(74,143,255,.65);
  background: rgba(74,143,255,.08);
  box-shadow: 0 0 0 3px rgba(74,143,255,.15), 0 0 24px rgba(74,143,255,.1);
}
textarea { resize: vertical; min-height: 90px; }
input::placeholder, textarea::placeholder { color: var(--t4); }
select option { background: #0c0c18; }
hr.dv { border: none; border-top: 1px solid var(--g08); margin: 16px 0; }

/* Segmented control */
.pri-row { display: flex; gap: 6px; margin-top: 4px; padding: 4px; background: var(--g05); border-radius: var(--r); }
.pri {
  flex: 1; padding: 8px; border: none;
  border-radius: calc(var(--r) - 4px); background: transparent;
  color: var(--t3); cursor: pointer; font-size: 12px; font-weight: 600;
  text-align: center; transition: all .2s var(--spring); font-family: inherit;
}
.pri:hover { color: var(--t2); background: var(--g08); }
.pri.p-low.on    { background: var(--g12); color: var(--gn); box-shadow: var(--sh-xs), var(--shine); }
.pri.p-normal.on { background: var(--g12); color: var(--vb4); box-shadow: var(--sh-xs), var(--shine); }
.pri.p-high.on   { background: var(--g12); color: var(--am); box-shadow: var(--sh-xs), var(--shine); }
.pri.p-urgent.on { background: var(--g12); color: var(--rd); box-shadow: var(--sh-xs), var(--shine); }

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.sb {
  display: inline-block; padding: 3px 10px; border-radius: var(--r5);
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  border: 1px solid;
  backdrop-filter: var(--blur-xs);
}
.sb-open     { background: rgba(74,143,255,.15); border-color: rgba(74,143,255,.3); color: #80aaff; }
.sb-waiting  { background: var(--amd); border-color: var(--amb); color: var(--am); }
.sb-completed{ background: var(--gnd); border-color: var(--gnb); color: var(--gn); }
.sb-rejected { background: var(--rdd); border-color: var(--rdb); color: var(--rd); }
.pb { display: inline-block; padding: 2px 9px; border-radius: var(--r5); font-size: 10px; font-weight: 700; border: 1px solid; }
.pb-low    { background: var(--gnd); border-color: var(--gnb); color: var(--gn); }
.pb-normal { background: rgba(74,143,255,.15); border-color: rgba(74,143,255,.3); color: #80aaff; }
.pb-high   { background: var(--amd); border-color: var(--amb); color: var(--am); }
.pb-urgent { background: var(--rdd); border-color: var(--rdb); color: var(--rd); }
.tag { display: inline-block; padding: 3px 10px; border-radius: var(--r5); font-size: 11px; font-weight: 500; background: var(--g08); color: var(--t2); border: 1px solid var(--g12); }

/* ═══════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════ */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; }
.stat-card {
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  border-top-color: rgba(255,255,255,.22);
  border-radius: var(--r3);
  padding: 20px 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.15) inset;
  transition: all .28s var(--spring); position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.stat-card:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: var(--sh-lg), 0 1px 0 rgba(255,255,255,.22) inset;
  border-color: rgba(255,255,255,.22);
}
.stat-n { font-size: 34px; font-weight: 900; line-height: 1; margin-bottom: 5px; letter-spacing: -.05em; }
.stat-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--t4); }
.stat-card.ac .stat-n { color: var(--vb4); text-shadow: 0 0 30px rgba(74,143,255,.6); }
.stat-card.gn .stat-n { color: var(--gn); text-shadow: 0 0 30px rgba(48,209,88,.5); }
.stat-card.am .stat-n { color: var(--am); text-shadow: 0 0 20px rgba(255,214,10,.3); }
.stat-card.rd .stat-n { color: var(--rd); text-shadow: 0 0 20px rgba(255,69,58,.3); }
.stat-card.ac { border-left: 2px solid rgba(74,143,255,.4); }
.stat-card.gn { border-left: 2px solid rgba(48,209,88,.4); }
.stat-card.am { border-left: 2px solid rgba(255,214,10,.3); }
.stat-card.rd { border-left: 2px solid rgba(255,69,58,.35); }

/* ═══════════════════════════════════════════════════════════
   MODAL / SHEET
   ═══════════════════════════════════════════════════════════ */
.modal-bg {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  background: rgba(10,14,28,.92);
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
  border: 1px solid rgba(255,255,255,.15);
  border-top-color: rgba(255,255,255,.25);
  border-radius: var(--r3);
  width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.18) inset;
  animation: sheetUp .32s var(--spring) both;
}
@keyframes sheetUp { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-hdr {
  padding: 18px 22px; border-bottom: 1px solid var(--g08);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0;
  background: rgba(8,12,26,.98); backdrop-filter: var(--blur); z-index: 1;
  border-radius: var(--r3) var(--r3) 0 0;
}
.modal-body { padding: 22px; }
.modal-close {
  padding: 6px 10px; border: 1px solid var(--g12); border-radius: var(--r5);
  background: var(--g08); color: var(--t3); cursor: pointer; font-size: 18px;
  line-height: 1; transition: all .15s var(--spring);
}
.modal-close:hover { color: var(--rd); border-color: var(--rdb); background: var(--rdd); transform: scale(1.12); }

/* ═══════════════════════════════════════════════════════════
   FLOATING NAV (dock)
   ═══════════════════════════════════════════════════════════ */
.float-nav { position: fixed; bottom: 24px; right: max(20px, calc((100vw - 1200px) / 2 + 16px)); z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fn-btn {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.6); color: #002878;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.9) inset;
  transition: all .28s cubic-bezier(.34,1.56,.64,1); font-size: 20px;
}
.fn-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,.15); }
.fn-btn:active { transform: scale(.88); transition-duration: .1s; }
.fn-btn.open { background: rgba(255,255,255,.9); box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: rotate(45deg); color: #c82000; }
.fn-drawer { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.fn-drawer .fn-item { opacity: 0; transform: translateX(20px) scale(.92); transition: opacity .25s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.fn-drawer.open .fn-item { opacity: 1; transform: translateX(0) scale(1); }
.fn-drawer.open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }
.fn-drawer.open .fn-item:nth-child(1){transition-delay:.02s}.fn-drawer.open .fn-item:nth-child(2){transition-delay:.04s}.fn-drawer.open .fn-item:nth-child(3){transition-delay:.06s}.fn-drawer.open .fn-item:nth-child(4){transition-delay:.08s}.fn-drawer.open .fn-item:nth-child(5){transition-delay:.1s}.fn-drawer.open .fn-item:nth-child(6){transition-delay:.12s}.fn-drawer.open .fn-item:nth-child(7){transition-delay:.14s}.fn-drawer.open .fn-item:nth-child(8){transition-delay:.16s}
.fn-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  background: rgba(10,14,30,.88);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.14);
  border-top-color: rgba(255,255,255,.22);
  border-radius: var(--r5);
  cursor: pointer; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9);
  white-space: nowrap;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.1) inset;
  text-decoration: none;
  transform-origin: right center;
}
.fn-item:hover { background: rgba(0,40,120,.85); color: #fff; border-color: rgba(74,143,255,.4); box-shadow: 0 8px 28px rgba(0,40,120,.4); transform: translateX(-6px) scale(1.04); }
.fn-item:active { transform: scale(.94); transition-duration: .08s; }

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
.toast-wrap { position: fixed; bottom: 100px; right: 24px; z-index: 500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: rgba(16,20,36,.97); backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.14);
  border-top-color: rgba(255,255,255,.22);
  border-radius: var(--r5);
  padding: 12px 20px; font-size: 13px; font-weight: 600; color: var(--t2);
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.15) inset;
  opacity: 0; transform: translateY(12px) scale(.9);
  transition: all .3s var(--spring); pointer-events: none; max-width: 300px;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.toast-ok  { border-color: var(--gnb); color: var(--gn); box-shadow: var(--glow-g), var(--sh); }
.toast.toast-err { border-color: var(--rdb); color: var(--rd); box-shadow: var(--glow-r), var(--sh); }

/* ═══════════════════════════════════════════════════════════
   DROP ZONE
   ═══════════════════════════════════════════════════════════ */
.drop-zone {
  border: 1.5px dashed rgba(255,255,255,.2); border-radius: var(--r2);
  padding: 32px; text-align: center; cursor: pointer;
  transition: all .22s var(--ease); position: relative;
  background: rgba(255,255,255,.04);
}
.drop-zone:hover, .drop-zone.drag {
  border-color: rgba(74,143,255,.55); background: rgba(74,143,255,.08);
  box-shadow: inset 0 0 40px rgba(74,143,255,.05), var(--glow-b);
}
.drop-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════ */
.lb-bg { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.94); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lb-img { max-width: 90vw; max-height: 85vh; border-radius: var(--r2); box-shadow: var(--sh-xl), 0 0 0 1px rgba(255,255,255,.08); animation: sheetUp .28s var(--spring) both; }
.lb-caption { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.82); backdrop-filter: var(--blur); color: var(--t2); font-size: 13px; padding: 10px 24px; border-radius: var(--r5); border: 1px solid var(--g12); }
.lb-close { position: fixed; top: 20px; right: 22px; background: var(--g12); backdrop-filter: var(--blur-xs); border: 1px solid var(--g18); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--t2); font-size: 18px; transition: all .18s var(--spring); }
.lb-close:hover { background: var(--rdd); border-color: var(--rdb); color: var(--rd); transform: scale(1.12) rotate(90deg); }

/* ═══════════════════════════════════════════════════════════
   CATEGORY PILLS
   ═══════════════════════════════════════════════════════════ */
.cat-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.cat-pill {
  padding: 7px 18px; border: 1px solid var(--g08); border-radius: var(--r5);
  background: rgba(255,255,255,.05); color: var(--t3); cursor: pointer;
  font-size: 12px; font-weight: 600; transition: all .2s var(--spring); font-family: inherit;
  backdrop-filter: var(--blur-xs);
}
.cat-pill:hover { border-color: var(--g18); color: var(--t2); background: var(--g12); transform: scale(1.05); }
.cat-pill:active { transform: scale(.93); }
.cat-pill.on { border-color: rgba(74,143,255,.45); color: var(--vb4); background: rgba(74,143,255,.12); box-shadow: 0 0 20px rgba(74,143,255,.15); }

/* ═══════════════════════════════════════════════════════════
   DOCS
   ═══════════════════════════════════════════════════════════ */
.doc-cat-btn {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  border-radius: var(--r); cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--t3); transition: all .18s var(--spring); border: 1px solid transparent;
  background: transparent; width: 100%; font-family: inherit; text-align: left;
}
.doc-cat-btn:hover { background: var(--g08); color: var(--t2); border-color: var(--g12); }
.doc-cat-btn.on { background: rgba(74,143,255,.15); color: var(--tx); border-color: rgba(74,143,255,.25); box-shadow: var(--shine); }
.doc-cat-count { margin-left: auto; font-size: 11px; background: var(--g08); color: var(--t3); padding: 1px 8px; border-radius: var(--r5); }
.doc-card {
  background: rgba(255,255,255,.05); backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.1);
  border-top-color: rgba(255,255,255,.17);
  border-radius: var(--r2); padding: 16px; display: flex; gap: 14px;
  margin-bottom: 10px; transition: all .22s var(--spring);
  box-shadow: 0 2px 16px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.1) inset;
}
.doc-card:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); transform: translateX(4px); box-shadow: 0 6px 28px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.18) inset; }
.doc-file-icon { width: 50px; height: 58px; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; position: relative; border: 1px solid; }
.doc-file-icon span { font-size: 8px; font-weight: 800; position: absolute; bottom: 5px; letter-spacing: .04em; }
.fi-pdf { background: var(--rdd); border-color: var(--rdb); color: var(--rd); }
.fi-doc { background: rgba(74,143,255,.15); border-color: rgba(74,143,255,.3); color: var(--vb4); }
.fi-xls { background: var(--gnd); border-color: var(--gnb); color: var(--gn); }
.fi-ppt { background: rgba(200,80,0,.12); border-color: rgba(200,80,0,.25); color: #f08040; }
.fi-zip { background: var(--pud); border-color: var(--pub); color: var(--pu); }
.fi-gen { background: var(--g08); border-color: var(--g12); color: var(--t2); }

/* ═══════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════ */
.photo-grid { columns: 4; column-gap: 14px; }
.photo-item {
  break-inside: avoid; margin-bottom: 14px; cursor: pointer;
  border-radius: var(--r2); overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: all .28s var(--spring); box-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.photo-item:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--sh-lg), 0 0 0 1px rgba(255,255,255,.2); border-color: rgba(255,255,255,.22); }
.photo-item:active { transform: scale(.97); }
.photo-item img { width: 100%; display: block; }
.photo-info { padding: 10px 12px; }
.photo-cap { font-size: 12px; color: var(--t2); font-weight: 500; }
.photo-meta { font-size: 11px; color: var(--t4); margin-top: 2px; }
.photo-actions { position: absolute; top: 8px; right: 8px; display: none; gap: 6px; }
.photo-item:hover .photo-actions { display: flex; }

/* ═══════════════════════════════════════════════════════════
   TICKETS
   ═══════════════════════════════════════════════════════════ */
.tkt-row {
  background: rgba(255,255,255,.05); backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.1);
  border-top-color: rgba(255,255,255,.16);
  border-radius: var(--r2); padding: 16px 20px; margin-bottom: 10px;
  cursor: pointer; transition: all .22s var(--spring);
  box-shadow: 0 2px 16px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.1) inset;
}
.tkt-row:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); transform: translateX(4px); box-shadow: 0 6px 28px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.15) inset; }
.tkt-row:active { transform: scale(.98); }
.tkt-row.urgent { border-left: 2px solid var(--rd); }

/* ═══════════════════════════════════════════════════════════
   THREAD MESSAGES
   ═══════════════════════════════════════════════════════════ */
.thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.msg { border-radius: var(--r2); padding: 13px 16px; backdrop-filter: var(--blur-xs); }
.msg-user     { background: var(--g08); border: 1px solid var(--g12); }
.msg-agent    { background: rgba(74,143,255,.14); border: 1px solid rgba(74,143,255,.25); }
.msg-internal { background: rgba(255,214,10,.08); border: 1px solid var(--amb); }
.msg-system   { background: var(--g05); border: 1px solid var(--g08); opacity: .6; }
.msg-hdr      { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11px; }
.msg-author   { font-weight: 700; color: var(--t2); }
.msg-time     { color: var(--t4); }
.msg-body     { font-size: 13px; color: var(--t2); line-height: 1.65; white-space: pre-wrap; }
.int-tag      { font-size: 10px; background: var(--amd); color: var(--am); border: 1px solid var(--amb); padding: 1px 7px; border-radius: var(--r5); margin-left: 7px; }

/* ═══════════════════════════════════════════════════════════
   ADMIN SIDEBAR
   ═══════════════════════════════════════════════════════════ */
.adm-side {
  width: 200px; flex-shrink: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; overflow-y: auto;
  transition: width .28s var(--ease);
}
.adm-side::-webkit-scrollbar { display: none; }
.adm-side.collapsed { width: 48px; }
.side-section { padding: 14px 14px 5px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t5); }
.side-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  font-size: 13px; font-weight: 500; color: var(--t3);
  cursor: pointer; border-radius: var(--r); margin: 1px 6px;
  transition: all .18s var(--spring); border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; user-select: none;
  background: none; font-family: inherit; width: calc(100% - 12px); text-align: left;
}
.side-link:hover { color: var(--t2); background: var(--g08); border-color: var(--g12); }
.side-link:active { transform: scale(.96); }
.side-link.on { color: var(--tx); background: rgba(74,143,255,.16); border-color: rgba(74,143,255,.25); box-shadow: var(--shine); }
.side-link .ico { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.side-link .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.adm-side.collapsed .lbl,.adm-side.collapsed .side-section { display: none; }
.adm-side.collapsed .side-link { justify-content: center; padding: 9px 0; margin: 1px 4px; width: auto; }
.side-divider { height: 1px; background: rgba(255,255,255,.06); margin: 8px 10px; }
.side-toggle-btn { display: flex; align-items: center; justify-content: center; padding: 10px 14px; cursor: pointer; color: var(--t4); transition: all .16s; border-radius: var(--r); margin: 4px 6px; background: none; border: none; font-family: inherit; width: calc(100% - 12px); }
.side-toggle-btn:hover { color: var(--t2); background: var(--g08); }
.adm-side.collapsed .side-toggle-btn { width: auto; padding: 10px 0; margin: 4px; }

/* iframe bar */
.iframe-top { background: rgba(0,0,0,.7); backdrop-filter: var(--blur); border-bottom: 1px solid var(--g08); padding: 8px 16px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.iurl { font-family: monospace; font-size: 12px; color: var(--t3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iopen { display: flex; align-items: center; gap: 5px; padding: 5px 14px; border: 1px solid rgba(74,143,255,.3); border-radius: var(--r5); background: rgba(74,143,255,.15); color: var(--vb4); font-size: 12px; font-weight: 600; text-decoration: none; transition: all .16s var(--spring); flex-shrink: 0; }
.iopen:hover { background: rgba(74,143,255,.28); border-color: rgba(74,143,255,.5); transform: scale(1.04); }

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--spring);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-scale {
  opacity: 0; transform: scale(.96);
  transition: opacity .45s var(--ease), transform .45s var(--spring);
}
.reveal-scale.in-view { opacity: 1; transform: scale(1); }
.reveal-left {
  opacity: 0; transform: translateX(-20px);
  transition: opacity .5s var(--ease), transform .5s var(--spring);
}
.reveal-left.in-view { opacity: 1; transform: translateX(0); }

/* Stagger delays */
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .14s; }
.d3 { transition-delay: .20s; }
.d4 { transition-delay: .26s; }
.d5 { transition-delay: .32s; }
.d6 { transition-delay: .40s; }

/* ═══════════════════════════════════════════════════════════
   UTILITIES & ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.cnf { background: var(--gnd); border: 1px solid var(--gnb); border-radius: var(--r2); padding: 14px 18px; margin-bottom: 14px; display: none; align-items: flex-start; gap: 12px; box-shadow: var(--glow-g), var(--shine); }
.cnf.on { display: flex; }
.cnf h3 { font-size: 14px; font-weight: 600; color: var(--gn); margin-bottom: 3px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gn); box-shadow: 0 0 8px var(--gn); flex-shrink: 0; animation: pulse 2s infinite; }

@keyframes fadeUp   { from { opacity:0; transform:translateY(20px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes pulse    { 0%,100% { opacity:1; box-shadow:0 0 8px var(--gn); } 50% { opacity:.4; box-shadow:0 0 18px var(--gn); } }
@keyframes spin     { to { transform:rotate(360deg); } }
@keyframes bounce   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes glow-pulse { 0%,100%{box-shadow:var(--glow-b)} 50%{box-shadow:0 0 60px rgba(74,143,255,.5), 0 0 120px rgba(74,143,255,.2)} }

.fade-up { animation: fadeUp .48s var(--spring) both; }
.fade-in { animation: fadeIn .35s var(--ease) both; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* Responsive */
@media(max-width:900px) { .photo-grid{columns:3} .g4{grid-template-columns:1fr 1fr} }
@media(max-width:640px) { .photo-grid{columns:2} .stats-row{grid-template-columns:1fr 1fr} .g3,.g4{grid-template-columns:1fr 1fr} .g2{grid-template-columns:1fr} .v-nav-links{display:none} }

/* Theme toggle */
.theme-toggle{width:34px;height:34px;border-radius:50%;background:var(--g08);border:1px solid var(--g12);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s var(--spring);flex-shrink:0}
.theme-toggle:hover{transform:scale(1.14);background:var(--g12)}
.theme-toggle:active{transform:scale(.88)}

/* ══ LIGHT MODE ═══════════════════════════════════════════════ */
body.light-mode {
  --bg0:#eef2fc; --bg1:#e4eaf8; --bg2:#d8e2f4; --bg3:#cdd8f0;
  --g05:rgba(0,30,100,.04); --g08:rgba(0,30,100,.07); --g12:rgba(0,30,100,.10);
  --g18:rgba(0,30,100,.16); --g24:rgba(0,30,100,.22);
  --vib1:rgba(255,255,255,.65); --vib2:rgba(255,255,255,.8); --vib3:rgba(255,255,255,.92);
  --tx:#0a1628; --t2:rgba(10,22,40,.78); --t3:rgba(10,22,40,.52);
  --t4:rgba(10,22,40,.36); --t5:rgba(10,22,40,.18);
  --sh:0 4px 16px rgba(0,30,100,.1),0 1px 4px rgba(0,30,100,.07);
  --sh-lg:0 8px 32px rgba(0,30,100,.15),0 2px 8px rgba(0,30,100,.1);
  --shine:inset 0 1px 0 rgba(255,255,255,.92);
  --shine2:inset 0 1px 0 rgba(255,255,255,.98);
  background: #eef2fc; color: #0a1628;
}
body.light-mode #vx-aurora .orb1 {
  background: radial-gradient(circle, rgba(0,56,200,.12) 0%, rgba(0,30,120,.06) 45%, transparent 70%);
}
body.light-mode #vx-aurora .orb2 {
  background: radial-gradient(circle, rgba(30,110,0,.1) 0%, rgba(15,60,0,.05) 45%, transparent 70%);
}
body.light-mode #vx-aurora .orb3 {
  background: radial-gradient(circle, rgba(80,30,180,.08) 0%, transparent 65%);
}
body.light-mode #vx-aurora .orb4 {
  background: radial-gradient(circle, rgba(0,100,200,.07) 0%, transparent 65%);
}
body.light-mode::after { opacity: .012; }

body.light-mode .v-nav {
  background: rgba(230,238,255,.88) !important;
  backdrop-filter: blur(50px) saturate(200%) !important;
  border-bottom: 1px solid rgba(0,30,100,.1) !important;
  box-shadow: 0 2px 20px rgba(0,30,100,.1), 0 1px 0 rgba(255,255,255,.9) inset !important;
}
body.light-mode .v-nav-link { color: rgba(10,22,40,.55); }
body.light-mode .v-nav-link:hover { color: rgba(10,22,40,.85); background: rgba(0,30,100,.06); border-color: rgba(0,30,100,.12); }
body.light-mode .v-nav-link.active { color: #002878; background: rgba(0,30,100,.09); border-color: rgba(0,30,100,.18); }
body.light-mode .nav-dot { background: rgba(0,30,100,.2); }
body.light-mode .v-nav-link.active .nav-dot { background: #002878; box-shadow: 0 0 6px rgba(0,40,120,.4); }
body.light-mode #v-clock { color: rgba(10,22,40,.4); }

body.light-mode .card {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(40px) saturate(200%) brightness(1.01) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.01) !important;
  border: 1px solid rgba(255,255,255,.98) !important;
  border-top-color: #fff !important;
  box-shadow: 0 4px 24px rgba(0,30,100,.1), 0 1px 0 #fff inset !important;
}
body.light-mode .card:hover {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 40px rgba(0,30,100,.16), 0 1px 0 #fff inset !important;
}
body.light-mode .card::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); }

body.light-mode .action-card {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 2px 16px rgba(0,30,100,.09), 0 1px 0 rgba(255,255,255,.98) inset !important;
}
body.light-mode .action-card:hover {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(0,30,100,.25) !important;
  box-shadow: 0 8px 32px rgba(0,30,100,.16), 0 1px 0 #fff inset !important;
}

body.light-mode .btn { background: rgba(255,255,255,.82); border-color: rgba(0,30,100,.2); color: #002878; font-weight: 600; }
body.light-mode .btn:hover { background: #fff; border-color: rgba(0,30,100,.4); color: #001a5a; }
body.light-mode .btn-p { background: linear-gradient(135deg,#002878,#1a4ab0); border-color: #002878; color: #fff; }
body.light-mode .btn-p:hover { background: linear-gradient(135deg,#001a55,#002878); color: #fff; }
body.light-mode .btn-g { background: linear-gradient(135deg,#287800,#3aaa00); border-color: #287800; color: #fff; }
body.light-mode .btn-r { background: linear-gradient(135deg,#c81800,#f02800); border-color: #c81800; color: #fff; }

body.light-mode input:not([type=checkbox]), body.light-mode select, body.light-mode textarea {
  background: rgba(255,255,255,.92) !important; border-color: rgba(0,30,100,.15) !important; color: #0a1628 !important;
  color-scheme: light;
}
body.light-mode input:focus, body.light-mode select:focus, body.light-mode textarea:focus {
  border-color: #002878 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(0,30,100,.1) !important;
}
body.light-mode input::placeholder, body.light-mode textarea::placeholder { color: rgba(10,22,40,.32) !important; }
body.light-mode select option { background: #fff; color: #0a1628; }

body.light-mode .stat-card {
  background: rgba(255,255,255,.75) !important; border-color: rgba(255,255,255,.98) !important;
  border-top-color: #fff !important;
  box-shadow: 0 4px 20px rgba(0,30,100,.1), 0 1px 0 #fff inset !important;
}
body.light-mode .stat-card.ac .stat-n { color: #002878 !important; text-shadow: none !important; }
body.light-mode .stat-card.gn .stat-n { color: #287800 !important; text-shadow: none !important; }
body.light-mode .stat-card.am .stat-n { color: #b06000 !important; text-shadow: none !important; }
body.light-mode .stat-card.rd .stat-n { color: #c01800 !important; text-shadow: none !important; }
body.light-mode .stat-l { color: rgba(10,22,40,.45) !important; }
body.light-mode .stat-card.ac { border-left-color: rgba(0,40,120,.4) !important; }
body.light-mode .stat-card.gn { border-left-color: rgba(40,120,0,.4) !important; }

body.light-mode .modal-box { background: rgba(240,246,255,.97) !important; border-color: rgba(255,255,255,.98) !important; box-shadow: 0 24px 80px rgba(0,30,100,.22), 0 1px 0 #fff inset !important; }
body.light-mode .modal-hdr { background: rgba(234,242,255,.99) !important; }

body.light-mode .fn-btn { background: rgba(240,244,255,.9) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid rgba(200,215,255,.7) !important; color: #002878 !important; box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; }
body.light-mode .fn-item { background: rgba(240,244,255,.82) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid rgba(200,215,255,.6) !important; color: #1a2540 !important; box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9) inset !important; font-weight: 600 !important; }
body.light-mode .fn-item:hover { background: rgba(255,255,255,.9) !important; color: #002878 !important; transform: translateX(-4px) scale(1.02) !important; }

body.light-mode .cat-pill { background: rgba(255,255,255,.65); border-color: rgba(0,30,100,.14); color: rgba(10,22,40,.6); }
body.light-mode .cat-pill.on { background: rgba(0,30,100,.1); border-color: rgba(0,30,100,.3); color: #002878; }
body.light-mode .cat-pill:hover { color: #002878; background: rgba(255,255,255,.88); }

body.light-mode .tkt-row { background: rgba(255,255,255,.75) !important; border-color: rgba(255,255,255,.95) !important; }
body.light-mode .tkt-row:hover { background: rgba(255,255,255,.95) !important; border-color: rgba(0,30,100,.2) !important; }

body.light-mode .doc-card { background: rgba(255,255,255,.75) !important; border-color: rgba(255,255,255,.95) !important; }
body.light-mode .doc-card:hover { background: rgba(255,255,255,.95) !important; border-color: rgba(0,30,100,.2) !important; }

body.light-mode .photo-item { background: #fff !important; border-color: rgba(255,255,255,.95) !important; box-shadow: 0 2px 16px rgba(0,30,100,.1) !important; }

body.light-mode .adm-side { background: rgba(230,238,255,.88) !important; border-right-color: rgba(0,30,100,.1) !important; }
body.light-mode .side-link { color: rgba(10,22,40,.62) !important; }
body.light-mode .side-link:hover { background: rgba(0,30,100,.07) !important; color: #002878 !important; border-color: rgba(0,30,100,.14) !important; }
body.light-mode .side-link.on { background: rgba(0,30,100,.1) !important; color: #002878 !important; border-color: rgba(0,30,100,.22) !important; font-weight: 700 !important; }
body.light-mode .side-divider { background: rgba(0,30,100,.08) !important; }
body.light-mode .side-section { color: rgba(10,22,40,.35) !important; }

body.light-mode .page-title { color: #0a1628; }
body.light-mode .page-eyebrow { color: rgba(0,40,120,.7); }
body.light-mode .page-title-grad { background: linear-gradient(135deg,#002878 0%,#1a4ab0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.light-mode .page-sub { color: rgba(10,22,40,.52); }
body.light-mode .page-divider::after { background: linear-gradient(90deg, rgba(0,30,100,.2), transparent); }

/* Light mode hero */
body.light-mode .hero { background: rgba(255,255,255,.55) !important; border-color: rgba(255,255,255,.95) !important; }
body.light-mode .hero-eyebrow { color: rgba(0,40,120,.65); }
body.light-mode .hero-title .grad { background: linear-gradient(135deg,#002878 0%,#1a4ab0 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.light-mode .hero-title { color: #0a1628; }
body.light-mode .hero-sub { color: rgba(10,22,40,.62); }
body.light-mode .hero-time { color: #002878; text-shadow: none; }
body.light-mode .hero-date { color: rgba(10,22,40,.5); }
body.light-mode .hs-l { color: rgba(10,22,40,.45); }
body.light-mode .hs.bl .hs-n { color: #002878; text-shadow: none; }
body.light-mode .hs.am .hs-n { color: #b06000; }
body.light-mode .hs.gn .hs-n { color: #287800; }

/* Light mode QA cards */
body.light-mode .qa { background: rgba(255,255,255,.72) !important; border-color: rgba(255,255,255,.95) !important; box-shadow: 0 2px 12px rgba(0,30,100,.09) !important; }
body.light-mode .qa:hover { background: rgba(255,255,255,.95) !important; border-color: rgba(0,30,100,.28) !important; box-shadow: 0 8px 32px rgba(0,30,100,.16) !important; }
body.light-mode .qa-label { color: #0a1628; font-weight: 700; }
body.light-mode .qa-sub { color: rgba(10,22,40,.5); }

/* Light mode news */
body.light-mode .news-feed { background: rgba(255,255,255,.7) !important; border-color: rgba(255,255,255,.95) !important; }
body.light-mode .news-hdr { border-bottom-color: rgba(0,30,100,.08) !important; }
body.light-mode .news-hdr > div > span:last-child { color: #0a1628 !important; font-weight: 700 !important; }
body.light-mode #newsCount { color: rgba(10,22,40,.4) !important; }
body.light-mode .news-title { color: #0a1628 !important; font-weight: 700 !important; }
body.light-mode .news-meta { color: rgba(10,22,40,.45) !important; }
body.light-mode .news-body { color: rgba(10,22,40,.68) !important; }
body.light-mode .news-item { border-bottom-color: rgba(0,30,100,.06) !important; }
body.light-mode .news-item:hover { background: rgba(0,30,100,.03) !important; }
body.light-mode .live-dot { background: #287800 !important; box-shadow: 0 0 8px #287800 !important; }
body.light-mode .ni-update { background: rgba(0,30,100,.1) !important; border-color: rgba(0,30,100,.22) !important; color: #002878 !important; }
body.light-mode .ni-maintenance { background: rgba(180,100,0,.1) !important; border-color: rgba(180,100,0,.22) !important; color: #904800 !important; }
body.light-mode .ni-outage { background: rgba(200,24,0,.1) !important; border-color: rgba(200,24,0,.22) !important; color: #c01800 !important; }
body.light-mode .ni-security { background: rgba(100,40,180,.1) !important; border-color: rgba(100,40,180,.22) !important; color: #5a20b0 !important; }
body.light-mode .ni-newsystem { background: rgba(40,120,0,.1) !important; border-color: rgba(40,120,0,.22) !important; color: #287800 !important; }

/* Light mode badges */
body.light-mode .sb-open { background: rgba(0,30,100,.1); border-color: rgba(0,30,100,.25); color: #002878; }
body.light-mode .sb-completed { background: rgba(40,120,0,.1); border-color: rgba(40,120,0,.25); color: #287800; }
body.light-mode .sb-waiting { background: rgba(180,100,0,.1); border-color: rgba(180,100,0,.25); color: #904800; }
body.light-mode .sb-rejected { background: rgba(200,24,0,.1); border-color: rgba(200,24,0,.25); color: #c01800; }
body.light-mode .tag { background: rgba(0,30,100,.08); border-color: rgba(0,30,100,.16); color: #002878; }

/* Light mode team */
body.light-mode .team-card { background: rgba(255,255,255,.92) !important; border: 1px solid rgba(255,255,255,.98) !important; box-shadow: 0 4px 20px rgba(0,30,100,.12), 0 1px 4px rgba(0,30,100,.08), 0 1px 0 #fff inset !important; }
body.light-mode .team-card:hover { box-shadow: 0 12px 40px rgba(0,30,100,.18), 0 4px 12px rgba(0,30,100,.12), 0 1px 0 #fff inset !important; border-color: rgba(0,30,100,.2) !important; }
body.light-mode .team-name { color: #002878 !important; font-weight: 800 !important; }
body.light-mode .team-title { color: rgba(10,22,40,.6) !important; }
body.light-mode .team-email { color: #1a4ab0 !important; }
body.light-mode .team-avatar { border-color: rgba(0,30,100,.2) !important; box-shadow: 0 0 0 5px rgba(0,30,100,.07), 0 4px 16px rgba(0,30,100,.15) !important; }

/* Light mode maintenance banner */
body.light-mode .maint-banner { background: rgba(255,248,235,.9) !important; border: 1.5px solid rgba(160,80,0,.35) !important; }
body.light-mode .maint-text { color: #5a2800 !important; font-weight: 700 !important; }

/* Light mode theme toggle */
body.light-mode .theme-toggle { background: rgba(0,30,100,.08); border-color: rgba(0,30,100,.18); }
body.light-mode .theme-toggle:hover { background: rgba(0,30,100,.14); }

/* Light mode reveal */
body.light-mode .reveal { }

/* Light dark-mode fixes for standalone pages */
body:not(.light-mode) .search-card, body:not(.light-mode) .results-card,
body:not(.light-mode) .mp-card, body:not(.light-mode) .sec,
body:not(.light-mode) .card-block, body:not(.light-mode) .auth-box {
  background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.11) !important;
}
body:not(.light-mode) .page-title, body:not(.light-mode) .tb-title { color: rgba(255,255,255,.92) !important; }
body:not(.light-mode) .page-sub, body:not(.light-mode) .lbl { color: rgba(255,255,255,.46) !important; }
body:not(.light-mode) input:not([type=checkbox]), body:not(.light-mode) select, body:not(.light-mode) textarea {
  background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.92) !important;
}
body:not(.light-mode) .link-card, body:not(.light-mode) .config-card,
body:not(.light-mode) .site-card, body:not(.light-mode) .item-card {
  background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.11) !important;
}
body:not(.light-mode) .topbar, body:not(.light-mode) .tb-right .tbtn-out {
  background: rgba(8,14,34,.82) !important; border-color: rgba(255,255,255,.1) !important;
}
body:not(.light-mode) .tbtn-out { color: rgba(255,255,255,.7) !important; border-color: rgba(255,255,255,.16) !important; }
body:not(.light-mode) .tab-bar { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
body:not(.light-mode) .tab-btn:not(.on) { color: rgba(255,255,255,.5); }
body:not(.light-mode) .tab-btn.on { background: #002878; color: #fff; }
body:not(.light-mode) .mp-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
body:not(.light-mode) .mp-card-title { color: rgba(255,255,255,.9); }
body:not(.light-mode) .result-list { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
body:not(.light-mode) .result-item { border-bottom-color: rgba(255,255,255,.06); }
body:not(.light-mode) .ri-title { color: rgba(255,255,255,.9); }
body:not(.light-mode) .ri-sub { color: rgba(255,255,255,.4); }
body:not(.light-mode) .hero-strip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
body:not(.light-mode) .hs-name { color: rgba(255,255,255,.9); }
body:not(.light-mode) .hss-n { color: #7ab4ff; }
body:not(.light-mode) .thread-tip { background: rgba(255,255,255,.05); border-left-color: rgba(255,255,255,.15); color: rgba(255,255,255,.45); }
body:not(.light-mode) .mp-sub { color: rgba(255,255,255,.4); }
body:not(.light-mode) .mp-title { color: rgba(255,255,255,.9); }
body:not(.light-mode) .success-banner { background: rgba(40,120,0,.15); border-color: rgba(40,120,0,.3); }
body:not(.light-mode) .fg label { color: rgba(255,255,255,.48); }
body:not(.light-mode) .fg input::placeholder, body:not(.light-mode) .fg textarea::placeholder { color: rgba(255,255,255,.28); }
body:not(.light-mode) .search-input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }
body:not(.light-mode) .search-input::placeholder { color: rgba(255,255,255,.28); }
body:not(.light-mode) .pd-table td, body:not(.light-mode) .pd-table th+th { color: rgba(255,255,255,.8); }
body:not(.light-mode) .pd-table tr:hover td { background: rgba(255,255,255,.05); }

/* Float nav + theme toggle positioning */
.float-nav, #floatThemeToggle { position: fixed; bottom: 24px; }
body .v-wrap { padding-bottom: 100px !important; }

/* ══ Global margin constraints ════════════════════════════════ */
body { overflow-x: hidden; }
.page,.mp-wrap,.hist-wrap,.doc,.topbar .topbar-inner,.tb-inner {
  max-width: 1200px !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 24px !important; padding-right: 24px !important;
  box-sizing: border-box !important; width: 100% !important;
}
.topbar,.tb,.v-nav,.nav,.hero-topbar {
  padding-left: max(24px, calc((100vw - 1200px)/2 + 24px)) !important;
  padding-right: max(24px, calc((100vw - 1200px)/2 + 24px)) !important;
}
.grid {
  padding-left: max(24px, calc((100vw - 1200px)/2 + 24px)) !important;
  padding-right: max(24px, calc((100vw - 1200px)/2 + 24px)) !important;
}
.filter-row {
  max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: 24px !important; padding-right: 24px !important;
}

/* ══ GLOBAL READABILITY & 3D GLASS UPGRADE ══════════════════════ */

/* Better base font size */
body { font-size: 15px; }

/* All text brighter */
body:not(.light-mode) { color: rgba(255,255,255,.92); }

/* ── Universal button override ── */
button, .btn, a.btn,
input[type=submit], input[type=button] {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  border-radius: 44px !important;
  padding: 10px 20px !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative; overflow: hidden;
}

/* Glass button base — dark */
body:not(.light-mode) button:not(.fn-btn):not(.modal-close):not(.side-link):not(.side-toggle-btn):not(.cat-pill):not(.pri):not(.shift-pill):not(.del-row):not(.pd-add-row):not(.theme-toggle),
body:not(.light-mode) .btn {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-top-color: rgba(255,255,255,.28) !important;
  color: rgba(255,255,255,.9) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -1px 0 rgba(0,0,0,.2) inset !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body:not(.light-mode) button:not(.fn-btn):not(.modal-close):not(.side-link):not(.side-toggle-btn):not(.cat-pill):not(.pri):not(.shift-pill):not(.del-row):not(.pd-add-row):not(.theme-toggle):hover,
body:not(.light-mode) .btn:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.30) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.22) inset !important;
}

/* Primary blue glass button */
body:not(.light-mode) .btn-p,
body:not(.light-mode) button.btn-p {
  background: linear-gradient(135deg, rgba(74,143,255,.85), rgba(0,50,180,.92)) !important;
  border: 1px solid rgba(74,143,255,.5) !important;
  border-top-color: rgba(120,180,255,.6) !important;
  color: #fff !important;
  box-shadow:
    0 4px 20px rgba(0,60,200,.45),
    0 8px 32px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.25) inset !important;
}
body:not(.light-mode) .btn-p:hover,
body:not(.light-mode) button.btn-p:hover {
  box-shadow:
    0 6px 30px rgba(0,80,255,.6),
    0 12px 40px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.3) inset !important;
}

/* Green glass button */
body:not(.light-mode) .btn-g,
body:not(.light-mode) button.btn-g {
  background: linear-gradient(135deg, rgba(48,209,88,.8), rgba(20,150,55,.88)) !important;
  border: 1px solid rgba(48,209,88,.45) !important;
  border-top-color: rgba(100,230,130,.55) !important;
  color: #fff !important;
  box-shadow:
    0 4px 20px rgba(20,160,60,.4),
    0 8px 32px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.22) inset !important;
}

/* Amber glass button */
body:not(.light-mode) .btn-am,
body:not(.light-mode) button.btn-am {
  background: linear-gradient(135deg, rgba(255,180,0,.82), rgba(200,130,0,.9)) !important;
  border: 1px solid rgba(255,200,0,.45) !important;
  border-top-color: rgba(255,220,80,.55) !important;
  color: #1a0e00 !important;
  box-shadow:
    0 4px 20px rgba(200,140,0,.4),
    0 8px 32px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.22) inset !important;
}

/* Red glass button */
body:not(.light-mode) .btn-r,
body:not(.light-mode) button.btn-r {
  background: linear-gradient(135deg, rgba(255,69,58,.78), rgba(180,30,20,.88)) !important;
  border: 1px solid rgba(255,80,60,.45) !important;
  border-top-color: rgba(255,120,100,.55) !important;
  color: #fff !important;
  box-shadow:
    0 4px 20px rgba(200,30,20,.4),
    0 8px 32px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.2) inset !important;
}

/* ── Cards — deeper 3D glass ── */
body:not(.light-mode) .card,
body:not(.light-mode) .site-card,
body:not(.light-mode) .config-card,
body:not(.light-mode) .item-card,
body:not(.light-mode) .link-card,
body:not(.light-mode) .mp-card,
body:not(.light-mode) .widget {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-top-color: rgba(255,255,255,.26) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.3),
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.15) inset !important;
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05) !important;
}
body:not(.light-mode) .card:hover,
body:not(.light-mode) .site-card:hover,
body:not(.light-mode) .config-card:hover,
body:not(.light-mode) .item-card:hover {
  box-shadow:
    0 16px 50px rgba(0,0,0,.6),
    0 4px 16px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.26) inset !important;
  border-top-color: rgba(255,255,255,.36) !important;
}

/* ── Section headers — readable ── */
body:not(.light-mode) .card-h,
body:not(.light-mode) .section-hdr,
body:not(.light-mode) [class*="-hdr"],
body:not(.light-mode) [class*="-header"] {
  color: rgba(255,255,255,.6) !important;
}

/* ── Input fields — more visible ── */
body:not(.light-mode) input,
body:not(.light-mode) select,
body:not(.light-mode) textarea {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.95) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.08) inset !important;
}
body:not(.light-mode) input:focus,
body:not(.light-mode) select:focus,
body:not(.light-mode) textarea:focus {
  border-color: rgba(74,143,255,.7) !important;
  background: rgba(74,143,255,.1) !important;
  box-shadow: 0 0 0 3px rgba(74,143,255,.2), 0 4px 16px rgba(0,60,200,.2) !important;
}

/* ── Labels — brighter ── */
body:not(.light-mode) label,
body:not(.light-mode) .fg label,
body:not(.light-mode) .pd-label {
  color: rgba(255,255,255,.7) !important;
  font-weight: 600 !important;
}

/* ── Page titles ── */
body:not(.light-mode) .page-title,
body:not(.light-mode) h1, body:not(.light-mode) h2 {
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
body:not(.light-mode) .page-sub {
  color: rgba(255,255,255,.55) !important;
}

/* ── Shift pills glass ── */
body:not(.light-mode) .shift-pill {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-top-color: rgba(255,255,255,.26) !important;
  color: rgba(255,255,255,.8) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.12) inset !important;
}
body:not(.light-mode) .shift-pill:hover {
  background: rgba(255,255,255,.12) !important;
  transform: translateY(-2px) !important;
}

/* ── Topbar ── */
body:not(.light-mode) .topbar,
body:not(.light-mode) .tb {
  background: rgba(5,8,20,.82) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.07) inset !important;
  backdrop-filter: blur(50px) saturate(200%) !important;
}

/* ── Premium Smoked Glass Icons ── */
.qa-ico, .news-ico, .action-ico, .sec-icon, .stat-ico {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(12px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 2px 8px rgba(0,40,120,.08), 0 1px 0 rgba(255,255,255,.9) inset !important;
  border-radius: 14px !important;
}
body.light-mode .qa-ico {
  background: rgba(255,255,255,.6) !important;
  border-color: rgba(0,40,120,.1) !important;
  box-shadow: 0 2px 10px rgba(0,40,120,.08), 0 1px 0 rgba(255,255,255,.95) inset !important;
}
body.light-mode .qa-ico:hover {
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 4px 16px rgba(0,40,120,.12), 0 1px 0 rgba(255,255,255,1) inset !important;
  transform: translateY(-2px) !important;
}
/* Action cards glass */
body.light-mode .action-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 4px 20px rgba(0,40,120,.08), 0 1px 0 rgba(255,255,255,.9) inset !important;
}
body.light-mode .action-card:hover {
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 8px 28px rgba(0,40,120,.12) !important;
}
/* Card glass effect */
body.light-mode .card {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid rgba(0,40,120,.18) !important;
  box-shadow: 0 4px 20px rgba(0,40,120,.06), 0 1px 0 rgba(255,255,255,.9) inset !important;
}
/* Stat cards */
body.light-mode .stat-box, body.light-mode .stats-card {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 2px 12px rgba(0,40,120,.07) !important;
}
/* Nav glass */
body.light-mode .v-nav {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 2px 16px rgba(0,40,120,.06) !important;
}
/* Float nav btn */
body.light-mode .fn-btn {
  background: rgba(255,255,255,.8) !important;
  border: 1px solid rgba(0,40,120,.12) !important;
  box-shadow: 0 4px 16px rgba(0,40,120,.1), 0 1px 0 rgba(255,255,255,.95) inset !important;
}

/* ═══════════════════════════════════════════
   VUTEX — SMOKED GLASS ICON SYSTEM (light)
   ═══════════════════════════════════════════ */
.ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.055);
  border: 1px solid rgba(0,0,0,0.09);
  border-bottom-color: rgba(0,0,0,0.17);
  border-right-color: rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 3px rgba(0,0,0,0.07);
  transition: background 0.12s, box-shadow 0.12s;
}
.ig:hover {
  background: rgba(0,0,0,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 2px 5px rgba(0,0,0,0.10);
}
.ig-xl { width:52px; height:52px; font-size:24px; border-radius:13px; }
.ig-lg { width:42px; height:42px; font-size:20px; border-radius:11px; }
.ig-md { width:34px; height:34px; font-size:16px; border-radius:9px; }
.ig-sm { width:26px; height:26px; font-size:13px; border-radius:7px; }
.ig-blue   { background:rgba(56,116,203,0.09);  border-color:rgba(56,116,203,0.13);  border-bottom-color:rgba(56,116,203,0.24);  border-right-color:rgba(56,116,203,0.17); }
.ig-blue:hover   { background:rgba(56,116,203,0.15); }
.ig-green  { background:rgba(34,139,75,0.09);   border-color:rgba(34,139,75,0.13);   border-bottom-color:rgba(34,139,75,0.24);   border-right-color:rgba(34,139,75,0.17); }
.ig-green:hover  { background:rgba(34,139,75,0.15); }
.ig-amber  { background:rgba(180,110,0,0.09);   border-color:rgba(180,110,0,0.14);   border-bottom-color:rgba(180,110,0,0.25);   border-right-color:rgba(180,110,0,0.18); }
.ig-amber:hover  { background:rgba(180,110,0,0.15); }
.ig-red    { background:rgba(200,50,50,0.08);   border-color:rgba(200,50,50,0.13);   border-bottom-color:rgba(200,50,50,0.24);   border-right-color:rgba(200,50,50,0.17); }
.ig-red:hover    { background:rgba(200,50,50,0.14); }
.ig-purple { background:rgba(110,60,210,0.08);  border-color:rgba(110,60,210,0.13);  border-bottom-color:rgba(110,60,210,0.23);  border-right-color:rgba(110,60,210,0.17); }
.ig-purple:hover { background:rgba(110,60,210,0.14); }

/* ═══════════════════════════════════════════════════════════
   .ig DARK MODE OVERRIDES + MISSING VARIANTS
   ═══════════════════════════════════════════════════════════ */
.ig-circle { border-radius: 50% !important; }
.ig-active, .ig.active {
  background: rgba(0,40,150,0.15) !important;
  border-color: rgba(56,116,203,0.32) !important;
  border-top-color: rgba(74,143,255,0.42) !important;
}
.ig       { color: rgba(10,22,40,0.65); }
.ig-blue  { color: #002878; }
.ig-green { color: #287800; }
.ig-amber { color: #965800; }
.ig-red   { color: #c81800; }
.ig-purple{ color: #6020c8; }

body:not(.light-mode) .ig {
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top-color: rgba(255,255,255,0.20) !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
  border-right-color: rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 8px rgba(0,0,0,0.35) !important;
  color: rgba(255,255,255,0.72) !important;
}
body:not(.light-mode) .ig:hover {
  background: rgba(255,255,255,0.15) !important;
  border-top-color: rgba(255,255,255,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 14px rgba(0,0,0,0.45) !important;
}
body:not(.light-mode) .ig-blue {
  background: rgba(56,116,203,0.22) !important;
  border-top-color: rgba(120,170,255,0.40) !important;
  border-color: rgba(74,143,255,0.28) !important;
  color: #7ab4ff !important;
}
body:not(.light-mode) .ig-blue:hover   { background: rgba(56,116,203,0.32) !important; }
body:not(.light-mode) .ig-green {
  background: rgba(40,150,60,0.20) !important;
  border-top-color: rgba(80,230,110,0.38) !important;
  border-color: rgba(48,209,88,0.26) !important;
  color: #6dda6d !important;
}
body:not(.light-mode) .ig-green:hover  { background: rgba(40,150,60,0.30) !important; }
body:not(.light-mode) .ig-amber {
  background: rgba(180,110,0,0.20) !important;
  border-top-color: rgba(255,210,50,0.38) !important;
  border-color: rgba(255,180,0,0.26) !important;
  color: #ffc055 !important;
}
body:not(.light-mode) .ig-amber:hover  { background: rgba(180,110,0,0.30) !important; }
body:not(.light-mode) .ig-red {
  background: rgba(200,50,50,0.20) !important;
  border-top-color: rgba(255,100,85,0.38) !important;
  border-color: rgba(255,69,58,0.26) !important;
  color: #ff8878 !important;
}
body:not(.light-mode) .ig-red:hover    { background: rgba(200,50,50,0.30) !important; }
body:not(.light-mode) .ig-purple {
  background: rgba(110,60,210,0.20) !important;
  border-top-color: rgba(210,130,255,0.38) !important;
  border-color: rgba(191,90,242,0.26) !important;
  color: #d090ff !important;
}
body:not(.light-mode) .ig-purple:hover { background: rgba(110,60,210,0.30) !important; }
body:not(.light-mode) .ig-active, body:not(.light-mode) .ig.active {
  background: rgba(74,143,255,0.22) !important;
  border-color: rgba(74,143,255,0.40) !important;
  border-top-color: rgba(120,180,255,0.55) !important;
  color: #88bcff !important;
}
body:not(.light-mode) .fn-btn {
  background: rgba(12,18,40,0.84) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-top-color: rgba(255,255,255,0.24) !important;
  color: rgba(255,255,255,0.88) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
body:not(.light-mode) .fn-btn:hover {
  background: rgba(20,30,65,0.90) !important;
  border-top-color: rgba(255,255,255,0.32) !important;
}
body:not(.light-mode) .fn-btn.open {
  background: rgba(180,20,0,0.28) !important;
  border-color: rgba(255,69,58,0.42) !important;
  color: var(--rd) !important;
}

/* ── .ig icon inner sizing fix ── */
.ig i[class*="ti-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-style: normal;
}
.ig-sm  i[class*="ti-"] { font-size: 13px; }
.ig-md  i[class*="ti-"] { font-size: 16px; }
.ig-lg  i[class*="ti-"] { font-size: 20px; }
.ig-xl  i[class*="ti-"] { font-size: 24px; }

/* ── Float nav .ig: always light since nav bg is always dark ── */
#floatNav .ig {
  color: rgba(255,255,255,0.88) !important;
  background: rgba(255,255,255,0.12) !important;
  border-top-color: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.30) !important;
}
#floatNav .ig.ig-blue {
  color: #88b8ff !important;
  background: rgba(74,143,255,0.28) !important;
  border-color: rgba(74,143,255,0.48) !important;
}

/* ── Float nav pills — frosted glass ── */
#floatNav a {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-top-color: rgba(255,255,255,0.32) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.90) !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
}
#floatNav a:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.32) !important;
  transform: translateX(-4px) scale(1.02) !important;
}
#floatNav a[href="/admin"] {
  background: rgba(0,55,190,0.22) !important;
  border-color: rgba(74,143,255,0.38) !important;
  border-top-color: rgba(120,180,255,0.50) !important;
  color: #88b8ff !important;
}
#floatNav a[href="/admin"]:hover {
  background: rgba(0,55,190,0.35) !important;
}
/* FAB button — Vutex blue glass */
#fnBtn {
  background: linear-gradient(135deg, rgba(74,143,255,0.85), rgba(0,40,180,0.92)) !important;
  border: 1px solid rgba(74,143,255,0.50) !important;
  border-top-color: rgba(120,180,255,0.65) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 0 30px rgba(74,143,255,0.35), 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* ── Float nav pills — light frosted glass with dark text ── */
#floatNav a {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(255,255,255,0.90) !important;
  border-top-color: rgba(255,255,255,1.0) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.95) !important;
  color: rgba(10,22,40,0.88) !important;
}
#floatNav a:hover {
  background: rgba(255,255,255,0.88) !important;
  transform: translateX(-4px) scale(1.02) !important;
}
#floatNav a[href="/admin"] {
  background: rgba(210,225,255,0.72) !important;
  border-color: rgba(100,150,255,0.35) !important;
  color: #002878 !important;
}
#floatNav a[href="/admin"]:hover {
  background: rgba(210,225,255,0.90) !important;
}
#floatNav .ig {
  color: rgba(10,22,40,0.70) !important;
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  border-top-color: rgba(255,255,255,0.80) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 3px rgba(0,0,0,0.08) !important;
}
#floatNav .ig.ig-blue {
  color: #002878 !important;
  background: rgba(0,40,120,0.10) !important;
  border-color: rgba(0,40,120,0.15) !important;
}

/* ── Homepage quick access — enhanced frosted glass icons ── */
body.light-mode .qa .ig {
  background: rgba(255,255,255,0.68) !important;
  border: 1px solid rgba(255,255,255,0.90) !important;
  border-top-color: rgba(255,255,255,1.0) !important;
  border-bottom-color: rgba(0,40,120,0.10) !important;
  border-right-color: rgba(0,40,120,0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1.0),
    0 4px 16px rgba(0,40,120,0.10),
    0 1px 4px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(16px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
}
body.light-mode .qa .ig.ig-blue {
  background: rgba(220,232,255,0.72) !important;
  border-color: rgba(0,40,180,0.12) !important;
  border-top-color: rgba(255,255,255,1.0) !important;
  color: #002878 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1.0),
    0 4px 20px rgba(0,40,180,0.12),
    0 1px 4px rgba(0,0,0,0.06) !important;
}
body.light-mode .qa:hover .ig {
  background: rgba(255,255,255,0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1.0),
    0 8px 28px rgba(0,40,180,0.16) !important;
  transform: scale(1.12) rotate(-4deg) !important;
}

/* ── Homepage news feed — frosted glass icons in light mode ── */
body.light-mode .news-ico {
  backdrop-filter: blur(14px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 2px 10px rgba(0,0,0,0.07) !important;
}
body.light-mode .ni-update {
  background: rgba(210,228,255,0.70) !important;
  border-color: rgba(0,40,180,0.18) !important;
  color: #002878 !important;
}
body.light-mode .ni-maintenance {
  background: rgba(255,240,210,0.70) !important;
  border-color: rgba(160,80,0,0.18) !important;
  color: #904800 !important;
}
body.light-mode .ni-outage {
  background: rgba(255,220,218,0.70) !important;
  border-color: rgba(200,24,0,0.18) !important;
  color: #c01800 !important;
}
body.light-mode .ni-security {
  background: rgba(240,220,255,0.70) !important;
  border-color: rgba(100,40,180,0.18) !important;
  color: #5a20b0 !important;
}
body.light-mode .ni-newsystem {
  background: rgba(218,245,220,0.70) !important;
  border-color: rgba(40,120,0,0.18) !important;
  color: #287800 !important;
}

/* ── Admin table action buttons — compact glass, no harsh outlines ── */
body.light-mode .tbl .btn,
body.light-mode .tbl button {
  padding: 6px 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(0,30,100,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 3px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(12px) !important;
  color: rgba(10,22,40,0.70) !important;
}
body.light-mode .tbl .btn:hover,
body.light-mode .tbl button:hover {
  background: rgba(255,255,255,0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1.0), 0 2px 8px rgba(0,0,0,0.10) !important;
  transform: translateY(-1px) !important;
}
body.light-mode .tbl .btn-r,
body.light-mode .tbl button.btn-r {
  background: rgba(220,30,0,0.82) !important;
  border-color: rgba(220,30,0,0.40) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(200,0,0,0.25) !important;
}
body.light-mode .tbl .btn-r:hover,
body.light-mode .tbl button.btn-r:hover {
  background: rgba(200,20,0,0.92) !important;
}

/* ── Admin pane cards — no abrupt background cutoff ── */
body.light-mode .adm-pane {
  background: transparent !important;
}
body.light-mode .adm-main {
  background: transparent !important;
}

/* ── Float nav .ig icons — visible size and color ── */
#floatNav .ig i[class*="ti-"] {
  font-size: 17px !important;
  color: #002878 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
#floatNav .ig {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(0,40,120,0.10) !important;
  border: 1px solid rgba(0,40,120,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 3px rgba(0,0,0,0.07) !important;
}
#floatNav a[href="/admin"] .ig i[class*="ti-"] { color: #002878 !important; }
#floatNav a[href="/admin"] .ig {
  background: rgba(0,40,180,0.14) !important;
  border-color: rgba(0,40,180,0.25) !important;
}

/* ── Vehicle builds page — light mode pill and icon fixes ── */
body.light-mode .pill-red { border-color: rgba(200,32,0,.30); background: rgba(200,32,0,.07); color: rgba(180,24,0,.75); }
body.light-mode .pill-red.on { border-color: #c82000; background: #d42000; color: #fff; }
body.light-mode .pill-white { border-color: rgba(0,40,120,.25); background: rgba(0,40,120,.06); color: rgba(0,40,120,.65); }
body.light-mode .pill-white.on { border-color: #002878; background: #002878; color: #fff; }
body.light-mode .shift-pill { border-color: rgba(0,40,120,.18); background: rgba(0,40,120,.05); color: rgba(0,40,120,.55); }
body.light-mode .shift-pill.red.on { border-color: #c82000 !important; background: #d42000 !important; color: #fff !important; }
body.light-mode .shift-pill.white.on { border-color: #002878 !important; background: #002878 !important; color: #fff !important; }

/* ── Float nav inner elements — let clicks pass through to <a> ── */
#floatNav .ig, #floatNav .ig i, #floatNav span {
  pointer-events: none;
}

/* ================================================================
   DARK MODE PERMANENTLY DISABLED — always light
   ================================================================ */
body, body:not(.light-mode) {
  --bg0: #eef2fc !important; --bg1: #e4eaf8 !important;
  --bg2: #d8e2f4 !important; --bg3: #cdd8f0 !important;
  --g05: rgba(0,30,100,.04) !important;
  --g08: rgba(0,30,100,.07) !important;
  --g12: rgba(0,30,100,.10) !important;
  --g18: rgba(0,30,100,.16) !important;
  --g24: rgba(0,30,100,.22) !important;
  --tx:  #0a1628 !important;
  --t2:  rgba(10,22,40,.78) !important;
  --t3:  rgba(10,22,40,.52) !important;
  --t4:  rgba(10,22,40,.36) !important;
  --t5:  rgba(10,22,40,.18) !important;
  --sh:  0 4px 16px rgba(0,30,100,.1), 0 1px 4px rgba(0,30,100,.07) !important;
  --sh-lg: 0 8px 32px rgba(0,30,100,.15), 0 2px 8px rgba(0,30,100,.1) !important;
  --shine: inset 0 1px 0 rgba(255,255,255,.92) !important;
  background: #eef2fc !important;
  color: #0a1628 !important;
}

/* Force all dark-bg cards/nav to light glass */
body:not(.light-mode) .card,
body:not(.light-mode) .adm-side,


/* Force orbs to light tones */
body:not(.light-mode) .orb1 { background: radial-gradient(circle, rgba(0,56,200,.10) 0%, transparent 70%) !important; }
body:not(.light-mode) .orb2 { background: radial-gradient(circle, rgba(30,110,0,.08) 0%, transparent 70%) !important; }
body:not(.light-mode) .orb3 { background: radial-gradient(circle, rgba(80,30,180,.06) 0%, transparent 65%) !important; }
body:not(.light-mode) .orb4 { background: radial-gradient(circle, rgba(0,100,200,.05) 0%, transparent 65%) !important; }

/* Hide theme toggle button everywhere */
#themeToggle, #floatThemeToggle, .theme-toggle { display: none !important; }

/* ── Sites page — icons inside dark card headers ── */
.site-card .ig {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.25) !important;
  border-top-color: rgba(255,255,255,0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 2px 8px rgba(0,0,0,0.20) !important;
  color: rgba(255,255,255,0.90) !important;
}
.site-card .ig.ig-amber {
  background: rgba(230,160,0,0.28) !important;
  border-color: rgba(255,200,60,0.45) !important;
  color: #ffd060 !important;
}
.site-card .ig.ig-blue {
  background: rgba(74,143,255,0.28) !important;
  border-color: rgba(100,170,255,0.45) !important;
  color: #88c0ff !important;
}
.site-card .ig.ig-green {
  background: rgba(48,209,88,0.22) !important;
  border-color: rgba(80,230,110,0.40) !important;
  color: #7add7a !important;
}
.site-card .ig.ig-purple {
  background: rgba(191,90,242,0.22) !important;
  border-color: rgba(210,130,255,0.40) !important;
  color: #d090ff !important;
}

/* ── Admin ticket queue — light mode fix ── */
body.light-mode .tkt-row {
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(0,30,100,.12) !important;
  border-top-color: rgba(255,255,255,.98) !important;
  box-shadow: 0 2px 12px rgba(0,30,100,.08), 0 1px 0 #fff inset !important;
  color: #1a2540 !important;
}
body.light-mode .tkt-row:hover {
  background: rgba(255,255,255,.98) !important;
  border-color: rgba(0,30,100,.22) !important;
  box-shadow: 0 4px 20px rgba(0,30,100,.12), 0 1px 0 #fff inset !important;
}
body.light-mode .tkt-row .msg-body,
body.light-mode .tkt-row span,
body.light-mode .tkt-row div { color: inherit; }
body.light-mode #qBody { color: #1a2540; }
body.light-mode .adm-main { background: rgba(240,244,252,.6) !important; }
body.light-mode .adm-pane { background: transparent !important; }
body.light-mode #qBody > div { color: #1a2540 !important; }

/* ── Admin console — light mode pane & topbar fixes ── */
body.light-mode .adm-topbar {
  background: rgba(255,255,255,.92) !important;
  border-bottom-color: rgba(0,30,100,.10) !important;
  box-shadow: 0 2px 16px rgba(0,30,100,.08) !important;
  color: #1a2540 !important;
}
body.light-mode .adm-topbar * { color: #1a2540 !important; }
body.light-mode .adm-side {
  background: rgba(255,255,255,.88) !important;
  border-right-color: rgba(0,30,100,.10) !important;
}
body.light-mode .adm-side .side-link { color: rgba(0,30,100,.65) !important; }
body.light-mode .adm-side .side-link:hover { background: rgba(0,30,100,.06) !important; color: #002878 !important; }
body.light-mode .adm-side .side-link.on { background: rgba(0,40,120,.12) !important; color: #002878 !important; }
body.light-mode .adm-side .side-sec { color: rgba(0,30,100,.45) !important; }
body.light-mode .sdiv { background: rgba(0,30,100,.08) !important; }
body.light-mode .page-title { color: #002878 !important; }
body.light-mode .page-sub { color: rgba(0,30,100,.55) !important; }
body.light-mode .widget {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(0,30,100,.10) !important;
  border-top-color: rgba(255,255,255,.98) !important;
  box-shadow: 0 2px 12px rgba(0,30,100,.08) !important;
  color: #1a2540 !important;
}
body.light-mode .card-h { color: #002878 !important; border-bottom-color: rgba(0,30,100,.08) !important; }
body.light-mode .stat-card { background: rgba(255,255,255,.8) !important; border-color: rgba(0,30,100,.10) !important; color: #1a2540 !important; }
body.light-mode .stat-n { color: #002878 !important; }
body.light-mode .stat-l { color: rgba(0,30,100,.55) !important; }
body.light-mode .cat-pill { background: rgba(0,30,100,.06) !important; border-color: rgba(0,30,100,.14) !important; color: rgba(0,30,100,.65) !important; }
body.light-mode .cat-pill.on { background: #002878 !important; color: #fff !important; border-color: #002878 !important; }
body.light-mode input, body.light-mode select {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(0,30,100,.15) !important;
  color: #1a2540 !important;
  color-scheme: light !important;
}
body.light-mode select option {
  background: #ffffff !important;
  color: #1a2540 !important;
}
body.light-mode .tkt-row { color: #1a2540 !important; }
body.light-mode .tag { background: rgba(0,30,100,.08) !important; color: rgba(0,30,100,.7) !important; border-color: rgba(0,30,100,.12) !important; }

/* ── Asset form modal — stronger borders, bigger buttons ── */
#assetForm input,
#assetForm select,
#assetForm textarea {
  border: 1.5px solid rgba(0,40,120,.22) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.95) !important;
  color: #1a2540 !important;
  transition: border-color .15s, box-shadow .15s !important;
}
#assetForm input:focus,
#assetForm select:focus,
#assetForm textarea:focus {
  border-color: #002878 !important;
  box-shadow: 0 0 0 3px rgba(0,40,120,.10) !important;
  background: #fff !important;
}
#assetForm .btn {
  padding: 11px 28px !important;
  font-size: 14px !important;
  border-radius: 44px !important;
  font-weight: 700 !important;
  min-width: 100px !important;
}
#assetForm label {
  color: rgba(0,40,120,.65) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* ── Table headers — refined light mode style ── */
body.light-mode .tbl thead tr,
body.light-mode .tbl th,
body.light-mode table.tbl th {
  background: rgba(0,40,120,.06) !important;
  color: rgba(0,40,120,.6) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  padding: 11px 14px !important;
  border-bottom: 2px solid rgba(0,40,120,.12) !important;
  white-space: nowrap !important;
}
body.light-mode .tbl th:first-child { border-radius: 0 !important; }
body.light-mode .tbl { border-radius: 12px !important; overflow: hidden !important; }
body.light-mode .tbl td {
  padding: 11px 14px !important;
  font-size: 13px !important;
  color: #1a2540 !important;
  border-bottom: 1px solid rgba(0,40,120,.06) !important;
  vertical-align: middle !important;
}
body.light-mode .tbl tr:last-child td { border-bottom: none !important; }
body.light-mode .tbl tr:hover td { background: rgba(0,40,120,.025) !important; }

/* Also fix .pd-table, .vb-table, .dt headers */
body.light-mode .pd-table th,
body.light-mode .vb-table th,
body.light-mode .dt th {
  background: rgba(0,40,120,.06) !important;
  color: rgba(0,40,120,.6) !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  border-bottom: 2px solid rgba(0,40,120,.12) !important;
}

/* ── Dashboard card headers — icon spacing ── */
body.light-mode #pane-dashboard .card .card-h {
  padding: 0 0 12px 0 !important;
  margin-bottom: 16px !important;
}
body.light-mode #pane-dashboard .card {
  padding: 22px 24px !important;
}
body.light-mode #dashStats > div {
  min-height: 90px;
}

/* ── Dashboard widget cards — left padding fix ── */
body.light-mode #pane-dashboard .card {
  padding: 22px 24px 22px 22px !important;
}

/* ── Dashboard card headers — icon + title side by side, not space-between ── */
#pane-dashboard .card .card-h {
  justify-content: flex-start !important;
  gap: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  color: #002878 !important;
  padding: 0 0 14px 0 !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(0,40,120,.08) !important;
}

/* ── Dashboard cards — remove grey header strip ── */
#pane-dashboard .card .card-h {
  border-bottom: none !important;
  background: transparent !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

/* ── Sidebar collapsed state — polished icon-only view ── */
body.light-mode .adm-side.collapsed {
  background: rgba(255,255,255,.92) !important;
  border-right: 1px solid rgba(0,40,120,.08) !important;
  box-shadow: 2px 0 16px rgba(0,40,120,.06) !important;
}
body.light-mode .adm-side.collapsed .side-link {
  width: 40px !important;
  height: 40px !important;
  margin: 2px auto !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.light-mode .adm-side.collapsed .side-link .ico {
  font-size: 18px !important;
  width: auto !important;
  color: rgba(0,40,120,.45) !important;
}
body.light-mode .adm-side.collapsed .side-link:hover .ico {
  color: #002878 !important;
}
body.light-mode .adm-side.collapsed .side-link:hover {
  background: rgba(0,40,120,.08) !important;
  transform: none !important;
}
body.light-mode .adm-side.collapsed .side-link.on {
  background: rgba(0,40,120,.12) !important;
  border-radius: 12px !important;
}
body.light-mode .adm-side.collapsed .side-link.on .ico {
  color: #002878 !important;
}
body.light-mode .adm-side.collapsed .sdiv {
  margin: 6px 12px !important;
  background: rgba(0,40,120,.08) !important;
}
body.light-mode .adm-side.collapsed .stb {
  width: 40px !important;
  height: 40px !important;
  margin: 2px auto !important;
  padding: 0 !important;
  border-radius: 12px !important;
  color: rgba(0,40,120,.4) !important;
}
body.light-mode .adm-side.collapsed .stb:hover {
  background: rgba(0,40,120,.08) !important;
  color: #002878 !important;
}