/* ============================================================================
   Structech EV — Station Owner Panel · Design System
   ----------------------------------------------------------------------------
   A fresh, premium SaaS/ERP system inspired by Stripe, Linear, Notion & Vercel.
   Built ON TOP OF Bootstrap 5 (loaded first) — this file redefines Bootstrap's
   CSS variables and adds a small set of bespoke components. Light + dark.

   Structure/layout is bespoke to this panel; the COLOUR SYSTEM is shared with
   the Super Admin Panel so the two products read as one product:
     · Typeface        Plus Jakarta Sans + Inter (not Inter-only)
     · Accent          Super Admin emerald (shared palette, see Tokens)
     · Surfaces        Hairline borders + tiny shadows, not heavy card shadows
     · Sidebar         Light/paper, not dark forest green
     · Radii           Softer, larger; pill controls
     · Density         Airy, generous spacing
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* ==========================================================================
     PALETTE SOURCE OF TRUTH — mirrors the Super Admin Panel (assets/css/app.css)
     so both products read as one system. Layout, spacing, radii, typography and
     component structure stay specific to this panel; only colour is shared.
     ========================================================================== */

  /* --- Raw brand ramp (Super Admin --brand-*) --- */
  --vg-brand-700: #0B6E4F;   /* primary action           */
  --vg-brand-600: #138A5E;   /* primary hover            */
  --vg-brand-500: #16A34A;   /* secondary / success      */
  --vg-brand-400: #22C55E;   /* focus border, gradients  */
  --vg-brand-300: #4ADE80;   /* dark-mode lift           */
  --vg-brand-100: #DCFCE7;
  --vg-brand-050: #F0FDF4;

  /* --- Named semantic slots (the palette contract) --- */
  --vg-primary:   var(--vg-brand-700);
  --vg-secondary: var(--vg-brand-500);
  --vg-success:   #16A34A;   --vg-success-bg: #ECFDF3;   --vg-success-border: #A6F4C5;
  --vg-danger:    #D92D20;   --vg-danger-bg:  #FEF3F2;   --vg-danger-border:  #FECDCA;
  --vg-warning:   #D97706;   --vg-warning-bg: #FFFAEB;   --vg-warning-border: #FDE68A;
  --vg-info:      #2563EB;   --vg-info-bg:    #EFF6FF;   --vg-info-border:    #BFDBFE;
  /* Text-on-tint shades. The Super Admin palette uses its raw semantic colour
     for badge text, which measures ~3.1:1 on its own tint — below AA. These are
     darker shades of the SAME hues, used wherever the colour carries text. */
  --vg-success-fg: #0B6E4F;  --vg-warning-fg: #B45309;
  --vg-danger-fg:  #B42318;  --vg-info-fg:    #1D4ED8;
  --vg-violet-fg:  #6D28D9;  --vg-teal-fg:    var(--vg-info-fg);
  --vg-pink-fg:    var(--vg-violet-fg);

  --vg-light:     #F9FAFB;   /* gray-50  */
  --vg-dark:      #101828;   /* gray-900 */
  --vg-muted:     #667085;   /* gray-500 */

  /* Decorative accents. The Super Admin system offers green / blue / amber /
     purple / red / gray only — it has no teal or pink, so those two panel
     tones are folded onto the nearest in-system hue rather than inventing
     colours outside the shared palette. */
  --vg-violet:    #7C3AED;   --vg-violet-bg:  #F5F3FF;
  --vg-teal:      var(--vg-info);     --vg-teal-bg:  var(--vg-info-bg);
  --vg-pink:      var(--vg-violet);   --vg-pink-bg:  var(--vg-violet-bg);

  /* --- Interactive accent (drives buttons, active nav, links, focus) --- */
  --vg-accent:        var(--vg-primary);
  --vg-accent-600:    var(--vg-brand-600);
  --vg-accent-700:    var(--vg-brand-700);   /* text on -050 / -soft tints */
  --vg-accent-050:    var(--vg-brand-050);
  --vg-accent-100:    var(--vg-brand-100);
  --vg-accent-soft:   var(--vg-brand-100);
  --vg-accent-grad:   var(--vg-brand-400);   /* lighter stop in brand gradients */
  --vg-accent-shadow: rgba(22,163,74,.30);
  --vg-on-accent: #FFFFFF;   /* text/icon on an accent fill */

  /* --- Ink / neutral ramp (Super Admin --gray-*) --- */
  --vg-ink-900: #101828;   /* headings   — text-strong  */
  --vg-ink-800: #1D2939;   /* gray-800                  */
  --vg-ink-700: #344054;   /* body strong — text-default*/
  --vg-ink-600: #475467;   /* body       — gray-600     */
  --vg-ink-500: #667085;   /* muted      — text-muted   */
  --vg-ink-400: #98A2B3;   /* faint      — text-faint   */
  --vg-ink-300: #D0D5DD;   /* border-strong             */
  --vg-ink-200: #E4E7EC;   /* borders                   */
  --vg-ink-100: #F2F4F7;   /* hairline / hover          */
  --vg-ink-050: #F9FAFB;   /* subtle fill               */

  /* --- Surfaces --- */
  --vg-bg:       #F5F7FA;   /* app canvas — bg-app      */
  --vg-surface:  #FFFFFF;   /* cards                    */
  --vg-surface-2:#F9FAFB;   /* insets                   */
  --vg-sidebar:  #FFFFFF;   /* keeps its light rail (design unchanged) */

  /* --- Chart palette — six distinguishable hues, all drawn from the
         Super Admin system (green / blue / amber / purple / deep-green / red) --- */
  --vg-c1: #16A34A; --vg-c2: #2563EB; --vg-c3: #D97706;
  --vg-c4: #7C3AED; --vg-c5: #0B6E4F; --vg-c6: #D92D20;

  /* Radii */
  --vg-r-xs: 7px;
  --vg-r-sm: 10px;
  --vg-r-md: 14px;
  --vg-r-lg: 18px;
  --vg-r-xl: 24px;
  --vg-r-pill: 999px;

  /* Elevation — feather-light, Vercel/Linear style */
  --vg-sh-xs: 0 1px 2px rgba(16,18,40,.04);
  --vg-sh-sm: 0 1px 2px rgba(16,18,40,.05), 0 1px 3px rgba(16,18,40,.04);
  --vg-sh-md: 0 4px 12px -2px rgba(16,18,40,.08), 0 2px 6px -2px rgba(16,18,40,.05);
  --vg-sh-lg: 0 16px 40px -12px rgba(16,18,40,.16), 0 6px 16px -8px rgba(16,18,40,.08);
  --vg-sh-pop: 0 8px 28px -6px rgba(16,18,40,.16);

  --vg-ring: 0 0 0 4px rgba(22,163,74,.14);          /* Super Admin --ring */
  --vg-focus-border: var(--vg-brand-400);            /* focused input border */
  --vg-focus-outline: var(--vg-brand-500);           /* :focus-visible outline */
  --vg-disabled-opacity: .5;                         /* Super Admin .btn:disabled */

  --vg-sidebar-w: 268px;
  --vg-header-h: 68px;

  --vg-font: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vg-mono: var(--vg-font);

  /* Dark hero banners (Overview + Station detail). Deliberately NOT tied to the
     ink ramp: these stay dark in BOTH themes, whereas --vg-ink-900 inverts to
     near-white in dark and would flip the gradient inside out. */
  --vg-hero-from: #0A1F17;   /* Super Admin sidebar green-black family */
  --vg-hero-to:   #0B3D2C;
  --vg-hero-glow: rgba(34,197,94,.30);

  /* Inverted chip (toasts, hover labels) + translucent topbar.
     Tokenised because both flip wholesale between themes. */
  --vg-invert-bg: #101828;
  --vg-invert-fg: #ffffff;
  --vg-topbar-bg: rgba(255,255,255,.82);

  /* ---- Map Bootstrap variables onto our tokens ---- */
  --bs-body-font-family: var(--vg-font);
  --bs-body-color: var(--vg-ink-600);
  --bs-body-bg: var(--vg-bg);
  --bs-border-color: var(--vg-ink-200);
  --bs-primary: var(--vg-accent);
  --bs-primary-rgb: 11, 110, 79;
  --bs-link-color: var(--vg-accent);
  --bs-link-hover-color: var(--vg-accent-700);
  --bs-border-radius: var(--vg-r-sm);
  --bs-emphasis-color: var(--vg-ink-900);
}

