/* ============================================================================= riscare — platformní rozhraní Návrhový systém, ne sada záplat. Tokeny nahoře, komponenty pod nimi; stránky nemají vlastní barvy ani rozestupy. Vizuál je součást produktu, ne obal: subjekt tímhle prochází výstupy, které pak předkládá dohledu. ========================================================================== */ :root { /* Nativní prvky (checkbox, šipka selectu, spinnery, scrollbar) se řídí tímhle — bez toho by v tmavém motivu zůstaly světlé. */ color-scheme: light; /* --- značka ------------------------------------------------------------ Akční modř je svěží, jasná (odvozená od loga, ale rozsvícená), aby rozhraní nepůsobilo úředně. Logo zůstává v původní tmavé modři a sedí k ní jako sytější člen téže rodiny. */ --brand: #2563eb; --brand-ink: #1e40af; --brand-mid: #5b82ef; --brand-soft: #e5edfd; --brand-line: #bcd2fb; /* --- plochy a text --- Čistá, chladně světlá plocha — modř na ní vynikne. */ --bg: #f5f7fc; --panel: #fff; --panel-2: #eef2f9; --ink: #0f172a; --ink-2: #3b4557; --muted: #64748b; --line: #e5e9f2; --line-strong: #cfd6e4; /* --- stavy --- */ --good: #0e8a51; --warn: #a85e00; --bad: #dc2626; --good-bg: #dcf7e8; --warn-bg: #fdf0d8; --bad-bg: #fde7e7; --good-line: #a9e5c6; --warn-line: #f3d79c; --bad-line: #f6c3c3; /* --- akcenty ------------------------------------------------------------ Jasná modř značky si žádá stejně živé akcenty. Sada cyan / fialová / amber / růžová / smaragd — každá agenda má svou barvu, takže se sekce pozná dřív, než se přečte nadpis, a barva znamená pořád totéž. */ --teal: #0e7490; --teal-bg: #d6f0f7; --teal-line: #a5dcea; --violet: #7c3aed; --violet-bg: #ede9fd; --violet-line: #cfc2fa; --gold: #b45309; --gold-bg: #fdeecb; --gold-line: #f2d492; --coral: #e11d48; --coral-bg: #fde4e9; --coral-line: #f6bccb; --grass: #047857; --grass-bg: #d8f3e6; --grass-line: #a8e2c8; /* --- rozměry --- Jedna stupnice pro odsazení i rádiusy. Bez ní se každá komponenta odsadí „od oka“ a stránka se rozjede. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; /* Jednotná výška formulářových prvků (input, select, tlačítko) — aby v jedné řadě neseděly editboxy, rolety a tlačítka každý v jiné výšce. Textarea je víceřádková, drží se `min-height`. Mění se tady na jednom místě. */ --control-h: 40px; --shadow-1: 0 1px 2px rgb(20 24 39 / .05); --shadow-2: 0 2px 4px rgb(20 24 39 / .04), 0 8px 24px rgb(20 24 39 / .06); --shadow-3: 0 12px 32px rgb(20 24 39 / .12); } /* --- tmavý motiv ---------------------------------------------------------- Přepnou se jen tokeny, komponenty jedou beze změny. Značková modř se zesvětlí (jinak by jako text na tmavém zmizela), stavové i akcentní barvy taky. Volbu drží `data-theme` na , nastaví ji skript v hlavičce ještě před vykreslením (bez probliknutí) podle uložené volby nebo systému. Tatáž volba (localStorage `riscare-theme`) platí i na pracovní ploše. */ :root[data-theme="dark"] { color-scheme: dark; --brand: #6ea0ff; --brand-ink: #8fb4ff; --brand-mid: #5b82ef; --brand-soft: #17233f; --brand-line: #2c3d63; --bg: #0b1120; --panel: #131c31; --panel-2: #1d2740; --ink: #eef2fb; --ink-2: #c2cbdd; --muted: #8a95ad; --line: #273350; --line-strong: #384766; --good: #34d399; --warn: #fbbf24; --bad: #f87171; --good-bg: #0f2e22; --warn-bg: #33280d; --bad-bg: #3a1d1d; --good-line: #1f5040; --warn-line: #55491c; --bad-line: #5c2e2e; --teal: #38bdf8; --teal-bg: #0c2f3d; --teal-line: #1c4a5c; --violet: #a78bfa; --violet-bg: #241d3e; --violet-line: #3b3366; --gold: #fbbf24; --gold-bg: #342a0d; --gold-line: #554719; --coral: #fb7185; --coral-bg: #3a1d27; --coral-line: #5c2f3c; --grass: #34d399; --grass-bg: #0f2e22; --grass-line: #1f5040; --shadow-1: 0 1px 2px rgb(0 0 0 / .3); --shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .45); --shadow-3: 0 12px 32px rgb(0 0 0 / .5); } /* Pruh „pohled klienta“ zůstává tmavě modrý banner s bílým textem v obou motivech. */ :root[data-theme="dark"] .viewas-bar { background: #182240; } /* Logo je s napevno modrou křivkou — na tmavé liště by zmizelo, proto se zesvětlí. */ :root[data-theme="dark"] .brand-logo { filter: brightness(0) invert(0.92); } * { box-sizing: border-box; } /* Systémové písmo schválně: PDF se tiskne bez sítě, takže webfont by se do výstupů nedostal a aplikace by vypadala jinak než to, co z ní vypadne. */ body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } /* Lehké, elegantní řezy (žádné tučné) — jemné písmo jako na přístrojovce. */ h1, h2, h3 { margin: 0; letter-spacing: -.01em; font-weight: 500; } h1 { font-size: 28px; line-height: 1.2; } h2 { font-size: 17px; } h3 { font-size: 15px; } p { margin: 0; } a { color: var(--brand); } .muted { color: var(--muted); } .small { font-size: 13px; } .bad-text { color: var(--bad); font-weight: 600; } .ok-text { color: var(--good); font-weight: 600; } /* Popisek nad nadpisem. Dává sekci kontext bez toho, aby soutěžil o pozornost. */ .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ---------- horní lišta --------------------------------------------------- Jen navigace a identita. Akce patří ke stránce, na kterou působí. */ .topbar { display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s6); height: 68px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; text-decoration: none; } /* Poměr stran loga je 173:72 — výška musí zůstat dopočítaná, jinak se deformuje. */ .brand-logo { width: 124px; height: auto; display: block; } .nav { display: flex; gap: var(--s1); margin-left: var(--s4); height: 100%; } .nav a { display: flex; align-items: center; padding: 0 var(--s3); color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .nav a:hover { color: var(--ink); } /* Bez zvýraznění aktivní položky uživatel neví, kde je. */ .nav a.on { color: var(--brand); border-bottom-color: var(--brand); } .user { margin-left: auto; display: flex; align-items: center; gap: var(--s3); } .who { font-weight: 600; white-space: nowrap; } .role { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); } /* Přepínač světlý/tmavý motiv — ikonové tlačítko v liště. */ .theme-toggle { width: 34px; height: 34px; padding: 0; font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); } .theme-toggle:hover { background: var(--bg); border-color: var(--line-strong); } /* Přepínač jazyka je stejné ikonové tlačítko, jen s kódem jazyka místo ikony. */ .lang-toggle { text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; } /* ---------- pohled klienta ---------- */ .viewas-bar { display: flex; align-items: center; gap: var(--s4); padding: 10px var(--s6); background: var(--brand-ink); color: #fff; font-size: 14px; } .viewas-bar strong { color: #b9c6e8; } .viewas-bar form { margin-left: auto; } .viewas-bar .btn-ghost { border-color: #3b4d84; color: #fff; background: transparent; } .viewas-bar .btn-ghost:hover { background: #24356b; } /* Pruh veřejného dema (jen ke čtení) — vlídný info tón, ne varovný. */ .demo-bar { padding: 8px var(--s6); text-align: center; font-size: 13.5px; background: var(--teal-bg); color: var(--teal); border-bottom: 1px solid var(--teal-line); } .demo-bar strong { font-weight: 700; } /* ---------- stránka ---------- */ .page { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); } .page-head { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s5); } .page-head > :last-child:not(:first-child) { margin-left: auto; } .page-head p { color: var(--muted); margin-top: 2px; } .head-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; } /* ---------- kontextová lišta klienta ---------- */ .ctx { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin-bottom: var(--s5); /* Bez overflow:hidden — to ořezávalo rozbalovací menu skupin (Posouzení/Provoz/ Třetí strany), které padá pod lištu. Rohy drží samotný border-radius; žádné dítě nemá pozadí až k okraji karty, takže se ořez nepotřebuje. */ } .ctx-top { display: flex; align-items: center; gap: var(--s4); padding: var(--s5) var(--s5) var(--s4); } .ctx-id { display: flex; align-items: center; gap: var(--s3); } .ctx-back { width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; text-decoration: none; font-size: 18px; color: var(--muted); border: 1px solid var(--line); background: var(--bg); } .ctx-back:hover { color: var(--brand); border-color: var(--brand-line); } .ctx-sub { color: var(--muted); font-size: 13.5px; margin-top: 1px; } .ctx-actions { margin-left: auto; display: flex; gap: var(--s2); align-items: center; } /* Odznak propadlých lhůt — vždy viditelný na liště, aby byla urgence vidět z každé stránky subjektu. Zobrazuje se jen když je co hlásit; barevně jako stav „bad". */ .ctx-alert { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; text-decoration: none; color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-line); } .ctx-alert:hover { border-color: var(--bad); } .ctx-tabs { display: flex; gap: var(--s1); padding: 0 var(--s5); border-top: 1px solid var(--line); } .ctx-tabs a { padding: 11px var(--s3); text-decoration: none; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .ctx-tabs a:hover { color: var(--ink); } .ctx-tabs a.on { color: var(--brand); border-bottom-color: var(--brand); } /* ---------- karta / sekce ---------- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4); box-shadow: var(--shadow-1); } .card > h2 { margin-bottom: var(--s3); } .card.notice { border-left: 3px solid var(--brand); } .card.notice.warn { border-left-color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); } /* ---------- metriky --------------------------------------------------------- Popisek nahoře, číslo velké, kontext pod ním. Dřív bylo pořadí obrácené a oko četlo nejdřív číslo bez toho, aby vědělo, čeho se týká. */ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-bottom: var(--s4); } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 3px); box-shadow: var(--shadow-1); position: relative; overflow: hidden; } .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-mid); } .kpi.bad::before { background: var(--bad); } .kpi.warn::before { background: var(--warn); } .kpi.good::before { background: var(--good); } .kpi .l { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); } .kpi .v { font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -.01em; } .kpi.bad .v { color: var(--bad); } .kpi .s { font-size: 13px; color: var(--muted); margin-top: var(--s2); } /* ---------- tabulky ---------- */ table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; padding: var(--s2) 10px; border-bottom: 1px solid var(--line-strong); } td { padding: 12px 10px; border-bottom: 1px solid var(--line); } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--bg); } td.num, th.num { text-align: right; } /* ---------- štítky ---------- */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .pill.good { background: var(--good-bg); color: var(--good); border-color: var(--good-line); } .pill.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); } .pill.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); } .pill.dora { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); } .pill.dora::before { display: none; } .flag { display: inline-block; margin-left: var(--s2); padding: 1px 8px; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: 11px; color: var(--muted); } /* ---------- prázdné stavy --------------------------------------------------- Prázdná obrazovka bez vysvětlení vypadá jako chyba aplikace. */ .empty { text-align: center; padding: var(--s7) var(--s5); } .empty-mark { width: 48px; height: 48px; border-radius: var(--r-md); margin: 0 auto var(--s4); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); } .empty-mark svg { width: 24px; height: 24px; } .empty h2 { margin-bottom: var(--s2); } .empty p { color: var(--muted); max-width: 460px; margin: 0 auto var(--s4); } /* ---------- klienti ---------- */ .client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s3); } .client-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); transition: border-color .12s, box-shadow .12s, transform .12s; } .client-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-1px); } .client-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s4); } .client-head h2 { margin: 0; flex: 1; } /* Skóre připravenosti vede kartu — pásmo (good/warn/bad) je stejné jako na Připravenosti. */ .client-score { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); margin-bottom: var(--s3); } .client-score.score-good { background: var(--good-bg); } .client-score.score-warn { background: var(--warn-bg); } .client-score.score-bad { background: var(--bad-bg); } .client-score-num { font-size: 30px; font-weight: 400; letter-spacing: -.01em; line-height: 1; color: var(--ink); } .client-score-num span { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; } .client-score.score-good .client-score-num { color: var(--good); } .client-score.score-warn .client-score-num { color: var(--warn); } .client-score.score-bad .client-score-num { color: var(--bad); } .client-score-word { font-size: 13px; font-weight: 600; color: var(--muted); } .client-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s4); } .client-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: 0 0 var(--s4); } .client-stats dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .client-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 400; letter-spacing: -.01em; } .client-actions { display: flex; gap: var(--s2); } /* ---------- skupinové dlaždice na přehledu (Posouzení / Provoz / Třetí strany) ---------- Obsah nabídek z horního menu jako stavový rozcestník: každá agenda svůj řádek, barevný stav vpravo, celý řádek je odkaz do detailu. */ .group-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); } .group-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--shadow-1); } .group-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2); } .group-card-head h3 { margin: 0; font-size: 15px; } .group-card-head .mark { color: var(--accent, var(--brand)); } .group-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 500; } .group-row::after { content: "›"; color: var(--muted); font-size: 18px; margin-left: 2px; } .group-row:hover { color: var(--brand); } .group-row:hover > span:first-child { text-decoration: underline; } .group-row > span:first-child { flex: 1; } .group-row .pill { flex: none; } /* ---------- rozcestník ---------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); } .tile { display: flex; align-items: flex-start; gap: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s4) var(--s4) var(--s4); text-decoration: none; color: inherit; box-shadow: var(--shadow-1); transition: border-color .12s, box-shadow .12s, transform .12s; } .tile:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-1px); } .tile-icon { flex: none; width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); } .tile-icon svg { width: 20px; height: 20px; } .tile-body { display: block; } .tile-body strong { display: block; font-size: 15px; margin-bottom: 3px; } .tile-body span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; } /* Pracovní plocha je hlavní nástroj — dostane celý řádek a obrácené barvy. */ .tile-lead { grid-column: 1 / -1; align-items: center; background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 20px rgb(21 40 100 / .22); } .tile-lead:hover { box-shadow: 0 10px 28px rgb(21 40 100 / .3); border-color: var(--brand); } .tile-lead .tile-icon { background: rgb(255 255 255 / .16); color: #fff; width: 44px; height: 44px; } .tile-lead .tile-icon svg { width: 24px; height: 24px; } .tile-lead .tile-body strong { font-size: 17px; } .tile-lead .tile-body span { color: rgb(255 255 255 / .8); } .tile-go { margin-left: auto; font-size: 22px; opacity: .85; } /* ---------- registr informací ---------- */ .roi-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); } .roi-head h2 { margin: 0; flex: 1; } .roi-head code { background: var(--brand-soft); padding: 3px 8px; border-radius: 6px; font-size: 13px; color: var(--brand); margin-right: 6px; } .roi-badges { display: flex; gap: var(--s2); align-items: center; } .mini-link { padding: 4px 10px; font-size: 12px; } /* Šablony mají až 18 sloupců — tabulka roluje uvnitř karty, ne celá stránka. */ .roi-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--s5)); padding: 0 var(--s5); } .roi-table { min-width: 100%; white-space: nowrap; } .roi-table th { vertical-align: bottom; } .roi-table th .field { display: block; font-size: 10px; color: var(--brand-mid); letter-spacing: .06em; } .roi-table th .req { color: var(--bad); margin-left: 2px; } .roi-table td { font-size: 13px; } .cell-missing { background: var(--bad-bg); color: var(--bad); font-weight: 600; } /* ---------- soulad ---------- */ td.ref { white-space: nowrap; font-size: 12px; color: var(--brand-mid); font-weight: 600; } .small-cell { font-size: 12px; color: var(--muted); } .incident { padding: var(--s4) 0; border-bottom: 1px solid var(--line); } .incident:last-child { border-bottom: 0; padding-bottom: 0; } .incident-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .reasons { margin: var(--s2) 0 10px; padding-left: 18px; font-size: 13px; color: var(--muted); } .reasons li { margin: 2px 0; } /* ---------- metodika, drift ---------- */ .drift-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2); flex-wrap: wrap; } .drift-head h2 { margin: 0; } .drift-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin: var(--s4) 0 6px; } .drift-list { margin: 0; padding-left: 18px; font-size: 14px; } .drift-list li { margin: 3px 0; } .drift-list li.ok { color: var(--good); } .deadlines { margin-top: 6px; } .todo { list-style: none; padding: 0; margin: 0; } .todo li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; } .todo li:last-child { border-bottom: 0; } /* ---------- tlačítka ---------- */ .btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h); box-sizing: border-box; padding: 0 16px; border-radius: var(--r-sm); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s; } .btn-primary .ico, .btn-ghost .ico { width: 16px; height: 16px; } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-1); } .btn-primary:hover { background: var(--brand-ink); } /* V tmavém motivu je značková modř světlá — bílý text na ní nemá kontrast. Tmavé plné tlačítko proto veze tmavý text (v obou stavech; --brand-ink je v tmavém taky světlá). */ :root[data-theme="dark"] .btn-primary { color: #0b1120; } :root[data-theme="dark"] .btn-primary:hover { color: #0b1120; } .btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--bg); border-color: var(--brand-line); } .btn-ghost.on { background: var(--brand); color: #fff; border-color: var(--brand); } :where(.btn-primary, .btn-ghost, .nav a, .ctx-tabs a, .tile, .client-card):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ---------- formulářová pole ---------- */ .field-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; } input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input[type=time], select { width: 100%; height: var(--control-h); box-sizing: border-box; padding: 0 12px; font: inherit; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); } .fld { display: inline-flex; flex-direction: column; gap: 4px; } .fld > span { line-height: 1; } textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; font: inherit; min-height: calc(var(--control-h) * 2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; } /* ---------- přihlášení ---------- Vstupní okno: vlevo brandový panel s „budíkem" skóre, vpravo čistý formulář. Panel drží hlubokou modř (bez ohledu na motiv), formulářová strana jede na tokenech. */ /* Centrovaný rámeček uprostřed obrazovky (jako Finanční studio) — bez dělení na půlky. */ .login-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s5); background: radial-gradient(80% 50% at 50% -10%, var(--brand-soft) 0%, transparent 55%), var(--bg); } .login-box { position: relative; width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 40px 40px 34px; box-shadow: 0 24px 60px -32px rgba(15, 23, 42, .35); } .login-logo { display: block; width: 152px; margin: 0 auto var(--s3); } /* Logo je napevno modrá křivka — na tmavém motivu ho zesvětlíme. */ :root[data-theme="dark"] .login-logo { filter: brightness(0) invert(1); } .login-form-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; text-align: center; color: var(--ink); margin: 0 0 var(--s5); } .login-lang { position: absolute; top: 14px; right: 14px; display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; } .login-lang a { text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding: 3px 10px; border-radius: 999px; line-height: 1; } .login-lang a:hover { color: var(--ink); } .login-lang a.on { background: var(--brand); color: #fff; } :root[data-theme="dark"] .login-lang a.on { color: #0b1120; } /* Vstupy s ikonou, jemný focus prstenec. Pole jsou na --bg, ať se odliší od bílé karty. */ .login-fields { display: grid; gap: 12px; } .login-field { position: relative; display: block; margin: 0; } .login-field-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; transition: color .15s; } .login-field:focus-within .login-field-ico { color: var(--brand); } .login-field input { width: 100%; height: 50px; padding: 0 16px 0 44px; font-family: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .login-field input::placeholder { color: var(--muted); } .login-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .login-submit { width: 100%; height: 50px; margin-top: 6px; border-radius: 12px; gap: 8px; font-size: 15px; } .login-submit svg { width: 18px; height: 18px; } .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; } @media (max-width: 460px) { .login-box { padding: 32px 26px 28px; } } .alert { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line); padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: var(--s4); font-size: 14px; } .demo { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); } .demo-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } .demo-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 var(--s4); } .demo-group { margin-top: var(--s4); } .demo-group:first-of-type { margin-top: 0; } .demo-group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .demo-group-title { font-size: 12.5px; font-weight: 750; color: var(--brand); } .demo-group-note { font-size: 11.5px; color: var(--muted); } .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .demo-account { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 11px; font: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; } .demo-account:hover { border-color: var(--brand-line); background: var(--brand-soft); } .demo-account strong { font-size: 13px; line-height: 1.25; } .demo-tag { font-size: 11px; color: var(--muted); } .demo-cred { font-size: 10.5px; color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-top: 2px; word-break: break-all; } @media (max-width: 480px) { .demo-grid { grid-template-columns: 1fr; } } /* Banner při příchodu z webu „Vyzkoušet" — persona je předvyplněná, stačí Přihlásit. */ .login-prefill { display: flex; flex-direction: column; gap: 2px; background: var(--brand-soft); border: 1px solid var(--brand-line); border-left: 3px solid var(--brand); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: var(--s4); } .login-prefill strong { font-size: 14px; color: var(--brand); } .login-prefill span { font-size: 12.5px; color: var(--ink-2); } .login-prefill .login-prefill-hint { color: var(--muted); font-size: 12px; margin-top: 2px; } /* ---------- dokumentace ---------- */ .doc-head { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s3); } .doc-head h2 { margin: 0 0 2px; } .doc-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); } .doc-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); } .doc-check .drift-sub { margin-top: 0; } .doc-check p { margin: 4px 0; } .doc-text { margin-top: var(--s4); } .doc-text summary { cursor: pointer; font-size: 13px; color: var(--muted); } .doc-text pre { margin-top: 10px; padding: var(--s4); background: var(--bg); border-radius: var(--r-sm); font-size: 12px; line-height: 1.6; white-space: pre-wrap; max-height: 380px; overflow: auto; } /* ---------- cyklus zlepšování ---------- */ .cycle-meta { display: grid; grid-template-columns: max-content 1fr; gap: 3px var(--s4); margin: 0; } .cycle-meta dt { color: var(--muted); font-size: 13px; } .cycle-meta dd { margin: 0; font-size: 13px; } .phases { list-style: none; margin: var(--s2) 0 0; padding: 0; } .phase { border-left: 2px solid var(--line); padding: 0 0 var(--s5) var(--s5); margin-left: 16px; position: relative; } .phase:last-child { border-left-color: transparent; padding-bottom: 0; } .phase.done { border-left-color: var(--good); } .phase.active { border-left-color: var(--brand); } .phase-head { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: 10px; } .phase-head h3 { margin: 0 0 2px; font-size: 16px; } .phase-mark { position: absolute; left: -17px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--bg); color: var(--muted); border: 2px solid var(--line); } .phase.done .phase-mark { background: var(--good-bg); color: var(--good); border-color: var(--good); } .phase.active .phase-mark { background: var(--brand); color: #fff; border-color: var(--brand); } .facts { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: 4px; } .facts li { display: flex; gap: var(--s3); font-size: 14px; } .fact-label { color: var(--muted); min-width: 220px; } .fact-value { font-weight: 600; } .phase-actions { display: flex; gap: var(--s2); margin-top: var(--s2); } .phase-note { margin: 0; padding: 10px 12px; background: var(--bg); border-radius: var(--r-sm); font-size: 14px; } .start-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); align-items: end; } .close-form { display: flex; gap: var(--s3); align-items: end; flex-wrap: wrap; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); } .close-form label { flex: 1 1 280px; } .close-form p { flex: 1 1 100%; margin: 0; } /* ---------- manuál ---------- Sazba se drží tištěné podoby (Services/PrintTheme.cs): stejné lekce, stejný jazyk. Kdo si manuál přečte na obrazovce a pak si ho stáhne, má vidět totéž. */ .manual { padding: var(--s2) var(--s5) var(--s5); } .lesson { padding: var(--s6) 0; border-bottom: 1px solid var(--line); } .lesson:last-child { border-bottom: 0; } .lesson-head { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s5); } .lesson-head h2 { margin: 0; font-size: 20px; } .lesson-no { flex: none; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 9px; background: var(--accent, var(--brand)); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; } .lesson-where { margin: 3px 0 0; font-size: 13px; color: var(--muted); } .lesson-why { background: var(--accent-bg, var(--brand-soft)); border-left: 3px solid var(--accent, var(--brand)); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 15px; margin: 0 0 var(--s5); color: var(--ink); } .lesson h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 var(--s3); font-weight: 700; } /* Čísla kroků a vykřičníky u varování jsou odznaky, ne odrážky — v tisku i tady. */ .lesson-steps { counter-reset: krok; list-style: none; padding: 0; margin: 0 0 var(--s5); } .lesson-steps li { counter-increment: krok; position: relative; padding-left: 38px; margin: 0 0 var(--s4); } .lesson-steps li::before { content: counter(krok); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-bg, var(--brand-soft)); border: 1px solid var(--accent-line, var(--brand-line)); color: var(--accent, var(--brand)); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .lesson-watch { list-style: none; padding: 0; margin: 0 0 var(--s5); } .lesson-watch li { position: relative; padding-left: 38px; margin: 0 0 var(--s4); } .lesson-watch li::before { content: "!"; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .lesson-done { margin: 0; padding: 12px 15px; background: var(--good-bg); border-left: 3px solid var(--good); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 14px; color: var(--ink); } .lesson-done strong { color: var(--good); } /* ---------- responzivita ---------- */ @media (max-width: 1000px) { .kpis { grid-template-columns: 1fr 1fr; } .topbar { padding: 0 var(--s4); gap: var(--s3); } .ctx-top { flex-wrap: wrap; } /* Akce (Zpráva, Pracovní plocha, odznak lhůt) se na úzké obrazovce musí zalomit, jinak tlačítko „Pracovní plocha" přetéká a stránka roluje vodorovně. */ .ctx-actions { margin-left: 0; flex-wrap: wrap; } /* Po seskupení do pěti položek se lišta vejde a řádkuje se; overflow-x by navíc ořezával rozbalovací menu. */ .ctx-tabs { flex-wrap: wrap; } } @media (max-width: 640px) { .kpis { grid-template-columns: 1fr; } .page { padding: var(--s4) var(--s3) var(--s6); } /* Horní lišta se na mobil nevejde do jedné řady — logo a akce zůstanou nahoře, navigace se přesune pod ně na celou šířku. Jméno a role se skryjí (uživatel ví, kdo je; o který subjekt jde, říká hlavička stránky). */ .topbar { height: auto; flex-wrap: wrap; row-gap: var(--s2); padding: var(--s3); gap: var(--s3); } .topbar .who, .topbar .role { display: none; } /* Navigace má víc položek, než se vejde do řádku — musí se zalomit, jinak přetéká vpravo (Rychlý start / Manuál) a stránka roluje vodorovně. */ .nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; row-gap: var(--s1); } .nav a { padding: 0 var(--s2); } .brand-logo { width: 96px; } /* KPI karty na úzkém displeji nemusí držet výšku popisku dvou řádků. */ .kpi-top { min-height: 0; } /* Široké tabulky na mobil nezúžíš — ať rolují vodorovně uvnitř karty místo přetékání přes její okraj. */ .card table { display: block; overflow-x: auto; } } /* ---------- tisk ---------- */ @media print { /* Ovládání aplikace na papír nepatří — po vytištění se na nic kliknout nedá. Skrývají se tlačítka, ne celé formuláře: v těch může být i obsah. */ .topbar, .viewas-bar, .head-actions, .doc-actions, .client-actions, .ctx-tabs, .ctx-actions, button, .btn-primary, .btn-ghost { display: none !important; } body { background: #fff; } .page { max-width: none; padding: 0; } .card, .ctx { border: 0; padding: 0; margin-bottom: 14px; box-shadow: none; break-inside: avoid; } .manual { padding: 0; } /* Lekce je jedna stránka — stejně jako v PDF. */ .lesson { break-before: page; break-inside: avoid; border-bottom: 0; padding: 0; } .lesson:first-child { break-before: auto; } a { color: inherit; text-decoration: none; } } /* ---------- členění stránky ------------------------------------------------ Dlouhý sloupec karet se čte hůř než tři pojmenované bloky. Eyebrow říká, co v bloku je, dřív než ho oko začne luštit. */ .block { margin-bottom: var(--s6); } .block:last-child { margin-bottom: 0; } .block > .eyebrow { margin-bottom: var(--s3); } .block-head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s3); } .block-head > .eyebrow { margin: 0; } .block-head > a { margin-left: auto; text-decoration: none; font-weight: 600; } .block-head > a:hover { text-decoration: underline; } .block .card { margin-bottom: 0; } /* ---------- akcenty a piktogramy ------------------------------------------ Barva se nepřiděluje od oka: každá agenda ji má svou a drží se jí všude (záložka, hlavička sekce, dlaždice). Utilita nastaví trojici proměnných, komponenta si z nich vezme, co potřebuje. */ .a-brand { --accent: var(--brand); --accent-bg: var(--brand-soft); --accent-line: var(--brand-line); } .a-teal { --accent: var(--teal); --accent-bg: var(--teal-bg); --accent-line: var(--teal-line); } .a-violet { --accent: var(--violet); --accent-bg: var(--violet-bg); --accent-line: var(--violet-line); } .a-gold { --accent: var(--gold); --accent-bg: var(--gold-bg); --accent-line: var(--gold-line); } .a-coral { --accent: var(--coral); --accent-bg: var(--coral-bg); --accent-line: var(--coral-line); } .a-grass { --accent: var(--grass); --accent-bg: var(--grass-bg); --accent-line: var(--grass-line); } .ico { width: 18px; height: 18px; flex: none; } /* Chip s ikonou. Dává sekci obrázek dřív, než se čte nadpis. */ .mark { width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-bg, var(--brand-soft)); color: var(--accent, var(--brand)); border: 1px solid var(--accent-line, var(--brand-line)); } /* ---------- hlavička bloku ---------- */ .block { margin-bottom: var(--s6); } .block-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); } .block-head .eyebrow { color: var(--accent, var(--muted)); } .block-head > a { margin-left: auto; text-decoration: none; font-weight: 600; font-size: 13px; } .block .card { margin-bottom: 0; } /* ---------- metriky s ikonou ---------- */ .kpi { position: relative; } /* Popisek se u delších názvů zalomí na dva řádky; bez pevné výšky by číslo v jedné kartě sedělo níž než ve zbytku řady a řada by vypadala rozházeně. */ .kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); min-height: 40px; } .kpi-top .mark { width: 26px; height: 26px; border-radius: 8px; } .kpi-top .mark .ico { width: 15px; height: 15px; } .kpi .l { margin: 0; } /* Pásek nahoře nese barvu agendy; stavové třídy ji přebijí, protože stav je důležitější než to, o čem karta je. */ .kpi::before { background: var(--accent, var(--brand-line)); } /* ---------- záložky s ikonou ---------- */ .ctx-tabs a { display: inline-flex; align-items: center; gap: 7px; } .ctx-tabs a .ico { width: 16px; height: 16px; opacity: .75; } .ctx-tabs a.on .ico { opacity: 1; color: var(--brand); } /* ---------- skupiny záložek (rozbalovací) ---------------------------------- Sedm dílčích sekcí by v jednom řádku bylo nečitelných, proto se skládají do tří skupin. Menu se otevírá na hover i na fokus (`:focus-within`) — na dotyku, kde hover není, ho otevře ťuknutí, které prvek zaostří. */ .ctx-group { position: relative; display: inline-flex; } .ctx-group-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px var(--s3); margin-bottom: -1px; font: inherit; font-weight: 600; font-size: 14px; line-height: normal; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; } .ctx-group-btn:hover { color: var(--ink); } .ctx-group-btn .ico { width: 16px; height: 16px; opacity: .75; } .ctx-group-btn.on { color: var(--brand); border-bottom-color: var(--brand); } .ctx-group-btn.on .ico { opacity: 1; color: var(--brand); } .ctx-caret { font-size: 10px; opacity: .7; margin-left: -2px; } .ctx-menu { position: absolute; top: 100%; left: 0; z-index: 60; display: none; flex-direction: column; min-width: 190px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow, 0 10px 30px rgba(21, 40, 100, .12)); } .ctx-group:hover .ctx-menu, .ctx-group:focus-within .ctx-menu, .ctx-group.open .ctx-menu { display: flex; } /* Otevřená skupina má obrácenou šipku — potvrzení, že klik zabral. */ .ctx-group.open .ctx-caret { transform: rotate(180deg); } .ctx-menu a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 7px; border: 0; margin: 0; font-weight: 500; font-size: 14px; color: var(--ink); text-decoration: none; } .ctx-menu a:hover { background: var(--bg); } .ctx-menu a.on { color: var(--brand); font-weight: 600; background: var(--brand-soft); } .ctx-menu a .ico { width: 16px; height: 16px; opacity: .75; } .ctx-menu a.on .ico { opacity: 1; color: var(--brand); } /* ---------- zvýraznění po úkonu ---------- */ .card.highlight { border-color: var(--grass-line); box-shadow: 0 0 0 3px var(--grass-bg); } /* ---------- iniciála klienta ---------- */ .avatar { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--accent-bg, var(--brand-soft)); color: var(--accent, var(--brand)); border: 1px solid var(--accent-line, var(--brand-line)); } /* ---------- kalendář lhůt ---------- */ /* Druh lhůty jako chip s ikonou; barvu nese akcent agendy (.a-teal atd.). */ .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 3px 10px 3px 8px; border-radius: 20px; font-size: 12.5px; font-weight: 600; background: var(--accent-soft, var(--brand-soft)); color: var(--accent, var(--brand)); border: 1px solid var(--accent-line, var(--brand-line)); } .chip .ico { width: 14px; height: 14px; } /* ---------- auditní stopa ---------- Filtr GET (segment aktéra + chipy druhů) a čtecí tabulka událostí. */ .stopa-filtr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-bottom: var(--s4); } /* Přepínač aktéra — tři odkazy jako jeden segment. */ .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } .seg a { padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; border-left: 1px solid var(--line); } .seg a:first-child { border-left: 0; } .seg a:hover { color: var(--ink); background: var(--bg); } .seg a.on { background: var(--brand); color: #fff; } .stopa-druhy { display: flex; flex-wrap: wrap; gap: 6px; } .stopa-druhy .chip { text-decoration: none; cursor: pointer; } /* Aktivní chip se vyplní barvou agendy. */ .chip.on { background: var(--accent, var(--brand)); color: #fff; border-color: var(--accent, var(--brand)); } .chip.on .ico { color: #fff; } .pill.staff { background: var(--panel-2, #eef1f6); color: var(--muted); border-color: var(--line); } .pill.staff::before { background: var(--muted); } table.stopa td { vertical-align: top; } .stopa-kdy { white-space: nowrap; } .stopa-kdy span { display: block; } table.stopa td code { color: var(--muted); } table.stopa td .chip { text-decoration: none; } .stopa-strany { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); } .stopa-nav { display: inline-flex; align-items: center; gap: var(--s4); } /* ---------- skóre připravenosti na audit ---------- */ .readiness { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: center; } .score { text-align: center; padding: var(--s4) var(--s6); border-radius: var(--r-lg); min-width: 190px; } .score-good { background: var(--good-bg); } .score-warn { background: var(--warn-bg); } .score-bad { background: var(--bad-bg); } .score-num { font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -.005em; color: var(--ink); } .score-num span { font-size: 22px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .score-good .score-num { color: var(--good); } .score-warn .score-num { color: var(--warn); } .score-bad .score-num { color: var(--bad); } .score-word { margin-top: var(--s2); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .1em; } .score-good .score-word { color: var(--good); } .score-warn .score-word { color: var(--warn); } .score-bad .score-word { color: var(--bad); } .score-note p { margin: 0 0 var(--s3); } .score-note p:last-child { margin-bottom: 0; } .dims { display: grid; gap: var(--s4); } .dim { display: flex; gap: var(--s4); align-items: flex-start; } .dim-body { flex: 1; min-width: 0; } .dim-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: 6px; } .dim-head strong { font-size: 15px; } .dim-weight { font-size: 12px; color: var(--muted); } .dim-score { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .dim-score.good { color: var(--good); } .dim-score.warn { color: var(--warn); } .dim-score.bad { color: var(--bad); } .bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; margin-bottom: 5px; } .bar-fill { display: block; height: 100%; border-radius: 4px; } .bar-fill.good { background: var(--good); } .bar-fill.warn { background: var(--warn); } .bar-fill.bad { background: var(--bad); } @media (max-width: 640px) { .readiness { grid-template-columns: 1fr; } } /* ---------- evidence školení ---------- */ .training-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s4); align-items: end; } .training-form label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); } .training-form input { font: inherit; height: var(--control-h); box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); } .training-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .training-actions { display: flex; gap: var(--s2); grid-column: 1 / -1; } .link-danger { background: none; border: 0; padding: 0; margin-left: 10px; font: inherit; font-size: 13px; color: var(--bad); cursor: pointer; text-decoration: underline; } /* ---------- due diligence dotazník ---------- */ .dd-q { padding: 12px 0; border-bottom: 1px solid var(--line); } .dd-q:last-of-type { border-bottom: 0; } .dd-text { font-size: 15px; margin-bottom: 8px; } .dd-opts { display: flex; flex-wrap: wrap; gap: 8px; } .dd-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line-strong); font-size: 13.5px; cursor: pointer; background: var(--panel); color: var(--ink); user-select: none; } .dd-opt input { margin: 0; } .dd-opt:hover { border-color: var(--brand-line); } .dd-opt.sel.good { background: var(--good-bg); border-color: var(--good-line); color: var(--good); font-weight: 600; } .dd-opt.sel.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); font-weight: 600; } .dd-opt.sel.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); font-weight: 600; } .dd-meta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: 18px; } .dd-meta label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); } .dd-meta input { font: inherit; height: var(--control-h); box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }