/* VTS UI v3 — design language of the AdminCN (shadcn/studio, MIT) template:
   neutral tokens, Geist font, light sidebar with grouped collapsible menu + icon rail, sticky header with breadcrumb,
   bordered rounded cards, dark mode. Fonts are self-hosted (static/vendor/fonts), icons are Lucide (static/img/icons.svg). */

/* ---------- fonts (v3 point 1: chosen per user in Settings > Appearance) ---------- */
@font-face { font-family: "Geist"; src: url("../vendor/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../vendor/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../vendor/fonts/roboto-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../vendor/fonts/open-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../vendor/fonts/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../vendor/fonts/noto-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../vendor/fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../vendor/fonts/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../vendor/fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../vendor/fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../vendor/fonts/lato-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../vendor/fonts/lato-latin-700-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --background: #ffffff; --foreground: #0a0a0a; --card: #ffffff; --card-fg: #0a0a0a; --popover: #ffffff;
  --primary: #171717; --primary-fg: #fafafa; --secondary: #f5f5f5; --muted: #f5f5f5; --muted-fg: #737373;
  --accent: #f5f5f5; --border: #e5e5e5; --input: #e5e5e5; --ring: #a1a1a1; --destructive: #e7000b;
  --sidebar: #fafafa; --sidebar-fg: #0a0a0a; --sidebar-accent: #f0f0f0; --sidebar-border: #e5e5e5;
  --chart-1: #f54900; --chart-2: #009689; --chart-3: #104e64; --chart-4: #ffb900; --chart-5: #fe9a00;
  --ok: #16a34a; --warn: #d97706; --bad: #dc2626; --idle: #eab308; --off: #111827; --inactive: #9ca3af; --info: #2563eb; --violet: #7c3aed;
  --radius: 10px; --radius-xl: 14px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --fs: 14px; --sidebar-w: 16rem; --sidebar-rail: 3.5rem; --header-h: 56px; --pad: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
  /* legacy aliases used by older page scripts */
  --brand: var(--primary); --line: var(--border); --panel: var(--card); --ink: var(--foreground);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --background: #0a0a0a; --foreground: #fafafa; --card: #171717; --card-fg: #fafafa; --popover: #1c1c1c;
  --primary: #e5e5e5; --primary-fg: #171717; --secondary: #262626; --muted: #262626; --muted-fg: #a1a1a1;
  --accent: #262626; --border: rgba(255,255,255,.1); --input: rgba(255,255,255,.15); --ring: #737373; --destructive: #ff6467;
  --sidebar: #171717; --sidebar-fg: #fafafa; --sidebar-accent: #262626; --sidebar-border: rgba(255,255,255,.1);
  --chart-1: #1447e6; --chart-2: #00bc7d; --chart-3: #fe9a00; --chart-4: #ad46ff; --chart-5: #ff2056;
  --off: #e5e5e5; --shadow-lg: 0 10px 30px rgba(0,0,0,.6);
  color-scheme: dark;
}
:root[data-density="compact"] { --pad: 16px; }

/* ---------- base ---------- */
* { box-sizing: border-box; border-color: var(--border); }
html, body { height: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font); font-size: var(--fs);
  line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a.link, .content a:not(.btn):not(.side-link) { color: var(--info); }
h1 { font-size: 1.15em; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.07em; font-weight: 600; margin: 0 0 12px; letter-spacing: -.01em; }
h3 { font-size: 1em; font-weight: 600; margin: 0 0 8px; }
.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.mono { font-family: var(--mono); }
::selection { background: color-mix(in srgb, var(--info) 25%, transparent); }

/* ---------- layout: sidebar + main ---------- */
.layout { display: flex; min-height: 100vh; }
.side { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar); color: var(--sidebar-fg); border-right: 1px solid var(--sidebar-border);
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; transition: width .2s ease; z-index: 1500; }
.side .brand { display: flex; align-items: center; gap: 10px; height: var(--header-h); padding: 0 14px; font-weight: 600; font-size: 1.05em; white-space: nowrap; overflow: hidden; }
.side .brand .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); color: var(--primary-fg); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.side .brand .logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.side nav { flex: 1; overflow-y: auto; padding: 4px 8px 16px; scrollbar-width: thin; }
.side .mgroup { margin-top: 6px; }
.side .mgroup-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: color-mix(in srgb, var(--sidebar-fg) 50%, transparent);
  font: inherit; font-size: .74em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 10px 10px 6px; cursor: pointer; border-radius: 6px; }
