/*
  Vzhľad wrapper vrstvy Gate.Ui. Používajú sa Fluent design tokeny (--neutral-*, --accent-*),
  takže komponenty ladia s FluentUI aj po zmene témy. Farba nikdy nie je jediným nositeľom
  informácie (WCAG 2.1 AA / EN 301 549) — stav vždy nesie aj text.
*/

/* ── farebná schéma ──────────────────────────────────────────────────────── */

/*
  Aplikácia sleduje SYSTÉMOVÚ schému používateľa (Ui/GateTheme.razor → FluentDesignTheme
  s režimom System). Neutrálne a akcentové tokeny prepne web komponent FluentUI sám, takže
  všetko, čo je postavené na nich, sa prekreslí bez nášho zásahu.

  Sem patrí len to, čo sa z tokenov odvodiť nedá — sémantické farby stavov. Ich svetlé znenia
  majú na tmavom podklade kontrast hlboko pod hranicou AA (#b10e1c na #272727 je 2,6 : 1),
  preto majú v tmavej schéme vlastné hodnoty. Riadiaci signál je jeden a ten istý, aký číta
  FluentDesignTheme: `prefers-color-scheme`. Vlastný prepínač témy zámerne nie je — inak by
  vznikol stav v prehliadači, ktorý sa môže rozísť so systémom aj s touto CSS vetvou.
*/
:root {
    /*
      Natívne prvky (<select>, <input type="date">, posuvníky, zaostrenie) kreslí prehliadač
      podľa `color-scheme`. Bez tohto riadku by v tmavej schéme ostali biele — svetlé okno
      uprostred tmavej stránky.
    */
    color-scheme: light dark;

    /*
      ZÁKLADNÉ HODNOTY FLUENT TOKENOV. Tieňové štýly web komponentov FluentUI čítajú dizajnové
      tokeny (--accent-fill-*, --neutral-*, --design-unit…) z CSS premenných, ktoré normálne
      zapisuje ich JavaScriptový design systém. Merané v runtime tejto aplikácie (SSR + Server
      interactive): tokeny na :root NEPRIŠLI — akcentové tlačidlo sa potom kreslí priehľadné
      s tmavým textom, karta bez podkladu a scoped pravidlo balíka `fluent-card[b-…]` počíta
      padding z prázdnej premennej, teda 0.

      Tento blok je preto statický základ. Keď design systém beží, jeho hodnoty (inline štýl /
      adoptedStyleSheets) majú v kaskáde prednosť a základ sa neuplatní; keď nebeží, komponenty
      dostanú plnohodnotné Fluent hodnoty odtiaľto. Čísla zodpovedajú predvoleným hodnotám
      FAST/Fluent design systému (svetlá schéma; tmavé znenia sú vo vetve nižšie).
    */
    --design-unit: 4;
    --density: 0;
    --base-height-multiplier: 8;
    --control-corner-radius: 4;
    --layer-corner-radius: 8;
    --stroke-width: 1;
    --focus-stroke-width: 2;
    --body-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --type-ramp-base-font-size: 14px;
    --type-ramp-base-line-height: 20px;

    --accent-fill-rest: #0f6cbd;
    --accent-fill-hover: #115ea3;
    --accent-fill-active: #0f548c;
    /*
      Tieňový štýl tlačidla skladá pozadie ako viacvrstvový `background` shorthand
      (výplň v padding-box + obruba v border-box). Ak čo len jedna premenná vo vzorci
      chýba, celý shorthand je neplatný a tlačidlo je priehľadné — preto obruby musia
      byť v základe tiež.
    */
    --accent-stroke-control-rest: #0f6cbd;
    --accent-stroke-control-hover: #115ea3;
    --accent-stroke-control-active: #0f548c;
    --accent-foreground-rest: #0f6cbd;
    --accent-foreground-hover: #0f548c;
    --foreground-on-accent-rest: #ffffff;
    --foreground-on-accent-hover: #ffffff;
    --foreground-on-accent-active: #ffffff;

    --neutral-foreground-rest: #1a1a1a;
    --neutral-foreground-hint: #616161;
    --fill-color: #ffffff;
    --neutral-fill-input-rest: #ffffff;
    --neutral-fill-input-hover: #ffffff;
    --neutral-fill-rest: #f5f5f5;
    --neutral-fill-hover: #ebebeb;
    --neutral-fill-active: #e0e0e0;
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: #f5f5f5;
    --neutral-stroke-rest: #d0d0d0;
    --neutral-stroke-hover: #bdbdbd;
    --neutral-stroke-control-rest: #d0d0d0;
    --neutral-stroke-control-hover: #bdbdbd;
    --neutral-stroke-control-active: #d0d0d0;
    --neutral-stroke-input-rest: #d0d0d0;
    --neutral-stroke-input-hover: #bdbdbd;
    --neutral-stroke-divider-rest: #e8e8e8;
    --neutral-stroke-strong-rest: #757575;
    --neutral-fill-strong-rest: #757575;
    --neutral-fill-strong-hover: #616161;
    --neutral-layer-1: #fbfbfb;
    --neutral-layer-2: #f5f5f5;
    --neutral-layer-3: #f0f0f0;
    --neutral-layer-floating: #ffffff;
    --focus-stroke-outer: #000000;
    --focus-stroke-inner: #ffffff;

    /*
      Neutrálna chróma rámu. Hodnoty idú z Fluent tokenov (ktoré má odteraz garantované aj bez
      JavaScriptu — viď základ vyššie), takže sa v tmavej schéme prekreslia samy.
    */
    --gate-border: var(--neutral-stroke-divider-rest, #e8e8e8);
    --gate-border-strong: var(--neutral-stroke-rest, #d0d0d0);
    /*
      Obruba vstupného poľa. Z Fluent tokenu sa NEODVODZUJE — rovnaký dôvod ako pri `--gate-muted`
      nižšie: hodnota, ktorú v behu dodá dizajnový systém (`--neutral-stroke-rest` = #d6d6d6 vo
      svetlej a #505050 v tmavej schéme), má voči výplni poľa kontrast 1,4 : 1, teda hlboko pod
      hranicou 3 : 1 pre ovládacie prvky (WCAG 2.1 AA, 1.4.11 Non-text Contrast) — vstup je od
      okolitej karty takmer nerozoznateľný. Vlastné hodnoty držia ≥ 3,2 : 1 voči výplni vstupu
      aj voči ploche karty v oboch schémach; tmavé znenie je vo vetve nižšie.
    */
    --gate-input-border: #8a8a8a;
    /*
      Tlmený text sa NEODVODZUJE z Fluent tokenu `--neutral-foreground-hint`: skutočná hodnota
      design systému (#717171 vo svetlej schéme) má na karte (~#f3f3f3) kontrast 4,39 : 1 — pod
      AA pre bežný text (axe: color-contrast, serious). Vlastné hodnoty držia ≥ 5,4 : 1 na
      všetkých svetlých plochách; tmavé znenie je vo vetve nižšie.
    */
    --gate-muted: #616161;
    --gate-radius: 6px;
    --gate-radius-panel: 8px;

    /*
      Bočný panel je tmavý v oboch schémach — je to jediná plocha, ktorá sa neprekresľuje podľa
      systému, takže stačí jedna sada hodnôt a jedna kontrola kontrastu. Text 10,3 : 1, popis
      skupiny 6,3 : 1 a značka aktívnej položky 6,5 : 1 na `--gate-nav-bg`.
    */
    --gate-nav-bg: #1c1f24;
    --gate-nav-border: #2a2e35;
    --gate-nav-text: #c9ccd2;
    --gate-nav-label: #9aa0a8;
    --gate-nav-hover: rgba(255, 255, 255, .05);
    --gate-nav-active: rgba(255, 255, 255, .09);
    --gate-nav-marker: #5ba7f0;
    /*
      Výška hornej lišty na úzkej obrazovke. Je to token, nie číslo opísané v troch súboroch:
      lištu drží MainLayout (sticky `.sidebar`), prekryvnú navigáciu NavMenu (`.nav-scrollable`
      od spodnej hrany lišty) a odsadenie skoku na prvok app.css (`scroll-padding-top`).
      Rozídená hodnota by nechala pod lištou pás obsahu alebo dieru.
    */
    --gate-nav-bar-h: 3.5rem;

    /*
      Sémantické farby stavov. Znenia info a warning sú tmavšie než Fluent akcent: štítky stavov
      majú pod textom 8 % nádych vlastnej farby NAD kartou, ktorej výplň v reálnej svetlej téme
      nie je biela (~#f3f3f3) — svetlejšie znenia tam padali pod AA (axe nameral 4,35 : 1
      pri #0f6cbd). Tieto držia na tej istej ploche ≥ 4,9 : 1.
    */
    --gate-link: #006bb7;
    --gate-danger: #b10e1c;
    --gate-success: #0e700e;
    --gate-warning: #815200;
    --gate-info: #0d5ea6;
    /* Zvýraznený riadok registra (napr. končiaca zmluva) — plocha, nie text. */
    --gate-highlight: #fff4e5;
    --gate-diff-added: #e6ffed;
    --gate-diff-removed: #ffeef0;
}

@media (prefers-color-scheme: dark) {
    :root {
        /*
          Tmavé znenia základných Fluent tokenov (viď blok vyššie). Neutrály sú grafitové, nie
          modro-navy; kontrast overený: text 13 : 1 na vrstve 1, tlmený text 5,2 : 1, orámovanie
          vstupov 3,1 : 1 (non-text AA), text na akcentovej výplni 6,7 : 1 — biele písmo by na
          #479ef5 malo len 2,6 : 1, preto je na akcente v tmavej schéme text tmavý.
        */
        --accent-fill-rest: #479ef5;
        --accent-fill-hover: #62abf5;
        --accent-fill-active: #2886de;
        --accent-stroke-control-rest: #479ef5;
        --accent-stroke-control-hover: #62abf5;
        --accent-stroke-control-active: #2886de;
        --accent-foreground-rest: #79c0ff;
        --accent-foreground-hover: #96c6fa;
        --foreground-on-accent-rest: #0b0b0b;
        --foreground-on-accent-hover: #0b0b0b;
        --foreground-on-accent-active: #0b0b0b;

        --neutral-foreground-rest: #e6e6e6;
        --neutral-foreground-hint: #a2a4ab;
        --fill-color: #26272b;
        --neutral-fill-input-rest: #232428;
        --neutral-fill-input-hover: #2a2b30;
        --neutral-fill-rest: #333438;
        --neutral-fill-hover: #3c3d42;
        --neutral-fill-active: #45464c;
        --neutral-fill-stealth-hover: #2c2d32;
        --neutral-stroke-rest: #6b6d76;
        --neutral-stroke-hover: #7d7f88;
        --neutral-stroke-control-rest: #6b6d76;
        --neutral-stroke-control-hover: #7d7f88;
        --neutral-stroke-control-active: #6b6d76;
        --neutral-stroke-input-rest: #6b6d76;
        --neutral-stroke-input-hover: #7d7f88;
        --neutral-stroke-divider-rest: #34363c;
        --neutral-stroke-strong-rest: #a2a4ab;
        --neutral-fill-strong-rest: #a2a4ab;
        --neutral-fill-strong-hover: #b4b6bd;
        --neutral-layer-1: #1e1f23;
        --neutral-layer-2: #26272b;
        --neutral-layer-3: #2d2e33;
        --neutral-layer-floating: #2d2e33;
        --focus-stroke-outer: #ffffff;
        --focus-stroke-inner: #000000;

        /*
          Tlmený text sa v tmavej schéme NEODVODZUJE z Fluent tokenu: skutočný
          `--neutral-foreground-hint` z design systému má na tmavej karte kontrast pod AA
          (axe: color-contrast, serious — hlavičky tabuliek pri 12 px). Vlastná hodnota
          drží ≥ 5,9 : 1 na vrstve 1 aj na karte bez ohľadu na to, čo dodá design systém.
        */
        --gate-muted: #a8aab1;

        /*
          Obruba vstupu v tmavej schéme (dôvod vlastnej hodnoty viď svetlá vetva). Kontrast
          3,2 : 1 voči výplni poľa (#3d3d3d z dizajnového systému), 3,8 : 1 voči ploche karty
          a 4,6 : 1 voči statickému základu výplne (#232428), keď dizajnový systém nebeží.
        */
        --gate-input-border: #8c8c8c;

        --gate-link: #79c0ff;
        --gate-danger: #ff9b9b;
        --gate-success: #7ee787;
        --gate-warning: #f0c36d;
        --gate-info: #79c0ff;
        --gate-highlight: #4a3a17;
        --gate-diff-added: #123018;
        --gate-diff-removed: #3a1218;
    }

    /*
        Lišta so správou (FluentMessageBar) má vlastné podklady podľa zámeru a tmavý variant si
        zapína triedou `dark`. Tú pridáva podľa `GlobalState.Luminance`, čo je stav v C# — ten sa
        napĺňa až spätným volaním z JavaScriptu, takže staticky vykreslená stránka o tmavej schéme
        nevie. Text pritom ide z tokenu `--neutral-foreground-rest`, ktorý tmavý JE: vznikne biele
        písmo na podklade #f5f5f5, teda kontrast 1,13 : 1 (axe: `color-contrast`, serious).

        Tmavý variant preto zapíname tým istým signálom, akým riadime celú schému. Hodnoty sú
        doslovné znenia pravidiel `.fluent-messagebar.dark.intent-*` z balíka, aby sa vzhľad
        nerozišiel. Predradené `body` je kvôli špecificite — bez neho by pravidlo z balíka
        (načítané neskôr) vyhralo zhodu.
    */
    body .gate-message .fluent-messagebar.intent-info {
        background-color: #141414;
        border-color: #666;
    }

    body .gate-message .fluent-messagebar.intent-warning {
        background-color: #411200;
        border-color: #da3b01;
    }

    body .gate-message .fluent-messagebar.intent-error {
        background-color: #3f1011;
        border-color: #d13438;
    }

    body .gate-message .fluent-messagebar.intent-success {
        background-color: #052505;
        border-color: #107c10;
    }
}

/* ── pomôcky ─────────────────────────────────────────────────────────────── */

.gate-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.gate-stack > * + * {
    margin-top: 1rem;
}

/*
    JEDINÝ obal pre riadok poskladaný z viacerých prvkov — text + štítok, štítok + štítok,
    dátum + lehota + štítok (UAT N-0042).

    Medzeru NESMIE niesť biele miesto v markupe. Razor ho okolo riadkov s `@if`, `else` a `}`
    zahadzuje — a práve tam býva podmienený štítok — takže štítok za textom alebo za iným
    štítkom skončil nalepený BEZ MEDZERY (odmerané 0,0 px: hlavička dokumentu „Koncept|kolo 1",
    register priamych zadaní „koncept|rozpracované"; vizuálny audit 2026-08-08). Medzeru preto
    nesie `gap` obalu, ktorý na bielom mieste v markupe nezávisí, a rovnaká je vo všetkých
    zostavách — na rozdiel od medzislovnej medzery (~4 px) či ručného `margin`-u.

    `inline-flex` je zámerné: v mriežke `.gate-detail` sa položka aj tak blokifikuje na `flex`,
    v bunke tabuľky ostane obal široký len na svoj obsah a nerozťahuje stĺpec. Zvislé zarovnanie
    je na stred — rovnaká os, akú má štítok mimo obalu (`.gate-badge { vertical-align: middle }`),
    takže sa obe zostavy na obrazovke nerozídu.
*/
.gate-inline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

/*
    Doplnok popisu („vlastník: …", „len na čítanie") nesie mimo obalu vlastnú medzeru marginom,
    lebo popis poľa žiadny obal nemá. V `.gate-inline` by sa margin a `gap` sčítali (14,4 px
    proti 8 px vedľa), preto tu odsadenie preberá obal.
*/
.gate-inline .gate-field__badge {
    margin-inline-start: 0;
}

.gate-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

/*
    Odsadenie pod panelom nesie panel sám. Keby si ho ponechalo aj pole, jeho spodná hrana by
    bola o riadok vyššie než tlačidlá vedľa — `align-items: flex-end` zarovnáva vonkajšie okraje.
*/
.gate-toolbar .gate-field {
    margin-bottom: 0;
}

/*
    To isté pre áno/nie prepínač: formulárový margin-bottom by ho v paneli filtrov zdvihol
    16 px nad rad (nález testovania: register priamych zadaní — „tlačidlá nelícujú"). Jeho
    21 px riadok sa navyše centruje na výšku vstupov (32 px), aby text popisu stál na jednej
    osi s textom tlačidiel; zalomenie ponecháva miesto pre prípadnú nápovedu či chybu.
*/
.gate-toolbar .gate-checkbox,
.gate-toolbar .gate-checkgroup {
    margin-bottom: 0;
}

.gate-toolbar .gate-checkbox {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    min-height: 32px;
}

/*
    Výber v paneli filtrov si berie šírku podľa AKTUÁLNE zvolenej položky (v paneli je `width: auto`
    — viď výnimku nižšie), takže „Všetky stavy" zmenší pole na pár znakov a rad filtrov sa pri
    každom prepnutí prekreslí do inej šírky. Spodná hranica ho drží na mieste; strop naďalej rieši
    `max-width: 100%` na `.gate-select`.
*/
.gate-toolbar .gate-select {
    min-width: 10rem;
}

/*
    Riadok tlačidiel pod obsahom (uložiť/zrušiť, rozhodnutie konania). Zalamovanie je povinné —
    bez neho by sa rad tlačidiel na mobile nezmestil a roztiahol by stránku do vodorovného
    posunu (WCAG 2.1 AA, 1.4.10 Reflow).
*/
.gate-actions,
.gate-wizard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: 1rem;
}

/*
    Rad akcií o dvoch stranách: vľavo navigácia, vpravo úkony (sprievodca formulárom). Skupiny sú
    samostatné flex boxy, takže sa na úzkom výreze zalomia ako celok — tlačidlá jednej skupiny sa
    nikdy nerozdelia medzi dva riadky pred tým, než sa zalomí celá skupina. Zalomená skupina
    začína zľava: `space-between` s jediným prvkom na riadku ho posadí na začiatok.
*/
.gate-actions--split {
    justify-content: space-between;
}

.gate-actions__group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/*
    Skupina, ktorá má ostať pri pravom okraji aj keď je v rade sama. `space-between` s jediným
    prvkom ho posadí doľava — pri jednodielnom formulári (bez Späť/Ďalej) by sa úkony nad
    dokumentom presťahovali na opačnú stranu než pri viacdielnom.
*/
.gate-actions__group--end {
    margin-inline-start: auto;
}

.gate-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: baseline;
    justify-content: space-between;
}

