/* ui.css – společný vzhled celého CRM (barvy, písmo, rozměry a základní komponenty).

   Načítá ho každá aplikační stránka jako první styl v <head>:
     <link rel="stylesheet" href="/ui.css?v=1">
   (?v= přepisuje deploy podle obsahu – cache_bust.py). Vlastní <style> stránky jde až za ním
   a smí jen doplňovat to, co je pro stránku zvláštní; barvy, písmo a rozměry ovládacích prvků
   bere z proměnných níž. Nová barva = nový token tady, ne hex ve stránce.

   Starší názvy proměnných (--card, --brand2, --green, --redbg …) zůstávají jako přezdívky,
   ať stránky a sdílené skripty (dopis.js, sms-upominka.js …) fungují beze změny.
   Zatím jen světlý režim – tmavý přijde najednou pro všechny stránky (UX revize, fáze 4). */

:root{
  color-scheme:light;

  /* Plochy a text */
  --bg:#f5f7fa;          /* pozadí stránky */
  --surface:#ffffff;     /* karty, panely, pole */
  --sunken:#f7f9fc;      /* vnořené plochy, hlavičky tabulek, souhrny */
  --hover:#f0f4fa;       /* najetí na řádek, vybraná položka v seznamu */
  --ink:#1f2937;         /* běžný text */
  --ink-2:#374151;       /* text druhé úrovně (citace, poznámky) */
  --muted:#5b6574;       /* popisky – kontrast 5,4 : 1 i na --bg */
  --faint:#8a94a3;       /* jen ikony a oddělovače, ne text */
  --line:#e5e7eb;        /* rámečky karet, oddělovače řádků */
  --line-strong:#cbd5e1; /* rámečky polí a tlačítek */

  /* Značka a akce */
  --brand:#1f3864;       /* nadpisy, vybraná položka menu, aktivní filtr */
  --accent:#2e5496;      /* primární tlačítka, odkazy */
  --accent-soft:#eef3fb; /* podklad vybrané položky, zvýraznění */
  --on-accent:#ffffff;   /* text na --accent a --brand */

  /* Stavy: text + podklad */
  --ok:#2e7d32;   --ok-bg:#e2efda;    /* zaplaceno, aktivní, hotovo */
  --warn:#8a6d00; --warn-bg:#fff2cc;  /* blíží se, volné, pozor */
  --bad:#b23b18;  --bad-bg:#fce4d6;   /* dluh, po termínu, chyba */
  --info:#1c5a8a; --info-bg:#ddebf7;  /* běží lhůta, prodej, informace */
  --spec:#4c2f86; --spec-bg:#ede9f6;  /* insolvence a jiné zvláštní stavy */
  --mark:#fff3bf;                     /* zvýraznění hledaného řádku */

  /* Písmo */
  --f-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --fs-h1:22px; --fs-h2:17px; --fs-base:14px; --fs-small:13px; --fs-label:12px;

  /* Rozměry */
  --sirka:1200px;        /* šířka obsahu všech stránek (menu, hlavička, obsah) */
  --gutter:18px;         /* okraj stránky */
  --ctl-h:36px;          /* výška tlačítek, polí a filtrů (na telefonu 44 px) */
  --ctl-h-s:30px;        /* malé tlačítko */
  --r-s:6px; --r-m:8px; --r-l:12px; --r-xl:16px;
  --stin-1:0 1px 2px rgba(16,24,40,.04);
  --stin-2:0 8px 28px rgba(16,24,40,.16);
  --focus:#6b9eff;

  /* Přezdívky starších názvů (stránky A, sdílené skripty) */
  --card:var(--surface); --brand2:var(--accent); --soft:var(--hover); --btnline:var(--line-strong);
  --green:var(--ok); --greenbg:var(--ok-bg); --amber:var(--warn); --amberbg:var(--warn-bg);
  --red:var(--bad); --redbg:var(--bad-bg); --blue:var(--info); --bluebg:var(--info-bg);
  --ins:var(--spec); --insbg:var(--spec-bg); --violet:var(--spec); --violetbg:var(--spec-bg);
  --err:var(--bad); --okbg:var(--ok-bg); --warnbg:var(--warn-bg); --errbg:var(--bad-bg);
  --f-body:var(--f-ui); --f-display:var(--f-ui);
}
@media (max-width:780px){:root{--ctl-h:44px;--ctl-h-s:36px;--gutter:12px}}

