/* nasefirmy-nvias.css
 *
 * Vzhled ovladaci aplikace podle designoveho jazyka nvias.org.
 * Zdroj: specs/001-ui-redesign/design/specifikace-redesignu.pdf a makety.
 *
 * Nacita se AZ ZA Bootstrapem (ten zustava jen kvuli resetu a pro
 * nepouzivane sablony). Vsechny vykreslovane sablony pouzivaji jen
 * semanticke tridy odsud (.panel, .round, .tile, .cards, .log ...).
 * Nikde zadne stiny - hierarchii nese plocha, linka a velikost.
 */

/* ------------------------------------------------------------------ */
/* 1. Tokeny                                                           */
/* ------------------------------------------------------------------ */
:root {
    --nf-lime: #CEDA22;      /* signatura hry: hlavicky, dlazdice, primarni akce */
    --nf-green: #1F9D55;     /* vyzvy, odmeny, potvrzeni */
    --nv-red: #EA2E02;       /* hrozby a nevratne akce */
    --nv-yellow: #F9B028;    /* penize a zustatky, nikde jinde */
    --ink: #000000;
    --ink-soft: #242424;     /* tmave tlacitko na cerne liste */
    --paper: #FFFFFF;
    --line: #E2E2DC;         /* vlasove linky */
    --ground: #F5F5F1;       /* podklad stranky */
    --muted: #6A6A62;        /* doplnkovy text, ztlumene nuly */
    --faint: #B5B5AE;
    --tint-assigned: #FFF7E6;
    --tint-done: #E7F5EC;

    /* barvy investicnich kategorii - shodne s tistenymi kartami, nemenit */
    --cat-vvj: #2E9E4F;
    --cat-vrb: #D9342B;
    --cat-obd: #E8722A;
    --cat-srv: #1D5FA8;
    --cat-mkt: #12703A;

    /* radius roste s velikosti prvku (tretina tloustky) */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    /* Barvy organizace (tema). --accent = konstrukce (hlavicky panelu a
       tabulek), --action = primarni akce a dlazdice, --eyebrow = stitek
       sekce, --round-no = cislo kola na pasu kola (barva textu na
       sekundarni barve, viz nize). Stavove barvy (tecka kola,
       hrozby, dochazejici zasoba) tema nemeni - ty zustavaji na
       --nf-lime / --nv-red. */
    --accent: #CEDA22;
    --accent-ink: #000000;
    --action: #CEDA22;
    --action-ink: #000000;
    --eyebrow: #EA2E02;
    /* Sekundarni barva (specs/012) nahrazuje cernou na konstrukcnich
       plochach: pas kola, provozni log, hlavicka bloku tymu, aktivni
       zalozka, tmava tlacitka a stitek stavu kola. nvias #22B8D1 nese
       jen cerny text (8.84:1, bily by mel 2.37:1); svetlejsi --soft
       #8ED8E5 s cernym textem 13.1:1. Stisknuta dlazdice zustava zamerne
       cerna (FR-015). Tecka stavu kola ma cerny kruzek, aby limetkova /
       zluta / cervena byla videt na kazdem podkladu (>= 3:1). */
    --konstrukce: #22B8D1;
    --konstrukce-ink: #000000;
    --konstrukce-soft: #8ED8E5;
    --round-no: var(--konstrukce-ink);
    /* dochazejici zasoba na dlazdici: na limetkove staci cerveny text,
       na tmave oranzove (MTA) je potreba cerveny stitek s bilym textem */
    --tile-low-ink: #EA2E02;
    --tile-low-bg: transparent;
    --tile-low-pad: 0;
    --tile-stock-ink: #4A4A45;   /* radek se zasobou na dlazdici */
    /* horni lista v barve organizace: nvias zluta s bilym logotypem,
       MTA modra s oranzovym logem EduBox */
    --topbar-bg: #CEDA22;
    --topbar-ink: #000000;
    /* odznaky pocitadel (certifikace) - semanticke, stejne v obou tematech;
       ztmavene oproti palete, aby bily text 11 px mel kontrast 4.5:1 */
    --badge-red: #DE2C02;
    --badge-green: #1A8447;
}