/* ----------------------------------------------------------------------------
   1b. Dark theme

   Only the token layer changes — no component rule is duplicated. The ink ramp
   inverts in place (900 = strongest contrast in BOTH themes), so every existing
   `var(--vg-ink-900)` heading / `var(--vg-ink-200)` border keeps its meaning.

   `[data-theme]` is an explicit user choice and always wins. When the attribute
   is absent we follow the OS via prefers-color-scheme.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  /* Mirrors the Super Admin dark theme: surfaces/ink come straight from its
     [data-theme="dark"] block, and brand/semantic foregrounds are lifted the
     same way it lifts .kpi-icon.green to --brand-300 for legibility on dark. */
  --vg-primary:   var(--vg-brand-400);
  --vg-secondary: var(--vg-brand-300);

  --vg-accent:        var(--vg-brand-400);
  --vg-accent-600:    var(--vg-brand-300);
  --vg-accent-700:    var(--vg-brand-300);   /* text on tints -> light end */
  --vg-accent-050:    rgba(34,197,94,.14);
  --vg-accent-100:    rgba(34,197,94,.20);
  --vg-accent-soft:   rgba(34,197,94,.16);
  --vg-accent-grad:   var(--vg-brand-300);
  --vg-accent-shadow: rgba(34,197,94,.32);
  --vg-on-accent: #052E1B;   /* dark ink on the lifted green */

  /* Ink ramp inverted: 900 stays "most contrast", 050 stays "subtlest fill" */
  --vg-ink-900: #F9FAFB;   /* text-strong  */
  --vg-ink-800: #E9ECF1;
  --vg-ink-700: #E4E7EC;   /* text-default */
  --vg-ink-600: #C8CFDA;
  --vg-ink-500: #98A2B3;   /* text-muted   */
  --vg-ink-400: #667085;   /* text-faint   */
  --vg-ink-300: #2D3A4D;   /* border-strong*/
  --vg-ink-200: #1F2937;   /* border       */
  --vg-ink-100: #1A2333;   /* border-light / hover */
  --vg-ink-050: #0E1623;

  /* Surfaces */
  --vg-bg:       #0A0F1A;   /* bg-app      */
  --vg-surface:  #111827;   /* bg-surface  */
  --vg-surface-2:#0E1623;   /* bg-surface-2*/
  --vg-sidebar:  #0E1623;   /* recessed vs. surface, as in light */

  /* Semantic — lifted foreground on the same rgba tints the admin dark uses */
  --vg-success:  #4ADE80;  --vg-success-bg: rgba(22,163,74,.16);  --vg-success-border: rgba(74,222,128,.30);
  --vg-danger:   #FDA29B;  --vg-danger-bg:  rgba(217,45,32,.18);  --vg-danger-border:  rgba(253,162,155,.32);
  --vg-warning:  #FBBF24;  --vg-warning-bg: rgba(217,119,6,.18);  --vg-warning-border: rgba(251,191,36,.30);
  --vg-info:     #84ADFF;  --vg-info-bg:    rgba(37,99,235,.18);  --vg-info-border:    rgba(132,173,255,.32);
  --vg-violet:   #C3B5FD;  --vg-violet-bg:  rgba(124,58,237,.20);
  --vg-teal:     var(--vg-info);   --vg-teal-bg: var(--vg-info-bg);
  --vg-pink:     var(--vg-violet); --vg-pink-bg: var(--vg-violet-bg);
  --vg-light:    #1A2333;
  --vg-dark:     #F9FAFB;
  --vg-muted:    #98A2B3;

  --vg-success-fg: var(--vg-success);  --vg-warning-fg: var(--vg-warning);
  --vg-danger-fg:  var(--vg-danger);   --vg-info-fg:    var(--vg-info);
  --vg-violet-fg:  var(--vg-violet);   --vg-teal-fg:    var(--vg-teal);
  --vg-pink-fg:    var(--vg-pink);

  --vg-ring: 0 0 0 4px rgba(34,197,94,.20);
  --vg-focus-border: var(--vg-brand-400);
  --vg-focus-outline: var(--vg-brand-300);

  /* Chart palette — same six hues, lifted for a dark canvas */
  --vg-c1: #4ADE80; --vg-c2: #84ADFF; --vg-c3: #FBBF24;
  --vg-c4: #C3B5FD; --vg-c5: #22C55E; --vg-c6: #FDA29B;

  /* Elevation reads as depth, not haze, on dark */
  --vg-sh-xs: 0 1px 2px rgba(0,0,0,.32);
  --vg-sh-sm: 0 1px 2px rgba(0,0,0,.36), 0 1px 3px rgba(0,0,0,.28);
  --vg-sh-md: 0 4px 12px -2px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.36);
  --vg-sh-lg: 0 16px 40px -12px rgba(0,0,0,.66), 0 6px 16px -8px rgba(0,0,0,.46);
  --vg-sh-pop: 0 8px 28px -6px rgba(0,0,0,.58);
  --vg-ring: 0 0 0 3.5px rgba(127,120,255,.26);

  /* Inverted chip flips to a light-on-dark-surface card */
  --vg-invert-bg: #1F2937;
  --vg-invert-fg: #f3f4f9;
  --vg-topbar-bg: rgba(17,24,39,.84);

  color-scheme: dark;
}

/* The OS preference is resolved into `data-theme` by the pre-paint boot
   script in each page <head>, so the dark palette is declared EXACTLY ONCE
   above. Duplicating it inside a prefers-color-scheme block would mean two
   copies drifting apart on every palette change. */