.side .mgroup-head .ic { width: 14px; height: 14px; margin-left: auto; transition: transform .2s; }
.side .mgroup.closed .mgroup-head .ic { transform: rotate(-90deg); }
.side .mgroup.closed .mitems { display: none; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; margin: 1px 0; color: var(--sidebar-fg); white-space: nowrap; overflow: hidden; font-size: .97em; }
.side-link .ic { width: 17px; height: 17px; opacity: .85; }
.side-link:hover { background: var(--sidebar-accent); }
.side-link.active { background: color-mix(in srgb, var(--primary) 8%, transparent); font-weight: 600; }
:root[data-theme="dark"] .side-link.active { background: var(--sidebar-accent); }
.side .foot { border-top: 1px solid var(--sidebar-border); padding: 10px; }
.side .who { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; overflow: hidden; white-space: nowrap; }
.side .who:hover { background: var(--sidebar-accent); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--muted); display: grid; place-items: center; font-weight: 600; font-size: .85em; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.who .w1 { font-weight: 600; font-size: .93em; line-height: 1.2; } .who .w2 { color: var(--muted-fg); font-size: .8em; }
/* collapsed = icon rail; group / item text hidden, tooltip via title */
.collapsed .side { width: var(--sidebar-rail); }
.collapsed .side .brand .bname, .collapsed .side .mgroup-head, .collapsed .side-link span, .collapsed .side .who > div:not(.avatar) { display: none; }
.collapsed .side .mgroup.closed .mitems { display: block; }
.collapsed .side-link { justify-content: center; padding: 9px 0; }
.collapsed .side .mgroup + .mgroup { border-top: 1px solid var(--sidebar-border); padding-top: 4px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
  height: var(--header-h); padding: 0 var(--pad); display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 1200; }
.top .grow { flex: 1; }
.top .sep { width: 1px; height: 18px; background: var(--border); }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted-fg); font-size: .95em; white-space: nowrap; overflow: hidden; }
.crumbs .ic { width: 14px; height: 14px; } .crumbs b { color: var(--foreground); font-weight: 500; }
.iconbtn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--foreground); cursor: pointer; position: relative; padding: 0; }
.iconbtn:hover { background: var(--accent); filter: none; }
.iconbtn .ic { width: 19px; height: 19px; }
.bell .cnt { position: absolute; top: 3px; right: 2px; background: var(--bad); color: #fff; font-size: 10px; line-height: 1; border-radius: 999px; padding: 3px 5px; display: none; font-weight: 600; }
.bell.ring { animation: ring .25s 4; }
@keyframes ring { 0% { transform: rotate(0) } 25% { transform: rotate(15deg) } 75% { transform: rotate(-15deg) } 100% { transform: rotate(0) } }
.content { padding: var(--pad); flex: 1; min-width: 0; width: 100%; max-width: 1600px; margin: 0 auto; }
.content.full { padding: 0; max-width: none; position: relative; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 1.55em; letter-spacing: -.02em; } .page-head p { margin: 2px 0 0; color: var(--muted-fg); }
.imp-banner { background: #fef3c7; color: #92400e; padding: 8px var(--pad); display: none; align-items: center; gap: 12px; border-bottom: 1px solid #fde68a; }

/* dropdown menu (profile) */
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--popover); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 4px; z-index: 2500; display: none; }
.menu-pop.open { display: block; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 6px; background: none; border: 0; color: var(--foreground); font: inherit; cursor: pointer; text-align: left; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--accent); filter: none; }
.menu-pop .lbl { padding: 8px 10px; font-size: .85em; color: var(--muted-fg); border-bottom: 1px solid var(--border); margin-bottom: 4px; }

/* ---------- cards / grids ---------- */
.card { background: var(--card); color: var(--card-fg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 18px; box-shadow: var(--shadow-sm); }
.card > h2:first-child, .card .card-title { font-size: 1em; font-weight: 600; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h2 { margin: 0; } .card-head p { margin: 0; color: var(--muted-fg); font-size: .9em; }
.grid { display: grid; gap: 16px; } .grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; }

/* statistic card (template statistics-card-01) */
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.stat .st-top { display: flex; align-items: center; gap: 10px; }
.stat .st-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--primary)) 12%, transparent); color: var(--c, var(--primary)); }
.stat .st-ic .ic { width: 18px; height: 18px; }
.stat .n { font-size: 1.75em; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .l { font-weight: 600; } .stat .sub { color: var(--muted-fg); font-size: .88em; }
.stat .bar { height: 4px; border-radius: 4px; background: var(--muted); overflow: hidden; } .stat .bar i { display: block; height: 100%; background: var(--c, var(--primary)); border-radius: 4px; transition: width .4s; }
.stat.click { cursor: pointer; transition: border-color .15s, transform .15s; } .stat.click:hover { border-color: var(--c, var(--ring)); transform: translateY(-1px); }
.stat.flash { animation: flash .9s; } @keyframes flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--info)) 50%, transparent) } 100% { box-shadow: 0 0 0 10px transparent } }
.stat.critical .n { color: var(--bad); }

/* ---------- utilities ---------- */
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.end { justify-content: flex-end; } .between { justify-content: space-between; }
.row.nowrap { flex-wrap: nowrap; } .grow { flex: 1; min-width: 0; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; } .muted { color: var(--muted-fg); } .small { font-size: .86em; } .right { text-align: right; }
.err-t { color: var(--bad); } .ok-t { color: var(--ok); }
.empty { padding: 28px; text-align: center; color: var(--muted-fg); }
.hr { height: 1px; background: var(--border); margin: 14px 0; }

/* ---------- form controls ---------- */
input, select, textarea { font: inherit; font-size: .95em; height: 36px; padding: 6px 10px; border: 1px solid var(--input); border-radius: 8px; background: var(--card); color: var(--foreground); min-width: 0; box-shadow: var(--shadow-sm); }
textarea { height: auto; }
input[type=checkbox], input[type=radio] { height: auto; box-shadow: none; accent-color: var(--primary); width: 15px; height: 15px; }
input[type=color] { padding: 2px 4px; width: 52px; }
input[type=file] { height: auto; padding: 6px; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--ring) 35%, transparent); border-color: var(--ring); }
input[readonly] { background: var(--muted); }
label { display: block; font-size: .86em; font-weight: 500; margin-bottom: 5px; }
.field { margin-bottom: 12px; } .field input, .field select, .field textarea, .field .ss { width: 100%; }
label.chk { display: inline-flex; align-items: center; gap: 6px; margin: 2px 12px 2px 0; font-weight: 400; font-size: .93em; width: auto; }
label.chk input { width: 15px; }
.field input[type=checkbox], .field input[type=radio], .checklist input, .row input[type=checkbox] { width: 15px; }
button, .btn { font: inherit; font-size: .93em; font-weight: 500; border: 1px solid transparent; background: var(--primary); color: var(--primary-fg); height: 36px; padding: 0 14px; border-radius: 8px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; box-shadow: var(--shadow-sm); text-decoration: none; }
button:hover, .btn:hover { filter: brightness(.92); }
:root[data-theme="dark"] button:hover { filter: brightness(1.08); }
button.ghost, .btn.ghost { background: var(--card); color: var(--foreground); border-color: var(--input); }
button.ghost:hover, .btn.ghost:hover { background: var(--accent); filter: none; }
button.danger, .btn.danger { background: var(--destructive); color: #fff; }
button.small, .btn.small { height: 30px; padding: 0 10px; font-size: .86em; border-radius: 7px; }
button:disabled { opacity: .5; cursor: not-allowed; }
.content a.btn, .modal a.btn { color: var(--primary-fg); } .content a.btn.ghost, .modal a.btn.ghost { color: var(--foreground); }

/* v3 point 7: searchable select (wraps every native <select>) */
.ss { position: relative; display: inline-block; min-width: 150px; vertical-align: middle; }
.ss > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; bottom: 0; }
.ss-btn { width: 100%; height: 36px; display: flex; align-items: center; gap: 6px; justify-content: space-between; background: var(--card); color: var(--foreground);
  border: 1px solid var(--input); border-radius: 8px; padding: 0 8px 0 10px; font-weight: 400; box-shadow: var(--shadow-sm); text-align: left; }
