/* CAR24 look, kept light: graphite header bar with the logo, red accent, hairline boxes. System fonts only. */
:root {
  --bg: #f5f3f7;
  --panel: #ffffff;
  --ink: #35353b;
  --muted: #707070;
  --line: #d8d6da;
  --head: #e8e7eb;
  --zebra: #faf9fb;
  --accent: #cd0008;
  --accent-ink: #ffffff;
  --bar: #35353b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1b1f;
    --panel: #25252a;
    --ink: #f1f1f3;
    --muted: #9a9aa2;
    --line: #3a3a41;
    --head: #2f2f35;
    --zebra: #2a2a2f;
    --accent: #ff3d45;
    --accent-ink: #ffffff;
    --bar: #121215;
  }
}

:root { color-scheme: light dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- brand bar */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px;
  background: var(--bar);
  color: #fff;
  border-bottom: 3px solid var(--accent);
}
.brand img { display: block; height: 28px; width: auto; }
.brand .title { font-weight: 600; font-size: 14px; }
.brand .title small { margin-left: 10px; font-weight: 400; font-size: 12px; color: #c9c9ce; }
.brand .nav { margin-left: auto; color: #fff; text-decoration: none; font-size: 12px; padding: 2px 8px; border: 1px solid #6a6a72; border-radius: 2px; }
.brand .nav:hover { border-color: #fff; }
.status { margin-left: 8px; font-size: 12px; color: #c9c9ce; text-align: right; }
.status.error { color: #ff8a8f; font-weight: 600; }

/* ---------- controls */

.toolbar { padding: 8px 12px 6px; display: grid; gap: 6px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.months { display: flex; flex-wrap: wrap; gap: 6px; }

.month {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
}
.month i { width: 14px; height: 14px; border: 1px solid var(--ink); background: var(--head); }
.month:hover:not(:disabled) { border-color: var(--accent); }
.month[aria-pressed="true"] { border-color: var(--accent); font-weight: 600; }
.month[aria-pressed="true"] i { background: var(--accent); border-color: var(--accent); }
.month:disabled { opacity: 0.4; cursor: default; }
.month.all { margin-left: 6px; }

.toolbar label { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
input[type="date"], select, #refresh {
  font: inherit;
  padding: 4px 6px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
}
#refresh { cursor: pointer; margin-left: auto; }
#refresh:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
#refresh:disabled { opacity: 0.5; cursor: default; }

/* ---------- layout */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
  gap: 10px;
  padding: 0 12px 12px;
  align-items: start;
}
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } }

.table-card, .chart-card { background: var(--panel); border: 1px solid var(--line); margin: 0; }

.table-scroll { max-height: calc(100vh - 150px); overflow: auto; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

th, td { padding: 4px 8px; border: 1px solid var(--line); text-align: center; white-space: nowrap; }
thead th { background: var(--head); position: sticky; z-index: 1; white-space: normal; }
thead tr.means th { top: 0; background: var(--panel); border: 0; text-align: left; color: var(--muted); font-weight: 400; padding: 5px 8px; }
thead tr.means th:nth-child(n+2) { text-align: center; }
thead tr.stages th { top: var(--means-h, 52px); border-bottom: 2px solid var(--accent); }
thead th small { display: block; font-weight: 400; color: var(--muted); }

.box { border: 1px solid var(--ink); padding: 1px 8px; background: var(--panel); }
.box small { display: block; color: var(--muted); font-weight: 400; }
.box b { font-size: 16px; color: var(--accent); }

tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:hover td { background: var(--head); }
td.id { text-align: left; font-weight: 600; }
td.pending { color: var(--muted); }
td.days { font-weight: 600; }

.tag { margin-left: 6px; padding: 0 5px; border: 1px solid var(--accent); border-radius: 2px; font-size: 11px; font-weight: 400; color: var(--accent); }

.empty { margin: 0; padding: 16px; text-align: center; color: var(--muted); }

/* ---------- charts */

.charts { display: grid; gap: 10px; }
.chart-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  border-left: 3px solid var(--accent);
}
.chart-card figcaption small { margin-left: 6px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.canvas { position: relative; height: calc((100vh - 250px) / 2); min-height: 200px; padding: 6px 8px 4px; }

/* chart type switch: small segmented control in the chart header */
.types { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 2px; }
.types button {
  padding: 1px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}
.types button + button { border-left: 1px solid var(--line); }
.types button:hover { color: var(--accent); }
.types button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* narrower screens: the axis titles already say what a point is, so the caption hint goes */
@media (max-width: 1450px) { .chart-card figcaption small { display: none; } }

/* signed-in user + sign out, in the brand bar */
.brand .who { font-size: 12px; color: #c9c9ce; margin-left: 4px; }
.brand .logout { font: inherit; font-size: 12px; color: #fff; background: none; border: 1px solid #6a6a72; border-radius: 2px; padding: 2px 8px; cursor: pointer; }
.brand .logout:hover { border-color: #fff; }