/* Cross-fade the repaint. Excluded: transforms/width (sidebar) and anything
   already animating, so this never fights the collapse transition. */
.vg-theming, .vg-theming * {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease !important;
}

/* ----------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--vg-font);
  background: var(--vg-bg);
  color: var(--vg-ink-600);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.006em;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--vg-font); color: var(--vg-ink-900); font-weight: 600; letter-spacing: -0.02em; }
a { text-decoration: none; }
::selection { background: var(--vg-accent-100); color: var(--vg-accent-700); }
.text-ink   { color: var(--vg-ink-900) !important; }
.text-body2 { color: var(--vg-ink-600) !important; }
.text-muted2{ color: var(--vg-ink-500) !important; }
.text-faint { color: var(--vg-ink-400) !important; }
.mono { font-family: var(--vg-mono); font-size: .92em; letter-spacing: -0.01em; }
/* Buttons/Labels weight — the panel's single "emphasized" weight, used for
   list-item titles, KPI figures scoped smaller than a heading, table strong
   cells, chip/badge text, etc. Renamed from the old .fw-650 utility now that
   the panel standardizes on {400 body, 500 labels/sub-headings, 600 headings}. */
.fw-strong { font-weight: 500; }

/* thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--vg-ink-300) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--vg-ink-300); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--vg-ink-400); background-clip: content-box; }

/* ----------------------------------------------------------------------------
   3. App shell — sidebar / topbar / content
   -------------------------------------------------------------------------- */
.vg-shell { display: flex; min-height: 100vh; }

.vg-sidebar {
  width: var(--vg-sidebar-w); flex-shrink: 0;
  background: var(--vg-sidebar);
  border-right: 1px solid var(--vg-ink-200);
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.vg-brand {
  height: var(--vg-header-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 0 22px; border-bottom: 1px solid var(--vg-ink-100);
}
.vg-brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--vg-on-accent); font-size: 19px;
  background: linear-gradient(145deg, var(--vg-accent-grad), var(--vg-accent-700));
  box-shadow: 0 4px 12px -2px var(--vg-accent-shadow);
}
.vg-brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.vg-brand-txt .n { font-weight: 600; font-size: 15.5px; color: var(--vg-ink-900); letter-spacing: -0.03em; }
.vg-brand-txt .s { font-size: 11px; color: var(--vg-ink-400); font-weight: 500; letter-spacing: .02em; }

.vg-nav { flex: 1; overflow-y: auto; padding: 14px 14px 20px; }
.vg-nav-label {
  font-size: 10.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--vg-ink-400); padding: 0 10px; margin: 18px 0 7px;
}
.vg-nav-label:first-child { margin-top: 2px; }
.vg-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8.5px 11px; margin-bottom: 2px; border-radius: var(--vg-r-sm);
  color: var(--vg-ink-600); font-weight: 500; font-size: 13.5px;
  transition: background .15s, color .15s; position: relative;
}
.vg-nav-item .bi { font-size: 17px; width: 20px; text-align: center; color: var(--vg-ink-400); transition: color .15s; }
.vg-nav-item:hover { background: var(--vg-ink-050); color: var(--vg-ink-900); }
.vg-nav-item:hover .bi { color: var(--vg-ink-600); }
.vg-nav-item.active { background: var(--vg-accent-050); color: var(--vg-accent-700); }
.vg-nav-item.active .bi { color: var(--vg-accent); }
.vg-nav-item .vg-nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 500; min-width: 20px; text-align: center;
  padding: 1px 7px; border-radius: 999px; background: var(--vg-accent); color: var(--vg-on-accent);
}
.vg-nav-item .vg-nav-badge.amber { background: var(--vg-warning); }
.vg-nav-item.active .vg-nav-badge { background: var(--vg-accent); }

.vg-side-foot { padding: 14px; border-top: 1px solid var(--vg-ink-100); }
.vg-plan {
  border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-md);
  padding: 14px; background: var(--vg-surface-2);
}
.vg-plan .t { font-size: 12.5px; font-weight: 500; color: var(--vg-ink-900); display: flex; align-items: center; gap: 6px; }
.vg-plan .d { font-size: 11.5px; color: var(--vg-ink-500); margin: 4px 0 10px; }
.vg-plan .bar { height: 6px; border-radius: 999px; background: var(--vg-ink-100); overflow: hidden; }
.vg-plan .bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--vg-accent-grad), var(--vg-accent)); }

.vg-main { flex: 1; margin-left: var(--vg-sidebar-w); min-width: 0; display: flex; flex-direction: column; }

.vg-topbar {
  height: var(--vg-header-h); flex-shrink: 0;
  background: var(--vg-topbar-bg); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--vg-ink-200);
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: 14px; padding: 0 26px;
}
.vg-search {
  flex: 1; max-width: 440px; position: relative;
}
.vg-search .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--vg-ink-400); font-size: 15px; }
.vg-search input {
  width: 100%; height: 40px; border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-pill);
  background: var(--vg-ink-050); padding: 0 16px 0 40px; font-size: 13.5px; color: var(--vg-ink-700);
  transition: all .18s;
}
.vg-search input::placeholder { color: var(--vg-ink-400); }
.vg-search input:focus { outline: none; background: var(--vg-surface); border-color: var(--vg-accent); box-shadow: var(--vg-ring); }
.vg-search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--vg-font); font-size: 11px; font-weight: 500; color: var(--vg-ink-400);
  background: var(--vg-surface); border: 1px solid var(--vg-ink-200); border-radius: 6px; padding: 2px 7px;
}

.vg-iconbtn {
  width: 40px; height: 40px; border-radius: var(--vg-r-sm); border: 1px solid transparent;
  display: grid; place-items: center; color: var(--vg-ink-500); background: transparent;
  transition: all .15s; position: relative; flex-shrink: 0;
}
.vg-iconbtn:hover { background: var(--vg-ink-050); color: var(--vg-ink-900); }
.vg-iconbtn .bi { font-size: 18px; }
.vg-iconbtn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--vg-danger); border: 1.5px solid #fff; }

.vg-userchip {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px;
  border-radius: var(--vg-r-pill); border: 1px solid var(--vg-ink-200); background: var(--vg-surface);
  transition: all .15s;
}
.vg-userchip:hover { background: var(--vg-ink-050); box-shadow: var(--vg-sh-xs); }
.vg-userchip .meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; min-width: 0; }
.vg-userchip .meta .n { font-size: 12.5px; font-weight: 500; color: var(--vg-ink-900); }
.vg-userchip .meta .r { font-size: 11px; color: var(--vg-ink-500); }
.vg-userchip .bi { color: var(--vg-ink-400); font-size: 14px; }

