/* ============================================================
   Nesto UI — Premium Spatial Design System
   v4.0  |  Option-A Retheme · PWA-ready · Mobile-first
   ============================================================
   Design tokens: slate/zinc neutrals, off-white stone base,
   glassmorphism depth layers, refined typography scale,
   smooth micro-interactions on every interactive surface.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   ══════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ── */
  --brand-blue:        #4f6ef7;
  --brand-blue-dark:   #3b57e8;
  --brand-purple:      #8b5cf6;
  --brand-indigo:      #6366f1;

  /* ── Layout ── */
  --sidebar-width:     240px;
  --navbar-height:     60px;
  --bottom-nav-height: 64px;

  /* ── Refined neutral palette (off-white / slate / zinc) ──
     Avoids harsh #000 / #fff — everything has a warm or cool cast */
  --surface-page:      #f4f6fb;          /* page background — soft blue-white       */
  --surface-card:      rgba(252,253,255,0.82); /* card glass face                   */
  --surface-card-solid:#ffffff;
  --surface-elevated:  rgba(255,255,255,0.94); /* modals, dropdowns                 */
  --surface-sidebar:   rgba(10,13,30,0.97);    /* near-black sidebar                */
  --surface-navbar:    rgba(17,24,58,0.82);    /* deep navy glass navbar            */

  /* ── Borders — ultra-thin, low-contrast ── */
  --border-soft:       rgba(203,213,225,0.45); /* card / page dividers              */
  --border-card:       rgba(226,232,240,0.60);
  --border-sidebar:    rgba(255,255,255,0.07);
  --border-glass:      rgba(255,255,255,0.18); /* bright ring on glass surfaces     */
  --border-input:      rgba(203,213,225,0.80);

  /* ── Text — refined slate scale ── */
  --text-heading:      #0f172a;   /* slate-900  */
  --text-primary:      #1e293b;   /* slate-800  */
  --text-secondary:    #475569;   /* slate-600  */
  --text-muted:        #94a3b8;   /* slate-400  */
  --text-sidebar:      #94a3b8;
  --text-sidebar-active: #c7d2fe;

  /* ── Shadows — soft, layered ambient ── */
  --shadow-xs:   0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:   0 4px 12px rgba(15,23,42,0.07), 0 1px 4px rgba(15,23,42,0.04);
  --shadow-md:   0 8px 28px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.05);
  --shadow-lg:   0 20px 52px rgba(15,23,42,0.14), 0 4px 16px rgba(15,23,42,0.06);
  --shadow-xl:   0 32px 80px rgba(15,23,42,0.18), 0 8px 24px rgba(15,23,42,0.08);

  /* Card-specific shadows with brand tint */
  --card-shadow:       0 4px 20px rgba(79,110,247,0.07), 0 1px 4px rgba(15,23,42,0.05),
                       0 0 0 1px rgba(255,255,255,0.65) inset;
  --card-shadow-hover: 0 16px 44px rgba(79,110,247,0.13), 0 4px 14px rgba(15,23,42,0.07),
                       0 0 0 1px rgba(255,255,255,0.75) inset;

  /* ── Gradient palette ── */
  --grad-blue:   linear-gradient(135deg, #4f6ef7 0%, #6366f1 100%);
  --grad-green:  linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-amber:  linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --grad-red:    linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --grad-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --grad-teal:   linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);

  /* Navbar gradient — deep sophisticated navy */
  --grad-navbar: linear-gradient(135deg, #131c4a 0%, #1e2563 45%, #1a3a6e 100%);

  /* ── Ambient glows ── */
  --glow-blue:   0 8px 32px rgba(79,110,247,0.22);
  --glow-green:  0 8px 32px rgba(16,185,129,0.22);
  --glow-red:    0 8px 32px rgba(239,68,68,0.22);
  --glow-amber:  0 8px 32px rgba(245,158,11,0.22);

  /* ── Transitions — fluid, calibrated ── */
  --t-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.42s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Spacing scale — ~25% more breathing room than v3 ── */
  --space-page-x:  2rem;
  --space-page-y:  2.25rem;
  --space-card:    1.75rem;
  --space-card-sm: 1.25rem;

  /* ── Border radius ── */
  --radius-sm:   0.5rem;
  --radius-md:   0.875rem;
  --radius-lg:   1.25rem;
  --radius-xl:   1.5rem;
}

/* ══════════════════════════════════════════════════════════
   FONT + BASE RESET
   ══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  background: var(--surface-page) !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tighter body line-height for a premium, editorial feel */
  line-height: 1.6;
}

/* ── Layer 1 — Refined mesh gradient background ──
   Replaces harsh #eef2ff with a warm stone-blue off-white */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 90% 55% at 15% 8%,  rgba(79,110,247,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 70% 45% at 85% 90%, rgba(139,92,246,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 55% 48%, rgba(99,102,241,0.04) 0%, transparent 50%),
    linear-gradient(160deg, #f4f6fb 0%, #eef1f8 100%);
  pointer-events: none;
  will-change: transform;
}

/* ── Layer 2 — Drifting secondary ambient orb ── */
body::after {
  content: '';
  position: fixed;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.05) 0%, transparent 65%);
  top: 15%; right: -250px;
  z-index: -1;
  pointer-events: none;
  animation: orb-float 26s ease-in-out infinite alternate-reverse;
}

@keyframes orb-float {
  0%   { transform: translate(0, 0)     scale(1); }
  33%  { transform: translate(-45px, 70px)  scale(1.07); }
  66%  { transform: translate(35px, -45px) scale(0.96); }
  100% { transform: translate(-25px, 90px) scale(1.04); }
}

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY SCALE
   Strict hierarchy — tracking reductions for large headers,
   subtle tracking increases for small uppercase labels.
   ══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading) !important;
  letter-spacing: -0.015em;
  font-weight: 700;
  line-height: 1.25;
}
h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.02em; }
h4 { letter-spacing: -0.015em; }
h5 { letter-spacing: -0.01em; font-weight: 600; }
h6 { letter-spacing: 0; font-weight: 600; }