/*
    Viac akcií v hlavičke stránky. Bez vlastného obalu by ich `justify-content: space-between`
    rozhodilo po celom riadku (nadpis vľavo, prvá akcia v strede, druhá vpravo) — hlavička má mať
    dve strany, nie tri. Jedna akcia obal nepotrebuje.
*/
.gate-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: baseline;
}

/* Samostatný blok obsahu vnútri karty (napr. návrh na zlúčenie položiek podľa CPV). */
.gate-section + .gate-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gate-border);
}

/* ── polia ───────────────────────────────────────────────────────────────── */

.gate-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 1rem;
    min-width: 12rem;
}

.gate-field__label {
    font-weight: 600;
    font-size: .875rem;
}

.gate-field__required {
    color: var(--gate-danger);
    margin-inline-start: .15rem;
}

.gate-field__badge {
    margin-inline-start: .4rem;
    font-weight: 400;
    font-size: .75rem;
    color: var(--gate-muted);
}

/* Vysvetlenie pod poľom. Odsadenie nesie medzera v `.gate-field`, preto tu žiadne nie je. */
.gate-field__help {
    margin: 0;
    font-size: .8125rem;
    color: var(--gate-muted);
}

/* To isté vysvetlenie mimo poľa — veta nad tabuľkou alebo pred tlačidlom, tá odstup potrebuje. */
.gate-help {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--gate-muted);
}