.vg-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 500; font-size: 12.5px; color: var(--vg-on-accent);
  background: linear-gradient(145deg, var(--vg-accent-grad), var(--vg-accent-700));
}
.vg-avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.vg-avatar.lg { width: 52px; height: 52px; font-size: 17px; border-radius: 16px; }
.vg-avatar.teal { background: linear-gradient(145deg, #60A5FA, var(--vg-info)); }
.vg-avatar.amber { background: linear-gradient(145deg, #FBBF24, var(--vg-warning)); }
.vg-avatar.pink { background: linear-gradient(145deg, #A78BFA, var(--vg-violet)); }
.vg-avatar.slate { background: linear-gradient(145deg, var(--vg-ink-400), var(--vg-ink-600)); }

.vg-content { padding: 28px 34px 56px; width: 100%; flex: 1; }

/* Page header — legacy inline breadcrumb (kept for pages not yet migrated to
   the icon-tile + breadcrumb-card pattern below — see partials/page-head). */
.vg-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.vg-crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--vg-ink-500); margin-bottom: 9px; flex-wrap: wrap; }
.vg-crumb a { color: var(--vg-ink-500); }
.vg-crumb a:hover { color: var(--vg-accent); }
.vg-crumb .bi { font-size: 11px; color: var(--vg-ink-300); }
.vg-crumb .cur { color: var(--vg-ink-700); font-weight: 500; }
.vg-page-title { font-size: 25px; font-weight: 600; color: var(--vg-ink-900); margin: 0; letter-spacing: -0.035em; }
.vg-page-sub { color: var(--vg-ink-500); font-size: 14px; margin: 5px 0 0; max-width: 680px; }
.vg-page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------------------
   3b. Page header v2 — icon tile + title/subtitle (left), breadcrumb "pill"
   card (right), rendered by <x-owner.page-head>. Rolling out module-by-module
   on top of the same .vg-page-head/.vg-page-title/.vg-page-sub/.vg-page-actions
   primitives above — only additive classes, nothing here removes or renames
   an existing rule.
   -------------------------------------------------------------------------- */
.vg-page-head-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.vg-page-ic {
  width: 48px; height: 48px; border-radius: var(--vg-r-md); flex-shrink: 0;
  display: grid; place-items: center; font-size: 21px;
  background: var(--vg-accent-050); color: var(--vg-accent-700);
}
.vg-page-head-tx { min-width: 0; padding-top: 1px; }

/* Breadcrumb pill card */
.vg-crumb-card {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 36px; padding: 0 14px; border-radius: var(--vg-r-pill);
  border: 1px solid var(--vg-ink-200); background: var(--vg-surface);
  box-shadow: var(--vg-sh-xs); font-size: 12.5px; color: var(--vg-ink-500); white-space: nowrap;
}
.vg-crumb-card .bi-house-door-fill { font-size: 13px; color: var(--vg-ink-400); }
.vg-crumb-card a { color: var(--vg-ink-500); transition: color .15s; }
.vg-crumb-card a:hover { color: var(--vg-accent); }
.vg-crumb-card .bi-chevron-right { font-size: 9px; color: var(--vg-ink-300); }
.vg-crumb-card .cur { color: var(--vg-accent-700); font-weight: 600; }

/* ----------------------------------------------------------------------------
   4. Buttons  (extend Bootstrap)
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 500;
  font-family: var(--vg-font); font-size: 13.5px; border-radius: var(--vg-r-sm);
  padding: 8px 15px; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 7px;
  transition: all .16s; line-height: 1.2;
}
.btn .bi { font-size: 15px; }
.btn-sm { padding: 5.5px 11px; font-size: 12.5px; border-radius: var(--vg-r-xs); }
.btn-lg { padding: 11px 20px; font-size: 14.5px; border-radius: var(--vg-r-md); }
.btn-primary {
  --bs-btn-bg: var(--vg-accent); --bs-btn-border-color: var(--vg-accent);
  --bs-btn-hover-bg: var(--vg-accent-600); --bs-btn-hover-border-color: var(--vg-accent-600);
  --bs-btn-active-bg: var(--vg-accent-700); --bs-btn-active-border-color: var(--vg-accent-700);
  --bs-btn-color: var(--vg-on-accent); --bs-btn-hover-color: var(--vg-on-accent);
  box-shadow: 0 1px 2px var(--vg-accent-shadow), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover { box-shadow: 0 4px 12px -2px var(--vg-accent-shadow); }
.btn-light2 {
  background: var(--vg-surface); border: 1px solid var(--vg-ink-200); color: var(--vg-ink-700);
  box-shadow: var(--vg-sh-xs);
}
.btn-light2:hover { background: var(--vg-ink-050); border-color: var(--vg-ink-300); color: var(--vg-ink-900); }
.btn-ghost2 { background: transparent; border: 1px solid transparent; color: var(--vg-ink-600); }
.btn-ghost2:hover { background: var(--vg-ink-100); color: var(--vg-ink-900); }
.btn-danger-soft { background: var(--vg-danger-bg); border: 1px solid transparent; color: var(--vg-danger-fg); }
.btn-danger-soft:hover { background: var(--vg-danger-border); color: var(--vg-danger-fg); }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 30px; height: 30px; }

/* ----------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.vg-card {
  background: var(--vg-surface); border: 1px solid var(--vg-ink-200);
  border-radius: var(--vg-r-md); box-shadow: var(--vg-sh-sm);
}
.vg-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--vg-ink-100);
}
.vg-card-title { font-size: 14.5px; font-weight: 600; color: var(--vg-ink-900); margin: 0; letter-spacing: -0.02em; }
.vg-card-sub { font-size: 12.5px; color: var(--vg-ink-500); margin: 2px 0 0; font-weight: 500; }
.vg-card-body { padding: 20px; }
.vg-card-body.tight { padding: 8px 20px; }
.vg-link { color: var(--vg-accent); font-weight: 500; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.vg-link:hover { color: var(--vg-accent-700); }

/* KPI / stat cards */
.vg-stat {
  background: var(--vg-surface); border: 1px solid var(--vg-ink-200);
  border-radius: var(--vg-r-md); padding: 18px 18px 16px; position: relative; overflow: hidden;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.vg-stat:hover { box-shadow: var(--vg-sh-md); transform: translateY(-2px); border-color: var(--vg-ink-300); }
.vg-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.vg-stat-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; }
.vg-stat-ic.indigo { background: var(--vg-accent-soft); color: var(--vg-accent); }
.vg-stat-ic.teal   { background: var(--vg-teal-bg); color: var(--vg-teal); }
.vg-stat-ic.amber  { background: var(--vg-warning-bg); color: var(--vg-warning); }
.vg-stat-ic.pink   { background: var(--vg-pink-bg); color: var(--vg-pink); }
.vg-stat-ic.info   { background: var(--vg-info-bg); color: var(--vg-info); }
.vg-stat-ic.violet { background: var(--vg-violet-bg); color: var(--vg-violet); }
.vg-stat-ic.danger { background: var(--vg-danger-bg); color: var(--vg-danger); }
.vg-stat-label { font-size: 12.5px; color: var(--vg-ink-500); font-weight: 500; }
.vg-stat-value { font-size: 27px; font-weight: 600; color: var(--vg-ink-900); letter-spacing: -0.04em; line-height: 1.1; margin: 2px 0 0; font-feature-settings: "tnum"; }
.vg-stat-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 12.5px; }
.vg-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.vg-trend.up { color: var(--vg-success-fg); background: var(--vg-success-bg); }
.vg-trend.down { color: var(--vg-danger-fg); background: var(--vg-danger-bg); }
.vg-trend.flat { color: var(--vg-ink-500); background: var(--vg-ink-100); }
.vg-trend .bi { font-size: 12px; }
.vg-stat-foot .ctx { color: var(--vg-ink-400); }

/* ----------------------------------------------------------------------------
   6. Badges / pills / chips
   -------------------------------------------------------------------------- */
.vg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  line-height: 1.5; white-space: nowrap; border: 1px solid transparent;
}
.vg-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vg-badge.green  { color: var(--vg-success-fg); background: var(--vg-success-bg); }
.vg-badge.amber  { color: var(--vg-warning-fg); background: var(--vg-warning-bg); }
.vg-badge.red    { color: var(--vg-danger-fg);  background: var(--vg-danger-bg); }
.vg-badge.blue   { color: var(--vg-info-fg);    background: var(--vg-info-bg); }
.vg-badge.violet { color: var(--vg-violet-fg);  background: var(--vg-violet-bg); }
.vg-badge.teal   { color: var(--vg-teal-fg);    background: var(--vg-teal-bg); }
.vg-badge.gray   { color: var(--vg-ink-600); background: var(--vg-ink-100); }
.vg-badge.outline { background: var(--vg-surface); border-color: var(--vg-ink-200); color: var(--vg-ink-600); }

.vg-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--vg-ink-200); background: var(--vg-surface);
  font-size: 12.5px; font-weight: 500; color: var(--vg-ink-600);
}
.vg-chip .bi { font-size: 13px; color: var(--vg-ink-400); }