/* Section/page header — fw-bold helpers */
h4.fw-bold { color: var(--text-heading) !important; }
h5.fw-bold { color: var(--text-heading) !important; }
h6.fw-bold { color: var(--text-heading) !important; }

/* Small uppercase labels — slightly wider tracking, more legible */
.text-uppercase,
.nav-section-label,
.table thead th {
  letter-spacing: 0.07em !important;
}

.text-muted { color: var(--text-secondary) !important; }

a { transition: all var(--t-fast) !important; }

/* ══════════════════════════════════════════════════════════
   TOP NAVBAR — Deep glass panel with backdrop-blur
   Replaces solid gradient with a glassmorphic floating bar
   ══════════════════════════════════════════════════════════ */
.top-navbar {
  height: var(--navbar-height) !important;
  background: var(--grad-navbar) !important;
  /* Glass overlay on top of the gradient */
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 6px 28px rgba(10,15,50,0.35),
    0 1px 4px rgba(10,15,50,0.20) !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1050 !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  transition: box-shadow var(--t-med), background var(--t-slow) !important;
}

/* Scrolled state — deepen the presence */
.top-navbar.scrolled {
  background: rgba(13,18,50,0.94) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 8px 36px rgba(10,15,50,0.50) !important;
}

.top-navbar .brand-text {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.20) !important;
}

/* Navbar interactive elements */
.top-navbar .text-white { color: rgba(255,255,255,0.93) !important; }
.top-navbar a.text-white-50 {
  color: rgba(255,255,255,0.60) !important;
  transition: color var(--t-fast), filter var(--t-fast) !important;
}
.top-navbar a.text-white-50:hover {
  color: rgba(255,255,255,0.95) !important;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.35));
}

/* Navbar outlined button (property badge) */
.top-navbar .btn-outline-light {
  border-color: rgba(255,255,255,0.28) !important;
  color: rgba(255,255,255,0.86) !important;
  border-radius: 2rem !important;
  font-size: .8rem !important;
  padding: .28rem .85rem !important;
  transition: all var(--t-fast) !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,0.06) !important;
}
.top-navbar .btn-outline-light:hover {
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(255,255,255,0.50) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* SOS button in navbar */
.top-navbar .btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important;
  box-shadow: 0 0 18px rgba(220,38,38,0.50) !important;
  border-radius: 2rem !important;
  font-weight: 700 !important;
  transition: all var(--t-fast) !important;
}
.top-navbar .btn-danger:hover {
  box-shadow: 0 0 28px rgba(220,38,38,0.70) !important;
  transform: translateY(-1px) !important;
}

/* Navbar right cluster gap on small screens */
@media (max-width: 767px) {
  .top-navbar .ms-auto { gap: .5rem !important; }
}
@media (max-width: 400px) {
  .top-navbar .ms-auto { gap: .32rem !important; }
  .top-navbar img[style*="width:38px"],
  .top-navbar span[style*="width:38px"] { width: 32px !important; height: 32px !important; }
  .top-navbar .fa-chevron-down { display: none !important; }
}

/* SOS navbar animation */
@keyframes sos-nav-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.45), 0 2px 12px rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(255,255,255,0), 0 2px 12px rgba(255,255,255,0.18); }
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR — Refined dark glass panel
   Ultra-thin borders, generous item spacing, premium
   active state with a brand gradient indicator stripe.
   ══════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-width) !important;
  background: var(--surface-sidebar) !important;
  border-right: 1px solid var(--border-sidebar) !important;
  position: fixed !important;
  top: var(--navbar-height) !important;
  left: 0 !important; bottom: 0 !important;
  z-index: 1040 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform var(--t-med) !important;
  /* Softer, more organic depth shadow */
  box-shadow: 2px 0 24px rgba(0,0,0,0.22), 1px 0 0 rgba(255,255,255,0.04) inset !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

/* Section labels — spaced, low-contrast, uppercase */
.sidebar .nav-section-label {
  font-size: .63rem !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  color: rgba(148,163,184,0.40) !important;
  text-transform: uppercase !important;
  padding: 1.1rem 1.25rem .35rem !important;
  display: block !important;
}

/* Sidebar nav links — more vertical padding = more breathing room */
.sidebar .nav-link {
  color: var(--text-sidebar) !important;
  padding: .58rem 1.1rem !important;
  border-radius: var(--radius-sm) !important;
  margin: .06rem .6rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  font-size: .86rem !important;
  font-weight: 500 !important;
  transition: all var(--t-fast) !important;
  position: relative !important;
  letter-spacing: 0.005em !important;
  /* Ultra-thin transparent border reserves layout space so hover doesn't shift */
  border: 1px solid transparent !important;
}
.sidebar .nav-link:hover {
  color: #e2e8f0 !important;
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.06) !important;
  transform: translateX(3px) !important;
}
.sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(79,110,247,0.28), rgba(139,92,246,0.22)) !important;
  color: var(--text-sidebar-active) !important;
  border-color: rgba(99,102,241,0.30) !important;
  box-shadow: 0 2px 14px rgba(79,110,247,0.18), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  font-weight: 600 !important;
}
/* Active left-accent stripe */
.sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: -1px; top: 22%; bottom: 22%;
  width: 3px;
  background: linear-gradient(180deg, #4f6ef7, #8b5cf6);
  border-radius: 0 3px 3px 0;
}
.sidebar .nav-link i { width: 18px !important; text-align: center !important; flex-shrink: 0 !important; opacity: .85; }
.sidebar .nav-link.active i { opacity: 1; }

