/* =========================================================================
   ProQS — TOKENY (barvy, rozměry, písmo)
   =========================================================================
   Jediný zdroj hodnot pro celý systém. Obsahuje POUZE proměnné — proto ho
   může načíst i dílenská vrstva (QR a TC22), aniž by si přitáhla desktopové
   komponenty.

   JEDINÁ VÝJIMKA je pravidlo focusu na konci souboru. Není to komponenta,
   je to chování, které má platit všude stejně, a tenhle soubor je jediný,
   který načítá opravdu všechno — desktop a mobil přes partials/header.ejs,
   dílna (qr_polozka, osobní karta, sklady TC22) i přihlašovací obrazovky
   napřímo. Kdyby stálo v proqs-tokens.css, dílna by ho neměla.

   Načítá se PŘED proqs-tokens.css, který na těchto proměnných staví.

   Vzniklo 8. 9. 2026 vyčleněním z proqs-tokens.css. Důvod: QR terminál
   potřeboval barvy, ale ne desktopová pravidla — obojí definuje .btn
   a .card, a desktopová verze by v dílně scvrkla tlačítka z celé šířky
   na inline. Hodnoty se přesunem nezměnily.

   Význam jednotlivých barev popisuje STYLE.md, kapitola 2.
   ========================================================================= */

/* =========================================================================
   TOKENY
   ========================================================================= */