/* ----------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */
.vg-table-wrap { overflow-x: auto; }
.vg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.vg-table thead th {
  text-align: left; padding: 10px 12px; background: var(--vg-surface-2);
  color: var(--vg-ink-500); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  border-bottom: 1px solid var(--vg-ink-200); position: sticky; top: 0;
}
.vg-table thead th.sortable { cursor: pointer; user-select: none; }
.vg-table thead th.sortable:hover { color: var(--vg-ink-700); }
.vg-table thead th .bi { font-size: 12px; opacity: .55; }
.vg-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--vg-ink-100); color: var(--vg-ink-600); vertical-align: middle; }
.vg-table tbody tr { transition: background .12s; }
.vg-table tbody tr:hover { background: var(--vg-surface-2); }
.vg-table tbody tr:last-child td { border-bottom: none; }
.vg-cell-strong { color: var(--vg-ink-900); font-weight: 500; }
.vg-cell-user { display: flex; align-items: center; gap: 11px; }
.vg-cell-user .n { font-weight: 500; color: var(--vg-ink-900); }
.vg-cell-user .e { font-size: 12px; color: var(--vg-ink-500); }

/* Plain station/entity reference inside a table cell — an icon + name with
   no chip border/pill and no truncation, unlike .vg-chip/.vg-cell-strong:
   a station name is meaningful identifying context, so it's allowed to wrap
   onto a second line rather than being cut off with an ellipsis. */
.vg-cell-station { display: inline-flex; align-items: center; gap: 7px; color: var(--vg-ink-700); font-size: 13px; white-space: normal; }
.vg-cell-station .bi { font-size: 14px; color: var(--vg-ink-400); flex-shrink: 0; }

.vg-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--vg-ink-100); flex-wrap: wrap; }
.vg-toolbar .vg-search-mini { position: relative; flex: 1; min-width: 180px; max-width: 300px; }
.vg-toolbar .vg-search-mini .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--vg-ink-400); }
.vg-toolbar .vg-search-mini input { width: 100%; height: 36px; border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-sm); background: var(--vg-ink-050); padding: 0 12px 0 34px; font-size: 13px; }
.vg-toolbar .vg-search-mini input:focus { outline: none; background: var(--vg-surface); border-color: var(--vg-accent); box-shadow: var(--vg-ring); }
.vg-toolbar-spacer { flex: 1; }

/* Pagination */
.vg-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--vg-ink-100); flex-wrap: wrap; }
.vg-pagination-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vg-pagination .info { font-size: 13px; color: var(--vg-ink-500); }
.vg-pagination .pages { display: flex; gap: 4px; }

/* "Rows per page" — pagination-bar page-length select, shared by every
   server-side table via vgServerTable()/vgRenderPagination() in owner-app.js. */
.vg-page-size { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--vg-ink-500); }
.vg-page-size select {
  height: 30px; padding: 0 26px 0 10px; border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-xs);
  background-color: var(--vg-surface); color: var(--vg-ink-700); font-size: 12.5px; font-weight: 500;
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6e82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
.vg-page-size select:focus { outline: none; border-color: var(--vg-accent); box-shadow: var(--vg-ring); }
.vg-page-btn { min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--vg-r-xs); border: 1px solid transparent; background: transparent; color: var(--vg-ink-600); font-weight: 500; font-size: 13px; display: grid; place-items: center; transition: all .13s; }
.vg-page-btn:hover:not(:disabled) { background: var(--vg-ink-100); color: var(--vg-ink-900); }
.vg-page-btn.active { background: var(--vg-accent); color: var(--vg-on-accent); }
.vg-page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ----------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.vg-field { margin-bottom: 16px; }
.vg-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--vg-ink-700); margin-bottom: 6px; }
.vg-label .req { color: var(--vg-danger); }
.vg-hint { font-size: 12px; color: var(--vg-ink-500); margin-top: 6px; }
.vg-input, .vg-select, .vg-textarea {
  width: 100%; border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-sm);
  background: var(--vg-surface); color: var(--vg-ink-800); font-size: 13.5px; font-family: var(--vg-font);
  transition: border-color .15s, box-shadow .15s;
}
.vg-input, .vg-select { height: 42px; padding: 0 13px; }
.vg-textarea { padding: 11px 13px; min-height: 96px; resize: vertical; }
.vg-input:focus, .vg-select:focus, .vg-textarea:focus { outline: none; border-color: var(--vg-accent); box-shadow: var(--vg-ring); }
.vg-input::placeholder, .vg-textarea::placeholder { color: var(--vg-ink-400); }
.vg-select {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6e82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.vg-input-group { position: relative; }
.vg-input-group .lead-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--vg-ink-400); font-size: 15px; pointer-events: none; }
.vg-input-group .lead-ic + .vg-input { padding-left: 39px; }
.vg-input-group .prefix { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--vg-ink-500); font-weight: 500; font-size: 13.5px; }
.vg-input-group .prefix + .vg-input { padding-left: 30px; }

/* filter select (compact pill) */
.vg-filter {
  height: 36px; padding: 0 32px 0 13px; border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-sm);
  background: var(--vg-surface); color: var(--vg-ink-700); font-size: 13px; font-weight: 500; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6e82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.vg-filter:focus { outline: none; border-color: var(--vg-accent); box-shadow: var(--vg-ring); }