/* Tema MTA - prepina se atributem data-theme na <html> (INSTANCE_THEME,
   jinak organizace prihlaseneho uzivatele nebo INSTANCE_ORG). Modra je
   odhadnuta ze screenshotu produkce; oranzova #FF6A0A ze screenshotu mela
   s bilym textem kontrast jen 2.9:1, proto je ztmavena na #C74E00 (4.65:1).
   Upravit podle brand kitu, ale kontrast 4.5:1 drzet. */
:root[data-theme="mta"] {
    --accent: #0B5DA9;
    --accent-ink: #FFFFFF;
    --action: #C74E00;
    --action-ink: #FFFFFF;
    --eyebrow: #C74E00;
    /* MTA: konstrukce oranzova s bilym textem (4.65:1), --soft #9E3E00
       (6.68:1); cerny kruzek tecky na nem 3.14:1 */
    --konstrukce: #C74E00;
    --konstrukce-ink: #FFFFFF;
    --konstrukce-soft: #9E3E00;
    --tile-low-ink: #FFFFFF;
    --tile-low-bg: #EA2E02;
    --tile-low-pad: 1px 8px;
    --tile-stock-ink: rgba(255, 255, 255, 0.8);
    --topbar-bg: #0B5DA9;
    --topbar-ink: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* 2. Zaklad a typografie                                              */
/* ------------------------------------------------------------------ */
html { font-size: 15px; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.45;
}

table { font-variant-numeric: tabular-nums; }

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.display {
    font-family: var(--font);
    font-stretch: 118%;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0 0 0.75rem;
    font-size: 44px;
}

.eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin: 0 0 0.5rem;
}

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

.lead {
    color: var(--muted);
    max-width: 60ch;
    margin: 0 0 1.25rem;
}

.hint {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 0.75rem;
}

/* mezinadpis uvnitr stranky (obrazovky bez makety) */
.subhead {
    font-stretch: 118%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.1;
    margin: 28px 0 12px;
}

.field__error {
    font-size: 12px;
    color: var(--nv-red);
    margin-top: 4px;
}

.narrow { max-width: 720px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* 3. Horni lista                                                      */
/* ------------------------------------------------------------------ */
.topbar {
    background: var(--topbar-bg);
    color: var(--topbar-ink);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 60px;
}

.topbar__brand {
    font-weight: 700;
    text-decoration: none;
    color: var(--topbar-ink);
    padding: 6px 8px 6px 0;
}

.topbar__brand:hover { color: var(--topbar-ink); text-decoration: none; }

.topbar__nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* pilulky v liste dedi barvu textu listy, at sedi na zlute i na modre */
.topbar__nav .btn {
    background: transparent;
    border-color: var(--topbar-ink);
    color: var(--topbar-ink);
}

.topbar__nav .btn:hover, .topbar__nav .btn:focus {
    background: var(--topbar-ink);
    color: var(--topbar-bg);
    filter: none;
}

.topbar__logo { height: 30px; margin-left: 12px; display: block; }

.topbar__user {
    margin-left: auto;
    display: flex;
    gap: 16px;
    align-items: center;
    color: var(--topbar-ink);
    opacity: 0.85;
    font-size: 13px;
}

.topbar__user b { color: var(--topbar-ink); }
.topbar__user a { color: var(--topbar-ink); text-decoration: none; }
.topbar__user a:hover { color: var(--topbar-ink); text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* 4. Stranka, paticka, hlasky                                         */
/* ------------------------------------------------------------------ */
.page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 24px 48px;
}

.page__head { margin-bottom: 24px; }

.footer {
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    padding: 24px;
    margin-top: 24px;
}

.footer b { color: var(--ink); }
.footer a { color: var(--ink); }

.flash {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--nf-green);
    border-radius: var(--r-md);
    padding: 12px 44px 12px 16px;
    margin: 0 0 16px;
}

.flash--err { border-left-color: var(--nv-red); }

.flash__close {
    position: absolute;
    right: 8px;
    top: 6px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
    padding: 4px 8px;
}

/* na strance investic se stranka vraci na posledni pozici, takze hlaska
   musi byt videt i uprostred stranky; fixed nezabira misto a neposune obsah */
.page--invest .flashes {
    position: fixed;
    top: 12px;
    left: 16px;
    right: 16px;
    max-width: 720px;
    margin: 0 auto;
    z-index: 20;
}