.gate-field__errors {
    font-size: .8125rem;
    color: var(--gate-danger);
}

.gate-field__errors-list {
    margin: 0;
    padding-inline-start: 1.1rem;
}

.gate-field--invalid .gate-field__label {
    color: var(--gate-danger);
}

.gate-field__readonly {
    margin: 0;
    padding: .35rem .5rem;
    border: 1px dashed var(--gate-border-strong);
    border-radius: var(--gate-radius);
    background: var(--neutral-layer-2, #fafafa);
}

.gate-field__readonly--multiline {
    white-space: pre-wrap;
}

.gate-field__readonly--number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gate-select,
.gate-date,
.gate-input {
    /*
        Bez tohto je vstup v prehliadačovom `content-box`: min-height 32 + padding 8 + obruba 2
        = SKUTOČNÝCH 42 px, zatiaľ čo Fluent komponenty (tlačidlá, textové polia) merajú 32 px
        v border-boxe. Každý rad, ktorý mieša natívny vstup s Fluent prvkom, bol preto o 10 px
        krivý — vstup prečnieval nad tlačidlo (nález testovania: register objednávok, priame
        zadania…). Border-box zjednocuje výšku všetkých ovládacích prvkov na 32 px; obsahu
        ostáva 22 px, riadok písma má 21 px, takže text sa nezmení.
    */
    box-sizing: border-box;
    min-height: 32px;
    padding: .25rem .5rem;
    border: 1px solid var(--gate-input-border);
    border-radius: var(--gate-radius);
    background: var(--neutral-fill-input-rest, #fff);
    color: inherit;
    font: inherit;
    /*
        Natívny <select> sa bez obmedzenia roztiahne na šírku svojej najdlhšej položky. Popisy
        z číselníkov a taxatívnych dôvodov bývajú celé vety, takže by na mobile roztlačili stránku
        do vodorovného posunu (WCAG 2.1 AA, 1.4.10 Reflow).
    */
    max-width: 100%;
}

.gate-select:focus-visible,
.gate-date:focus-visible,
.gate-input:focus-visible,
.gate-wizard__link:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 1px;
}

/*
    ROVNAKÝ POVRCH PRE VŠETKY VSTUPY — Fluent aj natívne.

    Tieňový štýl textového poľa FluentUI skladá plochu ako viacvrstvový `background`
    (`padding-box <výplň>, border-box <obruba>`) a tá „obruba" je GRADIENT: boky splývajú
    s výplňou (#414141 na #3d3d3d), spodok je výrazne svetlý (#9a9a9a). Natívny <select>
    alebo dátum vedľa neho má pritom ROVNAKÚ VÝPLŇ — obe rodiny čítajú
    `--neutral-fill-input-rest` — ale jednotnú tenkú obrubu. V jednom rade formulára potom
    pole so svetlou spodnou linkou pôsobí, akoby malo svetlejší podklad než jeho susedia
    (nález z testovania tmavej schémy: „Odkaz na písomné poverenie" na /admin/delegacie,
    filtre registra subjektov). Rozdiel teda nie je vo výplni, ale v obrube.

    Zjednocuje sa preto obruba a zaoblenie; výplň ostáva na spoločnom tokene, takže sa obe
    rodiny nemôžu rozísť ani po zmene témy. Vonkajšie `::part()` má v kaskáde prednosť pred
    tieňovým stromom (aj pred jeho `:host(:hover)` pravidlami), takže gradient prebije jedna
    plná farba bez `!important`. Textová oblasť má obrubu na `control` (samotné <textarea>),
    ostatné polia na obale `root` — to je stavba komponentov, nie náš výber.
*/
fluent-text-field::part(root),
fluent-search::part(root),
fluent-number-field::part(root),
fluent-text-area::part(control) {
    background: var(--neutral-fill-input-rest, #fff);
    border: 1px solid var(--gate-input-border);
    border-radius: var(--gate-radius);
}

/*
    Zástupný text. Tieňový štýl ho farbí Fluent tokenom, ktorý v behu tejto aplikácie nemusí
    prísť (viď statický základ tokenov hore) — vtedy je deklarácia neplatná a zástupný text zdedí
    farbu hodnoty, čiže prázdne pole vyzerá ako vyplnené. Vlastná hodnota to drží v oboch stavoch:
    kontrast 6,2 : 1 (svetlá) a 6,7 : 1 (tmavá) voči výplni poľa, teda nad hranicou aj pre bežný
    text — a zároveň zreteľne odlíšená od skutočnej hodnoty. Samostatné pravidlo pre natívne polia
    je zámerné: prehliadač, ktorý by za `::part()` nevedel zreťaziť ďalší pseudoprvok, by pri
    spoločnom zozname zahodil celé pravidlo.
*/
fluent-text-field::part(control)::placeholder,
fluent-search::part(control)::placeholder,
fluent-number-field::part(control)::placeholder,
fluent-text-area::part(control)::placeholder {
    color: var(--gate-muted);
    opacity: 1;
}

.gate-input::placeholder {
    color: var(--gate-muted);
    opacity: 1;
}

/*
    Zaostrenie rovnakým rámčekom ako natívne vstupy vyššie. `:focus-within` je nutné: skutočný
    <input> žije v tieňovom strome, takže hostiteľský prvok sám nikdy nie je zaostrený.
*/
fluent-text-field:focus-within,
fluent-search:focus-within,
fluent-number-field:focus-within,
fluent-text-area:focus-within {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 1px;
    border-radius: var(--gate-radius);
}

/*
    Polia FluentUI sú `inline-block` a bez šírky sa zmestia len na svoj predvolený počet znakov —
    v stĺpci formulára potom textové polia „plávajú" užšie než natívny <select> alebo dátum vedľa
    nich (nález testovania: pole Popis referencie bolo neúmerne malé). Šírku určuje stĺpec
    formulára, nie komponent; horná hranica ostáva na `.gate-form`, takže riadok nikdy neprerastie
    čitateľnú dĺžku. Priamy potomok zámerne: vnorené zostavy (napr. `.gate-number`) si šírku riadia
    samy.
*/
.gate-field__control > fluent-text-field,
.gate-field__control > fluent-text-area,
.gate-field__control > fluent-number-field,
.gate-field__control > fluent-search,
.gate-field__control > fluent-select,
.gate-field__control > fluent-combobox {
    width: 100%;
}

/*
    Web komponenty aj natívne vstupy sú inline-block a v riadkovom boxe stoja na účiarí — pod
    nimi tak v obale poľa ostáva ~4 px miesta na spodky písmen (riadok 14 px / 1.5). Pole je
    potom o tie 4 px vyššie než samotný vstup a v paneli filtrov, ktorý `align-items: flex-end`
    zarovnáva rad na spodok POLÍ, sa tlačidlo vedľa poľa prepadne presne o túto medzeru pod
    vstup (nález testovania: „tlačidlá nelícujú so vstupmi"). Spodné zvislé zarovnanie medzeru
    ruší. Deti flex zostáv (`.gate-number__input`) vertical-align ignorujú — tam je neškodné.
*/
.gate-field__control > fluent-text-field,
.gate-field__control > fluent-text-area,
.gate-field__control > fluent-number-field,
.gate-field__control > fluent-search,
.gate-field__control > fluent-select,
.gate-field__control > fluent-combobox,
.gate-field__control > .gate-input,
.gate-field__control > .gate-select,
.gate-field__control > .gate-date,
.gate-field > .gate-input,
.gate-field > .gate-select,
.gate-field > .gate-date {
    vertical-align: bottom;
}

/*
    Výšku textovej oblasti nesie atribút `rows` (Gate.Ui: `GateTextArea.Rows`). Zvislé zväčšenie
    ponechávame používateľovi, vodorovné nie — to by roztiahlo stránku do vodorovného posunu
    (WCAG 2.1 AA, 1.4.10 Reflow). Vonkajší `::part()` má v kaskáde prednosť pred tieňovým stromom.
*/
.gate-field__control > fluent-text-area::part(control) {
    width: 100%;
    resize: vertical;
}

/*
    To isté platí pre natívne prvky Gate UI (výber a dátum). Bez šírky si `<select>` berie šírku
    svojej najdlhšej položky a `<input type="date">` šírku podľa formátu prehliadača — vedľa
    stopercentného textového poľa potom pôsobia ako miniatúry. Dátum má strop: dlhší než jeho
    obsah byť nepotrebuje.
*/
.gate-field__control > .gate-select {
    width: 100%;
}

.gate-field__control > .gate-date {
    width: 100%;
    max-width: 14rem;
}

/*
    Ručne poskladané pole BEZ obalu `GateFieldShell` — `<div class="gate-field">` s popisom
    a natívnym vstupom priamo v ňom. Pravidlá vyššie mieria na `.gate-field__control`, ktorý
    vyrába len shell, takže takýto vstup ostal na predvolenej šírke prehliadača (~20 znakov):
    do „Čísla zmluvy" a „Predmetu" sa napísaný text nezmestil (UAT nálezy N-0009/N-0015).
    Šírku určuje stĺpec formulára rovnako ako pri Gate.Ui poliach; dátum si drží strop, dlhší
    než jeho vlastný obsah byť nepotrebuje.

    Správna oprava je vymeniť ručné pole za wrapper `Gate.Ui` (tam žije aj parsovanie a
    prístupnosť) — toto pravidlo je záchranná sieť pre miesta, kde ručné pole ešte ostalo.
*/
.gate-field > .gate-input,
.gate-field > .gate-select {
    width: 100%;
}

.gate-field > .gate-date {
    width: 100%;
    max-width: 14rem;
}

/*
    Filtre nad zoznamom stoja vedľa seba v riadku — tam by 100 % roztiahlo jedno pole cez celý
    panel a ostatné by zalomilo pod seba.
*/
.gate-toolbar .gate-field__control > fluent-text-field,
.gate-toolbar .gate-field__control > fluent-search,
.gate-toolbar .gate-field__control > fluent-select,
.gate-toolbar .gate-field__control > fluent-combobox,
.gate-toolbar .gate-field__control > .gate-select,
.gate-toolbar .gate-field__control > .gate-date {
    width: auto;
}

/* Tá istá výnimka pre ručne poskladané pole v paneli filtrov. */
.gate-toolbar .gate-field > .gate-input,
.gate-toolbar .gate-field > .gate-select,
.gate-toolbar .gate-field > .gate-date {
    width: auto;
}

/*
    Filter, do ktorého sa píše celá veta („Číslo alebo predmet zmluvy"). Predvolená šírka poľa
    v paneli je ~12 rem (`.gate-field`) a vstup v ňom si drží prirodzenú šírku prehliadača, takže
    sa doň nezmestil ani vlastný zástupný text — používateľ nevedel, čo sa od neho pýta.

    Zámerne NIE `--wide`: ten je obsadený a znamená čosi iné (celý riadok mriežky formulára,
    `GateFieldShell.Wide`). Vstup vypĺňa pole na 100 %, čo je výnimka z výnimky panela vyššie —
    preto je selektor o triedu dlhší, aby prebil `width: auto`.
*/
.gate-field--long {
    min-width: 17rem;
}

.gate-toolbar .gate-field--long .gate-field__control > fluent-text-field,
.gate-toolbar .gate-field--long .gate-field__control > fluent-search {
    width: 100%;
}

/*
    Výber, ktorého ponuka nesie celé názvy dokumentov („Príloha č. 13 — Súhrnná správa o zákazkách
    s nízkymi hodnotami"). Natívny <select> si berie šírku podľa NAJDLHŠEJ položky, takže jediné
    pole roztiahlo panel filtrov cez 750 px, hoci zavreté ukazuje dve slová (nález z testovania:
    „Typ dokumentu" na /ulohy). Strop je zámerne na konkrétnom poli, nie na všetkých výberoch —
    väčšina ponúk je krátka a plná šírka je pre ne správna. Zavretý text si <select> skráti sám
    a rozbalená ponuka ostáva v plnej šírke, takže sa nič nestratí.
*/
.gate-field--capped .gate-select {
    max-width: 26rem;
}

/* Skupina súvisiacich polí s vlastným popisom (napr. hradené výdavky po rozpočtových rokoch). */
.gate-fieldset {
    border: 1px solid var(--gate-border-strong);
    border-radius: var(--gate-radius);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

.gate-fieldset legend {
    font-weight: 600;
    padding-inline: .25rem;
}

/*
    Číselné pole so značkou meny. Šírku určuje stĺpec formulára — bez tohto pravidla si natívny
    <input> berie predvolenú šírku ~20 znakov a na širokouhlej obrazovke pôsobí ako miniatúra
    vedľa susedného <select> (UAT nález „polia na písanie sú príliš maličké"). Sumy sú kratšie než
    veta, preto má pole strop; `min-width: 0` drží značku meny v riadku aj v úzkom stĺpci.
*/
.gate-number {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
}

.gate-number__input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 18rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gate-number__suffix {
    font-size: .8125rem;
    color: var(--gate-muted);
}

.gate-checkbox,
.gate-checkgroup {
    margin-bottom: 1rem;
}

/*
    Prepínač a jeho popis sú JEDEN riadok s dvoma stĺpcami — nie riadkový text, do ktorého je
    štvorček vsadený. Ako blok sa dlhý popis zalomil pod samotný štvorček („Čestné vyhlásenie
    o hospodárnosti… / záujmov a o zachovaní mlčanlivosti", príloha č. 13) a druhý riadok začínal
    o 17 px vľavo od prvého, teda pod ovládacím prvkom. Skupina prepínačov (`.gate-checkgroup__item`)
    aj panel filtrov (`.gate-toolbar .gate-checkbox`) to pritom robili správne — bola to odchýlka
    jediného prvku, nie zámer (vizuálny audit 2026-08-08).

    Mriežka je na to lepšia než flex: nápoveda a chyba sú ďalšie deti obalu a patria POD popis,
    nie vedľa neho — v mriežke ich stačí poslať do druhého stĺpca. Stĺpcová medzera (.4rem) aj
    zvislé zarovnanie na stred sú prevzaté zo skupiny prepínačov, aby obe zostavy vyzerali rovnako.
*/
.gate-checkbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .25rem .4rem;
}

.gate-checkbox > .gate-field__help,
.gate-checkbox > .gate-field__errors {
    grid-column: 2;
}

.gate-checkgroup {
    border: 1px solid var(--gate-border-strong);
    border-radius: var(--gate-radius);
    padding: .5rem .75rem;
}

.gate-checkgroup__item {
    display: flex;
    gap: .4rem;
    align-items: center;
    padding: .1rem 0;
}

/*
    Prílohy poľa. Natívny `input[type=file]` si celý ovládací prvok kreslí prehliadač a jeho
    popisky sa NEDAJÚ preložiť — na slovenskej obrazovke stálo „Choose File / No file chosen"
    (nález vizuálneho auditu: prílohy k PNPZ, sekcia CRZ registra zmlúv). Vstup preto ostáva
    v strome (kvôli klávesnici, `id` a udalosti), ale schová sa technikou `.gate-visually-hidden`
    a kliká sa na jeho `<label>` v tvare tlačidla.
*/
.gate-attachments {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    /*
        Skrytý vstup je absolútne umiestnený — bez obsahovacieho bloku by sa viazal až na plochu
        stránky a odtiaľ by ju roztiahol do vodorovného posunu.
    */
    position: relative;
}

.gate-attachments__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.gate-attachments__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.gate-attachments__name {
    /* Názvy súborov nemajú medzery, na úzkej obrazovke by inak vytiekli z karty. */
    overflow-wrap: anywhere;
}

.gate-attachments__size {
    font-size: .8125rem;
    color: var(--gate-muted);
}

.gate-attachments__picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/*
    Popis v tvare vedľajšieho tlačidla (GateButton Secondary = Fluent Neutral): rovnaká výška
    32 px v border-boxe ako všetky ostatné ovládacie prvky, rovnaká výplň z Fluent tokenu.
    Obruba je zámerne VLASTNÁ (`--gate-input-border`), nie priehľadná ako u Fluent Neutral:
    výplň `--neutral-fill-rest` (#f5f5f5) má voči ploche karty (~#f3f3f3) kontrast pod 1,1 : 1,
    takže tlačidlo bez obruby na karte nevidno (WCAG 2.1 AA, 1.4.11 Non-text Contrast) — rovnaký
    dôvod, pre ktorý má vlastnú obrubu aj `.gate-input`.
*/
.gate-attachments__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 32px;
    padding: .25rem .75rem;
    border: 1px solid var(--gate-input-border);
    border-radius: var(--gate-radius);
    background: var(--neutral-fill-rest, #f5f5f5);
    color: var(--neutral-foreground-rest, #1a1a1a);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.gate-attachments__button:hover {
    background: var(--neutral-fill-hover, #ededed);
}

/*
    Zaostrenie kreslí popis, nie vstup: vstup je skrytý, takže vlastný rámček by nebolo vidieť.
    `:focus-visible` (nie `:focus`) — po kliknutí myšou sa rámček nekreslí, po klávese Tab áno.
*/
.gate-attachments__input:focus-visible + .gate-attachments__button {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 1px;
}

/*
    Uzamknutý vstup (prebieha ukladanie). Prehliadač kliknutie na popis neaktívneho vstupu
    zahodí sám — trieda len povie, že sa o tom vie.
*/
.gate-attachments__button--disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Náhrada za neprekladateľné „No file chosen" — meno vybraného súboru alebo stav prázdneho poľa. */
.gate-attachments__chosen {
    font-size: .8125rem;
    color: var(--gate-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.gate-attachments__error {
    margin: 0;
    font-size: .8125rem;
    color: var(--gate-danger);
}

.gate-money {
    border: 1px solid var(--gate-border-strong);
    border-radius: var(--gate-radius);
    padding: .5rem .75rem;
    margin-bottom: 1rem;
}

.gate-money__legend {
    font-weight: 600;
    padding-inline: .25rem;
}

.gate-money__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .5rem 1rem;
}

/* ── tabuľky ─────────────────────────────────────────────────────────────── */

/*
    Obal každej tabuľky. Registre PGR majú 6 – 10 stĺpcov a na tablete ani na mobile sa nezmestia;
    bez tohto obalu vytečú z karty von, ale stránka sa NEROZŠÍRI (rám aplikácie je flex
    s `min-width: 0`) — pravé stĺpce sa teda nedajú prečítať ani k nim doposúvať. WCAG 2.1 AA,
    1.4.10 Reflow: obsah smie mať vlastný vodorovný posun, nesmie však zmiznúť.

    V značkovaní má obal `tabindex="0"`: posúvateľná oblasť musí byť ovládateľná aj klávesnicou
    (WCAG 2.1 AA, 2.1.1 — axe: `scrollable-region-focusable`). Bez neho sa k pravým stĺpcom
    dostane len myš alebo dotyk.
*/
.gate-table-wrap {
    overflow-x: auto;
    /*
        Obal musí byť aj obsahovacím blokom: popisy pre čítačku obrazovky (.gate-visually-hidden)
        sú absolútne umiestnené a bez toho by sa viazali až na .page — z posúvateľnej oblasti by
        vyskočili a roztiahli celú stránku do vodorovného posunu.
    */
    position: relative;
}

/* Zaostrenie posúvateľnej oblasti musí byť vidieť (WCAG 2.1 AA, 2.4.7). */
.gate-table-wrap:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 2px;
}

.gate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
    /* Číslice rovnakej šírky — sumy v stĺpci sa dajú porovnať pohľadom, nie čítaním. */
    font-variant-numeric: tabular-nums;
}

/*
    Opakovateľná sekcia formulára má v bunkách vstupné polia, ktoré sa pod istú šírku nezmestia.
    Bez tohto minima ostane rám tabuľky pri 100 % a bunky z neho vytečú von — obal
    .gate-table-wrap potom nemá čo posúvať a na mobile sa roztiahne celá stránka. S ním sa tabuľka
    roztiahne na svoju prirodzenú šírku a posúva sa len vo vlastnom obale (WCAG 2.1 AA, 1.4.10).

    Minimum je `min-content`, nie `max-content`: pri `max-content` sa každý stĺpec nafúkne na svoj
    NAJŠIRŠÍ nezalomený obsah — teda na celý nadpis stĺpca v jednom riadku („Ide o čiastkovú
    objednávku z rámcovej dohody" = 483 px) a pri výbere z číselníka na najdlhšiu položku
    („Poľnohospodárske, farmárske, rybárske, lesnícke a súvisiace produkty" = 670 px). Príloha
    č. 14 tak žiadala 4 169 px na šestnásť stĺpcov, v ktorých sa reálne píšu týždne, sumy a dátumy.
    Pri `min-content` sa nadpis zalomí a šírku určujú minimá polí podľa typu údaja (nižšie) —
    údaje sa neskracujú a žiadny stĺpec nemizne.
*/
.gate-repeat .gate-table {
    min-width: min-content;
}

.gate-table caption {
    text-align: left;
    font-weight: 600;
    padding-bottom: .35rem;
}

.gate-table th,
.gate-table td {
    text-align: left;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--gate-border);
    vertical-align: top;
}

/*
    Široký register, ktorý má vecne daný počet stĺpcov (príloha č. 10 Plánu VO ich má osemnásť).
    Vodorovný posun ostáva pre úzke výrezy, ale na bežnej pracovnej ploche (1440 px) sa tabuľka
    musí zmestiť celá: odseknutý posledný stĺpec čítal používateľ ako chybu obrazovky, nie ako
    posúvateľnú oblasť — o možnosti posunúť sa nevedel (nález vizuálneho auditu).

    Šetrí sa tam, kde to nestojí zrozumiteľnosť: vodorovné odsadenie buniek (18 stĺpcov × 2 strany
    je pri .6rem takmer 350 px samotnej medzery) a veľkosť písma o stupeň nižšie. Údaje sa
    neskracujú a žiadny stĺpec nemizne — tabuľka je štruktúra prílohy, nie výber z nej.
*/
.gate-table--dense th,
.gate-table--dense td {
    padding: .4rem .3rem;
}

.gate-table--dense {
    font-size: .75rem;
}

.gate-table--dense thead th {
    font-size: .6875rem;
}

/* Prvý a posledný stĺpec držia odsadenie od okraja karty — inak text lipne na ráme. */
.gate-table--dense th:first-child,
.gate-table--dense td:first-child {
    padding-inline-start: 0;
}

.gate-table--dense th:last-child,
.gate-table--dense td:last-child {
    padding-inline-end: 0;
}

/* Hlavička stĺpca je popis, nie údaj — nesie ju veľkosť a váha písma, nie plocha. */
.gate-table thead th {
    padding-block: .4rem;
    border-bottom: 1px solid var(--gate-border-strong);
    font-size: .75rem;
    font-weight: 600;
    color: var(--gate-muted);
    vertical-align: bottom;
}

/*
    Nápoveda stĺpca pod jeho hlavičkou. Je to vysvetlenie, nie popis — preto slabšia váha písma
    a normálne zalomenie; stĺpec sa podľa nej NEROZŤAHUJE (šírku určujú minimá polí v bunkách).
*/
.gate-table__col-help {
    display: block;
    margin-top: .15rem;
    font-weight: 400;
    font-size: .6875rem;
    line-height: 1.3;
    text-wrap: pretty;
}

/*
    Vo formulárovej tabuľke sa hlavičky zarovnávajú HORE. Register má hlavičky jednoriadkové
    a dole vyzerajú lepšie (sedia na údajoch), tu ich však nápoveda stĺpca rozťahuje na niekoľko
    riadkov — najvyššia hlavička potom určuje výšku celého riadku a všetky ostatné popisy odpláva
    dolu, takže medzi nadpisom sekcie a prvým popisom stĺpca zíva prázdny pás.
*/
.gate-repeat .gate-table thead th {
    vertical-align: top;
}

/* Riadková hlavička a súčtový riadok sú naopak údaje — len zvýraznené. */
.gate-table tbody th,
.gate-table tfoot th,
.gate-table tfoot td {
    font-weight: 600;
}

.gate-table tbody tr:hover {
    background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, .035));
}