/* Sidebar scrollbar */
.sidebar-nav-scroll { flex: 1 1 auto !important; overflow-y: auto !important; }
.sidebar-nav-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 2px; }
.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* Sidebar bottom account section */
.sidebar-account-bottom {
  flex-shrink: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
  padding-bottom: .6rem !important;
}

/* Group toggles */
.sidebar-group-toggle {
  color: var(--text-sidebar) !important;
  padding: .55rem 1.1rem !important;
  border-radius: var(--radius-sm) !important;
  margin: .06rem .6rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  user-select: none !important;
  background: none !important;
  border: 1px solid transparent !important;
  width: calc(100% - 1.2rem) !important;
  text-align: left !important;
  transition: all var(--t-fast) !important;
  letter-spacing: 0.005em !important;
}
.sidebar-group-toggle:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #e2e8f0 !important;
  transform: translateX(2px) !important;
}
.sidebar-group-toggle.has-active { color: #a5b4fc !important; }
.sidebar-group-toggle i.grp-icon { width: 18px; text-align: center; flex-shrink: 0; opacity: .85; }
.sidebar-group-toggle .grp-arrow {
  margin-left: auto !important;
  font-size: .68rem !important;
  transition: transform var(--t-fast) !important;
  flex-shrink: 0 !important;
  opacity: .5;
}
.sidebar-group-toggle[aria-expanded="true"] .grp-arrow { transform: rotate(90deg) !important; }
.sidebar-group-items { padding-left: .8rem !important; }
.sidebar-group-items .nav-link { font-size: .83rem !important; padding: .46rem 1rem !important; }

/* SOS sidebar button */
.sidebar .sos-sidebar-btn {
  background: rgba(255,255,255,0.96) !important;
  color: #dc2626 !important;
  margin: .3rem .6rem !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  transition: all var(--t-fast) !important;
}
.sidebar .sos-sidebar-btn:hover {
  background: #fff1f1 !important;
  color: #b91c1c !important;
  animation: sos-nav-pulse 2s infinite !important;
  transform: translateX(3px) !important;
}

.sos-nav-btn { border-radius: 2rem !important; padding: .25rem .75rem !important; font-size: .85rem !important; }
@media (max-width: 575.98px) {
  .sos-nav-btn { padding: .15rem .4rem !important; font-size: .7rem !important; }
}

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT WRAPPER — generous spatial breathing room
   ══════════════════════════════════════════════════════════ */
.main-wrapper {
  margin-left: var(--sidebar-width) !important;
  margin-top: var(--navbar-height) !important;
  padding: var(--space-page-y) var(--space-page-x) calc(var(--space-page-y) * 1.4) !important;
  min-height: calc(100vh - var(--navbar-height)) !important;
}

/* ══════════════════════════════════════════════════════════
   CARDS — Premium floating glass surfaces
   Softer shadows, more padding, refined border treatment
   ══════════════════════════════════════════════════════════ */

/* glass-card utility — light solid contexts */
.glass-card {
  background: var(--surface-card-solid);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--card-shadow) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  transition: box-shadow var(--t-med), transform var(--t-med) !important;
  overflow: visible !important;
}
.card:has(.table-responsive) { overflow: visible !important; }
.card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-2px) !important;
}
.card-header {
  background: rgba(255,255,255,0.55) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 1.1rem var(--space-card) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
/* Increased card body padding for premium breathing room */
.card-body {
  padding: var(--space-card) !important;
}
.card-footer {
  background: rgba(248,250,252,0.65) !important;
  border-top: 1px solid var(--border-soft) !important;
  padding: .9rem var(--space-card) !important;
}

/* Stat cards — colored ambient glow beneath */
.stat-card {
  position: relative !important;
  overflow: visible !important;
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: var(--radius-md);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t-med);
  filter: blur(20px);
}
.stat-card:hover::after { opacity: 1; }

.stat-card:has(.text-primary)::after   { background: rgba(79,110,247,0.18); }
.stat-card:has(.text-danger)::after    { background: rgba(239,68,68,0.18); }
.stat-card:has(.text-success)::after   { background: rgba(16,185,129,0.18); }
.stat-card:has(.text-warning)::after   { background: rgba(245,158,11,0.18); }
.stat-card:has(.text-info)::after      { background: rgba(6,182,212,0.18); }
.stat-card:has(.text-secondary)::after { background: rgba(100,116,139,0.16); }

.stat-card .card-body { padding: 1.4rem 1.6rem !important; }

/* Stat icon circles */
.stat-icon {
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.2rem !important; flex-shrink: 0 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Gate stat icon */
.gate-stat-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   KPI CARD SYSTEM
   ══════════════════════════════════════════════════════════ */
.kpi-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.1rem;
}
.kpi-card-body { padding: 1.1rem 1.2rem !important; }
.kpi-value     { font-size: 1.2rem; font-weight: 700; color: var(--text-heading); }
.kpi-label     { font-size: .78rem; color: var(--text-secondary); }
.kpi-text      { min-width: 0; }

