/* NahrAI — styly agendy „Schvalovací workflow" (modul workflow.js). Vlastní soubor, protože modul je samostatný; v2.css zůstává nedotčené. Všechno je scopované pod [data-ui="v2"] stejně jako zbytek portálu a barvy, mezery i rádiusy pocházejí výhradně z tokens.css — díky tomu funguje světlý i tmavý motiv bez jediného vlastního přepínače. Vlastní proměnné (--wf-*) jsou definované na [data-ui="v2"], protože právě tam tokens.css zakládá celý motiv; na holém :root by var(--line) a spol. neexistovaly. Jsou to odvozeniny, ne nové barvy. */ [data-ui="v2"] { /* Spojnice nese informaci (co následuje po čem), takže musí splnit WCAG 1.4.11 → 3:1 proti plátnu --bg-2. S --line-2 měla naměřeno 1,19:1 (světlý) a 1,49:1 (tmavý) — šipky byly prakticky neviditelné. --field-line je sice zavedený pro nositele informace, ale je počítaný proti --surface; proti zapuštěnému --bg-2 vyjde jen 2,78:1 (naměřeno v prohlížeči). Proto --ink-3: naměřeno 4,31:1 ve světlém a 4,89:1 v tmavém motivu, a to i pro okraj uzlu Upozornění. NEVRACET na --line-2 ani na --field-line. */ --wf-edge: var(--ink-3); /* běžná spojnice v diagramu */ --wf-edge-hot: var(--accent); /* prošlá cesta po simulaci */ --wf-node-bg: var(--surface); --wf-canvas-bg: var(--bg-2); --wf-node-w: 196px; --wf-rail-w: 236px; /* levý sloupec s paletou */ --wf-detail-w: 352px; /* pravý sloupec s detailem */ } /* ============================================================ Tónová paleta — jedno místo, odkud čerpají uzly, kroky i karty ============================================================ */ [data-ui="v2"] .wf-tone-accent { --wf-tone: var(--accent); --wf-tone-soft: var(--accent-soft); --wf-tone-text: var(--accent-text); } [data-ui="v2"] .wf-tone-info { --wf-tone: var(--info); --wf-tone-soft: var(--info-soft); --wf-tone-text: var(--info); } [data-ui="v2"] .wf-tone-warn { --wf-tone: var(--warn); --wf-tone-soft: var(--warn-soft); --wf-tone-text: var(--warn); } [data-ui="v2"] .wf-tone-ok { --wf-tone: var(--ok); --wf-tone-soft: var(--ok-soft); --wf-tone-text: var(--ok); } [data-ui="v2"] .wf-tone-bad { --wf-tone: var(--bad); --wf-tone-soft: var(--bad-soft); --wf-tone-text: var(--bad); } /* Tón „mut" nese uzel Upozornění. S --line-2 měl jeho okraj proti plátnu 1,19:1 a krok v diagramu neměl viditelnou hranici vůbec; --ink-3 drží nad 3:1 ve světlém i tmavém motivu. NEVRACET na --line-2. */ [data-ui="v2"] .wf-tone-mut { --wf-tone: var(--ink-3); --wf-tone-soft: var(--bg-2); --wf-tone-text: var(--ink-2); } /* ============================================================ Skořápka agendy ============================================================ */ [data-ui="v2"] .wf-root { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; } [data-ui="v2"] .wf-body { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; } [data-ui="v2"] .wf-stack { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; } [data-ui="v2"] .wf-head { display: flex; align-items: flex-end; gap: var(--sp-7); flex-wrap: wrap; } [data-ui="v2"] .wf-head-title { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } [data-ui="v2"] .wf-head-title h2 { margin: 0; color: var(--ink); } [data-ui="v2"] .wf-head-title p { margin: 0; max-width: 72ch; } [data-ui="v2"] .wf-spacer { flex: 1 1 auto; min-width: 0; } [data-ui="v2"] .wf-muted { color: var(--ink-2); } [data-ui="v2"] .wf-warn-text { color: var(--warn); font-weight: 600; } [data-ui="v2"] .wf-sep { padding: 0 var(--sp-2); color: var(--ink-3); } /* Skeleton při načítání — stejný rytmus jako .v2-docs-skeleton ve v2.css. */ [data-ui="v2"] .wf-skeleton { display: flex; flex-direction: column; gap: var(--sp-5); } [data-ui="v2"] .wf-sk-row { height: 20px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--bg-2), var(--surface-2), var(--bg-2)); background-size: 200% 100%; animation: wf-sk 1.2s linear infinite; } @keyframes wf-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } } [data-ui="v2"] .wf-panel-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-7); border-bottom: 1px solid var(--line); } [data-ui="v2"] .wf-empty { padding: 40px var(--sp-9); } /* ============================================================ Seznam workflow ============================================================ */ [data-ui="v2"] .wf-list-head { align-items: flex-start; } [data-ui="v2"] .wf-list-head p { margin: var(--sp-1) 0 0; max-width: 64ch; } [data-ui="v2"] .wf-list-cols, [data-ui="v2"] .wf-item { display: grid; align-items: center; gap: var(--sp-5); grid-template-columns: minmax(0, 2.2fr) minmax(110px, .8fr) minmax(190px, 1.1fr) minmax(150px, 1fr) auto; padding: var(--sp-5) var(--sp-7); } [data-ui="v2"] .wf-list-cols { padding-block: var(--sp-3); background: var(--surface-2); border-bottom: 1px solid var(--line); } [data-ui="v2"] .wf-list-items { list-style: none; margin: 0; padding: 0; } [data-ui="v2"] .wf-item { border-bottom: 1px solid var(--line); } [data-ui="v2"] .wf-item:last-child { border-bottom: 0; } [data-ui="v2"] .wf-item:hover { background: var(--surface-2); } [data-ui="v2"] .wf-item.is-archived { opacity: .68; } [data-ui="v2"] .wf-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } [data-ui="v2"] .wf-item-name { border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; color: var(--ink); font: 600 14.5px/1.35 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-ui="v2"] .wf-item-name:hover { color: var(--accent-text); text-decoration: underline; } [data-ui="v2"] .wf-item-desc { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-ui="v2"] .wf-item-types, [data-ui="v2"] .wf-item-state { display: flex; flex-wrap: wrap; gap: var(--sp-2); } [data-ui="v2"] .wf-item-pub { color: var(--ink-2); min-width: 0; } [data-ui="v2"] .wf-item-act { display: flex; justify-content: flex-end; gap: var(--sp-3); } [data-ui="v2"] .wf-list-foot { padding: var(--sp-4) var(--sp-7); border-top: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); } /* ============================================================ Lišta designeru ============================================================ */ [data-ui="v2"] .wf-toolbar { position: sticky; top: var(--sticky-top); z-index: 5; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--shadow); } [data-ui="v2"] .wf-toolbar-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; } [data-ui="v2"] .wf-toolbar-title > b { font: 700 15.5px/1.25 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-ui="v2"] .wf-toolbar-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } [data-ui="v2"] .wf-flash { margin: 0; } /* Přepínač „Řídí doklady". Geometrie podle AGENTS.md: skutečné zaškrtávátko vlevo před popiskem, celý popisek klikatelný — žádná pravá dráha ani stavové slovo. Bez něj se publikované workflow nedalo z portálu zapnout a v seznamu svítilo „Neaktivní" proti hlášce o publikaci. */ [data-ui="v2"] .wf-active { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font: 500 13px/1.3 var(--font-sans); white-space: nowrap; } [data-ui="v2"] .wf-active:hover { border-color: var(--line-2); } [data-ui="v2"] .wf-active input[type="checkbox"] { margin: 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); } [data-ui="v2"] .wf-active.is-disabled { cursor: default; color: var(--ink-2); } [data-ui="v2"] .wf-active.is-disabled:hover { border-color: var(--line); } /* v2.css má pro poznámkový box tóny bad/warn/ok, ale ne info — modul ho přitom používá pro vysvětlivky (poznámka simulátoru, upozornění před publikací), které se bez tohoto pravidla vykreslily jako šedý text bez tónu. Barvy z tokens.css, takže platí ve světlém i tmavém motivu. Scopováno pod .wf-root, aby soubor modulu nepřebarvoval zbytek portálu — dialogy modulu se vykreslují uvnitř .wf-root, takže je pravidlo pokrývá. */ [data-ui="v2"] .wf-root .v2-note.info { border-color: var(--info); background: var(--info-soft); color: var(--ink); } /* ============================================================ Rozvržení designeru ============================================================ */ [data-ui="v2"] .wf-designer { display: grid; align-items: start; gap: var(--sp-7); grid-template-columns: var(--wf-rail-w) minmax(0, 1fr) var(--wf-detail-w); } [data-ui="v2"] .wf-col { display: flex; flex-direction: column; gap: var(--sp-7); min-width: 0; } [data-ui="v2"] .wf-col-left, [data-ui="v2"] .wf-col-right { position: sticky; top: calc(var(--sticky-top) + 64px); } @media (max-width: 1400px) { [data-ui="v2"] .wf-designer { grid-template-columns: 210px minmax(0, 1fr) 320px; } } @media (max-width: 1200px) { [data-ui="v2"] .wf-designer { grid-template-columns: minmax(0, 1fr); } [data-ui="v2"] .wf-col-left, [data-ui="v2"] .wf-col-right { position: static; } } /* ============================================================ Paleta kroků ============================================================ */ [data-ui="v2"] .wf-palette-help { margin: var(--sp-4) var(--sp-7) 0; } [data-ui="v2"] .wf-palette-list { list-style: none; margin: 0; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } [data-ui="v2"] .wf-palette-btn { width: 100%; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); cursor: pointer; text-align: left; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } [data-ui="v2"] .wf-palette-btn:hover { background: var(--wf-tone-soft); border-color: var(--wf-tone); } [data-ui="v2"] .wf-palette-glyph { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--wf-tone-soft); color: var(--wf-tone-text); } [data-ui="v2"] .wf-palette-glyph svg { fill: currentColor; } [data-ui="v2"] .wf-palette-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } [data-ui="v2"] .wf-palette-text b { font: 600 13.5px/1.3 var(--font-sans); } [data-ui="v2"] .wf-palette-text small { font: 400 11.5px/1.35 var(--font-sans); color: var(--ink-2); } [data-ui="v2"] .wf-palette-add { margin-left: auto; font-size: 18px; color: var(--ink-3); } [data-ui="v2"] .wf-palette-compact { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-5) var(--sp-7); } /* ============================================================ Diagram ============================================================ */ /* Diagram roste s počtem vrstev; bez stropu by jedno workflow udělalo ze stránky několikametrový svitek. Uvnitř se posouvá, stránka zůstane klidná. */ [data-ui="v2"] .wf-diagram-wrap { overflow: auto; padding: var(--sp-7); max-height: min(72vh, 760px); background: /* Mřížka je dekorace, ne nositel informace — smí zůstat tlumená. Kdyby dostala kontrast spojnic, plátno by zašumělo a šipky by v něm zanikly znovu. */ radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--line-2) 70%, transparent) 1px, transparent 0) 0 0 / 22px 22px, var(--wf-canvas-bg); } [data-ui="v2"] .wf-diagram-wrap.is-mini { max-height: 360px; padding: var(--sp-5); } [data-ui="v2"] .wf-diagram { display: block; max-width: 100%; height: auto; } [data-ui="v2"] .wf-empty-text { fill: var(--ink-3); font: 500 13px/1 var(--font-sans); } [data-ui="v2"] .wf-edge { fill: none; stroke: var(--wf-edge); stroke-width: 1.75; } [data-ui="v2"] .wf-edge.is-false { stroke-dasharray: 5 4; } [data-ui="v2"] .wf-edge.is-hot { stroke: var(--wf-edge-hot); stroke-width: 2.75; stroke-dasharray: none; } [data-ui="v2"] .wf-arrow { fill: var(--wf-edge); } [data-ui="v2"] .wf-arrow.is-hot { fill: var(--wf-edge-hot); } [data-ui="v2"] .wf-edge-tag rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; } [data-ui="v2"] .wf-edge-tag text { fill: var(--ink-2); font: 700 10.5px/1 var(--font-sans); letter-spacing: .06em; } [data-ui="v2"] .wf-edge-tag.is-hot rect { fill: var(--accent-soft); stroke: var(--accent); } [data-ui="v2"] .wf-edge-tag.is-hot text { fill: var(--accent-text); } [data-ui="v2"] .wf-node { cursor: pointer; } [data-ui="v2"] .wf-diagram.is-readonly .wf-node { cursor: default; } [data-ui="v2"] .wf-node .wf-shape { fill: var(--wf-node-bg); stroke: var(--wf-tone); stroke-width: 1.5; transition: stroke-width var(--dur-fast) var(--ease); } [data-ui="v2"] .wf-node:hover .wf-shape { stroke-width: 2.25; } [data-ui="v2"] .wf-node-glyph rect { fill: var(--wf-tone-soft); } [data-ui="v2"] .wf-node-glyph .wf-glyph { fill: var(--wf-tone-text); } [data-ui="v2"] .wf-node-eyebrow { fill: var(--wf-tone-text); font: 700 10px/1 var(--font-sans); letter-spacing: .09em; } [data-ui="v2"] .wf-node-label { fill: var(--ink); font: 600 13.5px/1 var(--font-sans); } [data-ui="v2"] .wf-node-meta { fill: var(--ink-3); font: 400 11.5px/1 var(--font-sans); } [data-ui="v2"] .wf-node.is-selected .wf-shape { stroke-width: 3; } [data-ui="v2"] .wf-node.is-selected .wf-node-label { fill: var(--wf-tone-text); } [data-ui="v2"] .wf-node.is-hot .wf-shape { stroke: var(--accent); stroke-width: 2.75; fill: var(--accent-soft); } [data-ui="v2"] .wf-node:focus { outline: none; } [data-ui="v2"] .wf-node:focus-visible { outline: none; } [data-ui="v2"] .wf-node:focus-visible .wf-shape { stroke: var(--focus); stroke-width: 3.25; } /* Značky změn v porovnání verzí */ [data-ui="v2"] .wf-node.is-added .wf-shape { stroke: var(--ok); stroke-dasharray: 6 4; } [data-ui="v2"] .wf-node.is-removed .wf-shape { stroke: var(--bad); stroke-dasharray: 6 4; } [data-ui="v2"] .wf-node.is-removed { opacity: .72; } [data-ui="v2"] .wf-node.is-changed .wf-shape { stroke: var(--info); stroke-dasharray: 6 4; } [data-ui="v2"] .wf-node-flag circle { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; } [data-ui="v2"] .wf-node-flag text { fill: var(--ink-2); font: 700 12px/1 var(--font-sans); } [data-ui="v2"] .wf-node.is-added .wf-node-flag circle { fill: var(--ok-soft); stroke: var(--ok); } [data-ui="v2"] .wf-node.is-added .wf-node-flag text { fill: var(--ok); } [data-ui="v2"] .wf-node.is-removed .wf-node-flag circle { fill: var(--bad-soft); stroke: var(--bad); } [data-ui="v2"] .wf-node.is-removed .wf-node-flag text { fill: var(--bad); } [data-ui="v2"] .wf-node.is-changed .wf-node-flag circle { fill: var(--info-soft); stroke: var(--info); } [data-ui="v2"] .wf-node.is-changed .wf-node-flag text { fill: var(--info); } /* Textová alternativa diagramu */ [data-ui="v2"] .wf-alt { border-top: 1px solid var(--line); } [data-ui="v2"] .wf-alt > summary { padding: var(--sp-4) var(--sp-7); cursor: pointer; font: 600 12.5px/1.4 var(--font-sans); color: var(--ink-2); } [data-ui="v2"] .wf-alt > summary:hover { color: var(--ink); } [data-ui="v2"] .wf-alt .wf-steps { padding: 0 var(--sp-7) var(--sp-7); } /* ============================================================ Seznam kroků (alternativa diagramu i výpis simulace) ============================================================ */ [data-ui="v2"] .wf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } [data-ui="v2"] .wf-step-btn { width: 100%; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); cursor: pointer; text-align: left; border: 1px solid var(--line); border-left: 3px solid var(--wf-tone); border-radius: var(--r-md); background: var(--surface); color: var(--ink); } [data-ui="v2"] .wf-step-btn:hover { background: var(--surface-2); } [data-ui="v2"] .wf-step.is-hot .wf-step-btn { border-color: var(--accent); background: var(--accent-soft); } [data-ui="v2"] .wf-step.is-orphan .wf-step-btn { border-style: dashed; } [data-ui="v2"] .wf-step-type { flex: 0 0 auto; padding: 2px 7px; border-radius: var(--r-xs); background: var(--wf-tone-soft); color: var(--wf-tone-text); font: 700 10.5px/1.5 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; } [data-ui="v2"] .wf-step-label { font: 600 13.5px/1.35 var(--font-sans); min-width: 0; } [data-ui="v2"] .wf-step-meta, [data-ui="v2"] .wf-step-next { color: var(--ink-2); font: 400 12px/1.4 var(--font-sans); min-width: 0; } [data-ui="v2"] .wf-step-next { margin-left: auto; text-align: right; color: var(--ink-3); } [data-ui="v2"] .wf-step-branch { flex: 0 0 auto; padding: 1px 7px; border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent-text); font: 700 11px/1.5 var(--font-sans); } [data-ui="v2"] .wf-step-branch.is-warn { background: var(--warn-soft); color: var(--warn); } /* ============================================================ Detail kroku a formulářová pole ============================================================ */ [data-ui="v2"] .wf-detail { display: flex; flex-direction: column; } [data-ui="v2"] .wf-detail-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-7); background: var(--wf-tone-soft); border-bottom: 1px solid var(--line); } [data-ui="v2"] .wf-detail-glyph { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface); color: var(--wf-tone-text); } [data-ui="v2"] .wf-detail-glyph svg { fill: currentColor; } [data-ui="v2"] .wf-detail-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; } [data-ui="v2"] .wf-detail-title b { font: 700 14.5px/1.3 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-ui="v2"] .wf-detail-findings { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-7) 0; } [data-ui="v2"] .wf-detail-body { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-7); } /* Režim jen pro čtení. Dřív to byl `opacity:.72; pointer-events:none` — myš sice zhasla, ale klávesnice ne (Tab do pole, napsaný text nikam nedošel) a průhlednost srazila kontrast popisků. Zamykají se proto skutečné prvky (readonly / disabled v lockControls() ve workflow.js) a odlišení je neutrální plocha, která textu kontrast nebere. NEVRACET opacity. */ [data-ui="v2"] .wf-detail-body.is-locked { background: var(--surface-2); } [data-ui="v2"] .wf-detail-body.is-locked .v2-input[readonly], [data-ui="v2"] .wf-detail-body.is-locked .v2-input:disabled { background: var(--bg-2); color: var(--ink-2); cursor: default; } [data-ui="v2"] .wf-detail-body.is-locked .wf-check { cursor: default; } [data-ui="v2"] .wf-detail-body.is-locked .wf-check:hover { border-color: var(--line); } [data-ui="v2"] .wf-locked-note { margin: 0; } [data-ui="v2"] .wf-detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } [data-ui="v2"] .wf-detail-empty { padding: 44px var(--sp-7); } [data-ui="v2"] .wf-field { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } [data-ui="v2"] .wf-field-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } [data-ui="v2"] .wf-field > .t-meta, [data-ui="v2"] .wf-field > .t-th { color: var(--ink-3); } [data-ui="v2"] .wf-field p { margin: 0; } [data-ui="v2"] .wf-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } [data-ui="v2"] .wf-narrow-input { max-width: 140px; } [data-ui="v2"] .wf-textarea { resize: vertical; min-height: 64px; font-family: var(--font-sans); } [data-ui="v2"] .wf-check { display: flex; align-items: flex-start; gap: var(--sp-4); cursor: pointer; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); } [data-ui="v2"] .wf-check:hover { border-color: var(--line-2); } [data-ui="v2"] .wf-check input[type="checkbox"] { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); } [data-ui="v2"] .wf-check > span { display: flex; flex-direction: column; gap: 2px; font: 500 13px/1.4 var(--font-sans); color: var(--ink); } [data-ui="v2"] .wf-check small { font: 400 12px/1.45 var(--font-sans); color: var(--ink-2); } /* Segmentované přepínače drží geometrii z AGENTS.md: --r-md na skupině, --r-sm na volbách; třídy .v2-seg / .v2-seg-btn si nesou vzhled z v2.css. */ [data-ui="v2"] .wf-mode, [data-ui="v2"] .wf-cond-join { flex-wrap: wrap; } [data-ui="v2"] .wf-viewseg { flex: 0 0 auto; } /* ============================================================ Editor podmínky ============================================================ */ [data-ui="v2"] .wf-cond-root { min-width: 0; } [data-ui="v2"] .wf-cond-group { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; } [data-ui="v2"] .wf-cond-group[data-wf-depth="1"] { background: var(--surface); } [data-ui="v2"] .wf-cond-group[data-wf-depth="2"] { background: var(--surface-2); } [data-ui="v2"] .wf-cond-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4); border-bottom: 1px solid var(--line); } [data-ui="v2"] .wf-cond-hint { flex: 1 1 14ch; min-width: 0; color: var(--ink-3); } [data-ui="v2"] .wf-cond-items { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); } [data-ui="v2"] .wf-cond-items > .wf-cond-group { border-left: 3px solid var(--warn); } [data-ui="v2"] .wf-cond-leaf { display: grid; align-items: end; gap: var(--sp-3); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } [data-ui="v2"] .wf-cond-cell { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } [data-ui="v2"] .wf-cond-cell .t-meta { color: var(--ink-3); } [data-ui="v2"] .wf-cond-novalue { display: flex; align-items: center; min-height: 36px; padding: 0 var(--sp-3); color: var(--ink-3); font-style: italic; } [data-ui="v2"] .wf-cond-del { align-self: flex-end; margin-bottom: 2px; } [data-ui="v2"] .wf-cond-summary { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding: var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--warn-soft); color: var(--ink); font: 600 12.5px/1.45 var(--font-sans); overflow-wrap: anywhere; } [data-ui="v2"] .wf-cond-summary .icon { font-size: 18px; color: var(--warn); flex: 0 0 auto; } /* ============================================================ Schvalovatelé ============================================================ */ [data-ui="v2"] .wf-asg-list { display: flex; flex-direction: column; gap: var(--sp-4); } [data-ui="v2"] .wf-asg-row { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); } [data-ui="v2"] .wf-asg-main { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; } [data-ui="v2"] .wf-asg-scope { padding-left: 28px; } /* ============================================================ Kontrola a nálezy validace ============================================================ */ [data-ui="v2"] .wf-validation .v2-note { margin: var(--sp-6) var(--sp-7); } [data-ui="v2"] .wf-findings { padding: var(--sp-6) var(--sp-7); } [data-ui="v2"] .wf-findings-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); } [data-ui="v2"] .wf-finding-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); } [data-ui="v2"] .wf-finding { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); } [data-ui="v2"] .wf-finding .icon { font-size: 19px; flex: 0 0 auto; margin-top: 1px; } [data-ui="v2"] .wf-finding.is-error { border-color: var(--bad); background: var(--bad-soft); } [data-ui="v2"] .wf-finding.is-error .icon { color: var(--bad); } [data-ui="v2"] .wf-finding.is-warning { border-color: var(--warn); background: var(--warn-soft); } [data-ui="v2"] .wf-finding.is-warning .icon { color: var(--warn); } [data-ui="v2"] .wf-finding.is-info { border-color: var(--info); background: var(--info-soft); } [data-ui="v2"] .wf-finding.is-info .icon { color: var(--info); } [data-ui="v2"] .wf-finding-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; font: 400 13px/1.5 var(--font-sans); color: var(--ink); } [data-ui="v2"] .wf-finding-text b { font: 700 11.5px/1.4 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); } [data-ui="v2"] .wf-finding .v2-btn { flex: 0 0 auto; } /* ============================================================ Simulátor ============================================================ */ [data-ui="v2"] .wf-panel { overflow: hidden; } [data-ui="v2"] .wf-simulator > .v2-note, [data-ui="v2"] .wf-diffpanel > .v2-note { margin: var(--sp-6) var(--sp-7) 0; } [data-ui="v2"] .wf-sim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-5); padding: var(--sp-6) var(--sp-7); } [data-ui="v2"] .wf-sim-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding: 0 var(--sp-7) var(--sp-6); } [data-ui="v2"] .wf-sim-hint { padding: 0 var(--sp-7) var(--sp-7); } [data-ui="v2"] .wf-sim-result { padding: 0 var(--sp-7) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); } [data-ui="v2"] .wf-sim-outcome { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } [data-ui="v2"] .wf-simulator .wf-sim-result .wf-steps { margin-top: var(--sp-2); } /* „Kdo by rozhodoval" je hlavní výstup simulace — jediné místo, kde uživatel uvidí jmenovitě, kdo by doklad schvaloval. Dřív to byl neostylovaný