/* ---------- Základ ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-base)/1.45 var(--f-ui)}
button,input,select,textarea{font-family:inherit}
a{color:var(--accent)}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1{font-size:var(--fs-h1);line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--brand);margin:0 0 2px;text-wrap:balance}
.hidden{display:none}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Komponenty u-* (nový kód a sdílené skripty) ---------- */
/* Stránka: obsah ve společné šířce */
.u-strana{max-width:var(--sirka);margin:0 auto;padding:var(--gutter) var(--gutter) 48px}
/* Hlavička stránky: nadpis a podnadpis vlevo, akce vpravo */
.u-hlava{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:0 0 14px}
.u-hlava>.u-hlava-t{flex:1 1 260px;min-width:0}
.u-hlava h1{margin:0}
.u-sub{font-size:var(--fs-small);color:var(--muted);margin-top:2px}
.u-akce{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* Panel / karta */
.u-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--stin-1)}
.u-nadpis{font-size:var(--fs-label);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0}

/* Tlačítka: vedlejší (výchozí), primární, tiché, nebezpečné; malá varianta */
.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--ctl-h);padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--surface);color:var(--brand);
  font:600 13.5px/1.2 var(--f-ui);text-decoration:none;white-space:nowrap;cursor:pointer}
.u-btn:hover{border-color:var(--accent);color:var(--brand)}
.u-btn--prim{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.u-btn--prim:hover{background:var(--brand);border-color:var(--brand);color:var(--on-accent)}
.u-btn--ticho{background:transparent;border-color:transparent;color:var(--accent)}
.u-btn--ticho:hover{background:var(--hover);border-color:transparent}
.u-btn--zle{color:var(--bad)}
.u-btn--zle:hover{border-color:var(--bad);color:var(--bad)}
.u-btn--mal{min-height:var(--ctl-h-s);padding:0 10px;font-size:13px}
.u-btn:disabled,.u-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}

/* Pole */
.u-pole{min-height:var(--ctl-h);padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r-m);
  background:var(--surface);color:var(--ink);font:var(--fs-base) var(--f-ui)}
textarea.u-pole{padding:8px 10px;min-height:76px;resize:vertical}
.u-pole:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* Filtry (štítky na klik) a záložky podstránek */
.u-chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--ctl-h-s);padding:0 12px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--brand);font:600 13px/1 var(--f-ui);cursor:pointer;white-space:nowrap}
.u-chip[aria-pressed=true],.u-chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-accent)}
.u-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin:0 0 14px}
.u-tabs::-webkit-scrollbar{display:none}
.u-tab{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;margin-bottom:-1px;
  border-bottom:2px solid transparent;color:var(--muted);font:600 14px/1 var(--f-ui);text-decoration:none;white-space:nowrap}
.u-tab:hover{color:var(--ink)}
.u-tab[aria-current=page],.u-tab.on{color:var(--brand);border-bottom-color:var(--brand)}

/* Štítky stavu */
.u-st{display:inline-block;padding:2px 9px;border-radius:999px;font:600 12px/1.4 var(--f-ui);white-space:nowrap}
.u-st--ok{background:var(--ok-bg);color:var(--ok)}.u-st--warn{background:var(--warn-bg);color:var(--warn)}
.u-st--bad{background:var(--bad-bg);color:var(--bad)}.u-st--info{background:var(--info-bg);color:var(--info)}
.u-st--spec{background:var(--spec-bg);color:var(--spec)}.u-st--neu{background:var(--sunken);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}

/* Dlaždice s číslem */
.u-kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px}
.u-kpi .k{font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.u-kpi .v{font-size:24px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.u-kpi .s{font-size:var(--fs-small);color:var(--muted)}

/* Sbalené „Další ukazatele“ pod hlavními dlaždicemi a vysvětlivka pod ⓘ (fáze 4) */
details.u-dalsi{margin:10px 0 0}
details.u-dalsi>summary{display:inline-flex;align-items:center;gap:8px;min-height:var(--ctl-h);cursor:pointer;color:var(--accent);font-size:13px;font-weight:600}
details.u-dalsi>summary::after{content:"";width:6px;height:6px;margin:0 0 3px 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
details.u-dalsi[open]>summary::after{margin:3px 0 0 2px;transform:rotate(-135deg)}
details.u-dalsi>summary .pozor{color:var(--warn)}
details.u-dalsi>summary+*{margin-top:6px}
details.u-vysv{margin:6px 0 0;font-size:var(--fs-small);color:var(--muted)}
details.u-vysv>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer;color:var(--accent);font-weight:600;list-style:none}
details.u-vysv>summary::-webkit-details-marker{display:none}
details.u-vysv>summary::before{content:"i";display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  border:1.5px solid currentColor;font:700 11px/1 Georgia,serif;font-style:italic}
details.u-vysv>p,details.u-vysv>div{margin:2px 0 6px;line-height:1.5;max-width:860px}

@media (max-width:780px){
  input[type=text],input[type=search],input[type=email],input[type=password],input[type=tel],input[type=number],
  input[type=date],input:not([type]),select,textarea{font-size:16px}   /* iPhone při psaní nezoomuje */
}
@media (pointer:coarse){
  input[type=checkbox],input[type=radio]{width:20px;height:20px}   /* větší cíl pro prst (fáze 4) */
}
@media print{.u-tabs,.u-akce{display:none}}