/*
 * Komponenty administrácie, prihlásenia a inštalátora.
 * Hodnoty len z tokens.css (viď docs/DIZAJN.md) — žiadna farba ani rozmer mimo škál.
 */

/* ---------- základ ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

/* Nadpisy: Bricolage Grotesque, tesné riadkovanie a záporné rozostupy podľa DIZAJN.md. */
h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
}
h1 { font-size: var(--text-xl); font-weight: var(--weight-heavy); }
h2 { font-size: var(--text-base); }
h3 { font-size: var(--text-base); }
@media (min-width: 64rem) {
    h1 { font-size: var(--text-2xl); }
}
p { margin: 0; }

a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

code { font-family: var(--font-mono); font-size: 0.9em; padding: 0 var(--space-1); border-radius: var(--radius-control); background: var(--surface-2); }

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

[hidden] { display: none !important; }

/* Kreslenie ikony patrí sem, nie do atribútov každého SVG. Ikony skladané skriptom atribúty
   nemajú a bez tohto sa vykreslia ako čierna výplň — na tmavom pozadí neviditeľná. */
.icon {
    width: var(--icon-md); height: var(--icon-md); flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
/* Plné tvary v ikone (značka): CSS prebíja atribút fill, preto trieda. */
.icon .icon-fill { fill: currentColor; stroke: none; }
.icon .icon-accent { fill: var(--accent); stroke: none; }

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); font-size: var(--text-sm); }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Skrytý text pre čítačky: !important ako pri [hidden] — inak ho prebije pravidlo s vyššou špecifickosťou (napr. `.card-header p`
   so šírkou 100 %) a absolútne umiestnený text vytlačí stránku do šírky (vodorovný posuv na Faktúrach). */
.sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.skip-link {
    position: absolute; left: var(--space-4); top: calc(-1 * var(--space-16)); z-index: 100;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-control);
    background: var(--accent); color: var(--on-accent); font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- bodkové mraky ----------
   Jedno pozadie celej stránky: dots.js vloží do <body> vrstvu .dots-layer na celú výšku dokumentu, rozdelenú na dlaždice
   <canvas> v jednej mriežke (bez švu). <body> dostane vlastný kontext vrstvenia (isolation), takže vrstva so z-index -1 leží
   nad jeho pozadím, ale pod všetkým obsahom — karty, hlavička aj päta sú nepriehľadné a ležia nad mrakom.
   overflow: hidden — vrstva nikdy nespôsobí posun do strany. */

.has-dots { position: relative; isolation: isolate; }
.dots-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dots-tile { position: absolute; left: 0; display: block; width: 100%; }

/* ---------- posuvníky ---------- */

@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
    ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--radius-full); background: var(--scrollbar-thumb) padding-box; }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
    ::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
}

@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
}

/* ---------- značka ---------- */

.brand-mark { display: inline-grid; place-items: center; flex: none; color: var(--text); }
.brand-mark .icon { width: var(--icon-lg); height: var(--icon-lg); }
.brand-word { font-family: var(--font-display); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-display); color: var(--text); }
.brand-tld { color: var(--accent-text); }

/* ---------- rozloženie administrácie ---------- */

.app-shell { min-height: 100vh; }
/* Mriežka Prehľadu bez šírky stĺpca by rástla podľa najdlhšieho obsahu karty — karty by končili ďalej než pás nad nimi. */
.app-main { min-width: 0; }
/* Posuvník okna vo farbe plochy stránky pôsobil ako medzera navyše — obsah vyzeral vpravo ďalej od okraja než vľavo od
   bočného panela. V administrácii a portáli je dráha posuvníkov plocha karty ako bočný panel: obsah má na oboch stranách
   --space-8 od rámu (panel vľavo, posuvník vpravo). Premenná sa číta na prvku s posuvníkom — pre okno je to html. */
:root:has(> body.app-shell) { --scrollbar-track: var(--surface); }

.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--sidebar-width);
    display: flex; flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    transform: translateX(-100%);
    transition: transform var(--duration-panel) var(--ease-out);
}

.sidebar-open .sidebar { transform: translateX(0); }

.sidebar-backdrop { position: fixed; inset: 0; z-index: 30; background: var(--backdrop); }

.brand {
    display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0;
    height: var(--topbar-height); padding: 0 var(--space-6);
    border-bottom: 1px solid var(--border);
    text-decoration: none; font-size: var(--text-lg);
}

.nav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-3) var(--space-6); }

/* Skupiny oddeľuje jemná čiara a odstup; nadpis skupiny drobným písmom. */
.nav-group + .nav-group { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }

.nav-title {
    margin: 0 0 var(--space-1); padding: var(--space-1) var(--space-3);
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
    text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-subtle);
}

.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }

/* Názov položky sa nelame — pri úzkom paneli by sa inak rozpadol na dva riadky vedľa odznaku. */
.nav-link {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3);
    min-height: var(--control-height); padding: 0 var(--space-3);
    border-radius: var(--radius-control);
    color: var(--text-muted); text-decoration: none; white-space: nowrap;
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

/* Hover len jemne (polovičná plocha), fokus len z klávesnice — zvýraznená má byť jediná položka: aktívna. */
a.nav-link:hover { background: color-mix(in srgb, var(--surface-2) 50%, transparent); color: var(--text); }
.nav-link:focus { outline: none; }
.nav-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* Aktívna položka: jantárová plocha so zvislým prúžkom vľavo (aj pod kurzorom ostáva rovnaká). */
.nav-link[aria-current="page"], a.nav-link[aria-current="page"]:hover { background: var(--accent-soft); color: var(--accent-soft-text); font-weight: var(--weight-semibold); }
.nav-link[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2);
    width: 3px; border-radius: var(--radius-full); background: var(--accent);
}

.nav-count { margin-left: auto; min-width: var(--chip-height); padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--danger-soft); color: var(--danger-text); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--chip-height); text-align: center; }

/* Počet, ktorý nie je chyba (čaká na kontrolu): jantárový podklad namiesto červeného. */
.nav-count.is-neutral { background: var(--accent-soft); color: var(--accent-soft-text); }

/* Desktop (myš): hutnejšie menu, aby sa na bežnom notebooku zmestilo čo najviac — položka 40 px (cieľ kliknutia
   neklesne pod 40), skupiny bližšie k sebe. Na telefóne ostáva 44 px pre palec. */
@media (min-width: 64rem) {
    .nav { padding-top: var(--space-3); padding-bottom: var(--space-3); }
    .nav ul { gap: 0; }
    .nav-link { min-height: calc(var(--control-height) - var(--space-1)); }
    .nav-group + .nav-group { margin-top: var(--space-3); padding-top: var(--space-3); }
}

.sidebar-foot { padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-subtle); }
.sidebar-foot p + p { margin-top: var(--space-1); font-family: var(--font-mono); }
.sidebar-company { color: var(--text); font-weight: var(--weight-medium); overflow-wrap: anywhere; }

/* Horná lišta: pevná plocha (obsah pod ňou pri posúvaní prechádza) a jemná deliaca čiara.
   Nesie len menu (mobil), prepínač témy a účet — názov stránky je v nadpise, nie tu. */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--space-3);
    height: var(--topbar-height); padding: 0 var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* Obsah na celú šírku — dlhé texty obmedzuje --measure priamo pri odsekoch. */
/* Výška aspoň po spodok okna — mrak vľavo dole patrí ku koncu obrazovky aj na krátkej stránke. */
.content { width: 100%; min-height: calc(100vh - var(--topbar-height)); padding: var(--space-6) var(--space-4) var(--space-16); }

@media (min-width: 64rem) {
    .sidebar { transform: none; }
    /* Vyššia špecifickosť než .btn, ktoré je v súbore nižšie a nastavuje display. */
    .sidebar-backdrop, .topbar .menu-button { display: none; }
    .app-main { margin-left: var(--sidebar-width); }
    .topbar { padding: 0 var(--space-8); }
    .content { padding: var(--space-8) var(--space-8) var(--space-16); }
}

/* ---------- hlavička stránky ---------- */

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-8); }
.page-header p { margin-top: var(--space-2); color: var(--text-muted); max-width: var(--measure); }
/* Blok s nadpisom smie byť užší než najdlhšie slovo (e-mail, názov firmy) — inak by na telefóne roztiahol stránku do strany. */
.page-header > div:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Štítok nad nadpisom: kde v menu stránka leží („SYSTÉM / NASTAVENIA“). */
.page-header .eyebrow, .eyebrow {
    margin: 0 0 var(--space-2); color: var(--text-subtle);
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
    text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.eyebrow a { color: var(--text-subtle); }
.eyebrow a:hover { color: var(--text); }
.page-header .actions { margin-left: auto; display: flex; gap: var(--space-2); }

/* minmax(0, 1fr): bez neho stĺpec mriežky nezmenší pod šírku najdlhšieho obsahu
   a stránka na mobile preteká do strany. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.stack > * { min-width: 0; }
.stack-gap { margin-top: var(--space-6); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
/* Stĺpec so širokou tabuľkou by sa inak roztiahol na jej šírku a stránka by pretekala. */
.grid-2 > * { min-width: 0; }
/* Dva stĺpce až od 80 rem okna (ako Prehľad) — pri bočnom paneli je pod tým pravý stĺpec užší než tlačidlo v ňom. */
@media (min-width: 80rem) {
    .grid-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
    /* Dva rovnaké stĺpce (Nastavenia, Databáza). */
    .grid-2.is-even { grid-template-columns: 1fr 1fr; }
}

/* ---------- tlačidlá ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--control-height); padding: 0 var(--space-4);
    border: 1px solid transparent; border-radius: var(--radius-control);
    font: inherit; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.btn .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* Dlhý popis tlačidla (s e-mailom) sa na telefóne zalomí — inak by roztiahol stránku do strany. */
@media (max-width: 39.99rem) {
    .btn { max-width: 100%; white-space: normal; text-align: center; padding-top: var(--space-2); padding-bottom: var(--space-2); }
}

.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Primárne: jantárová výplň vždy s tmavým textom. */
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background: var(--surface-2); }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger-text); }
.btn-danger:hover { background: var(--danger-soft); }

.btn-block { width: 100%; }

/* Menšie tlačidlo do riadku tabuľky — riadok ho dopĺňa na pohodlný cieľ. */
.btn-sm { min-height: var(--control-height-sm); padding: 0 var(--space-3); }

.btn-icon { width: var(--control-height); padding: 0; }
.btn-sm.btn-icon { width: var(--control-height-sm); }

.btn:active { transform: translateY(1px); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary:disabled:hover { background: var(--accent); }
.btn-secondary:disabled:hover, .btn-danger:disabled:hover { background: var(--surface); }
.btn-ghost:disabled:hover { background: transparent; color: var(--text-muted); }

.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after {
    content: ""; width: var(--icon-xs); height: var(--icon-xs); border-radius: var(--radius-full);
    border: 2px solid currentColor; border-right-color: transparent;
    animation: spin 700ms linear infinite;
}

.link-button { padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-button:disabled { color: var(--text-subtle); text-decoration: none; cursor: default; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Ikona mazania v riadku: červená sa objaví až pri ukázaní, aby tabuľka nebola posiata výstrahami. */
.btn-ghost.is-danger:hover, .btn-ghost.is-danger:focus-visible { background: var(--danger-soft); color: var(--danger-text); }

/* ---------- prepínač režimu ---------- */

/* Jedno tlačidlo: v tmavom režime slnko (prepne na svetlý), vo svetlom mesiac. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- menu používateľa ---------- */

.user-menu { position: relative; }

.user-menu > summary {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: var(--control-height); padding: 0 var(--space-2);
    border-radius: var(--radius-control); cursor: pointer; list-style: none;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--surface-2); }

.avatar {
    display: grid; place-items: center;
    width: var(--control-height-sm); height: var(--control-height-sm); border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent-soft-text);
    font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-heavy);
}