.ss-btn:hover { filter: none; background: var(--card); border-color: var(--ring); }
.ss-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-btn .ic { opacity: .5; width: 15px; height: 15px; }
.ss-btn.ph span { color: var(--muted-fg); }
.ss-pop { position: fixed; z-index: 4000; background: var(--popover); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; display: none; min-width: 200px; }
.ss-pop.open { display: block; }
.ss-pop .ss-q { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); padding: 2px 6px 4px; margin-bottom: 4px; }
.ss-pop .ss-q input { border: 0; box-shadow: none; outline: 0; height: 32px; padding: 0; width: 100%; background: transparent; }
.ss-pop .ss-list { max-height: 280px; overflow-y: auto; }
.ss-opt { padding: 7px 10px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ss-opt:hover, .ss-opt.hl { background: var(--accent); } .ss-opt.sel { font-weight: 600; }
.ss-opt .ic { width: 14px; height: 14px; margin-left: auto; } .ss-opt .sub { color: var(--muted-fg); font-size: .85em; }
.ss-none { padding: 10px; color: var(--muted-fg); text-align: center; }

/* ---------- tables ---------- */
table.t { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); font-size: .95em; }
table.t th { text-align: left; font-size: .9em; color: var(--muted-fg); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--card); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
table.t td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
table.t td.wrap { white-space: normal; }
table.t td .row.end { flex-wrap: nowrap; gap: 4px; }
table.t td .btn.small, table.t td button.small { padding: 0 8px; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); max-height: calc(100vh - 230px); background: var(--card); }
.card .table-wrap { border-radius: 10px; }

