/*
 * Administrace KCN — designový systém.
 *
 * Vychází z 4dox-výroby (templates/base.html.twig): ručně psané CSS, žádný
 * framework, pevný levý sidebar a topbar. Přenesené jsou i poznámky, které si
 * výroba vykoupila praxí — kontrast textu podle WCAG, chování `select`
 * v Safari a pasti na specificitu. Paleta je GetID.
 *
 * Bootstrap tu není schválně: admin má vypadat jako ostatní firemní software,
 * ne jako výchozí bootstrapová stránka.
 */

:root {
    /* Paleta GetID. Modrá je hlavní akcent, zelená potvrzuje. */
    --accent: #37AADC;
    --accent-dark: #2b87ae;
    --accent-light: #7cc7e8;
    --accent-soft: #e8f4fb;

    --bg: #f6f8fa;
    --panel: #fff;
    --ink: #1b2a33;
    --mut: #6b7280;
    --line: #e4e8ec;

    --ok: #12B55F;
    --ok-soft: #e6f7ee;
    --warn: #f39c12;
    --danger: #e74c3c;

    /* Tytéž barvy pro TEXT. `--warn` a `--danger` jsou laděné pro plochy;
       na bílé mají kolem 3:1, takže drobný text by nesplnil WCAG AA (4,5:1). */
    --danger-ink: #b3261e;
    --warn-ink: #9a6700;
    --ok-ink: #0b7a40;

    --sidebar-w: 236px;
    --topbar-h: 58px;
}

* { box-sizing: border-box; }

/* Atribut `hidden` musí přebít i třídy s vlastním display, jinak zůstane
   skrytý prvek vidět. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 14.5px/1.5 "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.3px; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; }

.lead { color: var(--mut); font-size: 13.5px; margin: 0 0 18px; max-width: 70ch; }
.crumb { color: var(--mut); font-size: 13px; margin-bottom: 18px; }
.crumb a { color: var(--mut); }
.mut { color: var(--mut); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }

/* ---- Levý sidebar ---- */

.sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--sidebar-w); height: 100vh; overflow-y: auto;
    background: var(--panel); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; z-index: 20;
}

/* Výška přesně jako topbar, ať se spodní linky obou panelů potkají v rovině. */
.sidebar .brand {
    height: var(--topbar-h); padding: 0 22px; border-bottom: 1px solid var(--line);
    line-height: 1.15; display: flex; flex-direction: column; justify-content: center; flex: none;
}
.sidebar .brand b { display: block; font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -.4px; }
.sidebar .brand span { font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: 1.5px; }

.sidebar nav { display: flex; flex-direction: column; padding: 12px 12px 30px; gap: 2px; }

/* Nadpis sekce je jemně podbarvený. Bez podkladu splývá s odkazy pod sebou
   a menu vypadá jako jeden dlouhý seznam. */
.sidebar nav .lbl {
    font-size: 12px; letter-spacing: .9px; text-transform: uppercase;
    color: var(--mut); background: var(--accent-soft); border-radius: 8px;
    padding: 7px 12px; margin: 12px 0 4px; font-weight: 700;
}
.sidebar nav > .lbl:first-child { margin-top: 2px; }

.sidebar nav a {
    display: flex; align-items: center; gap: 11px; padding: 9px 13px;
    border-radius: 9px; color: #4b5563; font-weight: 500; font-size: 14px;
}
.sidebar nav a i { width: 18px; text-align: center; font-size: 15px; color: #9aa3af; }
.sidebar nav a:hover { text-decoration: none; background: var(--accent-soft); color: var(--accent-dark); }
.sidebar nav a:hover i { color: var(--accent-dark); }
.sidebar nav a.active { background: var(--accent); color: #fff; }
.sidebar nav a.active i { color: #fff; }

/* ---- Horní lišta ---- */

.topbar {
    position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--topbar-h);
    background: var(--panel); border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 26px; z-index: 15;
}
.topbar .tb-left { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--mut); }
.topbar .tb-right { display: flex; align-items: center; gap: 8px; }

.tb-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px;
    border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #4b5563;
    font-size: 13.5px; cursor: pointer; font-family: inherit;
}
.tb-btn:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-light); text-decoration: none; }
.tb-user { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mut); }
.tb-user b { color: var(--ink); font-weight: 600; }