.user-name { font-size: var(--text-sm); font-weight: var(--weight-medium); }

.user-dropdown {
    position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 50;
    min-width: var(--width-dropdown); padding: var(--space-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
}
.user-dropdown .who { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.user-dropdown .who p:first-child { font-weight: var(--weight-semibold); }
.user-dropdown .who p:last-child { color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.user-dropdown button, .user-dropdown > a.btn { width: 100%; justify-content: flex-start; }

@media (max-width: 39.99rem) {
    .user-name { display: none; }
}

/* ---------- karty ---------- */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); }

.card-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
.card-header p { width: 100%; color: var(--text-muted); font-size: var(--text-sm); }
.card-header .actions { margin-left: auto; }
/* Odkaz bez rámika (Návštevnosť →, Firmy →) zarovnaný textom k okraju obsahu karty ako štítok či tlačidlo s rámikom. */
.card-header .btn-ghost.actions:not(.btn-icon) { margin-right: calc(var(--space-4) * -1); }
.card-header .btn-ghost.btn-sm.actions:not(.btn-icon) { margin-right: calc(var(--space-3) * -1); }

.card-header > .toolbar { flex: 1 1 var(--width-panel); }

.card-body { padding: var(--space-6); }
.card-body > * + * { margin-top: var(--space-4); }
/* Formulár v karte: odstup polí dáva gap formulára — okraj z .card-body by ho zdvojil. */
.card-body.form > * + * { margin-top: 0; }

.card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.card-footer.form-stack { display: grid; gap: var(--space-4); }
.card-footer.form-actions, .card-footer:has(.pagination) { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.card > .alert { margin: var(--space-4) var(--space-6) 0; }
/* Akcia v päte karty (údržba: znova načítať, prepočítať, prehľadať znova, skúšobný e-mail): vysvetlenie vľavo, pole
   a tlačidlo vpravo — rovnako ako akcia v riadku zoznamu. Prvý riadok textu je na stred výšky ovládacích prvkov.
   Na telefóne pod sebou, ovládacie prvky na celú šírku. */
.card-action { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-6); }
.card-action-text {
    display: grid; gap: var(--space-1); flex: 1 1 var(--width-tile-min); min-width: 0;
    padding-top: calc((var(--control-height) - var(--text-sm) * var(--leading-normal)) / 2);
}
.card-action-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.card-action-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
.card-action-controls .input { width: auto; flex: 0 1 auto; min-width: 0; }
@media (max-width: 39.99rem) {
    .card-action-text { flex-basis: 100%; padding-top: 0; }
    .card-action-controls { width: 100%; margin-left: 0; }
    .card-action-controls .input { flex: 1 1 100%; }
}

.callout { margin-bottom: var(--space-6); border-color: var(--warning-border); }

/* ---------- dlaždice so štatistikou ---------- */

.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--width-tile-min)), 1fr)); margin-bottom: var(--space-6); }

.stat { padding: var(--space-6); }
.stat-label { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.stat-label .icon { width: var(--icon-xs); height: var(--icon-xs); }
/* Veľké číslo: Bricolage, číslice rovnako široké. */
.stat-value { margin-top: var(--space-3); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-heavy); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-value.is-text { font-size: var(--text-xl); }
.stat-meta { margin-top: var(--space-2); color: var(--text-subtle); font-size: var(--text-sm); }

/* Dlaždica, ktorá si žiada pozornosť (alebo hlavná na stránke): jantárová plocha a okraj. */
.stat-accent { background: var(--accent-soft); border-color: var(--accent); }
.stat-accent .stat-label, .stat-accent .stat-meta { color: var(--text-muted); }
.stat-accent .stat-value { color: var(--accent-soft-text); }

/* Dlaždica ako odkaz (Prehľad). */
a.stat-link { color: inherit; text-decoration: none; transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }
a.stat-link:hover { border-color: var(--border-strong); }
a.stat-link.stat-accent:hover { border-color: var(--accent-hover); }
a.stat-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Na telefóne dve čísla vedľa seba — jedno na riadok by zaplnilo niekoľko obrazoviek. */
@media (max-width: 39.99rem) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .stats .stat { padding: var(--space-4); }
    .stats .stat-value { font-size: var(--text-xl); }
    .stats .stat-value.is-text { font-size: var(--text-lg); }
    /* Tri čísla (súhrn exportu): tretie cez celú šírku, nie osamote v polovici. */
    .stats.is-trio .stat:last-child { grid-column: 1 / -1; }
    .page-header .actions { margin-left: 0; flex-wrap: wrap; }
}

.chart-empty { padding: var(--space-8) 0; color: var(--text-muted); font-size: var(--text-sm); text-align: center; }

/* ---------- popisný zoznam ---------- */

.details { display: grid; gap: var(--space-3); margin: 0; }
.details div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
.details dt { color: var(--text-muted); }
.details dd { margin: 0; font-weight: var(--weight-medium); text-align: right; overflow-wrap: anywhere; }
.details dd.muted { font-weight: var(--weight-regular); max-width: var(--measure); }
.details dd.wrap { white-space: normal; overflow-wrap: anywhere; }
.details dd .badge { vertical-align: middle; }
/* Chýbajúca hodnota: bežné písmo a tlmená farba, aj v stĺpci s technickými (mono) hodnotami. */
.value-none { color: var(--text-subtle); font-family: var(--font-sans); font-weight: var(--weight-regular); }

/* ---------- tabuľky ---------- */

/* position: relative — skrytý text pre čítačky (.sr-only) by inak unikol z posúvanej tabuľky
   a rozšíril celú stránku na mobile. */
.table-wrap { position: relative; overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
    padding: var(--space-3) var(--space-4); text-align: left; white-space: nowrap;
    color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
    text-transform: uppercase; letter-spacing: var(--tracking-label);
    background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.table th:first-child, .table td:first-child { padding-left: var(--space-6); }
.table th:last-child, .table td:last-child { padding-right: var(--space-6); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Užší obsah (tablet, notebook s bočným panelom): menšie vnútorné odstupy stĺpcov, aby sa tabuľka zmestila do karty
   a posledný stĺpec (stav, akcie) neodišiel za okraj. Krajné stĺpce si nechávajú odstup od okraja karty. */
@media (min-width: 40rem) and (max-width: 79.99rem) {
    .table th, .table td { padding-left: var(--space-3); padding-right: var(--space-3); }
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--duration) var(--ease-out); }
.table tbody tr:hover td { background: var(--surface-2); }
/* Čísla v tabuľkách: mono, zarovnané vpravo. */
.table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.table tr.is-highlight td { background: var(--warning-soft); }
.table tr.is-muted td { color: var(--text-subtle); }
.table td.top { vertical-align: top; }
.table .cell-main { font-weight: var(--weight-medium); }
.table .cell-sub { color: var(--text-muted); }
/* Doplnkový riadok (e-mail pod menom) sa smie zalomiť aj v strede slova — dlhý e-mail by inak roztiahol tabuľku a akcie
   riadku by skončili za okrajom karty. Hlavný údaj len medzi slovami (inak by úzky stĺpec lámal aj krátke názvy). */
.table .cell-sub { overflow-wrap: anywhere; }
/* Hlavný a doplnkový údaj pod sebou (meno a e-mail). */
.table td > .cell-main + .cell-sub { display: block; margin-top: var(--space-1); font-size: var(--text-sm); }

/* Tabuľka, ktorá sa na úzkej obrazovke zmení na karty: každý riadok pod seba, popisok z data-label.
   Prvá bunka (názov) ostáva bez popisku ako nadpis karty. */
@media (max-width: 39.99rem) {
    .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; }
    /* minmax(0, 1fr): stĺpec karty nesmie rásť podľa najdlhšieho slova (e-mail) — inak sa karta oreže v posúvanej tabuľke. */
    .table-stack tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
    .table-stack td { overflow-wrap: anywhere; }
    .table-stack tr:last-child { border-bottom: 0; }
    .table-stack td, .table-stack td:first-child, .table-stack td:last-child { padding: 0; border: 0; }
    /* Popisok v ľavom stĺpci pevnej šírky, hodnota vedľa neho ako bežný blok: dlhá hodnota (kategória, e-mail) sa zalomí
       vo svojom stĺpci a druhý riadok začína pod prvým — nie pod popiskom. Riadok popisku má výšku riadku hodnoty, aby
       sedela účiarie. */
    .table-stack td[data-label] { position: relative; min-height: calc(var(--text-sm) * var(--leading-normal)); padding-left: calc(var(--width-label) + var(--space-2)); }
    .table-stack td[data-label]::before {
        content: attr(data-label); position: absolute; left: 0; top: 0; width: var(--width-label);
        color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-regular);
        line-height: calc(var(--text-sm) * var(--leading-normal)); letter-spacing: normal; text-transform: none;
    }
    .table-stack .num { text-align: left; }
    /* Akcie riadku sú na karte pod údajmi vľavo — ako ostatný obsah karty. */
    .table-stack .row-actions { justify-content: flex-start; }
}

/* ---------- štítky ---------- */

.badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-full);
    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--chip-height); white-space: nowrap;
    color: var(--text-muted); background: var(--surface-2);
}
.badge-success { color: var(--success-text); background: var(--success-soft); border-color: var(--success-border); }
.badge-danger { color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger-border); }
.badge-warning { color: var(--warning-text); background: var(--warning-soft); border-color: var(--warning-border); }

/* Pravdepodobné priradenie: neutrálne, ale výraznejšie než bežný štítok (text, nie farba nesie význam). */
.badge-info { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
/* Odhad domény z názvu firmy — vždy viditeľný. */
.badge-accent { color: var(--accent-soft-text); background: var(--accent-soft); border-color: var(--accent); }

/* Log: riadok zmeny (audit) medzi technickými záznamami */
.badge-audit { color: var(--accent-soft-text); background: var(--accent-soft); border-color: var(--accent-soft); }

/* ---------- správy ---------- */

.alert {
    display: flex; gap: var(--space-3); align-items: flex-start;
    margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    background: var(--surface); font-size: var(--text-sm);
}
.alert .icon { margin-top: 1px; }
/* Upozornenie s vlastnou akciou (text a tlačidlo pod sebou). */
.alert > div { display: grid; gap: var(--space-3); justify-items: start; }
.alert p { margin: 0; }
/* Posledná správa v karte či zozname nemá spodný okraj — odstup dáva obal (inak by bol dole väčší než hore). */
.alert:last-child { margin-bottom: 0; }
.alert-success { color: var(--success-text); background: var(--success-soft); border-color: var(--success-border); }
.alert-error { color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger-border); }
.alert-info { color: var(--text); background: var(--surface-2); }
.alert-info .icon { color: var(--text-muted); }
.alert-warning { color: var(--warning-text); background: var(--warning-soft); border-color: var(--warning-border); }

/* ---------- formuláre ---------- */

.form { display: grid; gap: var(--space-6); }

.field { display: grid; gap: var(--space-2); }

.label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.label .optional { color: var(--text-subtle); font-weight: var(--weight-regular); }

