/* ---------------------------------------------------------------------------
   The forest token layer, shared with Katalog arboristů (katalogarboristu.cz)
   and Stromopedie, so the tree sites read as siblings.

   The values below are copied from Arboriste's app.css unchanged - same names,
   same hexes - so the file can move to a shared package later without either
   application changing colour. Paper and ink rather than the dark-first "ops
   console" of the desktop tools: this is a product for visitors, not a console.

   The second block maps those colours onto the --tl-* names the shell pieces
   (command palette, chips, keyboard hints) are written against, so the shell
   follows the skin instead of carrying its own.

   Dark is declared twice on purpose: the media query follows the operating
   system, the attribute is a theme pinned in the app bar, and the pinned one
   has to win either way.
   --------------------------------------------------------------------------- */

:root {
    --forest: #2f5d3a;
    --forest-deep: #24482d;
    --moss: #6b8f4e;
    --sage: #a9b89a;
    --bark: #5a3e2b;
    --amber: #c98a2b;
    --paper: #f6f1e7;
    --paper-2: #efe7d6;
    --paper-3: #e3d9c6;
    --surface: #fffdf8;
    --ink: #2a2620;
    --ink-soft: #6b6259;
    --serif: "Fraunces", Georgia, serif;
    --sans: "Source Sans 3", "Segoe UI", sans-serif;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(42, 38, 32, .06), 0 4px 14px rgba(42, 38, 32, .06);
    --shadow-md: 0 6px 24px rgba(42, 38, 32, .12);
    --max: 1240px;

    --appbar: #24482d;
    --forest-tint: rgba(47, 93, 58, .12);
    --amber-ink: #8a5c15;
    --bad: #a23b2c;
    --bad-ink: #8a2f22;
    /* Text on the app bar and the overlays, which are dark in both themes. */
    --on-dark: #f6f1e7;
    color-scheme: light;
}

/* --- dark: the forest at night ---------------------------------------
   Not an inversion of the paper: a deep green-black ground, warm off-white
   ink, and the greens and ambers lifted so they still read as the same hues on
   a dark surface. Mirrored in DrevoBotTheme.cs for MudBlazor's own controls. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --forest: #8cc59a;
        --forest-deep: #b7dcbf;
        --moss: #9cc07e;
        --sage: #56654d;
        --bark: #d8b193;
        --amber: #e0a345;
        --paper: #111510;
        --paper-2: #182017;
        --paper-3: #2b3529;
        --surface: #172016;
        --ink: #ebe6da;
        --ink-soft: #aaa393;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
        --shadow-md: 0 6px 24px rgba(0, 0, 0, .5);
        --appbar: #0c110b;
        --forest-tint: rgba(140, 197, 154, .14);
        --amber-ink: #eab865;
        --bad: #e0715f;
        --bad-ink: #f2a597;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --forest: #8cc59a;
    --forest-deep: #b7dcbf;
    --moss: #9cc07e;
    --sage: #56654d;
    --bark: #d8b193;
    --amber: #e0a345;
    --paper: #111510;
    --paper-2: #182017;
    --paper-3: #2b3529;
    --surface: #172016;
    --ink: #ebe6da;
    --ink-soft: #aaa393;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, .5);
    --appbar: #0c110b;
    --forest-tint: rgba(140, 197, 154, .14);
    --amber-ink: #eab865;
    --bad: #e0715f;
    --bad-ink: #f2a597;
}

/* --- what the shell pieces are written against -------------------------- */
:root {
    --tl-bg: var(--paper);
    --tl-surface: var(--surface);
    --tl-elevated: var(--surface);
    --tl-panel: var(--paper-2);
    --tl-hairline: var(--paper-3);
    --tl-hover: var(--forest-tint);
    --tl-selected: var(--forest-tint);

    --tl-text: var(--ink);
    --tl-text-secondary: var(--ink-soft);
    --tl-text-muted: var(--ink-soft);

    --tl-ok: var(--forest);
    --tl-warn: var(--amber-ink);
    --tl-error: var(--bad-ink);

    --tl-accent: var(--forest);
    --tl-accent-ink: var(--on-dark);

    --tl-radius: var(--radius);
    --tl-radius-sm: 10px;
    --tl-border: 1px solid var(--paper-3);

    --tl-font: var(--sans);
    --tl-font-serif: var(--serif);
    /* Prices and versions still line up in columns, but in the body face rather
       than a console monospace: tabular figures without the terminal look. */
    --tl-font-mono: var(--sans);
}

/* --- chart series ------------------------------------------------------- */
/* A palette validated for colour vision deficiency; the dark column is the same
   eight hues stepped for a dark surface, not an automatic flip. Assign in this
   fixed order, never cycled. On paper three of them sit below 3:1, so a chart
   using them carries visible labels or a table view. */
