/* ============================================================================ Kamhal & Co. — app.css · JEDEN dizajnový systém celej appky (načíta ho shell.js na každej stránke appky, portál a detail dokladu ho načítajú samy). Smer B „Svetlý so značkovým pásom“ (prestavba UI, KamhalCo 34; Boss vybral 12. 10. 2026, prototypy `scripts/dizajn/smery/`, plán `docs/DIZAJN_PLAN.md`): · pokojný svetlý základ — biele karty na sivomodrom pozadí, oddelené tieňom, nie rámikom; · JEDNA hlavná farba (petrolejová `--primary`) pre jedinú hlavnú akciu obrazovky; červená len pre nevratné a chyby, zelená len pre hotové, jantárová pre to, čo čaká na človeka; · tmavý značkový pás (`--hl-bg`) nesie len jedno: na ktorom klientovi sa robí (hlavička fronty); · logo „K“ v tmavomodrom štvorci (`--navy`) — jediné logo appky. Každá farba stránky ide CEZ TOKENY nižšie. Stránka, ktorá si napíše farbu sama, sa pri ďalšej zmene rozíde (presne tak vznikli štítky s kontrastom 1,20 — tests/test_farby_textu_splnaju_kontrast.py). 🌙 TMAVÝ REŽIM v kole 1 NIE JE (rozhodnutie 1 kroku 2): prepínač je preč a appka je svetlá. Dovtedajší tmavý blok pokrýval len tokeny, nie ~200 farieb napísaných v stránkach, a žiadna snímka ho nikdy nehodnotila. Tokeny sú významové (`--surface`, `--st-review-ink` …), takže tmavá téma sa dá doplniť jedným blokom — až keď bude navrhnutá a odfotená. ============================================================================ */ /* ---- Písmo: Inter, vlastný variabilný súbor (bez CDN, CSP-bezpečné). Dve sady znakov, aby slovenská diakritika (č š ž ť ď ň ľ ĺ ŕ ô ä …) bola v Inter, nie v náhradnom písme. ---- */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/inter-latin-var.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/inter-latin-ext-var.woff2") format("woff2"); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* — písmo — */ --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; /* — plochy a text — neutrálna s nádychom značky — Kontrast (WCAG 2.1, merané testom nad týmto súborom): --ink 17,8 / --ink-2 7,7 / --ink-3 5,4 na bielej; na --bg 16,4 / 7,1 / 5,0 — popisky (--ink-3) spĺňajú AA na každom povrchu. */ --bg:#f4f6f9; /* pozadie appky */ --surface:#ffffff; /* karty, tabuľky, okná */ --surface-2:#f7f9fb; /* hlavička tabuľky, jemná výplň */ --panel:#f7f9fb; /* vnorené plochy (bočné panely, vložené boxy) */ --ink:#101828; /* hlavný text */ --ink-2:#475467; /* vedľajší text */ --ink-3:#5f6b7d; /* popisky, pomocný text */ --line:#e4e7ec; /* deliaca čiara / okraj — VŽDY neutrálna (jediný význam --line) */ --line-2:#eef0f3; /* jemná čiara medzi riadkami */ --line-strong:#d0d5dd; /* okraj tlačidla a vstupného poľa */ --sb-ink:#344054; /* položka bočného panela (10,4 na bielej) */ --ikona:#7a8699; /* ikona vedľa textu — netextový prvok, 3,6 : 1 (AA žiada 3 : 1) */ --scrim:rgba(16,24,40,.46); /* stmavenie pod oknom (ui.js, shell.js — jedno pre všetky okná) */ /* — značka — */ --navy:#103a5e; --navy-600:#0f4d73; --navy-700:#0c2e4a; /* logo „K“ a začiatok značkového pásu */ --primary:#0b6b80; /* JEDINÁ hlavná farba: hlavná akcia, odkaz, vybraná položka (biely text 6,1) */ --primary-hover:#09596b; --primary-ink:#ffffff; --primary-soft:#e4f1f4; /* jemná výplň vybraného (záložka, čip, riadok) */ --primary-line:#b4d7df; --primary-wash:#f3f9fa; /* najjemnejšia výplň značky (nahrávanie, nastavenie firmy v paneli) */ --primary-wash-line:#dcecee; --brand:#0b6b80; /* = --primary; staršie meno, ostáva kvôli stránkam kola 2 */ --brand-ink:#095a6b; /* text značky na jemnej výplni */ --brand-soft:#e4f1f4; /* Prechod NIE JE výplň tlačidla (4 výplne hlavného tlačidla boli nález kontroly kola 1). Staršie stránky ho majú na tlačidlách — preto je to jedna plná farba v tvare prechodu. */ --brand-grad:linear-gradient(0deg,#0b6b80,#0b6b80); --brand-grad-soft:linear-gradient(0deg,#e4f1f4,#e4f1f4); /* — značkový pás (hlavička fronty: na ktorom klientovi sa robí) — */ --hl-bg:linear-gradient(115deg,#0f3b5f 0%,#115270 55%,#12636e 100%); --hl-plna:#11506c; /* plná farba pod prechodom (tlač, staré prehliadače) */ --hl-ink:#ffffff; --hl-ink-2:rgba(255,255,255,.82); --hl-btn-bg:rgba(255,255,255,.10); --hl-btn-ink:#ffffff; --hl-btn-border:rgba(255,255,255,.32); --hl-btn-hover:rgba(255,255,255,.18); --hl-primary:#ffffff; --hl-primary-ink:#0f3b5f; --hl-primary-hover:#e9f3f6; --hl-shadow:0 10px 26px -12px rgba(15,59,95,.55); /* — tmavá plocha: oznámenie (toast) a lišta hromadných akcií — jedna sada, aby vyzerali ako jedno — */ --tma:#101828; --tma-ink:#ffffff; --tma-ink-2:rgba(255,255,255,.74); --tma-odkaz:#7fd6e3; --tma-btn:rgba(255,255,255,.10); --tma-btn-hover:rgba(255,255,255,.18); --tma-line:rgba(255,255,255,.22); --tma-danger:#fda29b; --tma-danger-line:rgba(253,162,155,.45); /* jemný pás (detail dokladu, úvod portálu) — tá istá značka, oko patrí poliam a PDF */ --hl-jemny:linear-gradient(115deg,#dde9f5 0%,#d5eee4 100%); --hl-jemny-plna:#d9ecee; --hl-jemny-line:#cfdfe8; /* — stav dokladu: štítok = bodka + text, nikdy len farba — Na kontrolu (čaká na človeka) je jantárová a VÝRAZNÁ: audit 13-b — stav, ktorý ju potrebuje, bol najbledší štítok. Text na výplni: 7,5 / 6,3 / 6,6 / 5,5 / 6,8 / 6,5. */ --st-review-bg:#fdedc4; --st-review-ink:#773b00; --st-review-dot:#f59e0b; --st-approved-bg:#d1f1df; --st-approved-ink:#05603a; --st-approved-dot:#12b76a; --st-booked-bg:#d8e7ff; --st-booked-ink:#1849a9; --st-booked-dot:#2e7cf6; --st-error-bg:#fee4e2; --st-error-ink:#b42318; --st-error-dot:#f04438; --st-neutral-bg:#eef1f4; --st-neutral-ink:#475467; --st-neutral-dot:#98a2b3; --st-info-bg:#dff0fd; --st-info-ink:#075985; --st-info-dot:#0ea5e9; /* — význam (oddelený od značky) — */ --ok:#12b76a; --ok-soft:#e3f6ec; --ok-ink:#067647; /* hotové, sedí */ /* Zelené TLAČIDLO má vlastný povrch (17. 9. 2026): značková zelená na text nestačí. Pár povrch + text sa testuje (test_text_na_priznakovom_tlacidle_je_citatelny) — 5,7. */ --ok-btn:#067647; --ok-btn-ink:#ffffff; --warn:#f59e0b; --warn-soft:#fff8e8; --warn-ink:#773b00; --warn-line:#f5dfae; /* čaká na človeka, pozri */ --danger:#d92d20; --danger-soft:#fef3f2; --danger-ink:#b42318; --danger-line:#fecdca; /* chyba, nevratné */ --info:#0ea5e9; --info-soft:#eef7fd; --info-ink:#075985; --info-line:#cbe6f8; /* — istota čítania (vlastná stupnica) — */ --conf-bad:#d92d20; --conf-bad-soft:#fef3f2; --conf-warn:#f59e0b; --conf-warn-soft:#fff8e8; --conf-ok:#12b76a; --conf-ok-soft:#e3f6ec; /* — zvýraznenie poľa v PDF (rámik a spojnica) — vlastné, NIE --line — */ --hl:#0e8a7e; --hl-soft:rgba(14,138,126,.12); --hl-ring:rgba(14,138,126,.65); --pdf-pole:rgba(14,138,126,.05); --pdf-pole-ring:rgba(14,138,126,.36); --pdf-bg:#e9edf2; /* — rozostupy (8 bodov) — */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; /* — veľkosti písma — jedna stupnica pre celú appku — */ --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-display:38px; /* — zaoblenia — */ --r-xs:6px; --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px; --r-btn:9px; /* — hĺbka: boxy oddeľuje tieň, nie rámik — */ --sh-sm:0 1px 2px rgba(16,24,40,.05); --sh:0 1px 3px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.05); --sh-md:0 4px 12px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.05); --sh-lg:0 24px 48px -12px rgba(16,24,40,.22); --sh-brand:0 1px 2px rgba(11,107,128,.30); --ring:0 0 0 3px rgba(11,107,128,.28); /* zameranie klávesnicou */ /* — pohyb — */ --dur:.15s; --dur-2:.24s; --ease:cubic-bezier(.2,.7,.2,1); /* — vrstvy — */ --z-sticky:50; --z-sidebar:60; --z-menu:200; --z-toast:1100; --z-modal:1000; /* — rám appky — */ --sb:236px; /* šírka bočného panela */ --sb-rail:68px; /* zbalený panel (detail dokladu) */ --tb:56px; /* výška hornej lišty */ --obsah-max:1680px; /* obsah na 1920: jeden ľavý okraj, zoznamy na celú šírku */ --obsah-pad:28px; color-scheme:light; } /* ============================================================================ STRÁNKY PRED APPKOU — JEDEN SVETLÝ VZHĽAD (prestavba 1c, 15. 10. 2026) Prihlásenie, registrácia, overenie e-mailu, zabudnuté a nové heslo, chybové stránky (404, 500, zlý odkaz) — dovtedy štyri vzhľady (tmavomodrý s prechodom, plochý takmer čierny, svetlá čakáreň so serifovým logom, svetlá appka; audit 1c, spoločný vzor 6). Teraz to isté pozadie, karta, logo, písmo a hlavné tlačidlo ako appka; čakáreň (static/sw.js) ho napodobňuje vlastným štýlom, lebo pri spiacom serveri app.css nedostane. Tmavá téma pred appkou nie je (rozhodnutie 1 kroku 2). · `body.vr` → `.vr-top` (logo + cesta späť) · `main.vr-hlavna` → `.vr-karta` · `.vr-pata` (právne odkazy) · nadpis a text v karte vľavo (ako appka), pole = `.field` z app.css, chyba pod poľom (`.field__error`) ============================================================================ */ .logo-k{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex:none; position:relative; background:var(--navy); color:#fff; font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:19px; line-height:1; text-decoration:none; } .logo-k::after{ content:""; position:absolute; right:4px; bottom:5px; width:6px; height:6px; border-radius:50%; background:#22c78a; } body.vr{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--bg); } .vr-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 28px; } .vr-znacka{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:650; font-size:16px; letter-spacing:-.01em; text-decoration:none; border-radius:var(--r-sm); } .vr-top .vr-spat{ color:var(--ink-2); font-size:13.5px; font-weight:550; text-decoration:none; } .vr-top .vr-spat:hover{ color:var(--ink); } .vr-hlavna{ flex:1; display:flex; justify-content:center; align-items:flex-start; padding:4vh 20px 32px; } .vr-karta{ width:min(440px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-md); padding:34px 36px 30px; } .vr-karta--siroka{ width:min(600px,100%); } .vr-karta h1{ margin:0 0 6px; font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.25; } .vr-pod{ margin:0 0 24px; color:var(--ink-2); font-size:14px; line-height:1.55; } .vr-pod b{ color:var(--ink); font-weight:650; overflow-wrap:anywhere; } .vr-form{ display:flex; flex-direction:column; gap:16px; } .vr-form .field{ gap:6px; } .vr-form .field__hint{ line-height:1.45; } .vr-form .field__error{ line-height:1.45; } .vr-form .field__error a,.vr-hlaska a{ color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; } .field__nad{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } /* popis poľa + odkaz vpravo */ .field__nad .odkaz{ font-size:var(--fs-sm); } .nepovinne{ font-weight:500; color:var(--ink-3); } .vr-heslo{ position:relative; } .vr-heslo .input{ padding-right:88px; } .vr-ukaz{ position:absolute; right:5px; top:50%; transform:translateY(-50%); height:30px; padding:0 10px; border:0; border-radius:var(--r-xs); background:transparent; color:var(--ink-2); font-size:13px; font-weight:600; cursor:pointer; } .vr-ukaz:hover{ background:var(--surface-2); color:var(--ink); } .vr-volba{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-2); line-height:1.5; cursor:pointer; } .vr-volba input{ width:16px; height:16px; margin:2px 0 0; flex:none; accent-color:var(--primary); } .field.is-error .vr-volba input{ outline:2px solid var(--danger); outline-offset:2px; } .vr-programy{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .vr-program{ display:flex; align-items:center; gap:9px; min-height:42px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); box-shadow:var(--sh-sm); cursor:pointer; font-size:14px; font-weight:550; color:var(--ink); } .vr-program input{ margin:0; accent-color:var(--primary); flex:none; } .vr-program:has(input:checked){ border-color:var(--primary); background:var(--primary-wash); box-shadow:0 0 0 1px var(--primary); } .vr-program:has(input:focus-visible){ box-shadow:var(--ring); } .field.is-error .vr-program{ border-color:var(--danger); } /* ako .input pri chybe (kontrola kvality 1c, 01-c) */ .vr-form .btn--primary,.vr-karta .btn--siroke{ width:100%; height:44px; font-size:15px; } .vr-hlaska{ padding:11px 14px; border-radius:var(--r-sm); font-size:13.5px; line-height:1.5; border:1px solid transparent; } .vr-hlaska:empty{ display:none; } .vr-hlaska--chyba{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger-ink); } .vr-hlaska--pozor{ background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn-ink); } .vr-hlaska--ok{ background:var(--ok-soft); border-color:#b7e5cc; color:var(--ok-ink); } .vr-hlaska--info{ background:var(--info-soft); border-color:var(--info-line); color:var(--info-ink); } .vr-hlaska .btn{ margin-top:10px; } /* veta o výsledku, ktorej triedu skript prepíše na 'ok' / 'err' / '' (obnova-hesla.js, registrácia) — vzhľad ako .vr-hlaska */ [data-sprava]{ padding:11px 14px; border-radius:var(--r-sm); font-size:13.5px; line-height:1.5; border:1px solid transparent; } [data-sprava]:empty{ display:none; } [data-sprava].ok{ background:var(--ok-soft); border-color:#b7e5cc; color:var(--ok-ink); } [data-sprava].err{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger-ink); } [data-sprava] a{ color:inherit !important; font-weight:700; text-decoration:underline; } [data-sprava]:not(.ok):not(.err){ padding:0; border:0; } .field.is-error .input:focus,.field.is-error .select:focus{ box-shadow:0 0 0 3px rgba(217,45,32,.20); } .vr-alt{ margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line-2); color:var(--ink-2); font-size:13.5px; text-align:center; } .vr-alt + .vr-alt{ margin-top:8px; padding-top:0; border-top:0; } .vr-pata{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; padding:18px 20px 26px; font-size:12.5px; color:var(--ink-3); } .vr-pata a{ color:var(--ink-3); text-decoration:none; } .vr-pata a:hover{ color:var(--ink); text-decoration:underline; } .vr-ikona{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin:0 0 18px; } .vr-ikona svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .vr-ikona--ok{ background:var(--ok-soft); color:var(--ok-ink); } .vr-ikona--info{ background:var(--primary-soft); color:var(--brand-ink); } .vr-ikona--pozor{ background:var(--warn-soft); color:var(--warn-ink); } .vr-ikona--chyba{ background:var(--danger-soft); color:var(--danger-ink); } .vr-kod{ font-size:13px; font-weight:650; letter-spacing:.06em; color:var(--ink-3); margin:0 0 6px; } .vr-akcie{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } @media (max-width:520px){ .vr-top{ padding:14px 16px; } .vr-hlavna{ padding:12px 12px 24px; } .vr-karta{ padding:26px 20px 22px; border-radius:var(--r-lg); } .vr-programy{ grid-template-columns:1fr 1fr; } } /* ============================================================================ ZÁKLAD ============================================================================ */ *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; } body{ font-family:var(--font-sans); font-size:var(--fs-base); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.45; font-feature-settings:"cv11" 1; } svg{ display:block; } a{ color:inherit; } button,input,select,textarea{ font:inherit; color:inherit; } .tnum,.num{ font-variant-numeric:tabular-nums; } :focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-xs); } .mut{ color:var(--ink-2); } .mut3{ color:var(--ink-3); } .odkaz{ color:var(--primary); font-weight:550; text-decoration:none; cursor:pointer; } .odkaz:hover{ text-decoration:underline; } .ikona{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; } .ikona--sm{ width:15px; height:15px; } .ikona--lg{ width:22px; height:22px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ============================================================================ TLAČIDLÁ — jeden systém: bežné · hlavné (jedno na obrazovku) · tiché · nebezpečné · ikona. --x-* = háčik pre kontajner (pás, lišta), ktorý chce tlačidlá inak: kontajner nastaví --x-btn-bg:var(--hl-btn-bg) … NIKDY nie --btn-bg:var(--hl-btn-bg,var(--btn-bg)) — vlastnosť, ktorá odkazuje sama na seba (aj vo fallbacku), je cyklus: prehliadač ju zahodí a tlačidlo ostane bez hrany aj plochy (zmerané v kroku 2, `smery.py` to stráži v prototypoch). ============================================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 14px; border-radius:var(--r-btn); border:1px solid var(--x-btn-border,var(--line-strong)); background:var(--x-btn-bg,var(--surface)); color:var(--x-btn-ink,#1d2939); font-weight:600; font-size:13.5px; line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none; box-shadow:var(--x-btn-shadow,var(--sh-sm)); transition:background var(--dur), border-color var(--dur), box-shadow var(--dur), color var(--dur); } .btn:hover{ background:var(--x-btn-hover,#f9fafb); } .btn svg{ width:16px; height:16px; flex:none; } .btn:disabled,.btn[aria-disabled="true"],.btn.is-off{ opacity:1; cursor:not-allowed; background:var(--surface-2); color:var(--ink-3); border-color:var(--line); box-shadow:none; } .btn--primary{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink); box-shadow:var(--sh-brand); } .btn--primary:hover:not(:disabled){ background:var(--primary-hover); border-color:var(--primary-hover); } .btn--ok{ background:var(--ok-btn); border-color:var(--ok-btn); color:var(--ok-btn-ink); } .btn--ok:hover:not(:disabled){ background:#05603a; border-color:#05603a; } .btn--secondary{ } .btn--ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-2); } .btn--ghost:hover:not(:disabled){ background:var(--surface-2); color:var(--ink); } /* Nebezpečné = tiché, kým sa nepotvrdzuje: červený text, nie červená plocha. Plná červená len v okne, ktoré nevratnú vec potvrdzuje (`.btn--danger-plne`). Audit 1a: červené „Zamietnuť“ a „Zmazať“ vedľa „Schváliť“ mali váhu hlavnej akcie. */ .btn--danger{ background:var(--surface); border-color:var(--danger-line); color:var(--danger-ink); } .btn--danger:hover:not(:disabled){ background:var(--danger-soft); border-color:#fda29b; } .btn--danger-plne{ background:var(--danger); border-color:var(--danger); color:#fff; box-shadow:none; } .btn--danger-plne:hover:not(:disabled){ background:#b42318; border-color:#b42318; } .btn--sm{ height:30px; padding:0 10px; font-size:13px; border-radius:var(--r-sm); } .btn--lg{ height:44px; padding:0 20px; font-size:15px; } .btn-icon{ width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-btn); background:var(--surface); border:1px solid var(--line-strong); color:var(--ink-2); cursor:pointer; box-shadow:var(--sh-sm); } .btn-icon:hover{ color:var(--ink); background:#f9fafb; } .btn-icon svg{ width:18px; height:18px; } /* ============================================================================ KARTA / PANEL — biela plocha oddelená tieňom ============================================================================ */ .card{ background:var(--surface); border:1px solid transparent; border-radius:var(--r-lg); box-shadow:var(--sh); } .card--flat{ box-shadow:var(--sh-sm); border-color:var(--line); } .card__h{ display:flex; align-items:center; gap:10px; padding:14px 18px 0; } .card__h h2,.card__h h3{ margin:0; font-size:12.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); } .card__b{ padding:14px 18px 18px; } .panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); } .panel__h{ padding:11px 14px; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:8px; } /* ============================================================================ TABUĽKA ============================================================================ */ .table{ width:100%; border-collapse:separate; border-spacing:0; } .table thead th{ text-align:left; height:40px; padding:0 14px; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); background:var(--surface-2); border-bottom:1px solid var(--line); user-select:none; white-space:nowrap; } .table thead th.is-sortable{ cursor:pointer; } .table thead th.is-sortable:hover{ color:var(--ink); } .table th.right,.table td.right,.table .r{ text-align:right; } .table tbody td{ height:52px; padding:0 14px; border-bottom:1px solid var(--line-2); font-size:var(--fs-sm); vertical-align:middle; } .table tbody tr:last-child td{ border-bottom:0; } .table tbody tr.is-clickable{ cursor:pointer; } .table tbody tr:hover td{ background:#f6f9fb; } .cell-primary{ font-weight:600; color:var(--ink); } .cell-sub{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:1px; } .cell-amount{ text-align:right; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; } .cell-amount small{ font-weight:500; color:var(--ink-3); } /* ============================================================================ POLE FORMULÁRA ============================================================================ */ .field{ display:flex; flex-direction:column; gap:6px; } .field__label{ font-size:var(--fs-sm); font-weight:600; color:var(--ink); } .field__hint{ font-size:var(--fs-xs); color:var(--ink-3); } .field__error{ font-size:var(--fs-xs); color:var(--danger-ink); font-weight:600; } .input,.select,.textarea{ font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:9px 12px; outline:none; width:100%; box-shadow:var(--sh-sm); transition:border-color var(--dur), box-shadow var(--dur); } .input::placeholder,.textarea::placeholder{ color:var(--ink-3); } .input:focus,.select:focus,.textarea:focus{ border-color:var(--primary); box-shadow:var(--ring); } .field.is-error .input,.field.is-error .select{ border-color:var(--danger); } .textarea{ resize:vertical; min-height:76px; } /* ============================================================================ ŠTÍTOK STAVU (bodka + text) · ČIP · ZNAČKA ============================================================================ */ .pill{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 8px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; white-space:nowrap; background:var(--pill-bg,var(--st-neutral-bg)); color:var(--pill-ink,var(--st-neutral-ink)); } .pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--pill-dot,var(--st-neutral-dot)); flex:none; } .st-review{ --pill-bg:var(--st-review-bg); --pill-ink:var(--st-review-ink); --pill-dot:var(--st-review-dot); } .st-approved{ --pill-bg:var(--st-approved-bg); --pill-ink:var(--st-approved-ink); --pill-dot:var(--st-approved-dot); } .st-booked{ --pill-bg:var(--st-booked-bg); --pill-ink:var(--st-booked-ink); --pill-dot:var(--st-booked-dot); } .st-error{ --pill-bg:var(--st-error-bg); --pill-ink:var(--st-error-ink); --pill-dot:var(--st-error-dot); } .st-neutral{ --pill-bg:var(--st-neutral-bg); --pill-ink:var(--st-neutral-ink); --pill-dot:var(--st-neutral-dot); } .st-info{ --pill-bg:var(--st-info-bg); --pill-ink:var(--st-info-ink); --pill-dot:var(--st-info-dot); } .chip{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:550; white-space:nowrap; background:var(--x-cip-bg,#f1f3f6); color:var(--x-cip-ink,#344054); border:1px solid var(--x-cip-border,transparent); } .chip svg{ width:14px; height:14px; } .chip--review{ background:var(--st-review-bg); color:var(--st-review-ink); } .chip--ok{ background:var(--st-approved-bg); color:var(--st-approved-ink); } .chip--err{ background:var(--st-error-bg); color:var(--st-error-ink); } .chip--warn{ background:var(--warn-soft); color:var(--warn-ink); border-color:var(--warn-line); } .chip--muted{ background:var(--st-neutral-bg); color:var(--st-neutral-ink); } .tag{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-2xs); font-weight:650; padding:2px 7px; border-radius:var(--r-xs); letter-spacing:.02em; } .tag--ok{ background:var(--ok-soft); color:var(--ok-ink); } .tag--info{ background:var(--info-soft); color:var(--info-ink); } .tag--muted{ background:var(--st-neutral-bg); color:var(--ink-2); } .pocet{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); font-size:12px; font-weight:650; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); font-variant-numeric:tabular-nums; } /* istota čítania + ľudsky overené */ .conf{ font-size:var(--fs-2xs); font-weight:650; padding:3px 7px; border-radius:var(--r-xs); white-space:nowrap; } .conf--ok{ background:var(--conf-ok-soft); color:var(--ok-ink); } .conf--warn{ background:var(--conf-warn-soft); color:var(--warn-ink); } .conf--bad{ background:var(--conf-bad-soft); color:var(--danger-ink); } .conf--verified{ background:var(--primary-soft); color:var(--brand-ink); } /* ============================================================================ DLAŽDICA ČÍSLA (stránky kola 2) — farba stavu ako horný pruh, nie celý rámik ============================================================================ */ .stat{ background:var(--surface); border:1px solid transparent; border-radius:var(--r); padding:14px 16px; box-shadow:var(--sh); position:relative; overflow:hidden; } .stat__k{ font-size:12px; color:var(--ink-2); font-weight:600; display:flex; align-items:center; gap:7px; } .stat__k .dot{ width:7px; height:7px; border-radius:50%; } .stat__v{ font-size:26px; font-weight:700; letter-spacing:-.02em; margin-top:7px; font-variant-numeric:tabular-nums; } .stat__m{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; } .stat--attn{ border-color:var(--primary-line); } .stat--brand::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--primary); } .stat.red::before,.stat.amber::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; } .stat.red::before{ background:var(--danger); } .stat.amber::before{ background:var(--warn); } .stat.red .stat__v,.stat.red .v{ color:var(--danger-ink); } .stat.amber .stat__v,.stat.amber .v{ color:var(--warn-ink); } /* ============================================================================ NAHRÁVANIE — jedno pre celú appku ============================================================================ */ .dropzone{ border:1.5px dashed var(--primary-line); border-radius:var(--r-lg); background:var(--primary-wash); padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:border-color var(--dur), background var(--dur); } .dropzone:hover,.dropzone.is-over{ border-color:var(--primary); background:var(--primary-soft); } .dropzone__ic{ width:42px; height:42px; border-radius:var(--r-sm); background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; flex:none; } /* Pustenie súboru kamkoľvek na stránku (fronta): celá plocha dostane rámik, kým súbor drží nad ňou. */ .pustit-sem{ position:fixed; inset:12px; z-index:900; border:2px dashed var(--primary); border-radius:var(--r-xl); background:rgba(228,241,244,.86); display:none; align-items:center; justify-content:center; font-size:18px; font-weight:650; color:var(--brand-ink); pointer-events:none; } .pustit-sem.on{ display:flex; } /* ============================================================================ ZÁLOŽKY (druhy dokladov) · SEGMENTY (filter stavu) · STARÉ .tabs ============================================================================ */ .zalozky{ display:flex; align-items:flex-end; gap:4px; border-bottom:1px solid var(--line); flex-wrap:wrap; } .zalozka{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 12px; font-weight:550; color:var(--ink-2); border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; cursor:pointer; white-space:nowrap; text-decoration:none; font-size:14px; } .zalozka:hover{ color:var(--ink); } .zalozka.on{ color:var(--ink); border-bottom-color:var(--primary); font-weight:600; } .zalozka .pocet{ background:var(--surface-2); } .zalozka.on .pocet{ background:var(--primary); color:var(--primary-ink); border-color:transparent; } .zalozky .vpravo{ margin-left:auto; display:flex; gap:8px; align-items:center; padding-bottom:7px; } .seg{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:12px; background:#eaedf1; flex-wrap:wrap; } .seg button,.seg a{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px; border-radius:var(--r-sm); border:0; background:none; font-weight:550; font-size:13px; color:var(--ink-2); white-space:nowrap; cursor:pointer; text-decoration:none; } .seg button:hover,.seg a:hover{ color:var(--ink); } .seg .on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(16,24,40,.12); } .seg .poc{ font-size:12px; font-weight:650; color:var(--ink-3); font-variant-numeric:tabular-nums; } .seg .on .poc{ color:var(--ink-2); } .seg .poc.review{ color:var(--st-review-ink); background:var(--st-review-bg); padding:0 6px; border-radius:var(--r-pill); } .tabs{ display:inline-flex; background:#eaedf1; border-radius:12px; padding:3px; } .tabs button{ border:0; background:transparent; font:inherit; font-size:var(--fs-sm); font-weight:550; color:var(--ink-2); padding:0 11px; height:30px; border-radius:var(--r-sm); cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .tabs button .count{ color:var(--ink-3); font-weight:650; } .tabs button.is-active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(16,24,40,.12); } .tabs button.is-active .count{ color:var(--ink-2); } /* ============================================================================ ZNAČKOVÝ PÁS (hlavička fronty) — tmavý, nesie klienta, na ktorom sa robí ============================================================================ */ .hlavicka{ position:relative; overflow:hidden; display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:18px 24px; border-radius:16px; background:var(--hl-plna); background-image:var(--hl-bg); color:var(--hl-ink); box-shadow:var(--hl-shadow); --x-btn-bg:var(--hl-btn-bg); --x-btn-ink:var(--hl-btn-ink); --x-btn-border:var(--hl-btn-border); --x-btn-hover:var(--hl-btn-hover); --x-btn-shadow:none; } .hlavicka::after{ content:""; position:absolute; right:-60px; top:-80px; width:340px; height:340px; border-radius:50%; background:radial-gradient(closest-side,rgba(255,255,255,.10),rgba(255,255,255,0)); pointer-events:none; } .hlavicka > *{ position:relative; z-index:1; } .hlavicka .btn--primary{ background:var(--hl-primary); border-color:var(--hl-primary); color:var(--hl-primary-ink); box-shadow:none; } .hlavicka .btn--primary:hover:not(:disabled){ background:var(--hl-primary-hover); border-color:var(--hl-primary-hover); } .hlavicka .btn:disabled,.hlavicka .btn[aria-disabled="true"],.hlavicka .btn.is-off{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.18); } .hlavicka a{ color:inherit; } /* jemný pás (detail dokladu, portál) */ .hlavicka--jemna{ background:var(--hl-jemny-plna); background-image:var(--hl-jemny); color:var(--ink); box-shadow:none; border-radius:0; border-bottom:1px solid var(--hl-jemny-line); --x-btn-bg:var(--surface); --x-btn-ink:#1d2939; --x-btn-border:var(--line-strong); --x-btn-hover:#f9fafb; --x-btn-shadow:var(--sh-sm); --x-cip-bg:#ffffff; } .hlavicka--jemna::after{ display:none; } .hlavicka--jemna .btn--primary{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink); box-shadow:var(--sh-brand); } .hlavicka--jemna .btn--primary:hover:not(:disabled){ background:var(--primary-hover); border-color:var(--primary-hover); } .hlavicka--jemna .btn:disabled,.hlavicka--jemna .btn[aria-disabled="true"],.hlavicka--jemna .btn.is-off{ background:var(--surface-2); color:var(--ink-3); border-color:var(--line); } /* ============================================================================ OBSAH STRÁNKY — jeden ľavý okraj, zoznamy na celú šírku do --obsah-max (audit 13-b: stĺpec 1 150 px v strede 1 920 px a pritom zalomené hlavičky stĺpcov) ============================================================================ */ .obsah{ max-width:var(--obsah-max); margin:0 auto; padding:20px var(--obsah-pad) 72px; display:flex; flex-direction:column; gap:14px; } .obsah > *{ min-width:0; } .spinner{ display:inline-block; width:14px; height:14px; border:2.5px solid var(--line-strong); border-top-color:var(--primary); border-radius:50%; animation:kc-spin .7s linear infinite; vertical-align:-2px; } @keyframes kc-spin{ to{ transform:rotate(360deg); } } /* okraj cez premennú, aby ho poznali aj prvky, ktoré siahajú po okraj (pás s Uložiť v Nastaveniach) */ @media (max-width:900px){ .obsah{ --obsah-pad:14px; padding:14px var(--obsah-pad) 72px; } } /* ============================================================================ HLAVIČKA FRONTY — rozloženie pásu: klient (nadpis, prepínač, program), stav (počty a lišta), akcie ============================================================================ */ .hl-klient{ display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 340px; } .hl-ava{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; font-weight:700; font-size:15px; background:var(--hl-primary); color:var(--hl-primary-ink); letter-spacing:.01em; } .hl-text{ min-width:0; } .hl-riadok{ display:flex; align-items:center; gap:6px; min-width:0; } .hl-riadok h1{ margin:0; font-size:var(--fs-xl); line-height:1.2; font-weight:650; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Prepínač klienta = nadpis (audit 1a, 13-b: klient bol len v malom výbere vpravo hore). Natívny