.input, .select {
    width: 100%; min-height: var(--control-height); padding: 0 var(--space-3);
    border: 1px solid var(--border-strong); border-radius: var(--radius-control);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: var(--text-base);
    transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
/* Vlastná šípka (token --select-arrow podľa režimu): natívna sa lepí na okraj poľa a v každom
   prehliadači vyzerá inak. */
.select {
    appearance: none;
    padding-right: var(--space-12);
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: var(--icon-sm) var(--icon-sm);
}

/* .input má `font: inherit`, ktoré by .mono prebilo — písmo pre zoznamy a kódy sa nastavuje až tu. */
.input.mono, .textarea.mono { font-family: var(--font-mono); }
/* Pole na súbor: natívne tlačidlo prehliadača zladené s ostatnými poliami. */
.input[type="file"] { padding: var(--space-1) var(--space-3); line-height: 1.5; cursor: pointer; }
.input[type="file"]::file-selector-button {
    margin-right: var(--space-3); padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-strong); border-radius: var(--radius-control);
    background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.input[type="file"]::file-selector-button:hover { border-color: var(--text-muted); }
.input::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover { border-color: var(--text-muted); }
.input:focus, .select:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.input:disabled, .select:disabled { opacity: 0.6; cursor: not-allowed; background: var(--surface-2); }
.input[readonly] { background: var(--surface-2); }

/* Pole s jednotkou za ním (€, l/100 km). */
.input-unit { display: flex; align-items: center; gap: var(--space-2); }
.input-unit .input { flex: 1; min-width: 0; }
.input-unit-label { flex: none; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-sm); }

.textarea { min-height: var(--height-textarea); padding: var(--space-2) var(--space-3); resize: vertical; line-height: var(--leading-normal); }

.hint { color: var(--text-subtle); font-size: var(--text-sm); }
.field-error { display: flex; gap: var(--space-2); color: var(--danger-text); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field-error .icon { width: var(--icon-xs); height: var(--icon-xs); margin-top: 2px; }

.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.checkbox input { width: var(--icon-sm); height: var(--icon-sm); margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.checkbox small { display: block; color: var(--text-subtle); font-size: var(--text-sm); }

/* Polia v rade začínajú hore: chyba pod jedným poľom nesmie posunúť susedné nižšie. */
.form-row { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 40rem) {
    .form-row { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
    .form-row.form-row-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.hint-details { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.hint-details summary { cursor: pointer; font-weight: var(--weight-medium); min-height: var(--control-height); display: flex; align-items: center; }

/* Skupina polí vo formulári (dialóg Crawler): nadpis skupiny a deliaca čiara medzi skupinami. */
.fieldset { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset + .fieldset { padding-top: var(--space-6); border-top: 1px solid var(--border); }
.fieldset > legend { margin-bottom: var(--space-4); padding: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); }
.fieldset-plain { min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset-plain > legend { margin-bottom: var(--space-2); padding: 0; }

/* ---------- prázdny stav ---------- */

.empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; }
.empty > .icon { width: var(--icon-2xl); height: var(--icon-2xl); padding: var(--space-2); border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent-soft-text); }
.empty h3 { font-size: var(--text-lg); }
.empty p { max-width: var(--measure-narrow); color: var(--text-muted); font-size: var(--text-sm); }

/* ---------- drobnosti ---------- */

.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
/* Dve krátke akcie vedľa seba aj v úzkom stĺpci tabuľky — na širokej obrazovke; na tablete a notebooku s bočným
   panelom sa radšej zalomia pod seba, než by tabuľka pretiekla za okraj karty (na mobile je riadok karta). */
@media (min-width: 80rem) {
    .row-actions.is-inline { flex-wrap: nowrap; }
}

.schema-missing { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.schema-missing li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

.break-all, .wrap { overflow-wrap: anywhere; }
.text-danger { color: var(--danger-text); }

.section-gap { margin-top: var(--space-6); }

.code-block {
    margin: var(--space-2) 0 0; padding: var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    background: var(--surface-2); color: var(--text);
    font-family: var(--font-mono); font-size: var(--text-xs);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Značka chyby — človek ju opisuje, preto mono a výber jedným klikom. */
.error-code { display: inline-block; margin-top: var(--space-4); padding: var(--space-2) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: var(--text-lg); letter-spacing: var(--tracking-label); user-select: all; }

/* ---------- záložky ---------- */

/* Záložky sa zalamujú do ďalšieho riadku — vodorovné rolovanie by záložku schovalo za okraj. */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }

.tab {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--control-height); padding: 0 var(--space-3); margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--text-muted); text-decoration: none; white-space: nowrap;
    font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"], .tab[aria-current="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab .count { padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--chip-height); }
.tab .count.is-alert { background: var(--danger-soft); color: var(--danger-text); }

/* ---------- panel s filtrami ---------- */

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.toolbar .input, .toolbar .select { width: auto; min-width: var(--width-field-min); }
.toolbar .input-search-wide { flex: 1 1 var(--width-tile-min); min-width: 0; max-width: var(--width-search); }
/* Telefón: polia filtra pod sebou na celú šírku (nie rozhádzané podľa dĺžky textu), popisky Od / Do rovnako široké. */
@media (max-width: 39.99rem) {
    .toolbar > .input, .toolbar > .select, .toolbar > .toolbar-field { flex: 1 1 100%; max-width: none; }
    .toolbar-field .input { flex: 1 1 auto; min-width: 0; }
    .toolbar-label { min-width: var(--space-8); }
}

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); width: 100%; justify-content: space-between; }

/* ---------- zoznamy ---------- */

.doc-list { margin: 0; padding: 0; list-style: none; }
.doc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }
/* Riadok „obsah + akcia“ (CRON, právne texty, história verzií): obsah berie zvyšok šírky a zalamuje sa v sebe, akcia je
   vždy vpravo zarovnaná hore s nadpisom riadku — bez ohľadu na dĺžku popisu. Na telefóne je akcia pod obsahom. */
.doc-row:has(> div:first-child) { flex-wrap: nowrap; align-items: flex-start; }
.doc-row > div:first-child { flex: 1 1 auto; min-width: 0; }
.doc-row > div:first-child ~ * { flex: none; }
@media (max-width: 39.99rem) {
    .doc-row:has(> div:first-child) { flex-wrap: wrap; }
    .doc-row > div:first-child { flex-basis: 100%; }
    /* Viac akcií v riadku (rad segmentov v Zbere) sa na telefóne zalomí v šírke riadku, nevytŕča z karty. */
    .doc-row > div:first-child ~ .row-actions { flex: 1 1 100%; justify-content: flex-start; }
}
.doc-title { font-weight: var(--weight-semibold); color: var(--text); text-decoration: none; }
.doc-title:hover { text-decoration: underline; }
.doc-row .muted { margin: var(--space-1) 0 0; font-size: var(--text-sm); }

.log-message { display: block; max-width: var(--measure-wide); overflow-wrap: anywhere; }
.log-context summary { color: var(--accent-text); font-size: var(--text-sm); cursor: pointer; }
.log-context .code-block { max-width: var(--width-panel); max-height: var(--height-code); overflow: auto; }

/* Prehľad: pravý stĺpec s kartami pod sebou */
.stack-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-content: start; }
.recent-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.recent-list li { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.recent-list .recent-meta { color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); }

/* ---------- Prehľad: Čo treba spraviť ---------- */

.todo { margin-bottom: var(--space-6); }
.todo-list { margin: 0; padding: 0; list-style: none; }
.todo-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }
.todo-list .todo-item:first-child { border-top: 0; }
.todo-mark { display: grid; place-items: center; flex: none; width: var(--space-6); height: var(--space-6); color: var(--text-subtle); }
.todo-item.is-done .todo-mark { color: var(--success); }
.todo-body { flex: 1; min-width: 0; }
.todo-title { color: var(--text); font-weight: var(--weight-semibold); text-decoration: none; }
.todo-title:hover { text-decoration: underline; }
.todo-body p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.todo-item.is-done .todo-title { color: var(--text-muted); text-decoration: line-through; }

/* ---------- dialógy ----------
   Natívny <dialog class="modal">; otvára data-dialog-open="id", zatvára data-dialog-close.
   Bez JavaScriptu vedie odkaz na ?upravit=… a server dialóg vykreslí otvorený. */
.modal { width: min(var(--width-dialog), 100vw - var(--space-8)); max-height: min(90dvh, var(--height-dialog)); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.modal[open] { display: flex; flex-direction: column; }
.modal::backdrop { background: var(--backdrop); }
.modal-form { display: flex; flex-direction: column; min-height: 0; }
.modal-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: var(--text-lg); }
.modal-header .btn-icon { margin-left: auto; }
.modal-body { padding: var(--space-6); overflow-y: auto; }
.modal-body.form > * + * { margin-top: 0; }
.modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-card) var(--radius-card); }

@media (max-width: 40rem) {
    .modal { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .modal-footer { border-radius: 0; }
}

/* Potvrdenie nebezpečnej akcie (formulár s data-confirm): jeden dialóg vytvorí admin.js. Krátka otázka nepotrebuje
   celú obrazovku — aj na telefóne ostáva okno s okrajom --space-4 a tlačidlami vedľa seba. */
.modal-confirm .modal-body { display: grid; gap: var(--space-2); }
.modal-confirm h2 { margin: 0; font-size: var(--text-lg); }
.modal-confirm p { margin: 0; color: var(--text-muted); }
@media (max-width: 40rem) {
    .modal.modal-confirm { width: calc(100vw - var(--space-8)); height: fit-content; max-height: calc(100dvh - var(--space-8)); border: 1px solid var(--border); border-radius: var(--radius-card); }
    .modal-confirm .modal-body { padding: var(--space-4); }
    .modal-confirm .modal-footer { padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-card) var(--radius-card); }
    .modal-confirm .modal-footer .btn { flex: 1 1 0; }
}
/* Prehliadač bez showModal: okno v strede nad stmaveným pozadím (tieň pokryje celé okno). */
.modal-confirm.is-fallback { position: fixed; inset: 0; z-index: 100; height: fit-content; box-shadow: 0 0 0 100vmax var(--backdrop); }

/* Skok na sekciu (#ludia, #kod): nadpis nesmie skončiť pod prilepenou hornou lištou. */
.content [id] { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }

/* ---------- Databáza: okno Nová databáza a karta presunu ----------
   Širšie okno s dvoma stĺpcami (terajšia / nová databáza), rámček s údajmi inej inštalácie (nebezpečná akcia —
   farba nebezpečenstva, potvrdenie názvom) a priebeh presunu: natívny <progress>, kroky ako čipy a záznam krokov. */
.modal-wide { width: min(var(--width-panel) + var(--space-16) + var(--space-16), 100vw - var(--space-8)); }
.modal-lead { margin: 0; color: var(--text-muted); max-width: var(--measure-wide); }
.new-db-body { display: grid; gap: var(--space-6); }
.new-db-body > * + * { margin-top: 0; }
.db-compare { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .db-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.db-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-2); }
.db-side h3 { margin: 0; font-size: var(--text-base); }
.db-side .details-total { padding-top: var(--space-3); border-top: 1px solid var(--border); }
.db-side .form { gap: var(--space-4); }

.db-foreign { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--danger-border); border-radius: var(--radius-card); background: var(--danger-soft); }
.db-foreign h3 { margin: 0; font-size: var(--text-base); color: var(--danger-text); }
.db-foreign p { margin: 0; font-size: var(--text-sm); }
.db-foreign-confirm { display: grid; gap: var(--space-3); }
.db-foreign-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }

.move-progress { display: grid; gap: var(--space-3); }
.move-progress > * + * { margin-top: 0; }
.move-progress.is-error .import-progress::-webkit-progress-value { background: var(--danger-text); }
.move-progress.is-error .import-progress::-moz-progress-bar { background: var(--danger-text); }

/* Priebeh: natívny <progress> — hodnotu nastaví skript cez vlastnosť value, bez atribútu style. */
.import-progress {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: var(--space-3); border: 0; border-radius: var(--radius-full);
    background: var(--surface-2); overflow: hidden;
}
.import-progress::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--radius-full); }
.import-progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-full); transition: width var(--duration) var(--ease-out); }
.import-progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-full); }

.import-status { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

.import-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.import-steps li { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-subtle); }
.import-steps li.is-done { color: var(--success-text); border-color: var(--success-border); background: var(--success-soft); }
.import-steps li.is-current { color: var(--text); border-color: var(--accent); }
.import-steps li.is-error { color: var(--danger-text); border-color: var(--danger-border); background: var(--danger-soft); }

