/* ==========================================================================
   NAAP GSD Digital Trip Ticket System — app.css v3
   Semantic component classes + design tokens. PHP templates use standard
   Tailwind utilities + these named classes. No arbitrary Tailwind values
   in PHP files.
   ========================================================================== */

/* ── Fonts (Plus Jakarta Sans, local WOFF2) ──────────────────────────── */
@font-face { font-family:'Plus Jakarta Sans'; src:url('../fonts/pjs/pjs-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Plus Jakarta Sans'; src:url('../fonts/pjs/pjs-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Plus Jakarta Sans'; src:url('../fonts/pjs/pjs-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Plus Jakarta Sans'; src:url('../fonts/pjs/pjs-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Plus Jakarta Sans'; src:url('../fonts/pjs/pjs-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ── Design tokens ───────────────────────────────────────────────────── */
:root {
  --shell:#0B1F3A;
  --shell-hover:#13294B;
  --shell-text:#C7D4E8;
  --accent:#38BDF8;
  --accent-strong:#0284C7;
  --on-accent:#04121F;

  --bg-page:#F6F8FB;
  --bg-surface:#FFFFFF;
  --text:#0F172A;
  --text-muted:#64748B;
  --border:#E2E8F0;

  --st-draft:#94A3B8;      --st-pending:#D97706;   --st-verified:#0D9488;
  --st-approved:#2563EB;   --st-dispatched:#7C3AED; --st-on-going:#0891B2;
  --st-completed:#16A34A;  --st-cancelled:#64748B;  --st-rejected:#DC2626;
  --st-rescheduled:#0EA5E9;

  --radius:8px;
  --radius-lg:10px;
  --radius-xl:14px;
  --row-h:36px;

  --text-xs:10px;
  --text-sm:11px;
  --text-md:12.5px;
  --text-base:13.5px;
  --text-lg:15px;
  --text-xl:18px;
  --text-2xl:22px;
  --text-3xl:26px;
  --text-4xl:36px;
  --text-5xl:46px;

  --tracking-tight:.02em;
  --tracking-normal:.04em;
  --tracking-wide:.06em;
  --tracking-wider:.07em;
  --tracking-widest:.08em;

  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");

  /* ── Motion tokens ──────────────────────────────────────────────────── */
  --dur-fast:150ms;
  --dur-normal:200ms;
  --dur-moderate:300ms;
  --dur-slow:400ms;
  --dur-stagger:50ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] {
  --shell:#081120;
  --shell-hover:#101B31;
  --shell-text:#9DB0CC;
  --bg-page:#0B1220;
  --bg-surface:#111C2E;
  --text:#E2E8F0;
  --text-muted:#94A3B8;
  --border:#1E293B;
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
}

/* ── Base ────────────────────────────────────────────────────────────── */
/* box-sizing:border-box comes from Tailwind v4 Preflight (enabled in
   tailwind.src.css); app.css is unlayered so it always wins over layers. */
html { color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }
body {
  margin:0; background:var(--bg-page); color:var(--text);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:var(--text-base); line-height:1.45;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out);
}
h1,h2,h3,h4 { margin:0; letter-spacing:-.01em; }
a { text-decoration:none; }
a:hover:not(.no-underline):not(.nav-item):not(.stat-card):not(.content-card):not(.btn) { text-decoration:underline; }

input, select, textarea {
  font:inherit; color:var(--text); background:var(--bg-page);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:7px 10px; width:100%; box-sizing:border-box;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(2,132,199,.15); transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
label { font-size:var(--text-sm); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-muted); display:block; margin-bottom:4px; }

/* DEV BUILD MARKER — 5px red top bar; only when body.dev-build (APP_ENV !== 'prod') */
body.dev-build::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--st-rejected);
  z-index: 9999;
  pointer-events: none;
}

/* ── Page wrapper ────────────────────────────────────────────────────── */
.page-wrap {
  display:flex; min-height:100vh; min-height:100dvh;
}
/* Main content padding (replaces p-[18px_20px_40px]); tighter on mobile. */
.main-pad { padding:18px 20px 40px; }
@media (max-width:900px) { .main-pad { padding:14px 12px 32px; } }

/* ── App shell ───────────────────────────────────────────────────────── */
.sidebar {
  width:300px; flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0;
  height:100vh; height:100dvh; padding-bottom:env(safe-area-inset-bottom);
  transition:background-color .25s var(--ease-out);
}
.main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ── Sidebar brand ───────────────────────────────────────────────────── */
.sb-brand {
  display:flex; gap:10px; align-items:center; padding:16px 14px;
}
.sb-brand img {
  height:36px; width:auto; display:block; flex-shrink:0;
}
.sb-brand-title {
  font-size:10px; font-weight:800; line-height:1.1; color:var(--shell-text);
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.sb-brand-sub {
  font-size:15px; font-weight:800; line-height:1.1; color:#fff;
  margin-top:2px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

/* ── Sidebar nav ─────────────────────────────────────────────────────── */
.sidebar-nav { overflow-y:auto; flex:1; padding:10px 0; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:13px 20px;
  font-size:var(--text-base); font-weight:600;
  border-radius:0; transition:background-color .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out);
  border-left:3px solid transparent;
}
.nav-item:hover { background:var(--shell-hover); color:#fff; }
.nav-item svg { width:18px; height:18px; }
.nav-item.bg-accent { border-left-color:var(--accent); }
.nav-badge {
  margin-left:auto; min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--accent-strong); color:#fff;
  font-size:11px; font-weight:800; line-height:1;
}
.nav-item.bg-accent .nav-badge { background:rgba(255,255,255,.92); color:var(--accent-strong); }

/* ── Topbar ──────────────────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px;
  transition:background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}

/* ── Stat cards grid ─────────────────────────────────────────────────── */
.stat-cards {
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
}
.stat-card {
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px; transition:background-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); cursor:default;
}
.stat-card.is-clickable, a.stat-card { cursor:pointer; }
.stat-card.is-clickable:hover,
a.stat-card:hover { background:var(--bg-page); transform:translateY(-2px); box-shadow:0 4px 12px rgba(2,8,20,.08); }
.stat-card.is-clickable:active,
a.stat-card:active { transform:scale(.98); }
.stat-card.is-filtered { border-color:var(--accent-strong); box-shadow:inset 0 0 0 1px var(--accent-strong); }
.stat-card-label {
  font-size:var(--text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-wide); color:var(--text-muted);
}
.stat-card-value {
  font-size:var(--text-3xl); font-weight:800; margin:4px 0;
}
.stat-card-sub {
  color:var(--text-muted); font-size:11.5px;
}
.stat-card-icon {
  width:38px; height:38px; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  background:rgba(56,189,248,.1); color:var(--accent-strong);
}
.stat-card-icon svg { width:22px; height:22px; }

/* ── Page header (h1 + action row) ───────────────────────────────────── */
.page-header {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 16px; margin-bottom:16px;
}

/* ── Content card ────────────────────────────────────────────────────── */
.content-card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.card-narrow { max-width:480px; }
.card-md { max-width:560px; }
.card-lg { max-width:860px; }

/* ── Card head ───────────────────────────────────────────────────────── */
.card-head {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:8px 12px;
  padding:10px 12px; border-bottom:1px solid var(--border); font-weight:700;
}
.card-head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-left:auto; }
.card-head-actions .form-input { min-width:0; }
.input-shrink { min-width:0; flex:1 1 8rem; max-width:12rem; }

/* ── List/card header row (title + filters + actions) ─────────────────── */
/* Replaces hand-rolled flex rows so titles/inputs/buttons wrap on mobile
   instead of being clipped by .content-card{overflow:hidden}. */
.list-head {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.list-head .form-input, .list-head .input-search { min-width:0; }
.list-head .input-search { flex:1 1 9rem; }
.list-head .btn { flex-shrink:0; }
/* Search + action buttons pinned to the right edge of the header row. */
.list-head-actions {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:8px 10px; margin-left:auto;
}

/* ── Mobile search collapse ──────────────────────────────────────────── */
/* On desktop the wrapper is transparent to layout (display:contents). On
   mobile each table filter collapses to a magnifier icon (ui.js). */
.search-collapse { display:contents; }
.search-toggle { display:none; }
@media (max-width:900px) {
  .search-collapse { display:inline-flex; align-items:center; gap:6px; margin-left:auto; min-width:0; }
  .search-collapse > input[type="search"] { display:none; }
  .search-collapse.is-open { flex:1 1 100%; }
  .search-collapse.is-open > input[type="search"] {
    display:block; flex:1 1 auto; width:100%; max-width:none; margin-left:0;
  }
  .card-head-actions:has(.search-collapse.is-open),
  .list-head-actions:has(.search-collapse.is-open) { flex:1 1 100%; }
  .search-toggle {
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:36px; height:36px; cursor:pointer;
    border:1px solid var(--border); border-radius:var(--radius);
    background:var(--bg-surface); color:var(--text-muted);
  }
  .search-toggle:hover, .search-toggle:focus-visible,
  .search-collapse.is-open .search-toggle { border-color:var(--accent-strong); color:var(--accent-strong); }
}

/* ── Trip ticket layout ──────────────────────────────────────────────── */
.ticket-grid { max-width:1500px; }
.field-cell {
  background:var(--bg-page); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:10px 14px;
}

/* ── Data table ──────────────────────────────────────────────────────── */
.data-table {
  width:100%; border-collapse:collapse; font-size:var(--text-md);
}
.data-table .category-row td {
  padding:10px 10px 6px; font-size:var(--text-sm); font-weight:800;
  text-transform:uppercase; letter-spacing:var(--tracking-widest);
  color:var(--accent-strong); background:var(--bg-page);
  border-bottom:2px solid var(--accent);
}
.data-table th {
  padding:6px 10px; text-align:left; font-size:var(--text-sm);
  font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--text-muted); background:rgba(56,189,248,.07);
  border-bottom:1px solid var(--border);
}
.data-table td {
  padding:6px 10px; border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.data-table tr:last-child td { border-bottom:none; }
.table-pager { display:none; }
table[data-pager] tbody tr { display:none; }
table[data-pager] tbody tr.page-visible { display:table-row; }
/* Row hover must come after nth-child(even) (equal specificity) or even rows
   would override it and show no feedback at all. */
.data-table tbody tr { transition:background .12s var(--ease-out); }
.data-table tbody tr:nth-child(even) { background:var(--bg-page); }
.data-table tbody tr:hover { background:rgba(56,189,248,.09); }
.data-table .col-status { width:120px; }
.data-table .col-actions { width:1%; white-space:nowrap; }
/* Uniform width for row action buttons (View/Edit/Approve/Enable/…). */
.data-table .btn-sm { min-width:5.5rem; }

/* ── Sortable table headers ──────────────────────────────────────────── */
.data-table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.data-table th.sortable::after {
  content:''; display:inline-block; vertical-align:-1px;
  width:11px; height:11px; margin-left:5px; opacity:.45;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.data-table th.sortable[data-dir="asc"]::after {
  opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.data-table th.sortable[data-dir="desc"]::after {
  opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Status badge ────────────────────────────────────────────────────── */
.badge {
  display:inline-block; padding:3px 8px; border-radius:999px;
  font-size:var(--text-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tracking-wide); white-space:nowrap;
}
.badge-draft       { background:rgba(148,163,184,.15); color:var(--st-draft); }
.badge-pending     { background:rgba(217,119,6,.15);   color:var(--st-pending); }
.badge-verified    { background:rgba(13,148,136,.15);  color:var(--st-verified); }
.badge-approved    { background:rgba(37,99,235,.15);   color:var(--st-approved); }
.badge-dispatched  { background:rgba(124,58,237,.15);  color:var(--st-dispatched); }
.badge-on-going    { background:rgba(8,145,178,.15);   color:var(--st-on-going); }
.badge-completed   { background:rgba(22,163,74,.15);   color:var(--st-completed); }
.badge-cancelled   { background:rgba(100,116,139,.15); color:var(--st-cancelled); }
.badge-rejected    { background:rgba(220,38,38,.15);   color:var(--st-rejected); }
.badge-rescheduled { background:rgba(14,165,233,.15);  color:var(--st-rescheduled); }
.badge-late        { background:rgba(245,158,11,.15);  color:#D97706; }
/* Inline open-flag pill on the ticket page (replaces arbitrary rgba/size values). */
.flag-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(217,119,6,.1); border:1px solid var(--st-pending);
  border-radius:999px; padding:2px 10px;
  font-size:var(--text-sm); font-weight:700;
  margin:0 6px 6px 0;
}
/* Reason-on-record callout on the ticket page. */
.reason-note {
  margin-top:14px; background:rgba(220,38,38,.07);
  border:1px solid var(--st-rejected); border-radius:var(--radius-lg);
  padding:10px; font-size:var(--text-md);
}

/* ── Dispatch calendar ───────────────────────────────────────────────── */
.cal-card { margin-top:14px; }
.cal-card .card-head { flex-wrap:wrap; gap:8px; }
.cal-nav { display:flex; align-items:center; gap:8px; }
.cal-nav-group {
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-page); padding:2px;
}
.cal-nav-group .btn {
  width:30px; height:30px; padding:0; border:0; border-radius:6px;
  color:var(--text-muted);
}
.cal-nav-group .btn:hover { background:var(--bg-surface); color:var(--accent-strong); }
.cal-title { font-size:var(--text-sm); font-weight:800; min-width:104px; text-align:center; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dow { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-muted); text-align:center; padding:2px 0; }
.cal-day.cal-empty { border-color:transparent; background:transparent; }
.cal-day {
  min-height:34px; border:1px solid var(--border); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-md); color:var(--text-muted); background:var(--bg-page);
}
button.cal-day.cal-has {
  color:var(--accent-strong); background:rgba(56,189,248,.12);
  border-color:transparent; cursor:pointer; font-weight:700;
}
button.cal-day.cal-has:hover { background:rgba(56,189,248,.22); }
button.cal-day.cal-has.cal-today { outline:2px solid var(--accent-strong); }
.cal-day.cal-today { border-color:var(--accent-strong); color:var(--text); font-weight:800; }
.cal-loading {
  grid-column:1 / -1; text-align:center; padding:14px 0; color:var(--text-muted); font-size:var(--text-md);
  background:linear-gradient(90deg,var(--bg-page) 25%,var(--border) 50%,var(--bg-page) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius);
}
.cal-modal-row { padding:8px 0; border-bottom:1px solid var(--border); }
.cal-modal-row:last-child { border-bottom:none; }
.cal-modal-dtt { font-size:var(--text-md); color:var(--accent-strong); }
.cal-modal-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.cal-modal-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-muted); margin-bottom:2px; }
.cal-modal-time { margin-top:6px; font-size:12px; color:var(--text-muted); }

/* ── Traffic-aware route ETA panel (ticket map) ───────────────────────── */
.route-eta { margin-top:12px; }
.route-leg { padding:10px 0; border-top:1px solid var(--border); }
.route-leg:first-child { border-top:none; }
.route-leg-title { font-size:var(--text-sm); font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--accent-strong); margin-bottom:8px; }
.route-eta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.route-eta-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-muted); margin-bottom:2px; }
.route-delay { color:var(--st-rejected); font-weight:700; }
.route-clear { color:var(--st-completed); font-weight:600; }
.route-meta { margin-top:6px; font-size:11.5px; color:var(--text-muted); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 14px; border-radius:var(--radius); border:1px solid transparent;
  font:inherit; font-weight:600; font-size:var(--text-md);
  cursor:pointer; transition:background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
  text-decoration:none; white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn:disabled:active { transform:none; }
.btn svg { width:15px; height:15px; flex-shrink:0; }
.btn-primary { background:var(--accent-strong); color:#fff; border-color:var(--accent-strong); }
.btn-primary:hover { background:#0369A1; }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover { background:var(--bg-page); }
.btn-danger { background:#DC2626; color:#fff; border-color:#DC2626; }
.btn-danger:hover { background:#B91C1C; }
.btn-sm { padding:4px 10px; font-size:var(--text-sm); }
.btn-sm svg { width:13px; height:13px; }
.btn-wide { min-width:9rem; }
/* Inline filter buttons next to form inputs: inherit base size so heights match. */
.btn-form { font-size:inherit; }

/* ── Icon button ─────────────────────────────────────────────────────── */
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius);
  border:1px solid var(--border); background:transparent;
  color:var(--text); cursor:pointer;
  transition:border-color .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out);
}
.icon-btn:hover { border-color:var(--accent-strong); color:var(--accent-strong); }
.icon-btn:active { transform:scale(.97); }
.icon-btn svg { width:16px; height:16px; }
.icon-btn-bare, .icon-btn-bare:hover { border-color:transparent; }
.icon-btn-bare:hover { color:var(--accent-strong); }
.icon-btn-sm { width:24px; height:24px; }
.icon-btn-sm svg { width:14px; height:14px; }
.icon-btn-danger:hover { border-color:var(--st-rejected); color:var(--st-rejected); }

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; z-index:80; background:rgba(2,8,20,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease-out);
}
.modal-backdrop.open { opacity:1; pointer-events:auto; }
.modal-body {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto; scrollbar-gutter:stable;
  box-shadow:0 20px 60px rgba(2,8,20,.25);
  transform:scale(.97) translateY(8px); transition:transform .3s var(--spring), opacity .25s var(--ease-out);
}
.modal-body::-webkit-scrollbar { width:6px; }
.modal-body::-webkit-scrollbar-track { background:transparent; }
.modal-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.modal-backdrop.open .modal-body { transform:none; }
.modal-close {
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border-radius:50%; border:none;
  background:var(--bg-page); color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover { background:var(--border); color:var(--text); }
.modal-head {
  position:relative; display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px; border-bottom:1px solid var(--border); font-weight:800;
}
/* Horizontal padding for modal body/footer regions (replaces px-[18px]). */
.modal-pad-x { padding-left:18px; padding-right:18px; }

/* ── Toast ───────────────────────────────────────────────────────────── */
#toastZone {
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:120; display:flex; flex-direction:column; align-items:center; gap:10px;
  pointer-events:none;
}
.toast {
  position:relative; overflow:hidden; pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  min-width:280px; max-width:420px;
  padding:13px 16px; border-radius:var(--radius-xl);
  border:1px solid transparent;
  color:var(--text); font-size:var(--text-base); font-weight:600; line-height:1.4;
  box-shadow:0 12px 32px rgba(2,8,20,.18), 0 2px 8px rgba(2,8,20,.08);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:toast-in .32s var(--spring);
}
.toast .toast-icon {
  width:34px; height:34px; border-radius:10px; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(2,8,20,.15);
}
.toast .toast-icon svg { width:17px; height:17px; }
.toast .toast-msg { min-width:0; }
.toast.ok { background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.35); }
.toast.ok .toast-icon { background:#16A34A; }
.toast.ok::after { background:#16A34A; }
.toast.err { background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.35); }
.toast.err .toast-icon { background:#DC2626; }
.toast.err::after { background:#DC2626; }
.toast.info { background:rgba(2,132,199,.12); border-color:rgba(2,132,199,.35); }
.toast.info .toast-icon { background:var(--accent-strong); }
.toast.info::after { background:var(--accent-strong); }
html[data-theme="dark"] .toast.ok { background:rgba(22,163,74,.16); border-color:rgba(22,163,74,.45); }
html[data-theme="dark"] .toast.err { background:rgba(220,38,38,.16); border-color:rgba(220,38,38,.45); }
html[data-theme="dark"] .toast.info { background:rgba(56,189,248,.14); border-color:rgba(56,189,248,.4); }
html[data-theme="dark"] .toast .toast-msg { color:#F1F5F9; }
/* auto-dismiss countdown — keep in sync with the 4000ms timeout in ui.js */
.toast::after {
  content:''; position:absolute; left:0; bottom:0; height:3px; width:100%;
  transform-origin:left; opacity:.7;
  animation:toast-progress 4s linear forwards;
}
@keyframes toast-progress { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@keyframes toast-in {
  from { opacity:0; transform:translateY(-14px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.toast.toast-exit { animation:toast-out .25s var(--ease-in) forwards; }
@keyframes toast-out {
  from { opacity:1; transform:translateY(0) scale(1); }
  to   { opacity:0; transform:translateY(-14px) scale(.97); }
}
.toast-clickable { cursor:pointer; }
.toast-clickable:hover { filter:brightness(.97); }
.toast .toast-close {
  flex-shrink:0; width:24px; height:24px; margin-left:auto; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:8px; cursor:pointer;
  color:var(--text-muted); opacity:.7;
}
.toast .toast-close:hover { opacity:1; }
.toast .toast-close svg { width:13px; height:13px; }

/* ── Entrance keyframes ─────────────────────────────────────────────── */
@keyframes fadeIn       { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInUp     { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn      { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }
@keyframes shake        { 0%,100% { transform:translateX(0); } 15% { transform:translateX(-4px); } 30% { transform:translateX(4px); } 45% { transform:translateX(-3px); } 60% { transform:translateX(3px); } 75% { transform:translateX(-1px); } }
@keyframes pulse        { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes shimmer      { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes checkDraw    { from { stroke-dashoffset:24; } to { stroke-dashoffset:0; } }
@keyframes flashSuccess { 0%,100% { box-shadow:none; } 50% { box-shadow:inset 0 0 0 2px #16A34A; } }

/* ── Stagger entrance (add .stagger-in to parent grid) ──────────────── */
.stagger-in > * { animation:fadeInUp .35s var(--ease-out) backwards; }
.stagger-in > *:nth-child(1) { animation-delay:0ms; }
.stagger-in > *:nth-child(2) { animation-delay:40ms; }
.stagger-in > *:nth-child(3) { animation-delay:80ms; }
.stagger-in > *:nth-child(4) { animation-delay:120ms; }
.stagger-in > *:nth-child(5) { animation-delay:160ms; }
.stagger-in > *:nth-child(n+6) { animation-delay:200ms; }

/* ── Skeleton shimmer ───────────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,var(--bg-page) 25%,var(--border) 50%,var(--bg-page) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius);
}
.skeleton-line { height:12px; border-radius:4px; }
.skeleton-row td { padding:10px 10px; }
table[data-skeleton] { border-collapse:collapse; }

/* ── Validation shake ───────────────────────────────────────────────── */
.shake { animation:shake .4s var(--ease-out); }

/* ── Live GPS pulse ─────────────────────────────────────────────────── */
.pulse-live { animation:pulse 2s var(--ease-in-out) infinite; }

/* ── Animated checkmark (SVG stroke) ────────────────────────────────── */
.check-anim { stroke-dasharray:24; stroke-dashoffset:24; animation:checkDraw .4s var(--ease-out) .15s forwards; }

/* ── Success flash on content card ──────────────────────────────────── */
.flash-success { animation:flashSuccess .6s var(--ease-out); }

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .stagger-in > * { opacity:1; animation:none; }
}

/* ── Form elements ───────────────────────────────────────────────────── */
.form-input {
  font:inherit; color:var(--text); background:var(--bg-page);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:7px 10px; width:100%; box-sizing:border-box;
}
.form-input:focus { outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(2,132,199,.15); }
.form-input.invalid { border-color:#DC2626; }
.form-input.invalid:focus { border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.15); }
.input-search { width:10rem; }
.input-search-lg { width:13rem; }
.input-date { width:8.75rem; }

/* ── Checkboxes & radios: reset base input styling, accent color ────── */
input[type="checkbox"], input[type="radio"] {
  width:16px; height:16px; padding:0; border:none; background:transparent;
  accent-color:var(--accent-strong); cursor:pointer; flex-shrink:0;
}
.checkbox-row { display:flex; align-items:center; gap:8px; cursor:pointer; }
.checkbox-row input { margin:0; }
.input-cap { text-transform:uppercase; }
.no-resize { resize:none; }

/* ── Passenger manifest rows (request form modal) ────────────────────── */
.pax-row {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:12px 14px; background:var(--bg-page);
}
.pax-row-head {
  font-size:var(--text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-muted); margin-bottom:8px;
}
.pax-row .form-input[readonly] { background:var(--bg-surface); color:var(--text-muted); }

/* ── Password reveal toggle + live requirement checklist ─────────────── */
.pw-toggle .pw-ico { display:flex; align-items:center; justify-content:center; }
.pw-toggle .pw-ico-hide { display:none; }
.pw-toggle.pw-on .pw-ico-show { display:none; }
.pw-toggle.pw-on .pw-ico-hide { display:flex; }

.pw-req { display:flex; flex-direction:column; gap:2px; margin-top:6px; font-size:var(--text-sm); }
.pw-req-item { display:flex; align-items:center; gap:6px; color:var(--st-rejected); }
.pw-req-item.ok { color:var(--st-completed); }
.pw-req-mark { font-weight:800; width:1em; text-align:center; flex-shrink:0; }

/* Letter-spacing presets for monospace codes / OTP fields (replace tracking-[…em]). */
.tracking-15 { letter-spacing:.15em; }
.tracking-20 { letter-spacing:.2em; }
.tracking-25 { letter-spacing:.25em; }
.tracking-30 { letter-spacing:.3em; }
.tracking-40 { letter-spacing:.4em; }
.tracking-50 { letter-spacing:.5em; }

/* ── Select dropdowns: consistent chevron + native-list styling ─────── */
select.form-input {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:var(--select-chevron); background-repeat:no-repeat;
  background-position:right 10px center; background-size:14px;
  padding-right:30px; cursor:pointer;
}

/* ── Dropdown trigger (custom select button) ─────────────────────────── */
.c-select { position:relative; }
.c-select-inline { width:auto; display:inline-flex; }
.c-select-inline .c-select-btn { width:auto; }
.c-select-btn {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; font:inherit; color:var(--text); background:var(--bg-page);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:7px 10px; text-align:left; cursor:pointer;
  transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.c-select-btn::after {
  content:''; width:14px; height:14px; flex-shrink:0;
  background-image:var(--select-chevron); background-repeat:no-repeat;
  background-position:center; background-size:14px;
}
.c-select.open .c-select-btn,
.c-select-btn:focus-visible {
  outline:none; border-color:var(--accent-strong);
  box-shadow:0 0 0 3px rgba(2,132,199,.15);
}
.c-select-btn:disabled {
  opacity:.55; cursor:not-allowed;
}

/* ── Dropdown panels: one shared look for every dropdown (custom selects,
      location autocomplete). JS (ui.js openDropdown) repositions the panel
      fixed to the viewport when open; these absolute rules are the in-flow
      fallback. ─────────────────────────────────────────────────────────── */
.c-select-list, .la-dropdown {
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:90;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius); max-height:260px; overflow-y:auto;
  scrollbar-gutter:stable; box-shadow:0 8px 24px rgba(0,0,0,.12);
  font-size:var(--text-md);
}
.c-select-list::-webkit-scrollbar, .la-dropdown::-webkit-scrollbar { width:8px; }
.c-select-list::-webkit-scrollbar-track, .la-dropdown::-webkit-scrollbar-track { background:transparent; }
.c-select-list::-webkit-scrollbar-thumb, .la-dropdown::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.c-select-list::-webkit-scrollbar-thumb:hover, .la-dropdown::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
.c-select-item, .la-item {
  width:100%; text-align:left; font:inherit; color:var(--text);
  background:transparent; border:none; padding:10px 14px; cursor:pointer;
  transition:background .12s var(--ease-out);
}
.c-select-item { display:block; }
.c-select-item:hover, .la-item:hover, .la-item.la-highlight { background:var(--bg-page); }
.c-select-item.selected { color:var(--accent-strong); font-weight:700; }
.c-select-native { display:none; }

/* ── Request letter upload dropzone ──────────────────────────────────── */
.upload-drop {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:22px 14px; border:2px dashed var(--border); border-radius:var(--radius-lg);
  background:var(--bg-page); cursor:pointer; text-align:center; color:var(--text-muted);
  font-weight:600; font-size:var(--text-md);
  transition:border-color .15s var(--ease-out), background .15s var(--ease-out), transform .15s var(--ease-out);
}
.upload-drop:hover { border-color:var(--accent-strong); background:rgba(56,189,248,.05); }
.upload-drop:active { transform:scale(.99); }
.upload-drop.has-file { border-style:solid; border-color:var(--st-completed); }
.upload-drop.invalid { border-color:#DC2626; }
.upload-drop .upload-icon {
  width:40px; height:40px; border-radius:50%; background:rgba(56,189,248,.1);
  color:var(--accent-strong); display:flex; align-items:center; justify-content:center;
}
.upload-drop .upload-icon svg { width:20px; height:20px; }
.upload-drop .upload-hint { font-size:11px; color:var(--text-muted); font-weight:500; }
.upload-drop input[type="file"] { display:none; }

/* ── Destination mini-map ────────────────────────────────────────────── */
.map-mini { height:clamp(220px, 45vh, 320px); border-radius:var(--radius); border:1px solid var(--border); z-index:1; }
.form-label {
  font-size:var(--text-sm); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-wide); color:var(--text-muted);
  display:block; margin-bottom:4px;
}
.form-grid {
  display:grid; gap:12px;
}
.form-grid-2 { grid-template-columns:1fr 1fr; }
.form-grid-3 { grid-template-columns:1fr 1fr 1fr; }
.form-grid-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
/* Full-width cell inside any grid, single- or multi-column (replaces
   inline grid-column:span 2 which created phantom columns on mobile). */
.span-full { grid-column:1 / -1; }
@media (max-width:900px) {
  .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns:1fr; }
}

/* ── Filter bar ──────────────────────────────────────────────────────── */
.filter-bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:16px;
}

/* ── Search input ────────────────────────────────────────────────────── */
.search-input {
  position:relative;
}
.search-input input {
  padding-left:32px;
}
.search-input svg {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--text-muted); pointer-events:none;
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.pagination {
  display:flex; align-items:center; gap:4px; font-size:var(--text-md);
}
.pagination button {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 6px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg-surface);
  color:var(--text); font:inherit; font-size:var(--text-sm); cursor:pointer;
}
.pagination button:hover { background:var(--bg-page); }
.pagination button.active {
  background:var(--accent-strong); color:#fff; border-color:var(--accent-strong);
}
.pagination button:disabled { opacity:.4; cursor:default; }

/* ── Table pager (10-row tabs) ───────────────────────────────────────── */
.table-pager {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 14px; border-top:1px solid var(--border); font-size:var(--text-md);
}
.pager-info { color:var(--text-muted); font-weight:600; }
.pager-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.pager-tab {
  font:inherit; cursor:pointer; padding:5px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-page); color:var(--text);
  font-size:var(--text-sm); font-weight:700; line-height:1;
  transition:background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out);
}
.pager-tab:hover { border-color:var(--accent-strong); }
.pager-tab:active { transform:scale(.95); }
.pager-tab.active { background:var(--accent-strong); border-color:var(--accent-strong); color:#fff; }
.pager-tab.pager-nav { min-width:32px; text-align:center; padding:5px 10px; }
.pager-tab.pager-nav:disabled { opacity:.35; cursor:default; border-color:var(--border); background:var(--bg-page); color:var(--text); }

/* ── Alert ───────────────────────────────────────────────────────────── */
.alert {
  padding:10px 14px; border-radius:var(--radius); font-size:var(--text-md);
  font-weight:600; margin-bottom:12px;
}
.alert-error { background:rgba(220,38,38,.1); color:#DC2626; border:1px solid rgba(220,38,38,.2); }
.alert-info { background:rgba(14,165,233,.1); color:#0EA5E9; border:1px solid rgba(14,165,233,.2); }
.alert-warning { background:rgba(217,119,6,.1); color:#D97706; border:1px solid rgba(217,119,6,.2); }

/* ── Progress bar ────────────────────────────────────────────────────── */
.progress-bar {
  display:flex; height:8px; border-radius:999px; overflow:hidden;
  background:var(--bg-page); border:1px solid var(--border);
}
.progress-bar-fill {
  height:100%; transition:width .4s var(--ease-out);
}

/* ── Chart card ──────────────────────────────────────────────────────── */
.chart-card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px;
}
/* Two-up chart/card grid that collapses cleanly below ~360px (no forced
   horizontal overflow from a fixed 340px minimum track). */
.chart-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
}
/* Fixed-height canvas box so a full-width chart keeps a stable height
   (Chart.js is drawn with maintainAspectRatio:false). */
.chart-canvas { position:relative; height:300px; }

/* Let a table cell wrap long values (plate, UID, names) on narrow screens. */
.cell-wrap { white-space:normal; overflow-wrap:break-word; }

/* ── Page stub (placeholder) ─────────────────────────────────────────── */
.page-stub {
  display:flex; align-items:center; justify-content:center;
  min-height:60vh; color:var(--text-muted); font-size:var(--text-lg);
}

/* ── Live tracking ───────────────────────────────────────────────────── */
.track-grid { display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
#map { height:clamp(300px, 60vh, 560px); border-radius:var(--radius); border:1px solid var(--border); z-index:1; }
.track-panel { display:flex; flex-direction:column; gap:8px; }
.track-list { list-style:none; margin:0; padding:0; }
.track-row {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 12px; border-bottom:1px solid var(--border); cursor:pointer; min-height:var(--row-h);
}
.track-row:hover { background:rgba(56,189,248,.06); }
.track-row > div:first-child { display:flex; flex-direction:column; }
.legend { display:flex; gap:6px; padding:10px 12px; flex-wrap:wrap; }
.b-current { background:#16A34A; } .b-delayed { background:#D97706; } .b-offline { background:#6B7280; }
/* Tracked-route legend (ticket map): dot color must match LEG_COLOR in ticket.js. */
.legend-item { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:600; color:var(--text); }
.legend-swatch { width:10px; height:10px; border-radius:999px; display:inline-block; flex-shrink:0; }
.swatch-outbound { background:#38BDF8; }
.swatch-inbound { background:#f97316; }
#crumbMap { height:clamp(260px, 55vh, 480px); border-radius:var(--radius); border:1px solid var(--border); z-index:1; margin-top:6px; }
#geofenceMap { height:clamp(220px, 45vh, 380px); border-radius:var(--radius); border:1px solid var(--border); z-index:1; margin-bottom:6px; }
.route-info { font-size:var(--text-sm); color:var(--text); padding:6px 0 0; font-weight:600; }
@media (max-width:900px) { .track-grid { grid-template-columns:1fr; } }

/* ── GSD Assistant / chatbot ─────────────────────────────────────────── */
.chat-panel {
  position:fixed; left:14px; bottom:14px; z-index:95;
  width:min(340px, calc(100vw - 36px));
  height:min(520px, calc(100dvh - 28px));
  max-height:calc(100dvh - 28px);
  display:flex; flex-direction:column;
  overflow:hidden;
  background:var(--bg-page);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  animation:riseUp .3s var(--ease-out);
}
.chat-panel[hidden] { display:none; }
@keyframes riseUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:901px) {
  .chat-panel { left:314px; }
}
/* Message log: fills the space left by the header/chips/input so the panel
   height stays constant whether or not the topic chips are shown. */
.chat-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.msg { max-width:85%; padding:8px 11px; border-radius:12px; font-size:var(--text-md); line-height:1.45; white-space:pre-line; animation:fadeInUp .25s var(--ease-out) both; }
.msg.bot { background:var(--bg-page); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.me  { background:var(--accent-strong); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
/* Typing indicator */
.msg.typing { display:inline-flex; align-items:center; gap:5px; min-width:44px; justify-content:center; }
.msg.typing i { width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; animation:typingBlink 1.2s var(--ease-in-out) infinite; }
.msg.typing i:nth-child(2) { animation-delay:.15s; }
.msg.typing i:nth-child(3) { animation-delay:.3s; }
@keyframes typingBlink { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-2px); } }
.chip {
  cursor:pointer; background:var(--bg-page); border:1px solid var(--border);
  border-radius:999px; padding:4px 10px; font-size:var(--text-sm); color:var(--text); font-family:inherit;
  transition:border-color .15s var(--ease-out), background .15s var(--ease-out), transform .15s var(--ease-out);
}
.chip:hover { border-color:var(--accent-strong); }
.chip:active { transform:scale(.97); }
/* Topic chips live in a strip pinned above the search bar, outside the
   scrolling message log, so "Show all topics" is always reachable. */
.chat-topics {
  display:flex; flex-wrap:wrap; gap:6px;
}
.chat-topics-bar {
  flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  max-height:190px; overflow-y:auto; overscroll-behavior:contain;
  padding:8px 12px; border-top:1px solid var(--border); background:var(--bg-page);
}
.chat-topics-bar[hidden] { display:none; }
/* "Show all topics" return link — drawn as a text divider (──── Show all ────). */
.chat-show-all {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:2px 0; border:0; cursor:pointer; font-family:inherit;
  background:transparent; font-size:var(--text-sm); font-weight:700; color:var(--accent-strong);
}
.chat-show-all::before, .chat-show-all::after { content:""; flex:1; height:1px; background:var(--border); }
.chat-show-all:hover { color:#0369A1; }
.chat-show-all[hidden] { display:none; }

/* ── Settings drawer ─────────────────────────────────────────────────── */
.drawer-backdrop { position:fixed; inset:0; background:rgba(2,8,20,.55); z-index:90; display:none; }
.drawer-backdrop.open { display:block; }
.drawer {
  position:fixed; top:0; right:-320px; width:300px; max-width:88vw; z-index:95;
  height:100vh; height:100dvh; padding-bottom:env(safe-area-inset-bottom);
  background:var(--bg-surface); border-left:1px solid var(--border);
  transition:right .3s var(--ease-out); display:flex; flex-direction:column;
}
.drawer.open { right:0; }

/* ── Idle overlay ────────────────────────────────────────────────────── */
#idleOverlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(2,8,20,.6); backdrop-filter:blur(3px); }
#idleOverlay.show { display:flex; }

/* ── Location autocomplete ───────────────────────────────────────────── */
/* Panel + item styling is shared with custom-select dropdowns above. */
.la-loading, .la-empty { padding:12px 14px; color:var(--text-muted); text-align:center; font-size:11.5px; }
.la-item { display:flex; gap:10px; align-items:center; }
.la-item-icon { flex-shrink:0; color:var(--text-muted); display:flex; align-items:center; }
.la-item-text { min-width:0; }
.la-item-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.la-item-addr { font-size:var(--text-sm); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.la-input-wrap { position:relative; }
.la-input-wrap .la-clear {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; border:none; background:var(--border);
  color:var(--text-muted); font-size:12px; cursor:pointer; display:none; align-items:center; justify-content:center; line-height:1;
}
.la-input-wrap.has-value .la-clear { display:flex; }

/* ── Utility: segments ───────────────────────────────────────────────── */
.seg { display:flex; gap:6px; }

/* ── Detail grid (auto-fill key-value pairs) ─────────────────────────── */
.detail-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;
}

/* ── Login hero ──────────────────────────────────────────────────────── */
.login-hero {
  flex: 0 0 66.666%;
}
.login-hero-veil {
  position:absolute; inset:0; background:rgba(34,78,112,.65);
}
.login-hero-content {
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:20px;
}

/* ── Auth cards (login + password reset) ─────────────────────────────── */
.auth-wrap {
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card, .card-login {
  width:100%; max-width:520px; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:40px 38px;
}
.field { margin-bottom:16px; }

/* ── Flatpickr date-time picker redesign ──────────────────────────────
   Note: flatpickr.min.css loads after app.css (via $HEAD_EXTRAS), so these
   overrides are prefixed with `.flatpickr-calendar` to win the cascade. */
body .flatpickr-calendar {
  width:332px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 32px rgba(2,8,20,.14);
  padding:8px 10px 10px;
  font-size:var(--text-base);
  color:var(--text);
  line-height:1.4;
}
body .flatpickr-calendar.arrowTop:before, body .flatpickr-calendar.arrowTop:after,
body .flatpickr-calendar.arrowBottom:before, body .flatpickr-calendar.arrowBottom:after { display:none; }

/* Header: centered "September 2026" with evenly spaced arrows */
.flatpickr-calendar .flatpickr-months {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 2px 8px; position:relative;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  position:static; transform:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--radius);
  color:var(--text-muted);
  transition:background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
  background:var(--bg-page); color:var(--accent-strong);
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg { width:16px; height:16px; fill:currentColor; }
.flatpickr-calendar .flatpickr-month { position:static; flex:1; display:flex; justify-content:center; overflow:visible; }
.flatpickr-calendar .flatpickr-current-month {
  position:static; left:auto; width:auto; height:auto; padding:0;
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  font-size:var(--text-md); font-weight:700; color:var(--text);
}
.flatpickr-calendar .flatpickr-current-month .cur-month {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; border:none; padding:0 14px 0 0;
  color:var(--text); font:inherit; font-weight:700; cursor:pointer;
  background-image:var(--select-chevron); background-repeat:no-repeat;
  background-position:right center; background-size:12px;
  transition:color .18s var(--ease-out);
}
.flatpickr-calendar .flatpickr-current-month .cur-month:hover { color:var(--accent-strong); }
.flatpickr-calendar .flatpickr-current-month .cur-year {
  background:transparent; border:none; padding:0;
  color:var(--text); font:inherit; font-weight:700;
  width:4.5ch; text-align:center; cursor:pointer;
}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper { width:auto; }
.flatpickr-calendar .flatpickr-current-month .numInputWrapper span { display:none; }

/* Weekday labels */
.flatpickr-calendar .flatpickr-weekdaycontainer { display:flex; padding:0 2px 6px; }
.flatpickr-calendar .flatpickr-weekday {
  flex:1; text-align:center; font-weight:700; font-size:var(--text-sm);
  text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--text-muted); background:transparent;
}

/* Days grid */
.flatpickr-calendar .flatpickr-days { width:100%; }
.flatpickr-calendar .flatpickr-days .dayContainer { width:100%; padding:0; display:flex; flex-wrap:wrap; justify-content:space-between; }
.flatpickr-calendar .flatpickr-day {
  width:14.2857%; height:38px; line-height:38px;
  border-radius:50%; color:var(--text); font-size:var(--text-md);
  transition:background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.flatpickr-calendar .flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) { background:var(--bg-page); color:var(--accent-strong); }
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover { color:var(--border); background:transparent; cursor:default; }
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay { color:var(--text-muted); opacity:.45; }

/* Today: small dot indicator instead of an outline */
.flatpickr-calendar .flatpickr-day.today { color:var(--accent-strong); position:relative; box-shadow:none; }
.flatpickr-calendar .flatpickr-day.today::after {
  content:''; position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--accent-strong);
}
/* Today on top of the selected circle: white dot so it stays visible */
.flatpickr-calendar .flatpickr-day.today.selected::after { background:#fff; }

/* Selected: solid primary circle with contrasting text */
.flatpickr-calendar .flatpickr-day.selected {
  background:var(--accent-strong); color:#fff; font-weight:700; box-shadow:none;
}
.flatpickr-calendar .flatpickr-day.selected:hover { background:#0369A1; }

/* Late dates (within LATE_ADVANCE_DAYS): amber warning tint */
.flatpickr-calendar .flatpickr-day.late:not(.selected) { background:rgba(245,158,11,.12); color:#D97706; }
.flatpickr-calendar .flatpickr-day.late:not(.selected):hover { background:rgba(245,158,11,.22); }

/* Time picker: interactive segments */
body .flatpickr-calendar.hasTime .flatpickr-time {
  border-top:1px solid var(--border);
  padding:10px 4px 8px; height:auto; min-height:52px;
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.flatpickr-calendar .flatpickr-time .numInputWrapper {
  width:3.6rem; height:34px; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-page);
  transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.flatpickr-calendar .flatpickr-time .numInputWrapper:hover { background:var(--bg-page); }
.flatpickr-calendar .flatpickr-time .numInputWrapper input {
  display:block; width:100%; height:100%; text-align:center; font-size:var(--text-md); font-weight:700;
  line-height:normal; color:var(--text); background:transparent; border:none; padding:0;
}
.flatpickr-calendar .flatpickr-time .numInputWrapper span { display:none; }
.flatpickr-calendar .flatpickr-time .numInputWrapper:focus-within {
  border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(2,132,199,.15);
}
.flatpickr-calendar .flatpickr-time .flatpickr-time-separator { color:var(--text-muted); font-weight:700; }
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
  height:34px; min-width:3rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-page);
  font-size:var(--text-md); font-weight:700; color:var(--text); cursor:pointer;
  transition:border-color .18s var(--ease-out), color .18s var(--ease-out), background .18s var(--ease-out);
}
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover { border-color:var(--accent-strong); color:var(--accent-strong); }

/* Month/year popover — matches the calendar card (width, radius, shadow) */
.fp-month-pop {
  position:absolute; top:50px; left:10px; right:10px; z-index:100;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 32px rgba(2,8,20,.14);
  padding:10px;
  font-size:var(--text-base);
  color:var(--text);
  animation:fpPopIn .18s var(--ease-out);
}
.fp-month-pop[hidden] { display:none; }
@keyframes fpPopIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.fp-pop-year {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:2px 0 10px; margin-bottom:8px; border-bottom:1px solid var(--border);
}
.fp-year-btn {
  width:28px; height:28px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg-page);
  color:var(--text); font-size:var(--text-md); font-weight:700; cursor:pointer;
  transition:border-color .18s var(--ease-out), color .18s var(--ease-out), background .18s var(--ease-out);
}
.fp-year-btn:hover { border-color:var(--accent-strong); color:var(--accent-strong); }
.fp-year-val { font-size:var(--text-lg); font-weight:800; min-width:4ch; text-align:center; }

.fp-pop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.fp-pop-month {
  padding:9px 0; text-align:center; font-size:var(--text-md); font-weight:600;
  color:var(--text); background:transparent; border:1px solid transparent;
  border-radius:var(--radius); cursor:pointer;
  transition:background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.fp-pop-month:hover { background:var(--bg-page); color:var(--accent-strong); }
.fp-pop-month.selected { background:var(--accent-strong); color:#fff; font-weight:700; }

/* ── Responsive helpers ──────────────────────────────────────────────── */
@media (max-width:900px) {
  .sidebar {
    display:flex; position:fixed; inset:0 auto 0 0; z-index:60;
    transform:translateX(-100%);
    transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
  }
  body.has-mobile-nav .sidebar { transform:translateX(0); box-shadow:0 0 40px rgba(2,8,20,.4); }
  /* Dimmed backdrop behind the open nav; click-to-close handled by settings.js. */
  body::before {
    content:""; position:fixed; inset:0; z-index:55;
    background:rgba(2,8,20,.55); opacity:0; pointer-events:none;
    transition:opacity .28s var(--ease-out);
  }
  body.has-mobile-nav::before { opacity:1; pointer-events:auto; }
  .stat-cards { grid-template-columns:repeat(2,1fr); }
  /* Calendar: month control primary (full width), year compact below. */
  .cal-card .card-head { flex-direction:column; align-items:stretch; gap:10px; }
  .cal-card .card-head > span { text-align:center; }
  .cal-nav { width:100%; flex-direction:column; align-items:stretch; gap:8px; }
  .cal-nav-group { padding:3px; }
  .cal-nav-group:first-child { order:2; width:auto; align-self:center; }
  .cal-nav-group:last-child  { order:1; }
  .cal-nav-group .btn { width:40px; height:40px; }
  .cal-title { flex:1; min-width:0; }
  /* Tables: turn rows into stacked cards; each cell carries its column label
     via data-label so the hidden <thead> is not lost. Action cell (last td)
     moves first and shows no label. */
  .data-table thead { display:none; }
  .data-table tbody tr,
  table[data-pager] tbody tr.page-visible { display:flex; flex-wrap:wrap; gap:2px 10px; padding:10px 12px; border-bottom:1px solid var(--border); }
  .data-table tbody td { border:none; padding:2px 0; flex:1 1 100%; }
  .data-table tbody td:last-child:not([data-label]) { order:-1; flex-basis:100%; margin-bottom:4px; }
  .data-table tbody td[data-label]::before {
    content:attr(data-label); display:block;
    font-size:10px; font-weight:800; text-transform:uppercase;
    letter-spacing:var(--tracking-wide); color:var(--text-muted);
    margin-bottom:1px;
  }
  .data-table tbody tr:last-child td { border-bottom:none; }
  /* Touch targets: keep row actions, icon buttons and calendar days tappable. */
  .icon-btn-sm { width:32px; height:32px; }
  .modal-close { width:36px; height:36px; }
  .data-table .btn-sm { min-height:32px; }
  .cal-day { min-height:40px; }
  .chart-canvas { height:240px; }
}
.nav-toggle { display:none; }
@media (max-width:900px) {
  .nav-toggle { display:inline-flex; }
  .topbar-right span { display:none; }
}

/* ── Flatpickr theme (cohesive with .form-input) ─────────────────────── */
/* Double-class selectors beat flatpickr.min.css (loaded after app.css).  */
.flatpickr-calendar.flatpickr-calendar {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:0 8px 24px rgba(0,0,0,.12);
  font-family:inherit; font-size:var(--text-md); color:var(--text);
}
.flatpickr-calendar.flatpickr-calendar:before,
.flatpickr-calendar.flatpickr-calendar:after { border-bottom-color:var(--border); }
.flatpickr-calendar.flatpickr-calendar:after { border-bottom-color:var(--bg-surface); }
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month { color:var(--text-muted); fill:var(--text-muted); }
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month:hover { color:var(--accent-strong); }
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month:hover svg { fill:var(--accent-strong); }
.flatpickr-current-month.flatpickr-current-month,
.flatpickr-current-month.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month.flatpickr-current-month input.cur-year {
  color:var(--text); font-weight:600;
}
.flatpickr-current-month.flatpickr-current-month .numInputWrapper span:hover { background:rgba(2,132,199,.1); }
.flatpickr-weekday.flatpickr-weekday { color:var(--text-muted); font-weight:700; }
.flatpickr-day.flatpickr-day { color:var(--text); border-color:transparent; }
.flatpickr-day.flatpickr-day:hover,
.flatpickr-day.flatpickr-day:focus { background:rgba(56,189,248,.12); border-color:transparent; }
.flatpickr-day.flatpickr-day.today { border-color:var(--accent); color:var(--accent-strong); }
.flatpickr-day.flatpickr-day.today:hover,
.flatpickr-day.flatpickr-day.today:focus { background:rgba(56,189,248,.12); border-color:var(--accent); }
.flatpickr-day.flatpickr-day.selected,
.flatpickr-day.flatpickr-day.selected:hover,
.flatpickr-day.flatpickr-day.selected:focus,
.flatpickr-day.flatpickr-day.startRange,
.flatpickr-day.flatpickr-day.endRange { background:var(--accent-strong); border-color:var(--accent-strong); color:#fff; }
.flatpickr-day.flatpickr-day.inRange,
.flatpickr-day.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.flatpickr-day.nextMonthDay.inRange { background:rgba(56,189,248,.16); border-color:transparent; color:var(--text); }
.flatpickr-day.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-day.flatpickr-disabled:hover { color:var(--text-muted); opacity:.55; }
.flatpickr-time.flatpickr-time { border-top:1px solid var(--border); }
.flatpickr-time.flatpickr-time input,
.flatpickr-time.flatpickr-time .flatpickr-am-pm { color:var(--text); }
.flatpickr-time.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time.flatpickr-time input:hover { background:rgba(56,189,248,.08); }
.flatpickr-time.flatpickr-time .numInputWrapper span:hover { background:rgba(2,132,199,.1); }
.flatpickr-calendar.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar.flatpickr-calendar .flatpickr-weekdays { background:transparent; }
html[data-theme="dark"] .flatpickr-calendar.flatpickr-calendar {
  background:var(--bg-surface); border-color:var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
html[data-theme="dark"] .flatpickr-calendar.flatpickr-calendar:after { border-bottom-color:var(--bg-surface); }
html[data-theme="dark"] .flatpickr-day.flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.flatpickr-day.flatpickr-disabled:hover { color:var(--text-muted); opacity:.5; }

/* ── Google Places autocomplete (pac-container) theme ────────────────── */
/* Double-class selectors beat Google's runtime-injected styles.          */
.pac-container.pac-container {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:0 8px 24px rgba(0,0,0,.12);
  font-family:inherit; font-size:var(--text-md); color:var(--text);
  padding:4px; margin-top:4px;
}
.pac-container.pac-container .pac-item {
  padding:9px 12px; border-top:1px solid var(--border); color:var(--text);
  cursor:pointer; border-radius:6px;
}
.pac-container.pac-container .pac-item:first-child { border-top:none; }
.pac-container.pac-container .pac-item:hover,
.pac-container.pac-container .pac-item.pac-item-selected { background:rgba(56,189,248,.1); }
.pac-container.pac-container .pac-item-query { color:var(--text); font-size:var(--text-md); }
.pac-container.pac-container .pac-matched { color:var(--accent-strong); }
.pac-container.pac-container .pac-icon { display:none; }
html[data-theme="dark"] .pac-container.pac-container {
  background:var(--bg-surface); border-color:var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
html[data-theme="dark"] .pac-container.pac-container .pac-item { border-top-color:var(--border); color:var(--text); }
html[data-theme="dark"] .pac-container.pac-container .pac-item-query { color:var(--text); }
html[data-theme="dark"] .pac-container.pac-container .pac-matched { color:var(--accent); }