:root {
  /* --- POVRCHY A POZADÍ ----------------------------------------------- */
  --bg-page:        #F5F5F3;   /* pozadí celé aplikace, oblast obsahu */
  --bg-surface:     #FFFFFF;   /* karty, sidebar, modaly, inputy */
  --bg-muted:       #F1EFE8;   /* hover, neaktivní tlačítka, progress track */
  --bg-inverse:     #1C1C1A;   /* primární tlačítka, tooltipy, badge "tmavé" */

  /* --- TEXT ----------------------------------------------------------- */
  --text-primary:   #1C1C1A;   /* hlavní text, čísla, nadpisy, KPI */
  --text-body:      #444441;   /* běžný text v kartách a tabulkách */
  --text-muted:     #7A7A75;   /* labely, sekundární info, popisky */
  --text-inverse:   #FFFFFF;   /* text na tmavém pozadí */

  /* --- ZNAČKA · zlatá Janáč ------------------------------------------- */
  --brand-gold:        #E8C547; /* logo lomítko, vzácné akcenty, KPI zlatý okraj */
  --brand-gold-soft:   #FAEEDA; /* pozadí badge "Přijatá", "Skladem" */
  --brand-gold-text:   #633806; /* text na zlatém soft pozadí */

  /* --- STAVY · semantic ----------------------------------------------- */
  /* SUCCESS — ve výrobě, hotovo, OK */
  --state-success:        #3B7A1E;
  --state-success-soft:   #EAF3DE;
  --state-success-text:   #173404;
  /* Svítivá zelená pro aktivní ikony (lupa měřicího protokolu) — tmavá
     --state-success není na malé ikoně od šedé k rozeznání */
  --state-success-bright: #2FB344;

  /* WARNING — přijatá, skladem, pozor */
  --state-warning:        #E8C547;
  --state-warning-soft:   #FAEEDA;
  --state-warning-text:   #633806;

  /* DANGER — po termínu, stornováno, chyba */
  --state-danger:         #A32D2D;
  --state-danger-soft:    #FCEBEB;
  --state-danger-text:    #501313;

  /* INFO — kontrola, neutrální upozornění */
  --state-info:           #185FA5;
  --state-info-soft:      #E6F1FB;
  --state-info-text:      #042C53;

  /* ORANGE — probíhající činnost (odlišit od zelené „hotovo" a zlaté „pauza") */
  --state-orange:         #D9640A;
  --state-orange-soft:    #FCEBDB;
  --state-orange-text:    #7A3A00;

  /* NEUTRAL — stornováno, neaktivní, archiv */
  --state-neutral:        #888780;
  --state-neutral-soft:   #F1EFE8;
  --state-neutral-text:   #444441;

  /* --- HRANY ---------------------------------------------------------- */
  --border-subtle:    rgba(0,0,0,0.06);  /* karty, sekce, jemné oddělení */
  --border-default:   rgba(0,0,0,0.08);  /* sidebar separator, sub-borders */
  --border-input:     rgba(0,0,0,0.12);  /* inputy, sekundární tlačítka */
  --border-strong:    rgba(0,0,0,0.18);  /* hover, focus stav inputu */

  /* --- ZAOBLENÍ ------------------------------------------------------- */
  --radius-sm:    4px;     /* malé tagy, indikátory */
  --radius-md:    6px;     /* tlačítka, inputy, malé prvky */
  --radius-lg:    10px;    /* karty, sekce, modaly */
  --radius-pill:  999px;   /* status badge, pill tagy */

  /* --- SPACING · 4px scale ------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* --- TYPOGRAFIE ---------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Velikosti */
  --text-display: 24px;   /* KPI čísla, hlavní pageheader */
  --text-h1:      18px;   /* název stránky */
  --text-h2:      14px;   /* nadpisy karet a sekcí */
  --text-body-sz: 13px;   /* standardní text */
  --text-small:   11px;   /* sekundární, ceny, doplňky */
  --text-overline:10px;   /* UPPERCASE labely (POLOŽKY, FINANCE) */

  /* Weight — pouze 400, 500, 600 */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  /* Line-height */
  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* --- LAYOUT --------------------------------------------------------- */
  --sidebar-width:        200px;
  --sidebar-collapsed:    52px;
  --topbar-height:        56px;

  /* --- MENU · barvy levého panelu ------------------------------------- */
  /* Výchozí hodnoty = obecné tokeny, takže bez osobního nastavení vypadá
     menu přesně jako dřív. Uživatel si je přebíjí v Nastavení → Zobrazení
     (inline <style> v header.ejs, viz utils/menuBarvy.js). Volí jen POZADÍ
     a PÍSMO, zbytek se dopočítá přes color-mix(). */
  --sidebar-bg:           var(--bg-surface);
  --sidebar-text:         var(--text-body);
  --sidebar-text-strong:  var(--text-primary);
  --sidebar-text-muted:   var(--text-muted);
  --sidebar-hover:        var(--bg-page);
  --sidebar-active-bg:    var(--bg-page);
  --sidebar-border:       var(--border-subtle);
  /* Velikost písma menu — pro hůř vidící (Nastavení → Zobrazení, 13/15/17/19 px).
     Ikony a labely sekcí se od ní odvozují přes calc(). */
  --sidebar-fs:           var(--text-body-sz);
  --content-max-width:    1400px;
  --content-padding:      20px;

  /* --- BREAKPOINTY (jedna autorita) ---------------------------------- */
  /* CSS proměnné nelze v @media — slouží jako dokumentace dohody.       */
  /* V @media queries pak používat konkrétní hodnoty s komentářem.       */
  --bp-sm:  600px;   /* mobil */
  --bp-md:  768px;   /* tablet */
  --bp-lg:  1100px;  /* desktop */
  --bp-xl:  1400px;  /* wide */

  /* --- SHADOWS (minimální, jen focus) -------------------------------- */
}