.import-log summary { font-size: var(--text-sm); color: var(--accent-text); cursor: pointer; }
.import-log ol { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.import-log li { display: flex; gap: var(--space-3); }
.import-log time { flex: none; color: var(--text-subtle); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.import-log li.is-error { color: var(--danger-text); }
.import-log li.is-warning { color: var(--warning-text); }
.import-log li.is-success { color: var(--success-text); }

/* ---------- prihlásenie a chybové stránky ---------- */

.auth {
    display: grid; place-items: center;
    min-height: 100vh; padding: var(--space-6) var(--space-4);
    background: var(--bg);
}

.auth-main { width: 100%; max-width: var(--width-auth); }
.auth-main.is-wide { max-width: var(--width-dialog); }

.auth-brand { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-8); font-size: var(--text-xl); }
.auth-brand .brand-mark .icon { width: var(--icon-xl); height: var(--icon-xl); }
.auth-brand-sub { padding-left: var(--space-3); border-left: 1px solid var(--border-strong); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }

.auth-card {
    padding: var(--space-8) var(--space-6);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
}
@media (min-width: 40rem) {
    .auth-card { padding: var(--space-8); }
}

.auth-card h1 { font-size: var(--text-xl); }
.auth-card .lead { margin: var(--space-3) 0 var(--space-6); color: var(--text-muted); font-size: var(--text-sm); }

.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); font-size: var(--text-sm); }
.auth-foot form { display: inline; }

.auth-note { margin-top: var(--space-4); color: var(--text-subtle); font-size: var(--text-sm); text-align: center; }
.auth-legal { margin-top: var(--space-6); font-size: var(--text-sm); text-align: center; }
.auth-legal a { color: var(--text-muted); }

/* Šesť políčok na prihlasovací kód. */
.code-inputs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); }
.code-inputs input {
    width: 100%; min-height: var(--space-16); padding: 0; text-align: center;
    border: 1px solid var(--border-strong); border-radius: var(--radius-control);
    background: var(--surface-2); color: var(--text);
    font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-medium);
}
.code-inputs input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); background: var(--surface); }
.code-inputs input:not(:placeholder-shown) { background: var(--surface); border-color: var(--text-muted); }

.input-code { font-family: var(--font-mono); font-size: var(--text-lg); letter-spacing: 0.2em; text-align: center; }

/* ---------- inštalácia ---------- */

.install-main { width: 100%; max-width: var(--width-panel); }

.steps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.steps li { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-subtle); }
.steps li[aria-current="step"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--weight-semibold); }
.steps li.is-done { color: var(--success-text); border-color: var(--success-border); background: var(--success-soft); }

.checks { list-style: none; margin: 0 0 var(--space-6); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-control); }
.checks li { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.checks li + li { border-top: 1px solid var(--border); }
.checks .icon { width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; }
.checks .ok .icon { color: var(--success); }
.checks .fail .icon { color: var(--danger); }
.checks li > span:not(.detail) { flex-shrink: 0; }
.checks .detail { margin-left: auto; min-width: 0; color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); text-align: right; }
@media (max-width: 39.99rem) {
    .checks li { flex-wrap: wrap; }
    .checks .detail { width: 100%; margin-left: calc(var(--icon-sm) + var(--space-3)); text-align: left; }
}

/* ---------- overenie v dvoch krokoch ---------- */

/* QR kód má vždy bielu plochu (--qr-bg sa v tmavom režime nemení) — čítačka potrebuje kontrast. */
.qr, .totp-qr { display: inline-block; padding: var(--space-2); border-radius: var(--radius-control); background: var(--qr-bg); line-height: 0; }
.qr svg { width: var(--size-qr); height: var(--size-qr); }
.totp-qr { width: min(100%, var(--size-qr-lg)); }
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-secret { font-family: var(--font-mono); font-size: var(--text-base); letter-spacing: var(--tracking-label); overflow-wrap: anywhere; }
.totp-inline { max-width: var(--width-tile-min); }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size-qr), 1fr)); gap: var(--space-2) var(--space-6); margin: 0; padding-left: var(--space-6); font-family: var(--font-mono); font-size: var(--text-base); }

/* ---------- firmy ---------- */

/* Filtre: kompaktný panel. Horný riadok = hľadanie, kraj, kategória, Ďalšie filtre, Zobraziť; ostatné v <details>.
   Na mobile hore len hľadanie, „Filtre (N)“ a Zobraziť — kraj a kategóriu presunie admin.js do rozbalenia. */
.filters { padding: var(--space-4) var(--space-6); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.filter-search { order: 1; flex: 1 1 100%; min-width: 0; }
.filter-primary { order: 2; flex: 1 1 100%; min-width: 0; }
.filter-more { order: 3; flex: 1 1 auto; min-width: 0; }
.filter-more[open] { flex-basis: 100%; }
.filter-submit { order: 4; }
.filter-more > summary { list-style: none; width: 100%; }
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more[open] > summary { width: auto; }
.filter-more > summary .icon { width: var(--icon-sm); height: var(--icon-sm); }
.only-wide { display: none; }
.filter-bar > .filter-primary .filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filter-grid .filter-primary { order: 0; display: grid; gap: var(--space-2); max-width: none; }
.filter-grid .filter-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
@media (min-width: 40rem) {
    .filter-search { flex: 2 1 var(--width-field-min); }
    .filter-primary { flex: 1 1 var(--width-field-min); max-width: var(--width-search); }
    .filter-more { order: 5; flex: 1 1 100%; }
    .filter-more > summary { width: auto; }
    .filter-submit { order: 3; }
    .only-wide { display: inline; }
    .only-narrow { display: none; }
}

.filter-grid { display: grid; gap: var(--space-4); align-items: start; margin-top: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--width-field-min)), 1fr)); }
.filter-grid .field { gap: var(--space-2); }
@media (min-width: 40rem) {
    .filter-grid .field-half { grid-column: span 2; }
}

/* Čipy aktívnych filtrov nad tabuľkou: celý čip je odkaz bez daného filtra. */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height-sm); max-width: 100%; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface-2); color: var(--text); font-size: var(--text-sm); text-decoration: none; }
.chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .icon { flex: none; width: var(--icon-xs); height: var(--icon-xs); color: var(--text-muted); }
.chip:hover { border-color: var(--text-muted); }
.chip:hover .icon { color: var(--text); }
.chip-clear { display: inline-flex; align-items: center; min-height: var(--control-height-sm); padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* Zoradenie v hlavičke tabuľky: odkaz vyzerá ako hlavička, podčiarknutie len pri hover. */
.table th a.th-sort { color: inherit; text-decoration: none; }
.table th a.th-sort:hover { color: var(--text); text-decoration: underline; }
.table th[aria-sort] { color: var(--text); }
.table th[aria-sort] a.th-sort::after { content: " ↑"; }

@media (min-width: 80rem) {
    .table td.company-cell { min-width: var(--width-tile-min); }
}
.company-link { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.company-link:hover { color: var(--accent-text); text-decoration: underline; }

.company-title { overflow-wrap: anywhere; }
.page-header .badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }

.plain-list { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.hint-details .plain-list { margin-top: var(--space-2); color: var(--text); }

.category-list { margin: 0; padding: 0; list-style: none; }
.category-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border); }
.category-list li:first-child { border-top: 0; }
.category-list li > div { display: grid; gap: var(--space-1); min-width: 0; }
/* Katalóg: každá skupina má vlastnú tabuľku — pevné šírky stĺpcov, aby stĺpce Kódy a Firmy ležali pod sebou vo všetkých skupinách. */
@media (min-width: 40rem) {
    .table-catalog { table-layout: fixed; }
    .table-catalog th:nth-child(1) { width: 32%; }
    .table-catalog th:nth-child(3) { width: var(--width-label); }
    .table-catalog th:nth-child(4) { width: calc(var(--width-label) + var(--space-12)); }
}
.category-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.category-add .field { flex: 1 1 var(--width-field-min); min-width: 0; }

.verify { display: grid; gap: var(--space-2); justify-items: start; padding-top: var(--space-4); border-top: 1px solid var(--border); }

.table td.change-value { max-width: var(--width-field-min); overflow-wrap: anywhere; }

/* Prehľad: stav importu registrov */
.import-list { margin: 0; padding: 0; list-style: none; }
.import-list > li { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }
.import-list > li:first-child { border-top: 0; }
.import-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.import-head .cell-main { font-weight: var(--weight-semibold); }
.import-list p { color: var(--text-muted); font-size: var(--text-sm); }

/* ---------- weby a kontakty ---------- */

/* Rýchle filtre zoznamu firiem (Má web / e-mail / telefón): prepínače ako čipy; zapnutý má jantárový podklad a značku. */
.quick-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.quick-filters .hint { flex-basis: 100%; }
.chip-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height-sm); padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
.chip-toggle .icon { width: var(--icon-xs); height: var(--icon-xs); color: var(--text-muted); }
.chip-toggle:hover { border-color: var(--text-muted); }
.chip-toggle.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-text); }
.chip-toggle.is-on .icon { color: var(--accent-soft-text); }
.chip-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Stĺpec kontaktov v zozname firiem: ikony dostupných kontaktov (text pre čítačky je sr-only). */
.contact-icons { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.contact-icons .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* Ikona je v span s bublinou (title) — bez flexu by sedela na účiarí a bola o 2–3 px vyššie než text riadku. */
.contact-icons > span { display: inline-flex; }

/* Externý odkaz na doménu webu firmy. */
.domain-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text); font-weight: var(--weight-semibold); overflow-wrap: anywhere; text-decoration: none; }
.domain-link .icon { flex: none; width: var(--icon-xs); height: var(--icon-xs); color: var(--text-muted); }
.domain-link:hover { color: var(--accent-text); text-decoration: underline; }
.domain-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-control); }

/* Dôkaz z webu: úryvok textu, kde crawler firmu našiel. */
.evidence { margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--border-strong); background: var(--surface-2); border-radius: 0 var(--radius-control) var(--radius-control) 0; color: var(--text); font-size: var(--text-sm); overflow-wrap: anywhere; }
.meta-line { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--text-subtle); font-size: var(--text-sm); }
.meta-line a { overflow-wrap: anywhere; }