/* badges (status colours SOP 20.3) */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: .8em; font-weight: 500; background: var(--secondary); color: var(--foreground); border: 1px solid var(--border); white-space: nowrap; text-transform: capitalize; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge:empty { display: none; }
.badge.moving, .badge.sent, .badge.acked, .badge.visited, .badge.completed, .badge.active, .badge.ok { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.badge.idle, .badge.queued, .badge.expiring { color: #a16207; background: #fef9c3; border-color: #fde68a; }
.badge.stopped, .badge.failed, .badge.missed, .badge.cancelled, .badge.expired, .badge.disabled, .badge.blocked { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.badge.offline { color: #fff; background: #111827; border-color: #111827; }
.badge.inactive { color: #4b5563; background: #f3f4f6; border-color: #e5e7eb; }
.badge.online { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe; }
:root[data-theme="dark"] .badge.moving, :root[data-theme="dark"] .badge.active, :root[data-theme="dark"] .badge.sent, :root[data-theme="dark"] .badge.completed { color: #4ade80; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); }
:root[data-theme="dark"] .badge.idle, :root[data-theme="dark"] .badge.queued, :root[data-theme="dark"] .badge.expiring { color: #facc15; background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.25); }
:root[data-theme="dark"] .badge.stopped, :root[data-theme="dark"] .badge.expired, :root[data-theme="dark"] .badge.disabled, :root[data-theme="dark"] .badge.failed { color: #f87171; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25); }
:root[data-theme="dark"] .badge.offline { color: #111; background: #e5e5e5; }
:root[data-theme="dark"] .badge.inactive { color: #a3a3a3; background: #262626; border-color: #333; }
:root[data-theme="dark"] .badge.online { color: #60a5fa; background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.25); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* tabs */
.tabs { display: inline-flex; gap: 2px; background: var(--muted); padding: 3px; border-radius: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { background: none; color: var(--muted-fg); border: 0; box-shadow: none; height: 30px; border-radius: 7px; padding: 0 12px; }
.tabs button:hover { filter: none; color: var(--foreground); }
.tabs button.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-start; justify-content: center; z-index: 3000; padding: 6vh 16px; overflow-y: auto; animation: fade .12s; }
@keyframes fade { from { opacity: 0 } }
.modal { background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 14px; width: min(640px, 100%); box-shadow: var(--shadow-lg); }
.modal header { padding: 16px 20px 6px; font-weight: 600; font-size: 1.07em; display: flex; justify-content: space-between; align-items: center; }
.modal header a { color: var(--muted-fg); }
.modal .body { padding: 12px 20px 16px; } .modal footer { padding: 12px 20px 16px; display: flex; justify-content: flex-end; gap: 8px; }

/* toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 5000; }
.toast { background: var(--popover); color: var(--foreground); border: 1px solid var(--border); padding: 12px 14px; border-radius: 10px; box-shadow: var(--shadow-lg); max-width: 380px; border-left: 4px solid var(--info); }
.toast.err { border-left-color: var(--bad); } .toast.ok { border-left-color: var(--ok); }

/* ---------- maps ---------- */
.map { height: calc(100vh - var(--header-h)); width: 100%; background: var(--muted); }
.map-panel { position: absolute; top: 12px; left: 12px; bottom: 12px; width: 340px; z-index: 800; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.map-panel .head { padding: 12px; border-bottom: 1px solid var(--border); }
.map-panel .list { overflow-y: auto; flex: 1; }
.vrow { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.vrow:hover, .vrow.sel { background: var(--accent); }
.vrow .vn { font-weight: 600; } .vrow .meta { color: var(--muted-fg); font-size: .84em; }
.vrow .cb { margin-right: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip { border: 1px solid var(--border); background: var(--card); color: var(--foreground); border-radius: 999px; padding: 2px 10px; font-size: .84em; cursor: pointer; text-transform: capitalize; }
.chip.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.veh-label { background: rgba(17,24,39,.85); color: #fff; border: none; box-shadow: none; font-size: 11px; padding: 1px 5px; }
.leaflet-tooltip.veh-label { background: rgba(17,24,39,.85); color: #fff; border: 0; box-shadow: none; font-size: 11px; padding: 1px 6px; border-radius: 4px; font-family: var(--font); }
.leaflet-tooltip.veh-label::before { display: none; }
.leaflet-container { font: inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--popover); color: var(--foreground); }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-bar a, .leaflet-control-layers { background: var(--card); color: var(--foreground); border-color: var(--border) !important; }
.vmk { transition: transform .3s; }
.vmk svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
/* v3 point 15: map overlay toggles (POI / geofence) */
.ovl { background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ovl label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ovl label input { width: 14px; height: 14px; }

/* misc older blocks */
.typeahead { position: relative; } .typeahead .opts { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--popover); border: 1px solid var(--border); border-radius: 10px; z-index: 1000; max-height: 280px; overflow-y: auto; box-shadow: var(--shadow-lg); padding: 4px; }
.typeahead .opt { padding: 7px 10px; cursor: pointer; border-radius: 6px; } .typeahead .opt:hover { background: var(--accent); }
.checklist { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.checklist label { display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: .93em; padding: 3px 4px; margin: 0; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--muted); padding: 16px; }
.login { width: min(400px, 100%); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; } .kv > div:nth-child(odd) { color: var(--muted-fg); }
.kvt { border-collapse: collapse; font-size: 12.5px; min-width: 230px; }
.kvt td { padding: 3px 6px; border-bottom: 1px solid var(--border); vertical-align: top; } .kvt td:first-child { white-space: nowrap; }
.perm-grid td, .perm-grid th { text-align: center; } .perm-grid td:first-child, .perm-grid th:first-child { text-align: left; }
.exportbar { gap: 4px; flex-wrap: wrap; }
.totals { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 12px; font-size: .93em; }
.totals b { font-size: 1.15em; }
.colpick { display: flex; flex-wrap: wrap; gap: 2px 6px; max-height: 140px; overflow: auto; border: 1px solid var(--border); padding: 6px; border-radius: 8px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery .item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
.gallery .item img, .gallery .item video { width: 100%; height: 130px; object-fit: cover; background: #111; display: block; }
.gallery .item .meta { padding: 6px 8px; font-size: .86em; }
.chart { width: 100%; height: 260px; display: block; }
.chart text { fill: var(--muted-fg); }
.pb-controls { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pb-controls button.on { background: var(--primary); color: var(--primary-fg); }
video { width: 100%; background: #000; border-radius: 10px; max-height: 60vh; }

/* v3 point 10: horizontal filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters .field { margin: 0; min-width: 160px; flex: 0 1 auto; }
.filters .field.w-lg { min-width: 240px; } .filters .field.w-sm { min-width: 120px; }
.filters .actions { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; }
.filters .dr, .filters .dr .row { display: contents; }
.filters .dr .field.grow { flex: 0 1 auto; }
.filters #devbox .ss-btn { min-width: 220px; }
.filters #devpop .checklist { max-height: 300px; }

/* v3 point 11: icon picker */
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.icon-pick label { margin: 0; border: 1px solid var(--border); border-radius: 10px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-weight: 400; font-size: .82em; }
.icon-pick label:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.icon-pick input { display: none; }

/* device / tracking info panels */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.info { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; background: var(--card); }
.info .ic { color: var(--muted-fg); width: 17px; height: 17px; margin-top: 2px; }
.info .k { color: var(--muted-fg); font-size: .82em; } .info .v { font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word; }
.dl { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; } .dl > div { padding: 8px 0; border-bottom: 1px solid var(--border); } .dl > div:nth-child(odd) { color: var(--muted-fg); }
.dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero .vicon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--muted); }
.hero h1 { font-size: 1.5em; } .hero .meta { color: var(--muted-fg); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0) } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0) } }
.donut-legend { display: grid; gap: 6px; } .donut-legend div { display: flex; align-items: center; gap: 8px; } .donut-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.seg { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--muted); } .seg i { display: block; height: 100%; transition: width .4s; }
.track-panel { position: absolute; top: 12px; left: 12px; width: 360px; max-height: calc(100% - 24px); z-index: 800; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow-y: auto; }
.track-panel .sec { padding: 14px; border-bottom: 1px solid var(--border); } .track-panel .sec:last-child { border-bottom: 0; }
.speedo { font-size: 2.4em; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .speedo small { font-size: .4em; color: var(--muted-fg); font-weight: 500; }

/* ---------- responsive ---------- */
.hamb { display: none !important; }
@media (max-width: 1100px) { .g5, .g6 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) {
  .side { position: fixed; left: calc(-1 * var(--sidebar-w) - 10px); transition: left .2s; width: var(--sidebar-w) !important; box-shadow: var(--shadow-lg); }
  .side.open { left: 0; } .collapsed .side .brand .bname, .collapsed .side .mgroup-head, .collapsed .side-link span { display: initial; }
  .g3, .g4, .g5, .g6 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g2 { grid-template-columns: 1fr; } .span2, .span3 { grid-column: auto; }
  .map-panel, .track-panel { width: auto; right: 12px; top: auto; height: 45%; } .hamb { display: inline-grid !important; } .railbtn { display: none !important; }
  :root { --pad: 14px; } .crumbs { display: none; }
}
@media print { .side, .top, .exportbar, button { display: none !important; } .card, .table-wrap { border: 0; box-shadow: none; } }