/* Toggle switch */
.vg-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.vg-switch input { opacity: 0; width: 0; height: 0; }
.vg-switch .track { position: absolute; inset: 0; background: var(--vg-ink-300); border-radius: 999px; transition: .2s; }
.vg-switch .track::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.vg-switch input:checked + .track { background: var(--vg-accent); }
.vg-switch input:checked + .track::before { transform: translateX(18px); }

/* Segmented control */
.vg-segment { display: inline-flex; padding: 3px; gap: 2px; background: var(--vg-ink-100); border-radius: var(--vg-r-sm); }
.vg-segment button { padding: 5px 13px; border: none; background: transparent; border-radius: var(--vg-r-xs); font-size: 12.5px; font-weight: 500; color: var(--vg-ink-500); transition: all .14s; }
.vg-segment button.active { background: var(--vg-surface); color: var(--vg-accent-700); box-shadow: var(--vg-sh-xs); }

/* Checkbox / radio tint */
.vg-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--vg-ink-300); accent-color: var(--vg-accent); cursor: pointer; }

/* ----------------------------------------------------------------------------
   9. Misc components
   -------------------------------------------------------------------------- */
.vg-progress { height: 8px; border-radius: 999px; background: var(--vg-ink-100); overflow: hidden; }
.vg-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--vg-accent-grad), var(--vg-accent)); }
.vg-progress.teal > span { background: linear-gradient(90deg, #60A5FA, var(--vg-teal)); }
.vg-progress.amber > span { background: linear-gradient(90deg, #FBBF24, var(--vg-warning)); }

.vg-divider { height: 1px; background: var(--vg-ink-100); margin: 18px 0; border: 0; }

/* Notice / callout */
.vg-notice { display: flex; gap: 13px; padding: 14px 16px; border-radius: var(--vg-r-md); border: 1px solid var(--vg-ink-200); background: var(--vg-surface); align-items: flex-start; }
.vg-notice .bi { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.vg-notice .t { font-size: 13.5px; font-weight: 600; color: var(--vg-ink-900); }
.vg-notice .d { font-size: 13px; color: var(--vg-ink-600); margin-top: 2px; }
.vg-notice.info    { background: var(--vg-info-bg);    border-color: var(--vg-info-border); }   .vg-notice.info .bi { color: var(--vg-info); }
.vg-notice.warn    { background: var(--vg-warning-bg); border-color: var(--vg-warning-border); }   .vg-notice.warn .bi { color: var(--vg-warning); }
.vg-notice.success { background: var(--vg-success-bg); border-color: var(--vg-success-border); }   .vg-notice.success .bi { color: var(--vg-success); }
.vg-notice.danger  { background: var(--vg-danger-bg);  border-color: var(--vg-danger-border); }   .vg-notice.danger .bi { color: var(--vg-danger); }

/* Timeline */
.vg-timeline { position: relative; padding-left: 26px; }
.vg-timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--vg-ink-100); }
.vg-tl-item { position: relative; padding-bottom: 20px; }
.vg-tl-item:last-child { padding-bottom: 0; }
.vg-tl-dot { position: absolute; left: -26px; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--vg-surface); border: 3px solid var(--vg-accent); }
.vg-tl-dot.teal { border-color: var(--vg-teal); } .vg-tl-dot.amber { border-color: var(--vg-warning); }
.vg-tl-dot.danger { border-color: var(--vg-danger); } .vg-tl-dot.gray { border-color: var(--vg-ink-300); }
.vg-tl-item .t { font-weight: 500; color: var(--vg-ink-900); font-size: 13.5px; }
.vg-tl-item .d { color: var(--vg-ink-600); font-size: 12.5px; margin-top: 1px; }
.vg-tl-item .time { color: var(--vg-ink-400); font-size: 11.5px; margin-top: 3px; }

/* List row */
.vg-list-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--vg-ink-100); }
.vg-list-row:last-child { border-bottom: none; }
.vg-rank { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 500; font-size: 12px; background: var(--vg-ink-100); color: var(--vg-ink-500); flex-shrink: 0; }
.vg-rank.top { background: var(--vg-accent); color: var(--vg-on-accent); }

/* Quick-action tile */
.vg-qa { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-md); background: var(--vg-surface); transition: all .16s; }
.vg-qa:hover { border-color: var(--vg-accent); background: var(--vg-accent-050); transform: translateY(-1px); box-shadow: var(--vg-sh-sm); }
.vg-qa .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.vg-qa .n { font-weight: 500; color: var(--vg-ink-900); font-size: 13.5px; }
.vg-qa .d { font-size: 11.5px; color: var(--vg-ink-500); }
.vg-qa .bi.arr { margin-left: auto; color: var(--vg-ink-300); }
.vg-qa:hover .bi.arr { color: var(--vg-accent); }

/* Dropdown menu (Bootstrap dropdown restyle) */
.dropdown-menu { border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-md); box-shadow: var(--vg-sh-pop); padding: 6px; font-size: 13.5px; --bs-dropdown-min-width: 200px; }
.dropdown-item { border-radius: var(--vg-r-xs); padding: 8px 10px; font-weight: 500; color: var(--vg-ink-700); display: flex; align-items: center; gap: 10px; }
.dropdown-item .bi { font-size: 15px; color: var(--vg-ink-400); width: 18px; }
.dropdown-item:hover { background: var(--vg-ink-050); color: var(--vg-ink-900); }
.dropdown-item:active { background: var(--vg-accent-050); color: var(--vg-accent-700); }
.dropdown-item.danger { color: var(--vg-danger-fg); } .dropdown-item.danger .bi { color: var(--vg-danger); }
.dropdown-divider { border-color: var(--vg-ink-100); margin: 5px 4px; }

/* Modal restyle */
.modal-content { border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-lg); box-shadow: var(--vg-sh-lg); }

/* Bootstrap 5.3 dropped `justify-content` from .modal-header and instead pushes
   the dismiss control right via `.modal-header .btn-close { margin-left:auto }`.
   Our close button is a .vg-iconbtn, not a .btn-close, so it never picked that
   up and sat flush against the title. Lay the header out explicitly instead of
   depending on Bootstrap's close-button-specific rule. */
.modal-header { border-bottom: 1px solid var(--vg-ink-100); padding: 18px 20px 15px;
  display: flex; align-items: flex-start; gap: 13px; }
.modal-header .vg-modal-ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 17px;
  background: var(--vg-accent-050); color: var(--vg-accent); }
