/* ================================================================
   GREEN ENERGY CMS — WHITE MODERN THEME
   Typography: Outfit (display) + Plus Jakarta Sans (body)
   Palette: Clean white + Forest green + Warm grays
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  --bg:           #f4f6fb;
  --bg2:          #ffffff;
  --bg3:          #eef0f8;
  --bg4:          #e4e8f4;
  --surface:      #ffffff;
  --surface2:     #f8f9fe;
  --surface3:     #eef0f9;
  --border:       #e2e6f0;
  --border2:      #cdd3e8;
  --border3:      #b8c0d8;
  --green:        #16a34a;
  --green2:       #15803d;
  --green3:       #166534;
  --green-light:  #dcfce7;
  --green-mid:    #bbf7d0;
  --green-glow:   rgba(22,163,74,0.14);
  --green-soft:   rgba(22,163,74,0.07);
  --blue:         #2563eb;
  --blue-light:   #dbeafe;
  --orange:       #ea580c;
  --orange-light: #ffedd5;
  --red:          #dc2626;
  --red-light:    #fee2e2;
  --yellow:       #d97706;
  --yellow-light: #fef3c7;
  --purple:       #7c3aed;
  --purple-light: #ede9fe;
  --teal:         #0891b2;
  --teal-light:   #cffafe;
  --text:         #0f172a;
  --text2:        #1e293b;
  --text3:        #475569;
  --text4:        #94a3b8;
  --text5:        #cbd5e1;
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --sidebar-w:    268px;
  --topbar-h:     64px;
  --radius:       14px;
  --radius2:      10px;
  --radius3:      8px;
  --radius-sm:    6px;
  --shadow-xs:    0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:    0 2px 8px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.05);
  --shadow:       0 4px 16px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
  --shadow-md:    0 8px 24px rgba(15,23,42,0.12), 0 3px 8px rgba(15,23,42,0.06);
  --shadow-lg:    0 16px 48px rgba(15,23,42,0.14), 0 4px 16px rgba(15,23,42,0.08);
  --shadow-green: 0 4px 20px rgba(22,163,74,0.22), 0 1px 6px rgba(22,163,74,0.14);
  --t:            all 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.65; min-height:100vh; }
body.loading-screen { overflow:hidden; }
a { color:var(--green); text-decoration:none; transition:var(--t); }
a:hover { color:var(--green2); }
button { cursor:pointer; font-family:var(--font-body); }
input,select,textarea { font-family:var(--font-body); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--border3); }

/* ================================================================ LAYOUT */
.layout { display:flex; min-height:100vh; }

/* ================================================================ SIDEBAR */
.sidebar {
  width:var(--sidebar-w);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:200;
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y:auto; overflow-x:hidden;
  box-shadow:var(--shadow-xs);
}
.sidebar-brand {
  display:flex; align-items:center; gap:12px;
  padding:20px 20px 18px;
  border-bottom:1px solid var(--border);
}
.sidebar-brand-link {
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
  color:inherit;
}
.sidebar-brand-link:hover { color:inherit; }
.brand-icon {
  width:42px; height:42px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
  overflow:hidden;
}
.brand-icon img {
  width:100%; height:100%;
  object-fit:contain;
}
.brand-text { flex:1; min-width:0; }
.brand-name { display:block; font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--text); letter-spacing:-0.2px; }
.brand-sub  { display:block; font-size:0.65rem; color:var(--text4); text-transform:uppercase; letter-spacing:1.2px; margin-top:2px; }
.sidebar-close { display:none; background:none; border:none; color:var(--text4); font-size:14px; padding:6px; border-radius:var(--radius-sm); }
.sidebar-close:hover { background:var(--bg3); color:var(--text3); }

.sidebar-user {
  display:flex; align-items:center; gap:11px;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}
.user-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:0.78rem;
  color:#fff; flex-shrink:0;
  box-shadow:0 2px 8px rgba(37,99,235,0.22);
}
.user-info { flex:1; min-width:0; }
.user-name { display:block; font-size:0.85rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { display:inline-block; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.8px; padding:2px 8px; border-radius:20px; font-weight:700; margin-top:3px; font-family:var(--font-display); }
.user-role.admin  { background:var(--purple-light); color:var(--purple); }
.user-role.viewer { background:var(--blue-light);   color:var(--blue); }

.sidebar-nav { flex:1; padding:14px 12px; display:grid; gap:12px; }
.nav-group {
  margin-bottom:0;
  padding:10px;
  border:1px solid rgba(205,211,232,0.7);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(248,250,254,0.96), rgba(255,255,255,0.88));
  box-shadow:0 10px 28px rgba(15,23,42,0.035);
}
.nav-label {
  display:flex; align-items:center; gap:9px;
  font-size:0.62rem; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text4); padding:4px 8px 10px; font-weight:800; font-family:var(--font-display);
}
.nav-label::before {
  content:'';
  width:22px;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--green), rgba(22,163,74,0));
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; color:var(--text3);
  font-size:0.855rem; font-weight:600;
  border-radius:14px;
  border:1px solid transparent;
  transition:var(--t); margin-bottom:4px;
  position:relative;
  overflow:hidden;
}
.nav-item:last-child { margin-bottom:0; }
.nav-item::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(22,163,74,0.07), rgba(37,99,235,0));
  opacity:0;
  transition:var(--t);
}
.nav-item i,
.nav-item .nav-icon-rs,
.nav-item .icon-hand-rs {
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  text-align:center; font-size:0.85rem; flex-shrink:0;
  opacity:1; transition:var(--t);
  border-radius:11px;
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(238,240,249,0.9));
  border:1px solid rgba(205,211,232,0.9);
  box-shadow:0 6px 14px rgba(15,23,42,0.05);
}
/* Nepali rupee (रु) glyph used in place of the dollar icon for currency contexts */
.nav-icon-rs {
  font-size:0.78rem;
  font-weight:800;
  font-family:var(--font-display), inherit;
  line-height:1;
}
.nav-icon-rs--inline {
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800;
}
/* Hand-holding-rupee composite: fa-hand-holding base + रु badge (replaces fa-hand-holding-dollar) */
.icon-hand-rs {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-hand-rs .icon-hand-rs-badge {
  position:absolute;
  top:-0.55em;
  left:50%;
  transform:translateX(-50%);
  font-size:0.55em;
  font-weight:800;
  font-family:var(--font-display), inherit;
  line-height:1;
}
.nav-item:hover {
  color:var(--text);
  background:rgba(255,255,255,0.96);
  border-color:rgba(22,163,74,0.12);
  transform:translateX(2px);
  box-shadow:0 10px 18px rgba(15,23,42,0.05);
}
.nav-item:hover::after { opacity:1; }
.nav-item:hover i {
  color:var(--green2);
  border-color:rgba(22,163,74,0.2);
  transform:translateY(-1px);
}
.nav-item.active {
  color:#0f5132;
  background:linear-gradient(135deg, rgba(22,163,74,0.13), rgba(34,197,94,0.06) 52%, rgba(255,255,255,0.95) 100%);
  border-color:rgba(22,163,74,0.18);
  font-weight:700;
  box-shadow:0 12px 24px rgba(22,163,74,0.08);
}
.nav-item.active::after { opacity:1; }
.nav-item.active i {
  color:var(--green);
  background:linear-gradient(135deg, rgba(22,163,74,0.18), rgba(187,247,208,0.95));
  border-color:rgba(22,163,74,0.2);
  box-shadow:0 8px 18px rgba(22,163,74,0.14);
}
.nav-item.active::before {
  content:''; position:absolute;
  left:8px; top:10px; bottom:10px;
  width:4px; background:linear-gradient(180deg, var(--green), #22c55e);
  border-radius:999px;
}
.nav-item.active span,
.nav-item.active strong {
  position:relative;
  z-index:1;
}
.nav-logout { color:var(--red) !important; }
.nav-logout:hover {
  background:linear-gradient(135deg, rgba(254,226,226,0.96), rgba(255,255,255,0.96)) !important;
  border-color:#fecaca !important;
}
.nav-logout i {
  opacity:1 !important;
  color:var(--red) !important;
  background:linear-gradient(135deg, rgba(254,226,226,0.95), rgba(255,255,255,0.95));
  border-color:#fecaca !important;
}
.sidebar-footer {
  padding:12px;
  border-top:1px solid var(--border);
  display:grid;
  gap:8px;
  background:linear-gradient(180deg, rgba(248,250,254,0.65), rgba(255,255,255,0.96));
}

/* ── Collapsed sidebar state ───────────────────────────────────── */
.sidebar-collapsed .sidebar { width:68px; }
.sidebar-collapsed .main-wrapper { margin-left:68px; }

.sidebar-collapsed .brand-text,
.sidebar-collapsed .sidebar-user .user-info,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-text { display:none; }

.sidebar-collapsed .sidebar-brand { padding:16px 12px; justify-content:center; gap:0; }
.sidebar-collapsed .sidebar-brand-link { flex:none; }

.sidebar-collapsed .sidebar-user { justify-content:center; padding:12px 8px; }

.sidebar-collapsed .sidebar-nav { padding:14px 8px; }
.sidebar-collapsed .nav-group { padding:6px 4px; }

.sidebar-collapsed .nav-item {
  justify-content:center;
  padding:10px 4px;
  overflow:hidden;
}
.sidebar-collapsed .nav-item.active::before { display:none; }

.sidebar-collapsed .sidebar-footer { padding:8px 4px; }

/* ================================================================ MAIN */
.main-wrapper { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; }

/* ================================================================ TOPBAR */
.topbar {
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 28px; gap:16px;
  position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-xs);
}
.menu-toggle { display:flex; align-items:center; background:none; border:1px solid var(--border); color:var(--text3); padding:7px 10px; border-radius:var(--radius-sm); font-size:14px; transition:var(--t); }
.menu-toggle:hover { background:var(--bg3); border-color:var(--border2); color:var(--text); }
.topbar-title-wrap { flex:1; min-width:0; display:flex; align-items:center; }
.topbar-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--text); }
.topbar-live {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}
.topbar-live-date {
  font-size:0.72rem;
  color:var(--text3);
  font-weight:600;
  line-height:1;
  letter-spacing:0.01em;
}
.topbar-live-time {
  line-height:1;
}

