/* ---------------------------------------------------------------------------
   DrevoBot - what is specific to this application, on top of the forest token
   layer in tomlabs.css: the bridge that lets the hand-drawn charts read the
   tokens, and the styles of the charts and tables themselves.
   --------------------------------------------------------------------------- */

/* --- chart bridge -------------------------------------------------------- */
/* The charts are drawn by hand and speak the role names of the data-viz
   reference; the values come from the tokens, so a chart always matches the
   paper it sits on, in both themes. */
:root {
    --surface-1: var(--tl-surface);
    --text-primary: var(--tl-text);
    --text-secondary: var(--tl-text-secondary);
    --text-muted: var(--tl-text-muted);
    --gridline: var(--tl-hairline);
    --axis: var(--tl-hairline);
    --hairline: var(--tl-hairline);

    --series-1: var(--tl-series-1);
    --series-2: var(--tl-series-2);
    --series-3: var(--tl-series-3);
    --series-4: var(--tl-series-4);
    --series-5: var(--tl-series-5);

    --delta-down-good: var(--tl-delta-good);
    --delta-up-bad: var(--tl-delta-bad);
}

.delta-down {
    color: var(--delta-down-good);
}

.delta-up {
    color: var(--delta-up-bad);
}

.muted {
    color: var(--text-muted);
}

/* Prices and volumes line up in a column: tabular figures in the body face. */
.num {
    text-align: right;
    font-family: var(--tl-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- chart --------------------------------------------------------------- */
.chart-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.chart-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.chart-figure {
    margin: 0;
}

.chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.chart-legend .swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 0.35rem;
    vertical-align: baseline;
}

.chart-empty {
    color: var(--text-muted);
    padding: 2.5rem 0;
    text-align: center;
}

/* Horizontal bars - hand-made marks instead of a library */
.bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 160px) 1fr minmax(100px, auto);
    align-items: center;
    gap: 0.6rem;
    padding: 0.22rem 0;
    font-size: 0.9rem;
}

.bar-track {
    background: var(--gridline);
    border-radius: 4px;
    height: 12px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 0 4px 4px 0;
}

.bar-value {
    text-align: right;
    font-family: var(--tl-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* Blazor error bar, shown when the circuit breaks */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    padding: 0.7rem 1.2rem;
    background: var(--tl-warn);
    color: #0b0c10;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* Stack trace in the log table: wraps instead of stretching the row into the distance */
.log-exception {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--tl-font-mono);
    font-size: 0.78rem;
    margin: 0;
    color: var(--text-secondary);
}

/* In the phone card layout every cell becomes its own labelled row, so a cell that
   holds nothing - the action column for a visitor who is not signed in - would be an
   empty row. On the desktop the cell keeps its place, otherwise the column would
   collapse for that one row. */
@media (max-width: 599px) {
    .mud-table-cell:empty {
        display: none;
    }
}

/* --- region map ---------------------------------------------------------- */
/* A sequential ramp: one hue, light to dark, five steps. The faintest step still
   reads against the paper (2.2:1) and against the night ground (2.3:1), so a
   region is never a shade of the background. "No data" is its own neutral, never
   the first step - empty and cheapest must not look alike. */
:root {
    --map-step-1: #cfa75e;
    --map-step-2: #b8863a;
    --map-step-3: #9a6820;
    --map-step-4: #7a4e13;
    --map-step-5: #55370b;
    --map-empty: #b9ae97;
    --map-line: #5a3e2b;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --map-step-1: #665429;
        --map-step-2: #87702f;
        --map-step-3: #ad8a38;
        --map-step-4: #d2a743;
        --map-step-5: #efc673;
        --map-empty: #4a5646;
        --map-line: #d8b193;
    }
}

:root[data-theme="dark"] {
    --map-step-1: #665429;
    --map-step-2: #87702f;
    --map-step-3: #ad8a38;
    --map-step-4: #d2a743;
    --map-step-5: #efc673;
    --map-empty: #4a5646;
    --map-line: #d8b193;
}

.map-frame {
    height: 420px;
    border: 1px solid var(--paper-3);
    border-radius: var(--radius);
    background: var(--paper-2);
    overflow: hidden;
}

/* Leaflet paints its own surfaces; without a base map they would be white. */
.map-frame .leaflet-container {
    background: var(--paper-2);
    font-family: var(--sans);
}

.map-frame .leaflet-control-attribution {
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .7rem;
}

.map-frame .leaflet-control-attribution a { color: var(--forest); }

.map-tooltip {
    background: var(--surface);
    border: 1px solid var(--paper-3);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: .85rem;
    padding: 6px 10px;
}

.map-tooltip::before { display: none; }
.map-tip strong { font-family: var(--serif); }
.map-tip div { color: var(--ink-soft); }

.map-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    font-size: .8rem;
    color: var(--ink-soft);
}

.map-legend-swatch,
.map-legend-empty {
    width: 22px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--paper-3);
    display: inline-block;
}

.map-legend-empty {
    background: var(--map-empty);
    opacity: .35;
    margin-left: 10px;
}

.map-legend-label { margin: 0 2px; }

.map-table { margin-top: 12px; font-size: .9rem; }
.map-table summary { cursor: pointer; color: var(--forest); }

.chart-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.chart-table th, .chart-table td { padding: 4px 8px; border-bottom: 1px solid var(--paper-3); text-align: left; }
.chart-table th { color: var(--ink-soft); font-weight: 600; }

@media (max-width: 600px) {
    .map-frame { height: 320px; }
}

/* A price without VAT, or with the trip already in it, cannot be read like the rest of the
   column. The note carries the warning colour so the eye catches it before the number. */
.price-terms { color: var(--tl-warn); }

/* Nabídka prodejce, který tak malé množství neprodá: zůstane vidět i s důvodem, ale nemá se
   číst jako reálná volba. */
.below-minimum { opacity: .55; }

/* Na telefonu je odkaz v tabulce to, čím se nákup posouvá dál – jenže jednořádkové jméno
   prodejce je vysoké dvacet pixelů, což je polovina toho, co prst spolehlivě trefí. Odkazy
   v rozpadlé tabulce proto dostanou výšku celého dotykového cíle. */
@media (max-width: 600px) {
    .mud-table-cell a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* Celý řádek přehledu vede na nabídku, tak ať to kurzor prozradí. */
.offer-row { cursor: pointer; }