/* Vandok — admin-only layout. Everything else reuses /assets/vandok.css component classes.
   Built on tokens (var(--vd-*)). Do not redefine component visuals here — only layout/grid. */

html, body { height: 100%; }
body { font-size: var(--vd-fs-admin); }

/* ---- shell: 220px navy sidebar + main column ---- */
.vd-admin-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}
.vd-admin-sidebar {
  background: #0D3B66; /* fixed brand navy — sidebar is never theme-dependent, per mockups */
  display: flex;
  flex-direction: column;
  padding: var(--vd-space-6) 0;
}
.vd-admin-logo { padding: 0 20px var(--vd-space-6); }
.vd-admin-nav { list-style: none; margin: 0; padding: 0; flex: 1; }
.vd-admin-nav li a {
  display: block;
  padding: 13px 20px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: var(--vd-fs-sm);
  font-weight: 600;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.vd-admin-nav li a:hover { color: #fff; }
.vd-admin-nav li a.active {
  color: #fff;
  font-weight: 700;
  border-left-color: var(--vd-identity);
  background: rgba(255,255,255,.06);
}

.vd-admin-main { display: flex; flex-direction: column; min-width: 0; }
.vd-admin-topbar {
  flex: none; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--vd-space-6);
  background: var(--vd-surface);
  border-bottom: 1px solid var(--vd-hairline);
}
.vd-admin-topbar-date { font-weight: 700; font-size: var(--vd-fs-body); }
.vd-admin-topbar-user { color: var(--vd-ink-soft); font-size: var(--vd-fs-sm); cursor: pointer; }
.vd-caret { font-size: 11px; }

/* hamburger — hidden on desktop, shown on mobile */
.vd-admin-burger { display: none; flex: none; width: 44px; height: 44px; margin-right: 8px; background: transparent; border: 1px solid var(--vd-edge); border-radius: var(--vd-radius); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.vd-admin-burger span { display: block; width: 20px; height: 2px; background: var(--vd-ink); }
.vd-admin-backdrop { display: none; }

.vd-admin-content {
  flex: 1; overflow: auto; padding: var(--vd-space-6);
  /* gradient-mesh atmosphere so the glass cards refract colour, same as the driver app */
  background:
    radial-gradient(90% 60% at 92% -6%, var(--vd-glow-a), transparent 55%),
    radial-gradient(90% 65% at -10% 108%, var(--vd-glow-b), transparent 55%),
    radial-gradient(80% 60% at 55% 40%, var(--vd-glow-c), transparent 68%),
    var(--vd-field);
}

/* ---- page header row ---- */
.vd-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--vd-space-5); gap: var(--vd-space-4);
}
.vd-page-head h1 { margin: 0 0 4px; }
.vd-page-actions { display: flex; gap: var(--vd-space-3); flex: none; }
.vd-page-actions .vd-btn { height: 40px; padding: 0 16px; font-size: var(--vd-fs-sm); width: auto; }

/* ---- stat card rows ---- */
.vd-stat-row { display: grid; gap: var(--vd-space-4); margin-bottom: var(--vd-space-5); }
.vd-stat-row--4 { grid-template-columns: repeat(4, 1fr); }
.vd-stat-row--5 { grid-template-columns: repeat(5, 1fr); }
.vd-stat-num { font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.vd-stat-label { font-size: var(--vd-fs-sm); color: var(--vd-ink-soft); font-weight: 600; margin-top: 4px; }
.vd-stat-sub { font-size: 12px; color: var(--vd-ink-soft); margin-top: 6px; }

/* ---- generic section spacing ---- */
.vd-section { margin-bottom: var(--vd-space-5); }
.vd-section > .vd-section-label { display: block; margin-bottom: var(--vd-space-3); }

/* ---- two-column layouts ---- */
.vd-2col { display: grid; gap: var(--vd-space-5); align-items: start; }
.vd-2col--420 { grid-template-columns: 420px 1fr; }
.vd-2col--380 { grid-template-columns: 380px 1fr; }
.vd-2col--report { grid-template-columns: 1fr 1fr; }
.vd-stack { display: flex; flex-direction: column; gap: var(--vd-space-4); }

/* ---- tabs ---- */
.vd-tabs { display: flex; gap: var(--vd-space-2); border-bottom: 1px solid var(--vd-hairline); margin-bottom: var(--vd-space-4); }
.vd-tabs button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 10px 4px; margin-right: var(--vd-space-5);
  font-size: var(--vd-fs-sm); font-weight: 600; color: var(--vd-ink-soft);
  border-bottom: 2px solid transparent;
}
.vd-tabs button.active { color: var(--vd-ink); border-bottom-color: var(--vd-identity); }

/* ---- pill switcher (reports / filters) ---- */
.vd-pill-row { display: flex; gap: var(--vd-space-2); flex-wrap: wrap; margin-bottom: var(--vd-space-4); }
.vd-pill-row .vd-pill { background: var(--vd-surface); cursor: pointer; user-select: none; }
.vd-pill-row .vd-pill.active { background: var(--vd-invert-bg); color: var(--vd-invert-ink); border-color: var(--vd-invert-bg); }