/* ── Odometer clock ──────────────────────────────────────────────── */
.odometer-clock {
  display: flex;
  align-items: center;
  gap: 3px;
}
.od-group {
  display: flex;
  gap: 2px;
  background: #0f1219;
  border-radius: 7px;
  padding: 3px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.od-slot {
  position: relative;
  width: 18px;
  height: 26px;
  overflow: hidden;
  border-radius: 4px;
  background: #15191f;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
/* horizontal crease line across the middle */
.od-slot::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.55);
  z-index: 3;
  pointer-events: none;
}
.od-slot span {
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #f0f4ff;
  text-shadow: 0 0 6px rgba(160,200,255,0.5);
  user-select: none;
}
.od-slot .od-cur  { top: 0; }
.od-slot .od-next { top: 26px; }

/* Rolling animation — current exits upward, next enters from below */
@keyframes odRollCur  { to { transform: translateY(-26px); } }
@keyframes odRollNext { to { transform: translateY(-26px); } }

.od-slot.od-rolling .od-cur  {
  animation: odRollCur 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.od-slot.od-rolling .od-next {
  animation: odRollNext 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.od-sep {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--text3);
  line-height: 1;
  padding: 0 1px;
  align-self: center;
}
.od-ampm {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: center;
  margin-left: 2px;
}

/* Version badge hover tooltip */
.topbar-version {
  cursor: default;
  transition: var(--t);
}
.topbar-version:hover {
  background: linear-gradient(135deg, rgba(22,163,74,0.14), rgba(37,99,235,0.1));
  border-color: rgba(22,163,74,0.3);
  box-shadow: 0 6px 20px rgba(22,163,74,0.15);
}
.topbar-actions { display:flex; align-items:center; gap:12px; }
.topbar-version {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(22,163,74,0.16);
  background:linear-gradient(135deg, rgba(22,163,74,0.08), rgba(37,99,235,0.05));
  color:var(--green2);
  font-family:var(--font-display);
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  box-shadow:0 6px 16px rgba(15,23,42,0.05);
  white-space:nowrap;
}
.topbar-notifications {
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; width:42px; height:42px;
  border-radius:50%; background:var(--bg3); color:var(--text3);
  border:1px solid var(--border); transition:var(--t);
}
.topbar-notifications:hover { background:var(--surface2); }
.topbar-notifications i { font-size:16px; }
.notification-count {
  position:absolute; top:6px; right:6px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--red); color:#fff;
  font-size:0.65rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}

.notification-list { display:grid; gap:16px; }
.notification-item { border:1px solid var(--border); border-radius:var(--radius2); padding:18px; background:var(--surface2); transition:var(--t); }
.notification-item.unread { background:linear-gradient(135deg, rgba(22,163,74,0.06), var(--surface2)); border-color:rgba(22,163,74,0.25); }
.notification-item .notification-meta { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.notification-item .notification-meta strong { font-size:0.95rem; color:var(--text); }
.notification-item .notification-meta span { font-size:0.78rem; color:var(--text4); }
.notification-item p { color:var(--text3); margin:0 0 10px; }
.notification-item a { color:var(--green); font-weight:600; }

/* ================================================================ PAGE */
/* min-width:0 prevents a wide table inside from stretching .main-wrapper beyond the viewport,
   which would push .site-signature (a flex sibling) off-screen to the right. */
.page-content { padding:26px 28px; flex:1; min-width:0; overflow-x:hidden; }
.site-signature {
  padding: 6px 28px 24px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.site-signature-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(22,163,74,0.12);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(240,253,244,0.88) 54%, rgba(239,246,255,0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 16px 32px rgba(15,23,42,0.06);
  overflow: hidden;
}
.site-signature-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 50%, rgba(22,163,74,0.14), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(37,99,235,0.12), transparent 30%);
  pointer-events:none;
}
.site-signature-blade {
  position:absolute;
  top:-55%;
  bottom:-55%;
  left:-38%;
  width:34%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 18%, rgba(255,255,255,0.9) 48%, rgba(187,247,208,0.5) 68%, rgba(255,255,255,0) 100%);
  transform:rotate(18deg);
  filter:blur(1px);
  opacity:0.9;
  animation:siteBladeShine 4.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events:none;
}
.site-signature-kicker {
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(21,128,61,0.08);
  color:#166534;
  font-size:0.67rem;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.site-signature-text {
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  font-size:0.77rem;
  font-weight:700;
  color:var(--text2);
  line-height:1.7;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.site-signature-text span { min-width:0; }
.site-signature-sep {
  color:rgba(22,163,74,0.6);
  font-weight:900;
}
.page-theme {
  padding:22px;
  border:1px solid transparent;
  border-radius:22px;
}
.page-theme-revenue {
  background:linear-gradient(180deg, rgba(220,252,231,0.9) 0%, rgba(240,253,244,0.75) 45%, rgba(255,255,255,0.92) 100%);
  border-color:rgba(34,197,94,0.18);
}
.page-theme-expenses {
  background:linear-gradient(180deg, rgba(254,226,226,0.92) 0%, rgba(254,242,242,0.78) 45%, rgba(255,255,255,0.92) 100%);
  border-color:rgba(239,68,68,0.18);
}
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:14px; }
.page-header-left h1 { font-family:var(--font-display); font-size:1.55rem; font-weight:800; color:var(--text); letter-spacing:-0.4px; line-height:1.2; }
.page-header-left p { color:var(--text3); font-size:0.875rem; margin-top:5px; }
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--text4); margin-bottom:5px; }
.breadcrumb a { color:var(--text4); }
.breadcrumb a:hover { color:var(--green); }