/* Číselný stĺpec. Zarovnanie musí prebiť `text-align: left` z pravidla pre bunky vyššie. */
.gate-num,
.gate-table th.gate-num,
.gate-table td.gate-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
    Stĺpec, ktorého hodnota je jeden nedeliteľný údaj — označenie predpisu („PGR-10/2025"),
    dátum, evidenčné číslo. Lomka a spojovník sú pre prehliadač miesta na zalomenie, takže sa
    taký údaj v úzkom stĺpci rozpadne na dva riadky a vyzerá ako dva údaje. Tabuľka má vlastný
    vodorovný posun (`.gate-table-wrap`), takže širší stĺpec stránku neroztiahne.
*/
.gate-nowrap,
.gate-table th.gate-nowrap,
.gate-table td.gate-nowrap {
    white-space: nowrap;
}

/*
    Zvýraznený riadok registra (napr. končiaca zmluva). Farba je len doplnok — stav nesie aj text
    v bunke stavu. Prekrytie pri prejdení myšou je nutné, inak by zvýraznenie zmizlo.
*/
.gate-row--warning,
.gate-table tbody tr.gate-row--warning:hover {
    background: var(--gate-highlight);
}

.gate-table__empty td {
    color: var(--gate-muted);
    font-style: italic;
}

.gate-table__actions {
    white-space: nowrap;
}

/*
    ── bunka formulárovej tabuľky ───────────────────────────────────────────────────────────────

    Vstupné pole má mimo tabuľky minimum 12 rem (aby v mriežke formulára nezostal stĺpik užší než
    jeho vlastný popis). V bunke je to nesprávna miera: šestnásť stĺpcov prílohy č. 14 tak žiadalo
    vyše 3 000 px a tabuľka sa posúvala aj tam, kde by sa na pracovnú plochu (1440 px) zmestila.
    Minimum sa preto určuje podľa TYPU údaja — dátum a suma majú danú dĺžku, text nie.

    Hodnoty sa neskracujú a žiadny stĺpec nemizne: minimum tabuľky (`min-content`) platí ďalej,
    takže širší obsah si miesto vypýta a zvyšok rieši vodorovný posun obalu (WCAG 2.1 AA, 1.4.10).

    Selektor je `> *`, nie `.gate-field`: prepínač a skupina prepínačov si obal poľa nekreslia
    (`.gate-checkbox` / `.gate-checkgroup`), takže by z pravidla vypadli a ich stĺpec by sa vrátil
    k šírke najdlhšieho slova v nadpise.
*/
.gate-table td.gate-cell > * {
    /* Zvislú medzeru medzi poľami nesie mriežka formulára, nie bunka — v tabuľke je to prázdny pás. */
    margin-bottom: 0;
    min-width: 0;
}

/*
    Vstup si v bunke berie celú šírku stĺpca a NESMIE si ju diktovať sám: natívny <select> aj
    <input type="date"> majú vlastnú prirodzenú šírku (najdlhšia položka číselníka, resp. maska
    dátumu), ktorou by stĺpec roztiahli späť na to, čo min-content na tabuľke práve odstránilo.
*/
.gate-table td.gate-cell .gate-select,
.gate-table td.gate-cell .gate-date,
.gate-table td.gate-cell .gate-input,
.gate-table td.gate-cell fluent-text-field,
.gate-table td.gate-cell fluent-text-area {
    width: 100%;
    min-width: 0;
}

/*
    Minimá a stropy podľa TYPU údaja. Dvojica min/max drží stĺpec v rozsahu, ktorý údaj naozaj
    potrebuje: `min-width` bráni tomu, aby sa vstup stlačil na nečitateľnú šírku, `max-width`
    orezáva prirodzenú šírku obsahu (inak by ju stĺpec prevzal aj pri min-content).
*/
.gate-table td.gate-cell--number > * {
    min-width: 6rem;
    max-width: 9rem;
}

.gate-table td.gate-cell--date > * {
    /* Natívny dátumový vstup potrebuje „dd. mm. rrrr" aj ikonu kalendára. */
    min-width: 9rem;
    max-width: 10rem;
}

/*
    Prepínač je úzky, jeho stĺpec nie: šírku tu diktuje NADPIS („Ide o čiastkovú objednávku
    z rámcovej dohody"). Bez spodnej hranice spadne stĺpec na najdlhšie slovo nadpisu a hlavička
    sa rozsype na osem riadkov, ktoré natiahnu celý hlavičkový riadok tabuľky.
*/
.gate-table td.gate-cell--bool > * {
    min-width: 7rem;
    max-width: 9rem;
}

.gate-table td.gate-cell--choice > * {
    min-width: 8.5rem;
    max-width: 12rem;
}

.gate-table td.gate-cell--text > * {
    min-width: 9rem;
    max-width: 14rem;
}

.gate-table td.gate-cell--long > * {
    min-width: 12rem;
    max-width: 18rem;
}

/*
    Chyba v bunke: kompaktný ukazovateľ namiesto vety. Vetu by musel niesť stĺpec, ktorý sa podľa
    nej roztiahne — „Pole „Stručný opis predmetu nákupu" je povinné." je širšie než ktorýkoľvek
    reálny údaj v tom stĺpci. Znenie sa preto vypisuje pod tabuľkou (.gate-repeat__errors), v bunke
    ostáva rám, `aria-invalid` na vstupe a to isté znenie v `title`.

    Farba NIE je jediný nosič informácie (WCAG 2.1 AA, 1.4.1): to isté hlási `aria-invalid`,
    `aria-describedby` a zoznam pod tabuľkou.
*/
.gate-field--compact.gate-field--invalid .gate-field__control {
    border-radius: var(--gate-radius);
    box-shadow: 0 0 0 2px var(--gate-danger);
}

/* Prepínač si chyby vykresľuje sám (mimo .gate-field__control), ukazovateľ preto patrí na vstup. */
.gate-checkbox.gate-field--compact.gate-checkbox--invalid input[type="checkbox"] {
    outline: 2px solid var(--gate-danger);
    outline-offset: 2px;
}


/*
    Chyby riadkov pod tabuľkou. Zoznam je mimo posúvateľnej oblasti, takže sa zalamuje na šírku
    stránky a na šírku stĺpca nemá žiadny vplyv.
*/
.gate-repeat__errors {
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--gate-danger);
}