:root {
    --tl-series-1: #2a78d6;
    --tl-series-2: #eb6834;
    --tl-series-3: #1baf7a;
    --tl-series-4: #eda100;
    --tl-series-5: #e87ba4;
    --tl-series-6: #008300;
    --tl-series-7: #4a3aa7;
    --tl-series-8: #e34948;

    --tl-delta-good: #2f5d3a;
    --tl-delta-bad: var(--bad-ink);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tl-series-1: #3987e5;
        --tl-series-2: #d95926;
        --tl-series-3: #199e70;
        --tl-series-4: #c98500;
        --tl-series-5: #d55181;
        --tl-series-6: #008300;
        --tl-series-7: #9085e9;
        --tl-series-8: #e66767;

        --tl-delta-good: #8cc59a;
        --tl-delta-bad: #e0715f;
    }
}

:root[data-theme="dark"] {
    --tl-series-1: #3987e5;
    --tl-series-2: #d95926;
    --tl-series-3: #199e70;
    --tl-series-4: #c98500;
    --tl-series-5: #d55181;
    --tl-series-6: #008300;
    --tl-series-7: #9085e9;
    --tl-series-8: #e66767;

    --tl-delta-good: #8cc59a;
    --tl-delta-bad: #e0715f;
}

/* --- page ---------------------------------------------------------------- */
html, body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--forest); }
a:hover { color: var(--forest-deep); }

.main-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content > :not(.site-footer) { flex-shrink: 0; }

.page {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 24px 20px 48px;
}

/* --- app bar ------------------------------------------------------------- */
.app-bar {
    background: var(--appbar) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--on-dark);
    text-decoration: none;
}

.brand-mark { display: inline-flex; color: #cfe0c3; }

.brand-name {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .01em;
}

/* --- side navigation ------------------------------------------------------ */
/* The drawer is the navigation, as it has always been; only its colours changed.
   The selected row carries a bar in the forest green - the one place the accent
   appears in the sidebar, so the eye has a single thing to follow. */
.tl-nav .mud-nav-link {
    border-left: 3px solid transparent;
    border-radius: 0 999px 999px 0;
    margin-right: 8px;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.tl-nav .mud-nav-link:hover {
    background: var(--forest-tint);
    border-left-color: var(--moss);
}

.tl-nav .mud-nav-link.active {
    background: var(--forest-tint);
    border-left-color: var(--forest);
    font-weight: 600;
}

/* --- footer -------------------------------------------------------------- */
.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--paper-3);
    background: var(--paper-2);
    font-size: .85rem;
    color: var(--ink-soft);
}

.site-footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
}

/* --- primitives ---------------------------------------------------------- */
.tl-serif { font-family: var(--serif); font-weight: 500; }

/* Figures that belong in a column: prices, counts, versions. */
.tl-mono {
    font-variant-numeric: tabular-nums;
}

.tl-card {
    background: var(--surface);
    border: 1px solid var(--paper-3);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}

/* Pill chips, as on the catalogue cards. The colour never carries the meaning
   on its own; the text does. */
.tl-chip {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .15em .6em;
    border: 1px solid var(--paper-3);
    border-radius: 999px;
    background: var(--paper-2);
    font-size: .78rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.tl-chip-ok { color: var(--forest); border-color: var(--moss); }
.tl-chip-warn { color: var(--amber-ink); border-color: var(--amber); }
.tl-chip-error { color: var(--bad-ink); border-color: var(--bad); }

.tl-kbd {
    font-family: var(--sans);
    font-size: .72rem;
    padding: .05em .45em;
    border: 1px solid var(--paper-3);
    border-radius: 6px;
    color: var(--ink-soft);
    background: var(--paper-2);
}

/* Motion: short, ease-out, nothing loops. */
.tl-fade-in { animation: tl-fade-in 220ms ease-out both; }

.tl-d1 { animation-delay: 40ms; }
.tl-d2 { animation-delay: 80ms; }
.tl-d3 { animation-delay: 120ms; }
.tl-d4 { animation-delay: 160ms; }

@keyframes tl-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tl-fade-in { animation: none; }
}

/* --- command palette ----------------------------------------------------- */
.tl-palette-scrim {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(12, 17, 11, .45);
}

.tl-palette {
    position: fixed;
    z-index: 1401;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--paper-3);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    animation: tl-pop-in 180ms ease-out both;
}

@keyframes tl-pop-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateX(-50%) none; }
}

@media (prefers-reduced-motion: reduce) {
    .tl-palette { animation: none; }
}

.tl-palette-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--paper-3);
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    outline: none;
}

.tl-palette-input::placeholder { color: var(--ink-soft); }

.tl-palette-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 46vh;
    overflow-y: auto;
}

.tl-palette-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--ink);
    font-size: .95rem;
}

.tl-palette-item-selected { background: var(--forest-tint); }

.tl-palette-name { overflow: hidden; text-overflow: ellipsis; }

.tl-palette-group {
    flex: none;
    font-size: .78rem;
    color: var(--ink-soft);
}

.tl-palette-empty {
    padding: 18px 16px;
    color: var(--ink-soft);
}

.tl-palette-hints {
    display: flex;
    gap: 14px;
    padding: 10px 14px;
    border-top: 1px solid var(--paper-3);
    background: var(--paper-2);
    color: var(--ink-soft);
    font-size: .78rem;
}

.tl-palette-hints .tl-kbd { margin-right: 3px; }

/* --- phone --------------------------------------------------------------- */
@media (max-width: 600px) {
    .page { padding: 16px 14px 36px; }
    .brand-name { font-size: 1.08rem; }
}