/* ================================================================ STATS */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:26px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px 22px 20px;
  position:relative; overflow:hidden;
  transition:var(--t); box-shadow:var(--shadow-xs);
}
.stat-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); border-color:var(--border2); }
.stat-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius) var(--radius) 0 0; }
.stat-card.green::after  { background:linear-gradient(90deg,var(--green),#22c55e); }
.stat-card.blue::after   { background:linear-gradient(90deg,var(--blue),#60a5fa); }
.stat-card.orange::after { background:linear-gradient(90deg,var(--orange),#fb923c); }
.stat-card.purple::after { background:linear-gradient(90deg,var(--purple),#a78bfa); }
.stat-card.yellow::after { background:linear-gradient(90deg,var(--yellow),#fbbf24); }
.stat-card.red::after    { background:linear-gradient(90deg,var(--red),#f87171); }
.stat-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:16px; }
.stat-card.green  .stat-icon { background:var(--green-light);  color:var(--green3); }
.stat-card.blue   .stat-icon { background:var(--blue-light);   color:var(--blue); }
.stat-card.orange .stat-icon { background:var(--orange-light); color:var(--orange); }
.stat-card.purple .stat-icon { background:var(--purple-light); color:var(--purple); }
.stat-card.yellow .stat-icon { background:var(--yellow-light); color:var(--yellow); }
.stat-card.red    .stat-icon { background:var(--red-light);    color:var(--red); }
.stat-value { font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--text); line-height:1; margin-bottom:5px; letter-spacing:-0.5px; }
.stat-label { font-size:0.74rem; color:var(--text3); text-transform:uppercase; letter-spacing:0.7px; font-weight:700; font-family:var(--font-display); }
.stat-change { font-size:0.78rem; margin-top:10px; display:flex; align-items:center; gap:4px; }
.stat-change.up   { color:var(--green); }
.stat-change.down { color:var(--red); }

/* ================================================================ CARDS */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-xs); overflow:hidden; transition:var(--t); }
.card:hover { box-shadow:var(--shadow-sm); }
.card-header { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); }
.card-title { font-family:var(--font-display); font-size:0.95rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:9px; }
.card-title i { color:var(--green); font-size:0.88rem; }
.card-body { padding:22px; }

/* ================================================================ TABLES */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
table { width:100%; border-collapse:collapse; font-size:0.875rem; }
thead th {
  background:var(--surface2); padding:12px 18px;
  text-align:left; font-size:0.69rem; text-transform:uppercase;
  letter-spacing:1px; color:var(--text3); font-weight:700;
  border-bottom:1px solid var(--border); white-space:nowrap;
  font-family:var(--font-display);
}
tbody tr { border-bottom:1px solid var(--border); transition:background 0.12s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--surface2); }
tbody td { padding:13px 18px; color:var(--text3); vertical-align:middle; }
tbody td strong { color:var(--text); font-weight:600; }

/* ================================================================ BADGES */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px;
  font-size:0.67rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.4px;
  font-family:var(--font-display);
}
.badge i { font-size:0.58rem; }
.badge-green  { background:var(--green-light);   color:var(--green3); }
.badge-red    { background:var(--red-light);     color:var(--red); }
.badge-yellow { background:var(--yellow-light);  color:var(--yellow); }
.badge-blue   { background:var(--blue-light);    color:var(--blue); }
.badge-purple { background:var(--purple-light);  color:var(--purple); }
.badge-orange { background:var(--orange-light);  color:var(--orange); }
.badge-teal   { background:var(--teal-light);    color:var(--teal); }
.badge-gray   { background:var(--bg3); color:var(--text3); border:1px solid var(--border); }

/* ================================================================ BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--radius3);
  font-size:0.85rem; font-weight:600;
  border:1px solid transparent;
  transition:var(--t); cursor:pointer;
  line-height:1; font-family:var(--font-display);
  letter-spacing:0.1px; white-space:nowrap;
}
.btn i { font-size:0.8rem; }
.btn-sm    { padding:7px 14px; font-size:0.79rem; }
.btn-xs    { padding:5px 10px; font-size:0.71rem; }
.btn-lg    { padding:12px 26px; font-size:0.95rem; }
.btn-block { width:100%; justify-content:center; }

.btn-primary { background:var(--green); color:#fff; border-color:var(--green); box-shadow:0 1px 3px rgba(22,163,74,0.28); }
.btn-primary:hover { background:var(--green2); border-color:var(--green2); box-shadow:var(--shadow-green); color:#fff; transform:translateY(-1px); }
.btn-secondary { background:var(--surface); color:var(--text2); border-color:var(--border); box-shadow:var(--shadow-xs); }
.btn-secondary:hover { background:var(--bg3); border-color:var(--border2); color:var(--text); }
.btn-danger  { background:var(--red-light);    color:var(--red);    border-color:#fca5a5; }
.btn-danger:hover  { background:#fecaca; border-color:#f87171; }
.btn-info    { background:var(--blue-light);   color:var(--blue);   border-color:#93c5fd; }
.btn-info:hover    { background:#bfdbfe; border-color:#60a5fa; }
.btn-warning { background:var(--orange-light); color:var(--orange); border-color:#fdba74; }
.btn-warning:hover { background:#fed7aa; border-color:#fb923c; }
.btn-purple  { background:var(--purple-light); color:var(--purple); border-color:#c4b5fd; }
.btn-purple:hover  { background:#ddd6fe; }

/* ================================================================ FORMS */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1/-1; }
label { font-size:0.8rem; font-weight:600; color:var(--text2); letter-spacing:0.1px; font-family:var(--font-display); }
label .req { color:var(--red); margin-left:3px; }

input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="date"],input[type="month"],
input[type="tel"],select,textarea {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius3); color:var(--text);
  padding:9px 13px; font-size:0.875rem; width:100%;
  transition:var(--t); outline:none; font-family:var(--font-body);
  box-shadow:var(--shadow-xs);
}
input:hover,select:hover,textarea:hover { border-color:var(--border2); }
input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-glow); }
input::placeholder,textarea::placeholder { color:var(--text4); }
select { cursor:pointer; }
textarea { resize:vertical; min-height:90px; }
input[type="checkbox"] { width:16px !important; height:16px; cursor:pointer; accent-color:var(--green); }
.bs-date-input.has-bs-datepicker {
  cursor:pointer;
  background-image:linear-gradient(transparent,transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
  padding-right:40px;
}

.bs-datepicker {
  display:none;
  position:absolute;
  z-index:650;
  width:min(304px, calc(100vw - 24px));
  background:rgba(255,255,255,0.98);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(10px);
  padding:14px;
}
.bs-datepicker.open { display:block; }
.bs-datepicker-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.bs-datepicker-title {
  flex:1;
  text-align:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.92rem;
  color:var(--text);
}
.bs-datepicker-nav {
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text3);
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--t);
}
.bs-datepicker-nav:hover {
  border-color:rgba(22,163,74,0.22);
  background:var(--green-soft);
  color:var(--green2);
}
.bs-datepicker-weekdays,
.bs-datepicker-grid {
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
}
.bs-datepicker-weekdays {
  margin-bottom:8px;
}
.bs-datepicker-weekdays span {
  text-align:center;
  font-size:0.72rem;
  font-weight:700;
  color:var(--text4);
  text-transform:uppercase;
  padding:4px 0;
}
.bs-datepicker-empty {
  display:block;
  min-height:36px;
}
.bs-datepicker-day {
  min-height:36px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text2);
  font-size:0.85rem;
  font-weight:600;
  transition:var(--t);
}
.bs-datepicker-day:hover {
  background:var(--surface3);
  border-color:var(--border2);
}
.bs-datepicker-day.is-today {
  border-color:rgba(37,99,235,0.18);
  background:var(--blue-light);
  color:var(--blue);
}
.bs-datepicker-day.is-selected {
  background:linear-gradient(135deg,var(--green),#22c55e);
  color:#fff;
  box-shadow:var(--shadow-green);
}

.input-icon { position:relative; }
.input-icon i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text4); font-size:13px; pointer-events:none; }
.input-icon .nav-icon-rs--field { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text4); font-size:13px; font-weight:700; pointer-events:none; }
.input-icon input,.input-icon select { padding-left:38px; }
.form-actions { display:flex; gap:12px; align-items:center; padding-top:10px; flex-wrap:wrap; }

