/* Shared look for every dispatcher page: colours, top navigation, page toolbar, buttons and inputs.
   Page-specific styles live in each page. */
:root {
  --bg:#f6f7f9; --card:#fff; --ink:#1c2230; --muted:#6b7385; --line:#e3e6ec; --accent:#2563eb;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  --nav-bg:#111827; --nav-ink:#e5e7eb; --nav-muted:#aeb5c2; --nav-on:#ffffff;
  color-scheme:light;
}
/* Dark: follows the device unless the Light/Dark switch is set (nav.js sets data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#161a22; --card:#1f2430; --ink:#f4f6fa; --muted:#b3bac8; --line:#394152; --accent:#3b82f6; --nav-bg:#0d1016; color-scheme:dark; }
}
:root[data-theme="dark"] { --bg:#161a22; --card:#1f2430; --ink:#f4f6fa; --muted:#b3bac8; --line:#394152; --accent:#3b82f6; --nav-bg:#0d1016; color-scheme:dark; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--ink); }

/* ---- top navigation (built by nav.js) ---- */
.topnav { display:flex; align-items:center; gap:4px; padding:0 16px; height:46px; background:var(--nav-bg); color:var(--nav-ink); overflow-x:auto; scrollbar-width:none; }
.topnav::-webkit-scrollbar { display:none; }
.topnav .brand { font-weight:700; letter-spacing:.01em; margin-right:14px; white-space:nowrap; color:var(--nav-on); text-decoration:none; display:flex; align-items:center; gap:8px; }
.topnav .brand i { width:10px; height:10px; border-radius:3px; background:var(--accent); display:inline-block; }
.topnav a.tab { color:var(--nav-muted); text-decoration:none; padding:0 12px; height:46px; display:flex; align-items:center; gap:6px; border-bottom:2px solid transparent; white-space:nowrap; font-size:13.5px; }
.topnav a.tab:hover { color:var(--nav-on); }
.topnav a.tab.on { color:var(--nav-on); border-bottom-color:var(--accent); font-weight:600; }
.topnav .group { color:var(--nav-muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:0 2px 0 12px; opacity:.7; white-space:nowrap; }
.topnav .count { font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:#374151; color:#fff; }
.topnav .count.bad { background:var(--bad); }
.topnav .count.warn { background:#b45309; }
.topnav .spacer { flex:1; }
.topnav .mock { margin-left:8px; }
.topnav .theme { margin-left:8px; background:transparent; border:1px solid #374151; color:var(--nav-ink); font-size:12.5px; padding:4px 10px; border-radius:99px; white-space:nowrap; }
.topnav .theme:hover { border-color:var(--nav-muted); color:var(--nav-on); }

/* ---- page toolbar: title on the left, the page's controls on the right ---- */
header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
header h1 { font-size:17px; margin:0 auto 0 0; flex:1 1 260px; line-height:1.25; }
header .tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
header .sep { width:1px; height:22px; background:var(--line); }

.mock { background:#fef3c7; color:#92400e; padding:2px 8px; border-radius:99px; font-size:12px; white-space:nowrap; }
button, select, input, textarea { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:7px; }
button { padding:6px 11px; cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--muted); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover:not(:disabled) { filter:brightness(1.08); }
button:disabled { opacity:.5; cursor:default; }
input, select { padding:4px 7px; }
input[type=date] { padding:4px 6px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.muted { color:var(--muted); }

@media (max-width: 700px) {
  header { padding:10px 12px; }
  header h1 { font-size:15px; flex-basis:100%; }
  .topnav { padding:0 8px; }
  .topnav .brand span { display:none; }
  .topnav a.tab { padding:0 9px; }
}

/* ---- "what's in it" pop-up for sub-rentals (subitems.js) ---- */
dialog.subitems { border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); padding:16px 18px; width:min(640px, calc(100vw - 32px)); max-height:85vh; }
dialog.subitems::backdrop { background:rgba(0,0,0,.45); }
dialog.subitems h3 { margin:0 0 4px; font-size:16px; }
dialog.subitems a { color:var(--accent); }
.si-sub { color:var(--muted); font-size:13px; }
.si-warn { margin-top:8px; font-size:13px; color:var(--warn); font-weight:600; }
.si-job { margin-top:12px; border-top:1px solid var(--line); padding-top:8px; }
.si-jhead { font-size:13.5px; } .si-jhead span { display:block; color:var(--muted); font-size:12px; }
.si-job table { width:100%; border-collapse:collapse; margin-top:4px; font-size:13px; }
.si-job td { padding:3px 6px 3px 0; border-top:1px dashed var(--line); vertical-align:top; }
.si-job td.q { width:38px; font-weight:600; font-variant-numeric:tabular-nums; } .si-job td.w { width:60px; color:var(--muted); text-align:right; }
.si-job td.st { width:96px; text-align:right; font-size:12px; }
.si-in { color:var(--ok); } .si-out { color:var(--bad); font-weight:600; }
.si-acts { display:flex; justify-content:flex-end; margin-top:14px; }

/* signed-in person, and the view-only note */
.topnav .who { margin-left:10px; font-size:12.5px; color:var(--nav-muted); white-space:nowrap; }
.topnav .who small { background:#374151; color:#fff; padding:0 6px; border-radius:99px; margin:0 4px; }
.topnav .who a { color:var(--nav-ink); margin-left:6px; }
.viewonly { background:#fef3c7; color:#78350f; font-size:13px; padding:5px 16px; text-align:center; }