@media (max-width: 575px) {
  .kpi-icon-wrap  { width: 34px !important; height: 34px !important; font-size: .88rem !important; }
  .kpi-card-body  { padding: .7rem .75rem !important; }
  .kpi-value      { font-size: .95rem !important; }
  .kpi-label      { font-size: .70rem !important; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .kpi-icon-wrap  { width: 38px !important; height: 38px !important; font-size: .95rem !important; }
  .kpi-card-body  { padding: .85rem .9rem !important; }
  .kpi-value      { font-size: 1.05rem !important; }
}

/* ══════════════════════════════════════════════════════════
   UNIVERSAL MOBILE ICON SHRINK
   ══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  .stat-icon, .gate-stat-icon { width: 34px !important; height: 34px !important; font-size: .88rem !important; flex-shrink: 0 !important; }
  .card-body > [style*="border-radius:50%"],
  .card-body > div > [style*="border-radius:50%"] { width: 34px !important; height: 34px !important; font-size: .88rem !important; flex-shrink: 0 !important; }
  .card-body.d-flex.gap-3,
  .card-body.d-flex[class*="gap-3"] { gap: .5rem !important; padding: .7rem .75rem !important; }
  .card-body .fw-bold.fs-4 { font-size: 1.2rem !important; }
  .card-body .fw-bold.fs-5 { font-size: 1rem !important; }
  .card-body .text-muted[style*="font-size:.8"],
  .card-body .text-muted[style*="font-size:.82"] { font-size: .70rem !important; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .stat-icon, .gate-stat-icon { width: 38px !important; height: 38px !important; font-size: .95rem !important; }
  .card-body > [style*="border-radius:50%"],
  .card-body > div > [style*="border-radius:50%"] { width: 38px !important; height: 38px !important; font-size: .95rem !important; flex-shrink: 0 !important; }
  .card-body.d-flex.gap-3,
  .card-body.d-flex[class*="gap-3"] { gap: .65rem !important; padding: .85rem .9rem !important; }
  .card-body .fw-bold.fs-4 { font-size: 1.3rem !important; }
  .card-body .fw-bold.fs-5 { font-size: 1.05rem !important; }
}

/* ══════════════════════════════════════════════════════════
   TABLES — Premium header, low-contrast dividers
   ══════════════════════════════════════════════════════════ */
.table thead th {
  background: rgba(248,250,254,0.75) !important;
  font-size: .73rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--text-secondary) !important;
  font-weight: 700 !important;
  /* Replace thick border with a ultra-thin 1px soft divider */
  border-bottom: 1px solid rgba(203,213,225,0.55) !important;
  padding: .85rem 1.1rem !important;
  backdrop-filter: blur(8px) !important;
}
.table td, .table th {
  vertical-align: middle !important;
  padding: .78rem 1.1rem !important;
  font-size: .875rem !important;
}
.table tbody tr { transition: background var(--t-fast) !important; }
.table-hover tbody tr:hover { background: rgba(79,110,247,0.04) !important; }
/* Ultra-thin, low-contrast row dividers */
.table tbody tr td { border-bottom: 1px solid rgba(203,213,225,0.30) !important; }
.table tbody tr:last-child td { border-bottom: none !important; }

/* ══════════════════════════════════════════════════════════
   BUTTONS — Fluid micro-interactions
   Scale on hover, border glow on focus, spring on active
   ══════════════════════════════════════════════════════════ */
.btn {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--t-fast) !important;
  letter-spacing: .01em !important;
}

/* Primary */
.btn-primary {
  background: var(--grad-blue) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(79,110,247,0.35) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #3b57e8, #4f46e5) !important;
  box-shadow: 0 8px 24px rgba(79,110,247,0.50) !important;
  transform: translateY(-2px) scale(1.01) !important;
  color: #fff !important;
}
.btn-primary:active { transform: translateY(0) scale(0.99) !important; box-shadow: 0 2px 8px rgba(79,110,247,0.28) !important; }

/* Success */
.btn-success {
  background: var(--grad-green) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.32) !important;
  color: #fff !important;
}
.btn-success:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 8px 22px rgba(16,185,129,0.46) !important;
  transform: translateY(-2px) scale(1.01) !important; color: #fff !important;
}
.btn-success:active { transform: translateY(0) scale(0.99) !important; }

/* Danger */
.btn-danger {
  background: var(--grad-red) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(239,68,68,0.32) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  box-shadow: 0 8px 22px rgba(239,68,68,0.46) !important;
  transform: translateY(-2px) scale(1.01) !important; color: #fff !important;
}
.btn-danger:active { transform: translateY(0) scale(0.99) !important; }