/* ================================================================ ALERTS */
.alert { padding:13px 16px; border-radius:var(--radius3); font-size:0.875rem; display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; border:1px solid transparent; }
.alert i { flex-shrink:0; margin-top:1px; }
.alert-success { background:var(--green-light); border-color:var(--green-mid); color:var(--green3); }
.alert-error   { background:var(--red-light);   border-color:#fca5a5;         color:var(--red); }
.alert-info    { background:var(--blue-light);  border-color:#93c5fd;         color:var(--blue); }
.alert-warning { background:var(--yellow-light);border-color:#fcd34d;         color:var(--yellow); }

/* ================================================================ FLASH TOAST */
.flash-toast {
  position:fixed; top:20px; right:20px; z-index:9999;
  padding:14px 18px; border-radius:var(--radius2);
  display:flex; align-items:center; gap:10px;
  font-size:0.875rem; font-weight:500;
  box-shadow:var(--shadow-md);
  animation:slideInRight 0.3s cubic-bezier(0.34,1.56,0.64,1);
  max-width:380px; border:1px solid transparent;
  background:var(--surface);
}
.flash-success { border-color:var(--green-mid); color:var(--green3); }
.flash-success i { color:var(--green); }
.flash-error   { border-color:#fca5a5; color:var(--red); }
.flash-error i { color:var(--red); }
.flash-info    { border-color:#93c5fd; color:var(--blue); }
.flash-info i  { color:var(--blue); }
.flash-toast button { background:none; border:none; color:var(--text4); margin-left:auto; padding:2px 4px; font-size:11px; border-radius:4px; }
.flash-toast button:hover { background:var(--bg3); color:var(--text3); }
@keyframes slideInRight { from{transform:translateX(110%);opacity:0;} to{transform:translateX(0);opacity:1;} }

/* ================================================================ PAGE LOADER */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 22%, rgba(37, 99, 235, 0.15), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(22, 163, 74, 0.18), transparent 32%),
    linear-gradient(160deg, #f7fbff 0%, #ebf6ef 52%, #f5f7fb 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader-scene {
  position: relative;
  width: min(720px, 100%);
  min-height: 330px;
  border-radius: 34px;
  overflow: hidden;
  padding: 34px 34px 30px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow: 0 28px 90px rgba(15,23,42,0.14);
}
.loader-energy-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(3px);
}
.orb-left {
  width: 180px;
  height: 180px;
  top: -34px;
  left: -38px;
  background: radial-gradient(circle, rgba(34,197,94,0.26) 0%, rgba(34,197,94,0) 72%);
  animation: energyPulse 4.2s ease-in-out infinite;
}
.orb-right {
  width: 200px;
  height: 200px;
  top: -50px;
  right: -40px;
  background: radial-gradient(circle, rgba(37,99,235,0.2) 0%, rgba(37,99,235,0) 72%);
  animation: energyPulse 5.1s ease-in-out infinite reverse;
}
.loader-road {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 84px;
  height: 84px;
  border-radius: 24px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow: inset 0 8px 14px rgba(255,255,255,0.05), inset 0 -8px 16px rgba(0,0,0,0.28);
}
.loader-road::before,
.loader-road::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.loader-road::before { top: 12px; }
.loader-road::after { bottom: 12px; }
.loader-road-lane {
  position: absolute;
  top: 50%;
  width: 82px;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 24%, rgba(255,255,255,0.96) 76%, rgba(255,255,255,0) 100%);
  animation: laneRun 1.15s linear infinite;
}
.lane-one { left: 11%; animation-delay: 0s; }
.lane-two { left: 40%; animation-delay: 0.18s; }
.lane-three { left: 69%; animation-delay: 0.36s; }
.loader-van-track {
  position: absolute;
  left: -180px;
  right: -180px;
  bottom: 92px;
  height: 140px;
  animation: vanDrive 2.8s cubic-bezier(0.4,0.05,0.2,1) infinite;
}
.loader-van {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 172px;
  height: 92px;
}
.loader-van-glow {
  position: absolute;
  left: 30px;
  right: 18px;
  bottom: 6px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,0.34) 0%, rgba(34,197,94,0) 72%);
  filter: blur(4px);
}
.loader-van-body {
  position: absolute;
  inset: 10px 10px 18px;
  border-radius: 24px 26px 18px 18px;
  background: linear-gradient(135deg, #0f766e 0%, #22c55e 45%, #38bdf8 100%);
  box-shadow: 0 16px 22px rgba(15,118,110,0.22);
}
.loader-van-top {
  position: absolute;
  left: 38px;
  top: -16px;
  width: 74px;
  height: 28px;
  border-radius: 18px 24px 8px 8px;
  background: linear-gradient(135deg, #dcfce7, #93c5fd);
  transform: skewX(-10deg);
}
.loader-van-window {
  position: absolute;
  top: 16px;
  height: 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(219,234,254,0.55));
}
.window-front { left: 30px; width: 36px; }
.window-rear { left: 72px; width: 30px; }
.loader-van-door {
  position: absolute;
  top: 14px;
  right: 28px;
  width: 30px;
  height: 34px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.32);
}
.loader-van-stripe {
  position: absolute;
  left: 18px;
  right: 22px;
  bottom: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
}
.loader-van-headlight,
.loader-van-tail {
  position: absolute;
  top: 31px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.loader-van-headlight {
  right: -5px;
  background: #fef08a;
  box-shadow: 0 0 14px rgba(254,240,138,0.92);
}
.loader-van-tail {
  left: -4px;
  background: #fecaca;
  box-shadow: 0 0 12px rgba(248,113,113,0.7);
}
.loader-wheel {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #94a3b8 0 18%, #111827 20% 56%, #475569 58% 100%);
  animation: wheelSpin 0.55s linear infinite;
}
.wheel-front { right: 24px; }
.wheel-back { left: 26px; }
.loader-charge {
  position: absolute;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,222,128,0.95) 0%, rgba(74,222,128,0.12) 72%, rgba(74,222,128,0) 100%);
  animation: sparkFloat 1.45s ease-in-out infinite;
}
.charge-one { right: 22px; }
.charge-two { right: 42px; animation-delay: 0.32s; }
.page-loader-copy {
  position: relative;
  z-index: 2;
  max-width: 420px;
}
.page-loader-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15,118,110,0.1);
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.page-loader-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: #0f172a;
}
.page-loader-subtitle {
  margin-top: 14px;
  max-width: 360px;
  color: #475569;
  font-size: 0.98rem;
}
@keyframes vanDrive {
  0% { transform: translateX(0) translateY(0); }
  8% { transform: translateX(80px) translateY(-2px); }
  48% { transform: translateX(calc(100% - 170px)) translateY(0); }
  56% { transform: translateX(calc(100% - 130px)) translateY(1px); }
  100% { transform: translateX(calc(100% + 80px)) translateY(0); }
}
@keyframes laneRun {
  0% { transform: translateX(-20px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(140px); opacity: 0; }
}
@keyframes wheelSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes sparkFloat {
  0%, 100% { transform: translateY(0) scale(0.85); opacity: 0.35; }
  50% { transform: translateY(-14px) scale(1.1); opacity: 1; }
}
@keyframes energyPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.55; }
  50% { transform: scale(1.08); opacity: 0.95; }
}