.gate-repeat__errors ul {
    margin: 0;
    padding-inline-start: 1.1rem;
    list-style: none;
}

.gate-repeat__errors ul ul {
    list-style: disc;
}

.gate-repeat__errors-row {
    font-weight: 600;
}

/*
    Odkaz na stiahnutie dokumentu alebo na založenie nového (DOCX, PDF, XLSX, ZIP). Je to akcia,
    nie veta v texte, takže potrebuje kliknuteľnú plochu: holý riadok textu má výšku 18 px, čo je
    pod hranicou 24 × 24 px (WCAG 2.2 AA, 2.5.8 Target Size) a na dotykovej obrazovke sa doň
    používateľ netrafí.
*/
.gate-download {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-block: .25rem;
}

.gate-pager {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    margin-top: 1rem;
}

/*
    Listovanie je jedna dvojica tlačidiel, nie tri samostatné prvky v rade. Bez vlastného obalu
    zalamoval panel po jednotlivých prvkoch, takže na 360 px ostalo „Predošlá" v riadku s údajom
    o strane a „Ďalšia" spadla pod ne — dve tlačidlá tej istej akcie skončili v rôznych riadkoch
    a ďaleko od seba (nález z testovania na mobile: register subjektov). Obal sa zalamuje ako
    celok a text o strane sa zalomí za ním. Na 360 px má dvojica spolu ~200 px, takže sa do
    riadka zmestí; `nowrap` je poistka, aby ju neroztrhlo ani pri dlhšom preklade.
*/
.gate-pager__buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    align-items: center;
}