/* Kontrola priradení: firma z registra vedľa webu a dôkazu, akcie pod nimi. */
.review-list { margin: 0; padding: 0; list-style: none; }
.review-item { display: grid; gap: var(--space-4); padding: var(--space-6); border-top: 1px solid var(--border); }
.review-list .review-item:first-child { border-top: 0; }
.review-item:target { background: var(--surface-2); }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.review-side { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.review-label { color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.review-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.review-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.review-actions { justify-content: space-between; }
.review-actions form { display: contents; }
/* Prečo na kontrole: čo a kde crawler na webe našiel (Matcher) — nad úryvkom dôkazu, len keď sú dôvody uložené. */
.review-why { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--warning-border); border-radius: var(--radius-control); background: var(--warning-soft); }
.review-why-title { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--warning-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.review-why-title .icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.review-why-list { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-4); color: var(--text); font-size: var(--text-sm); overflow-wrap: anywhere; }
@media (min-width: 64rem) {
    .review-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); }
}
/* Kontrola priradení: prepínač Weby / Kontakty nad obsahom (dve veľké voľby s počtom čakajúcich). */
.view-switch { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); max-width: 100%; margin-bottom: var(--space-6); padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.view-switch a {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--control-height-sm); padding: 0 var(--space-3); border-radius: var(--radius-control);
    color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap;
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.view-switch a .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.view-switch a:hover { color: var(--text); background: var(--surface-2); }
.view-switch a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.view-switch a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-soft-text); }
.view-switch .count { padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--chip-height); }
.view-switch a[aria-current="page"] .count { background: var(--surface); color: var(--accent-soft-text); }
/* Kontakt na kontrole: plná hodnota (e-mail, telefón, profil) a jej výskyt v úryvku. */
.review-contact { color: var(--text); font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.evidence-hit { padding: 0 var(--space-1); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-soft-text); font-weight: var(--weight-semibold); }
/* Detail firmy: kontakty na kontrole (pod aktuálnymi). */
.contact-why { margin: var(--space-2) 0 0; padding-left: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.contact-why li + li { margin-top: var(--space-1); }

/* Detail firmy: weby a kontakty. */
.site-list { margin: 0; padding: 0; list-style: none; }
.site-list > li { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }
.site-list > li:first-child { border-top: 0; }
.site-list > li.is-muted .domain-link { color: var(--text-muted); }
.site-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-actions form { display: contents; }
/* Pridanie webu v úzkom stĺpci: pole na celú šírku, tlačidlo pod ním (chyba pri poli tlačidlo neposunie vedľa). */
.site-add { display: grid; gap: var(--space-3); justify-items: start; }
.site-add .field { width: 100%; }

.contact-type { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.contact-type > span[title] { display: inline-flex; }
.contact-type .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--text-muted); }
.contact-value { min-width: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
/* Neaktuálny kontakt: prečiarknutý a tlmený, vysvetlenie je v štítku a v hlavičke karty. */
.is-stale .contact-value { color: var(--text-subtle); text-decoration: line-through; }

/* Zber: počty v dvoch stĺpcoch na širokej karte. */
.details-2 { display: grid; gap: var(--space-3) var(--space-8); }
@media (min-width: 40rem) {
    .details-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- registrácia a portál zákazníka ---------- */

/* Dve tlačidlá pod sebou (dočasná úvodná stránka: Prihlásiť sa / Zaregistrovať sa). */
.stack-sm { display: grid; gap: var(--space-3); }

/* Postup registrácie nad nadpisom karty (rovnaké čipy ako inštalácia). */
.register-steps { margin-bottom: var(--space-6); }

/* Firma / Súkromná osoba: dve veľké voľby vedľa seba. Prepínač je skutočný radio (klávesnica, čítačka),
   vizuálne skrytý — vidno len jeho štítok. */
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.segment { position: relative; display: grid; cursor: pointer; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment span {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--control-height); padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong); border-radius: var(--radius-control);
    background: var(--surface); color: var(--text-muted);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); text-align: center;
    transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.segment span .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.segment:hover span { border-color: var(--text-muted); color: var(--text); }
.segment input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); }
.segment input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Polia len pre firmu / len pre súkromnú osobu — prepína ich zvolený typ bez skriptu. Bez podpory :has
   ostanú viditeľné všetky (server polia firmy pri súkromnej osobe ignoruje). */
.billing-form .only-person { display: none; }
.billing-form:has(input[name="account_type"][value="person"]:checked) .only-company { display: none; }
.billing-form:has(input[name="account_type"][value="person"]:checked) .only-person { display: inline; }

/* IČO s tlačidlom vedľa; na úzkej obrazovke tlačidlo pod pole. */
.input-action { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.input-action .input { flex: 1 1 var(--width-field-min); min-width: 0; }
.input-action .btn { flex: none; }
.lookup-status { display: flex; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); }
.lookup-status.is-success { color: var(--success-text); }
.lookup-status.is-error { color: var(--danger-text); }

/* IČO, DIČ, IČ DPH: číslice rovnako široké. */
.mono-field .input { font-family: var(--font-mono); }
.fieldset > legend .optional { color: var(--text-subtle); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-regular); }

/* Jediná dlaždica (zostatok v portáli): na telefóne cez celú šírku, na širokej obrazovke nie cez celý obsah. */
.stats.is-single { grid-template-columns: minmax(0, 1fr); max-width: var(--width-dialog); }

/* Prázdny stav s dvoma akciami: vedľa seba v strede. */
.empty-actions { justify-content: center; margin-top: var(--space-2); }

/* Zostatok kontaktov v hornej lište portálu: odkaz na cenník. Nulový zostatok má jantárový podklad —
   je to jediná vec, ktorá zákazníkovi bráni v exporte. */
.balance {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--control-height); padding: 0 var(--space-4);
    border: 1px solid var(--border-strong); border-radius: var(--radius-full);
    background: var(--surface-2); color: var(--text);
    font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
}
.balance .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--text-muted); }
.balance-value { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.balance-label { color: var(--text-muted); }
.balance-held { color: var(--text-subtle); font-size: var(--text-sm); white-space: nowrap; }
.balance:hover { border-color: var(--text-muted); }
.balance:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.balance.is-empty { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); }
.balance.is-empty .icon, .balance.is-empty .balance-label { color: var(--accent-soft-text); }

/* ---------- portál: hľadanie firiem ---------- */

/* Lišta výberu na export: počet vybraných vľavo, akcie vpravo; na úzkej obrazovke pod sebou. */
.selection-bar { display: grid; gap: var(--space-3) var(--space-6); padding: var(--space-4) var(--space-6); }
.selection-bar.has-selection { border-color: var(--accent); }
.selection-info { display: grid; gap: var(--space-1); min-width: 0; }
.selection-count { font-size: var(--text-lg); }
.selection-status { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--danger-text); }
.selection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.selection-actions form { display: contents; }
.selection-foot { grid-column: 1 / -1; }
@media (min-width: 48rem) {
    .selection-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .selection-actions { justify-content: flex-end; }
}

/* Nadpis výsledkov s počtom exportovateľných pod ním; „Uložiť hľadanie“ vpravo. */
.results-title { display: grid; gap: var(--space-1); flex: 1 1 var(--width-field-min); min-width: 0; }
.results-title .hint { width: auto; }
.save-search { position: relative; }
.save-search > summary { list-style: none; }
.save-search > summary::-webkit-details-marker { display: none; }
.save-search[open] { flex-basis: 100%; }
.save-search-form { display: grid; gap: var(--space-3); justify-items: start; max-width: var(--width-dialog); margin-top: var(--space-3); }
.save-search-form .field { width: 100%; }

/* Riadok so zaškrtávacím políčkom: celé políčko 44 px (dotyk), samotný štvorček 18 px. */
.table-pick th.pick, .table-pick td.pick { width: var(--control-height); padding-right: 0; padding-left: var(--space-3); }
.pick-box { width: var(--icon-sm); height: var(--icon-sm); margin: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.pick-box:disabled { cursor: not-allowed; }
/* Vybraný riadok: jantárový podklad aj pod kurzorom (na mobile je riadok karta — podklad na celom riadku). */
.table-pick tbody tr.is-picked, .table-pick tbody tr.is-picked td, .table-pick tbody tr.is-picked:hover td { background: var(--accent-soft); }
/* Na jantárovej ploche vybraného riadku má --text-subtle v tmavom režime len 4,3 : 1 — drobný text o stupeň tmavší/svetlejší. */
.table-pick tbody tr.is-picked .subtle, .table-pick tbody tr.is-picked .contact-meta, .table-pick tbody tr.is-picked .value-none { color: var(--text-muted); }
/* Klikacia plocha políčka 44 × 44 px okolo štvorčeka. */
.pick-hit { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); margin: calc(-1 * var(--space-3)) 0; cursor: pointer; }
.pick-hit[hidden] { display: none; }
.pick-box:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.table-note { margin: 0; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border); background: var(--warning-soft); color: var(--warning-text); font-size: var(--text-sm); }
.table-note a { color: inherit; font-weight: var(--weight-semibold); }
@media (max-width: 39.99rem) {
    .table-pick tr { grid-template-columns: var(--control-height) minmax(0, 1fr); column-gap: 0; }
    .table-pick td { grid-column: 2; }
    .table-pick td.pick { grid-column: 1; grid-row: 1 / span 6; width: auto; padding: 0; }
}

/* Maskované kontakty v riadku: ikona + skrátená hodnota pod sebou. */
.contact-mini { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.contact-mini li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.contact-mini .icon { flex: none; width: var(--icon-xs); height: var(--icon-xs); color: var(--text-muted); }
.contact-mini-value { min-width: 0; overflow-wrap: anywhere; }
/* Bunka s viacerými údajmi pod sebou (sídlo + okres, kategória + SK NACE, kontakty + dátum overenia). Na mobile je to
   jeden blok vedľa popisku — dlhá hodnota sa zalomí v ňom, doplnkový údaj ostane zarovnaný s hodnotou. */
.cell-stack { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.company-name { overflow-wrap: anywhere; }
.table .cell-stack .cell-sub { font-size: var(--text-sm); }
/* Činnosť nesie úplný názov SK NACE (aj vyše 100 znakov) — zalomí sa v stĺpci rozumnej šírky a nevytlačí sídlo ani kontakty. */
.table .cell-activity { max-width: var(--measure-narrow); }
/* Štítok v úzkej bunke sa smie zalomiť (inak by na mobile pretiekol cez okraj karty). */
.cell-stack .badge { justify-self: start; max-width: 100%; white-space: normal; line-height: var(--leading-normal); }
.results-foot { display: grid; gap: var(--space-3); }

/* Dátum overenia pod kontaktmi riadku. */
.contact-meta { color: var(--text-subtle); font-size: var(--text-sm); }

/* Uložené hľadania. */
.saved-list { margin: 0; padding: 0; list-style: none; }
.saved-item { display: grid; gap: var(--space-3) var(--space-6); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
.saved-item:last-child { border-bottom: 0; }
.saved-main { display: grid; gap: var(--space-1); min-width: 0; }
.saved-name { color: var(--text); font-weight: var(--weight-semibold); text-decoration: none; overflow-wrap: anywhere; }
.saved-name:hover { color: var(--accent-text); text-decoration: underline; }
.saved-filters { margin: 0; color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.saved-side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.saved-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.saved-rename > summary { list-style: none; }
.saved-rename > summary::-webkit-details-marker { display: none; }
.saved-rename[open] { flex-basis: 100%; order: 3; }
.saved-rename-form { display: grid; gap: var(--space-3); justify-items: start; max-width: var(--width-dialog); margin-top: var(--space-3); }
.saved-rename-form .field { width: 100%; }
@media (min-width: 48rem) {
    .saved-item { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .saved-side { justify-content: flex-end; }
}

/* Export: voľba formátu (segmenty s názvom a vysvetlením pod sebou), poznámky, zoznam exportov. */
.format-options { grid-template-columns: minmax(0, 1fr); }
.format-options .segment span { display: grid; justify-content: start; justify-items: start; gap: var(--space-1); padding: var(--space-3) var(--space-4); text-align: left; }
.format-options .format-name { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.format-options .format-hint { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.format-options .segment input:checked + span .format-hint { color: var(--accent-soft-text); }
@media (min-width: 40rem) {
    .format-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.export-notes { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-6); max-width: var(--measure); color: var(--text-muted); font-size: var(--text-sm); }
.export-form .alert { margin-bottom: 0; }
.export-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.export-refresh p { margin: 0; }
.export-desc { color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* Cenník: voľba balíka (skutočný radio, vizuálne skrytý) ako karty — cena veľkým písmom, fakty pod ňou.
   Zvolený balík jantárovým okrajom a podkladom ako ostatné voľby; jedno tlačidlo platby pod nimi. */
.pack-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--width-tile-min)), 1fr)); gap: var(--space-3); }
.pack-option { position: relative; display: grid; cursor: pointer; }
.pack-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pack-option input:disabled { cursor: not-allowed; }
.pack-card {
    display: grid; align-content: start; gap: var(--space-2);
    padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface);
    transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.pack-name { font-weight: var(--weight-semibold); color: var(--text); overflow-wrap: anywhere; }
.pack-price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-heavy); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--text); }
.pack-facts { display: grid; gap: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.pack-facts strong { color: var(--text); font-weight: var(--weight-semibold); }
.pack-unit { color: var(--text-subtle); font-size: var(--text-xs); }
.pack-option:hover .pack-card { border-color: var(--text-muted); }
.pack-option input:checked + .pack-card { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pack-option input:checked + .pack-card .pack-facts, .pack-option input:checked + .pack-card .pack-unit { color: var(--accent-soft-text); }
.pack-option input:focus-visible + .pack-card { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pack-option input:disabled + .pack-card { opacity: 0.5; }
.purchase-form .alert { margin-bottom: 0; }
/* Súhlas so začatím dodania pred platbou: celá plocha je cieľ kliknutia (aspoň 44 px), zaškrtnutý jantárovo ako zvolený
   balík, chyba červeným okrajom a podkladom (význam nesie aj hláška pod poľom). Fokus kreslí plocha, nie malé políčko. */
.consent-box {
    max-width: var(--measure); min-height: var(--control-height); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface-2); color: var(--text);
    transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.consent-box:hover { border-color: var(--text-muted); }
.consent-box input:focus-visible { outline: none; }
.consent-box:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.consent-box:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.consent-box:has(input:checked) small { color: var(--accent-soft-text); }
.consent-box:has(input[aria-invalid="true"]:not(:checked)) { border-color: var(--danger); background: var(--danger-soft); }
.consent-box:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Výsledok platby: ikona a nadpis podľa stavu (význam nesie aj text, nie len farba). */
.payment-head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); }
.payment-head h2 { margin: 0 0 var(--space-2); }
.payment-head p { margin: 0; max-width: var(--measure); color: var(--text-muted); }
.payment-icon { display: grid; place-items: center; flex: none; width: var(--control-height); height: var(--control-height); border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); }
.payment-icon .icon { width: var(--icon-md); height: var(--icon-md); }
.payment-result.is-paid .payment-icon { background: var(--success-soft); border-color: var(--success-border); color: var(--success-text); }
.payment-result.is-pending .payment-icon { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-text); }
.payment-result.is-failed .payment-icon { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-text); }
.payment-result .card-body { border-top: 1px solid var(--border); }