/* ================================================================ OVERLAY */
.overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.32); z-index:150; backdrop-filter:blur(4px); }
.overlay.active { display:block; }

/* ================================================================ LOGIN */
.login-page {
  min-height:100vh; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(360px, 420px);
  align-items:center; gap:34px;
  background:
    radial-gradient(circle at 18% 18%, rgba(22,163,74,0.14), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(37,99,235,0.12), transparent 30%),
    linear-gradient(160deg, #f5faf7 0%, #eef5fb 48%, #f7f9fd 100%);
  padding:28px; position:relative;
  background-image:
    radial-gradient(ellipse 60% 50% at 60% -5%, rgba(22,163,74,0.09), transparent),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(37,99,235,0.05), transparent);
}
.login-page > .login-footer {
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  position:relative;
  z-index:1;
  margin-top:-8px;
}
.login-page::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:40px 40px; opacity:0.45; pointer-events:none;
}
.login-hero {
  position:relative;
  z-index:1;
  display:grid;
  gap:24px;
  align-self:stretch;
}
.login-hero-copy {
  max-width:680px;
  padding-top:14px;
}
.login-hero-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,118,110,0.08);
  color:#0f766e;
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.login-hero-copy h2 {
  margin-top:18px;
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 4.8vw, 4.7rem);
  line-height:0.95;
  letter-spacing:-0.05em;
  color:#0f172a;
  max-width:760px;
}
.login-hero-copy p {
  margin-top:18px;
  max-width:560px;
  font-size:1rem;
  line-height:1.8;
  color:var(--text3);
}
.login-moodboard {
  position:relative;
  min-height:420px;
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.8);
  background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(247,250,252,0.92));
  box-shadow:0 24px 60px rgba(15,23,42,0.08);
}
.login-energy-grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.15));
}
.login-energy-orb {
  position:absolute;
  border-radius:50%;
  filter:blur(4px);
  animation:loginOrbFloat 8s ease-in-out infinite;
}
.orb-a {
  width:220px;
  height:220px;
  top:-60px;
  right:-30px;
  background:radial-gradient(circle, rgba(34,197,94,0.28) 0%, rgba(34,197,94,0) 72%);
}
.orb-b {
  width:180px;
  height:180px;
  left:-30px;
  bottom:58px;
  background:radial-gradient(circle, rgba(37,99,235,0.24) 0%, rgba(37,99,235,0) 72%);
  animation-delay:1.2s;
}
.login-route-stage {
  position:absolute;
  left:26px;
  right:26px;
  bottom:26px;
  height:170px;
}
.login-route-road {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:82px;
  border-radius:24px;
  background:linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow:inset 0 8px 14px rgba(255,255,255,0.06), inset 0 -8px 14px rgba(0,0,0,0.24);
}
.login-route-road::before {
  content:'';
  position:absolute;
  left:22px;
  right:22px;
  top:50%;
  height:6px;
  margin-top:-3px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
}
.login-route-lane {
  position:absolute;
  bottom:38px;
  width:72px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.96), rgba(255,255,255,0));
  animation:loginLaneRun 1.4s linear infinite;
}
.lane-a { left:12%; }
.lane-b { left:40%; animation-delay:0.22s; }
.lane-c { left:68%; animation-delay:0.44s; }
.login-route-vehicle {
  position:absolute;
  bottom:36px;
  width:170px;
  height:96px;
  animation:loginVehicleDrive 9s cubic-bezier(0.42,0.08,0.2,0.98) infinite;
}
.route-vehicle-glow {
  position:absolute;
  left:28px;
  right:20px;
  bottom:5px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,197,94,0.34) 0%, rgba(34,197,94,0) 72%);
  filter:blur(5px);
}
.route-vehicle-body {
  position:absolute;
  inset:10px 12px 16px;
  border-radius:24px 28px 18px 18px;
  background:linear-gradient(135deg, #0f766e 0%, #22c55e 48%, #38bdf8 100%);
  box-shadow:0 14px 24px rgba(15,118,110,0.24);
}
.route-vehicle-top {
  position:absolute;
  left:38px;
  top:-16px;
  width:76px;
  height:28px;
  border-radius:18px 22px 10px 10px;
  transform:skewX(-10deg);
  background:linear-gradient(135deg, #ecfeff, #bfdbfe);
}
.route-vehicle-window {
  position:absolute;
  top:16px;
  height:18px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(255,255,255,0.92), rgba(219,234,254,0.5));
}
.route-vehicle-window.front { left:30px; width:36px; }
.route-vehicle-window.rear { left:72px; width:30px; }
.route-vehicle-stripe {
  position:absolute;
  left:18px;
  right:20px;
  bottom:11px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,0.9);
}
.route-wheel {
  position:absolute;
  bottom:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #94a3b8 0 18%, #111827 20% 56%, #475569 58% 100%);
  animation:wheelSpin 0.55s linear infinite;
}
.route-wheel.front { right:22px; }
.route-wheel.rear { left:24px; }
.login-quote-card {
  position:absolute;
  left:26px;
  right:26px;
  top:26px;
  max-width:360px;
  max-height:190px;
  padding:18px 22px 16px;
  border-radius:24px;
  background:rgba(255,255,255,0.84);
  border:1px solid rgba(255,255,255,0.92);
  box-shadow:0 18px 36px rgba(15,23,42,0.08);
  backdrop-filter:blur(10px);
  overflow:hidden;
  z-index:2;
}
.login-quote-mark {
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(22,163,74,0.1);
  color:var(--green2);
}
.login-quote-text {
  margin-top:12px;
  font-family:var(--font-display);
  font-size:1.05rem;
  line-height:1.4;
  font-weight:700;
  color:var(--text);
  min-height:0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:opacity 0.35s ease, transform 0.35s ease;
}
.login-quote-meta {
  margin-top:12px;
  font-size:0.84rem;
  letter-spacing:0.03em;
  color:var(--text3);
  transition:opacity 0.35s ease, transform 0.35s ease;
}
.login-quote-card.is-changing .login-quote-text,
.login-quote-card.is-changing .login-quote-meta {
  opacity:0;
  transform:translateY(6px);
}
.login-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:44px 40px;
  width:100%; max-width:420px;
  box-shadow:var(--shadow-lg); position:relative; z-index:1;
}
.login-logo { text-align:center; margin-bottom:36px; }
.login-logo .logo-icon {
  width:64px; height:64px;
  border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:28px; margin:0 auto 16px;
  overflow:hidden;
}
.login-logo .logo-icon img {
  width:70%; height:70%;
  object-fit:contain;
}
.login-logo h1 { font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--text); letter-spacing:-0.3px; }
.login-logo p  { color:var(--text3); font-size:0.875rem; margin-top:5px; }
.login-box .form-group { margin-bottom:16px; }
.login-hint { margin-top:20px; padding-top:18px; border-top:1px solid var(--border); text-align:center; font-size:0.78rem; color:var(--text4); }
.login-hint code { background:var(--bg3); padding:2px 7px; border-radius:5px; font-size:0.75rem; color:var(--text3); border:1px solid var(--border); }
.login-copyright {
  position:relative;
  margin-top:26px;
  padding:18px 18px 16px;
  border-radius:18px;
  border:1px solid rgba(22,163,74,0.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(240,253,244,0.88) 54%, rgba(239,246,255,0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 16px 28px rgba(15,23,42,0.06);
  overflow:hidden;
}
.login-box > .login-copyright {
  display:none;
}
.login-footer .login-copyright {
  width:min(100%, 760px);
  margin-top:0;
}
.login-copyright::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 50%, rgba(22,163,74,0.14), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(37,99,235,0.12), transparent 30%);
  pointer-events:none;
}
.login-copyright-blade {
  position:absolute;
  top:-55%;
  bottom:-55%;
  left:-38%;
  width:34%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 18%, rgba(255,255,255,0.9) 48%, rgba(187,247,208,0.5) 68%, rgba(255,255,255,0) 100%);
  transform:rotate(18deg);
  filter:blur(1px);
  opacity:0.9;
  animation:loginBladeShine 4.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events:none;
}
.login-copyright-kicker {
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(21,128,61,0.08);
  color:#166534;
  font-size:0.67rem;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.login-copyright-text {
  position:relative;
  z-index:1;
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:0.77rem;
  font-weight:700;
  color:var(--text2);
  line-height:1.7;
}
.login-copyright-sep {
  color:rgba(22,163,74,0.6);
  font-weight:900;
}
@keyframes loginVehicleDrive {
  0% { left:-190px; transform:translateY(0) scaleX(-1); opacity:0; }
  4% { opacity:1; }
  10% { left:-10px; transform:translateY(-2px) scaleX(-1); opacity:1; }
  90% { left:100%; transform:translateY(0) scaleX(-1); opacity:1; }
  96% { opacity:0; }
  100% { left:-190px; transform:translateY(0) scaleX(-1); opacity:0; }
}
@keyframes loginLaneRun {
  0% { transform:translateX(140px); opacity:0; }
  20% { opacity:1; }
  100% { transform:translateX(-20px); opacity:0; }
}
@keyframes loginOrbFloat {
  0%, 100% { transform:translateY(0) scale(0.96); opacity:0.72; }
  50% { transform:translateY(10px) scale(1.06); opacity:1; }
}
@keyframes loginBladeShine {
  0% { left:-42%; opacity:0; }
  10% { opacity:0.95; }
  48% { opacity:0.95; }
  70% { opacity:0.25; }
  100% { left:115%; opacity:0; }
}
@keyframes siteBladeShine {
  0% { left:-42%; opacity:0; }
  10% { opacity:0.95; }
  48% { opacity:0.95; }
  70% { opacity:0.25; }
  100% { left:115%; opacity:0; }
}

/* ================================================================ VEHICLE CARDS */
.vehicle-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin-bottom:24px; }
.vehicle-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px;
  transition:var(--t); position:relative; overflow:hidden;
  box-shadow:var(--shadow-xs);
}
.vehicle-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); border-color:var(--border2); }
.vehicle-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green),#22c55e); }
.vehicle-card::after  { content:''; position:absolute; right:-14px; bottom:-14px; width:80px; height:80px; background:var(--green-soft); border-radius:50%; }
.vehicle-card-icon {
  font-size:1.5rem; margin-bottom:14px; color:var(--green);
  display:inline-flex; width:50px; height:50px;
  background:var(--green-light); border-radius:14px;
  align-items:center; justify-content:center; position:relative; z-index:1;
}
.vehicle-card-name { font-family:var(--font-display); font-size:1.05rem; font-weight:800; color:var(--text); margin-bottom:3px; }
.vehicle-card-route { color:var(--text3); font-size:0.82rem; margin-bottom:16px; display:flex; align-items:center; gap:6px; }
.vehicle-card-route i { color:var(--green); font-size:0.72rem; }
.vehicle-location-meta {
  display:flex; flex-wrap:wrap; gap:10px 16px;
  font-size:0.76rem; color:var(--text3); margin:-6px 0 14px;
}
.vehicle-location-meta span { display:inline-flex; align-items:center; gap:6px; }
.vehicle-location-meta i { color:var(--green); }
.vehicle-card-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.vc-stat { background:var(--bg3); border-radius:var(--radius-sm); padding:10px 12px; border:1px solid var(--border); }
.vc-stat-label { font-size:0.64rem; text-transform:uppercase; letter-spacing:0.6px; color:var(--text4); font-weight:700; font-family:var(--font-display); }
.vc-stat-value { font-family:var(--font-display); font-weight:700; font-size:0.88rem; color:var(--text); margin-top:3px; }