/* ---- Obsah a patička ---- */

main { margin-left: var(--sidebar-w); padding: calc(var(--topbar-h) + 26px) 30px 82px; min-height: 100vh; }

.appfoot {
    position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; height: 58px; padding: 0 30px;
    border-top: 1px solid var(--line); background: var(--panel); z-index: 30;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--mut); font-size: 12.5px;
}
.appfoot .ver { font-family: ui-monospace, Menlo, monospace; }

/* ---- Panely a mřížka ---- */

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.panel-head { padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.panel-body { padding: 16px; }
.panel-foot { padding: 13px 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Sbalitelný panel: <details class="panel"> + <summary class="panel-head">.
   Rozpad ceny je kontrolní údaj, ne něco, co obchodník čte při každé
   kalkulaci — otevře se, až když o ceně zapochybuje. Nativní <details>,
   protože zavřená sekce nemá stát za řádek JavaScriptu. */
details.panel > summary.panel-head {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    /* Zavřený panel je jen hlavička — čára pod ní by visela v prázdnu. */
    border-bottom: 0;
}
details.panel[open] > summary.panel-head { border-bottom: 1px solid var(--line); }
details.panel > summary.panel-head::-webkit-details-marker { display: none; }
details.panel > summary.panel-head::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--mut);
    border-bottom: 2px solid var(--mut);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}