/* Môj účet: história balíkov zbalená pod platnými. */
.pack-history > summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); min-height: var(--control-height-sm); display: flex; align-items: center; }
.pack-history[open] > summary { margin-bottom: var(--space-2); }
.pack-history .doc-row { padding-left: 0; padding-right: 0; }

/* ---------- administrácia predaja (zákazníci, platby, faktúry, exporty, vyradenia) ---------- */

/* Viac štítkov za sebou (stav platby + TEST + príznak); na úzkej bunke sa zalomia. */
.badge-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
/* Formulár na samostatnej stránke (fakturačné údaje zákazníka) — nie cez celú šírku. */
.card-narrow { max-width: var(--width-panel); }
/* Viditeľný popis poľa v lište filtrov (Od / Do). */
.toolbar-label { color: var(--text-muted); font-size: var(--text-sm); }
.toolbar-field { display: inline-flex; align-items: center; gap: var(--space-2); }
.checkbox-inline { align-items: center; min-height: var(--control-height); }
.checkbox-inline input { margin-top: 0; }
/* História platby: čas nad udalosťou (karta je v užšom stĺpci). Význam nesie text, farba čiary len dopĺňa. */
.timeline-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.timeline-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-left: var(--space-4); border-left: 2px solid var(--border); font-size: var(--text-sm); }
.timeline-list li.is-success { border-left-color: var(--success); }
.timeline-list li.is-warning { border-left-color: var(--warning); }
.timeline-list li.is-danger { border-left-color: var(--danger); }
.timeline-time { color: var(--text-subtle); font-size: var(--text-xs); }

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

/* Štítok „Nová“ pri názve firmy v tabuľke portálu (pridaná do databázy nedávno). */
.badge-new { margin-left: var(--space-1); vertical-align: middle; }

/* ---------- právne texty (Prevádzka → Právne texty; to isté písmo textu na webe — site.css pridá rozloženie stránky) ---------- */

.legal-prose { max-width: var(--measure); line-height: var(--leading-normal); overflow-wrap: break-word; }
.legal-prose > * + * { margin-top: var(--space-4); }
.legal-prose h2 {
    margin-top: var(--space-12); font-size: var(--text-xl); font-weight: var(--weight-heavy); line-height: var(--leading-tight);
    text-wrap: balance;
}
.legal-prose > h2:first-child { margin-top: 0; }
.legal-prose h3 { margin-top: var(--space-8); font-size: var(--text-lg); font-weight: var(--weight-heavy); line-height: var(--leading-tight); }
.legal-prose h2 + *, .legal-prose h3 + * { margin-top: var(--space-3); }
.legal-prose ul, .legal-prose ol { display: grid; gap: var(--space-2); margin-bottom: 0; padding-left: var(--space-6); }
.legal-prose li::marker { color: var(--text-muted); }
.legal-prose ol > li::marker { font-variant-numeric: tabular-nums; }
.legal-prose a { color: var(--accent-text); text-underline-offset: 2px; }
.legal-prose strong { font-weight: var(--weight-semibold); }
/* Značka bez hodnoty v náhľade administrácie (na webe sa nevypíše nič). */
.legal-missing { padding: 0 var(--space-1); border-radius: var(--radius-control); background: var(--warning-soft); color: var(--warning-text); font-weight: var(--weight-medium); }

.legal-doc-main { display: grid; gap: var(--space-2); min-width: 0; }
.legal-doc-main .muted { margin: 0; }

.legal-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 80rem) {
    .legal-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.legal-textarea { min-height: var(--height-code); }
@media (min-width: 80rem) {
    .legal-textarea { height: var(--height-dialog); }
    .legal-preview { max-height: calc(var(--height-dialog) + var(--space-16)); overflow-y: auto; }
}
.legal-editor .form-actions .subtle { font-size: var(--text-sm); }

.legal-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 80rem) {
    .legal-side { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.legal-tags { display: grid; margin: 0; }
.legal-tags div { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border); }
.legal-tags div:first-child { border-top: 0; }
.legal-tags dt { font-size: var(--text-sm); }
.legal-tags dd { display: grid; gap: var(--space-1); justify-items: start; margin: 0; font-size: var(--text-sm); }
.legal-tag-value { overflow-wrap: anywhere; }
.legal-tags .subtle { font-size: var(--text-xs); }

/* Žiadosti o vyradenie (administrácia): riadok ako Kontrola priradení; Zamietnuť rozbalí povinnú poznámku pod akciami. */
.optreq-value { font-size: var(--text-base); }
.optreq-reason { white-space: pre-line; }
.optreq-actions { align-items: flex-start; justify-content: flex-start; }
.optreq-erase { display: grid; justify-items: start; gap: var(--space-1); max-width: var(--width-auth); }
.optreq-reject { display: grid; justify-items: end; gap: var(--space-3); margin-left: auto; }
.optreq-reject > summary { list-style: none; }
.optreq-reject > summary::-webkit-details-marker { display: none; }
.optreq-reject[open] { flex: 1 1 100%; justify-items: stretch; }
.optreq-reject[open] > summary { justify-self: end; }
.optreq-reject-form { gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-2); }

/* Grafy administrácie (partials/column-chart a pruhy Prehľadu) — bez knižnice. Stĺpec = položka zoznamu s vlastným SVG
   (výšky v atribútoch, CSP nepovolí style); pruh = SVG so šírkou v percentách. Farby len z dátovej palety --chart-* (tokens.css):
   is-main jantár (≥ 3 : 1 voči karte v oboch témach), is-soft tlmený krok jantáru (ostatné dni pri zvýraznenom dnešku), is-other sivá
   (porovnávací rad, napr. roboty). Medzi stĺpcami aj skladanými časťami 2 px plochy; stĺpec najviac --width-chart-bar, vrch zaoblený
   4 px, základňa rovná. Text grafu nikdy vo farbe radu. Bublina pri prejdení myšou, rovnaké čísla v tabuľke alebo v texte. */
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--text-sm); }
.chart-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-key { display: inline-block; flex: none; width: var(--space-3); height: var(--space-3); border-radius: var(--space-1) var(--space-1) 0 0; background: var(--chart-1); }
.chart-key.is-soft { background: var(--chart-1-muted); }
.chart-key.is-other { background: var(--chart-2); }

.chart { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--height-chart) auto; column-gap: var(--space-3); row-gap: var(--space-2); margin: 0; }
.chart.is-small { grid-template-rows: var(--height-chart-sm) auto; }
.chart.no-axis { grid-template-columns: minmax(0, 1fr); }
.chart-axis { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; margin-block: calc(var(--text-xs) / -2); color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Mriežka: vlasové čiary na vrchu a v polovici osi, základňa výraznejšia. */
.chart-plot {
    grid-area: 1 / 2; position: relative; display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none;
    border-bottom: 1px solid var(--chart-baseline);
    background: linear-gradient(var(--chart-grid), var(--chart-grid)) top / 100% 1px no-repeat, linear-gradient(var(--chart-grid), var(--chart-grid)) center / 100% 1px no-repeat;
}
.chart.no-axis .chart-plot, .chart.no-axis .chart-x { grid-column: 1; }
.chart-plot.is-dense { gap: 1px; }
.chart-col { position: relative; display: flex; flex: 1 1 0; justify-content: center; min-width: 0; border-radius: var(--space-1) var(--space-1) 0 0; transition: background-color var(--duration) var(--ease-out); }
.chart-col:hover { background: var(--surface-2); }
.chart-bar { display: block; width: 100%; max-width: var(--width-chart-bar); height: 100%; }
.chart-bar .is-main { fill: var(--chart-1); }
.chart-bar .is-soft { fill: var(--chart-1-muted); }
.chart-bar .is-other { fill: var(--chart-2); }
.chart-tip {
    position: absolute; bottom: calc(100% + var(--space-2)); left: 0; z-index: 2; display: none; gap: var(--space-1);
    padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-lg);
    color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; pointer-events: none;
}
.chart-col.is-end .chart-tip { right: 0; left: auto; }
.chart-col:hover .chart-tip { display: grid; }
.chart-tip strong { color: var(--text); font-size: var(--text-sm); }
.chart-tip span { display: flex; align-items: center; gap: var(--space-2); }
.chart-tip b { margin-left: auto; padding-left: var(--space-3); color: var(--text); font-family: var(--font-mono); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.chart-x { grid-area: 2 / 2; display: flex; justify-content: space-between; color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); }

.chart-table > summary { display: flex; align-items: center; min-height: var(--control-height); color: var(--accent-text); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
.chart-table > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-control); }
/* Deň v tabuľke je hlavička riadku (th scope="row") — vyzerá ako bežná bunka, nie ako hlavička stĺpca. */
.chart-table .table th[scope="row"] { color: var(--text); background: none; font-family: var(--font-sans); font-size: var(--text-sm); text-transform: none; letter-spacing: normal; }
.chart-table .table tr:last-child th { border-bottom: 0; }
/* Tabuľka v rozbalení siaha k okrajom karty ako ostatné tabuľky administrácie. */
.chart-table .table-wrap { margin: var(--space-2) calc(var(--space-6) * -1) calc(var(--space-6) * -1); border-top: 1px solid var(--border); }
.chart-table .num { white-space: nowrap; }
/* Čísla v tabuľkách Návštevnosti sa nelámu (oddeľovač tisícov je medzera); na telefóne sú top stránky a zdroje karty (table-stack). */
.traffic-list .num { white-space: nowrap; }
@media (max-width: 39.99rem) {
    .chart-table .table th, .chart-table .table td { padding-left: var(--space-2); padding-right: var(--space-2); }
    .chart-table .table th:first-child, .chart-table .table td:first-child { padding-left: var(--space-4); }
    .chart-table .table th:last-child, .chart-table .table td:last-child { padding-right: var(--space-4); }
}