/* ── prehľad údajov (definičný hárok) ────────────────────────────────────── */

/*
    Dvojstĺpcový výpis „popis — hodnota" na detailoch. Prvý stĺpec má `minmax`, aby sa smel
    zmenšiť: pri `max-content` by najdlhší popis prerástol kartu a hodnoty v druhom stĺpci by
    sa odrezali (WCAG 2.1 AA, 1.4.10 Reflow).
*/
.gate-detail {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: .4rem 1.5rem;
    margin: 0;
}

.gate-detail dt {
    color: var(--gate-muted);
}

.gate-detail dd {
    margin: 0;
}

/*
    Hodnota poskladaná z viacerých prvkov (dátum + lehota + štítok) nemá vlastnú triedu —
    nesie ju spoločný obal `.gate-inline` (viď pomôcky hore). Predtým to bola samostatná
    `.gate-detail__value`, teda druhé meno pre tú istú vec: rovnaká zostava v bunke tabuľky
    alebo v hlavičke dokumentu si ju vziať nemohla a rozišli sa medzery.
*/

/* Pod 480 px sa dvojica presunie pod seba — dva stĺpce sa na displej telefónu nezmestia. */
@media (max-width: 480px) {
    .gate-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .gate-detail dt:not(:first-of-type) {
        margin-top: .5rem;
    }
}

