/* Tourenplanung — dense, data-first.
   Contrast values were checked against the sizes they are used at: the small
   uppercase labels and the utilisation figures are the ones that fail most
   easily, so --ink-3 and --warn are darker than they look like they need. */

:root {
  --bg:        oklch(0.975 0.004 250);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.985 0.003 250);
  --line:      oklch(0.905 0.007 250);
  --line-soft: oklch(0.945 0.005 250);
  --ink:       oklch(0.24 0.018 255);
  --ink-2:     oklch(0.45 0.014 255);
  --ink-3:     oklch(0.525 0.013 255);
  --accent:    oklch(0.50 0.145 252);
  --accent-sf: oklch(0.965 0.020 252);
  --ok:        oklch(0.47 0.105 158);
  --ok-sf:     oklch(0.955 0.030 158);
  --warn:      oklch(0.485 0.125 60);
  --warn-sf:   oklch(0.965 0.035 78);
  --bad:       oklch(0.505 0.18 27);
  --bad-sf:    oklch(0.965 0.028 27);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-size: 13px; line-height: 1.45;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
[hidden] { display: none !important; }

/* ── controls ───────────────────────────────────────────────────────── */
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  font-size: 13px; font-weight: 500; min-height: 34px;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: white; font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: oklch(0.44 0.15 252); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: white; font-weight: 600; }
.btn-sm { padding: 5px 11px; min-height: 28px; font-size: 12px; }
select, input[type=date], input[type=text] {
  font: inherit; font-size: 13px; padding: 6px 9px; min-height: 32px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink);
}

/* ── layout ─────────────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 48px;
  background: var(--surface); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.01em; }
.sep { width: 1px; height: 20px; background: var(--line); }
.grow { flex-grow: 1; }
.langtoggle { display: flex; gap: 2px; padding: 2px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 5px; }
.langtoggle button { padding: 5px 11px; border-radius: 3px; font-size: 12px; font-weight: 600;
  color: var(--ink-3); }
.langtoggle button.on { background: var(--surface); color: var(--ink); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-sf);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; }

.navbar { display: flex; gap: 2px; padding: 0 12px; background: var(--surface);
  border-bottom: 1px solid var(--line); flex-shrink: 0; }
.navitem { padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--ink-2);
  border-bottom: 2px solid transparent; min-height: 38px; }
.navitem:hover { color: var(--ink); }
.navitem.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

label { display: block; }
textarea { font-family: inherit; }
input[type=checkbox] { margin: 0; width: 15px; height: 15px; }
input[type=search] { font: inherit; font-size: 13px; padding: 6px 10px; min-height: 32px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--ink); }
input[type=search]:focus { outline: 2px solid var(--accent-sf); border-color: var(--accent); }

.steprail { display: flex; background: var(--surface); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.steprail button {
  flex-grow: 1; display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  border-bottom: 2px solid transparent; text-align: left; min-height: 46px;
}
.steprail button.on { border-bottom-color: var(--accent); background: var(--accent-sf); }
.steprail button:disabled { opacity: 0.5; cursor: not-allowed; }
.stepdot { width: 21px; height: 21px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0;
  background: oklch(0.90 0.006 250); color: var(--ink-3); }
.steprail button.on .stepdot { background: var(--accent); color: white; }
.steprail button.done .stepdot { background: var(--ok); color: white; }
.steplabel { font-size: 12.5px; font-weight: 500; }
.stephint { font-size: 10.5px; color: var(--ink-3); }

.body { flex-grow: 1; overflow: hidden; display: flex; }
.pane { flex-grow: 1; overflow: auto; }
.centred { max-width: 820px; margin: 0 auto; padding: 32px 22px; }

.actionbar { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 54px;
  background: var(--surface); border-top: 1px solid var(--line); flex-shrink: 0; }
.status { font-size: 12px; color: var(--ink-3); }

/* ── blocks ─────────────────────────────────────────────────────────── */
h1 { font-size: 19px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.015em; }
h2 { font-size: 14px; font-weight: 600; margin: 0; }
.sub { color: var(--ink-2); margin: 0 0 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.card-head { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex;
  align-items: center; gap: 10px; }

.kpis { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.kpi { flex: 1 1 130px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 11px 13px; }
.kpi .v { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.kpi .k { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 1px; }

.daygrid { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }
.day { flex: 1 1 118px; padding: 11px 12px; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 7px; text-align: left; min-height: 74px; }
.day.on { border-color: var(--accent); background: var(--accent-sf); }
.day .dow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); }
.day .dm { font-size: 17px; font-weight: 600; margin: 2px 0 4px; }
.day .n { font-size: 11.5px; color: var(--ink-2); }
.day.closed { opacity: 0.55; }

table { border-collapse: collapse; width: 100%; }
thead th { background: var(--ink); color: white; font-size: 10px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; padding: 6px 8px; text-align: left;
  position: sticky; top: 0; z-index: 1; }
tbody td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr.problem { background: var(--warn-sf); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-2); }
.num { text-align: right; white-space: nowrap; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 600; }
.pill-ok { background: var(--ok-sf); color: var(--ok); }
.pill-warn { background: oklch(0.945 0.055 78); color: var(--warn); }
.pill-bad { background: var(--bad-sf); color: var(--bad); }
.pill-mute { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }

.banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
  border-radius: 7px; margin-bottom: 14px; font-size: 12.5px; }
.banner-warn { background: var(--warn-sf); border: 1px solid oklch(0.90 0.05 78); }
.banner-bad { background: var(--bad-sf); border: 1px solid oklch(0.90 0.04 27); }
.banner-ok { background: var(--ok-sf); border: 1px solid oklch(0.90 0.04 158); }
.banner svg { flex-shrink: 0; margin-top: 1px; }

/* ── plan view ──────────────────────────────────────────────────────── */
.plan { display: flex; flex-grow: 1; overflow: hidden; }
.routelist { width: 400px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line); overflow: hidden; }
.routelist .scroll { flex-grow: 1; overflow: auto; }
.route { display: block; width: 100%; text-align: left; padding: 9px 13px;
  border-bottom: 1px solid var(--line-soft); border-left: 3px solid transparent; }
.route.on { background: var(--accent-sf); }
.route:hover { background: var(--surface-2); }
.route.on:hover { background: var(--accent-sf); }
.bar { width: 46px; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 5px; }

.mapwrap { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
#map { flex-grow: 1; min-height: 220px; background: oklch(0.96 0.006 245); }
.stops { height: 262px; flex-shrink: 0; background: var(--surface);
  border-top: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.stops .scroll { flex-grow: 1; overflow: auto; }
.seqdot { width: 20px; height: 20px; border-radius: 50%; color: white; display: flex;
  align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; }

.exceptions { border-top: 1px solid var(--line); background: var(--warn-sf); padding: 10px 13px;
  max-height: 210px; overflow: auto; }
.exc { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }

/* leaflet marker numbers */
.stopmarker { display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: white; font: 600 10px/1 "IBM Plex Mono", monospace; border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.depotmarker { border-radius: 3px; background: var(--ink); border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35); }

.spinner { width: 15px; height: 15px; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }

@media (max-width: 900px) {
  .plan { flex-direction: column; }
  .routelist { width: 100%; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .steprail button { padding: 8px 10px; }
  .stephint { display: none; }
}