.modal-header .vg-modal-htx { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
/* -8px optically centres the 40px button against the title's own line box,
   so it stays aligned whether or not a subtitle is present. */
.modal-header .vg-modal-x { margin-left: auto; flex-shrink: 0; margin-top: -8px; margin-right: -4px; }
.modal-title { font-size: 17px; font-weight: 600; color: var(--vg-ink-900); letter-spacing: -0.02em; line-height: 1.3; }
.modal-header .vg-card-sub { line-height: 1.45; margin-top: 2px; }
.modal-body { padding: 20px 22px; }
.modal-footer { border-top: 1px solid var(--vg-ink-100); padding: 15px 22px; background: var(--vg-surface-2); border-radius: 0 0 var(--vg-r-lg) var(--vg-r-lg); }

/* Tabs */
.vg-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--vg-ink-200); margin-bottom: 22px; overflow-x: auto; }
.vg-tab { padding: 11px 15px; border: none; background: transparent; font-weight: 500; font-size: 13.5px; color: var(--vg-ink-500); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .15s; }
.vg-tab:hover { color: var(--vg-ink-800); }
.vg-tab.active { color: var(--vg-accent-700); border-bottom-color: var(--vg-accent); }

/* Toast */
.vg-toast-host { position: fixed; bottom: 24px; right: 24px; z-index: 1090; display: flex; flex-direction: column; gap: 10px; }
.vg-toast { display: flex; align-items: center; gap: 11px; background: var(--vg-invert-bg); color: var(--vg-invert-fg); border-radius: var(--vg-r-md); padding: 12px 16px; min-width: 280px; max-width: 400px; box-shadow: var(--vg-sh-lg); font-size: 13.5px; font-weight: 500; animation: vgToastIn .28s cubic-bezier(.2,.9,.3,1); }
.vg-toast .bi { font-size: 17px; }
.vg-toast.success .bi { color: var(--vg-brand-300); }
.vg-toast.danger .bi { color: #FDA29B; }
.vg-toast.info .bi { color: #84ADFF; }
@keyframes vgToastIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* Detail key/value list */
.vg-dl { display: flex; flex-direction: column; }
.vg-dl .row2 { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--vg-ink-100); font-size: 13.5px; }
.vg-dl .row2:last-child { border-bottom: none; }
.vg-dl .k { color: var(--vg-ink-500); }
.vg-dl .v { color: var(--vg-ink-900); font-weight: 500; text-align: right; }

/* Image gallery / photo tiles */
.vg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.vg-photo { position: relative; border-radius: var(--vg-r-md); overflow: hidden; border: 1px solid var(--vg-ink-200); aspect-ratio: 4/3; display: grid; place-items: center; color: var(--vg-ink-300); background: linear-gradient(135deg, var(--vg-ink-050), var(--vg-ink-100)); }
.vg-photo .ph-in { text-align: center; }
.vg-photo .ph-in .bi { font-size: 30px; }
.vg-photo .ph-in .cap { font-size: 11px; color: var(--vg-ink-500); margin-top: 6px; padding: 0 8px; }
.vg-photo .ph-badge { position: absolute; top: 8px; left: 8px; }
.vg-photo .ph-act { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .16s; }
.vg-photo:hover .ph-act { opacity: 1; }
.vg-photo.cover-main { grid-column: span 2; grid-row: span 2; }
.vg-photo.add { border-style: dashed; cursor: pointer; background: var(--vg-surface-2); }
.vg-photo.add:hover { border-color: var(--vg-accent); color: var(--vg-accent); background: var(--vg-accent-050); }

/* Amenity chips */
.vg-amenity { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--vg-ink-200); border-radius: var(--vg-r-md); background: var(--vg-surface); cursor: pointer; user-select: none; transition: all .15s; }
.vg-amenity:hover { border-color: var(--vg-ink-300); background: var(--vg-ink-050); }
.vg-amenity input { position: absolute; opacity: 0; width: 0; height: 0; }
.vg-amenity .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--vg-ink-100); color: var(--vg-ink-500); font-size: 15px; flex-shrink: 0; }
.vg-amenity .lbl { flex: 1; font-size: 13px; font-weight: 500; color: var(--vg-ink-700); }
.vg-amenity .chk { color: var(--vg-accent); opacity: 0; }
.vg-amenity.on { border-color: var(--vg-accent); background: var(--vg-accent-050); }
.vg-amenity.on .ic { background: var(--vg-surface); color: var(--vg-accent); }
.vg-amenity.on .lbl { color: var(--vg-accent-700); }
.vg-amenity.on .chk { opacity: 1; }

/* Charger row tile */
.vg-charger { display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-md); background: var(--vg-surface); transition: box-shadow .15s; }
.vg-charger:hover { box-shadow: var(--vg-sh-sm); }
.vg-conn-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; background: var(--vg-accent-soft); color: var(--vg-accent); }
.vg-conn-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vg-conn-dot.online { background: var(--vg-success); box-shadow: 0 0 0 3px var(--vg-success-bg); }
.vg-conn-dot.charging { background: var(--vg-info); box-shadow: 0 0 0 3px var(--vg-info-bg); }
.vg-conn-dot.offline { background: var(--vg-ink-400); }
.vg-conn-dot.fault { background: var(--vg-danger); box-shadow: 0 0 0 3px var(--vg-danger-bg); }

/* Map placeholder */
.vg-map { position: relative; border-radius: var(--vg-r-md); overflow: hidden; border: 1px solid var(--vg-ink-200); min-height: 260px;
  background:
    radial-gradient(1200px 500px at 30% -10%, rgba(22,163,74,.08), transparent 60%),
    linear-gradient(var(--vg-ink-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--vg-ink-100) 1px, transparent 1px),
    var(--vg-surface-2);
  background-size: auto, 32px 32px, 32px 32px, auto;
}
.vg-map .pin { position: absolute; transform: translate(-50%, -100%); color: var(--vg-accent); font-size: 30px; filter: drop-shadow(0 4px 6px var(--vg-accent-shadow)); }
.vg-map .pin.teal { color: var(--vg-teal); } .vg-map .pin.amber { color: var(--vg-warning); }
.vg-map-card { position: absolute; left: 16px; bottom: 16px; background: var(--vg-surface); border: 1px solid var(--vg-ink-200); border-radius: var(--vg-r-md); padding: 12px 14px; box-shadow: var(--vg-sh-md); max-width: 260px; }

/* Operating hours row */
.vg-hours-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vg-ink-100); }
.vg-hours-row:last-child { border-bottom: none; }
.vg-hours-row .day { width: 100px; font-weight: 500; color: var(--vg-ink-800); font-size: 13px; }

/* Skip link + focus */
.vg-skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--vg-accent); color: #fff; padding: 9px 16px; border-radius: var(--vg-r-sm); font-weight: 500; font-size: 13px; }
.vg-skip:focus { left: 8px; }
/* Keyboard focus — matches the Super Admin's 2px brand-500 outline. */
:focus-visible { outline: 2px solid var(--vg-focus-outline); outline-offset: 2px; border-radius: 5px; }

/* ---- Interactive state coverage (hover / active / focus / disabled) ----
   Hover lives on each component; these fill the gaps the palette swap exposed
   so every control behaves consistently across the system. */
