/* ============================================================ NahrAI portál — UI v2 shell (M0–M1) Vše scopované pod [data-ui="v2"]. Barvy VÝHRADNĚ přes tokeny z tokens.css — žádné hexy (viz design_handoff CLAUDE.md). Rozměry dle README.md „Globální rozvržení (shell)"; liché hodnoty z prototypu zaokrouhleny na škálu --sp-*. ============================================================ */ [data-ui="v2"] *, [data-ui="v2"] *::before, [data-ui="v2"] *::after { box-sizing: border-box; } [data-ui="v2"] body { margin: 0; background: var(--bg); color: var(--ink); font: 500 14px/1.45 var(--font-sans); -webkit-font-smoothing: antialiased; --pagebar-h: 54px; --content-sticky-top: var(--header-h); } [data-ui="v2"] body.v2-pagebar-visible { --content-sticky-top: calc(var(--header-h) + var(--pagebar-h)); } [data-ui="v2"] a { color: var(--accent-text); } [data-ui="v2"] a:hover { color: var(--accent-hover); } [data-ui="v2"] .icon { font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; display: inline-block; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; flex: 0 0 auto; } [data-ui="v2"] .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Jednotný symbol NahrAI kreditu. U částek stojí vždy za číslem jako symbol měny; u nadpisů funguje jako rychlá vizuální orientace. */ [data-ui="v2"] .v2-credit-token { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; vertical-align: -.18em; } [data-ui="v2"] .v2-credit-token.tiny { width: 12px; height: 12px; } [data-ui="v2"] .v2-credit-token.small { width: 14px; height: 14px; } [data-ui="v2"] .v2-credit-token.header { width: 24px; height: 24px; } [data-ui="v2"] .v2-credit-token.large { width: 24px; height: 24px; } [data-ui="v2"] .v2-credit-amount { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; line-height: inherit; white-space: nowrap; vertical-align: baseline; font-variant-numeric: tabular-nums; } [data-ui="v2"] .v2-credit-heading { display: inline-flex; align-items: center; gap: 6px; } /* Jediná barva fokusu v celé aplikaci (token --focus); lokální výjimky níže používají tentýž token, aby fokus nešel zaměnit s akcentem. */ [data-ui="v2"] :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); } /* ---------- Zaškrtávací pole (globální vzhled) ---------- Vlastní vykreslení místo nativního: nezaškrtnutý rámeček --field-line má 3:1 v obou motivech (nativní šedý rámeček ve tmavém režimu splýval s kartou), fajfka je kreslená z rámečků ::after v barvě --on-accent. Pravidlo je záměrně NAHOŘE souboru — pozdější lokální rozměry (.qcheck 19 px, doklady 17 px, .rv-field 16 px) i skrytý input .v2-switch ho při stejné specificitě přebijí. Fokus = globální kroužek výše. */ [data-ui="v2"] input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; padding: 0; flex: 0 0 auto; display: inline-grid; place-content: center; vertical-align: middle; border: 1.5px solid var(--field-line); border-radius: 4px; background: var(--surface); color: var(--on-accent); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } [data-ui="v2"] input[type="checkbox"]::after { content: ''; width: 4px; height: 8px; box-sizing: border-box; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); opacity: 0; } [data-ui="v2"] input[type="checkbox"]:hover:not(:disabled):not(:checked) { border-color: var(--ink-2); } [data-ui="v2"] input[type="checkbox"]:checked, [data-ui="v2"] input[type="checkbox"]:indeterminate { background: var(--accent-fill); border-color: var(--accent-fill); } [data-ui="v2"] input[type="checkbox"]:checked::after { opacity: 1; } [data-ui="v2"] input[type="checkbox"]:indeterminate::after { width: 8px; height: 0; border-width: 0 0 2px 0; transform: none; opacity: 1; } [data-ui="v2"] input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; } [data-ui="v2"] input[type="checkbox"]:disabled:checked, [data-ui="v2"] input[type="checkbox"]:disabled:indeterminate { background: var(--ink-3); border-color: var(--ink-3); } /* Popisek se zaškrtávacím polem: text vedle pole, celý řádek klikací. */ [data-ui="v2"] label.chk { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; } [data-ui="v2"] label.chk:has(input:disabled) { color: var(--ink-3); cursor: not-allowed; } /* ---------- Kostra ---------- */ [data-ui="v2"] .v2-shell { display: flex; align-items: stretch; min-height: 100vh; } /* ---------- Ikonový rail ---------- */ /* Rail drží v rozvržení jen svoji šířku; vlastní panel je uvnitř polohovaný, takže rozbalení najetím myší překryje obsah a stránka nepodskočí. Připnutý rail roztáhne i tuhle vnější šířku, takže se obsah přizpůsobí. */ [data-ui="v2"] .v2-rail { width: var(--rail-w); min-width: var(--rail-w); flex: 0 0 auto; position: sticky; top: 0; height: 100vh; z-index: 30; overflow: visible; transition: width var(--dur) var(--ease), min-width var(--dur) var(--ease); } [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-rail { width: var(--rail-w-expanded); min-width: var(--rail-w-expanded); } [data-ui="v2"] .v2-rail-inner { position: absolute; top: 0; left: 0; bottom: 0; width: var(--rail-w); background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; padding: var(--sp-6) var(--sp-5); overflow: hidden; transition: width var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-rail-inner { width: var(--rail-w-expanded); } /* nepřipnuté rozbalení: myší i klávesnicí, s vlastním stínem přes obsah */ [data-ui="v2"] .v2-shell[data-rail="collapsed"] .v2-rail:hover .v2-rail-inner, [data-ui="v2"] .v2-shell[data-rail="collapsed"] .v2-rail:focus-within .v2-rail-inner { width: var(--rail-w-expanded); box-shadow: var(--shadow-lg); z-index: 40; } @media (prefers-reduced-motion: reduce) { [data-ui="v2"] .v2-rail, [data-ui="v2"] .v2-rail-inner { transition: none; } } [data-ui="v2"] .v2-rail-logo { display: flex; align-items: center; gap: var(--sp-4); padding: 2px var(--sp-1) var(--sp-7); } [data-ui="v2"] .v2-rail-logo .mark { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; background: var(--accent); display: grid; place-items: center; color: var(--on-accent); font: 700 17px/1 var(--font-sans); letter-spacing: -.02em; } [data-ui="v2"] .v2-rail-logo .wordmark { display: none; min-width: 0; } [data-ui="v2"] :is(.v2-shell[data-rail="pinned"], .v2-shell[data-rail="collapsed"] .v2-rail:hover, .v2-shell[data-rail="collapsed"] .v2-rail:focus-within) .v2-rail-logo .wordmark { display: block; } [data-ui="v2"] .v2-rail-logo .wordmark b { font: 700 16px/1.2 var(--font-sans); color: var(--ink); white-space: nowrap; } [data-ui="v2"] .v2-rail-logo .wordmark b em { font-style: normal; color: var(--accent); } [data-ui="v2"] .v2-rail-logo .wordmark small { display: block; font: 400 11px/1.3 var(--font-sans); color: var(--ink-3); white-space: nowrap; } [data-ui="v2"] .v2-rail-primary { display: flex; align-items: center; gap: var(--sp-5); justify-content: center; padding: 11px var(--sp-5); margin-bottom: var(--sp-4); border: 0; border-radius: var(--r-lg); cursor: pointer; background: var(--accent-fill); color: var(--on-accent); font: 600 14px/1 var(--font-sans); box-shadow: 0 6px 16px -8px var(--accent); } [data-ui="v2"] .v2-rail-primary:hover { background: var(--accent-hover); } [data-ui="v2"] .v2-rail-primary .icon { font-size: 22px; } [data-ui="v2"] .v2-rail-primary .lbl { display: none; } [data-ui="v2"] :is(.v2-shell[data-rail="pinned"], .v2-shell[data-rail="collapsed"] .v2-rail:hover, .v2-shell[data-rail="collapsed"] .v2-rail:focus-within) .v2-rail-primary { justify-content: flex-start; } [data-ui="v2"] :is(.v2-shell[data-rail="pinned"], .v2-shell[data-rail="collapsed"] .v2-rail:hover, .v2-shell[data-rail="collapsed"] .v2-rail:focus-within) .v2-rail-primary .lbl { display: inline; white-space: nowrap; } [data-ui="v2"] .v2-rail-item { position: relative; display: flex; align-items: center; gap: var(--sp-5); justify-content: center; width: 100%; padding: var(--sp-4) var(--sp-5); border: 0; border-radius: 11px; cursor: pointer; background: transparent; color: var(--ink-2); font: 500 14px/1.2 var(--font-sans); text-align: left; text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } [data-ui="v2"] :is(.v2-shell[data-rail="pinned"], .v2-shell[data-rail="collapsed"] .v2-rail:hover, .v2-shell[data-rail="collapsed"] .v2-rail:focus-within) .v2-rail-item { justify-content: flex-start; } [data-ui="v2"] .v2-rail-item:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; } [data-ui="v2"] .v2-rail-item.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } [data-ui="v2"] .v2-rail-item .icon { font-size: 22px; } [data-ui="v2"] .v2-rail-item .lbl { display: none; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-ui="v2"] :is(.v2-shell[data-rail="pinned"], .v2-shell[data-rail="collapsed"] .v2-rail:hover, .v2-shell[data-rail="collapsed"] .v2-rail:focus-within) .v2-rail-item .lbl { display: block; } [data-ui="v2"] .v2-rail-item .badge { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 700 10px/16px var(--font-sans); text-align: center; background: var(--accent-fill); } [data-ui="v2"] :is(.v2-shell[data-rail="pinned"], .v2-shell[data-rail="collapsed"] .v2-rail:hover, .v2-shell[data-rail="collapsed"] .v2-rail:focus-within) .v2-rail-item .badge { position: static; min-width: 20px; height: auto; padding: 1px 6px; font: 700 11px/1.4 var(--font-sans); } [data-ui="v2"] .v2-rail-spacer { flex: 1; } [data-ui="v2"] #v2-rail-items { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } [data-ui="v2"] .v2-rail-item.pin .icon { transition: transform var(--dur) var(--ease); } [data-ui="v2"] .v2-rail-item.pin:not(.on) .icon { transform: rotate(45deg); opacity: .75; } [data-ui="v2"] .v2-rail-item.pin.on { color: var(--accent-text); } [data-ui="v2"] .v2-draft-item { color: var(--ok); } [data-ui="v2"] .v2-draft-item.on { background: var(--ok-soft); color: var(--ok); } [data-ui="v2"] .v2-draft-item .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 12.5px/1.25 var(--font-sans); } [data-ui="v2"] .v2-draft-row { position: relative; min-width: 0; width: calc(100% - var(--sp-1)); margin-right: var(--sp-1); border-radius: 11px; } [data-ui="v2"] .v2-draft-child { min-height: 38px; padding-top: 7px; padding-bottom: 7px; } [data-ui="v2"] .v2-draft-doc-icon { transition: opacity var(--dur-fast) var(--ease); } [data-ui="v2"] .v2-draft-trash { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad); opacity: 0; pointer-events: none; cursor: pointer; transform: translate(-50%, -50%); transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } [data-ui="v2"] .v2-draft-trash .icon { font-size: 21px; } [data-ui="v2"] .v2-draft-row:hover .v2-draft-trash, [data-ui="v2"] .v2-draft-trash:focus-visible { opacity: 1; pointer-events: auto; } [data-ui="v2"] .v2-draft-row:hover .v2-draft-doc-icon { opacity: 0; } [data-ui="v2"] .v2-draft-trash:hover { background: color-mix(in srgb, var(--bad-soft) 78%, var(--bad) 22%); } [data-ui="v2"] .v2-draft-trash:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } [data-ui="v2"] :is(.v2-shell[data-rail="pinned"], .v2-shell[data-rail="collapsed"] .v2-rail:hover, .v2-shell[data-rail="collapsed"] .v2-rail:focus-within) .v2-draft-trash { left: calc(var(--sp-5) - 4px); transform: translateY(-50%); } @media (prefers-reduced-motion: reduce) { [data-ui="v2"] .v2-rail-item.pin .icon, [data-ui="v2"] .v2-draft-doc-icon, [data-ui="v2"] .v2-draft-trash { transition: none; } } /* ---------- Hlavička ---------- */ [data-ui="v2"] .v2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Sticky-footer: main vyplní zbytek výšky, patička sedí u spodní hrany i na krátkých obrazovkách — bez záporných marginů (ty vytvářely přesah obsahu za shell = šedý pruh a rozjetý scroll). */ [data-ui="v2"] .v2-main > main { flex: 1 1 auto; display: flex; flex-direction: column; } /* Pojistka proti GLOBÁLNÍMU vodorovnému scrollu: co přeteče šířku obsahu, se ořízne tady, ne na . Záměrně „clip", ne „hidden" — clip nevytváří scroll kontejner, takže lepivé prvky uvnitř (hlavičky tabulek, dock) dál fungují. Plovoucí panely (combo, náhled, tooltip) jsou v , netýká se jich. */ [data-ui="v2"] .v2-main > main { overflow-x: clip; } [data-ui="v2"] .v2-hdr { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--content-pad); background: var(--surface); border-bottom: 1px solid var(--line); } [data-ui="v2"] .v2-hdr .spacer { flex: 1; } [data-ui="v2"] .v2-hdr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; flex: 0 1 auto; } [data-ui="v2"] .v2-hdr-facts { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; } [data-ui="v2"] .v2-hdr-fact { display: inline-flex; align-items: center; gap: 7px; min-width: 0; height: 40px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); cursor: pointer; font-family: var(--font-sans); text-align: left; white-space: nowrap; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } [data-ui="v2"] .v2-hdr-fact:hover, [data-ui="v2"] .v2-hdr-fact:focus-visible { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); } [data-ui="v2"] .v2-hdr-fact > .icon { flex: 0 0 auto; font-size: 18px; color: var(--ink-3); } [data-ui="v2"] .v2-hdr-fact > .v2-credit-token { flex: 0 0 auto; } [data-ui="v2"] .v2-hdr-fact .fact-text { display: flex; flex-direction: column; min-width: 0; } [data-ui="v2"] .v2-hdr-fact .fact-key { font: 600 9px/1.15 var(--font-sans); letter-spacing: .055em; text-transform: uppercase; color: var(--ink-3); } [data-ui="v2"] .v2-hdr-fact .fact-text b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 700 12px/1.25 var(--font-sans); color: var(--ink); } [data-ui="v2"] .v2-hdr-fact.credit { flex: 0 0 auto; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } [data-ui="v2"] .v2-hdr-fact.credit:hover, [data-ui="v2"] .v2-hdr-fact.credit:focus-visible { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(21,36,60,.14); } [data-ui="v2"] .v2-hdr-fact.credit:active { transform: translateY(0); box-shadow: none; } [data-ui="v2"] .v2-hdr-fact.credit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } [data-ui="v2"] .v2-hdr-fact.credit.tone-warn { border-color: var(--warn); background: var(--warn-soft); } [data-ui="v2"] .v2-hdr-fact.credit.tone-bad { border-color: var(--bad); background: var(--bad-soft); } [data-ui="v2"] .v2-hdr-fact.credit.tone-mut { color: var(--ink-3); } [data-ui="v2"] .v2-hdr-fact.mailbox { flex: 0 1 280px; max-width: 280px; } [data-ui="v2"] .v2-hdr-fact.mailbox .fact-text { flex: 1 1 auto; } [data-ui="v2"] .v2-hdr-fact.mailbox .copy { font-size: 15px; opacity: .72; } [data-ui="v2"] .v2-hdr-fact.catalogs { position: relative; flex: 0 0 auto; min-width: 132px; overflow: hidden; padding: 4px 10px; border-radius: var(--r-pill); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } [data-ui="v2"] .v2-hdr-fact.catalogs[aria-disabled="true"] { cursor: progress; opacity: 1; } [data-ui="v2"] .v2-hdr-fact.catalogs:hover, [data-ui="v2"] .v2-hdr-fact.catalogs:focus-visible { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(21,36,60,.14); } [data-ui="v2"] .v2-hdr-fact.catalogs:active { transform: translateY(0); box-shadow: none; } [data-ui="v2"] .v2-hdr-fact.catalogs:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } [data-ui="v2"] .v2-hdr-fact.catalogs.is-ready > .icon { color: var(--ok); } [data-ui="v2"] .v2-hdr-fact.catalogs.is-error { border-color: var(--bad); background: var(--bad-soft); } [data-ui="v2"] .v2-hdr-fact.catalogs.is-error > .icon { color: var(--bad); } [data-ui="v2"] .catalog-progress { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; overflow: hidden; border-radius: var(--r-pill); background: var(--line); } [data-ui="v2"] .catalog-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); } [data-ui="v2"] .v2-hdr-fact.catalogs.is-ready .catalog-progress > span { width: 100%; background: var(--ok); } [data-ui="v2"] .v2-hdr-fact.catalogs.is-error .catalog-progress > span { width: 100%; background: var(--bad); } [data-ui="v2"] .v2-hdr-fact.catalogs.is-loading .catalog-progress > span, [data-ui="v2"] .v2-hdr-fact.catalogs.is-refreshing .catalog-progress > span { width: 42%; animation: v2-catalog-progress 1.2s var(--ease) infinite; } @keyframes v2-catalog-progress { 0% { transform: translateX(-115%); } 100% { transform: translateX(340%); } } @media (prefers-reduced-motion: reduce) { [data-ui="v2"] .v2-hdr-fact.catalogs.is-loading .catalog-progress > span, [data-ui="v2"] .v2-hdr-fact.catalogs.is-refreshing .catalog-progress > span { width: 100%; animation: none; } [data-ui="v2"] .v2-hdr-fact.catalogs:hover, [data-ui="v2"] .v2-hdr-fact.catalogs:focus-visible, [data-ui="v2"] .v2-hdr-fact.catalogs:active, [data-ui="v2"] .v2-hdr-fact.credit:hover, [data-ui="v2"] .v2-hdr-fact.credit:focus-visible, [data-ui="v2"] .v2-hdr-fact.credit:active { transform: none; } } [data-ui="v2"] .v2-hdr-popover-wrap { position: relative; display: inline-flex; flex: 0 0 auto; height: 40px; } [data-ui="v2"] .v2-hdr-popover-wrap::after { content: ""; position: absolute; z-index: 79; top: 100%; left: 0; right: 0; height: 10px; pointer-events: none; } [data-ui="v2"] .v2-hdr-popover { position: absolute; z-index: 80; top: calc(100% + 9px); right: 0; width: min(430px, calc(100vw - 24px)); height: var(--v2-hdr-popover-height, min(820px, calc(100dvh - var(--header-h) - 18px))); max-height: calc(100dvh - var(--header-h) - 18px); padding: var(--sp-4); overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); white-space: normal; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); } [data-ui="v2"] .v2-hdr-popover:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } [data-ui="v2"] .v2-hdr-popover-wrap:hover .v2-hdr-popover, [data-ui="v2"] .v2-hdr-popover-wrap:focus-within .v2-hdr-popover { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; } [data-ui="v2"] .v2-hdr-popover-wrap:hover::after, [data-ui="v2"] .v2-hdr-popover-wrap:focus-within::after { pointer-events: auto; } [data-ui="v2"] .v2-hdr-popover-head { display: flex; align-items: flex-start; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } [data-ui="v2"] .v2-hdr-popover-head > span:first-child { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; } [data-ui="v2"] .v2-hdr-popover-head b { font-size: 13px; } [data-ui="v2"] .v2-hdr-popover-head small { color: var(--ink-2); font-size: 11.5px; line-height: 1.4; } [data-ui="v2"] .v2-hdr-popover-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } [data-ui="v2"] .v2-catalog-time { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; color: var(--ink-2); font-size: 11.5px; } [data-ui="v2"] .v2-catalog-time .icon { color: var(--info); font-size: 16px; } [data-ui="v2"] .v2-catalog-results { margin: 0; padding: 0; list-style: none; } [data-ui="v2"] .v2-catalog-results li { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); min-height: 27px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.3; } [data-ui="v2"] .v2-catalog-results li:first-child { border-top: 0; } [data-ui="v2"] .v2-catalog-results li > .icon { font-size: 15px; color: var(--ink-3); } [data-ui="v2"] .v2-catalog-results li.tone-ok > .icon { color: var(--ok); } [data-ui="v2"] .v2-catalog-results li.tone-info > .icon { color: var(--info); } [data-ui="v2"] .v2-catalog-results li.tone-bad > .icon { color: var(--bad); } [data-ui="v2"] .v2-catalog-results li b { color: var(--ink-2); font-size: 11px; font-weight: 600; white-space: nowrap; } [data-ui="v2"] .v2-hdr-popover > p { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11px; line-height: 1.4; } [data-ui="v2"] .v2-credit-popover-caption { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; color: var(--ink-2); font-size: 11.5px; } [data-ui="v2"] .v2-credit-popover-caption .icon { color: var(--info); font-size: 16px; } [data-ui="v2"] .v2-credit-popover-balance { flex: 0 0 auto; padding: 4px 8px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: 11px; font-weight: 700; } [data-ui="v2"] .v2-credit-popover-list .v2-cm-day { padding-inline: var(--sp-2); } [data-ui="v2"] .v2-credit-popover-list .v2-cm-row { min-height: 30px; } [data-ui="v2"] .v2-credit-popover-empty { margin: var(--sp-4) var(--sp-2); color: var(--ink-3); font-size: 12px; line-height: 1.45; } [data-ui="v2"] .v2-credit-popover-empty.tone-bad { color: var(--bad); } [data-ui="v2"] .v2-btn.v2-credit-popover-topup { flex: 0 0 auto; width: 100%; min-height: 42px; justify-content: center; margin-top: var(--sp-3); font-weight: 700; box-shadow: 0 6px 16px color-mix(in srgb, var(--ok) 24%, transparent); transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } [data-ui="v2"] .v2-credit-popover-topup:hover, [data-ui="v2"] .v2-credit-popover-topup:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--ok) 31%, transparent); } [data-ui="v2"] .v2-credit-popover-topup:active { transform: translateY(0); box-shadow: none; } @media (prefers-reduced-motion: reduce) { [data-ui="v2"] .v2-hdr-popover { transition: none; transform: none; } [data-ui="v2"] .v2-btn.v2-credit-popover-topup { transition: none; transform: none; } } [data-ui="v2"] .v2-hdr-review-actions { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } [data-ui="v2"] .v2-hdr-review-actions[hidden] { display: none; } [data-ui="v2"] .v2-hdr-review-actions .v2-btn { height: 40px; min-width: 0; white-space: nowrap; } /* Produktová zpětná vazba přidává do sdílené hlavičky jednu stálou akci. Kontextové akce kontroly proto přecházejí na ikony o něco dřív, aby se na běžném 1 600px notebooku nikdy neořízl jejich text ani uživatel. */ @media (max-width: 1700px) { [data-ui="v2"] .v2-hdr-review-actions .lbl { display: none; } [data-ui="v2"] .v2-hdr-review-actions .v2-btn { width: 40px; padding-inline: 0; justify-content: center; } } @media (max-width: 1500px) { [data-ui="v2"] .v2-hdr-fact.mailbox .fact-key { display: none; } [data-ui="v2"] .v2-hdr-fact.mailbox { flex-basis: 210px; max-width: 210px; } } @media (max-width: 1600px) { /* Údaje, které uživatel potřebuje průběžně, mají přednost před globálním hledáním; hledání zůstává dostupné v agendě Doklady. */ [data-ui="v2"] .v2-hdr .v2-gsearch { display: none; } } @media (max-width: 1200px) { [data-ui="v2"] .v2-user-btn .nm { display: none; } } [data-ui="v2"] .v2-preview-badge { padding: 3px 10px; border-radius: var(--r-pill); background: var(--info-soft); color: var(--info); font: 600 11.5px/1.4 var(--font-sans); letter-spacing: .04em; flex: 0 0 auto; } /* Přepínač firem */ [data-ui="v2"] .v2-co { position: relative; } [data-ui="v2"] .v2-co-btn { display: flex; align-items: center; gap: var(--sp-5); min-width: 270px; padding: var(--sp-3) var(--sp-5); border: 1px solid var(--line-2); border-radius: var(--r-lg); cursor: pointer; background: var(--surface-2); color: var(--ink); text-align: left; font-family: var(--font-sans); } [data-ui="v2"] .v2-co-btn .icon { font-size: 20px; color: var(--ink-3); } [data-ui="v2"] .v2-co-btn .co-text { flex: 1; min-width: 0; } [data-ui="v2"] .v2-co-btn .co-eyebrow { display: block; font: 600 10px/1.3 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } [data-ui="v2"] .v2-co-btn .co-name { display: block; font: 600 14px/1.3 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-ui="v2"] .v2-co-btn .co-pills { display: inline-flex; gap: 4px; flex: none; } [data-ui="v2"] .v2-co-btn .co-pill .icon { font-size: 14px; } [data-ui="v2"] .v2-co-btn .co-pill.queue { background: var(--warn-soft); color: var(--warn); } [data-ui="v2"] .v2-co-btn .co-pill.review { background: var(--accent-soft); color: var(--accent-text); } [data-ui="v2"] .v2-co-btn .co-pill.draft { background: var(--ok-soft); color: var(--ok); } /* Souhrnná pilulka u NEAKTIVNÍHO spojení: kolik z toho čeká na vytěžení a kolik na kontrolu, se z dat serveru poznat nedá — tečkovaný okraj a tlumená barva říkají, že to není srovnatelné číslo jako u aktivního spojení. */ [data-ui="v2"] .co-pill.summary { background: var(--surface-2); color: var(--ink-2); border: 1px dashed var(--line-2); } [data-ui="v2"] .co-pill.mail { background: var(--info-soft, var(--surface-2)); color: var(--ink-2); } /* tytéž pilulky i u položek v nabídce spojení */ [data-ui="v2"] .v2-co-item .co-pills { display: inline-flex; gap: 4px; flex: none; margin-left: auto; } [data-ui="v2"] .v2-co-item .co-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: var(--r-pill); font: 700 11.5px/1.5 var(--font-sans); font-variant-numeric: tabular-nums; } [data-ui="v2"] .v2-co-item .co-pill .icon { font-size: 14px; } [data-ui="v2"] .v2-co-item .co-pill.queue { background: var(--warn-soft); color: var(--warn); } [data-ui="v2"] .v2-co-item .co-pill.mail { background: var(--info-soft); color: var(--info); } [data-ui="v2"] .v2-co-item .co-pill.draft { background: var(--ok-soft); color: var(--ok); } [data-ui="v2"] .v2-co-btn .co-pill { padding: 3px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font: 600 12px/1.2 var(--font-sans); } [data-ui="v2"] .v2-co-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 380px; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); } [data-ui="v2"] .v2-co-search { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-1); border-radius: var(--r-md); background: var(--surface-2); } [data-ui="v2"] .v2-co-search .icon { font-size: 18px; color: var(--ink-3); } [data-ui="v2"] .v2-co-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 13px/1.4 var(--font-sans); color: var(--ink); } [data-ui="v2"] .v2-co-search input::placeholder { color: var(--ink-3); } [data-ui="v2"] .v2-co-item { display: flex; align-items: center; gap: var(--sp-4); width: 100%; padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--r-md); cursor: pointer; background: transparent; color: var(--ink); text-align: left; font-family: var(--font-sans); } [data-ui="v2"] .v2-co-item:hover { background: var(--bg-2); } [data-ui="v2"] .v2-co-item.on { background: var(--accent-soft); } [data-ui="v2"] .v2-co-item .mono30 { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: var(--bg-2); color: var(--ink-2); display: grid; place-items: center; font: 700 12px/1 var(--font-sans); } [data-ui="v2"] .v2-co-item .co-col { flex: 1; min-width: 0; } [data-ui="v2"] .v2-co-item .co-nm { display: block; font: 600 13.5px/1.3 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-ui="v2"] .v2-co-item .co-ico { display: block; font: 400 11.5px/1.4 var(--font-mono); color: var(--ink-3); } [data-ui="v2"] .v2-co-item .co-sum { font: 400 11.5px/1.4 var(--font-sans); color: var(--ink-2); } [data-ui="v2"] .v2-co-note { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-1); font: 400 11.5px/1.5 var(--font-sans); color: var(--ink-3); } /* Globální vstup do hledání ve zpracovaných dokladech. */ [data-ui="v2"] .v2-gsearch { display: flex; align-items: center; gap: 9px; flex: 1; max-width: 420px; padding: 9px var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); color: var(--ink-3); font: 400 13.5px/1.3 var(--font-sans); cursor: pointer; text-align: left; } [data-ui="v2"] button.v2-gsearch:hover { border-color: var(--accent-line); color: var(--ink-2); background: var(--surface); } [data-ui="v2"] .v2-gsearch .icon { font-size: 19px; } [data-ui="v2"] .v2-gsearch .q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-ui="v2"] .v2-gsearch kbd { padding: 2px 6px; border: 1px solid var(--line-2); border-radius: var(--r-xs); font: 400 11px/1.3 var(--font-mono); color: var(--ink-3); } /* Hledání přímo v záhlaví: pole + našeptávač */ [data-ui="v2"] .v2-gsearch.hdr-search { position: relative; cursor: text; } [data-ui="v2"] .v2-gsearch.hdr-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); font: 400 13.5px/1.3 var(--font-sans); } [data-ui="v2"] .v2-gsearch.hdr-search input::placeholder { color: var(--ink-3); } [data-ui="v2"] #v2-gs-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } [data-ui="v2"] #v2-gs-panel[hidden] { display: none; } [data-ui="v2"] #v2-gs-list { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; } [data-ui="v2"] #v2-gs-list [role="option"] { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); cursor: pointer; border-bottom: 1px solid var(--line); font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-2); } [data-ui="v2"] #v2-gs-list [role="option"]:last-child { border-bottom: 0; } [data-ui="v2"] #v2-gs-list [role="option"]:hover { background: var(--surface-2); } [data-ui="v2"] #v2-gs-list [role="option"].is-active { background: var(--accent-soft); } [data-ui="v2"] #v2-gs-list .gs-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; } [data-ui="v2"] #v2-gs-list .gs-main b { font: 600 13px/1.3 var(--font-sans); color: var(--ink); } [data-ui="v2"] #v2-gs-list .gs-firm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-ui="v2"] .v2-gs-status { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5); font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-3); } /* Stav napojení */ [data-ui="v2"] .v2-conn { display: flex; align-items: center; gap: var(--sp-3); padding: 7px var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); } [data-ui="v2"] .v2-conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: nahrai-pulse 2.4s ease-in-out infinite; } [data-ui="v2"] .v2-conn .t { font: 600 12.5px/1.3 var(--font-sans); color: var(--ink-2); } [data-ui="v2"] .v2-conn .v { font: 400 11.5px/1.3 var(--font-mono); color: var(--ink-3); } /* Ikonové tlačítko */ [data-ui="v2"] .v2-iconbtn { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; background: var(--surface-2); color: var(--ink-2); } [data-ui="v2"] .v2-iconbtn:hover { background: var(--bg-2); color: var(--ink); } [data-ui="v2"] .v2-iconbtn .icon { font-size: 20px; } /* Uživatelské menu */ [data-ui="v2"] .v2-user { position: relative; } [data-ui="v2"] .v2-user-btn { display: flex; align-items: center; gap: 9px; padding: 5px var(--sp-4) 5px 5px; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; background: var(--surface-2); color: var(--ink); font-family: var(--font-sans); } [data-ui="v2"] .v2-user-btn .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--avatar-1), var(--avatar-2)); display: grid; place-items: center; color: var(--on-accent); font: 700 11.5px/1 var(--font-sans); } [data-ui="v2"] .v2-user-btn .nm { font: 600 13.5px/1.3 var(--font-sans); white-space: nowrap; } [data-ui="v2"] .v2-super-badge { font: 700 9.5px/1.4 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent); white-space: nowrap; } [data-ui="v2"] .v2-user-btn .icon { font-size: 18px; color: var(--ink-3); } [data-ui="v2"] .v2-user-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 260px; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); } [data-ui="v2"] .v2-user-menu .who { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-2); } [data-ui="v2"] .v2-user-menu .who b { display: block; font: 600 13.5px/1.4 var(--font-sans); } [data-ui="v2"] .v2-user-menu .who span { display: block; font: 400 11.5px/1.4 var(--font-mono); color: var(--ink-3); } [data-ui="v2"] .v2-user-item { display: flex; align-items: center; gap: var(--sp-4); width: 100%; padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--r-md); cursor: pointer; background: transparent; color: var(--ink); text-align: left; font: 500 13.5px/1.4 var(--font-sans); } [data-ui="v2"] .v2-user-item:hover { background: var(--bg-2); } [data-ui="v2"] .v2-user-item .icon { font-size: 19px; color: var(--ink-2); } [data-ui="v2"] .v2-user-item.v2-news-action { margin-bottom: var(--sp-2); font-weight: 600; } [data-ui="v2"] .v2-user-item.v2-news-action.optin { background: var(--ok-soft); color: var(--ok); } [data-ui="v2"] .v2-user-item.v2-news-action.optin .icon { color: var(--ok); } [data-ui="v2"] .v2-user-item.v2-news-action.optin:hover { background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); } [data-ui="v2"] .v2-user-item.v2-news-action.optout { background: var(--bad-soft); color: var(--bad); } [data-ui="v2"] .v2-user-item.v2-news-action.optout .icon { color: var(--bad); } [data-ui="v2"] .v2-user-item.v2-news-action.optout:hover { background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); } /* ---------- Kontextová nabídka (sdílená, openPopMenu) ---------- Vykresluje se do s position:fixed, aby ji neořízla karta ani lepivá hlavička. Vrstvy: hromadná lišta 60 < nabídka 70 < dialog 80. */ [data-ui="v2"] .v2-popmenu { position: fixed; z-index: 70; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); max-height: min(70vh, 520px); overflow-y: auto; } [data-ui="v2"] .v2-popmenu-item { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: var(--sp-3) var(--sp-4); width: 100%; padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--r-md); cursor: pointer; background: transparent; color: var(--ink); text-align: left; font: 500 13.5px/1.4 var(--font-sans); } [data-ui="v2"] .v2-popmenu-item .icon { font-size: 18px; color: var(--ink-2); } [data-ui="v2"] .v2-popmenu-item .lbl { min-width: 0; } [data-ui="v2"] .v2-popmenu-item .hint { grid-column: 2; font: 400 12px/1.35 var(--font-sans); color: var(--ink-3); } [data-ui="v2"] .v2-popmenu-item:hover:not(:disabled) { background: var(--surface-2); } [data-ui="v2"] .v2-popmenu-item.danger { color: var(--bad); } [data-ui="v2"] .v2-popmenu-item.danger .icon { color: var(--bad); } [data-ui="v2"] .v2-popmenu-item:disabled { opacity: .5; cursor: not-allowed; } [data-ui="v2"] .v2-popmenu-sep { height: 1px; margin: var(--sp-2) var(--sp-3); background: var(--line); } [data-ui="v2"] .v2-popmenu-group { padding: var(--sp-3) var(--sp-4) var(--sp-2); font: 700 12px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } [data-ui="v2"] .v2-popbtn .icon { font-size: 17px; } /* ---------- Obsah ---------- */ [data-ui="v2"] .v2-content { padding: 22px var(--content-pad) 28px; display: flex; flex-direction: column; gap: 18px; max-width: var(--content-max); width: 100%; flex: 1 1 auto; /* krátký obsah se natáhne a patička zůstane dole */ } /* Patička aplikace — poslední prvek main; obsah nad ní roste (flex), takže na krátkých obrazovkách sedí dole. V kontrole skrytá. */ [data-ui="v2"] .v2-appfoot { /* ŽÁDNÝ záporný margin — obsahový box s rezervou by přečníval pod patičku a vytvářel šedý pruh za koncem shellu. Odstup řeší rezerva obsahu. */ position: static; padding: var(--sp-3) var(--content-pad); max-width: none; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: none; font: 400 12px/1.5 var(--font-sans); color: var(--ink-3); } [data-ui="v2"] .v2-appfoot .brandlinks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); } [data-ui="v2"] .v2-appfoot .links { display: flex; gap: var(--sp-4); } [data-ui="v2"] .v2-appfoot .actions { margin-left: auto; } [data-ui="v2"] .v2-appfoot .actions:empty { display: none; } [data-ui="v2"] .v2-appfoot .v2-pager { padding: 0; } [data-ui="v2"] .v2-appfoot a { color: var(--ink-3); text-decoration: underline; } [data-ui="v2"] .v2-appfoot a:hover { color: var(--accent); } [data-ui="v2"] body.v2-review .v2-appfoot { display: none; } /* PageHeader: mřížka ikona | titulky | akce. Titulky mají zaručené minimum (240 px, nebo celá šířka), akce se lámou do řádků dřív, než by se lámal nadpis po slovech; pod 900 px jdou akce pod titulek. Bez ikony (.no-ico, pozdrav na Přehledu) má mřížka jen dva sloupce. */ [data-ui="v2"] .v2-screen-head { display: grid; grid-template-columns: auto minmax(min(100%, 240px), 1fr) auto; align-items: start; column-gap: var(--sp-6); row-gap: var(--sp-4); min-width: 0; } [data-ui="v2"] .v2-screen-head.no-ico { grid-template-columns: minmax(min(100%, 240px), 1fr) auto; } [data-ui="v2"] .v2-screen-head.no-act { grid-template-columns: auto minmax(0, 1fr); } [data-ui="v2"] .v2-screen-head.no-ico.no-act { grid-template-columns: minmax(0, 1fr); } [data-ui="v2"] .v2-screen-head .titles { min-width: 0; } [data-ui="v2"] .v2-screen-head h1 { margin: 0; font: 700 24px/1.2 var(--font-sans); letter-spacing: -.02em; } [data-ui="v2"] .v2-screen-head h1.hello { font-size: 26px; } [data-ui="v2"] .v2-screen-head .sub { margin: 6px 0 0; font: 400 14px/1.5 var(--font-sans); color: var(--ink-2); } [data-ui="v2"] .v2-screen-head .sub .mono { font-family: var(--font-mono); font-size: 13px; } [data-ui="v2"] .v2-screen-head .actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3) var(--sp-4); min-width: 0; max-width: 100%; } @media (max-width: 900px) { [data-ui="v2"] .v2-screen-head { grid-template-columns: auto minmax(0, 1fr); } [data-ui="v2"] .v2-screen-head.no-ico { grid-template-columns: minmax(0, 1fr); } [data-ui="v2"] .v2-screen-head.no-act { grid-template-columns: auto minmax(0, 1fr); } [data-ui="v2"] .v2-screen-head .actions { grid-column: 1 / -1; justify-content: flex-start; } [data-ui="v2"] .v2-screen-head h1 { font-size: 22px; } [data-ui="v2"] .v2-screen-head h1.hello { font-size: 23px; } } [data-ui="v2"] .v2-screen-head .scr-ico { flex: 0 0 auto; width: 44px; height: 44px; margin-top: 2px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } [data-ui="v2"] .v2-screen-head .scr-ico .icon { font-size: 24px; } /* Kompaktní pracovní pruh datově hustých agend. Je fixed, takže při jeho zapnutí nedojde ke změně výšky dokumentu ani k poskočení scrollu. */ [data-ui="v2"] .v2-pagebar { position: fixed; left: var(--rail-w); right: 0; top: var(--header-h); height: var(--pagebar-h); z-index: 24; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 10px 24px rgba(21,36,60,.08); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); } [data-ui="v2"] body.v2-pagebar-visible .v2-pagebar { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } [data-ui="v2"] .v2-pagebar-inner { width: 100%; max-width: var(--content-max); height: 100%; padding: 6px var(--content-pad); display: flex; align-items: center; gap: var(--sp-5); min-width: 0; } [data-ui="v2"] .v2-pagebar-title { display: flex; align-items: center; gap: var(--sp-3); flex: 0 1 auto; min-width: 150px; } [data-ui="v2"] .v2-pagebar-title > .icon { color: var(--accent-text); font-size: 22px; } [data-ui="v2"] .v2-pagebar-title .col { display: flex; flex-direction: column; min-width: 0; } [data-ui="v2"] .v2-pagebar-title b { font: 700 14px/1.25 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-ui="v2"] .v2-pagebar-title small { font: 500 11.5px/1.25 var(--font-sans); color: var(--ink-3); white-space: nowrap; } [data-ui="v2"] .v2-pagebar-tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex: 1 1 auto; min-width: 0; } [data-ui="v2"] .v2-pagebar-search { min-width: 150px; max-width: 360px; height: 38px; flex: 1 1 230px; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); } [data-ui="v2"] .v2-pagebar-search > .icon { color: var(--ink-3); font-size: 18px; } [data-ui="v2"] .v2-pagebar-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 13px/1.25 var(--font-sans); } [data-ui="v2"] .v2-pagebar-search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; } [data-ui="v2"] .v2-pagebar .v2-seg { flex: 0 0 auto; flex-wrap: nowrap; } [data-ui="v2"] .v2-pagebar .v2-seg-btn { padding: 6px 9px; font-size: 12px; } [data-ui="v2"] .v2-pagebar-btn { flex: 0 0 auto; min-height: 38px; padding: 7px var(--sp-4); } [data-ui="v2"] .v2-pagebar-btn .v2-seg-badge { margin-left: -2px; } @media (min-width: 1281px) { [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-pagebar { left: var(--rail-w-expanded); } } @media (max-width: 1280px) { [data-ui="v2"] .v2-pagebar-wide { display: none; } [data-ui="v2"] .v2-pagebar-title small { display: none; } } @media (max-width: 1020px) { [data-ui="v2"] .v2-pagebar-title { min-width: 0; } [data-ui="v2"] .v2-pagebar-title .col { display: none; } [data-ui="v2"] .v2-pagebar-tabs .v2-seg-btn { padding-inline: 8px; } [data-ui="v2"] .v2-pagebar-btn .lbl { display: none; } } @media (max-width: 760px) { [data-ui="v2"] body { --pagebar-h: 58px; } [data-ui="v2"] .v2-pagebar-inner { gap: var(--sp-3); padding-inline: var(--sp-4); } [data-ui="v2"] .v2-pagebar-title { display: none; } [data-ui="v2"] .v2-pagebar-search { flex-basis: 150px; } [data-ui="v2"] .v2-pagebar-tabs { max-width: 210px; overflow-x: auto; scrollbar-width: none; } } @media (prefers-reduced-motion: reduce) { [data-ui="v2"] .v2-pagebar { transition: none; } } [data-ui="v2"] .v2-card { border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } [data-ui="v2"] .v2-card .pad { padding: var(--sp-8); } [data-ui="v2"] .v2-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: 44px var(--sp-9); text-align: center; } [data-ui="v2"] .v2-empty .icon { font-size: 26px; color: var(--ink-3); } [data-ui="v2"] .v2-empty b { font: 600 15.5px/1.4 var(--font-sans); } [data-ui="v2"] .v2-empty p { margin: 0; max-width: 56ch; font: 400 13px/1.5 var(--font-sans); color: var(--ink-2); } /* Tlačítka */ [data-ui="v2"] .v2-btn { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-7); border: 1px solid var(--line-2); border-radius: var(--r-lg); cursor: pointer; background: var(--surface); color: var(--ink); font: 600 13.5px/1.3 var(--font-sans); text-decoration: none; transition: background var(--dur-fast) var(--ease); } [data-ui="v2"] .v2-btn:hover { background: var(--surface-2); text-decoration: none; } [data-ui="v2"] .v2-btn .icon { font-size: 18px; } [data-ui="v2"] .v2-btn.primary { border-color: transparent; /* --accent-hover mísí #C63E39: bílý text na výplni splní AA (tokens.css A11Y) */ background: var(--accent-hover); color: var(--on-accent); box-shadow: var(--shadow-accent); } [data-ui="v2"] .v2-btn.primary:hover { background: var(--accent); } /* Destruktivni potvrzeni musi byt videt — trida se pouzivala, pravidlo chybelo. */ [data-ui="v2"] .v2-btn.danger { border-color: transparent; background: var(--bad); color: var(--on-accent); } [data-ui="v2"] .v2-btn.danger:hover { background: var(--bad); opacity: .92; } /* Vypnuté tlačítko musí být poznat (dřív se jen nezvedalo na hover). */ [data-ui="v2"] .v2-btn:disabled, [data-ui="v2"] .v2-btn:disabled:hover, [data-ui="v2"] .v2-iconbtn:disabled, [data-ui="v2"] .v2-iconbtn:disabled:hover { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; } /* KPI karty (M1: skutečná čísla jen tam, kde existují). fb6: na Přehledu žijí KPI v postranním sloupci (.v2-col-side) jako svislý sloupek; grid v plné šířce zůstává jen pro admin (Demo clickwrap, 4 dlaždice). */ [data-ui="v2"] .v2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } [data-ui="v2"] .v2-col-side .v2-kpis { grid-template-columns: 1fr; gap: var(--sp-5); } [data-ui="v2"] .v2-kpi { padding: var(--sp-6) var(--sp-7); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow); } [data-ui="v2"] .v2-kpi.hot { border-color: var(--accent); box-shadow: 0 10px 24px -14px var(--accent); } [data-ui="v2"] .v2-kpi .row { display: flex; align-items: center; gap: var(--sp-3); } [data-ui="v2"] .v2-kpi .dot { width: 7px; height: 7px; border-radius: 50%; } [data-ui="v2"] .v2-kpi .dot.pulse { animation: nahrai-pulse 1.6s ease-in-out infinite; } [data-ui="v2"] .v2-kpi .k { font: 700 11.5px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } [data-ui="v2"] .v2-kpi .n { margin-top: var(--sp-2); font: 700 30px/1.1 var(--font-sans); letter-spacing: -.03em; } [data-ui="v2"] .v2-kpi .d { margin-top: 2px; font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-2); } [data-ui="v2"] .v2-kpi[data-link]:hover { background: var(--surface-2); cursor: pointer; } [data-ui="v2"] .v2-help-note { font: 400 12.5px/1.5 var(--font-sans); color: var(--ink-2); } /* ---------- Responzivita ---------- */ @media (max-width: 1280px) { /* Pod 1280 px je rail vždy sbalený (QA_CHECKLIST) — připnutí nezabírá místo. Rozbalení najetím myší zůstává, to rozvržení nemění (překrývá obsah). */ [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-rail { width: var(--rail-w); min-width: var(--rail-w); } [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-rail-inner { width: var(--rail-w); } /* .v2-rail-inner navíc kvůli nadřazenosti — bez něj by pravidlo prohrálo se selektorem pro rozbalený stav a popisky by se ukázaly v 64px railu. */ [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-rail:not(:hover):not(:focus-within) .v2-rail-inner .lbl, [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-rail:not(:hover):not(:focus-within) .v2-rail-inner .wordmark { display: none; } [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-rail:not(:hover):not(:focus-within) .v2-rail-inner .v2-rail-item { justify-content: center; } [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-rail:hover .v2-rail-inner, [data-ui="v2"] .v2-shell[data-rail="pinned"] .v2-rail:focus-within .v2-rail-inner { width: var(--rail-w-expanded); box-shadow: var(--shadow-lg); z-index: 40; } [data-ui="v2"] .v2-shell[data-rail="expanded"] .v2-rail-item .badge { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font: 700 10px/16px var(--font-sans); } } @media (max-width: 1100px) { [data-ui="v2"] .v2-conn .v { display: none; } [data-ui="v2"] .v2-hdr-fact.mailbox { flex-basis: 230px; max-width: 230px; } } @media (max-width: 900px) { [data-ui="v2"] .v2-hdr { gap: var(--sp-3); } [data-ui="v2"] .v2-hdr .v2-co { flex: 1 1 240px; min-width: 160px; max-width: 280px; } [data-ui="v2"] .v2-co-btn { min-width: 0; } [data-ui="v2"] .v2-hdr .v2-co-btn { width: 100%; } [data-ui="v2"] .v2-co-btn .co-eyebrow { display: none; } [data-ui="v2"] .v2-conn { display: none; } [data-ui="v2"] .v2-user-btn .nm { display: none; } [data-ui="v2"] .v2-hdr-fact.mailbox { flex-basis: 170px; max-width: 170px; } [data-ui="v2"] .v2-hdr-fact.mailbox .copy { display: none; } [data-ui="v2"] .v2-kpis { grid-template-columns: 1fr; } } @media (max-width: 700px) { [data-ui="v2"] .v2-hdr-fact.catalogs { flex: 0 0 40px; width: 40px; min-width: 40px; padding-inline: 0; justify-content: center; } [data-ui="v2"] .v2-hdr-fact.catalogs .fact-text { display: none; } [data-ui="v2"] .v2-hdr-fact.catalogs .catalog-progress { left: 8px; right: 8px; } [data-ui="v2"] .v2-hdr-popover { position: fixed; top: calc(var(--header-h) + 6px); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - var(--header-h) - 18px); } [data-ui="v2"] .v2-hdr-fact.credit { flex: 0 0 auto; max-width: 112px; } [data-ui="v2"] .v2-hdr-fact.mailbox { flex: 0 0 40px; width: 40px; padding-inline: 0; justify-content: center; } [data-ui="v2"] .v2-hdr-fact.mailbox .fact-text { display: none; } } /* KPI jako