details.panel[open] > summary.panel-head::after { transform: rotate(225deg) translate(-2px, -2px); }
summary.panel-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.grid { display: grid; gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stat .k { color: var(--mut); font-size: 12.5px; }
.stat .v { font-size: 22px; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.stat .n { color: var(--mut); font-size: 12px; }
/* Hodnota, která si žádá pozornost — zastaralý kurz, prošlý příplatek. */
.stat.attention { border-left: 3px solid var(--warn); }

/* ---- Tabulky (varianta jako ve výrobě: plná mřížka, husté řádky) ---- */

table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left; padding: 7px 10px;
    border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 13px;
}
th:last-child, td:last-child { border-right: none; }
th { background: #f7f9fa; color: var(--ink); font-weight: 700; font-size: 12px; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfd; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.right, th.right { text-align: right; }

/* ---- Štítky ---- */

.pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok-ink); }
.pill.info { background: var(--accent-soft); color: var(--accent-dark); }
.pill.warn { background: #fff2dd; color: var(--warn-ink); }
.pill.danger { background: #fdeaea; color: var(--danger-ink); }
.pill.none { background: #eef0f2; color: var(--mut); }

/* ---- Hlášky ---- */

.note { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px; border: 1px solid; }
.note.ok { background: var(--ok-soft); border-color: #bde9d1; color: var(--ok-ink); }
.note.warn { background: #fff8e8; border-color: #f3dfae; color: var(--warn-ink); }
.note.danger { background: #fdeaea; border-color: #f2c4c0; color: var(--danger-ink); }
.note.info { background: var(--accent-soft); border-color: #bfe2f3; color: var(--accent-dark); }
.note ul { margin: 8px 0 0; padding-left: 18px; }
.note b { font-weight: 700; }

/* ---- Tlačítka ---- */

.btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
    font-size: 14px; font-family: inherit; cursor: pointer; text-decoration: none;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { text-decoration: none; background: var(--accent-soft); border-color: var(--accent-light); color: var(--accent-dark); }
.btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn.danger { color: var(--danger-ink); border-color: #f0cfca; background: #fff; }
.btn.danger:hover { background: #fdecea; border-color: #e7b6b0; color: var(--danger-ink); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.link { border-color: transparent; background: none; color: var(--accent-dark); padding: 0; }
.btn.link:hover { background: none; text-decoration: underline; }

/* Nedostupné tlačítko musí vypadat nedostupně, i v barevných variantách —
   jinak na něj uživatel klikne a diví se, že se nic neděje. */
.btn:disabled, .btn.primary:disabled, .btn.danger:disabled {
    background: #eef0f2; border-color: #dfe3e7; color: #9aa3af; cursor: not-allowed; box-shadow: none;
}

/* ---- Formuláře ---- */

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.field .hint { color: var(--mut); font-size: 12.5px; margin-top: 5px; }
.field .hint b { color: var(--ink); }

input, select, textarea {
    width: 100%; height: 38px; padding: 0 11px;
    border: 1px solid var(--line); border-radius: 6px; background-color: #fff;
    color: var(--ink); font-family: inherit; font-size: 14px;
}
textarea { height: auto; padding: 9px 11px; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=checkbox], input[type=radio] { width: auto; height: auto; box-shadow: none; accent-color: var(--accent); }

/* Select se musí chovat jako input. Safari u nativního vzhledu ignoruje padding
   a výšku si kreslí po svém — vedle sebe pak select a input nesedí, ať mají
   v CSS cokoli. Nativní vzhled proto vypínáme a šipku dokreslujeme sami. */
select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
    padding-right: 30px;
}

/* Datum a čas: Safari si drží vlastní výšku i po vypnutí appearance, takže
   vedle textového pole vyčnívají. */
input[type=date], input[type=datetime-local], input[type=time] { appearance: none; -webkit-appearance: none; }

/* Pole se zásuvným tlačítkem (kurz + ČNB). */
.input-attached { display: flex; }
.input-attached input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-attached .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; height: 38px; }

/* ---- Prázdný stav ---- */

.empty { text-align: center; padding: 44px 20px; color: var(--mut); }
.empty i { font-size: 28px; color: #c7ced4; display: block; margin-bottom: 12px; }

/* ---- Přihlášení ---- */

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 25rem; }
.login-card .brand { text-align: center; margin-bottom: 18px; }
.login-card .brand b { display: block; font-size: 26px; font-weight: 700; color: var(--accent); letter-spacing: -.5px; }
.login-card .brand span { font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: 1.5px; }

/* ---- Stránkování ---- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; }
.pager-item { display: inline-block; min-width: 34px; padding: 6px 10px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
a.pager-item:hover { background: var(--accent-soft); border-color: var(--accent-light); text-decoration: none; }
.pager-item.current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pager-item.disabled { color: var(--mut); background: transparent; }
.pager-info { margin-left: auto; color: var(--mut); }

/* ---- Menší obrazovky ----
   Admin je desktopová věc, ale na tabletu nebo úzkém okně nemá vypadat rozbitě:
   sidebar se schová nad obsah a otevírá se tlačítkem v topbaru. */

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .18s; }
    body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .18); }
    .topbar { left: 0; padding: 0 14px; }
    main { margin-left: 0; padding: calc(var(--topbar-h) + 18px) 14px 82px; }
    .appfoot { left: 0; padding: 0 14px; }
    .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr 1fr; }
    .fgrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
    .fgrid { grid-template-columns: 1fr; }
    .table-scroll { overflow-x: auto; }

    /* Hlavička: název stránky nese i nadpis pod ní a roli menu, takže na
       telefonu zbude jméno a odhlášení jen ikonou. */
    .topbar .tb-title, .tb-user .pill, .tb-btn .tb-label { display: none; }

    /* Seznamy jako karty: řádek pod sebou, popisek sloupce z `data-label`.
       Vodorovný posuv schovával právě sloupce s tlačítky. */
    table.cards thead { display: none; }
    table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
    table.cards tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
    table.cards td { border: none; padding: 4px 12px; text-align: left; }
    table.cards td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--mut); }
}

/* Na velkých obrazovkách tlačítko pro menu nedává smysl. */
.nav-toggle { display: none; }
@media (max-width: 900px) { .nav-toggle { display: inline-flex; } }

/* ── Taby ────────────────────────────────────────────────────────────────
   Bez JavaScriptu, na skrytých přepínačích. Šipky mezi nimi fungují samy od
   sebe, protože je to skupina radio prvků — což je přesně chování, které
   ARIA u tabů předepisuje a ručně psaný JS ho obvykle neumí.
   Panely jsou <section>, takže je nth-of-type spolehlivě spáruje s pořadím
   přepínačů a nemusí se to vázat na konkrétní id. */