/* Merač (podiel z celku) a vodorovný pruh (porovnanie skupín): SVG so šírkou obdĺžnika v percentách, výška z CSS. */
.meter, .hbar { display: block; width: 100%; height: var(--space-2); overflow: visible; }
.meter .meter-track { fill: var(--chart-track); }
.meter .is-main, .hbar .is-main { fill: var(--chart-1); }

/* ---------- Prehľad (administrácia) ----------
   Riadky kariet: hlavná karta vľavo (2 diely), doplnková vpravo (1 diel); osamelá karta v riadku má celú šírku. Na telefóne
   a tablete pod sebou. Stavový pruh hore je jeden riadok odkazov — problém nesie ikonu, text aj farbu stavu, nikdy len farbu. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.dash-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.dash .todo { margin-bottom: 0; }
/* Dva stĺpce až od 80 rem okna — pri bočnom paneli je pod tým pravý stĺpec príliš úzky na čísla a merače. */
@media (min-width: 80rem) {
    .dash-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .dash-row > :only-child { grid-column: 1 / -1; }
}
.dash-card { display: flex; flex-direction: column; min-width: 0; }
/* Karty v riadku majú rovnakú výšku; telo rastie, vedľajšie čísla a akcia ostávajú pri spodnom okraji. */
.dash-card > .dash-body { flex: 1 1 auto; }
/* Hlavičky kariet v riadku rovnako vysoké — s tlačidlom aj s legendou. */
.dash-card > .card-header { min-height: calc(var(--control-height) + var(--space-8)); }
.dash-row.is-top { align-items: start; }
.dash-body > * + * { margin-top: var(--space-6); }

.kpi { display: grid; gap: var(--space-2); min-width: 0; }
.kpi-label { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.kpi-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-heavy); line-height: var(--leading-display); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.kpi-value a { color: inherit; text-decoration: none; }
.kpi-value a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: var(--space-1); }
.kpi-value a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-control); }
.kpi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.kpi-meta strong { color: var(--text); font-weight: var(--weight-semibold); }
.kpi-chip { display: inline-flex; align-items: center; gap: var(--space-2); }
.kpi-sep { color: var(--text-subtle); }
.kpi-secondary .kpi-value { color: var(--text-muted); font-size: var(--text-xl); }
.kpi-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.kpi-split + .meter { margin-top: var(--space-4); }

.dash-sub { display: grid; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.dash-sub h3 { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }

/* Rozdelenie podľa typu: popis · pruh · počet · podiel; celý riadok je odkaz na zoznam firiem s filtrom. */
.hbars { margin: 0; padding: 0; list-style: none; display: grid; }
.hbar-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "label value share" "bar bar bar"; align-items: center; gap: var(--space-1) var(--space-3);
    min-height: var(--control-height); margin: 0 calc(var(--space-2) * -1); padding: var(--space-2); border-radius: var(--radius-control); color: var(--text); text-decoration: none;
    transition: background-color var(--duration) var(--ease-out);
}
.hbar-row:hover { background: var(--surface-2); }
.hbar-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.hbar-label { grid-area: label; font-size: var(--text-sm); }
.hbar { grid-area: bar; }
.hbar-value { grid-area: value; font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hbar-share { grid-area: share; min-width: var(--space-12); color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
@media (min-width: 40rem) {
    .hbar-row { grid-template-columns: minmax(var(--width-field-min), var(--width-chart-label)) minmax(0, 1fr) auto auto; grid-template-areas: "label bar value share"; }
}

/* Pokrytie: popis a číslo nad meračom, vysvetlivka pod ním. */
.meters { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.meter-row { display: grid; gap: var(--space-2); margin: 0 calc(var(--space-2) * -1); padding: var(--space-2); border-radius: var(--radius-control); color: var(--text); text-decoration: none; transition: background-color var(--duration) var(--ease-out); }
.meter-row:hover { background: var(--surface-2); }
.meter-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.meter-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.meter-value { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter-share { color: var(--text-subtle); font-size: var(--text-xs); }
.meter-hint { color: var(--text-subtle); font-size: var(--text-xs); }

/* Vedľajšie čísla pod kartou (balíky, exporty, zákazníci; prírastok firiem): rovnaké bunky, každá je odkaz. */
.dash-figures { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: auto 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.dash-figures li + li { border-left: 1px solid var(--border); }
/* Pred dokončením prvého úplného importu RPO namiesto prírastkov len vysvetlivka v päte karty. */
.dash-figures-note { margin: auto 0 0; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }
.dash-figures a { display: grid; gap: var(--space-1); height: 100%; padding: var(--space-4) var(--space-6); color: var(--text); text-decoration: none; transition: background-color var(--duration) var(--ease-out); }
.dash-figures a:hover { background: var(--surface-2); }
.dash-figures a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.dash-figures li:last-child a { border-radius: 0 0 var(--radius-card) 0; }
.dash-figures li:first-child a { border-radius: 0 0 0 var(--radius-card); }
.figure-value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.figure-label { color: var(--text-muted); font-size: var(--text-sm); }
@media (max-width: 39.99rem) {
    .dash-figures { grid-auto-flow: row; }
    .dash-figures li + li { border-left: 0; border-top: 1px solid var(--border); }
    .dash-figures a { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
    .dash-figures li:first-child a, .dash-figures li:last-child a { border-radius: 0; }
    .dash-figures li:last-child a { border-radius: 0 0 var(--radius-card) var(--radius-card); }
}

/* Akcia pod kartou Pokrytie: čakajúce priradenia — jantárová plocha len keď je čo robiť. */
.dash-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.dash-action strong { color: var(--text); }
.dash-action.is-pending { background: var(--accent-soft); color: var(--accent-soft-text); }
.dash-action.is-pending strong { color: var(--accent-soft-text); }
.dash-action p { flex: 1 1 var(--width-field-min); margin: 0; }
/* Dve akcie pod sebou (Kontrola priradení, neaktuálne kontakty): zaoblenie len pri poslednej. */
.dash-action + .dash-action { margin-top: 0; }
/* Zber → Segmenty: priebežná kontrola webov je samostatný blok nad radom celých segmentov. */
.web-recheck { border-bottom: 1px solid var(--border); }
.dash-action:has(+ .dash-action) { border-radius: 0; }

/* Stavový pruh: šesť odkazov v jednom riadku (na telefóne dva stĺpce). */
.health { margin-bottom: var(--space-6); }
.health-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .health-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .health-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.health-list li { min-width: 0; border-bottom: 1px solid var(--border); }
.health-item { display: flex; align-items: flex-start; gap: var(--space-3); height: 100%; min-height: var(--control-height); padding: var(--space-3) var(--space-4); color: var(--text); text-decoration: none; transition: background-color var(--duration) var(--ease-out); }
.health-item:hover { background: var(--surface-2); }
.health-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.health-icon { display: grid; place-items: center; flex: none; width: var(--icon-md); height: var(--icon-md); margin-top: 2px; border-radius: var(--radius-full); }
.health-icon .icon { width: var(--icon-xs); height: var(--icon-xs); }
.health-item.is-ok .health-icon { color: var(--success); }
.health-item.is-wait .health-icon { color: var(--text-subtle); }
.health-item.is-warn .health-icon { color: var(--warning); }
.health-item.is-bad .health-icon { color: var(--danger); }
.health-text { display: grid; gap: var(--space-1); min-width: 0; }
.health-label { color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.health-value { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.health-item.is-warn .health-value { color: var(--warning-text); }
.health-item.is-bad .health-value { color: var(--danger-text); }
.health-meta { color: var(--text-subtle); font-weight: var(--weight-regular); }
.health-foot { padding: var(--space-3) var(--space-4); color: var(--text-subtle); font-size: var(--text-xs); }

/* ---------- detail firmy: ručné úpravy, kontakty a weby, overenie v registroch ---------- */

/* Pracovný zoznam (napr. Bez kontaktu): pruh nad kartami — kde som a ako ísť ďalej. */
.worklist { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); padding: var(--space-4) var(--space-6); border: 1px solid var(--accent); border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent-soft-text); }
.worklist > div { display: grid; gap: var(--space-1); min-width: 0; }
.worklist-title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.worklist-title .icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.worklist .hint { color: var(--accent-soft-text); }

/* Podnadpis skupiny v karte (Weby, E-maily, Telefóny, Sociálne siete). */
.card-subhead { padding: var(--space-4) var(--space-6) var(--space-2); border-top: 1px solid var(--border); color: var(--text-subtle); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.card-header + .card-subhead { border-top: 0; }
.card-subhead + .site-list > li:first-child, .card-subhead + .contact-rows > li:first-child { border-top: 0; padding-top: var(--space-2); }
/* Neaktuálne kontakty v detaile firmy: vysvetlenie pod nadpisom skupiny, riadky hneď pod ním. */
.stale-hint { padding: 0 var(--space-6) var(--space-2); }
.stale-hint + .contact-rows > li:first-child { border-top: 0; padding-top: var(--space-2); }

.contact-rows, .lock-list, .registry-links { margin: 0; padding: 0; list-style: none; }
.contact-rows > li > div:first-child { display: grid; gap: var(--space-2); }
/* Kontakt má až tri akcie: v úzkej karte (pravý stĺpec detailu) by vpravo zúžili hodnotu na pár znakov — keď je zoznam
   užší ako 34 rem, akcie idú pod kontakt vľavo (rovnako ako riadok na telefóne), text tlačidla zarovnaný s obsahom. */
.contact-rows { container-type: inline-size; }
@container (max-width: 34rem) {
    .contact-rows > .doc-row:has(> div:first-child) { flex-wrap: wrap; }
    .contact-rows > .doc-row > div:first-child { flex-basis: 100%; }
    .contact-rows .row-actions { justify-content: flex-start; margin-left: calc(var(--space-3) * -1); }
}
.lock-list .cell-main { display: flex; align-items: center; gap: var(--space-2); }
.lock-list .cell-main .icon { width: var(--icon-xs); height: var(--icon-xs); flex: none; color: var(--accent-text); }
.registry-value { color: var(--text); font-weight: var(--weight-medium); }
.registry-links .doc-row:first-child { border-top: 1px solid var(--border); }
/* Na telefóne je akcia pod obsahom vľavo — text tlačidla bez rámika zarovnaný s obsahom riadku. */
@media (max-width: 39.99rem) {
    .lock-list .doc-row > form, .registry-links .doc-row > .btn-ghost, .registry-links .doc-row > form { margin-left: calc(var(--space-3) * -1); }
}

.removed-contacts { border-top: 1px solid var(--border); }
.removed-contacts > summary { display: flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-6); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
.removed-contacts > .hint { padding: 0 var(--space-6) var(--space-2); }

/* IČO na skopírovanie (overenie v registroch). */
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.copy-value { font-size: var(--text-base); font-weight: var(--weight-medium); }

/* Dialóg kontaktu: štyri druhy (na telefóne 2 × 2), nápoveda a zdroj podľa zvoleného druhu bez skriptu. */
.contact-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) {
    .contact-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.contact-form .kind-hint { display: none; }
.contact-form:has(input[name="type"][value="web"]:checked) .kind-web,
.contact-form:has(input[name="type"][value="email"]:checked) .kind-email,
.contact-form:has(input[name="type"][value="phone"]:checked) .kind-phone,
.contact-form:has(input[name="type"][value="social"]:checked) .kind-social { display: inline; }
.contact-form:has(input[name="type"][value="web"]:checked) .kind-source { display: none; }

/* Adresa: ulica široká, číslo úzke; PSČ úzke pole. */
@media (min-width: 40rem) {
    .form-row.form-row-address { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
    .field-postal .input { max-width: var(--width-field-min); }
}
.label-sub { color: var(--text-muted); font-weight: var(--weight-medium); }
/* Skupina polí v dialógu (Obec: kraj, okres, obec) — rovnaké odstupy ako medzi poliami formulára. */
.modal-body .fieldset-plain:has(.form-row) { display: grid; gap: var(--space-4); }

/* ---------- priebeh dlhých procesov (Zber → Práve beží, riadky segmentov, stránka segmentu, CRON) ----------
   Ako okno kopírovania súborov: čo sa robí, ukazovateľ (merač z dátovej palety), percento veľkým číslom, hotové, rýchlosť,
   zostávajúci čas s odpočtom a čas dokončenia. Merač je SVG so šírkou v percentách (CSP nepovolí style) — progress.js
   ho pri obnovení plynulo posunie, pri prefers-reduced-motion skočí hneď. Proces bez známeho celku má bežiaci úsek. */
.progress-list { margin: 0; padding: 0; list-style: none; }
.progress-list > .progress-item { padding: var(--space-6); border-top: 1px solid var(--border); }
.progress-list > .progress-item:first-child { border-top: 0; }
.progress-item { display: grid; gap: var(--space-3); min-width: 0; }
.progress-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.progress-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; font-weight: var(--weight-semibold); }
.progress-title a { color: var(--text); text-decoration: none; }
.progress-title a:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.progress-title a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-control); }
.progress-percent {
    font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-heavy); line-height: var(--leading-display);
    letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.progress-phase { max-width: var(--measure-wide); color: var(--text-muted); font-size: var(--text-sm); }
.progress-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); margin: 0; }
@media (min-width: 64rem) {
    .progress-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.progress-facts dt { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.progress-facts dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.progress-countdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); white-space: nowrap; }
/* Riadok úlohy CRONu: interval a odpočet do najbližšieho behu vystúpia z tlmeného textu (Interval · Najbližšie · Naposledy · stav). */
.cron-timing > strong { color: var(--text); font-weight: var(--weight-semibold); }
.progress-next, .progress-line { color: var(--text-muted); font-size: var(--text-sm); }
.progress-item.is-compact, .progress-item.is-bare { gap: var(--space-2); }
.progress-item.is-compact .progress-percent { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0; line-height: var(--leading-normal); }
.progress-item.is-compact .progress-title { font-size: var(--text-sm); }
.progress-list.is-compact { display: grid; gap: var(--space-4); }
.progress-list.is-compact > .progress-item { padding: 0; border-top: 0; }
.progress-slot:empty { display: none; }
.progress-slot { max-width: var(--width-panel); margin-top: var(--space-3); }
.progress-slot.is-detail { max-width: none; margin: 0 0 var(--space-6); }
.progress-slot.is-detail:empty { margin: 0; }
.progress-slot.is-cron { max-width: var(--width-panel); }
.meter.is-indeterminate .is-main { fill: var(--chart-1-muted); transform-box: fill-box; animation: progress-slide var(--duration-indeterminate) var(--ease-out) infinite alternate; }
@keyframes progress-slide { from { transform: translateX(0); } to { transform: translateX(233%); } }
@media (prefers-reduced-motion: reduce) {
    .meter.is-indeterminate .is-main { width: 100%; animation: none; }
}
.progress-more { display: grid; gap: var(--space-6); padding: var(--space-6); border-top: 1px solid var(--border); }
@media (min-width: 80rem) {
    .progress-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}
.progress-side { min-width: 0; }
.progress-side h3 { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.progress-side > p { margin-top: var(--space-3); font-size: var(--text-sm); }
.progress-sidelist { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.progress-sidelist li { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.progress-sidelist .progress-side-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.progress-sidelist li > .subtle { flex: none; white-space: nowrap; }
.progress-sidelist .icon { width: var(--icon-xs); height: var(--icon-xs); align-self: center; color: var(--success-text); }
/* „Čo nasleduje“: denný proces čaká na ďalší prechod — hodiny bez farby úspechu (hotové má fajku). */
.progress-sidelist.is-later .icon { color: var(--text-subtle); }
/* CRON (kompaktne): riadok „ďalší prechod …“ pod bežiacimi procesmi, oddelený ako ďalšia položka. */
.progress-later-line { margin-top: var(--space-4); }
.progress-sidelist time { flex: none; white-space: nowrap; }
.progress-sidelist a { color: var(--text); }
.progress-live { display: flex; align-items: center; gap: var(--space-2); }
.progress-live-status { font-size: var(--text-xs); white-space: nowrap; }
.progress-live-status.is-error { color: var(--warning-text); }

/* ---------- výpis činnosti v štýle terminálu (Prehľad → Čo sa deje; Zber a CRON → Výpis činnosti) ---------- */
/* Tmavý podklad v oboch témach (tokeny --terminal-*). Karta je nepriehľadná a leží nad bodkovým mrakom ako každá karta —
   mrak sa kvôli nej neposúva (dots.js ju nepočíta medzi karty hlavičky), vidno ho pod a okolo nej. */

/* Prehľad: od 80 rem okna vľavo nadpis a stav systému (3 + 3), vpravo karta na ich celú výšku; užšie pod nadpisom na celú šírku. */
.dash-top { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-6); }
.dash-top > .term { min-width: 0; margin-bottom: var(--space-6); }
@media (min-width: 80rem) {
    .dash-top.is-live { grid-template-columns: minmax(0, 1fr) var(--width-term); grid-template-areas: "head term" "main term"; }
    .dash-top.is-live > .page-header { grid-area: head; }
    .dash-top.is-live > .dash-top-main { grid-area: main; }
    .dash-top.is-live > .term { grid-area: term; display: flex; flex-direction: column; }
    .dash-top.is-live > .term > .term-screen { flex: 1 1 0; min-height: 0; overflow: hidden; }
    .dash-top.is-live .health-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Užšie okno: karta pod nadpisom na celú šírku — stačí 10 posledných riadkov (na telefóne 6, pravidlo nižšie). */
@media (max-width: 79.99rem) {
    .dash-top > .term .term-line:nth-child(n + 11) { display: none; }
}

.term { background: var(--terminal-bg); border: 1px solid var(--terminal-border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); overflow: hidden; }
.term-screen { background: var(--terminal-bg); color: var(--terminal-text); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-normal); }
.activity-panel { overflow: hidden; }
.activity-panel .term-screen { border-top: 1px solid var(--terminal-border); }

.term-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: var(--control-height); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); border-bottom: 1px solid var(--terminal-rule); }
.term-title { margin: 0; color: var(--terminal-strong); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.term-live { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--terminal-muted); }
.term-pulse { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--terminal-success); animation: term-pulse var(--duration-pulse) ease-in-out infinite; }
.term-live.is-paused .term-pulse { background: var(--terminal-warning); animation: none; }
@keyframes term-pulse { 50% { opacity: 0.35; } }
.term-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-left: auto; }
.term-btn {
    display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-height-sm); padding: 0 var(--space-2);
    border: 0; border-radius: var(--radius-control); background: transparent; color: var(--terminal-text);
    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); text-decoration: none; cursor: pointer;
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.term-btn:hover { background: var(--terminal-hover); color: var(--terminal-strong); }
.term-btn[hidden] { display: none; }
.term-btn .icon { width: var(--icon-xs); height: var(--icon-xs); }
.term-btn:focus-visible, .term-row:focus-visible, .term-lines:focus-visible { outline: 2px solid var(--terminal-focus); outline-offset: -2px; }