/* ------------------------------------------------------------------ */
/* 5. Panel a nastaveni hry                                            */
/* ------------------------------------------------------------------ */
.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.panel__head {
    background: var(--accent);
    color: var(--accent-ink);
    padding: 12px 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.panel__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.panel__meta .btn, .log__meta .btn { text-transform: none; letter-spacing: 0; }
.panel__meta .btn--quiet, .log__meta .btn--quiet { background: var(--paper); color: var(--muted); }

.panel__body { padding: 16px; }
.panel__body > :last-child { margin-bottom: 0; }
.panel__scroll { overflow-x: auto; }

.settings {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-bottom: 24px;
}

.settings .eyebrow { color: var(--muted); }

.settings__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ------------------------------------------------------------------ */
/* 6. Tlacitka, cipy, zalozky                                          */
/* ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    background: var(--action);
    color: var(--action-ink);
    box-shadow: none;
    white-space: nowrap;
    transition: filter 0.12s;
}

.btn:hover, .btn:focus {
    filter: brightness(0.94);
    color: var(--action-ink);
    text-decoration: none;
    box-shadow: none;
}

.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--commit { background: var(--nf-green); color: #fff; }
.btn--cancel { background: var(--nv-red); color: #fff; }
.btn--ink { background: var(--konstrukce); color: var(--konstrukce-ink); }
.btn--dark { background: var(--konstrukce-soft); color: var(--konstrukce-ink); }
.btn--ghost { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.btn--quiet { background: var(--paper); border-color: var(--line); color: var(--muted); font-weight: 600; }

.btn--commit:hover, .btn--commit:focus,
.btn--cancel:hover, .btn--cancel:focus { color: #fff; }
.btn--ink:hover, .btn--ink:focus,
.btn--dark:hover, .btn--dark:focus { color: var(--konstrukce-ink); }

.btn--pill { border-radius: var(--r-pill); }

/* akce vyhlasena cele mistnosti - popisek se pri najeti vymeni */
.btn--announce {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--nf-green);
    color: #fff;
    font-size: 16px;
    padding: 12px 28px;
    min-height: 48px;
}

.btn--announce:hover, .btn--announce:focus { color: #fff; }
.btn--announce[data-hover]:hover > span { visibility: hidden; }
.btn--announce[data-hover]:hover::after {
    content: attr(data-hover);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn--chip {
    min-height: 32px;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: var(--r-sm);
}

.btn.is-done {
    background: var(--tint-done);
    color: var(--nf-green);
    border-color: transparent;
}

.btn[disabled], .btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.tabs .btn {
    border-radius: var(--r-pill);
    background: var(--paper);
    border-color: var(--ink);
    color: var(--ink);
    min-height: 36px;
    padding: 6px 16px;
}

/* aktualni obrazovka, ne odkaz - specs/013 */
.tabs .btn.tabs__current, .tabs .btn.tabs__current:hover { background: var(--paper); border-color: var(--line); color: var(--muted); cursor: default; }

/* ------------------------------------------------------------------ */
/* 7. Formulare a tokeny                                               */
/* ------------------------------------------------------------------ */
.field { margin-bottom: 14px; }

.field__label, .field > label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.input, .select {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    font: inherit;
    color: var(--ink);
    box-shadow: none;
}

.input:focus, .select:focus {
    border-color: var(--ink);
    outline: 2px solid var(--ink);
    outline-offset: 1px;
    box-shadow: none;
}

.field__hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.input--unit { display: flex; }
.input--unit .input { border-radius: var(--r-md) 0 0 var(--r-md); }

.input__unit {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: #FAFAF7;
    color: var(--muted);
    font-size: 13px;
}

.form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.token {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    font-size: 12px;
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 8. Konzole - mrizka                                                 */
/* ------------------------------------------------------------------ */
.console {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 24px;
}

.console__col > :last-child { margin-bottom: 24px; }

@media (min-width: 1180px) {
    .console { grid-template-columns: 1fr 1fr; }
    .console__settings, .console__log, .console__wide { grid-column: 1 / -1; }
    /* zalozky a pas kola nahore v pravem sloupci, levy sloupec hned pod
       nastavenim (specs/013). Sourozenecky selektor plati jen tam, kde
       blok existuje - pohled po prihlaseni (/) a pohled tymu zustavaji. */
    /* vyska leveho sloupce jde do radku 3 (1fr), ne pod pas kola */
    .console:has(> .console__ovladani) { grid-template-rows: auto auto 1fr; }
    .console__ovladani { grid-column: 2; grid-row: 2; }
    .console__ovladani ~ .console__col--levy { grid-column: 1; grid-row: 2 / span 2; }
    .console__ovladani ~ .console__col--pravy { grid-column: 2; grid-row: 3; }
}

/* ------------------------------------------------------------------ */
/* 9. Stav kola                                                        */
/* ------------------------------------------------------------------ */
.round {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--konstrukce);
    color: var(--konstrukce-ink);
    border-radius: var(--r-xl);
    padding: 14px 20px;
    margin-bottom: 24px;
}

.round__no {
    font-stretch: 118%;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--round-no);
}

.round__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--konstrukce-ink);
    align-self: flex-end;
    padding-bottom: 4px;
    margin-left: -8px;
}