/* ══════════════════════════════════════════════════════════════════════════
   ALIASY PODLE STYLE.md — kapitola 2
   ══════════════════════════════════════════════════════════════════════════
   STYLE.md jmenuje barvy jinak, než se jmenují výše. Místo přepisování stovek
   míst tu stojí druhé jméno pro tutéž hodnotu — stejný postup, jakým vznikly
   --zd-* v detailu zakázky.

   ŽÁDNÁ hodnota se tím nemění. Kdo píše novou obrazovku, může sáhnout po obou
   jménech; zdrojem pravdy zůstává blok nahoře.

   Doplněno 8. 9. 2026 (rozhodnutí B1). Souvisí: STYLE.md kap. 2.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* --- plochy a text ------------------------------------------------- */
  --bg:          var(--bg-page);
  --panel:       var(--bg-surface);
  --panel-2:     var(--bg-muted);
  --line:        var(--border-subtle);
  --line-2:      var(--border-default);
  --ink:         var(--text-primary);
  --ink-2:       var(--text-body);
  --ink-3:       var(--text-muted);

  /* --- zlatá: čeká to na tebe ---------------------------------------- */
  --gold:        var(--brand-gold);
  --gold-tint:   var(--brand-gold-soft);
  --gold-text:   var(--brand-gold-text);
  --gold-2:      #A4851E;   /* tmavší zlatá — obrys focusu, hrana tlačítka.
                               Ztmaveno 11. 9. 2026 z #D9B22F: obrys focusu
                               mel proti bilemu poli kontrast 2,03:1, norma
                               zada 3:1. Ted 3,53:1 na bilem, 3,23:1 na plose
                               strany, 4,84:1 na tmavem tlacitku. */
  --gold-line:   #EBDCA0;   /* linka kolem zlatého podkladu */

  /* --- zelená: hotovo ------------------------------------------------ */
  --green:       var(--state-success);
  --green-tint:  var(--state-success-soft);
  --green-text:  var(--state-success-text);
  --green-line:  #CBDEBE;

  /* --- rezavá: něco selhalo ------------------------------------------ */
  --rust:        var(--state-danger);
  --rust-tint:   var(--state-danger-soft);
  --rust-text:   var(--state-danger-text);
  --rust-line:   #EBC9BC;

  /* --- modrá: identita, ne stav -------------------------------------- */
  --info:        var(--state-info);
  --info-tint:   var(--state-info-soft);
  --info-text:   var(--state-info-text);
  --info-line:   #C6DAEE;

  /* --- oranžová: právě teď běží (rozhodnuto 8. 9. 2026) -------------- */
  --orange:      var(--state-orange);
  --orange-tint: var(--state-orange-soft);
  --orange-text: var(--state-orange-text);

  /* --- fialová: zvláštní režim mimo běžný tok ------------------------ */
  --purple:      #6B3D7A;
  --purple-tint: #F3E8F5;
  --purple-text: #4A2755;

  /* --- písmo ---------------------------------------------------------- */
  --sans:        var(--font-sans);
  --mono:        var(--font-mono);

  /* --- poloměry mobilní vrstvy ---------------------------------------
     POZOR: tohle NEJSOU aliasy --radius-*. Desktop má menší zaoblení
     (--radius-lg 10px) a zůstává u něj; --r-* jsou hodnoty z mobilních
     návrhů, ze kterých STYLE.md vznikl. Dnes je nikdo nepoužívá, takže
     nic neposouvají — jsou pro obrazovky psané podle předpisu. */
  --r-lg: 16px;   /* karta, panel */
  --r-md: 11px;   /* vnořená karta, ikonové tlačítko, dlaždice */
  --r-sm: 8px;    /* drobnost */
}

/* =========================================================================
   PARTNERS — odznak typu vztahu (Odběratel / Dodavatel)
   --------------------------------------------------------------------------
   Sémantika je úmyslně oddělená od --state-* tokenů, i když hex hodnoty
   se dnes shodují. Až bude potřeba, dají se měnit nezávisle.
   Render: views/partials/_partner_odznak.ejs ← utils/partnerTypHelper.js
   ========================================================================= */
:root {
  --partner-odberatel-bg: #EAF3DE;
  --partner-odberatel-fg: #173404;
  --partner-dodavatel-bg: #E6F1FB;
  --partner-dodavatel-fg: #042C53;
}

/* =========================================================================
   LEGACY ALIASES — odstranit ve Fázi 3 po dokončení migrace všech views
   --------------------------------------------------------------------------
   Drží staré --xx-* proměnné funkční dokud se view nezmigruje.
   Po migraci konkrétního view smazat jeho prefix z této sekce.
   ========================================================================= */