/* ---- dropzone (A3) ---- */
.vd-dropzone {
  border: 2px dashed var(--vd-edge); border-radius: var(--vd-radius-card);
  padding: var(--vd-space-6); text-align: center; color: var(--vd-ink-soft);
  cursor: pointer; background: var(--vd-surface);
}
.vd-dropzone.drag { background: rgba(11,82,51,.06); border-color: var(--vd-ok); }
.vd-dropzone strong { display: block; color: var(--vd-ink); margin-bottom: 4px; font-size: var(--vd-fs-sm); }

/* ---- mapping grid (A3) ---- */
.vd-map-row { display: grid; grid-template-columns: 1fr 1fr 24px; gap: var(--vd-space-2); align-items: center; padding: 6px 0; font-size: var(--vd-fs-sm); }
.vd-map-row .vd-code { color: var(--vd-ink-soft); font-variant-numeric: tabular-nums; }

/* ---- checkbox / radio rows ---- */
.vd-check-row { display: flex; align-items: center; gap: var(--vd-space-3); padding: 8px 0; font-size: var(--vd-fs-sm); }
.vd-check-row input { width: 18px; height: 18px; }
.vd-radio-row { display: flex; gap: var(--vd-space-5); padding: 8px 0; font-size: var(--vd-fs-sm); }
.vd-radio-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---- progress bar (route list) ---- */
.vd-route-row { display: grid; grid-template-columns: 110px 120px 1fr 70px 100px; align-items: center; gap: var(--vd-space-3); padding: 10px 0; border-bottom: 1px solid var(--vd-hairline); font-size: var(--vd-fs-sm); }
.vd-route-row:last-child { border-bottom: none; }
.vd-bar { height: 8px; border-radius: 4px; background: var(--vd-field); overflow: hidden; }
.vd-bar > span { display: block; height: 100%; background: var(--vd-invert-bg); }
.vd-bar.full > span { background: var(--vd-ok); }

/* ---- alert list ---- */
.vd-alert-list { list-style: none; margin: 0; padding: 0; }
.vd-alert-list li { padding: 8px 0; border-bottom: 1px solid var(--vd-hairline); font-size: var(--vd-fs-sm); }
.vd-alert-list li:last-child { border-bottom: none; }

/* ---- misc ---- */
.vd-empty { color: var(--vd-ink-soft); font-size: var(--vd-fs-sm); padding: var(--vd-space-4) 0; }
.vd-note { font-size: 13px; color: var(--vd-ink-soft); line-height: 1.5; }
.vd-search { max-width: 320px; margin-bottom: var(--vd-space-4); }
.vd-clickable { cursor: pointer; }
.vd-clickable:hover td { background: rgba(16,24,38,.04); }

/* ============================================================ MOBILE (admin from a phone)
   Below 900px the sidebar becomes an off-canvas drawer; grids collapse; wide tables scroll. */
@media (max-width: 900px) {
  .vd-admin-shell { grid-template-columns: 1fr; }
  .vd-admin-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 240px; z-index: 60;
    transform: translateX(-100%); transition: transform .22s var(--vd-ease);
  }
  .vd-admin-shell.nav-open .vd-admin-sidebar { transform: none; }
  .vd-admin-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .22s; }
  .vd-admin-shell.nav-open .vd-admin-backdrop { opacity: 1; pointer-events: auto; }
  .vd-admin-burger { display: flex; }
  .vd-admin-topbar { padding: 0 var(--vd-space-4); }
  .vd-admin-topbar-date { font-size: var(--vd-fs-sm); }
  .vd-admin-content { padding: var(--vd-space-4); }

  /* stat cards + two-column layouts stack */
  .vd-stat-row--4, .vd-stat-row--5 { grid-template-columns: repeat(2, 1fr); }
  .vd-2col--420, .vd-2col--380, .vd-2col--report { grid-template-columns: 1fr; }

  /* wide tables scroll horizontally instead of squashing */
  .vd-table { min-width: 640px; }
  .vd-admin-content .vd-card { overflow-x: auto; }

  /* route rows: let the label/plate wrap rather than overflow */
  .vd-route-row { grid-template-columns: 1fr auto; grid-auto-rows: auto; }

  /* page-head actions: give the row the full width so the buttons WRAP instead of overflowing
     off the right edge (flex:none was letting the row grow past the viewport). */
  .vd-page-head { flex-wrap: wrap; }
  .vd-page-actions { flex-wrap: wrap; width: 100%; }
  .vd-page-actions .vd-btn { flex: 1 1 auto; }
}
@media (max-width: 520px) {
  .vd-stat-row--4, .vd-stat-row--5 { grid-template-columns: 1fr; }
}

/* ---- admin login gate ---- */
#vd-admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(80% 50% at 88% -8%, var(--vd-glow-a), transparent 55%),
    radial-gradient(80% 55% at -8% 108%, var(--vd-glow-b), transparent 55%),
    radial-gradient(70% 50% at 50% 45%, var(--vd-glow-c), transparent 68%),
    var(--vd-field);
}
.vd-admin-login-box { width: 360px; max-width: 100%; background: var(--vd-surface); border: 1px solid var(--vd-edge); border-radius: var(--vd-radius-card); padding: 28px 24px; box-shadow: var(--vd-edge-rule); }
.vd-admin-login-box .vd-section-label { margin-bottom: 16px; }