/* Ticketovací systém — vizuál navazuje na eduxo.cz, ale záměrně se tváří
   jako pracovní nástroj, ne jako studijní materiál. Žák má mít pocit, že
   sedí u helpdesku, ne v učebnici. */

:root {
    --blue:          #1a3a8f;
    --blue-mid:      #1a56c4;
    --red:           #e63329;
    --green:         #16a34a;
    --amber:        #b45309;
    --white:         #ffffff;
    --light-gray:    #f5f7fa;
    --text:          #1a1a2e;
    --text-muted:    #555;
    --font:          system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:          ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --radius:        8px;
    --transition:    0.25s ease;
    --border-light:  #e8eaf0;
    /* Okno se záložkami (zkouška i kapitola). */
    --okno-ram:      #cfd6e3;
    --okno-hlava:    #e9edf4;
    --okno-karta:    #dfe4ed;
    /* Aplikace je univerzální, proto nese modrou eduxo.cz. Barvu předmětu
       nese až jednotlivý tiket — viz .tiket.os, .tiket.iot, .tiket.is. */
    --predmet:       var(--blue);

    /* Barvy předmětů, stejné jako na portálech eduxo.cz */
    --os:            #c2410c;   /* Operační systémy — jantarová */
    --iot:           #3d7a5f;   /* Internet věcí — sage zelená  */
    --is:            #1a56c4;   /* Informační sítě — modrá      */
}

* { box-sizing: border-box; }

/* ⚠️ Atribut `hidden` musí přebít VŠECHNO.
   Stačí komponentě dát vlastní `display` a `hidden` přestane platit —
   prvek zůstane vidět a nikdo netuší proč. Potkalo nás to potřetí:
   nejdřív u rozvržení stránky žáka, pak u pruhu odevzdání a naposled
   u odpočtu na projektor, který se ukázal rovnou po otevření stránky.
   Jedno pravidlo nahoře to zavírá jednou provždy. */
[hidden] { display: none !important; }


body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--light-gray);
    line-height: 1.6;
}

/* ── hlavička ─────────────────────────────────────────────────────────── */

/* Hlavička je stejná jako v CCNA Kadetovi: grid 1fr auto 1fr, logo vlevo,
   název jako vycentrovaná pilulka. Pilulka je v barvě předmětu — CCNA je
   modrá jako Informační sítě, Tikety jantarová jako Operační systémy. */
header {
    background: var(--white); border-bottom: 1px solid var(--border-light);
    height: 72px; display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; padding: 0 2rem; position: sticky; top: 0; z-index: 10;
}

.logo { justify-self: start; }
.logo img { height: 44px; width: auto; display: block; margin-top: -2px; }
/* Logo NetLabu (značka + nápis, img/logo/) — stejné jako na firemním webu. */
.logo.logo-netlab { display: flex; align-items: center; gap: 0.5rem; }
.logo.logo-netlab img:first-child { height: 40px; margin-top: 0; }
.logo.logo-netlab img:last-child  { height: 26px; margin-top: 4px; }

.nazev {
    justify-self: center; display: flex; align-items: center; gap: 0.5rem;
    font-weight: 700; font-size: 0.85rem; color: var(--blue);
    background: #eef2fb; border: 1px solid #e0e6f3;
    border-radius: 14px; padding: 0.85rem 1.5rem; white-space: nowrap;
}

/* Přiznaná rozpracovanost — stejná pilulka jako u „Jádro věci" na webu. */
.beta {
    display: inline-block; font-size: 0.6rem; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
    background: var(--blue); padding: 0.15rem 0.45rem;
    border-radius: 999px; white-space: nowrap;
}

header .vpravo { justify-self: end; display: flex; align-items: center; gap: 1rem; }

.ucet {
    font-family: var(--mono); font-size: 0.85rem; font-weight: 600;
    background: var(--light-gray); border: 1px solid var(--border-light);
    padding: 0.3rem 0.7rem; border-radius: 999px;
}