/* ── karty, štítky, správy ───────────────────────────────────────────────── */

/*
    Karta je plochý panel: obrys namiesto tieňa. Vlastnosti sa nastavujú na hostiteľskom prvku
    <fluent-card>, kde autorský štýl prebíja predvoľby z jeho tieňového stromu (`:host`) —
    inak by si karta ponechala vlastné zaoblenie aj vyvýšenie.
*/
.gate-card {
    display: block;
    box-sizing: border-box;
    margin-bottom: 1rem;
    border: 1px solid var(--gate-border);
    border-radius: var(--gate-radius-panel);
    box-shadow: none;
    /*
        <fluent-card> si v tieňovom strome zapína `:host { content-visibility: auto; }`. Prehliadač
        vtedy obsah karty MIMO výrezu vôbec nevykreslí — karta síce drží svoju výšku, ale ostane
        prázdna. Na obrazovke sa to prejaví len na okamih pri rýchlom posune, v celostránkovom
        zábere (audit, tlač, PDF) však ostanú karty pod prehnutím prázdne natrvalo: presne tak
        vyzerali „prázdne panely" pod tabuľkou definícií (audit 2026-08-07) — nič v nich nechýbalo,
        len sa nevykreslili. Obsah karty je navyše vylúčený z hľadania v stránke (Ctrl+F).
        Autorský štýl na hostiteľskom prvku prebíja `:host`, takže stačí vrátiť predvolenú hodnotu.
    */
    content-visibility: visible;
}