.term-lines { margin: 0; padding: var(--space-1) 0; list-style: none; }
/* Riadok: čas · značka úrovne · Zdroj · správa. Celý riadok je odkaz, keď má kam viesť. */
.term-row {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: var(--space-2);
    padding: var(--space-1) var(--space-4); color: inherit; text-decoration: none;
    transition: background-color var(--duration) var(--ease-out);
}
a.term-row:hover { background: var(--terminal-hover); }
.term-time { color: var(--terminal-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Značka stojí pri prvom riadku správy (výška jedného riadku textu), aj keď sa správa zalomí. */
.term-level { display: inline-flex; align-items: center; align-self: start; height: calc(var(--leading-normal) * 1em); color: var(--terminal-info); }
.term-level .icon { width: var(--icon-xs); height: var(--icon-xs); }
.term-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-src { color: var(--terminal-strong); font-weight: var(--weight-medium); }
.term-sep { color: var(--terminal-muted); }
/* Úroveň nesie značka (ikona) aj text pre čítačku; farba len dopĺňa. */
.term-line.is-success .term-level { color: var(--terminal-success); }
.term-line.is-warning .term-level, .term-line.is-warning .term-msg { color: var(--terminal-warning); }
.term-line.is-error .term-level, .term-line.is-error .term-msg { color: var(--terminal-error); }
/* Príchod nového riadku: krátke jantárové podsvietenie, ktoré vybledne (pri obmedzenom pohybe nič). */
.term-line.is-new > .term-row { animation: term-arrive var(--duration-arrive) var(--ease-out); }
@keyframes term-arrive { from { background-color: var(--terminal-new); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
    .term-pulse, .term-line.is-new > .term-row { animation: none; }
}
.term-empty { margin: 0; padding: var(--space-4); color: var(--terminal-muted); font-family: var(--font-sans); font-size: var(--text-sm); }
.term-empty[hidden] { display: none; }

/* Zber a CRON: väčší výpis — dlhé riadky sa zalamujú, výpis sa posúva vnútri. */
.term-lines.is-wrap .term-text { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.term-screen-panel .term-lines { max-height: var(--height-term-panel); overflow-y: auto; scrollbar-color: var(--terminal-rule) var(--terminal-bg); }
.term-screen-panel { font-size: var(--text-sm); }
/* Telefón: na jeden riadok sa správa nezmestí — zalomí sa pod zdroj; na Prehľade len 6 najnovších (celý výpis je v Zbere). */
@media (max-width: 39.99rem) {
    .term-text { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
    .term:not(.activity-panel) .term-line:nth-child(n + 7) { display: none; }
}
.progress-head.is-plain { align-items: baseline; }
.progress-head.is-plain .progress-percent { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0; line-height: var(--leading-normal); }

/* CRON: stav (beží / neozval sa) vpravo hore v hlavičke namiesto vlastnej karty; na úzkej obrazovke pod nadpisom. */
.page-header .cron-status { align-self: flex-start; max-width: var(--measure); }
.cron-status .alert { margin: 0; }

/* Zber: „Podrobnosti a nástroje“ — všetko okrem Práve beží a výpisu činnosti, predvolene zbalené (<details data-remember>).
   Summary vyzerá ako hlavička karty: názov, čo je vo vnútri, štítky zlyhaných a pozastavených úloh a vpravo stav
   Zobraziť / Skryť so šípkou (stav nesie aj natívne details pre čítačku). Karty vo vnútri sú bežné karty pod ním. */
.tools-panel > summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
    min-height: var(--control-height); padding: var(--space-4) var(--space-6);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
    list-style: none; cursor: pointer;
    transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.tools-panel > summary::-webkit-details-marker { display: none; }
.tools-panel > summary:hover { background: var(--surface-2); border-color: var(--border-strong); }
.tools-panel > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tools-summary-text { display: grid; gap: var(--space-1); flex: 1 1 var(--width-field-min); min-width: 0; }
.tools-summary-title { color: var(--text); font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.tools-summary-hint { color: var(--text-muted); font-size: var(--text-sm); }
.tools-summary-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tools-summary-state { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; color: var(--accent-text); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.tools-summary-state .icon { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--duration-panel) var(--ease-out); }
.tools-panel[open] .tools-summary-state .icon { transform: rotate(180deg); }
.tools-panel:not([open]) .tools-when-open, .tools-panel[open] .tools-when-closed { display: none; }
.tools-body { margin-top: var(--space-6); }