/* ================================================================ GPS MAP */
.location-map-card { margin-bottom:24px; }
.location-map-subtitle { color:var(--text3); font-size:0.8rem; margin-top:4px; }
.vehicle-live-map {
  width:100%; height:420px; border-radius:var(--radius2);
  border:1px solid var(--border); overflow:hidden;
  background:linear-gradient(135deg, #eef7f1, #e5eefb);
}
.tracker-device-summary { margin-top:16px; }
.tracker-device-note {
  border:1px dashed var(--border2); border-radius:var(--radius2);
  padding:12px 14px; color:var(--text3); background:var(--surface2);
  font-size:0.84rem;
}
.tracker-device-header {
  font-family:var(--font-display); font-size:0.84rem; font-weight:700;
  color:var(--text2); margin-bottom:10px;
}
.tracker-device-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;
}
.tracker-device-pill {
  border:1px solid var(--border); border-radius:var(--radius2);
  background:var(--surface2); padding:12px 14px; display:flex; flex-direction:column; gap:4px;
}
.tracker-device-pill strong { color:var(--text); font-size:0.8rem; }
.tracker-device-pill span { color:var(--text3); font-size:0.78rem; line-height:1.45; }

/* ================================================================ PROFIT ROWS */
.profit-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); font-size:0.875rem; }
.profit-row:last-child { border-bottom:none; }
.profit-row .label { color:var(--text3); }
.profit-row .value { font-weight:600; color:var(--text); }
.profit-row.total .label { font-weight:700; color:var(--text); }
.profit-row.total .value { font-size:1.05rem; color:var(--green); font-family:var(--font-display); font-weight:800; }