/* Zprávy od průvodce. Bublina, ne obálka — a dost velká na to, aby si jí
   žák všiml dřív, než začne pracovat. Značka nepřečtené zprávy je puntík
   s počtem, ne jen tečka. */
.zpravy {
    position: relative; background: none; cursor: pointer;
    border: 1px solid transparent; padding: 0.35rem;
    border-radius: var(--radius); line-height: 0;
    transition: background var(--transition), border-color var(--transition);
}
.zpravy svg { width: 30px; height: 30px; fill: var(--blue); display: block; }
.zpravy:hover { background: var(--light-gray); border-color: var(--border-light); }

.zpravy[data-nove] svg { fill: var(--blue-mid); }
.zpravy[data-nove]::after {
    content: '1'; position: absolute; top: -2px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    font: 700 11px/1 var(--font); color: #fff;
    background: var(--red); border: 2px solid var(--white);
    border-radius: 999px;
}

/* Číslo nepřečtených lehce pulzuje — jinak ho žák v hlavičce přehlédne. */
@media (prefers-reduced-motion: no-preference) {
    .zpravy[data-nove]::after { animation: puls 2s ease-in-out infinite; }
    @keyframes puls {
        0%, 70%, 100% { transform: scale(1); }
        35%           { transform: scale(1.18); }
    }
}

.odhlaseni { display: inline; margin: 0; }
.odhlasit { color: var(--text-muted); text-decoration: none; font-size: 0.85rem;
            background: none; border: 0; padding: 0; font-family: inherit;
            cursor: pointer; }
.odhlasit:hover { color: var(--blue); }

/* ── obsah ────────────────────────────────────────────────────────────── */

main { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ── rozdělené okno (stránka žáka) ────────────────────────────────────────
   Vlevo zadání a co k němu patří, vpravo práce. Stejně jako v CCNA Kadetovi:
   žák nepřepíná okna, má zadání i konzoli naráz před sebou.

   Stránka se sama neroluje — roluje jen levý sloupec. Panel vpravo musí
   zůstat na místě, jinak by se terminál odsouval mimo obraz. */
body.deleno { overflow: hidden; }

.rozvrzeni {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    height: calc(100vh - 72px);
    padding: 1.25rem 1.5rem;
}

.sloupec { min-width: 0; min-height: 0; }
.sloupec.zadani { overflow-y: auto; padding-right: 0.25rem; }
.sloupec.prace  { display: flex; }

.karta-nadpis {
    margin: 0 0 0.9rem; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
}

/* ── seznam zdrojů ────────────────────────────────────────────────────────
   Dnes jen konzole strojů. Až přibudou podklady (PDF, soubor ke stažení),
   půjdou do stejného seznamu — proto je to seznam, ne jedno tlačítko. */
.zdroje { display: flex; flex-direction: column; gap: 0.5rem; }

.zdroj {
    display: flex; align-items: center; gap: 0.75rem; width: 100%;
    font-family: var(--font); font-size: 0.95rem; text-align: left;
    padding: 0.7rem 0.9rem; cursor: pointer;
    background: var(--white); color: var(--text);
    border: 1px solid #cbd5e1; border-left: 3px solid #cbd5e1;
    border-radius: var(--radius);
    transition: background var(--transition), border-color var(--transition);
}
.zdroj:hover:not(:disabled) { background: var(--light-gray); }
.zdroj.aktivni { border-color: var(--blue); background: #eef2fb; }
.zdroj:disabled { opacity: 0.5; cursor: default; }

.zdroj-znak { color: var(--blue); font-size: 0.9rem; }
.zdroj-text { display: flex; flex-direction: column; line-height: 1.3; }
.zdroj-text strong { font-family: var(--mono); font-size: 0.92rem; }
.zdroj-text span { font-size: 0.78rem; color: var(--text-muted); }

/* ── pracovní panel ───────────────────────────────────────────────────────
   Rám okna podle CCNA Kadeta. Tečky jsou dekorace, ne ovládání — dělají
   z panelu „okno", takže je hned poznat, že uvnitř je jiný program. */
/* Okno vpravo musí být vidět jako předmět na stole, ne splývat se šedým
   pozadím stránky (nález 2, 2026-10-09): tmavší rám a stín. */
.panel {
    display: flex; flex-direction: column; flex: 1; min-width: 0;
    background: var(--white); border: 1px solid var(--okno-ram);
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(26, 26, 46, 0.06), 0 6px 20px rgba(26, 58, 143, 0.10);
}

/* Hlavička okna: záložky sedí na její spodní hraně, aktivní záložka
   přes hranu přechází do těla okna — jako karty v kartotéce. */
.panel-hlava {
    display: flex; align-items: flex-end; gap: 0.75rem; flex: none;
    padding: 0.6rem 1rem 0; min-height: 2.6rem; box-sizing: border-box;
    background: var(--okno-hlava);
    border-bottom: 1px solid var(--okno-ram);
}
.panel-hlava .tecky, .panel-hlava .panel-nazev { align-self: center; margin-bottom: 0.6rem; }
.tecky { display: flex; gap: 0.4rem; }
.tecky i { width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; }
.tecky i:nth-child(1) { background: #ff5f57; }
.tecky i:nth-child(2) { background: #febc2e; }
.tecky i:nth-child(3) { background: #28c840; }
.panel-nazev { font-family: var(--mono); font-size: 0.82rem; color: var(--text-muted); }

.panel-telo { position: relative; flex: 1; min-height: 0; }

/* Schránka na panely. Musí mít vlastní výšku — rámy uvnitř se měří
   podle ní, a bez toho by se smrskly na nulu. */
#panely { position: absolute; inset: 0; }

.panel-telo iframe { width: 100%; height: 100%; border: 0; display: block; }
.panel-prazdno {
    position: absolute; inset: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.9rem;
}

/* Vlastní `display` přebíjí atribut hidden — autorský styl vyhraje nad
   stylem prohlížeče bez ohledu na specifičnost. Bez tohohle by rám i hláška
   svítily pořád a překrývaly se. */

.panel-pata {
    flex: none; padding: 0.55rem 1rem; font-family: var(--mono);
    font-size: 0.75rem; color: var(--text-muted);
    background: var(--light-gray); border-top: 1px solid var(--border-light);
}

/* Na užším displeji se sloupce srovnají pod sebe. Panel dostane pevnou
   výšku — bez ní by se terminál v rámu smrskl na nulu. */
@media (max-width: 1000px) {
    body.deleno { overflow: auto; }
    .rozvrzeni { grid-template-columns: 1fr; height: auto; }
    .sloupec.zadani { overflow: visible; }
    .panel { height: 60vh; }
}

.karta {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1.75rem 2rem;
    margin-bottom: 1.25rem;
}

/* Tiket dostane barevný pruh vlevo — vypadá jako položka ve frontě.
   Barva pruhu říká, ze kterého předmětu tiket je. Aplikace sama zůstává
   modrá, protože slouží všem třem. */
.karta.tiket        { border-left: 4px solid var(--blue); }
.karta.tiket.os     { border-left-color: var(--os); }
.karta.tiket.iot    { border-left-color: var(--iot); }
.karta.tiket.is     { border-left-color: var(--is); }

/* Štítek předmětu v rohu tiketu — aby bylo poznat i bez znalosti barev. */
.predmet-stitek {
    float: right; font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.2rem 0.6rem; border-radius: 999px; color: #fff;
    background: var(--blue);
}
.tiket.os  .predmet-stitek { background: var(--os); }
.tiket.iot .predmet-stitek { background: var(--iot); }
.tiket.is  .predmet-stitek { background: var(--is); }

.karta h1 { margin: 0 0 1.25rem; font-size: 1.15rem; letter-spacing: -0.01em; }

/* ── víc tiketů naráz ──────────────────────────────────────────────────────
   Zkouška může dát žákovi několik problémů a nechat na něm pořadí. Tikety
   jsou proto samostatné karty pod sebou, seřazené podle priority. */

/* Společný úvod nad tikety — prostředí, čas. Platí pro všechny. */
.preambule { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.92rem; }
.preambule p { margin: 0.2rem 0; }

/* ── tiket jako v helpdesku (2026-10-08) ────────────────────────────────
   Fronta nahoře, detail pod ní: číslo, předmět, štítky stavu a priority,
   vlastnosti, zpráva žadatele v bublině a formulář s řešením. */

.tiket-id { font-family: var(--mono); font-size: 0.82rem; color: var(--text-muted); }
.tiket-nazev { margin: 0.15rem 0 0.6rem; font-size: 1.15rem; letter-spacing: -0.01em; }
.tiket-stitky { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }

/* Štítky — tečka a barva. Priorita musí být vidět na první pohled; je to
   součást zadání, podle které se žák rozhoduje, ne ozdoba. */
.pil {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
    padding: 0.12rem 0.65rem; border-radius: 999px;
}
.pil::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.p-kriticka   { color: #fff; background: var(--red); }
.p-vysoka     { color: #c62828; background: #fdecea; }
.p-stredni    { color: var(--amber); background: #fff4dc; }
.p-nizka      { color: var(--text-muted); background: #eef0f4; }
.s-novy       { color: var(--blue); background: #eef2fb; }
.s-resi       { color: var(--amber); background: #fff4dc; }
.s-vyreseny   { color: var(--green); background: #e7f5ec; }

/* Fronta — tabulka, řádek se vybírá klikem. */
/* Záložka Tikety vpravo: fronta a pod ní detail vybraného tiketu. */
.panel-formular.tikety {
    background: var(--white); padding: 1.25rem 1.5rem;
    display: grid; gap: 1.25rem; align-content: start;
}
.fronta-vyzva { margin: 0; text-align: center; }
.tiket-detail { border-left: 4px solid var(--predmet); padding-left: 1.25rem; }
.tikety.os  .tiket-detail { border-left-color: var(--os); }
.tikety.iot .tiket-detail { border-left-color: var(--iot); }
.tikety.is  .tiket-detail { border-left-color: var(--is); }
.tiket-detail > .akce { margin: 1.1rem 0 0; }
.tiket-detail > .zprava.moje { margin-top: 1.1rem; }
.pripnuty-prazdno .poznamka { margin: 0; }

table.fronta { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.fronta th {
    text-align: left; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700;
    padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border-light);
}
.fronta td { padding: 0.6rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.fronta tr:last-child td { border-bottom: 0; }
.fronta tbody tr { cursor: pointer; }
.fronta tbody tr:hover td, .fronta tbody tr.vybrany td { background: #eef2fb; }
.fronta tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.fronta .id { font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.fronta .predmet { font-weight: 600; }

/* Vlastnosti — dvojice název/hodnota, v úzkém sloupci pod sebou. */
.vlastnosti {
    display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem;
    margin: 0 0 1.25rem; padding: 0.9rem 1rem; font-size: 0.88rem;
    background: var(--light-gray); border-radius: var(--radius);
}
.vlastnosti dt { color: var(--text-muted); }
.vlastnosti dd { margin: 0; font-weight: 600; min-width: 0; }
.vlastnosti .matice { display: block; margin-top: 0.2rem; font-size: 0.75rem;
                      font-weight: 400; color: var(--text-muted); }

/* Zpráva žadatele a řešení žáka — bubliny s iniciálami. */
.zprava { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0.75rem; }
.zprava + .zprava, .zprava + .uzavreni { margin-top: 1.1rem; }
.inic {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; font-size: 0.82rem; color: #fff; background: #0f766e;
}
.bublina {
    background: #eef2fb; border: 1px solid #d5ddf0; min-width: 0;
    border-radius: 0 12px 12px 12px; padding: 0.65rem 0.9rem;
}
.bublina .kdo { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.bublina .kdo strong { color: var(--text); }
.bublina .telo p { margin: 0.4rem 0; }
.bublina .telo p:first-child { margin-top: 0; }
.zprava.moje .inic { background: var(--green); font-size: 0.75rem; }
/* Kolečko s obrázkem postavy (kapitola: avatary z img/postavy/). */
.inic.obr { background: #fff; overflow: hidden; border: 2px solid var(--border-light); }
.inic.obr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zprava.moje .bublina { background: #e7f5ec; border-color: transparent; }
.reseni-text { white-space: pre-wrap; font-size: 0.92rem; }

/* Formulář s řešením — uzavřít tiket bez popisu nejde, jako v praxi. */
.uzavreni { border-top: 1px dashed var(--border-light); padding-top: 1rem; display: grid; gap: 0.5rem; }
.uzavreni label { font-weight: 700; font-size: 0.9rem; }
.uzavreni .poznamka { margin: 0; }
.uzavreni textarea {
    width: 100%; box-sizing: border-box; resize: vertical; font: inherit;
    font-size: 0.92rem; padding: 0.6rem 0.75rem; border-radius: var(--radius);
    border: 1px solid #cbd5e1; background: var(--white); color: var(--text);
}
.uzavreni textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Uzavřený tiket zůstává čitelný — žák se k němu vrací, když si není
   jistý, jestli na něco nezapomněl. */
.karta.tiket.uzavreny .bublina { opacity: 0.85; }

/* Únikový východ: odevzdat, i když nejsou všechny tikety uzavřené.
   Musí být dostupný, ale nesmí vypadat jako hlavní cesta — kdo to zmáčkne,
   přijde o konzoli s nedořešeným problémem. */
.odkazove {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 0.85rem; color: var(--text-muted);
    text-decoration: underline; text-underline-offset: 3px;
}
.odkazove:hover { color: var(--red); }

/* Odpočet. Poslední pětina červeně — ne dřív, ať to celou hodinu nekřičí.
   Vypršení nic neukončuje, konzole běží dál; je to informace, ne soudce. */
/* Odpočet v hlavičce — pořád na očích, ať se nemusí hledat. */
.cas-hlavicka {
    font-family: var(--mono); font-size: 0.9rem; font-weight: 600;
    color: var(--text-muted); background: var(--light-gray);
    border: 1px solid var(--border-light); border-radius: 999px;
    padding: 0.25rem 0.8rem; white-space: nowrap;
}
.cas-hlavicka.cas-dochazi,
.cas-hlavicka.cas-doslo { color: var(--red); border-color: #f3c6c2;
                          background: #fdecea; }

/* Vypršení i nad tikety — v rohu by ho žák přehlédl. */
.hotovo.cas-pruh { background: #fff8e9; border-color: #f5d9a8; }

#unik { margin-top: 1.5rem; text-align: center; }

/* Markdown z tikety.md se renderuje sem. Blockquote je samotný tiket, tak
   jak ho žáci znají z labů — proto vypadá jako výpis z helpdesku. */
.telo blockquote {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--light-gray);
    border-left: 3px solid #cbd5e1;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.telo blockquote p { margin: 0.35rem 0; }
.telo blockquote p:first-child { margin-top: 0; }
.telo blockquote p:last-child { margin-bottom: 0; }
.telo code { font-family: var(--mono); font-size: 0.9em; background: var(--light-gray); padding: 0.1em 0.35em; border-radius: 4px; }
.telo em { color: var(--text-muted); }
.telo p:last-child { margin-bottom: 0; }

/* ── akce ─────────────────────────────────────────────────────────────── */

.akce { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

.tlacitko {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font); font-size: 0.95rem; font-weight: 600;
    padding: 0.7rem 1.4rem; border-radius: var(--radius);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}
.tlacitko:active { transform: translateY(1px); }
.tlacitko.hlavni { background: var(--blue); color: #fff; }
.tlacitko.hlavni:hover { background: #142e73; }
.tlacitko.vedlejsi { background: var(--white); color: var(--text); border-color: #cbd5e1; }
.tlacitko.vedlejsi:hover { background: var(--light-gray); }

.poznamka { font-size: 0.85rem; color: var(--text-muted); }

.tlacitko.drobne {
    font-size: 0.8rem; padding: 0.3rem 0.7rem;
    background: var(--white); color: var(--text); border-color: #cbd5e1;
}
.tlacitko.drobne:hover { background: var(--light-gray); }
.akce-radek { text-align: right; }
.akce-radek form { margin: 0; }

.stav.kolize { background: #fdecea; color: #a4231c; }

.obsazeno {
    background: #fdecea; border: 1px solid #f3c2bd; color: #7a1b16;
    border-radius: var(--radius); padding: 0.8rem 1rem;
    font-size: 0.87rem; text-align: left;
}
.obsazeno strong { display: block; margin-bottom: 0.2rem; }

/* ── stav po odevzdání ────────────────────────────────────────────────── */

.hotovo {
    background: #e6f4ea; border: 1px solid #a7d8b8; color: #145a30;
    border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.hotovo strong { display: block; margin-bottom: 0.2rem; }

/* ── zprávy od průvodce ───────────────────────────────────────────────── */

dialog {
    border: none; border-radius: 12px; padding: 0; max-width: 520px; width: 92%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
dialog::backdrop { background: rgba(26,26,46,0.45); }
.zprava-hlava {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border-light);
}
.avatar { width: 48px; height: 48px; flex: none; }
.zprava-hlava .kdo { font-weight: 700; }
.zprava-hlava .role { font-size: 0.8rem; color: var(--text-muted); }
.zprava-telo { padding: 1.25rem 1.5rem; }
.zprava-telo p { margin: 0 0 0.9rem; }
.zprava-telo p:last-child { margin-bottom: 0; }
.zprava-pata { padding: 0 1.5rem 1.25rem; text-align: right; }

/* ── přihlášení ───────────────────────────────────────────────────────── */

.prihlaseni { max-width: 380px; margin: 12vh auto; }
.prihlaseni .karta { text-align: center; }
.prihlaseni h1 { font-size: 1.3rem; }
.prihlaseni p { color: var(--text-muted); font-size: 0.9rem; margin-top: 0; }

/* Vstupní stránka, když nic neběží: jen eduxo s bublinou. */
.nic { max-width: 760px; margin: 12vh auto 0; padding: 0 1rem; }
.prihlaseni input {
    width: 100%; font-family: var(--mono); font-size: 1.1rem; text-align: center;
    padding: 0.8rem; margin: 1rem 0; border: 1px solid #cbd5e1;
    border-radius: var(--radius);
}
.prihlaseni input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.prihlaseni .tlacitko { width: 100%; justify-content: center; }
.prihlaseni .svatek { margin: 1rem 0 0; }


/* ── přehled pro učitele ──────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th {
    text-align: left; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700;
    padding: 0 0.75rem 0.6rem 0; border-bottom: 1px solid var(--border-light);
}
td { padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid #f1f3f7; }
td.c { font-family: var(--mono); font-weight: 600; }
.stav { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; }
.stav.odevzdal { background: #e6f4ea; color: #145a30; }
.stav.pracuje { background: #fff8e1; color: #7a5800; }
.stav.nepřihlášen { background: var(--light-gray); color: var(--text-muted); }

footer { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.8rem; }
.sloupec footer { padding: 1rem 0 0.5rem; text-align: left; }

/* Číslo a kód vedle sebe: dvě krátká pole, ne dva řádky formuláře. */
.dvojice { display: flex; gap: 0.6rem; margin: 1rem 0; }
.dvojice input { margin: 0; }
.dvojice input[name="cislo"] { flex: 0 0 5.5rem; }
.dvojice input[name="kod"]   { flex: 1; }

/* ── dokumentace ──────────────────────────────────────────────────────── */

.otazka { margin-top: 1.1rem; }
.otazka:first-of-type { margin-top: 0.8rem; }

.otazka-text {
    display: block; font-weight: 600; font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.otazka-napoveda { font-size: 0.85rem; color: var(--text-muted); }
.otazka-napoveda p { margin: 0 0 0.4rem; }

textarea.odpoved {
    width: 100%; box-sizing: border-box;
    font: inherit; font-size: 0.92rem; line-height: 1.5;
    padding: 0.6rem 0.7rem;
    border: 1px solid #cbd5e1; border-radius: var(--radius);
    background: var(--white); color: inherit;
    resize: vertical;      /* na šířku ne — rozbilo by to sloupec */
}
textarea.odpoved:focus { outline: 2px solid var(--predmet); outline-offset: -1px; }
textarea.odpoved:disabled { background: var(--light-gray); color: var(--text-muted); }

/* Stav ukládání. Drží si výšku i prázdný, aby pole pod ním neposkakovalo,
   když se text objeví a zase zmizí. */
.odpoved-stav {
    min-height: 1.1rem; font-size: 0.78rem; color: var(--text-muted);
    margin-top: 0.2rem;
}
.odpoved-stav.chyba { color: var(--red); font-weight: 600; }

/* Formulář jako panel. Na rozdíl od konzole se roluje — otázek může být
   víc, než se vejde, a terminál se neroluje vůbec. */
.panel-formular {
    position: absolute; inset: 0; overflow-y: auto;
    padding: 1rem; background: var(--light-gray);
}
.panel-formular .karta { margin: 0; }

/* ── plátno pro projektor (netlab.eduxo.cz/platno/) ─────────────────────
   Vypadá jako vstupní stránka (hlavička, eduxo s bublinou), jen větší —
   čte se ze zadní lavice. Pod eduxem velký odpočet. */
body.platno { min-height: 100vh; }
.platno .nic.platno-obsah { max-width: 1100px; margin-top: 8vh; }
.platno .home-hero { --avatar-size: clamp(120px, 14vw, 200px); }
.platno .home-bubble { font-size: clamp(1.1rem, 1.9vw, 1.7rem); }
.platno-odpocet { text-align: center; margin-top: 4vh; }
.platno-cas    { font-family: var(--mono); font-weight: 700; line-height: 1;
                 font-size: clamp(5rem, 18vw, 16rem); color: var(--blue); }
.platno-cas.dochazi, .platno-cas.doslo { color: var(--red); }
.platno-podpis { font-size: clamp(1rem, 1.8vw, 1.5rem); color: var(--text-muted);
                 margin-top: 1vh; }
.platno-podpis.doslo { color: var(--red); }
.platno-cela {
    position: fixed; right: 1rem; bottom: 1rem;
    font: inherit; font-size: 0.85rem; cursor: pointer;
    padding: 0.4rem 0.9rem; border-radius: 999px;
    background: var(--light-gray); color: var(--text-muted);
    border: 1px solid var(--border-light);
}

/* ── eduxo nahoře v levém sloupci ─────────────────────────────────────────
   Kapitola i zkouška: menší než na vstupní stránce, sloupec je úzký. */
.eduxo-uvod { --avatar-size: 84px; padding: 0 0 0.5rem; margin: 0 0 1rem; gap: 1rem; }
.eduxo-uvod .home-avatar-wrap { margin-top: 0; margin-bottom: 0; }
.eduxo-uvod .home-bubble { font-size: 0.95rem; line-height: 1.6; }
.eduxo-uvod code { font-family: var(--mono); font-size: 0.88em; }
/* eduxo je JEDINÉ živé eduxo na stránce (nález 9) — musí zůstat vidět,
   i když žák scrolluje dlouhou scénou nebo zadáním. Připnuté nahoře
   v levém sloupci; obsah pod ním jede, pozadí stránky ho zakryje.
   Jen na širokém displeji — pod 1000 px se sloupce řadí pod sebe
   a sloupec se nescrolluje sám. */
@media (min-width: 1001px) {
    .sloupec.zadani > .eduxo-uvod {
        position: sticky; top: 0; z-index: 5;
        background: var(--light-gray);
        padding-top: 0.25rem; margin-bottom: 0.75rem;
        box-shadow: 0 10px 12px -12px rgba(26, 26, 46, 0.25);
    }
}

/* ── záložky oken ────────────────────────────────────────────────────────
   Tikety, terminál, dokumentace… Leží v hlavičce okna místo názvu.
   Kapitola i zkouška. */
/* Skutečné karty, ne přepínače (nález 5, 2026-10-09): neaktivní jsou
   „za“ aktivní (šedé, zaoblené nahoře), aktivní je bílá, s rámem
   a spodním okrajem překrývá čáru hlavičky — splyne s tělem okna. */
.zalozky { display: flex; gap: 0.2rem; flex-wrap: wrap; align-self: flex-end;
           margin-bottom: -1px; }
.zalozka {
    font-family: var(--font); font-size: 0.85rem; cursor: pointer;
    padding: 0.45rem 1rem 0.5rem; border-radius: 8px 8px 0 0;
    background: var(--okno-karta); color: var(--text-muted);
    border: 1px solid var(--okno-ram); border-bottom-color: var(--okno-ram);
}
.zalozka:hover:not(:disabled) { background: #f1f3f8; color: var(--text); }
.zalozka:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.zalozka.aktivni { background: var(--white); color: var(--text); font-weight: 600;
                   border-bottom-color: var(--white); }
.zalozka:disabled { cursor: default; opacity: 0.55; }

/* Test ABCDE (test.html): volby pod sebou jako velké řádky — dobře se
   trefují i prstem na mobilu. Po ukončení barva karty říká správně/špatně. */
.test-otazka h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
.test-text { overflow-x: auto; }
.test-text pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.test-volby { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0 0.5rem; }
.test-volba {
    display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer;
    padding: 0.55rem 0.75rem; border: 1px solid var(--border-light);
    border-radius: var(--radius); overflow-wrap: anywhere;
}
.test-volba:hover { background: var(--light-gray); }
.test-volba input { margin-top: 0.3rem; flex: none; }
.test-volba:has(input:checked) { border-color: var(--blue); background: #eef2fb; }
.test-znacka { display: inline-block; font-size: 0.8rem; font-weight: 700;
               padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--light-gray); }
.test-otazka.spravne { border-left: 4px solid var(--green); }
.test-otazka.spravne .test-znacka { color: var(--green); background: #e7f5ec; }
.test-otazka.spatne  { border-left: 4px solid var(--red); }
.test-otazka.spatne  .test-znacka { color: var(--red); background: #fdecea; }
.test-body { font-size: 1.4rem; font-weight: 700; margin: 0.5rem 0; }

/* Na mobilu se hlavička testu zalomí: logo a účet nahoře, název a čas pod. */
@media (max-width: 700px) {
    body.test-abcde header { height: auto; grid-template-columns: 1fr auto;
                             gap: 0.5rem; padding: 0.6rem 1rem; }
    body.test-abcde header .nazev { grid-row: 2; grid-column: 1 / -1; justify-self: stretch;
                                    white-space: normal; padding: 0.5rem 0.9rem; }
    body.test-abcde header .vpravo { gap: 0.5rem; }
    body.test-abcde .logo-netlab img:last-child { display: none; }
    body.test-abcde main { padding: 1rem 0.75rem 3rem; }
    body.test-abcde .karta { padding: 1.1rem 1rem; }
}