:root {
  /* shopflow-light.css — používá řada views s "sf-" prefixem */
  --sf-bg:           var(--bg-page);
  --sf-card:         var(--bg-surface);
  --sf-card-soft:    #FAFAF9;
  --sf-border:       var(--border-subtle);
  --sf-border-soft:  var(--border-default);
  --sf-border-strong:var(--border-input);
  --sf-text:         var(--text-primary);
  --sf-text-soft:    var(--text-body);
  --sf-text-muted:   var(--text-muted);
  --sf-red:          var(--state-danger);
  --sf-red-bg:       var(--state-danger-soft);
  --sf-red-dark:     var(--state-danger-text);
  --sf-red-soft:     #F5B7B1;
  --sf-burgundy:     #6B1A10;
  --sf-blue:         var(--state-info);
  --sf-blue-bg:      var(--state-info-soft);
  --sf-blue-dark:    var(--state-info-text);
  --sf-green:        var(--state-success);
  --sf-green-bg:     var(--state-success-soft);
  --sf-green-dark:   var(--state-success-text);
  --sf-gold:         var(--brand-gold);
  --sf-gold-bg:      var(--brand-gold-soft);
  --sf-gold-text:    var(--brand-gold-text);
  --sf-purple:       #6B3D7A;
  --sf-purple-bg:    #F3E8F5;

  /* zakazka_detail.ejs — "zd-" prefix */
  --zd-card:         var(--bg-surface);
  --zd-border:       var(--border-subtle);
  --zd-border-soft:  var(--border-default);
  --zd-text:         var(--text-primary);
  --zd-text-soft:    var(--text-body);
  --zd-text-muted:   var(--text-muted);
  --zd-gold:         var(--brand-gold);
  --zd-gold-bg:      var(--brand-gold-soft);
  --zd-gold-text:    var(--brand-gold-text);
  --zd-green:        var(--state-success);
  --zd-green-bg:     var(--state-success-soft);
  --zd-green-bright: var(--state-success-bright);
  --zd-blue:         var(--state-info);
  --zd-blue-bg:      var(--state-info-soft);
  --zd-red:          var(--state-danger);
  --zd-red-bg:       var(--state-danger-soft);
  --zd-purple:       #6B3D7A;
  --zd-purple-bg:    #F3E8F5;

  /* dashboard.ejs — "db-" prefix */
  --db-paper:        var(--bg-page);
  --db-card:         var(--bg-surface);
  --db-border:       var(--border-subtle);
  --db-border-soft:  var(--border-default);
  --db-text:         var(--text-primary);
  --db-text-soft:    var(--text-body);
  --db-text-muted:   var(--text-muted);
  --db-gold:         var(--brand-gold);
  --db-gold-bg:      var(--brand-gold-soft);
  --db-gold-text:    var(--brand-gold-text);
  --db-green:        var(--state-success);
  --db-green-bg:     var(--state-success-soft);
  --db-green-text:   var(--state-success-text);
  --db-blue:         var(--state-info);
  --db-blue-bg:      var(--state-info-soft);
  --db-red:          var(--state-danger);
  --db-red-bg:       var(--state-danger-soft);
  --db-purple:       #6B3D7A;
  --db-purple-bg:    #F3E8F5;

  /* sklad-material.ejs — "sm-" prefix */
  --sm-card:         var(--bg-surface);
  --sm-border:       var(--border-subtle);
  --sm-border-soft:  var(--border-default);
  --sm-text:         var(--text-primary);
  --sm-text-soft:    var(--text-body);
  --sm-text-muted:   var(--text-muted);
  --sm-red:          var(--state-danger);
  --sm-red-bg:       var(--state-danger-soft);
  --sm-red-dark:     var(--state-danger-text);
  --sm-red-soft:     #F5B7B1;
  --sm-green:        var(--state-success);
  --sm-green-bg:     var(--state-success-soft);
  --sm-gold:         var(--brand-gold);
  --sm-gold-bg:      var(--brand-gold-soft);
  --sm-gold-text:    var(--brand-gold-text);

  /* materiali.ejs — "mk-" prefix */
  --mk-card:         var(--bg-surface);
  --mk-border:       var(--border-subtle);
  --mk-border-soft:  var(--border-default);
  --mk-text:         var(--text-primary);
  --mk-text-soft:    var(--text-body);
  --mk-text-muted:   var(--text-muted);
  --mk-red:          var(--state-danger);
  --mk-red-bg:       var(--state-danger-soft);
  --mk-red-dark:     var(--state-danger-text);
  --mk-red-soft:     #F5B7B1;
  --mk-burgundy:     #6B1A10;
  --mk-green:        var(--state-success);
  --mk-green-bg:     var(--state-success-soft);
  --mk-gold:         var(--brand-gold);
  --mk-gold-bg:      var(--brand-gold-soft);
  --mk-gold-text:    var(--brand-gold-text);
  --mk-blue:         var(--state-info);
  --mk-blue-bg:      var(--state-info-soft);
  --mk-purple:       #6B3D7A;
  --mk-purple-bg:    #F3E8F5;

  /* zakaznici.ejs — "zk-" prefix */
  --zk-card:         var(--bg-surface);
  --zk-border:       var(--border-subtle);
  --zk-text:         var(--text-primary);
  --zk-text-soft:    var(--text-body);
  --zk-text-muted:   var(--text-muted);
  --zk-red:          var(--state-danger);
  --zk-red-bg:       var(--state-danger-soft);
  --zk-gold:         var(--brand-gold);
  --zk-gold-bg:      var(--brand-gold-soft);
  --zk-gold-text:    var(--brand-gold-text);
  --zk-green:        var(--state-success);
  --zk-green-bg:     var(--state-success-soft);

  /* dily.ejs / dil_detail.ejs — "dl-" prefix */
  --dl-card:         var(--bg-surface);
  --dl-border:       var(--border-subtle);
  /* Doplněno 8. 9. 2026: border-soft a červená v tomhle bloku chyběly, přestože
     je sedm obrazovek používalo (dily, atesty, porovnani dilu, protokoly kvality,
     protokol_detail, meridla, ISO a revize). Neplatna var() spadne na initial,
     takze jemne linky byly neviditelne a cervene tlacitko melo bily text na
     pruhlednem pozadi. Hodnoty podle vzoru "zd-". */
  --dl-border-soft:  var(--border-default);
  --dl-text:         var(--text-primary);
  --dl-text-soft:    var(--text-body);
  --dl-text-muted:   var(--text-muted);
  --dl-gold:         var(--brand-gold);
  --dl-gold-bg:      var(--brand-gold-soft);
  --dl-gold-text:    var(--brand-gold-text);
  --dl-green:        var(--state-success);
  --dl-green-bg:     var(--state-success-soft);
  --dl-red:          var(--state-danger);
  --dl-red-bg:       var(--state-danger-soft);
  --dl-blue:         var(--state-info);
  --dl-blue-bg:      var(--state-info-soft);
  --dl-card-soft:    #FAFAF9;

  /* cenik.ejs — "cn-" prefix */
  --cn-card:         var(--bg-surface);
  --cn-border:       var(--border-subtle);
  --cn-text:         var(--text-primary);
  --cn-text-soft:    var(--text-body);
  --cn-text-muted:   var(--text-muted);
  --cn-gold:         var(--brand-gold);
  --cn-gold-bg:      var(--brand-gold-soft);
  --cn-gold-text:    var(--brand-gold-text);

  /* dil_detail.ejs — "dd-" prefix */
  --dd-card:         var(--bg-surface);
  --dd-border:       var(--border-subtle);
  --dd-border-soft:  var(--border-default);
  --dd-text:         var(--text-primary);
  --dd-text-soft:    var(--text-body);
  --dd-text-muted:   var(--text-muted);
  --dd-gold:         var(--brand-gold);
  --dd-gold-bg:      var(--brand-gold-soft);
  --dd-gold-text:    var(--brand-gold-text);
  --dd-green:        var(--state-success);
  --dd-green-bg:     var(--state-success-soft);
  --dd-blue:         var(--state-info);
  --dd-blue-bg:      var(--state-info-soft);
  --dd-red:          var(--state-danger);
  --dd-red-bg:       var(--state-danger-soft);
  --dd-purple:       #6B3D7A;
  --dd-purple-bg:    #F3E8F5;

  /* sklad-material-detail.ejs — "sd-" prefix */
  --sd-card:         var(--bg-surface);
  --sd-border:       var(--border-subtle);
  --sd-border-soft:  var(--border-default);
  --sd-text:         var(--text-primary);
  --sd-text-soft:    var(--text-body);
  --sd-text-muted:   var(--text-muted);
  --sd-red:          var(--state-danger);
  --sd-red-bg:       var(--state-danger-soft);
  --sd-red-dark:     var(--state-danger-text);
  --sd-red-soft:     #F5B7B1;
  --sd-green:        var(--state-success);
  --sd-green-bg:     var(--state-success-soft);
  --sd-gold:         var(--brand-gold);
  --sd-gold-bg:      var(--brand-gold-soft);
  --sd-gold-text:    var(--brand-gold-text);
  --sd-blue:         var(--state-info);
  --sd-blue-bg:      var(--state-info-soft);

  /* schranky.ejs (modul E-mail / Pošta) — "sch-" prefix */
  --sch-page:         var(--bg-page);
  --sch-card:         var(--bg-surface);
  --sch-hover:        var(--bg-muted);
  --sch-border:       var(--border-subtle);
  --sch-border-soft:  var(--border-default);
  --sch-border-input: var(--border-input);
  --sch-text:         var(--text-primary);
  --sch-text-soft:    var(--text-body);
  --sch-text-muted:   var(--text-muted);
  --sch-text-inverse: var(--text-inverse);
  --sch-inverse:      var(--bg-inverse);
  /* Zlatá = jediný akcent modulu: vybraný řádek, pruh výběru, štítek
     Nezpracováno a panel "Zpracovat jako…". Primární tlačítka jsou černá. */
  --sch-gold:         var(--brand-gold);
  --sch-gold-bg:      var(--brand-gold-soft);
  --sch-gold-text:    var(--brand-gold-text);
  --sch-green:        var(--state-success);
  --sch-green-bg:     var(--state-success-soft);
  --sch-green-text:   var(--state-success-text);
  --sch-red:          var(--state-danger);
  --sch-red-bg:       var(--state-danger-soft);
  --sch-red-text:     var(--state-danger-text);
  --sch-blue:         var(--state-info);
  --sch-blue-bg:      var(--state-info-soft);
  /* Oranžová = upozornění, které není chyba: nedohledaný nebo neověřený
     partner. Zlatá je vyhrazená akcentu modulu, červená skutečné chybě. */
  --sch-orange:       var(--state-orange);
  --sch-orange-bg:    var(--state-orange-soft);
  --sch-orange-text:  var(--state-orange-text);
  --sch-neutral-bg:   var(--state-neutral-soft);
  --sch-neutral-text: var(--state-neutral-text);
}

/* =========================================================================
   FOCUS — jediné pravidlo v tomhle souboru
   =========================================================================
   STYLE.md kap. 6: „Focus se nikdy neruší. Všechno, na co jde kliknout,
   jde i protabovat."

   `:focus-visible`, ne `:focus` — obrys se ukáže jen při ovládání
   klávesnicí. Kdo klikne myší, nepozná žádný rozdíl.

   Specificita je nejnižší možná (0,1,0), takže kdekoli si komponenta
   kreslí focus po svém (91 míst v systému, typicky box-shadow), vyhraje
   ona. Tohle je záchranná síť pro všechno ostatní.

   Poloměr se ZÁMĚRNĚ nenastavuje. Předpis uvádí border-radius: 4px, jenže
   ten by deformoval prvky s jiným zaoblením — tlačítko s 8px by při
   protabování zhranatělo. Prohlížeče obrys zaoblují podle prvku samy,
   takže výsledek je ten zamýšlený i bez toho.
   ========================================================================= */
:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
}