/* Styles for the "Koliko traje put" report. Mobile-first; tokens on :root, dark
   theme via prefers-color-scheme (charts read the same tokens at render time). */
:root {
    --bg: #f4f3ef;
    --surface: #fcfcfb;
    --ink: #0b0b0b;
    --ink-muted: #52514e;
    --line: #dedcd5;
    --grid: #e8e6df;
    --accent: #2a78d6;
    --heat-empty: #eeede8;
    --chip-bg: #ffffff;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --radius: 8px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #111110;
        --surface: #1a1a19;
        --ink: #ffffff;
        --ink-muted: #c3c2b7;
        --line: #33332f;
        --grid: #2a2a27;
        --accent: #3987e5;
        --heat-empty: #242422;
        --chip-bg: #232321;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
}

#app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 12px 48px;
}

a { color: var(--accent); }

h1 { font-size: 1.5rem; margin: 0 0 6px; line-height: 1.2; }
h2 { font-size: 1.2rem; margin: 32px 0 6px; }
code { font-size: 0.9em; }

.page-head { display: flex; gap: 14px; align-items: flex-start; }
.logo img { width: 44px; height: 44px; border-radius: 6px; display: block; }
.lede { margin: 0; color: var(--ink-muted); }
.section-note { margin: 0 0 10px; color: var(--ink-muted); font-size: 0.92rem; }
.coverage { margin: 12px 0 0; color: var(--ink-muted); font-size: 0.92rem; }
.status { margin: 0 0 8px; color: var(--ink-muted); font-size: 0.92rem; min-height: 0; }
.status:empty { display: none; }
.status.error { color: #b3261e; }

/* ── controls (sticky: they drive every chart below) ──────────────────── */
.controls {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 18px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.control { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.control-wide { flex: 1 1 100%; }
.control label, .control-label { font-size: 0.8rem; color: var(--ink-muted); }
select {
    font: inherit;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--chip-bg);
    color: var(--ink);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--ink-muted);
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.chip .dot, .picker-row .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box; flex-shrink: 0; }
.chip-x { color: var(--ink-muted); margin-left: 2px; font-size: 1rem; line-height: 1; }
.mode-chip.inactive { opacity: 0.55; border-color: var(--line); }
.mode-glyph { width: 26px; height: 6px; color: var(--ink-muted); flex-shrink: 0; }

/* ── pair picker (dropdown with checkboxes) ───────────────────────────── */
.picker { position: relative; max-width: 460px; }
.picker > summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--chip-bg);
    font-size: 0.9rem;
    user-select: none;
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary::after { content: ' ▾'; color: var(--ink-muted); }
.picker[open] > summary::after { content: ' ▴'; }
.picker-list {
    position: absolute;
    z-index: 1100;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow);
}
.picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    font-size: 0.88rem;
    cursor: pointer;
}
.picker-row:hover { background: color-mix(in srgb, var(--surface) 60%, var(--bg)); }
.picker-hint { color: var(--ink-muted); font-size: 0.8rem; }
.picker-hint:empty { display: none; }

/* ── cards ────────────────────────────────────────────────────────────── */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.card {
    text-align: left;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--card-color, var(--line));
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0.72;
}
.card.active { opacity: 1; }
.card-title { font-weight: bold; margin: 0 0 6px; font-size: 0.95rem; }
.card-big { font-size: 1.7rem; font-weight: bold; line-height: 1.1; }
.card-big small { font-size: 1rem; font-weight: normal; color: var(--ink-muted); margin-left: 6px; }
.card-line { margin: 6px 0 0; font-size: 0.85rem; color: var(--ink-muted); }
.card-line strong { color: var(--ink); font-weight: normal; }
.cards-toggle {
    margin-top: 10px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--accent);
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 14px;
    cursor: pointer;
}

/* ── map ──────────────────────────────────────────────────────────────── */
.map {
    height: 300px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    z-index: 0;
}
.map-legend {
    background: rgba(255, 255, 255, 0.82);
    color: #0b0b0b;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 220px;
}
.map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ── charts ───────────────────────────────────────────────────────────── */
.chart-box {
    position: relative;
    height: 280px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* ── heat map ─────────────────────────────────────────────────────────── */
.heat-control { margin-bottom: 8px; max-width: 360px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.heatmap { border-collapse: separate; border-spacing: 2px; font-size: 0.82rem; }
.heatmap th { font-weight: normal; color: var(--ink-muted); padding: 2px 4px; text-align: center; white-space: nowrap; }
.heatmap th.day { text-align: right; }
.heatmap td { min-width: 44px; padding: 5px 4px; text-align: center; border-radius: 3px; }
.heatmap td.freeflow { color: var(--ink-muted); background: transparent; white-space: nowrap; }
.heat-block { overflow-x: auto; }
.heat-block + .heat-block { margin-top: 20px; }
/* Desktop: the two mode heat maps (auto, javni prijevoz) share the width. */
@media (min-width: 1240px) {
    #heatmaps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
    .heat-block + .heat-block { margin-top: 0; }
}
.heat-mode-title { margin: 0 0 2px; font-size: 1rem; }
.heat-caption { margin: 0 0 6px; color: var(--ink-muted); font-size: 0.82rem; }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.8rem; color: var(--ink-muted); }
.heat-legend .swatch { display: inline-block; width: 26px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 3px; }

/* ── summary table ────────────────────────────────────────────────────── */
.summary-table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 0.88rem; background: var(--surface); }
.summary-table th, .summary-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.summary-table th:first-child, .summary-table td:first-child { text-align: left; }
.summary-table th { cursor: pointer; user-select: none; color: var(--ink-muted); font-weight: normal; }
.summary-table th.sorted { color: var(--ink); font-weight: bold; }
.summary-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.summary-table td.muted { color: var(--ink-muted); }

/* ── methodology / footer ─────────────────────────────────────────────── */
.method p, .method li { font-size: 0.92rem; }
.method ul { margin: 4px 0 10px; padding-left: 20px; }
.page-foot { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 0.85rem; }

@media (max-width: 639px) {
    /* Keep the sticky bar short on phones: two selects share a row, the selected
       chips scroll in a single row instead of wrapping. */
    .controls { gap: 8px 10px; padding: 8px 10px; }
    .control { flex: 1 1 42%; min-width: 0; }
    .control select { width: 100%; }
    .control:has(#mode-toggles), .control-wide { flex: 1 1 100%; }
    #selected-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    #selected-chips .chip { flex-shrink: 0; }
}

@media (min-width: 640px) {
    #app { padding: 24px 20px 64px; }
    h1 { font-size: 1.9rem; }
    .map { height: 380px; }
    .chart-box { height: 340px; }
    .control-wide { flex: 1 1 320px; }
}