.btn:active:not(:disabled) { transform: translateY(.5px); }
.btn-primary:active:not(:disabled) { background: var(--vg-accent-600); }
.btn:disabled, .btn.disabled, .btn[disabled] {
  opacity: var(--vg-disabled-opacity); pointer-events: none; box-shadow: none;
}
.vg-input:disabled, .vg-select:disabled, .vg-textarea:disabled,
.vg-input[readonly], .vg-textarea[readonly] {
  background: var(--vg-ink-050); color: var(--vg-ink-400);
  border-color: var(--vg-ink-200); cursor: not-allowed;
}
.vg-input:focus, .vg-select:focus, .vg-textarea:focus,
.vg-search input:focus, .vg-search-mini input:focus, .vg-filter:focus {
  border-color: var(--vg-focus-border); box-shadow: var(--vg-ring); outline: none;
}
.vg-nav-item:active { background: var(--vg-accent-050); }
.vg-switch input:disabled + .track { opacity: var(--vg-disabled-opacity); cursor: not-allowed; }
.vg-check:disabled { opacity: var(--vg-disabled-opacity); cursor: not-allowed; }
.vg-amenity input:disabled ~ .lbl { opacity: var(--vg-disabled-opacity); }
a.disabled, .vg-link.disabled { opacity: var(--vg-disabled-opacity); pointer-events: none; }

/* Empty state */
.vg-empty { text-align: center; padding: 52px 24px; }
.vg-empty .ic { width: 60px; height: 60px; border-radius: 16px; background: var(--vg-ink-100); display: grid; place-items: center; margin: 0 auto 15px; color: var(--vg-ink-400); font-size: 27px; }
.vg-empty h4 { font-size: 15.5px; font-weight: 600; color: var(--vg-ink-900); margin: 0 0 6px; }
.vg-empty p { font-size: 13.5px; color: var(--vg-ink-500); max-width: 340px; margin: 0 auto 18px; }

/* Scrim for mobile nav */
.vg-scrim { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 1035; display: none; }
.vg-scrim.show { display: block; }

/* ----------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
.vg-hamburger { display: none; }
@media (max-width: 1200px) {
  .vg-content { padding: 24px; }
}
@media (max-width: 991.98px) {
  .vg-sidebar { transform: translateX(-100%); box-shadow: var(--vg-sh-lg); }
  .vg-sidebar.open { transform: translateX(0); }
  .vg-main { margin-left: 0; }
  .vg-hamburger { display: grid; }
  .vg-search { max-width: none; }
}
@media (max-width: 767.98px) {
  .vg-content { padding: 18px 15px 44px; }
  .vg-topbar { padding: 0 15px; gap: 10px; }
  .vg-page-title { font-size: 21px; }
  .vg-page-ic { width: 40px; height: 40px; font-size: 18px; border-radius: var(--vg-r-sm); }
  .vg-hide-sm { display: none !important; }
  .vg-photo.cover-main { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; }
}
@media (max-width: 575.98px) {
  .vg-userchip .meta { display: none; }
  .vg-search { display: none; }
  .vg-crumb-card { display: none; }
}

/* ----------------------------------------------------------------------------
   11. Collapsible sidebar

   State lives as `.vg-collapsed` on <html> so it can be restored from
   localStorage before first paint (no flash of an expanded rail).
   Every collapsed rule is scoped to >=992px on purpose: below that the sidebar
   is already an off-canvas drawer, where an icon-only rail would be pointless
   and would fight the existing .open / scrim behaviour.
   -------------------------------------------------------------------------- */
:root { --vg-sidebar-wc: 76px; }

/* Animate the rail itself and the content that follows it. Declared here
   (later in the file) so it extends the base .vg-sidebar transition. */
.vg-sidebar { transition: transform .28s cubic-bezier(.4,0,.2,1), width .24s cubic-bezier(.4,0,.2,1); }
.vg-main    { transition: margin-left .24s cubic-bezier(.4,0,.2,1); }

/* Header toggle — desktop only; the hamburger already owns <992px. */
.vg-collapse-btn { display: none; }
@media (min-width: 992px) { .vg-collapse-btn { display: grid; } }

@media (min-width: 992px) {
  .vg-collapsed .vg-sidebar { width: var(--vg-sidebar-wc); }
  .vg-collapsed .vg-main    { margin-left: var(--vg-sidebar-wc); }

  /* Brand: keep the mark, drop the wordmark */
  .vg-collapsed .vg-brand { padding: 0; justify-content: center; gap: 0; }
  .vg-collapsed .vg-brand-txt { display: none; }

  /* Group headings become hairline separators rather than disappearing,
     so the nav keeps its visual rhythm at icon size. */
  .vg-collapsed .vg-nav { padding: 14px 12px 20px; }
  .vg-collapsed .vg-nav-label {
    height: 1px; padding: 0; margin: 15px 8px 13px; overflow: hidden;
    color: transparent; background: var(--vg-ink-100);
  }
  .vg-collapsed .vg-nav-label:first-child { margin-top: 2px; }

  /* Items: centred icon only */
  .vg-collapsed .vg-nav-item { justify-content: center; gap: 0; padding: 10px 0; }
  .vg-collapsed .vg-nav-item > span:not(.vg-nav-badge) { display: none; }
  .vg-collapsed .vg-nav-item .bi { width: auto; }

  /* Any badge (count or "Soon") degrades to a dot so the signal survives */
  .vg-collapsed .vg-nav-item .vg-nav-badge {
    position: absolute; top: 7px; right: 13px; margin: 0;
    width: 7px; height: 7px; min-width: 0; padding: 0;
    font-size: 0; line-height: 0; border-radius: 50%;
  }

  /* Active state stays legible without the label */
  .vg-collapsed .vg-nav-item.active::before {
    content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--vg-accent);
  }

  /* Plan card shrinks to its icon */
  .vg-collapsed .vg-side-foot { padding: 10px; }
  .vg-collapsed .vg-plan { padding: 10px 0; text-align: center; }
  .vg-collapsed .vg-plan .d, .vg-collapsed .vg-plan .bar { display: none; }
  .vg-collapsed .vg-plan .t { justify-content: center; font-size: 0; gap: 0; }
  .vg-collapsed .vg-plan .t .bi { font-size: 16px; }
}

/* Hover label for the collapsed rail. Rendered as one fixed element appended to
   <body> (not a ::after on the item) so it is never clipped by .vg-nav's
   overflow-y:auto when the menu scrolls. */
.vg-nav-tip {
  position: fixed; z-index: 1060; pointer-events: none; opacity: 0;
  background: var(--vg-invert-bg); color: var(--vg-invert-fg);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  padding: 6px 10px; border-radius: var(--vg-r-xs); box-shadow: var(--vg-sh-md);
  transform: translateY(-50%) translateX(-4px);
  transition: opacity .14s, transform .14s;
}
.vg-nav-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }
.vg-nav-tip::before {
  content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: var(--vg-invert-bg);
}

@media (prefers-reduced-motion: reduce) {
  .vg-sidebar, .vg-main, .vg-nav-tip { transition: none; }
}