/* ================================================================ PAGINATION */
.pagination { display:flex; align-items:center; gap:4px; padding:16px 20px; border-top:1px solid var(--border); }
.pagination a,.pagination span { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-sm); font-size:0.85rem; color:var(--text3); border:1px solid var(--border); background:var(--surface); transition:var(--t); font-family:var(--font-display); font-weight:600; }
.pagination a:hover { border-color:var(--green); color:var(--green); background:var(--green-soft); }
.pagination .active { background:var(--green); color:#fff; border-color:var(--green); }
.pagination .disabled { opacity:0.4; pointer-events:none; }

/* ================================================================ MODAL */
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.38); z-index:500; backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:18px; width:100%; max-width:520px; box-shadow:var(--shadow-lg); animation:modalIn 0.22s cubic-bezier(0.34,1.4,0.64,1); }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text); display:flex; align-items:center; gap:9px; }
.modal-title i { color:var(--green); }
.modal-close { background:var(--bg3); border:1px solid var(--border); color:var(--text3); font-size:13px; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:var(--t); }
.modal-close:hover { background:var(--red-light); border-color:#fca5a5; color:var(--red); }
.modal-body { padding:22px 24px; }
.modal-footer { padding:18px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }
@keyframes modalIn { from{opacity:0;transform:scale(0.94) translateY(8px);} to{opacity:1;transform:scale(1) translateY(0);} }

/* ================================================================ TABLE SEARCH */
.table-filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.table-filters input,.table-filters select { max-width:200px; }

/* ================================================================ EMPTY STATE */
.empty-state { text-align:center; padding:56px 20px; color:var(--text4); }
.empty-state i { font-size:2.2rem; margin-bottom:16px; opacity:0.2; display:block; color:var(--text3); }
.empty-state .nav-icon-rs { font-size:2.2rem; margin-bottom:16px; opacity:0.2; display:block; color:var(--text3); font-weight:800; background:none; border:none; box-shadow:none; width:auto; height:auto; }
.empty-state .icon-hand-rs { font-size:2.2rem; margin-bottom:16px; opacity:0.2; color:var(--text3); }
.empty-state h3 { font-family:var(--font-display); color:var(--text3); margin-bottom:7px; font-size:1rem; }
.empty-state p  { font-size:0.875rem; }

/* ================================================================ MISC */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mb-20 { margin-bottom:20px; }
.mb-16 { margin-bottom:16px; }
.mt-16 { margin-top:16px; }
.mt-20 { margin-top:20px; }
.flex  { display:flex; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
code { background:var(--bg3); padding:2px 7px; border-radius:5px; font-size:0.8rem; color:var(--text3); border:1px solid var(--border); font-family:monospace; }

/* ================================================================ PRINT */
@media print {
  .sidebar,.topbar,.btn,.flash-toast { display:none !important; }
  .main-wrapper { margin-left:0 !important; }
  .card { box-shadow:none !important; border:1px solid #ddd !important; }
  body { background:#fff !important; color:#000 !important; }
}

/* ================================================================ RESPONSIVE */
@media (max-width:1024px) {
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .login-page { grid-template-columns:1fr; gap:18px; padding:18px; }
  .login-page > .login-footer { margin-top:0; }
  .login-hero-copy { padding-top:0; }
  .login-hero-copy h2 { font-size:2.35rem; max-width:100%; }
  .login-hero-copy p { max-width:100%; font-size:0.94rem; }
  .login-moodboard { min-height:340px; }
  .login-quote-card { position:relative; left:auto; top:auto; margin:18px; max-width:none; }
  .login-route-stage { left:18px; right:18px; bottom:18px; height:146px; }
  .page-loader-scene { min-height: 360px; padding: 28px 22px 24px; }
  .page-loader-copy { max-width: 100%; }
  .loader-road { left: 18px; right: 18px; bottom: 78px; }
  .loader-van-track { bottom: 86px; }
  html, body { overflow-x: hidden; }
  .layout { width: 100%; }
  .sidebar { transform:translateX(-100%); box-shadow:none; }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .sidebar-close { display:flex; }
  .sidebar-collapsed .sidebar { width:var(--sidebar-w); }
  .sidebar-collapsed .main-wrapper { margin-left:0; }
  .main-wrapper { margin-left:0; }
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 6px;
  }
  /* Row 1: hamburger | clock (flex:1 centered) | actions */
  .menu-toggle { order: 0; flex-shrink: 0; align-self: center; }
  .topbar-live {
    order: 1;
    flex: 1;
    position: static;
    transform: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: auto;
  }
  .topbar-actions { order: 2; flex-shrink: 0; margin-left: 0; justify-content: flex-end; align-self: center; }
  /* Scale the odometer clock down so it doesn't dwarf the hamburger icon */
  .od-group { padding: 1px 2px; gap: 1px; border-radius: 4px; }
  .od-slot { width: 9px; height: 13px; border-radius: 2px; }
  .od-slot span { height: 13px; font-size: 0.46rem; }
  .od-slot .od-next { top: 13px; }
  .od-sep { font-size: 0.5rem; padding: 0; }
  .od-ampm { font-size: 0.4rem; margin-left: 1px; }
  @keyframes odRollCur  { to { transform: translateY(-13px); } }
  @keyframes odRollNext { to { transform: translateY(-13px); } }
  /* Row 2: page title full width */
  .topbar-title-wrap { order: 3; width: 100%; justify-content: center; padding: 2px 0 4px; }
  .topbar-title { min-width: 0; font-size: 0.95rem; line-height: 1.3; text-align: center; }
  /* Notice bar: not sticky on mobile — can't compute variable topbar height */
  .notice-bar { position: static; top: auto; }
  .page-content { padding:16px; }
  .page-theme { padding:16px; border-radius:18px; }
  .page-header-left { min-width:0; width:100%; }
  .page-header-left p { max-width:100%; }
  .site-signature { padding: 0 16px 18px; }
  .site-signature-card { padding: 14px 16px; border-radius: 16px; }
  .site-signature-text { gap: 6px; font-size: 0.74rem; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .stat-card { padding:18px 18px 16px; }
  .stat-value { font-size:1.35rem; overflow-wrap:anywhere; }
  .card-header,
  .card-body,
  .modal-header,
  .modal-body,
  .modal-footer { padding-left:16px; padding-right:16px; }
  .card-header { flex-wrap:wrap; align-items:flex-start; }
  .card-title { min-width:0; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .form-actions { flex-direction:column; align-items:stretch; }
  .form-actions .btn { width:100%; justify-content:center; }
  .vehicle-card-stats,
  .tracker-device-grid { grid-template-columns:1fr; }
  .vehicle-live-map { height:320px; }
  .table-filters { flex-direction:column; align-items:stretch; }
  .table-filters input,.table-filters select { max-width:100%; }
  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  .table-wrap table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .table-wrap thead {
    display: none;
  }
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td {
    display: block;
    width: 100%;
  }
  .table-wrap tbody tr {
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
  }
  .table-wrap tbody td {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }
  .table-wrap tbody td:last-child {
    border-bottom: 0;
  }
  .table-wrap tbody td:not(.mobile-full-cell) {
    display: grid;
    grid-template-columns: minmax(92px, 40%) 1fr;
    gap: 10px;
    align-items: start;
  }
  .table-wrap tbody td:not(.mobile-full-cell)::before {
    content: attr(data-label);
    font-size: 0.72rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text4);
    font-weight: 700;
    font-family: var(--font-display);
  }
  .table-wrap tbody td.mobile-full-cell {
    background: var(--surface2);
    font-weight: 600;
  }
  .table-wrap tbody td .btn {
    margin-top: 4px;
    margin-right: 6px;
  }
  .page-header { flex-direction:column; align-items:flex-start; }
  .topbar-live-date { font-size:0.7rem; }
  .topbar-live-time { font-size:0.82rem; }
  .login-box { padding:30px 22px; max-width:none; }
  .vehicle-cards { grid-template-columns:1fr; }
  .pagination { flex-wrap:wrap; justify-content:center; }
  .flash-toast {
    left: 12px;
    right: 12px;
    top: 12px;
    max-width: none;
  }
}
@media (max-width:480px) {
  .login-page { padding:14px; gap:14px; }
  .login-footer .login-copyright { width:100%; }
  .login-hero-copy h2 { font-size:1.95rem; line-height:1; }
  .login-hero-copy p { font-size:0.88rem; line-height:1.7; }
  .login-moodboard { min-height:300px; border-radius:24px; }
  .login-quote-card { margin:14px; padding:16px; border-radius:18px; }
  .login-quote-text { min-height:0; font-size:1rem; }
  .login-route-stage { left:14px; right:14px; bottom:14px; }
  .login-route-road { height:68px; border-radius:18px; }
  .login-route-vehicle { width:146px; height:84px; bottom:28px; }
  .page-loader-scene { min-height: 332px; border-radius: 24px; }
  .page-loader-title { font-size: 2rem; }
  .page-loader-subtitle { font-size: 0.88rem; max-width: 260px; }
  .loader-road { height: 72px; }
  .loader-van { transform: scale(0.84); transform-origin: left bottom; }
  .topbar { padding:8px 12px; gap:6px; row-gap:4px; }
  .topbar-actions { gap:6px; }
  .topbar-notifications { width:36px; height:36px; }
  /* Hide date text at very small widths — keep only the odometer */
  .topbar-live-date { display: none; }
  /* Scale odometer slots down further */
  .od-group { padding: 1px 2px; }
  .od-slot { width: 8px; height: 12px; }
  .od-slot span { height: 12px; font-size: 0.42rem; }
  .od-slot .od-next { top: 12px; }
  @keyframes odRollCur  { to { transform: translateY(-12px); } }
  @keyframes odRollNext { to { transform: translateY(-12px); } }
  /* Shrink version badge — show short form via clip */
  .topbar-version { padding: 0 8px; font-size: 0.65rem; min-height: 32px; }
  /* Tighter notice bar */
  .notice-bar { font-size: 0.75rem; height: 32px; }
  .notice-bar-label { width: 34px; font-size: 0.72rem; }
  .notice-bar-manage { width: 30px; }
  .page-content { padding:12px; }
  .page-theme { padding:12px; }
  .page-header { margin-bottom:18px; gap:10px; }
  .site-signature { padding: 0 12px 14px; }
  .site-signature-card { padding: 12px 14px; border-radius: 14px; gap: 8px; }
  .site-signature-kicker { font-size: 0.6rem; padding: 5px 9px; letter-spacing: 0.1em; }
  .site-signature-text { font-size: 0.68rem; gap: 5px; word-break: break-word; }
  .stats-grid { grid-template-columns:1fr; }
  .stat-card { padding:16px 16px 14px; }
  .stat-icon { width:40px; height:40px; margin-bottom:12px; }
  .card-header,
  .card-body,
  .modal-header,
  .modal-body,
  .modal-footer { padding-left:12px; padding-right:12px; }
  .btn { width:100%; justify-content:center; }
  .btn.btn-xs,
  .btn.btn-sm { width:auto; }
  .table-wrap tbody td {
    padding: 9px 12px;
    font-size: 0.82rem;
  }
  .table-wrap tbody td:not(.mobile-full-cell) {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .table-wrap tbody td:not(.mobile-full-cell)::before {
    font-size: 0.68rem;
  }
  .page-header-left h1 { font-size:1.3rem; }
  .vehicle-live-map { height:260px; }
  .modal-footer { flex-direction:column; }
  .modal-footer .btn { width:100%; }
}

/* ── Notice Modal ─────────────────────────────────────────── */
.notice-priority {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-block;
}
.notice-priority--urgent { background: #ef4444; color: #fff; }
.notice-priority--high   { background: #f97316; color: #fff; }
.notice-priority--normal { background: #3b82f6; color: #fff; }
.notice-priority--low    { background: #64748b; color: #fff; }

.notice-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.notice-modal-box {
  background: white;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.notice-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 12px 24px;
  border-bottom: 1px solid #e2e8f0;
}

.notice-modal-badge {
  font-size: 0.7rem !important;
  padding: 6px 12px !important;
}

.notice-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.notice-modal-close:hover {
  color: #0f172a;
}

.notice-modal-content {
  padding: 24px;
}

.notice-modal-type {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--green);
  font-weight: 600;
  background: rgba(34, 197, 94, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.notice-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin: 16px 0 12px 0;
  line-height: 1.4;
}

.notice-modal-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
  white-space: normal;
  word-break: break-word;
  margin: 16px 0;
}

.notice-modal-date {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-top: 20px;
}

.notice-modal-footer {
  padding: 16px 24px 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid #e2e8f0;
}