/* Warning */
.btn-warning {
  background: var(--grad-amber) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(245,158,11,0.30) !important;
  color: #fff !important;
}
.btn-warning:hover { transform: translateY(-2px) scale(1.01) !important; box-shadow: 0 8px 22px rgba(245,158,11,0.44) !important; color: #fff !important; }
.btn-warning:active { transform: translateY(0) scale(0.99) !important; }

/* Info */
.btn-info {
  background: var(--grad-teal) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(6,182,212,0.30) !important;
  color: #fff !important;
}
.btn-info:hover { transform: translateY(-2px) scale(1.01) !important; color: #fff !important; }
.btn-info:active { transform: translateY(0) scale(0.99) !important; }

/* Secondary */
.btn-secondary {
  background: linear-gradient(135deg, #64748b, #475569) !important;
  border: none !important;
  color: #fff !important;
}
.btn-secondary:hover { transform: translateY(-2px) scale(1.01) !important; color: #fff !important; }
.btn-secondary:active { transform: translateY(0) scale(0.99) !important; }

/* Outline variants — thinner, more elegant borders */
.btn-outline-primary {
  border: 1.5px solid rgba(79,110,247,0.40) !important;
  color: #4f6ef7 !important;
  background: rgba(79,110,247,0.04) !important;
}
.btn-outline-primary:hover {
  background: rgba(79,110,247,0.10) !important;
  border-color: rgba(79,110,247,0.75) !important; color: #3b57e8 !important;
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 0 0 3px rgba(79,110,247,0.12) !important;
}
.btn-outline-secondary {
  border: 1.5px solid rgba(100,116,139,0.32) !important;
  color: var(--text-secondary) !important;
  background: rgba(100,116,139,0.04) !important;
}
.btn-outline-secondary:hover {
  background: rgba(100,116,139,0.09) !important; color: var(--text-primary) !important;
  border-color: rgba(100,116,139,0.60) !important; transform: translateY(-2px) scale(1.01) !important;
}
.btn-outline-danger {
  border: 1.5px solid rgba(239,68,68,0.38) !important;
  color: #ef4444 !important; background: rgba(239,68,68,0.04) !important;
}
.btn-outline-danger:hover {
  background: rgba(239,68,68,0.10) !important; color: #dc2626 !important;
  border-color: rgba(239,68,68,0.75) !important; transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.10) !important;
}
.btn-outline-success {
  border: 1.5px solid rgba(16,185,129,0.38) !important;
  color: #10b981 !important; background: rgba(16,185,129,0.04) !important;
}
.btn-outline-success:hover {
  background: rgba(16,185,129,0.10) !important; color: #059669 !important;
  border-color: rgba(16,185,129,0.75) !important; transform: translateY(-2px) scale(1.01) !important;
}
.btn-outline-warning {
  border: 1.5px solid rgba(245,158,11,0.38) !important;
  color: #d97706 !important; background: rgba(245,158,11,0.04) !important;
}
.btn-outline-warning:hover {
  background: rgba(245,158,11,0.10) !important; color: #b45309 !important;
  border-color: rgba(245,158,11,0.75) !important; transform: translateY(-2px) scale(1.01) !important;
}

.btn-sm  { font-size: .8rem  !important; padding: .33rem .78rem !important; border-radius: .48rem !important; }
.btn-lg  { padding: .78rem 1.85rem !important; font-size: 1rem !important; border-radius: .75rem !important; }

/* ══════════════════════════════════════════════════════════
   FORMS — Glass inset inputs, refined focus ring
   ══════════════════════════════════════════════════════════ */
.form-control, .form-select {
  border: 1.5px solid var(--border-input) !important;
  border-radius: .7rem !important;
  background: rgba(255,255,255,0.82) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  transition: all var(--t-fast) !important;
  box-shadow: inset 0 1px 4px rgba(15,23,42,0.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.form-control:focus, .form-select:focus {
  border-color: #4f6ef7 !important;
  /* Softer, wider focus ring — no harsh ring */
  box-shadow: 0 0 0 3px rgba(79,110,247,0.14), inset 0 1px 4px rgba(15,23,42,0.04) !important;
  background: rgba(255,255,255,0.97) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--text-muted) !important; opacity: .8; }
.form-label {
  font-weight: 600 !important;
  font-size: .875rem !important;
  color: var(--text-primary) !important;
  margin-bottom: .45rem !important;
  letter-spacing: 0.005em !important;
}
.form-text { color: var(--text-muted) !important; font-size: .78rem !important; }

.input-group-text {
  background: rgba(248,250,254,0.90) !important;
  border: 1.5px solid var(--border-input) !important;
  color: var(--text-secondary) !important;
  border-radius: .7rem 0 0 .7rem !important;
  backdrop-filter: blur(8px) !important;
}
.input-group .form-control { border-radius: 0 .7rem .7rem 0 !important; }
.input-group .input-group-text + .form-control { border-left: none !important; }
textarea.form-control { border-radius: .875rem !important; }

/* ══════════════════════════════════════════════════════════
   BADGES — Cohesive, slightly more rounded
   ══════════════════════════════════════════════════════════ */
.badge {
  font-weight: 600 !important;
  letter-spacing: .025em !important;
  border-radius: .42rem !important;
  font-size: .72rem !important;
}
.badge.bg-primary   { background: var(--grad-blue)   !important; }
.badge.bg-success   { background: var(--grad-green)  !important; }
.badge.bg-danger    { background: var(--grad-red)    !important; }
.badge.bg-warning   { background: var(--grad-amber)  !important; color:#fff !important; }
.badge.bg-info      { background: var(--grad-teal)   !important; }
.badge.bg-secondary { background: linear-gradient(135deg,#64748b,#475569) !important; }
.badge.rounded-pill { border-radius: 2rem !important; }

/* ══════════════════════════════════════════════════════════
   ALERTS — Glass tinted panels with left accent bar
   ══════════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--radius-md) !important;
  border: none !important;
  font-weight: 500 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 1rem 1.25rem !important;
}
.alert-success { background: rgba(16,185,129,0.10)  !important; color:#065f46 !important; border-left: 3px solid #10b981 !important; }
.alert-danger  { background: rgba(239,68,68,0.09)   !important; color:#7f1d1d !important; border-left: 3px solid #ef4444 !important; }
.alert-warning { background: rgba(245,158,11,0.10)  !important; color:#78350f !important; border-left: 3px solid #f59e0b !important; }
.alert-info    { background: rgba(6,182,212,0.09)   !important; color:#164e63 !important; border-left: 3px solid #06b6d4 !important; }

/* ══════════════════════════════════════════════════════════
   LIST GROUPS — Ultra-thin dividers
   ══════════════════════════════════════════════════════════ */
.list-group-item {
  background: transparent !important;
  border-color: rgba(203,213,225,0.35) !important;
  transition: background var(--t-fast) !important;
  padding: .85rem 1.1rem !important;
}
.list-group-item:hover { background: rgba(79,110,247,0.04) !important; }
.list-group-flush .list-group-item:last-child { border-bottom: none !important; }

/* ══════════════════════════════════════════════════════════
   QUICK-ACTION BUTTONS
   ══════════════════════════════════════════════════════════ */
.quick-btn {
  border-radius: .7rem !important;
  font-size: .84rem !important;
  padding: .65rem .9rem !important;
  text-align: left !important;
  font-weight: 600 !important;
  transition: all var(--t-fast) !important;
}
.quick-btn:hover { transform: translateX(4px) !important; }

/* ══════════════════════════════════════════════════════════
   SOS BANNER
   ══════════════════════════════════════════════════════════ */
@keyframes sos-flash {
  0%,100% { background: linear-gradient(135deg,#dc2626,#991b1b); box-shadow:0 0 24px rgba(220,38,38,0.42); }
  50%     { background: linear-gradient(135deg,#ef4444,#dc2626); box-shadow:0 0 44px rgba(220,38,38,0.72); }
}
.sos-banner {
  animation: sos-flash 1.4s infinite !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* ══════════════════════════════════════════════════════════
   ACTIVITY DOTS
   ══════════════════════════════════════════════════════════ */
.activity-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
  margin-top: .3rem !important;
}

/* ══════════════════════════════════════════════════════════
   NAV TABS & PILLS — Cleaner, more refined
   ══════════════════════════════════════════════════════════ */
.nav-tabs .nav-link {
  border-radius: .5rem .5rem 0 0 !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  border: none !important;
  transition: all var(--t-fast) !important;
  padding: .6rem 1rem !important;
}
.nav-tabs .nav-link:hover { color: var(--text-primary) !important; background: rgba(79,110,247,0.05) !important; }
.nav-tabs .nav-link.active {
  background: rgba(255,255,255,0.88) !important;
  color: #4f6ef7 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #4f6ef7 !important;
  backdrop-filter: blur(8px) !important;
}
.nav-pills .nav-link {
  border-radius: .65rem !important; color: var(--text-secondary) !important;
  font-weight: 500 !important; transition: all var(--t-fast) !important;
}
.nav-pills .nav-link:hover { color: var(--text-primary) !important; background: rgba(79,110,247,0.06) !important; }
.nav-pills .nav-link.active {
  background: var(--grad-blue) !important; color:#fff !important;
  box-shadow: 0 4px 14px rgba(79,110,247,0.32) !important;
}

/* ══════════════════════════════════════════════════════════
   MODALS — Deep glass overlay sheets
   ══════════════════════════════════════════════════════════ */
.modal-backdrop {
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  background-color: rgba(10,15,42,0.50) !important;
}
.modal-content {
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.40) inset !important;
  background: var(--surface-elevated) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  padding: 1.4rem 1.75rem !important;
}
.modal-body   { padding: 1.5rem 1.75rem !important; }
.modal-footer {
  border-top: 1px solid var(--border-soft) !important;
  padding: 1rem 1.75rem !important;
}

/* ══════════════════════════════════════════════════════════
   DROPDOWNS — Glass mini-panels with smooth entry
   ══════════════════════════════════════════════════════════ */
.dropdown-menu {
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.40) inset !important;
  background: var(--surface-elevated) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  padding: .45rem !important;
}
.dropdown-item {
  border-radius: .55rem !important;
  font-size: .875rem !important;
  transition: all var(--t-fast) !important;
  padding: .52rem .9rem !important;
  color: var(--text-primary) !important;
}
.dropdown-item:hover {
  background: rgba(79,110,247,0.07) !important;
  color: #4f6ef7 !important;
  transform: translateX(2px) !important;
}
.dropdown-divider { border-color: var(--border-soft) !important; margin: .3rem 0 !important; }

/* ══════════════════════════════════════════════════════════
   PROGRESS BARS
   ══════════════════════════════════════════════════════════ */
.progress {
  border-radius: 2rem !important;
  background: rgba(79,110,247,0.08) !important;
  height: 6px !important;
}
.progress-bar {
  background: var(--grad-blue) !important;
  border-radius: 2rem !important;
  transition: width var(--t-slow) !important;
}

/* ══════════════════════════════════════════════════════════
   TABLE-RESPONSIVE — horizontal scroll system
   ══════════════════════════════════════════════════════════ */
.table-responsive {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  position: relative;
  isolation: isolate;
}
.card-body:has(.table-responsive),
.card:has(.table-responsive) { overflow: visible !important; }
.table-responsive > .table { min-width: 600px; }

/* Wide-table marker (8+ cols) */
.table-responsive > .table > thead > tr > th:nth-child(8) ~ th,
.table-responsive > .table > thead > tr > th:nth-child(8) { /* Marker */ }

.card > .table-responsive:first-child  { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.card > .table-responsive:only-child   { border-radius: var(--radius-lg) !important; }
.card > .card-body > .table-responsive { border-radius: 0 !important; }

/* Mobile swipe hint */
@media (max-width: 767px) {
  .table-responsive > .table { min-width: 640px !important; }
  .table-scroll-wrap { position: relative; }
  .table-scroll-wrap::after {
    content: '⟵  swipe to see more  ⟶';
    display: block;
    text-align: center;
    font-size: .68rem;
    color: var(--text-muted);
    padding: .3rem 0 .1rem;
    letter-spacing: .05em;
    pointer-events: none;
    transition: opacity .3s;
  }
  .table-scroll-wrap.scrolled::after { opacity: 0; }
  .table-scroll-wrap.no-overflow::after { display: none; }
  div[style*="overflow:hidden"] > .table-responsive,
  div[style*="overflow: hidden"] > .table-responsive { overflow-x: auto !important; border-radius: inherit; }
  div[style*="overflow:hidden"] > table,
  div[style*="overflow: hidden"] > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   GLOBAL SCROLLBAR — slim, brand-tinted
   ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(79,110,247,0.16); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(79,110,247,0.32); }

/* ══════════════════════════════════════════════════════════
   PAGE HEADER ROWS — always flex-wrap on mobile
   ══════════════════════════════════════════════════════════ */
.d-flex.justify-content-between.mb-3,
.d-flex.justify-content-between.mb-4 { flex-wrap: wrap !important; gap: .5rem !important; }
@media (max-width: 767px) {
  .d-flex.justify-content-between .d-flex.gap-2 .btn:not(.btn-sm) {
    padding: .33rem .75rem !important; font-size: .8rem !important;
  }
}

/* ══════════════════════════════════════════════════════════
   GATE STAT BLOCKS
   ══════════════════════════════════════════════════════════ */
.gate-stat-block { border-radius: var(--radius-md) !important; transition: transform var(--t-fast) !important; }
.gate-stat-block:hover { transform: translateY(-2px) !important; }

/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR (PWA native feel)
   Premium glass treatment, refined active indicator
   ══════════════════════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-height);
  z-index: 1045;
  /* Deeper, more sophisticated dark glass */
  background: rgba(10,13,30,0.96);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  /* Ultra-thin, low-contrast top divider */
  border-top: 1px solid rgba(255,255,255,0.065);
  box-shadow: 0 -4px 28px rgba(0,0,0,0.30), 0 -1px 0 rgba(255,255,255,0.04) inset;
  padding: 0 .5rem env(safe-area-inset-bottom, 0);
}
.bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: var(--bottom-nav-height);
  max-width: min(480px, 100%);
  margin: 0 auto;
  width: 100%;
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  text-decoration: none;
  color: rgba(148,163,184,0.70);
  padding: .3rem .5rem;
  border-radius: .65rem;
  transition: all var(--t-fast);
  min-width: 48px;
  flex: 1 1 0;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .025em;
  position: relative;
}
.bottom-nav-item i { font-size: 1.1rem; transition: transform var(--t-fast), color var(--t-fast); }
.bottom-nav-item span { font-size: .64rem; line-height: 1; }
.bottom-nav-item:hover, .bottom-nav-item.active { color: #a5b4fc; }
.bottom-nav-item.active i {
  color: #4f6ef7;
  transform: translateY(-2px);
  filter: drop-shadow(0 0 5px rgba(79,110,247,0.55));
}
/* Premium active indicator — subtle gradient top bar */
.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2px;
  background: linear-gradient(90deg, #4f6ef7, #8b5cf6);
  border-radius: 0 0 3px 3px;
}

/* SOS bottom nav item */
.bottom-nav-item.sos-btn {
  background: linear-gradient(135deg, rgba(239,68,68,0.20), rgba(220,38,38,0.14));
  border: 1px solid rgba(239,68,68,0.26);
  color: #fca5a5;
  border-radius: .75rem;
  animation: sos-bottom-pulse 2.5s infinite;
}
.bottom-nav-item.sos-btn i { color: #ef4444; }
@keyframes sos-bottom-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.32); }
  50%      { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.bottom-nav-item .bnav-badge {
  position: absolute;
  top: .2rem; right: .3rem;
  background: linear-gradient(135deg,#ef4444,#dc2626);
  color: #fff; font-size: .55rem; font-weight: 700;
  border-radius: 2rem;
  padding: 1px 4px;
  min-width: 14px; text-align: center; line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR OVERLAY (mobile blur backdrop)
   ══════════════════════════════════════════════════════════ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1039;
  background: rgba(8,12,28,0.52);
  backdrop-filter: blur(5px) saturate(80%);
  -webkit-backdrop-filter: blur(5px) saturate(80%);
  opacity: 0;
  transition: opacity var(--t-med);
}
.sidebar-overlay.show { display: block; opacity: 1; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (768px – 991px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) {
  :root { --sidebar-width: 200px; }
  .main-wrapper { padding: 1.35rem !important; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (< 768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Sidebar slides off-screen — overlay drawer */
  .sidebar { transform: translateX(-100%) !important; box-shadow: none !important; z-index: 1042 !important; }
  .sidebar.show { transform: translateX(0) !important; box-shadow: 4px 0 44px rgba(0,0,0,0.42) !important; }

  /* On mobile the sidebar scrolls as a single unit —
     disable the two-section flex split and let the whole nav scroll */
  .sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }
  .sidebar-nav-scroll {
    overflow-y: visible !important;
    flex: none !important;
  }
  .sidebar-account-bottom {
    flex-shrink: 1 !important;
    overflow: visible !important;
  }

  /* Main content takes full width */
  .main-wrapper {
    margin-left: 0 !important;
    padding: 1rem 1rem calc(var(--bottom-nav-height) + 1.35rem) !important;
  }
  /* Show bottom nav only on mobile */
  .bottom-nav { display: flex !important; }

  /* Cards slightly less rounded on mobile */
  .card { border-radius: var(--radius-md) !important; }

  /* Page headers */
  h4.fw-bold { font-size: 1.15rem !important; }
  h5.fw-bold { font-size: 1rem !important; }

  /* Stat card figures */
  .stat-card .card-body { padding: .95rem 1.05rem !important; }
  .stat-card .fw-bold.fs-4 { font-size: 1.35rem !important; }
  .stat-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; }

  /* Tables */
  .table td, .table th { font-size: .80rem !important; padding: .5rem .58rem !important; }
  .table thead th { font-size: .72rem !important; padding: .62rem .58rem !important; }

  /* Filter forms */
  .row.g-2.align-items-end .col-auto { flex: 0 0 auto; max-width: 100%; }
  .form-select-sm, .form-control-sm { min-width: 0 !important; max-width: 100% !important; }
  .d-flex.gap-2.flex-wrap .btn { white-space: nowrap; }

  .card-header .d-flex.align-items-center.justify-content-between { flex-wrap: wrap !important; gap: .5rem !important; }

  /* Modals */
  .modal-dialog { margin: .75rem !important; }
  .modal-content { border-radius: var(--radius-lg) !important; }
  .modal-header  { padding: 1.1rem 1.25rem !important; }
  .modal-body    { padding: 1.1rem 1.25rem !important; }
  .modal-footer  { padding: .85rem 1.25rem !important; }

  /* Nav tabs / pills */
  .nav-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 2px !important; }
  .nav-tabs .nav-link { white-space: nowrap !important; flex-shrink: 0 !important; }
  .nav-pills { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .nav-pills .nav-link { white-space: nowrap !important; flex-shrink: 0 !important; }

  /* Alerts */
  .alert { font-size: .875rem !important; }

  /* Navbar brand */
  .top-navbar .brand-text { font-size: 1.25rem !important; }
}

/* Extra-small phones */
@media (max-width: 360px) {
  .top-navbar .brand-text { font-size: 1.1rem !important; }
  .main-wrapper { padding: .75rem .75rem calc(var(--bottom-nav-height) + 1rem) !important; }
  h4.fw-bold { font-size: 1.05rem !important; }
  .stat-card .fw-bold.fs-4 { font-size: 1.2rem !important; }
}

/* ── Suppress hover lift on touch devices ── */
@media (hover: none) {
  .card:hover { transform: none !important; box-shadow: var(--card-shadow) !important; }
  .btn-primary:hover, .btn-success:hover, .btn-danger:hover,
  .btn-warning:hover, .btn-info:hover, .btn-secondary:hover,
  .btn-outline-primary:hover, .btn-outline-secondary:hover,
  .btn-outline-danger:hover, .btn-outline-success:hover,
  .btn-outline-warning:hover { transform: none !important; }
  .quick-btn:hover { transform: none !important; }
  .gate-stat-block:hover { transform: none !important; }
  .stat-card::after { display: none !important; }
  .sidebar .nav-link:hover { transform: none !important; }
  .sidebar-group-toggle:hover { transform: none !important; }
  .dropdown-item:hover { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════
   PWA INSTALL BANNER
   ══════════════════════════════════════════════════════════ */
.pwa-install-banner {
  display: none;
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + .75rem);
  left: .75rem; right: .75rem;
  z-index: 1060;
  background: rgba(10,13,30,0.96);
  border: 1px solid rgba(79,110,247,0.30);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.35rem;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(79,110,247,0.12) inset;
  color: #fff;
  animation: banner-slide-up .35s cubic-bezier(0.34,1.56,0.64,1);
}
.pwa-install-banner.show { display: flex; align-items: center; gap: 1rem; }
@keyframes banner-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pwa-install-banner .pwa-icon { font-size: 2rem; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(79,110,247,0.5)); }
.pwa-install-banner .pwa-text { flex: 1; }
.pwa-install-banner .pwa-text strong { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .15rem; }
.pwa-install-banner .pwa-text small  { font-size: .76rem; color: rgba(255,255,255,0.55); }
.pwa-install-banner .btn-install {
  background: var(--grad-blue);
  color: #fff; font-weight: 700; font-size: .8rem;
  border: none; border-radius: .6rem; padding: .45rem 1rem;
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(79,110,247,0.38);
  transition: all var(--t-fast);
}
.pwa-install-banner .btn-install:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,110,247,0.50); }
.pwa-install-banner .btn-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.38);
  font-size: .75rem; cursor: pointer; flex-shrink: 0; padding: .25rem;
  transition: color var(--t-fast);
}
.pwa-install-banner .btn-dismiss:hover { color: rgba(255,255,255,0.68); }

/* ══════════════════════════════════════════════════════════
   AUTH PAGES — Standalone full-page glass card
   ══════════════════════════════════════════════════════════ */
.auth-page-bg {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 15% 5%,  rgba(79,110,247,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(139,92,246,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 55% 45%, rgba(99,102,241,0.10) 0%, transparent 50%),
    linear-gradient(155deg, #080d24 0%, #120e38 45%, #0a1a3a 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.auth-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.10) inset;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  padding: 2.5rem 2.75rem;
  width: min(440px, calc(100vw - 2rem));
  color: #fff;
}
.auth-card .form-control,
.auth-card .form-select {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
.auth-card .form-control::placeholder { color: rgba(255,255,255,0.42) !important; }
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(79,110,247,0.70) !important;
  box-shadow: 0 0 0 3px rgba(79,110,247,0.20) !important;
}
.auth-card .form-label { color: rgba(255,255,255,0.88) !important; }

/* ══════════════════════════════════════════════════════════
   NAVBAR LOGO — constrained height, never overflows bar
   ══════════════════════════════════════════════════════════ */
.navbar-logo {
  height: 54px;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 576px) {
  .navbar-logo { height: 46px; }
}

/* ══════════════════════════════════════════════════════════
   LOGIN PAGE — Centered card layout (auth/login.html)
   ══════════════════════════════════════════════════════════ */
.login-page-wrap {
  min-height: calc(100vh - var(--navbar-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.login-page-inner-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.65) inset;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  overflow: hidden;
  width: 100%;
  max-width: 420px;
}

.login-page-inner-card .card-header-banner {
  background: var(--grad-navbar);
  padding: 1.75rem 2rem 1.5rem;
  text-align: center;
}

.login-page-inner-card .card-form-body {
  padding: 2rem 2rem 1.75rem;
}

/* ══════════════════════════════════════════════════════════
   NOTIFICATION CHEVRON TOGGLE
   ══════════════════════════════════════════════════════════ */
.notif-chevron-btn {
  color: var(--text-muted) !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
}
.notif-chevron-btn:hover { color: var(--brand-blue) !important; }

.notif-chevron {
  display: inline-block !important;
  font-size: .7rem !important;
  transition: transform .25s ease !important;
}