.tabs > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab-bar label {
    padding: 9px 16px; cursor: pointer; font-size: 14px; font-weight: 600;
    color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-bar label:hover { color: var(--ink); }
.tabs > section { display: none; }
.tabs > input:nth-of-type(1):checked ~ section:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ section:nth-of-type(2) { display: block; }
.tabs > input:nth-of-type(1):checked ~ .tab-bar label:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .tab-bar label:nth-of-type(2) {
    color: var(--accent-dark); border-bottom-color: var(--accent);
}
.tabs > input:focus-visible ~ .tab-bar label { outline: 2px solid var(--accent-soft); }

/* ── Dlaždice voleb s obrázkem ────────────────────────────────────────────
   Karabiny a uzávěry se od sebe názvem skoro nepoznají — „PL915" a „PL925"
   nikomu nic neřeknou, obrázek ano. Katalog je u těch voleb má, mobilní
   aplikace je ukazuje, takže je ukazuje i tahle obrazovka. */
.optgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.optcard {
    display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
    background: var(--panel); border: 2px solid var(--line); border-radius: 14px;
    padding: 10px; transition: .12s; font: inherit; color: inherit;
}
.optcard:hover { border-color: var(--accent); }
.optcard[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.optcard .thumb {
    height: 92px; border-radius: 10px; background: #f6f8fa;
    display: grid; place-items: center; overflow: hidden;
}
.optcard .thumb img { max-height: 100%; max-width: 100%; object-fit: contain; }
.optcard .nm { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.optcard .sub { font-size: 12px; color: var(--muted); }

/* Volby bez obrázku — širší tlačítka pod sebou, ať se dlouhé názvy vejdou. */
.optlist { display: grid; gap: 8px; }
.optlist .optcard { flex-direction: row; align-items: center; justify-content: space-between; padding: 11px 14px; }

/* ── Výsledek, který jede s vámi ──────────────────────────────────────────
   Levý sloupec s parametry je dlouhý — u šňůrek přes tři obrazovky. Cena by
   při rolování zmizela nahoře a člověk by po každé změně scrolloval zpátky,
   aby zjistil, co to udělalo. Sticky ji drží na očích.

   Grid nesmí mít `align-items: start`: sticky prvek potřebuje ve své buňce
   volný prostor, do kterého se posouvá, a smrsknutá buňka žádný nemá. */
.sticky-side { position: sticky; top: calc(var(--topbar-h) + 16px); }

@media (max-width: 900px) {
    /* Na úzkém okně jsou sloupce pod sebou a přilepený panel by překrýval
       to, co se pod ním čte. */
    .sticky-side { position: static; }
}

/* ── Rozpad ceny po sekcích ───────────────────────────────────────────────
   Zvýrazněný řádek je mezisoučet — ten, na kterém se dá zastavit a říct
   „tady jsme na tolika". Bez odlišení splyne s dvaceti dalšími čísly. */
.calcsec + .calcsec { margin-top: 4px; }
.calcsec > h3 {
    margin: 0; padding: 10px 16px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    background: var(--panel-alt, #f7f9fb); border-top: 1px solid var(--line);
}
/* Pevné rozvržení: bez něj si každá sekce šířku sloupců spočítá zvlášť
   podle svého nejdelšího popisku a čísla se v panelu klikatí. */
.calcsec table { margin: 0; table-layout: fixed; }
.calcsec th[scope="row"] { width: 62%; }
.calcsec tr.hl th, .calcsec tr.hl td { font-weight: 700; background: var(--accent-soft); }
.calcsec td.num { white-space: nowrap; }

/* ── Změny v auditním logu ────────────────────────────────────────────────
   Seznam bez odrážek, aby v tabulce nedělal odsazení; „z čeho" potlačené,
   „na co" tučné — oko pak čte novou hodnotu, ne tu starou. */
.chg { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.chg li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.chg li + li { margin-top: 3px; }
.chg .k { color: var(--muted); min-width: 9em; }
.chg i { font-size: 10px; opacity: .4; }