.round__state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--konstrukce-soft);
    color: var(--konstrukce-ink);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
}

/* stavove barvy (tecka kola, hrozby, dochazejici zasoba) tema nemeni */
.round__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nf-lime);
    /* kruzek - limetkova / zluta / cervena je videt na kazdem podkladu */
    border: 2px solid var(--ink);
    box-sizing: content-box;
}

.round[data-state="paused"] .round__dot { background: var(--nv-yellow); }
.round[data-state="stopped"] .round__dot { background: var(--nv-red); }
.round[data-state="running"] .round__dot { animation: nf-pulz 1.2s ease-in-out infinite; }

@keyframes nf-pulz {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

.round__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* 10. Tabulky - prehled investic, prehled tymu, karty                 */
/* ------------------------------------------------------------------ */
.invest-table, .cards {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 24px;
    font-size: 13px;
}

.invest-table th, .cards th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 12px 14px;
    text-align: left;
    vertical-align: bottom;
    white-space: normal;
}

.invest-table thead th { background: var(--accent); color: var(--accent-ink); }
.invest-table th.is-cat { text-align: center; }

.invest-table__ico {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 6px;
    border-radius: 50%;
}

.invest-table td, .cards td {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    vertical-align: middle;
}

.invest-table td:first-child { font-weight: 700; }
.invest-table td.is-num { text-align: center; font-weight: 700; }
.invest-table td.is-zero { color: var(--faint); font-weight: 400; }
.invest-table td.is-act { white-space: nowrap; }