/*
    Odsadenie kariet má v balíku FluentUI vlastné scoped pravidlo `fluent-card[b-…]`
    so špecificitou 0-1-1, ktoré jednoduchú triedu (0-1-0) prebije — a počíta hodnotu
    z `--design-unit`. Zdvojená trieda (0-2-0) vyhráva bez `!important` a drží odsadenie
    v našich rukách nezávisle od verzie balíka.
*/
.gate-card.gate-card {
    padding: 1rem 1.25rem;
}

.gate-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    justify-content: space-between;
}

/* Predradené `.gate-card` je kvôli špecificite — inak by vyhrala hierarchia nadpisov z app.css. */
.gate-card .gate-card__title {
    margin: 0 0 .25rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
}

.gate-card__subtitle {
    margin: 0 0 .5rem;
    color: var(--gate-muted);
    font-size: .8125rem;
}

/*
    Lišta so správou má vo FluentUI vlastnú minimálnu šírku, ktorá je na mobile širšia než
    obrazovka — pretiekla by stránku do vodorovného posunu (WCAG 2.1 AA, 1.4.10 Reflow).
*/
.gate-message > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.gate-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    border: 1px solid var(--gate-border-strong);
    /*
        Štítok je o stupeň menší než text okolo neho. Na účiarí (predvolené `baseline`) preto
        sedí opticky nízko a pod ním ostáva miesto na spodky písmen susedného riadka — rovnaká
        štrbina, akú riešia natívne vstupy vyššie. Stredová os ho zarovná s textom, vedľa
        ktorého stojí, a je to tá istá os, akú drží obal `.gate-inline` (`align-items: center`).
    */
    vertical-align: middle;
}

/*
    Podfarbenie štítku je 8 % jeho vlastnej farby na podklade karty — pri takom pomere ostáva
    text nad hranicou 4,5 : 1 v oboch schémach. Prehliadač bez `color-mix` (mimo cieľového
    Edge) štítok len nepodfarbí; obrys a farba textu nesú stav aj tak.
*/
.gate-badge--info,
.gate-badge--success,
.gate-badge--warning,
.gate-badge--danger {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.gate-badge--info {
    border-color: var(--gate-info);
    color: var(--gate-info);
}

.gate-badge--success {
    border-color: var(--gate-success);
    color: var(--gate-success);
}

.gate-badge--warning {
    border-color: var(--gate-warning);
    color: var(--gate-warning);
}

.gate-badge--danger {
    border-color: var(--gate-danger);
    color: var(--gate-danger);
}

.gate-summary {
    border-inline-start: 3px solid var(--gate-border-strong);
    border-radius: 0 var(--gate-radius) var(--gate-radius) 0;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
    background: var(--neutral-layer-2, #fafafa);
}

.gate-summary--errors {
    border-inline-start-color: var(--gate-danger);
}

.gate-summary--warnings {
    border-inline-start-color: var(--gate-warning);
}

.gate-summary__title {
    margin: 0 0 .35rem;
    font-size: .95rem;
}

.gate-busy {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-inline-end: .4rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gate-spin 1s linear infinite;
}

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

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

    /*
        Lišta so správou sa vo FluentUI prelína 1,5 sekundy a knižnica sama systémové nastavenie
        „obmedziť pohyb" nesleduje. Pre používateľa s vestibulárnou poruchou je práve prelínanie
        oznamu nepríjemné, preto ho vypíname tu. Predradené `body` a výber podľa atribútu sú kvôli
        špecificite — pravidlo z balíka je načítané neskôr a pri zhode by vyhralo.
    */
    body .gate-message .fluent-messagebar[animation] {
        animation: none;
    }
}

/* ── sprievodca ──────────────────────────────────────────────────────────── */

.gate-wizard__steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.gate-wizard__link {
    display: flex;
    gap: .4rem;
    align-items: center;
    background: none;
    border: 1px solid var(--gate-border-strong);
    border-radius: 999px;
    padding: .25rem .75rem;
    font: inherit;
    cursor: pointer;
}

.gate-wizard__step--active .gate-wizard__link {
    border-color: var(--accent-fill-rest, #0f6cbd);
    color: var(--accent-fill-rest, #0f6cbd);
    font-weight: 600;
}

.gate-wizard__link[disabled] {
    cursor: not-allowed;
    color: var(--gate-muted);
}

.gate-wizard__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--neutral-layer-3, #f0f0f0);
    font-size: .75rem;
}

.gate-wizard__done {
    font-size: .75rem;
    color: var(--gate-success);
}

.gate-wizard__panel:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
}

/* ── formulár, konanie ───────────────────────────────────────────────────── */

/*
    Stĺpec formulára. Šírka je obmedzená kvôli čitateľnosti — vstupné pole cez celú širokouhlú
    obrazovku sa ťažko skenuje a popis vľavo je od hodnoty vpravo priďaleko. Rytmus medzi poľami
    nesie `margin-bottom` na `.gate-field`, nie medzera mriežky, aby sa odsadenia nesčítavali.

    52rem bolo primalo: mriežka nižšie z nej vyskladala tri stĺpce po ~15rem, takže „Názov predmetu
    zákazky" (1024 znakov) sa zadával do políčka širokého ~220 px aj na obrazovke 1920 px
    (UAT nález „polia na písanie sú príliš maličké"). Strop drží riadok pod ~90 znakov, čo je
    stále v pásme čitateľnosti.
*/
.gate-form {
    max-width: 76rem;
}

.gate-form__part {
    margin-bottom: 1.5rem;
}

.gate-form__section {
    margin-bottom: 1.25rem;
}

.gate-form__section-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
}

.gate-form__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0 1rem;
}

/*
    Pole, ktoré potrebuje celý riadok — dlhý text (odôvodnenie, opis predmetu). V troch stĺpcoch
    z neho ostal úzky stĺpik s popisom na štyri riadky nad ním.
*/
.gate-form__fields > .gate-field--wide {
    grid-column: 1 / -1;
}

/*
    V mriežke formulára určuje šírku vstupu STĹPEC, nie samotný prvok. Dátum a číselné pole majú
    inak vlastný strop (14 rem / 18 rem), ktorý mal zabrániť tomu, aby boli dlhšie než ich obsah —
    v mriežke s ~19 rem stĺpcami z toho ale vznikli roztrhané pravé hrany: text a výber siahali po
    okraj stĺpca, dátum a suma končili o kus skôr (nález vizuálneho auditu: „Zaevidovať poverenie",
    „Potvrdenie finančného krytia"). Strop preto v mriežke neplatí — mimo nej (detaily, panely
    filtrov) ostáva v platnosti.
*/
.gate-form__fields .gate-field__control > .gate-date,
.gate-form__fields .gate-field > .gate-date {
    max-width: none;
}

.gate-form__fields .gate-number__input {
    max-width: none;
}

.gate-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gate-timeline__item {
    border-inline-start: 2px solid var(--gate-border-strong);
    padding: .35rem 0 .75rem .75rem;
}

.gate-timeline__item--reject {
    border-inline-start-color: var(--gate-danger);
}

.gate-timeline__item--approve {
    border-inline-start-color: var(--gate-success);
}

.gate-timeline__meta {
    font-size: .8125rem;
    color: var(--gate-muted);
}

.gate-timeline__trace {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .75rem;
    white-space: pre-wrap;
}

.gate-decision__reason {
    max-width: 40rem;
}

.gate-json-editor {
    width: 100%;
    min-height: 22rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .8125rem;
}

.gate-diff {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .75rem;
    white-space: pre;
    overflow-x: auto;
}

.gate-diff__added {
    background: var(--gate-diff-added);
}

.gate-diff__removed {
    background: var(--gate-diff-removed);
}