.cards--opportunity thead th { background: var(--accent); color: var(--accent-ink); }
.cards--challenge thead th { background: var(--nf-green); color: #fff; }
.cards--threat thead th { background: var(--nv-red); color: #fff; }

.cards tr[data-assigned] td { background: var(--tint-assigned); }
.cards tr[data-assigned] td:first-child {
    border-left: 4px solid var(--nv-yellow);
    padding-left: 10px;
}

.cards__amount { text-align: right; font-weight: 700; white-space: nowrap; }
.cards__amount.is-neg { color: var(--nv-red); }
.cards__firm { color: var(--faint); white-space: nowrap; }
.cards__firm.is-set { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------------ */
/* 10b. Odznaky pocitadel na cipech (certifikace)                      */
/* ------------------------------------------------------------------ */
.has-badge {
    position: relative;
    display: inline-flex;
    padding-right: 8px;
}

.badge {
    position: absolute;
    top: -7px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    border: 2px solid var(--paper);
    background: var(--badge-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-sizing: border-box;
}

.badge--green { background: var(--badge-green); }

/* ------------------------------------------------------------------ */
/* 11. Provozni log                                                    */
/* ------------------------------------------------------------------ */
.log {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--konstrukce);
    margin-bottom: 24px;
}

.log__head {
    background: var(--accent);
    color: var(--accent-ink);
    padding: 12px 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.log__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.log__body {
    max-height: 22rem;
    overflow-y: auto;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--konstrukce-ink);
    line-height: 1.6;
}

.log__row {
    display: grid;
    grid-template-columns: 20ch 1fr;
    gap: 16px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* na sekundarni barve nese uroven radku pruh vlevo a tucne pismo, ne
   barva textu - zluta a oranzova by na azurove/oranzove nebyla citelna */
.log__time { color: var(--konstrukce-ink); font-weight: 700; }
.log__row[data-level="warn"],
.log__row[data-level="error"] { padding-left: 8px; border-left: 4px solid var(--nv-yellow); }
.log__row[data-level="error"] { border-left-color: var(--nv-red); }
.log__row[data-level="warn"] .log__msg,
.log__row[data-level="error"] .log__msg { color: inherit; font-weight: 700; }
.log__empty { color: var(--konstrukce-ink); opacity: 0.8; }

/* ------------------------------------------------------------------ */
/* 12. Investice a pujcky - blok tymu, dlazdice, pujcky, vyber         */
/* ------------------------------------------------------------------ */
/* mrizka bloku tymu; mezera mrizky nahrazuje spodni okraj bloku */
.team-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.team-grid .team-block { margin-bottom: 0; }

.team-block {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: 24px;
}

.team-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--konstrukce);
    color: var(--konstrukce-ink);
    padding: 12px 24px;
}

.team-block__name {
    font-stretch: 118%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

.team-block__money {
    font-stretch: 118%;
    font-weight: 800;
    font-size: 24px;
    /* zluta = penize; na sekundarni barve jako stitek s cernym textem */
    background: var(--nv-yellow);
    color: #000;
    border-radius: var(--r-pill);
    padding: 2px 12px;
    white-space: nowrap;
}

.team-block__body { padding: 20px 24px; }

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 900px) {
    .tiles { grid-template-columns: repeat(5, 1fr); }
}

/* dva bloky tymu na radek (stejny zlom jako konzole); dlazdice zmensene,
   aby se pet veslo i do polovicni sirky - viz specs/005 research R2 */
@media (min-width: 1180px) {
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team-grid .team-block__body { padding: 16px 20px; }
    .team-grid .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
    .team-grid .tile { padding: 14px 6px 12px; }
    .team-grid .tile img { width: 40px; height: 40px; }
    .team-grid .tile__name { font-size: 14px; }
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--action);
    color: var(--action-ink);
    border: 0;
    border-radius: var(--r-xl);
    padding: 20px 12px 16px;
    text-decoration: none;
    text-align: center;
    font: inherit;
    cursor: pointer;
}

.tile:hover, .tile:focus {
    filter: brightness(0.95);
    color: var(--action-ink);
    text-decoration: none;
}

.tile img { width: 48px; height: 48px; border-radius: 50%; }
.tile__name { font-weight: 700; font-size: 15px; }
.tile__stock { font-size: 12px; font-weight: 600; color: var(--tile-stock-ink); }

/* zamerne cerna, ne --konstrukce (specs/012 FR-015) */
.tile[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tile[aria-pressed="true"]:hover, .tile[aria-pressed="true"]:focus { color: #fff; }
.tile[aria-pressed="true"] .tile__stock { color: #D8D8D2; }
.tile[data-low] .tile__stock {
    color: var(--tile-low-ink);
    background: var(--tile-low-bg);
    padding: var(--tile-low-pad);
    border-radius: var(--r-xs);
}

.tile.is-out {
    background: #E9E9E2;
    color: var(--muted);
    pointer-events: none;
    cursor: default;
}

.tile.is-out img { opacity: 0.5; }

/* pocty na dlazdici (specs/012): x N = vybrano a nepotvrzeno, zelene
   v N = koupeno v tomto kole. Odznaky jsou absolutne, sirku dlazdice
   nemeni (5 dlazdic v rade od 1180 px zustava). */
.tile { position: relative; }

.tile__pocet,
.tile__koupeno {
    position: absolute;
    top: 8px;
    min-width: 28px;
    padding: 2px 6px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.tile__pocet { right: 8px; background: var(--paper); color: #000; }
.tile__koupeno { left: 8px; background: var(--badge-green); color: #fff; }

/* limit 2 karet za kolo: dlazdice se ukaze vypnuta, vybrana zustava cerna */
.tile.is-full {
    background: #E9E9E2;
    color: var(--muted);
    pointer-events: none;
    cursor: default;
}

.tile.is-full img { opacity: 0.5; }
/* na sede vypnute dlazdici neplati bily text zasoby z tematu MTA */
.tile.is-full .tile__stock,
.tile.is-out .tile__stock { color: var(--muted); background: transparent; padding: 0; }
.tile.is-full[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tile.is-full[aria-pressed="true"] img { opacity: 1; }
.tile.is-full[aria-pressed="true"] .tile__stock { color: #D8D8D2; }

.loans, .picked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.loans {
    padding: 12px 0;
    border-top: 1px solid var(--line);
    margin-bottom: 12px;
}

.loans__label, .picked__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 8px;
}

.picked {
    background: var(--ground);
    border-radius: var(--r-lg);
    padding: 12px 16px;
}

.picked__empty { color: var(--muted); font-size: 13px; }

/* karty a pujcky koupene v tomto kole (specs/012) */
.token--koupeno {
    background: var(--tint-done);
    border-color: var(--nf-green);
    font-weight: 700;
}

.picked__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* 13. Stage - promitane obrazovky                                     */
/* ------------------------------------------------------------------ */
.stage { font-size: 20px; }
.stage .invest-table, .stage .cards { font-size: 18px; }
.stage .invest-table th, .stage .cards th { font-size: 13px; padding: 14px 18px; }
.stage .invest-table td, .stage .cards td { padding: 14px 18px; }
.stage .invest-table__ico { width: 56px; height: 56px; }

.stage__round {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 32px;
}

.stage__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--muted);
}

.stage__no {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r-lg);
    padding: 8px 24px;
    font-stretch: 118%;
    font-weight: 800;
    font-size: 96px;
    line-height: 1;
}

.stage__logo {
    display: block;
    max-width: 100%;
    max-height: 450px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* 13a. Dashboard pro projektor (specs/009)                            */
/* ------------------------------------------------------------------ */
/* Cely dashboard se meri v em od jedineho cisla --dash-skala, ktere
   static/js/dashboard.js nastavi co nejvetsi tak, aby se obsah vesel na
   obrazovku bez posouvani. Rozlozeni: na sirku pas s ovladanim nahore
   pres celou sirku a pod nim dva sloupce (investice + P&R, vyzvy + hrozby),
   uzke/na vysku jeden sloupec.

   Pas je nahore misto leveho sloupce od 6.3.2 (specs/010, upresneni
   2026-09-17). Uvnitr stredniho sloupce se radek nevesel: jeho nejmensi
   sirka (~700 px na 1024x768) srazila sloupec s kartami na 307 px, meritko
   spadlo na mez a deset prvku se zkratilo. Pres celou sirku se vejde vsude
   a text je vetsi nez v 6.3.1 (research R1, R2). */

.page--dash {
    max-width: none;
    margin: 0;
    padding: 0;
}

.page--dash .flashes {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: min(90vw, 720px);
}

.dash {
    --dash-mezera: 0.9em;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
    padding: var(--dash-mezera);
    display: grid;
    gap: var(--dash-mezera);
    font-size: calc(var(--dash-skala, 1) * 2vmin);
    /* Na sirku vzdy stejne: pas nahore, pod nim dva sloupce. Sirku, ktera
       zbyla po levem sloupci, dostavaji karty (37 : 63, spec FR-012) -
       jejich popisy urcuji velikost textu na cele obrazovce. */
    /* sloupec nesmi byt uzsi nez tabulka v nem: jmena jsou na jednom radku,
       takze by se tabulka jinak orezala (meritko misto toho klesne) */
    grid-template-columns: minmax(min-content, 37fr) minmax(min-content, 63fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "radek radek"
        "stred karty";
    align-content: start;
}

/* pas nahore: znacka, kolo se stavem, tlacitko na graf, logo tymu (specs/010) */
.dash__sloupec { grid-area: radek; }
/* Fragment kola ma dve deti - dlazdici s cislem a stav. V pasu lezi vedle
   sebe, jinak by sekce byla dvakrat vyssi nez strop pasu. */
.dash__kolo {
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    flex: 0 1 auto;
}
.dash__logo { min-height: 0; margin: 0; flex: 0 1 auto; }
.dash__sloupec,
.dash__stred,
.dash__karty {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dash-mezera);
}
.dash__stred { grid-area: stred; }

/* Pas: vsechny prvky stejne vysoke (align-items: stretch), sirky se vejdou
   do pasu. Strop 5em drzi krok s --dash-skala, takze plati od 1024x768 po
   4K; pri 4.6em se dlazdice s cislem kola orizne o 3 px (mereno). */
.dash .dash__sloupec {
    flex-direction: row;
    align-items: stretch;
    max-height: 5em;
    gap: 0.6em;
}

.dash__sloupec > * { min-width: 0; }

/* Prvky pasu maji stejnou vysku (stretch v .dash .dash__sloupec); sirku
   si kazdy bere podle obsahu, jen se musi vejit do pasu (spec FR-013).
   Do 6.3.1 tu misto toho byla stejna sirka - ve sloupci pod sebou. */
.dash__graf {
    font-size: 0.8em;
    padding: 0.4em 1.1em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
    /* .btn ma min-height 40px a odsazeni v px - v pasu merenem v em by to
       byl nejvyssi prvek a strop 5em by nesel dodrzet (meritko by spadlo
       na mez a dashboard by zacal zkracovat) */
    min-height: 0;
    gap: 0.3em;
    line-height: 1.15;
}
.dash__karty { grid-area: karty; }

/* V pasu urcuje velikost loga jeho vyska - sirka ji jen nasleduje podle
   pomeru stran (6.3.2). V 6.3.1 to bylo obracene (width: 100%), protoze
   prvky staly pod sebou ve sloupci. */
.dash__znacka {
    background: var(--topbar-bg);
    border-radius: var(--r-md);
    padding: 0.35em 0.7em;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
}

.dash__znacka img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* cislo kola - nejvetsi text na obrazovce */
.dash-kolo {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* V pasu lezi popisek, cislo kola a stav vedle sebe, aby pas zustal nizky
   a cislo si nechalo svou velikost (spec FR-011). */
.dash .dash-kolo {
    flex-direction: row;
    align-items: center;
    gap: 0.4em;
}

.dash-kolo__label {
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--muted);
}

.dash-kolo__no {
    display: inline-block;
    text-align: center;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r-lg);
    padding: 0.08em 0.3em;
    font-stretch: 118%;
    font-weight: 800;
    font-size: 4.2em;
    line-height: 1;
}

.dash .dash-round {
    margin: 0;
    padding: 0.35em 0.6em;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash .dash-round .round__state {
    font-size: 1em;
    padding: 0.25em 0.8em;
    gap: 0.45em;
}

.dash .dash-round .round__dot { width: 0.55em; height: 0.55em; }

/* Logo tymu vyplni sirku sloupce. Vysku omezuje max-height v em, takze se
   zmensuje spolu s meritkem: bez toho by ctvercove logo pres celou sirku
   tlacilo text dolu, dokud by nebyl necitelny (zmereno 4 px na 1024x768). */
.dash__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash__logo img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

/* tabulky v meritku dashboardu */
.dash .dash-tabulka {
    font-size: 0.85em;
    margin-bottom: 0;
    table-layout: auto;
}

.dash .dash-tabulka th {
    font-size: 0.62em;
    padding: 0.55em 0.7em;
}

.dash .dash-tabulka td {
    padding: 0.35em 0.6em;
}

.dash .invest-table__ico {
    width: 2.6em;
    height: 2.6em;
    margin-bottom: 0.3em;
}

.dash .invest-table td:first-child,
.dash .invest-table td.is-num {
    font-size: 1.15em;
}

.dash .cards tr[data-assigned] td:first-child {
    border-left-width: 0.25em;
    padding-left: 0.4em;
}

/* Na dashboardu se nic neoreza (specs/010). Nazvy tymu, karet i firem jsou
   vzdy na jednom radku a cele - meritko radeji klesne. Popis karty se smi
   zalomit, ale nikdy nekonci trojteckou: kdyby musel byt taky na jednom
   radku, spadl by text pri sesti tymech na 13 px (zmereno, research R1).
   Zkraceni se vraci jen pres tridu .dash--zkraceno, kdyz uz se obsah nevejde
   ani pri nejmensim citelnem pismu. */
.dash-jmeno {
    display: inline;
    white-space: nowrap;
    overflow: visible;
}

.dash .cards__firm { white-space: nowrap; }
/* popisky kategorii se nelamou uprostred slova */
.dash .invest-table th .dash-jmeno { overflow-wrap: normal; }
.dash .dash-tabulka th { letter-spacing: 0.06em; }

.dash-popis {
    display: block;
    overflow: visible;
}

/* posledni zachrana: okno je mensi, nez na cele texty staci */
.dash--zkraceno .dash-jmeno {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash--zkraceno .dash-popis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dash-prazdne {
    margin: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0.6em 0.8em;
    color: var(--muted);
}

.dash-prazdne__titulek {
    display: block;
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.2em;
}

.dash__bez-hry {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 2em;
    font-weight: 700;
    text-align: center;
}

/* upozorneni na zastarala data / prihlaseni - citelne i z konce tridy */
.dash__stav {
    position: fixed;
    left: 50%;
    bottom: 0.8em;
    transform: translateX(-50%);
    z-index: 10;
    margin: 0;
    max-width: 90vw;
    background: var(--nv-red);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 0.5em 1.2em;
    font-size: max(18px, 1.1em);
    font-weight: 700;
    text-align: center;
}

/* uzke okno nebo na vysku: jeden sloupec, posouvat se smi jen svisle */
@media (max-width: 1023px), (orientation: portrait) {
    .dash {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: visible;
        font-size: 16px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "radek"
            "stred"
            "karty";
    }

    /* na uzke obrazovce neni pas pas - prvky se skladaji pod sebe */
    .dash .dash__sloupec {
        flex-direction: column;
        align-items: stretch;
        max-height: none;
    }

    .dash__logo img { max-height: 40vh; width: 100%; height: auto; }
}

/* ------------------------------------------------------------------ */
/* 14. Graf                                                            */
/* ------------------------------------------------------------------ */
.graph-panel svg { width: 100%; height: auto; display: block; font-family: var(--font); }

/* Promitana stranka grafu (specs/011): telo je sloupec pres celou vysku okna
   a grafu pripadne vsechno, co zbyde. SVG z pygalu ma viewBox a zadne
   width/height, takze se do sveho boxu vzdy vejde samo - proto tu neni zadny
   skript ani mereni. Mensi odsazeni nez jinde: kazdy usetreny pixel jde grafu. */
.body--graph {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.page--graph {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    max-width: none;        /* na projektoru by 1440px nechalo pruh nevyuzity */
    /* .page ma margin: 0 auto; ve sloupcovem flexu ale automaticky okraj
       zrusi roztazeni a stranka se smrskne na sirku obsahu (overeno: 487 px
       z 1920). Proto se tu okraj rusi a sirka urcuje vyslovne. */
    margin: 0;
    width: 100%;
    padding: 16px 24px;
    /* zamerne bez min-height: 0 - stranka se nesmi smrsknout pod svuj obsah,
       jinak by se graf pri nizkem okne oriznul misto aby slo odrolovat */
}

.page--graph .page__head { margin-bottom: 16px; }

.page--graph .graph-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* Box grafu. Pod minimem uz se nezmensuje: nizsi okno radeji necha
   stranku rolovat, nez aby se graf a legenda zmensily do necitelna nebo se
   oriznuly (FR-011). Nad tim vysku urcuje flex, ne obsah. */
.page--graph .graph-panel .panel__body {
    flex: 1 1 0;
    min-height: 320px;
    padding: 0;
    position: relative;
}

/* Vyska SVG musi byt vyslovna. S width/height auto a odsazenim shora i zdola
   si prohlizec u nahrazeneho prvku s pomerem stran spocita vysku ze sirky a
   spodni odsazeni ignoruje - graf pak pretekal panel a .panel{overflow:hidden}
   ho oriznul (overeno: 1920x1080 o 29 px, 1366x768 o 65 px, pri 1280x250 byla
   legenda uplne mimo okno). S calc() je box presne box. */
.page--graph .graph-panel svg {
    position: absolute;
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
}

.body--graph .footer { padding: 12px; margin-top: 12px; }

/* ------------------------------------------------------------------ */
/* 15. Loga tymu (vyber log)                                           */
/* ------------------------------------------------------------------ */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.logo-grid__item {
    display: block;
    position: relative;
    margin: 0;
    cursor: pointer;
}

.logo-grid__item input {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--nf-green);
}

.logo-grid img {
    width: 100%;
    height: auto;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
}

.logo-grid__item input:checked + img { border-color: var(--nf-green); }

/* ---- predvolby karet (specs/007-card-presets) ---- */

/* vychozi tlacitko formulare pro Enter - mimo obrazovku, ne display:none,
   jinak by ho prohlizec pro Enter nepouzil */
.btn-vychozi {
    position: absolute;
    left: -9999px;
}

.predvolby {
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
}

.predvolby .field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.predvolby .field__label { flex-basis: 100%; }
.predvolby .select,
.predvolby .input { flex: 1 1 220px; min-width: 0; }

.potvrzeni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--nv-red);
    border-radius: var(--r-md);
    background: var(--paper);
}

.poznamky {
    margin: 0 0 14px;
    padding-left: 18px;
    font-size: 13px;
    color: var(--eyebrow);
}

.predvolba__karty {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
}

.predvolba__karty .is-neg { color: var(--nv-red); }