/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* ── Design tokens ─────────────────────────────────────────────── */ :root { --table-header-color: var(--clr-surface-alt); --header-h: 3.9rem; --clr-indigo: #6366f1; --clr-indigo-dark: #4f46e5; --clr-indigo-alpha: rgba(99, 102, 241, 0.12); /* Zářivější indigo pro tmavé pozadí (v light = stejné jako indigo). */ --clr-indigo-bright: #6366f1; --clr-surface: #ffffff; --clr-surface-alt: #f8fafc; --clr-bg: #f0f2f5; --clr-border: #e2e8f0; --clr-divider: #cbd3de; --clr-text: #1e293b; --clr-text-2: #64748b; --clr-text-muted: #94a3b8; --clr-info: #1565c0; --clr-success: #2e7d32; --clr-danger: #c62828; --clr-link: #0a58ca; --radius-sm: 8px; --radius-md: 10px; /* Spacing — jednotná škála místo ad-hoc rem hodnot. */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-base: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 2.5rem; /* Jednotný vnitřní padding bílých boxů na split formech (edit-col--left/right, setup-sec náboru). Jeden zdroj pravdy → boxy nikde „necukají" při navigaci. */ --split-card-pad: 1.5rem 2rem; /* Typografie — type scale (font-size). */ --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-base: 0.95rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.7rem; /* Stíny — sémantické tokeny pro opakované hodnoty. */ --shadow-panel: 2px 0 12px rgba(0, 0, 0, 0.05); --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.15); --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-active-row: inset 3px 0 0 var(--clr-indigo, #6366f1); } /* ── Dark mode ───────────────────────────────────────────────────── Přepínač je v hlavičce (Nastavení). Inline skript v nastaví data-theme na (light|dark) ještě před CSS → žádný záblesk; „auto" se řídí systémem přes theme.js. Flip sémantických tokenů pokryje většinu plochy; brand indigo zůstává (kvůli kontrastu bílého textu na primary tlačítkách). Hardcoded barvy mají dark varianty u svých komponent níže. */ :root[data-theme="dark"] { color-scheme: dark; --clr-indigo-alpha: rgba(99, 102, 241, 0.24); --clr-indigo-bright: #818cf8; --clr-surface: #1b2436; --clr-surface-alt: #212c40; --clr-bg: #0f1522; --clr-border: #2c3852; --clr-divider: #3a4763; --clr-text: #e8edf5; --clr-text-2: #a4b1c6; --clr-text-muted: #7c8aa0; --clr-info: #5aa2f0; --clr-success: #5cc46a; --clr-danger: #ef5350; --clr-link: #7db0ff; --shadow-panel: 2px 0 12px rgba(0, 0, 0, 0.35); --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.5); --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.5); } /* Přepínač motivu ve „Vzhled" dropdownu — popisek vlevo, nativní select vpravo. */ .nav-theme-select { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem; font-size: 0.9rem; color: var(--clr-text); } .nav-theme-select select { padding: 0.3rem 0.4rem; font-size: var(--fs-sm); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface); color: var(--clr-text); cursor: pointer; } /* ── Reset framework defaultů ───────────────────────────────────── Tato sekce přepisuje defaulty z framework gemu (Imagine CSS). Funguje bez !important díky pořadí v layoutu — application.css se loaduje POZDĚJI než všechny framework/*.css, takže stejná specificita stačí. Když gem zmizí (separátní vlna), celá tato sekce může jít taky. */ /* Nadpisy: framework dává h1/h2 border-bottom + padding-bottom. Aplikace si vlastní border-bottom řeší ad hoc (.page-wrap > h1, .edit-title, .settings-content h1…). */ h1, h2 { border-bottom: none; padding-bottom: 0; } /* Marginy: framework nasazuje margin-top: 1rem na section/nav. */ section, nav { margin-top: 0; } /* .form: framework dává antiquewhite kartičku, my chceme bez. */ .form { background-color: transparent; border: none; padding: 0; } /* Patička formuláře: destruktivní akce vlevo, submit vždy vpravo — míření na Uložit nesmí končit na Smazat. Submit bez delete se drží taky vpravo. */ .form-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; } .form-footer input[type="submit"], .form-footer button[type="submit"], .form-footer [data-form-submit] { margin-left: auto; } /* Hidden inputs: framework dává display: block všem inputům. */ input[type="hidden"] { display: none; margin: 0; } /* HTML atribut `hidden` má být display:none, ale framework forms.css ho přebíjí pravidlem `input:not([type='submit']) { display:block }`. */ [hidden] { display: none !important; } /* Marginy uvnitř formulářů: framework nasazuje margin-top na first-of-type label/fieldset/input. Resetujeme. */ label:first-of-type, fieldset:first-child, fieldset label, fieldset input, section label:first-child, ol input, ol fieldset { margin-top: initial; } form input, form label, form ol, form section { margin-top: initial; } /* Inputy: framework forms.css je hodně basic. Sjednocený border, focus ring v indigo. */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="datetime-local"], input[type="date"], textarea, select { border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; font-size: 0.93rem; color: var(--clr-text); background: var(--clr-surface); outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, textarea:focus, select:focus { border-color: var(--clr-indigo); box-shadow: 0 0 0 3px var(--clr-indigo-alpha); } /* Formulářové labely: malý uppercase nadpis nad inputem. */ .form label, label.field-label { font-size: 0.72rem; font-weight: 700; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.6px; } /* Tabulky: framework table.css je decent, ale potřebujeme jiné barvy hlavičky, vlastní hover a sjednocené paddingy. */ table { width: 100%; margin-top: 0; border-collapse: collapse; } /* Hlavička minimalistická — bez šedého pruhu a verzálek; jen tišší popisek a jemný spodní oddělovač. */ table thead tr { border-bottom: 1px solid var(--clr-border); } table tr th { color: var(--clr-text-muted); font-size: 0.78rem; font-weight: 600; padding: 0.45rem 0.75rem; /* Sticky hlavička pro dlouhé tabulky. Podklad = surface (ne šedý pruh), ať při scrollu nesvítí obsah skrz. */ position: sticky; top: -1px; background: var(--clr-surface); vertical-align: bottom; text-align: left; } /* Akce v posledním sloupci (Upravit/Smazat) vpravo. */ table tr th:last-child:has(a), table tr td:last-child:has(a) { text-align: right; } /* Inline formuláře v tabulce (button_to) — bez block layoutu. */ table form { display: inline-block; margin-top: 0; } /* Řádky bez linek — oddělí je zebra (níž). */ table tr td { padding: 0.5rem 0.75rem; color: var(--clr-text); font-size: 0.92rem; } /* Zebra — střídavý podklad místo řádkových borderů. Hierarchické tabulky (report výkazů, projekt→pozice) mají vlastní členění řádků, ty vynecháme. */ table tbody tr:nth-child(even) td { background-color: var(--clr-surface-alt); } .report-timesheet tbody tr:nth-child(even) td, .entity-projects-list tbody tr:nth-child(even) td { background-color: transparent; } /* Třída pro buňky s dlouhým textem — povolí zalomení. */ table tr td.wrap { white-space: normal; overflow-wrap: break-word; word-break: normal; } table tbody tr:hover td { background-color: var(--clr-indigo-alpha); } /* HR: framework dává tlustou linku, my chceme jemnou. */ hr { border: none; border-top: 1px solid var(--clr-border); margin: 1.25rem 0; } /* .archived — tlumený stav záznamu (uzavřený úkol, deaktivovaný řádek). Z framework/helpers.css; přejato kvůli vyhození toho souboru. */ .archived { color: var(--clr-text-muted); } .archived a { color: var(--clr-indigo); } .archived button, .archived a.button { color: var(--clr-text-muted); } /* ── Base elementy přesunuté z framework/base.css ──────────────── Universal box-sizing, margin systém pro typografii, h1-h6 weights, default nav layout, h1+akce grid layout, defenzivní img. Vynecháno z původního: aside.left-sidebar (nepoužité), dl grid (.profile-meta má vlastní layout), pre styling (.doc-viewer-text má vlastní). */ *, *::before, *::after { box-sizing: border-box; } /* Margin systém pro typografii. Pozn.: section, nav z původního "div, section, table+h2, nav, img { margin-top: 1rem }" jsou vynechány — mBlue je řeší vlastním layoutem (flex/grid), dodatečný margin defaults nevyhovuje. */ *:first-child { margin-top: 0; } h1, header:has(h1) { margin-top: 1.5rem; } h2, header:has(h2) { margin-top: 1.2rem; } h3, header:has(h3), h4 { margin-top: 1rem; } header, h1, h2, h3, h4, h5, h6 { margin-bottom: 0; } header form, h1 form, h2 form, h3 form, h4 form, h5 form, h6 form { margin-top: 0; } p, ul, pre { margin-top: 1rem; margin-bottom: 0; } ol, ul { margin-top: 0.5rem; margin-bottom: 0; } table + h2, img { margin-top: 1rem; } fieldset { margin-top: 1.5rem; } dl { margin-bottom: 1rem; } /* Typography defaults pro nadpisy. font-weight: normal je default z gemu — mBlue komponentní CSS pak řeší silnější weights tam, kde to chce. */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; text-wrap: wrap; font-weight: normal; } h4 { font-size: 1.1rem; } /* Default link styling. */ a { color: var(--clr-link); text-decoration: none; } /* Navštívené odkazy NEodlišujeme barvou — jsme aplikace, ne web. Záměrně tu není žádné `a:visited { color }`: dřív zdejší pravidlo (specificita 0,1,1) přebíjelo komponentové barvy odkazů psané přes element-selektory (nav `span > a`, název úkolu `.task-checklist-link` apod.), takže navštívený odkaz měnil barvu. Bez :visited pravidla platí barva z `a` / `.x a` i pro navštívený stav (author pravidlo přebije UA fialovou), tedy všude jednotně. */ /* Odkazy se defaultně NEpodtrhávají ani na hover — jsme aplikace, ne web, a většina je chrome (nav, kostka Dashboard, tlačítka-odkazy, karty, řádky). Podtržení na hover je opt-in u textových/prose odkazů, kde si ho komponenta deklaruje sama (.row-primary-link řadicí odkazy, obsah popisů…). Dřív globální `a:hover { underline }` (specificita 0,1,1) přebíjelo .nav-dash apod. a podtrhávalo i chrome. */ /* H1/H2/H3 s akcemi (div.buttons) nebo nav — grid layout pro hlavičky stránek se skupinou tlačítek. Konkrétně používáno např. "Výkazy
Report Vykázat
". */ h1:has(div.buttons), h1:has(nav), h2:has(div.buttons), h2:has(nav), h3:has(div.buttons), h3:has(nav) { display: grid; grid-template-columns: max-content max-content; justify-content: space-between; align-items: center; } h1 div.buttons, h2 div.buttons, h3 div.buttons { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; } h1 nav, h2 nav, h3 nav { grid-column: 1 / span 2; font-size: 1rem; margin-top: 0; } /* Hlavička index stránky. Layout (template-areas): ┌──────────┬──────────┬────────────┬─────────┐ │ title │ (spacer) │ filter │ buttons │ ← row 1 ├──────────┼──────────┴────────────┴─────────┤ │ chips │ (volné) │ ← row 2 └──────────┴─────────────────────────────────┘ Filter se přilepí těsně k buttonům (sloupce 3 a 4 jsou max-content, 2. sloupec 1fr je spacer). Mezi filter a buttons je vertikální oddělovač přes border-left. Chips slot pod h1 má min-height, aby přidání tagu nedrcnulo tabulkou dolů. */ .page-header { display: grid; /* Řádek 1: titulek (+ inline tag chips) vlevo, akční buttony vpravo. Řádek 2: filter řádek přes celou šířku — má víc místa, inputy wrappnou míň. */ grid-template-columns: 1fr max-content; grid-template-areas: "title buttons" "filter filter"; column-gap: 1rem; row-gap: 0.85rem; align-items: center; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--clr-border); } /* Titulek + vybrané tag chips na jedné lince: „Kandidáti [tag1] [tag2]". Chips sem teleportuje JS (#page-header-chips), proto bez min-height — výška řádku drží titulek a chip se do ní vejde, layout neskáče. */ .page-header__title { grid-area: title; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; min-width: 0; } .page-header__title > h1 { margin: 0; } .page-header__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; } .page-header > .index-filter { grid-area: filter; margin: 0; min-width: 0; } .page-header > .buttons { grid-area: buttons; display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; } /* ── Breadcrumb v titulku (T-097) ────────────────────────────────── Cesta o úroveň výš je v NADPISU, ne v back-linku „Zpět na …" nad obsahem — ty appka nemá. Oba segmenty jsou odkaz: rodič je tlumený (naviguje výš), leaf drží plnou barvu nadpisu a míří sám na sebe. Rozestup drží vnitřní `.breadcrumb`, ne `h1` — nadpis si jinde nese vlastní flex layout s gapem 1rem (.edit-title, .settings-content > h1). INV-11: rozlišení segmentů je typografické, žádný barevný proužek. */ .breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; min-width: 0; } .breadcrumb__link { color: inherit; text-decoration: none; } .breadcrumb__link:not(.breadcrumb__link--current) { color: var(--clr-text-muted); } .breadcrumb__link:hover { text-decoration: underline; } /* `font-size` v `em`, ne `rem`: breadcrumb sedí v nadpisech různých velikostí (`.edit-title`, `.settings-content > h1`, `form.form > h1`) a separátor se musí zmenšit relativně ke KAŽDÉMU z nich. Na `h1` se `font-size` dávat nesmí — `edit_form.css` se načítá až za tímhle souborem a vyhrál by tie na specificitě. */ .breadcrumb__sep { color: var(--clr-text-muted); font-weight: 400; font-size: 0.75em; } /* Default nav layout (mBlue header nav má vlastní override). */ nav { display: flex; gap: 0.2rem 0.7rem; flex-wrap: wrap; } /* Defenzivní img default. */ img { max-width: 100%; } /* ── Forms baseline (přesunuto z framework/forms.css) ──────────── mBlue specifické vstupy (border, focus ring, padding) jsou v reset sekci nahoře. Tady jen univerzální layout, fieldset, checkbox/radio wrapper, disabled state. Vynecháno z původního: form.inline / form.bold (nepoužité), form section/small styling (nepoužité), label+.multiselect (nepoužité), margin systém formulářů (mBlue ho vědomě potlačuje pro .field layout). */ /* Block layout default — formulářové prvky přes celou šíři kontejneru. mBlue v praxi wrapuje v .field/.edit-field-row pro grid layout. */ select, input:not([type='submit']), textarea { display: block; width: 100%; } /* Inline hint pod inputem ( Tip). */ input + small, textarea + small, select + small { display: block; margin-top: 0.1rem; } /* fieldset jako flex container — používá se v users/_form.html.erb. */ fieldset { display: flex; flex-wrap: wrap; gap: 1rem; border: 0; padding: 0; padding-inline: 0; padding-block: 0; margin-inline: 0; } fieldset div, fieldset select, fieldset input:not([type='submit']), fieldset textarea { flex: 1; } fieldset div { margin-top: 0; } fieldset:has(input[type='radio']), fieldset:has(input[type='checkbox']) { gap: 0.5rem; align-items: center; } fieldset.grid { display: grid; } fieldset.grid input, fieldset.grid select { width: 100%; } /* Custom checkbox/radio wrapper. Použito např. v users/_form.html.erb pro "Deaktivovaný" toggle. */ label:has(input[type="checkbox"]), label:has(input[type="radio"]) { display: inline-flex; align-items: center; gap: 0.3rem; background-color: var(--clr-surface); padding: 5px 11px; white-space: nowrap; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); font-size: 1rem; cursor: pointer; } label:has(input[type="checkbox"]):has(input[disabled]), label:has(input[type="radio"]):has(input[disabled]) { background-color: #fdf5eb; cursor: default; } label:has(input[type="checkbox"]):has(input:checked), label:has(input[type="radio"]):has(input:checked) { border-color: var(--clr-indigo); } label:has(input[type="checkbox"]) input, label:has(input[type="radio"]) input { margin-top: 0; width: auto; } input[type="checkbox"]:hover, input[type="radio"]:hover { cursor: pointer; } /* Disabled/readonly state — beige bg (z frameworku). */ input[disabled], textarea[disabled], input[readonly="readonly"], textarea[readonly="readonly"], select[disabled], select[readonly="readonly"], trix-editor[disabled], trix-editor[readonly="readonly"] { color: var(--clr-text-muted); background-color: #fdf5eb; } /* Rails .button_to wrapper — pro DELETE link helpery. */ .button_to { display: inline-block; margin-top: 0; } .button_to input[type="submit"] { margin-top: 0; } /* Defenzivní placeholder font-weight. */ ::placeholder { font-weight: normal; } body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; padding: 0px; background: var(--clr-bg); font-family: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; -webkit-font-smoothing: antialiased; } main { flex: 1; padding: 1rem; background: var(--clr-bg); } body > header { grid-column: 1 / span 2; padding: 0px; background-color: var(--clr-surface); border-bottom: 1px solid var(--clr-border); /* Lišta zůstává nahoře i při scrollu a nad náhledovým panelem, ať jsou sekce, kebab a avatar vždy po ruce. */ position: sticky; top: 0; z-index: 60; } /* Lišta: kostka Dashboard je flush k levé hraně (stretch přes celou výšku), zbytek se odsadí. Pravou skupinu (nav-secondary + aside) tlačí doprava margin-left:auto na nav-secondary. */ .nav-bar { display: flex; align-items: stretch; gap: 1.4rem; min-height: var(--header-h); padding-right: 1.5rem; } /* Dashboard = kotva vlevo ve tvaru „kostky se šipkou". I když nejsi na dashboardu, drží ztlumenou indigo identitu (indigo-alpha tint + indigo-bright ikona/text) → je vidět i na tmavém pozadí; plná indigo šipka v hoveru a v aktivním stavu. */ .nav-dash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; align-self: stretch; min-width: 5.2rem; padding: 0 1.7rem 0 1.1rem; background: var(--clr-indigo-alpha); color: var(--clr-indigo-bright); text-decoration: none; clip-path: polygon(0 0, calc(100% - 0.85rem) 0, 100% 50%, calc(100% - 0.85rem) 100%, 0 100%); } .nav-dash:hover, .nav-dash.is-active { background: var(--clr-indigo); color: #fff; } /* Ikona = maska (jako trix ikony) → tinguje se přes currentColor: indigo-bright když neaktivní, bílá v hoveru/aktivní. Jeden zdroj, funguje light i dark. */ .nav-dash__icon { width: 1.4rem; height: 1.4rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,") center / contain no-repeat; mask: url("data:image/svg+xml,") center / contain no-repeat; } .nav-dash__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; } /* Skupiny sekcí — hlavní tok vlevo, průřezové vpravo. Položky se roztahují přes celou výšku lišty (hover plocha až k hranám, dropdown navazuje bez mezery); text uvnitř centruje align-items na .nav-item. */ .nav-primary, .nav-secondary { display: flex; align-items: stretch; gap: 1.35rem; } .nav-secondary { margin-left: auto; gap: 1.1rem; } .nav-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 600; color: var(--clr-text); text-decoration: none; white-space: nowrap; } .nav-item:hover { color: var(--clr-indigo); } /* Aktivní sekce = indigo text (jako odkaz), žádný banner ani změna layoutu. indigo-bright → výrazné i na tmavém pozadí. */ .nav-item.is-active { color: var(--clr-indigo-bright); } /* Průřezové sekce vpravo jsou vizuálně tišší než hlavní tok. */ .nav-secondary .nav-item { font-size: 0.9rem; font-weight: 500; color: var(--clr-text-2); } .nav-secondary .nav-item:hover { color: var(--clr-indigo); } .nav-secondary .nav-item.is-active { color: var(--clr-indigo-bright); } /* Badge s počty (živě z DB) = zároveň klikací zkratka „Přidat" té sekce. Aktivní sekci zvýrazní indigem; hover/focus signalizuje, že je akční. */ .nav-badge { font-size: 0.72rem; font-weight: 600; line-height: 1.35; color: var(--clr-text-muted); background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: 999px; padding: 0.03rem 0.42rem; cursor: pointer; } .nav-badge:hover { color: #fff; background: var(--clr-indigo); border-color: transparent; } .nav-badge:focus-visible { outline: 2px solid var(--clr-indigo); outline-offset: 1px; } .nav-item.is-active .nav-badge { color: var(--clr-indigo-bright); background: var(--clr-indigo-alpha); border-color: transparent; } .nav-item.is-active .nav-badge:hover { color: #fff; background: var(--clr-indigo); } .nav-staging-badge { align-self: center; font-size: 1.05rem; font-weight: 700; background-color: #fde047; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); } /* Pravá strana hlavičky — staging badge + avatar. Doprava ji odsune margin-left:auto na .nav-secondary. */ .nav-aside { display: flex; align-items: center; gap: 0.9rem; } /* Pravé dropdowny (Úkoly/Výkazy/Faktury/Reporty/Nastavení) — nativní
, summary = název sekce (styl .nav-item + šipka), menu jako dropdown panel. */ .nav-menu { position: relative; display: flex; align-items: stretch; } .nav-menu > summary { list-style: none; cursor: pointer; user-select: none; } .nav-menu > summary::-webkit-details-marker { display: none; } /* Sekce se seznamem nese v summary odkaz na index (menu se otvírá hoverem, klik naviguje). Odkaz dědí barvu summary, ať fungují is-active/hover stavy. */ .nav-menu > summary a { color: inherit; text-decoration: none; } .nav-secondary .nav-menu > summary::after { content: '▾'; font-size: 0.7em; color: var(--clr-text-muted); } .nav-menu[open] > summary, .nav-menu > summary:hover { color: var(--clr-indigo); } .nav-menu.is-active > summary { color: var(--clr-indigo-bright); } .nav-menu__menu { position: absolute; right: 0; top: 100%; min-width: 13rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem; z-index: 70; } .nav-menu__menu a, .nav-menu__menu button { padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); color: var(--clr-text); text-decoration: none; font-size: 0.9rem; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; width: 100%; } .nav-menu__menu a:hover, .nav-menu__menu button:hover { background: var(--clr-indigo); color: #fff; } .nav-menu__sep { height: 1px; background: var(--clr-border); margin: 0.3rem 0.2rem; } /* Kolaps hlavičky na úzku (T-053). Lišta je jinak jeden neroztažitelný flex řádek (.nav-item má white-space:nowrap) → nad ~10 sekcemi + dropdowny + lupou a avatarem na úzkém okně PŘETÉKÁ a ořízne se. Pod stejným prahem, kde se split-view skládá pod sebe (820px, viz @media níže), tedy hlavičku necháme ZALOMIT místo přetečení: menší mezery, sekundární nav se přestane odtlačovat doprava (margin-left auto→0) a spadne pod hlavní tok; lupa+avatar+staging drží vpravo na svém řádku. Dropdowny zůstávají position:absolute, takže menu se nerozbije. Žádná změna markup — čistě viewport media. */ @media (max-width: 820px) { .nav-bar { flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.35rem 1rem 0.35rem 0; } .nav-primary, .nav-secondary { flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; } .nav-secondary { margin-left: 0; } .nav-aside { margin-left: auto; } } /* Avatar v hlavičce + obecná kulatá komponenta (i na profilu). */ .nav-avatar { display: inline-flex; border-radius: 50%; } .user-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: visible; background: linear-gradient(135deg, var(--clr-indigo), #6366f1); color: #fff; font-weight: 600; flex-shrink: 0; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-avatar--sm { width: 2.1rem; height: 2.1rem; font-size: 0.9rem; } .user-avatar--lg { width: 4.5rem; height: 4.5rem; font-size: 1.8rem; } .nav-avatar:hover .user-avatar { box-shadow: 0 0 0 2px var(--clr-indigo); } /* Profilová stránka (users#show) — hlavička s avatarem. */ .profile-head { display: flex; align-items: center; gap: 1.25rem; } /* Oprava zarovnání posledního sloupce v tabulkách, pokud obsahuje odkazy */ table { & tr { & th, & td { &:last-child:has(a) { text-align: left; } } } } /* o pravu frameworku: submit tlačítko u hledání */ form input[type="submit"] { margin-top: initial; } /* Fix linky pod nadpisem v modálu */ dialog h1 { border-bottom: initial; } /* ── Chip ukazující předvyplněnou vazbu v modálu ─────────────────── */ .dialog-binding-chip { display: inline-flex; align-items: baseline; gap: 0.35rem; margin: 0 0 0.85rem; padding: 0.3rem 0.65rem; background: var(--clr-indigo-alpha); color: var(--clr-indigo-dark); border: 1px solid color-mix(in srgb, var(--clr-indigo) 25%, transparent); border-radius: var(--radius-sm); font-size: 0.82rem; line-height: 1.3; } .dialog-binding-chip[hidden] { display: none; } .dialog-binding-chip-label { color: var(--clr-text-2); font-weight: 500; } .dialog-binding-chip-value { font-weight: 700; } a.plain { color: inherit; text-decoration: none; font-weight: 500; cursor: pointer; } /* ── Tag ── molekula přesunuta do molecules.css (sdílené, linknutelné do shadow ostrovů — M5). Definice .tag / .tag--* žije tam. ── */ .timeline { max-width: 760px; } .timeline__day { margin-bottom: 2rem; } .timeline__date { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-text-muted); margin-bottom: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--clr-border); } .timeline__item { display: flex; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--clr-border); } .timeline__item:last-child { border-bottom: none; } .timeline__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--clr-text-muted); margin-top: 0.45rem; } .timeline__content { flex: 1; min-width: 0; } .timeline__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-bottom: 0.2rem; } .timeline__note { font-size: 0.9rem; color: var(--clr-text); margin-bottom: 0.2rem; } .timeline__actions { margin-left: auto; padding-left: var(--space-sm); } /* Meta řádek aktivity: typ + čas + autor + odkaz na subjekt + kebab akce. .timeline__meta má gap: 0, takže rozestup řeší margin-left položek. 0.7rem a 0.4rem nemají token (nejblíž --fs-xs 0.75rem / --space-sm 0.5rem), necháváme literál, ať se vzhled nezmění. */ .timeline__type { font-size: 0.7rem; } .timeline__time { color: var(--clr-text-muted); font-size: var(--fs-sm); margin-left: 0.4rem; } .timeline__author { color: var(--clr-text-2); font-size: var(--fs-sm); margin-left: 0.4rem; } .timeline__subject { font-size: var(--fs-sm); margin-left: 0.4rem; } .timeline__empty { color: var(--clr-text-muted); } /* ── Dashboard ────────────────────────────────────────────────── 2/1 grid (aktivity vlevo, úkoly vpravo), sekce nadpisy. */ /* ostrov = block kontejner seznamu (custom element je default inline). */ entity-list { display: block; } .dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; } .dashboard-section { margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--clr-border); font-size: 1rem; font-weight: 600; } .dashboard-section--with-action { display: flex; align-items: center; justify-content: space-between; } .dashboard-section--spaced { margin-top: 1.5rem; } /* Activity feed tabulka (chip + datum + autor + popis + akce). Použito v dashboardu a na show stránkách (companies, candidates…). */ .activity-feed-table { width: 100%; } .activity-feed-table td:nth-child(1) { width: 2.5rem; } .activity-feed-table td:nth-child(2) { width: 6rem; color: var(--clr-text-muted); font-size: 0.85rem; white-space: nowrap; } .activity-feed-table td:nth-child(3) { width: 3.5rem; color: var(--clr-text-2); font-size: 0.85rem; } .activity-feed-table td:nth-child(4) { font-size: 0.9rem; } .activity-feed-table .tag { font-size: 0.7rem; } /* Krátký prázdný stav (světlejší než .empty-state, který má větší marginy). */ .muted-empty { color: var(--clr-text-muted); font-size: 0.9rem; } /* Indexové tabulky — šířka a pomocné buňky (sjednoceno s candidates/companies). */ .invoices-index-table, .projects-index-table { width: 100%; } .col-num { text-align: right; font-variant-numeric: tabular-nums; } .col-nowrap { white-space: nowrap; } .col-muted { color: var(--clr-text-muted); font-size: 0.9rem; } /* ── Stránkování seznamů (shared/_pagination) ──────────────────── Zobrazeno X–Y z N. · « Předchozí 1 2 … [6] … 12 Další » · Na stránku [50▾] Aktuální stránka = tmavě vyplněné tlačítko (v dark modu se invertuje). */ .paginator { margin-top: 1rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 0.85rem; } .paginator__info { color: var(--clr-text-2); } .paginator__pages { display: inline-flex; gap: 0.25rem; align-items: center; } .paginator__page.is-current { background: var(--clr-text); border-color: var(--clr-text); color: var(--clr-surface); } .paginator__page.is-disabled { color: var(--clr-text-muted); pointer-events: none; } .paginator__gap { color: var(--clr-text-muted); padding: 0 0.25rem; } .paginator__per-page { display: inline-flex; gap: 0.5rem; align-items: center; color: var(--clr-text-2); white-space: nowrap; } .paginator__per-page select { width: auto; margin: 0; padding: 0.3rem 0.5rem; font-size: 0.85rem; } /* ── Timesheet (Výkazy) index tabulka ─────────────────────────── */ .timesheet-table-wrap { overflow-x: auto; } .timesheet-table { table-layout: fixed; width: 100%; min-width: 70rem; } .timesheet-table .col-date, .timesheet-table .col-user, .timesheet-table .col-duration, .timesheet-table .col-actions { white-space: nowrap; } .timesheet-table th.col-date, .timesheet-table td.col-date { width: 6rem; } .timesheet-table th.col-user, .timesheet-table td.col-user { width: 8rem; } .timesheet-table th.col-project { width: 14rem; } .timesheet-table th.col-tags { width: 8rem; } .timesheet-table th.col-desc, .timesheet-table td.col-desc { width: 24rem; } .timesheet-table .col-duration { width: 5rem; text-align: right; } .timesheet-table td.col-duration { font-variant-numeric: tabular-nums; } .timesheet-table .col-actions { width: 5.5rem; text-align: right; } .timesheet-table td.col-date { color: var(--clr-text-2); } /* Sub-popisek (název firmy pod projektem) v projektovém sloupci. */ .timesheet-company-sub { color: var(--clr-text-muted); font-size: 0.85rem; } /* ── Entity show stránka — sdílené layouty ─────────────────────── Dvousloupcový grid pro show stránky (companies, projects…), key-value tabulka pro info (IČO, DIČ, email, telefon, web…). */ .entity-show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .entity-info-table { width: 100%; } .entity-info-table td:first-child { width: 3.5rem; font-weight: 500; } /* Řádek s vícenásobným obsahem (Poznámka): label nahoře, hodnota may wrap a má top padding. */ .entity-info-table tr.entity-info-row--top td { vertical-align: top; padding-top: 0.25rem; } .entity-info-note { color: var(--clr-text-2); } /* Modifikátor: tighter grid (gap 2rem 1.5rem) pro projects/show apod., kde 3rem je moc. */ .entity-show-grid--tight { gap: 2rem 1.5rem; } .entity-info-link { color: var(--clr-link); } /* Sekce ohraničená nahoře (Kontakty, Aktivity… na show stránce). */ .entity-section--bordered { padding-top: 1.25rem; border-top: 1px solid var(--clr-border); } .entity-section-heading { margin-bottom: 0.75rem; display: flex; align-items: center; font-size: 1rem; } .entity-section-heading .muted-count { font-weight: normal; } /* Body popisku entity nad info tabulkou. */ .entity-description { padding: 1rem 0.75rem; margin-bottom: 1.5rem; color: var(--clr-text-2); font-size: 0.9rem; } /* Meta atributy entity: klíč a hodnota na jednom řádku vedle sebe. */ .entity-meta { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .entity-meta-row { display: flex; align-items: baseline; gap: 0.6rem; } .entity-meta-row dt { flex: 0 0 9rem; margin: 0; color: var(--clr-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; } .entity-meta-row dd { flex: 1 1 auto; margin: 0; min-width: 0; color: var(--clr-text); } /* Hierarchická tabulka: projekt → pozice jako sub-řádek. */ .entity-projects-list tr.is-child { color: var(--clr-text-2); font-size: 0.9rem; } .entity-projects-list tr.is-child td { padding-left: 1rem; padding-top: 0; padding-bottom: 0.2rem; } .entity-projects-list .entity-projects-arrow { color: var(--clr-text-muted); margin-right: 0.4rem; } .entity-projects-list tr.is-child a { color: var(--clr-text-2); } .entity-projects-list .entity-projects-name td { font-weight: 500; padding-bottom: 0.1rem; } .entity-projects-list .entity-projects-status { text-align: right; padding-top: 0; padding-bottom: 0.2rem; } .entity-projects-historical { margin-top: 0.75rem; font-size: 0.9rem; } .tag-primary-mark { font-size: 0.7rem; margin-left: 0.4rem; } /* ── Company show v2 — karta firmy ─────────────────────────────── Hlavička s KPI proužkem, dvousloupcový layout (vlevo zakázky + aktivity, vpravo info / kontakty / dokumenty). Panely = .show-card. */ .show-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 1rem 1.25rem; } .show-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .show-card__title { font-size: 1rem; font-weight: 500; } .show-card__title .muted-count { font-weight: normal; color: var(--clr-text-muted); } /* Sekce vkládané do karty (Úkoly, Dokumenty) si nesou vlastní border-top jako oddělovač — uvnitř .show-card je nadbytečný. */ .show-card > .entity-section { border-top: none; padding-top: 0; margin-top: 0; } .show-header { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1rem; } .show-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .show-header__title-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .show-header__title-row h1 { margin: 0; font-size: 1.5rem; } .show-header__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-top: 0.5rem; color: var(--clr-text-2); font-size: 0.9rem; } .show-header__meta b { font-weight: 500; color: var(--clr-text); } .show-header__actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .show-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .show-col { display: flex; flex-direction: column; gap: 1rem; } .show-owner { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--clr-border); } .show-owner__avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--clr-indigo-alpha); color: var(--clr-indigo-dark); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 500; flex-shrink: 0; } .show-owner__name { font-size: 0.9rem; } .show-owner__role { font-size: 0.8rem; color: var(--clr-text-muted); } .show-info-table { width: 100%; font-size: 0.9rem; } .show-info-table td { padding: 0.22rem 0; } .show-info-table td:first-child { color: var(--clr-text-2); } .show-info-table td:last-child { text-align: right; color: var(--clr-text); } .proj-card { border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: 0.75rem 0.85rem; } .proj-card + .proj-card { margin-top: 0.6rem; } .proj-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .proj-card__name { font-size: 0.95rem; font-weight: 500; } .proj-card__name a { color: var(--clr-text); } .proj-card__sub { margin: 0.2rem 0 0.6rem; font-size: 0.8rem; color: var(--clr-text-2); } .proj-card__positions { display: flex; flex-direction: column; gap: 0.4rem; } .proj-pos { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.88rem; } .proj-pos__name a { color: var(--clr-text); } .proj-pos__detail { color: var(--clr-text-2); font-size: 0.82rem; margin-left: 0.4rem; } /* Kontakt v postranním panelu — kompaktní vertikální blok (ne tabulka, která se v úzkém sloupci ošklivě láme). */ .show-contact { font-size: 0.85rem; } .show-contact + .show-contact { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--clr-border); } .show-contact__top { display: flex; align-items: center; gap: 0.4rem; } .show-contact__name { font-weight: 500; } .show-contact__top .button { margin-left: auto; } .show-contact__role { color: var(--clr-text-2); } .show-contact__line { display: block; } @media (max-width: 900px) { .show-grid { grid-template-columns: 1fr; } } /* ── Index page helpers (filtry, souhrn, prázdný stav) ──────────── */ /* Filter bar pod h1 (užito tam, kde je víc filtrů než se vejde do .buttons) */ .index-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin: 1rem 0; } .index-filters .field { display: flex; flex-direction: column; gap: 0.25rem; } .index-filters label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--clr-text-muted); } .index-filters input, .index-filters select { font-size: 0.88rem !important; padding: 0.4rem 0.6rem !important; } .index-filters .index-filters__reset { align-self: flex-end; padding-bottom: 0.5rem; font-size: 0.82rem; color: var(--clr-text-muted); text-decoration: underline; } .index-filters .index-filters__reset:hover { color: var(--clr-indigo); } /* Krátký souhrnový řádek nad tabulkou (počet, suma…) */ .list-summary { margin: 0 0 0.75rem !important; font-size: 0.85rem; color: var(--clr-text-muted); } .list-summary strong { color: var(--clr-text); font-weight: 600; } /* Prázdný stav (žádné záznamy / žádné hledání) */ .empty-state { margin: 1rem 0; color: var(--clr-text-muted); font-size: 0.9rem; } /* ── Patička s developer odkazy ─────────────────────────────────── */ .dev-footer { grid-column: 1 / -1; padding: 0.6rem 1.5rem; font-size: 0.7rem; color: var(--clr-text-muted); border-top: 1px solid var(--clr-border); background: var(--clr-surface); } .dev-footer span { margin-right: 0.4rem; opacity: 0.7; } .dev-footer a { color: var(--clr-text-muted); text-decoration: none; } .dev-footer a:hover { color: var(--clr-indigo); text-decoration: underline; } /* ── Globální hledání (modal) ───────────────────────────────────── */ /* ── Dialog (base) ────────────────────────────────────────────── Náhrada za framework/dialog.css. Konkrétní dialogy si níže přepisují rozměry; tady je jen vzhled rámu, podklad a backdrop. */ dialog { width: 540px; max-width: 90vw; border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-lg); background: var(--clr-surface); color: var(--clr-text); } dialog::backdrop { background: rgba(15, 23, 42, 0.45); } /* ── Toast (notifikace) ───────────────────────────────────────── Náhrada za framework/toasts.css + JS — viz toast.js. */ .toast { position: fixed; right: var(--space-base); bottom: var(--space-base); z-index: 200; display: flex; align-items: center; gap: 0.6rem; max-width: 320px; padding: var(--space-md) var(--space-base); border-radius: var(--radius-sm); background: var(--clr-text); color: #fff; font-size: var(--fs-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); transition: opacity 0.2s, transform 0.2s; } /* Inverzní look (tmavý box) v dark modu nefunguje — --clr-text je světlá, takže by vyšlo světlé pozadí s bílým textem. Ve tmě je toast plocha. */ :root[data-theme="dark"] .toast { background: var(--clr-surface-alt); color: var(--clr-text); border: 1px solid var(--clr-border); } .toast__close { border: 0; padding: 0; background: transparent; color: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer; opacity: 0.7; } .toast__close:hover { opacity: 1; } .toast--leaving { opacity: 0; transform: translateY(8px); } dialog.global-search-dialog { width: 600px; max-width: 90vw; height: fit-content; max-height: 80vh; top: 12vh; padding: 1.25rem 1.5rem; } dialog.global-search-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem 0; padding: 0 0 0.5rem; border-bottom: 1px solid var(--clr-border); } dialog.global-search-dialog header h1 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--clr-text); } dialog.global-search-dialog header form[method="dialog"] { margin: 0; } dialog.global-search-dialog .dialog-close { background: transparent; color: var(--clr-text-muted); border: none; border-radius: 6px; padding: 0.1rem 0.5rem; font-size: 1.4rem; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: none; transition: background 0.15s, color 0.15s; } dialog.global-search-dialog .dialog-close:hover { background: var(--clr-indigo-alpha); color: var(--clr-indigo); box-shadow: none; } .global-search-form { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.25rem; } .global-search-form input[type="text"] { flex: 1; } .global-search-hint { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--clr-text-muted); } /* ── Výkaz (modal + form) ───────────────────────────────────────── */ dialog.time-entry-dialog { width: 540px; max-width: 90vw; height: fit-content; max-height: 85vh; top: 10vh; padding: 1.25rem 1.5rem; } dialog.time-entry-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem 0; padding: 0 0 0.5rem; border-bottom: 1px solid var(--clr-border); } dialog.time-entry-dialog header h1 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--clr-text); } dialog.time-entry-dialog header form[method="dialog"] { margin: 0; } dialog.time-entry-dialog .dialog-close { background: transparent; color: var(--clr-text-muted); border: none; border-radius: 6px; padding: 0.1rem 0.5rem; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: none; } .time-entry-form { display: flex; flex-direction: column; gap: 0.85rem; margin: 0; } .time-entry-form__row { display: flex; flex-direction: column; gap: 0.25rem; } .time-entry-form__row label { font-size: 0.8rem; color: var(--clr-text-muted); } .time-entry-form__row input, .time-entry-form__row select, .time-entry-form__row textarea { width: 100%; } .time-entry-form__duration { display: flex; gap: 0.5rem; } .time-entry-form__duration select { flex: 1; } .time-entry-form__hint { font-size: 0.75rem; color: var(--clr-text-muted); } .time-entry-form__hint code { background: var(--clr-bg-alt, #f3f3f3); padding: 0 0.25rem; border-radius: 3px; } .time-entry-form__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; width: 100%; } .time-entry-form__actions .time-entry-form__delete { margin: 0 auto 0 0; } /* Dvousloupcové řádky v dialozích (priorita/termín, pro koho/zadavatel…). flex: 1 1 0 a 0.9rem nemají token — necháváme literál. */ .time-entry-form__cols { display: flex; gap: var(--space-base); } .time-entry-form__col { flex: 1 1 0; } .time-entry-form__inline-options { display: flex; gap: var(--space-base); align-items: center; } /* Vyšší specificita než `.time-entry-form__row label`, aby option-label přepsal jeho font-size (dřív řešeno inline stylem). */ .time-entry-form__row label.time-entry-form__option-label { font-weight: normal; font-size: 0.9rem; } /* ── Time entry tag picker ─────────────────────────────────────── */ .te-tags { display: flex; flex-direction: column; gap: 0.4rem; } .te-tags__selected { display: flex; flex-wrap: wrap; gap: 0.25rem; } .te-tags__selected:empty { display: none; } /* Vybraný chip nikdy nepřeteče šířku pickeru (modál i filtr) — dlouhý název se ořízne ellipsis, plný je v title. Řádek se zalomí mezi chipy, ne uvnitř názvu. */ .te-tags__selected .te-tag-chip { max-width: 100%; } .te-tags__selected .te-tag-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .te-tag-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--tag-color, #334155); border: 1px solid var(--tag-color, #334155); /* Text chipu: bílá je výchozí, ale světlé odstíny palety si přes `--tag-text-color` řeknou o tmavý text (helper `status_chip`, T-188). */ color: var(--tag-text-color, #fff); font-size: 0.78rem; font-weight: 600; line-height: 1.45; white-space: nowrap; } .te-tag-chip.is-hidden { display: none; } .te-tag-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; font-size: 0.95rem; line-height: 1; opacity: 0.7; } .te-tag-chip__remove:hover { opacity: 1; background: rgba(255, 255, 255, 0.2); } .te-tag-chip--static { cursor: default; } /* Toggle varianta — pro výběr ve formuláři (opacity přepínač) */ .te-tag-chip--toggle { cursor: pointer; user-select: none; opacity: 0.42; transition: opacity 0.12s, box-shadow 0.12s; } .te-tag-chip--toggle:hover { opacity: 0.78; } .te-tag-chip--toggle.is-selected { opacity: 1; box-shadow: 0 1px 2px color-mix(in srgb, var(--tag-color, #334155) 55%, transparent), inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); } .te-tag-list { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; } .te-tag-list--stacked { flex-direction: column; align-items: flex-start; max-width: 100%; } /* Výpis výkazů: dlouhé tagy se zkrátí na šířku buňky (ellipsis), na hover se plný název rozbalí jako overlay nad ostatními řádky (mimo tok → výška řádku se nemění). */ .te-tag-list--stacked .te-tag-chip--static { position: relative; max-width: 100%; } .te-tag-list--stacked .te-tag-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .te-tag-list--stacked .te-tag-chip--static[data-name]:hover { z-index: 20; } .te-tag-list--stacked .te-tag-chip--static[data-name]:hover::after { content: attr(data-name); position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 20; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--tag-color, #334155); color: #fff; font-size: 0.78rem; font-weight: 600; line-height: 1.45; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); pointer-events: none; } .te-tags__search { position: relative; } .te-tags__input { width: 100%; } .te-tags__dropdown { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 20; background: var(--clr-surface); border: 1px solid var(--clr-border, #d4d4d4); border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); max-height: 240px; overflow-y: auto; } .te-tags__dropdown[hidden] { display: none; } .te-tags__option { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; cursor: pointer; font-size: 0.88rem; } .te-tags__option::before { content: ''; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 3px; background: var(--tag-color, transparent); } .te-tags__option:hover, .te-tags__option.is-focused { background: var(--clr-surface-alt); } .te-tags__option.is-checked { background: var(--clr-indigo-alpha); color: var(--clr-indigo-dark); } .te-tags__option.is-checked.is-focused { background: color-mix(in srgb, var(--clr-indigo) 22%, var(--clr-surface)); } .te-tags__option-group { flex: 0 0 auto; white-space: nowrap; color: var(--clr-text-muted, #888); font-size: 0.78rem; } /* Dlouhý název návrhu nezalamovat — ořízneme ellipsis na konci. Rozlišující prefix (skupina › začátek názvu) zůstává vidět, plný název je v title. */ .te-tags__option-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .te-tags__empty { padding: 0.5rem 0.6rem; font-size: 0.85rem; color: var(--clr-text-muted, #888); } /* ── Report výkazů ───────────────────────────────────────────────── */ .report-filters { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; margin: 0.5rem 0 1.25rem; } .report-filters__label { display: block; font-size: 0.8rem; color: var(--clr-text-muted, #666); margin-bottom: 0.15rem; } .report-filters .report-filters__reset { align-self: flex-end; padding-bottom: 0.5rem; font-size: 0.82rem; color: var(--clr-text-muted); text-decoration: underline; } .report-filters .report-filters__reset:hover { color: var(--clr-indigo); } .report-timesheet { border-collapse: collapse; font-variant-numeric: tabular-nums; } .report-timesheet th, .report-timesheet td { padding: 0.35rem 0.9rem; border-bottom: 1px solid var(--clr-border); } .report-timesheet thead th { font-weight: 600; text-align: left; border-bottom: 1px solid var(--clr-divider); color: var(--clr-text-muted, #555); /* Hlavička zůstává viditelná pod horní lištou při scrollu dlouhé tabulky. (Globální table tr th sticky míří na top: -1px, kde ji zakryje navbar.) */ position: sticky; top: calc(var(--header-h) - 1px); z-index: 5; background: var(--clr-surface-alt); } /* Číselné sloupce vpravo i v hlavičce — přebíjí text-align: left výše. */ .report-timesheet thead th.report-timesheet__num { text-align: right; } .report-timesheet__num { text-align: right; white-space: nowrap; } .report-timesheet__group td { font-weight: 600; } .report-timesheet__detail td { color: var(--clr-text-2); font-weight: 400; } .report-timesheet__indent { padding-left: 1.8rem !important; } .report-timesheet__sub { color: var(--clr-text-muted); font-size: 0.85rem; font-weight: 400; } .report-timesheet__divider td { border-bottom: 1px solid var(--clr-text); padding: 0.15rem 0; } .report-timesheet__total td { font-weight: 700; border-top: 1px solid var(--clr-divider); } /* ── Dropdown menu (details/summary) ────────────────────────────── */ details.dropdown { position: relative; display: inline-block; } details.dropdown > summary { list-style: none; cursor: pointer; } details.dropdown > summary::-webkit-details-marker { display: none; } details.dropdown > summary::marker { content: ''; } details.dropdown[open] > summary { box-shadow: 0 0 0 3px var(--clr-indigo-alpha) !important; } .dropdown__menu { position: absolute; top: calc(100% + 0.35rem); right: 0; min-width: 180px; background: var(--clr-surface, #fff); border: 1px solid var(--clr-border, #e2e8f0); border-radius: var(--radius-sm, 8px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10); padding: 0.25rem; z-index: 50; display: flex; flex-direction: column; } .dropdown__item { display: block; width: 100%; padding: 0.45rem 0.8rem; border: 0; border-radius: 5px; background: transparent; color: var(--clr-text, #1e293b) !important; text-decoration: none !important; font-size: 0.9rem; font-family: inherit; text-align: left; white-space: nowrap; cursor: pointer; } .dropdown__form { margin: 0; } .dropdown__form .dropdown__item { appearance: none; } .dropdown__item:hover { background: var(--clr-indigo-alpha, #eef2ff); color: var(--clr-indigo, #4f46e5) !important; } .dropdown__item--danger { color: var(--clr-danger) !important; } .dropdown__item--danger:hover { background: rgba(220, 38, 38, 0.08); color: var(--clr-danger) !important; } /* Zamčená položka (např. akce jen pro admina) — zůstává vidět, ať je jasné, že funkce existuje, ale je neaktivní a bez hover reakce. */ .dropdown__item[disabled], .dropdown__item:disabled { color: var(--clr-text-muted) !important; cursor: default; } .dropdown__item[disabled]:hover, .dropdown__item:disabled:hover { background: transparent; color: var(--clr-text-muted) !important; } .actions-dropdown > summary { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface); color: var(--clr-text-2); font-weight: 700; line-height: 1; } .actions-dropdown > summary:hover { color: var(--clr-indigo); border-color: var(--clr-indigo); } /* ── Context menu (dropdown) ───────────────────────────────────── */ .context-menu { width: auto; min-width: 170px; padding: 0.3rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06); /* Nad drawerem (.entity-index-right má z-index 50) i packou (60) — menu kontaktů se otevírá z panelu a nesmí skončit pod ním. */ z-index: 70; font-size: 0.88rem; } .context-menu a { display: block; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); color: var(--clr-text); text-decoration: none; transition: background 0.1s; } .context-menu a:hover { background: var(--clr-indigo-alpha); color: var(--clr-indigo); } .context-menu a.context-menu-danger { color: var(--clr-danger); } .context-menu a.context-menu-danger:hover { background: rgba(220, 38, 38, 0.08); color: var(--clr-danger); } .context-menu hr { margin: 0.3rem 0 !important; border-top: 1px solid var(--clr-border) !important; } .flash-message { position: fixed; inset: unset; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 9999; margin: 0; border: none; border-radius: var(--radius-sm); padding: 0.6rem 0.6rem 0.6rem 1rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18); max-width: min(90vw, 600px); transition: opacity 0.18s ease, transform 0.18s ease; } .flash-message--leaving { opacity: 0; transform: translate(-50%, -8px); pointer-events: none; } .flash-alert { background: #fff3cd; border-left: 4px solid #ffc107; color: #856404; } .flash-notice { background: #d4edda; border-left: 4px solid #28a745; color: #155724; } .flash-close { background: transparent; border: none; border-radius: 4px; color: inherit; font-size: 1.4rem; font-weight: 400; line-height: 1; padding: 0.1rem 0.45rem; margin: 0; cursor: pointer; opacity: 0.65; box-shadow: none; transition: opacity 0.15s, background 0.15s; } .flash-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); box-shadow: none; } .form-errors { background: #fff3cd; border: 1px solid #ffc107; color: #856404; padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); } .form-errors ul { margin: 0.25rem 0 0 1rem; padding: 0; } /* ── Kartový seznam (entity-card) ──────────────────────────────────── Sdílený vzhled kartového výpisu (kandidáti, firmy, pozice, projekty): náhled vlevo, tělo vpravo, patička s poslední aktivitou. Karta zároveň nese .entity-index-row (klávesnice, náhled, bulk-select ze split_view_table.js) — stavové styly (:hover/.is-active) řídí ta třída. */ /* Výpis karet: mřížka řízená šířkou levého výpisu (container entity-list), ne viewportem. Sloupce nejsou stropované — na velkých monitorech a při úzkém detail panelu smí vyrůst na 3+ sloupců, místo aby karty zbytečně tloustly. Přepínač v toolbaru přepne na tabulkový výpis. */ .entity-card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-md); align-items: stretch; } /* Tabulkový výpis (druhý mód přepínače): karty se schovají, tabulka ukáže. */ .entity-index-table { display: none; } .entity-index-grid.is-table-view .entity-card-list { display: none; } .entity-index-grid.is-table-view .entity-index-table { display: table; } /* Light tabulka výpisů — bez šedého headeru, jemnější linky než globální styl tabulek. */ .entity-index-table tr th { position: static; background: none; color: var(--clr-text-muted); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); padding: 0.4rem 0.75rem; } .entity-index-table thead tr { border-bottom: 1px solid var(--clr-border); } /* Toolbar nad výpisem: vlevo „Označit vše" (+ bulk pruh u kandidátů), vpravo řazení a úplně napravo přepínač způsobu výpisu. */ .card-list-toolbar { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: var(--space-md); } .card-list-toolbar__left { display: flex; align-items: center; gap: 0.75rem; } /* Vpravo (řazení + přepínač) — margin-left:auto ho drží u pravé hrany i když levá část chybí (firmy/projekty/pozice bez bulk výběru). */ .card-list-toolbar__right { display: flex; align-items: center; gap: 1rem; margin-left: auto; } /* „Označit vše" — checkbox s popiskem místo osamoceného čtverečku. */ .bulk-select-all { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--clr-text-muted); cursor: pointer; } .bulk-select-all input { margin: 0; } /* Režim výběru (T-047): dokud uživatel neklikne „Vybrat", jsou zaškrtávátka (sloupec .col-check v kartě i v hlavičce tabulky) i „Označit vše" skryté — ať seznam není zaneřáděný checkboxy. Míří jen na výpisy, které split_view_table.js spravuje (přidá .has-bulk-mode); ostatní zůstávají beze změny. */ [data-bulk-scope].has-bulk-mode:not(.is-selecting) .col-check, [data-bulk-scope].has-bulk-mode:not(.is-selecting) .bulk-select-all { display: none; } .card-list-layout-toggle { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; padding: 0.2rem 0.3rem; font-size: 0.8rem; color: var(--clr-text-muted); cursor: pointer; } .card-list-layout-toggle:hover { color: var(--clr-text); } /* margin:0 přebije owl flow margin (`* + *`), který druhé ikoně (tabulka) dával margin-top 1rem → seděla níž než první (mřížka). display:block ruší baseline mezeru. Obě ikony teď sedí identicky. */ .card-list-layout-toggle img { display: block; margin: 0; opacity: 0.5; } /* Grid: avatar + identita nahoře vedle sebe, tagy celý řádek pod tím, poslední aktivita celý řádek úplně dole (pin ke spodní hraně přes 1fr mezeru → karty jsou stejně vysoké i bez kontaktu/tagů). Avatar je pevný obdélník. body má display:contents, takže main/tags/footer jsou přímé grid buňky. */ /* Karta = float layout: avatar plave vlevo, jméno/profese + kontakty obtékají nahoře, tagy tečou pod profesí vedle spodku avataru a přetečou pod něj. Poslední aktivita je clear:both pod vším. (Tabulkový view používá vlastní .entity-index-table, tady se neuplatní.) */ /* Kostra karty = grid: 1. řádek [avatar | identita+kontakt], 2. řádek [tagy přes celou šířku, flexuje 1fr], 3. řádek [poslední aktivita přes celou šířku]. Prostřední 1fr řádek (tagy nebo prázdný spacer) natlačí aktivitu vždy dolů → karty s tagy i bez nich drží stejnou kostru. */ .entity-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "preview main" "tags tags" "footer footer"; grid-template-rows: auto 1fr auto; column-gap: var(--space-base); row-gap: var(--space-sm); min-height: 9.5rem; padding: var(--space-base); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; --entity-card-shadow: 0.22rem 0.22rem 0 color-mix(in srgb, var(--entity-accent) 40%, transparent); box-shadow: var(--entity-card-shadow); transition: transform 0.12s ease-out; } /* Otevřený kebab (⋮) musí „vylézt" z karty — jinak ho overflow:hidden ořízne (stín, pravý okraj i spodní položky) a menu působí nalepené / rozbité. Po dobu otevření kartu odořízneme a zvedneme nad sousední karty. */ .entity-card:has(.actions-dropdown[open]) { overflow: visible; z-index: 10; } /* Zdvih karty — na hover a trvale u zobrazené (panel) / vybrané (bulk). Transform nemění layout, mřížka zůstává na místě. */ .entity-card:hover, .entity-card.is-active, .entity-card.is-selected, .entity-card:has(.col-check [data-bulk-item]:checked) { transform: translateY(-0.5rem); } /* Profilovka; checkbox je absolutně v jejím levém horním rohu (nezabírá místo). Pevná výška (4.5rem obdélník), align-self:start = neroztahuje se do výšky karty. */ .entity-card__preview { grid-area: preview; align-self: start; position: relative; width: 4.5rem; height: 4.5rem; display: flex; } .entity-card__preview .col-check { position: absolute; top: 0.35rem; left: 0.35rem; z-index: 2; width: auto; padding: 3px; line-height: 0; background: color-mix(in srgb, var(--clr-surface) 85%, transparent); border-radius: 4px; display: flex; align-items: center; justify-content: center; } .entity-card__preview .col-check input { margin: 0; display: block; } /* Profilovka = fotka / silueta dle pohlaví / iniciály (fallback). Vyplní kartu. */ .entity-card__avatar { position: relative; flex: 1; width: 100%; min-height: 4.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; background: color-mix(in srgb, var(--entity-accent) 14%, var(--clr-surface)); border-radius: var(--radius-sm); color: var(--entity-accent); font-weight: 500; font-size: var(--fs-xl); } /* Fotka překryje siluetu; při selhání načtení se odstraní a prosvitne silueta. */ .entity-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; /* zruší owl flow margin (je 2. potomek po siluetě), jinak by fotku srazil dolů */ object-fit: cover; } /* Logo firmy (favicon webu) — celé viditelné na bílé, žádný cover ořez. */ .entity-card__photo--logo { object-fit: contain; background: #fff; padding: 22%; box-sizing: border-box; } .entity-card__silhouette { width: 68%; height: 68%; object-fit: contain; opacity: 0.8; } /* CV indikace jako badge v pravém spodním rohu profilovky (nezabírá výšku). */ .entity-card__preview-note { position: absolute; right: 0.35rem; bottom: 0.35rem; z-index: 2; padding: 1px 6px; font-size: var(--fs-xs); color: var(--clr-indigo); background: color-mix(in srgb, var(--clr-surface) 85%, transparent); border-radius: 4px; } /* Tělo je jen obálka — display:contents rozpustí ho a jeho děti (main, footer) jsou přímo grid buňky karty (main vedle avataru, footer přes celý řádek dole). */ .entity-card__body { display: contents; } .entity-card__actions { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 3; } .entity-card__actions .actions-dropdown > summary { width: 1.8rem; height: 1.8rem; background: color-mix(in srgb, var(--clr-surface) 92%, transparent); } .entity-card:has(.entity-card__actions) .entity-card__main { padding-right: 2.25rem; } /* První řádek: jméno/profese vlevo, kontakty zarovnané k pravé hraně karty; tagy pod nimi přes celou šířku. Na úzkém se kontakty zabalí pod identitu. */ .entity-card__main { grid-area: main; min-width: 0; } .entity-card__identity { flex: 0 1 auto; min-width: 0; } .entity-card__title-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } .entity-card .candidates-index-name { font-size: var(--fs-md); } .entity-card__meta { font-size: var(--fs-base); color: var(--clr-text-2); margin-top: 0.25rem; } .entity-card__contact { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--fs-sm); color: var(--clr-text); } .entity-card__contact a { color: inherit; text-decoration: none; } .entity-card__contact a:hover { text-decoration: underline; } .entity-card__contact--inline { align-items: flex-start; margin-top: 0.35rem; color: var(--clr-text); } .entity-card__contact--sticker { position: absolute; top: 3.45rem; right: -1px; z-index: 1; width: min(18rem, 42%); min-width: 14rem; margin: 0; padding: 0.55rem var(--space-base) 0.6rem 0.8rem; border: 1px solid color-mix(in srgb, var(--clr-indigo) 58%, var(--clr-border)); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: linear-gradient(90deg, color-mix(in srgb, var(--clr-indigo) 40%, var(--clr-surface)) 0%, color-mix(in srgb, var(--clr-indigo) 26%, var(--clr-surface)) 100%); text-align: left; box-shadow: -1px 0 0 color-mix(in srgb, var(--clr-indigo) 20%, transparent); } .entity-card--candidate .entity-card__main { display: block; } .entity-card--company .entity-card__main { display: block; } .entity-card--company .entity-card__identity { min-width: 0; } .entity-card--company:has(.entity-card__contact--sticker) { min-height: 11rem; } .entity-card__contact-name { font-weight: 600; } .entity-card__contact-role { color: var(--clr-text-2); font-size: var(--fs-xs); } @container entity-list (max-width: 36rem) { .entity-card--company { min-height: 12.5rem; } .entity-card__contact--sticker { top: 5.35rem; width: calc(100% - 4.5rem - var(--space-base)); max-width: none; min-width: 0; } } /* Tagy = vlastní řádek pod avatarem i identitou/kontakty, nad poslední aktivitou (grid-area tags přes obě sloupce). align-self:start → chipy sedí nahoře, zbytek 1fr řádku je flexibilní výplň, co tlačí aktivitu dolů. */ .entity-card__tags { grid-area: tags; align-self: start; min-width: 0; } .entity-card__tags .te-tag-list { gap: 0.3rem; } /* Menší tagy v kartě (Dan) — kompaktnější než výchozí .te-tag-chip. */ .entity-card__tags .te-tag-chip { font-size: 0.7rem; padding: 0.03rem 0.45rem; } .entity-card__tags .te-tag-chip__name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Poslední aktivita = celý řádek dole přes obě sloupce (pod avatarem i identitou), oddělená linkou. min-height drží stejnou výšku i pro placeholder „Zatím žádná aktivita" jako pro reálnou aktivitu s chipem → karty mají identickou kostru. */ .entity-card__footer { grid-area: footer; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-height: 2.15rem; padding-top: var(--space-sm); border-top: 1px solid var(--clr-border); font-size: var(--fs-sm); color: var(--clr-text-2); } .entity-card__activity-note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--clr-text-muted); } /* Řadicí lišta nad kartovým seznamem (náhrada za klikací hlavičky tabulky). */ .card-list-sort { display: flex; align-items: center; gap: var(--space-md); margin: 0; font-size: var(--fs-sm); color: var(--clr-text-2); } .card-list-sort__label { color: var(--clr-text-muted); } .card-list-sort a { color: var(--clr-text); text-decoration: none; } .card-list-sort a:hover { text-decoration: underline; } /* Svislý předěl mezi listem a detailem — plná výška, tažením mění šířku pravé sekce. Uprostřed úchop (dva pruhy). */ /* Předěl mezi půlkami: jen tenká svislá přerušovaná čára (o chlup šedivější než pozadí stránky), sám sloupec je průhledný → prosvítá pozadí. */ .pane-resize-handle { position: relative; cursor: col-resize; background: transparent; } .pane-resize-handle::before { content: ''; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 50%; transform: translateX(-50%); border-left: 2px dashed var(--clr-divider, #cbd3de); } /* Madlo uprostřed = pilulka v barvě pozadí (přeruší čáru) s jednoduchým grip tvarem v barvě čáry. */ .pane-resize-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 38px; border-radius: 8px; background: var(--clr-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='26'%3E%3Cg fill='%23cbd3de'%3E%3Ccircle cx='5.5' cy='7' r='1.7'/%3E%3Ccircle cx='5.5' cy='13' r='1.7'/%3E%3Ccircle cx='5.5' cy='19' r='1.7'/%3E%3C/g%3E%3C/svg%3E") center / 11px 26px no-repeat; } .pane-resize-handle:hover::before { border-left-color: var(--clr-indigo); } .pane-resize-handle:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='26'%3E%3Cg fill='%236366f1'%3E%3Ccircle cx='5.5' cy='7' r='1.7'/%3E%3Ccircle cx='5.5' cy='13' r='1.7'/%3E%3Ccircle cx='5.5' cy='19' r='1.7'/%3E%3C/g%3E%3C/svg%3E"); } body.is-col-resizing { cursor: col-resize; user-select: none; } /* Během tažení vypni interakci s obsahem (výběr textu, drag obrázku, pohlcení myši iframem CV náhledu), ať je změna šířky plynulá i nad drawerem. */ body.is-col-resizing .entity-index-right, body.is-col-resizing .entity-index-left { pointer-events: none; } /* ── Kandidáti: split-view index ─────────────────────────────────── */ .candidates-index-toolbar { display: inline-flex; gap: 0.3rem; align-items: center; } /* Sjednocený filter row pod h1 — kompaktní horizontální flex-wrap, jen placeholdery (žádné labely). Používá ho shared/_index_filter partial. */ .index-filter { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0.5rem 0 1rem; } .index-filter input, .index-filter select { padding: 0.35rem 0.6rem; font-size: 0.85rem; } /* Datum od/do drží pohromadě jako jeden celek — na užších displejích spadnou na další řádek společně, nikdy se nerozdělí přes dva řádky. */ .index-filter__daterange { display: flex; gap: 0.3rem; } /* Tag picker rozložíme v rámci filtru: search input zůstane na hlavním řádku, vybrané chipy spadnou pod celý filtr na nový řádek (flex order + flex-basis 100% donutí wrap). */ .index-filter .te-tags { display: contents; } /* Tag picker v filtru: pevná šířka (nepřeskakuje při fokusu), ať se celý filtr vejde na jeden řádek. Dlouhé názvy skupin v dropdownu řeší middle-ellipsis. */ .index-filter .te-tags__search { position: relative; min-width: 12rem; } .index-filter .te-tags__selected { order: 99; flex-basis: 100%; margin-top: 0.2rem; } .index-filter .te-tags__selected:empty { display: none; } /* Stálý dvoupanel (po vzoru editace): full-bleed přes page-wrap, vlevo světlá sekce s listem + hlavičkou + filtry, uprostřed táhací svislý předěl, vpravo šedá sekce s detailem. Obě strany scrollují uvnitř; šířku pravé drží --drawer-width (mění předěl, ukládá localStorage). Obě strany se přizpůsobují přes container query (list = entity-list, detail = entity-drawer). */ .page-wrap:has(.entity-index-grid) { padding: 0; background: transparent; min-height: 0; } /* Žádný obalový box — obě půlky „plavou" přímo na šedém pozadí stránky (main = --clr-bg). Levá je jeden bílý box, pravá je víc boxů. Mezi nimi prosvítá pozadí a leží tam předěl (viz .pane-resize-handle). */ .entity-index-grid { /* Levý list má minimum (pohodlná karta bez sesypání vnitřku + místo na filtry). Panel ho tažením zužuje jen po tuhle hranici (karty přitom padají 3→2→1 sloupec); za ní přepne na overlay a plave přes list, místo aby ho drtil (viz .is-drawer-overlay + JS). Pozn.: --list-min + packa + panel-min (22rem) se musí vejít nad bodem zalomení do stacku (820px), jinak grid přeteče. */ --list-min: 27rem; position: relative; display: grid; grid-template-columns: minmax(var(--list-min), 1fr) 22px minmax(22rem, var(--drawer-width, 40%)); height: calc(100vh - var(--header-h) - 2rem); } /* Overlay režim: list zůstane na svém minimu, panel přes něj plave zprava a packa drží na jeho levé hraně. Přepíná split_view_table.js, jakmile by panel jinak stlačil list pod minimum. */ .entity-index-grid.is-drawer-overlay { grid-template-columns: var(--list-min) 0 0; } .entity-index-grid.is-drawer-overlay .entity-index-right { position: absolute; top: 0; right: 0; height: 100%; width: var(--drawer-width); padding-left: 1rem; background: var(--clr-bg); box-shadow: var(--shadow-drawer); z-index: 40; } .entity-index-grid.is-drawer-overlay .pane-resize-handle { position: absolute; top: 0; bottom: 0; right: var(--drawer-width); width: 22px; z-index: 41; } /* Levá světlá sekce = list; scrolluje uvnitř. Je container — počet sloupců karet se řídí JEHO šířkou (viz @container u .entity-card-list). Tažením předělu se zúží → mřížka spadne na míň sloupců. */ .entity-index-left { min-width: 0; overflow-y: auto; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); padding: 1.5rem 1.75rem; container: entity-list / inline-size; } /* Vizitka: jméno jako primární odkaz (→ detail), pod ním pozice a kontakt (e-mail/telefon). Nikdy se nezalamuje ani nezkracuje. */ .col-vizitka { white-space: nowrap; } .candidates-index-name { font-weight: 500; text-decoration: none; } .candidates-index-name:hover { text-decoration: underline; } .candidates-index-vizitka-role { font-size: 0.85rem; color: var(--clr-text-2); } .candidates-index-table { width: 100%; } .entity-index-row { cursor: pointer; outline: none; } .entity-index-row:hover { background: rgba(0, 0, 0, 0.02); } /* :focus-visible, ne :focus — po kliku myší zůstává řádek/karta fokusovaná a plné :focus by drželo indigo pozadí i po odznačení (#160). */ .entity-index-row:focus-visible { background: var(--clr-indigo-alpha, rgba(99, 102, 241, 0.08)); box-shadow: var(--shadow-active-row); } /* Aktivní (zobrazený) tabulkový řádek. Vnější záře (box-shadow na ) se v tabulce ořezává buňkami — a přes zebru prosvítá jen u lichých řádků, což mate. Proto v tabulce žádný glow: čisté indigo pozadí na buňkách (přebije zebru) + levý accent proužek na první buňce. Záři má jen karta (blok, neořezává se). */ .entity-index-row.is-active > td { background: var(--clr-indigo-alpha, rgba(99, 102, 241, 0.08)); } .entity-index-row.is-active > td:first-child { box-shadow: var(--shadow-active-row); } /* ── Stavy karty a řádku (zobrazené / vybrané) ───────────────────── Dvě zvýraznění: • „zobrazené" (.is-active) = položka otevřená v panelu → ZÁŘE (glow) kolem boxu + tón pozadí V BARVĚ ENTITY (--entity-accent; kandidát modrá, firma zelená, zakázka oranžová, pozice fialová). • „vybrané" (.is-selected / zaškrtnutý bulk checkbox) = SYTĚ indigo výplň + bílý text, ať je na první pohled jasné, co mám vybrané. Stavy se sčítají; „vybrané" (solid) přebíjí barvu, „zobrazené" přidá záři okolo. Platí pro kartu (.entity-card) i tabulkový řádek (.entity-index-row — bez data atributů padá accent na indigo). */ /* Accent proužek „zobrazené" karty drží barvu dle typu entity (orientace v gridu). */ .entity-card[data-candidate-id] { --entity-accent: #2563eb; } .entity-card[data-company-id] { --entity-accent: #10b981; } .entity-card[data-project-id] { --entity-accent: #f59e0b; } .entity-card[data-position-id] { --entity-accent: #8b5cf6; } .entity-card[data-user-id] { --entity-accent: #0ea5e9; } .entity-card[data-task-id] { --entity-accent: var(--task-priority-accent, #64748b); } .entity-card { --entity-accent: var(--clr-indigo); } /* Tokeny záře (glow) — silný rozptyl i opacita, aby otevřená položka „zářila". Záře táhne na barvu entity (--sel-accent); syté „vybrané" zůstává indigo (--sel-indigo). */ .entity-card, .entity-index-row { --sel-indigo: var(--clr-indigo, #6366f1); --sel-accent: var(--entity-accent, var(--clr-indigo, #6366f1)); --glow-accent: 0 0 0 3px color-mix(in srgb, var(--sel-accent) 35%, transparent), 0 6px 22px color-mix(in srgb, var(--sel-accent) 45%, transparent); } /* „ZOBRAZENÉ" = otevřené v panelu (JEN JEDNO). Záře kolem celého boxu v barvě entity (bez barevného proužku — ten se tloukl se zářemi). Přebíjí .is-active řádku. */ .entity-card.is-active { background: color-mix(in srgb, var(--sel-accent) 7%, var(--clr-surface)); border-color: var(--clr-border); box-shadow: var(--entity-card-shadow), var(--glow-accent); } .entity-card.is-active .entity-card__avatar { background: color-mix(in srgb, var(--entity-accent) 16%, var(--clr-surface)); color: var(--entity-accent); } /* „VYBRANÉ" (bulk) — sytě indigo výplň + bílý text. Chytá se BUĎ přes explicitní .is-selected (styleguide / budoucí JS), NEBO reálně přes zaškrtnutý checkbox uvnitř řádku ([data-bulk-item]:checked) — JS jen přepíná .checked, ne třídu. */ .entity-card.is-selected, .entity-card:has(.col-check [data-bulk-item]:checked), .entity-index-row.is-selected, .entity-index-row:has(> .col-check [data-bulk-item]:checked) { background: var(--sel-indigo); border-color: var(--clr-border); color: #fff; } /* Text a odkazy uvnitř vybrané položky na bílo (na indigo výplni). Sekundární údaje jemně poloprůhledné, ať zůstane hierarchie. */ .entity-card.is-selected, .entity-card.is-selected a, .entity-card.is-selected .row-primary-link, .entity-card.is-selected .candidates-index-name, .entity-card:has(.col-check [data-bulk-item]:checked), .entity-card:has(.col-check [data-bulk-item]:checked) a, .entity-card:has(.col-check [data-bulk-item]:checked) .row-primary-link, .entity-card:has(.col-check [data-bulk-item]:checked) .candidates-index-name, .entity-index-row.is-selected, .entity-index-row.is-selected a, .entity-index-row.is-selected .row-primary-link, .entity-index-row.is-selected .candidates-index-name, .entity-index-row:has(> .col-check [data-bulk-item]:checked), .entity-index-row:has(> .col-check [data-bulk-item]:checked) a, .entity-index-row:has(> .col-check [data-bulk-item]:checked) .row-primary-link, .entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-name { color: #fff; } .entity-card.is-selected .entity-card__meta, .entity-card.is-selected .entity-card__contact, .entity-card.is-selected .entity-card__contact-role, .entity-card.is-selected .entity-card__footer, .entity-card.is-selected .entity-card__activity-note, .entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__meta, .entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__contact, .entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__contact-role, .entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__footer, .entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__activity-note, .entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-vizitka-role, .entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-contact-sub, .entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-activity, .entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-activity-note { color: rgba(255, 255, 255, 0.82); } /* VYBRANÉ v tabulce: indigo výplň musí sednout na buňky (), jinak ji přebije zebra (tr:nth-child(even) td) → světlé pozadí + bílý text = nečitelné na sudých. */ .entity-index-row.is-selected > td, .entity-index-row:has(> .col-check [data-bulk-item]:checked) > td { background: var(--sel-indigo); border-color: color-mix(in srgb, var(--sel-indigo) 78%, #000); } /* Zelený „● v řízení" příznak na indigo výplni zaniká — na bílo, když je vybráno. */ .entity-card.is-selected .cand-index-rizeni, .entity-card:has(.col-check [data-bulk-item]:checked) .cand-index-rizeni, .entity-index-row.is-selected .cand-index-rizeni, .entity-index-row:has(> .col-check [data-bulk-item]:checked) .cand-index-rizeni { color: #fff; } /* Oddělovací linka patičky i avatar/foto ať na sytém pozadí neruší. */ .entity-card.is-selected .entity-card__footer, .entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__footer { border-top-color: rgba(255, 255, 255, 0.28); } .entity-card.is-selected .entity-card__avatar, .entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__avatar { background: rgba(255, 255, 255, 0.16); color: #fff; } .entity-card.is-selected .entity-card__contact--sticker, .entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__contact--sticker { right: -1px; background: #fff; color: var(--clr-indigo); border-color: #fff; box-shadow: none; } /* „ZOBRAZENÉ + VYBRANÉ" současně = sytá indigo výplň (z pravidla výše) plus záře v barvě entity okolo (že je zároveň otevřené v panelu). Nejvýraznější stav. */ .entity-card.is-active.is-selected, .entity-card.is-active:has(.col-check [data-bulk-item]:checked) { box-shadow: var(--entity-card-shadow), var(--glow-accent); } .entity-index-row.is-active.is-selected, .entity-index-row.is-active:has(> .col-check [data-bulk-item]:checked) { box-shadow: var(--glow-accent); } /* Referenční čip — nejmenší forma karty (avatar + jméno) pro vazby v panelech/dialozích. Typ entity nese barva rámu/avataru + title. */ .entity-chip { --entity-accent: var(--clr-indigo); display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0.2rem 0.7rem 0.2rem 0.25rem; background: var(--clr-surface); border: 1px solid color-mix(in srgb, var(--entity-accent) 45%, var(--clr-border)); border-radius: 999px; font-size: var(--fs-sm); } .entity-chip[data-company] { --entity-accent: #10b981; } .entity-chip[data-project] { --entity-accent: #f59e0b; } .entity-chip[data-position] { --entity-accent: #8b5cf6; } .entity-chip__avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--entity-accent) 16%, var(--clr-surface)); color: var(--entity-accent); font-size: var(--fs-xs); font-weight: 600; } .entity-chip__name { font-weight: 500; } /* Kompaktní náhled vazby úkolu (T-026) — u kandidáta telefon/e-mail/CV, u firmy kontakt a poslední komunikaci rovnou v úkolu, aby se nemuselo proklikávat na kartu. Skládá se z existujících komponent (entity-chip, activity-feed-table, tag); žádný barevný proužek/border (INV-11). */ .task-taskable { display: flex; flex-direction: column; gap: var(--space-sm); } .task-taskable + .task-taskable { margin-top: var(--space-md); } .task-taskable__facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; padding-left: 0.25rem; } .task-taskable__fact { display: inline-flex; align-items: baseline; gap: 0.35rem; font-size: 0.9rem; } .task-taskable__fact .edit-label { margin: 0; } .task-taskable__history { padding-left: 0.25rem; } .task-taskable__history .edit-label { display: block; margin: 0 0 0.2rem; } .row-primary-link { font-weight: 500; text-decoration: none; } .row-primary-link:hover { text-decoration: underline; } /* V kartě je interaktivní jednotka celá karta (hover = zvýraznění řádku) — název se proto při najetí NEpodtrhává jako odkaz. */ .entity-card .row-primary-link:hover, .entity-card .candidates-index-name:hover { text-decoration: none; } .col-check { width: 1.5rem; text-align: center; padding-right: 0; } .col-actions { white-space: nowrap; text-align: right; } /* Akční odkazy v seznamu kandidátů pod sebou, na střed, s click prostorem. */ .candidates-index-table td.col-actions { vertical-align: middle; text-align: center; } .candidates-index-table td.col-actions a { display: block; padding: 0.3rem 0.4rem; } /* Tagy v seznamu se vejdou tak na dva řádky — pak se zalomí. Užší než vizitka. */ .candidates-index-table .col-tags .te-tag-list { max-width: 13rem; } /* Dlouhý název tagu ořízneme ellipsis — ať chip nepřeteče přes sloupec Vizitka ani řádek filtru. (Náhrada za JS; čistě CSS, ellipsis na konci.) */ .candidates-index-table .te-tag-chip__name, .page-header__chips .te-tag-chip__name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-preview-btn { background: transparent; border: none; color: var(--clr-indigo, #2980b9); padding: 0; font-size: 0.8rem; cursor: pointer; text-decoration: none; margin-right: 0.6rem; } .row-preview-btn:hover { text-decoration: underline; } .entity-index-row.is-active .row-preview-btn { font-weight: 600; } /* Search input v toolbaru (s inline clear ×). General — používá se v candidates/index, positions/index. */ .search-input-wrap { position: relative; display: inline-block; } .search-input-wrap input { margin-top: 0; padding: 0.25rem 0.5rem; border: 1px solid var(--clr-border-strong, #ccc); border-radius: 3px; font-size: 0.85rem; width: 14rem; } .search-input-wrap.has-query input { padding-right: 1.6rem; } .search-input-clear { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); color: var(--clr-text-muted); text-decoration: none; font-size: 1rem; line-height: 1; } /* Drobný select v toolbar baru (status filtr v positions). */ .toolbar-select { margin-top: 0; padding: 0.25rem 0.4rem; font-size: 0.85rem; width: auto; } /* Drobný filtr toolbar v h1 (search + select + clear). */ .filter-toolbar { display: flex; align-items: center; gap: 0.4rem; } /* ── Quick dialog pro založení / úpravu firmy ─────────────────── */ .company-quick-form__field { margin-bottom: 1rem; } .company-quick-form__field label { display: block; margin-bottom: 0.35rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clr-text-2); } .company-quick-form__field input[type="text"] { width: 100%; } .company-quick-form__duplicates { margin-top: 1rem; } .company-quick-form__actions { margin-top: 1.25rem; } /* ARES name autocomplete uvnitř modalu — držet se uvnitř formu, ne výchozích 400px. */ .company-quick-form__name { position: relative; } .company-quick-form__types { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .company-quick-form__types-label { font-weight: 600; font-size: 0.85rem; color: #555; } .company-quick-form__check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; cursor: pointer; } .company-quick-form__check input[type="checkbox"] { margin: 0; } /* Segmentovaný filtr typu firmy na indexu */ .company-type-filter .button.link.is-active { font-weight: 700; text-decoration: underline; } .company-quick-form__ares-dropdown { min-width: 0; width: 100%; left: 0; right: 0; top: calc(100% + 0.15rem); } /* ── Poslední zaměstnavatel: autocomplete picker s tlačítkem pro novou firmu ── */ .last-employer-picker { position: relative; } .last-employer-picker__row { display: flex; align-items: stretch; gap: 0.4rem; } .last-employer-picker__input { flex: 1; } .last-employer-picker.is-unconfirmed .last-employer-picker__input { border-color: var(--clr-amber, #d97706); background: var(--clr-amber-alpha, rgba(217, 119, 6, 0.06)); } .last-employer-picker__hint { margin: 0.3rem 0 0; font-size: 0.85em; color: var(--clr-amber, #d97706); } .last-employer-picker__new-btn { flex: 0 0 auto; padding: 0 0.9rem; font-weight: 600; } .last-employer-picker__dropdown { position: absolute; top: 100%; left: 0; right: 3.2rem; margin: 0.2rem 0 0; padding: 0; list-style: none; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 3px; max-height: 240px; overflow-y: auto; z-index: 100; box-shadow: var(--shadow-dropdown); } .last-employer-picker__item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--clr-border); } .last-employer-picker__item:last-child { border-bottom: none; } .last-employer-picker__item:hover { background: var(--clr-indigo-alpha); } .last-employer-picker__item--create { color: var(--clr-indigo); font-weight: 500; } /* ── ARES autocomplete dropdown (companies/_form) ───────────────── */ .ares-dropdown { display: none; position: absolute; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 3px; list-style: none; margin: 0; padding: 0; z-index: 100; min-width: 400px; max-height: 280px; overflow-y: auto; box-shadow: var(--shadow-dropdown); } .ares-dropdown.is-open { display: block; } .ares-dropdown-empty { padding: 8px 12px; color: var(--clr-text-muted); } .ares-dropdown-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--clr-border); } .ares-dropdown-item:last-child { border-bottom: none; } .ares-dropdown-item:hover { background: var(--clr-indigo-alpha); } .ares-dropdown-sub { color: var(--clr-text-2); } /* IČO input + ARES tlačítko v rohu. */ .ares-ico-wrap { position: relative; } .ares-ico-wrap input { padding-right: 4.5rem; } .ares-ico-btn { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); padding: 0.15rem 0.45rem; font-size: 0.72rem; line-height: 1.4; background: var(--color-indigo-100, #f0f4ff); border: 1px solid var(--color-indigo-200, #c5cfe8); border-radius: 3px; color: var(--clr-indigo-dark); cursor: pointer; white-space: nowrap; } /* Globální button:hover/:active nastavuje transform: none, což by zrušilo vertikální vycentrování (translateY(-50%)). Proto ho na hover/active držíme. */ .ares-ico-btn:hover, .ares-ico-btn:active { transform: translateY(-50%); } /* 2-col grid pro IČO + DIČ. */ .form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } /* Drobný řádek nad tabulkou: počet nalezených pro hledaný výraz. */ .candidates-index-found { font-size: 0.85rem; color: var(--clr-text-muted); margin-bottom: 0.75rem; } /* Generic per-column styly pro index tabulky (created/closed/activity). */ .col-created, .col-closed { color: var(--clr-text-muted); font-size: 0.85rem; white-space: nowrap; } .col-activity { font-size: 0.85rem; } .col-activity.is-stale, .entity-card__footer .is-stale { color: var(--clr-danger); } .candidates-index-contact-sub { color: var(--clr-text-2); font-size: 0.85rem; } /* Sloupec "Poslední aktivita" — tag typu + datum + autor + krátká poznámka */ .candidates-index-activity { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .candidates-index-activity .tag { font-size: 0.65rem; } .candidates-index-activity-date { color: var(--clr-text-muted); white-space: nowrap; } .candidates-index-activity-author { color: var(--clr-text-muted); white-space: nowrap; } .candidates-index-activity-note { color: var(--clr-text-2); margin-top: 0.2rem; max-width: 30rem; overflow: hidden; /* delší popis — až dva řádky, pak ellipsis */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .candidates-index-activity-empty { color: var(--clr-text-muted); } /* Bulk pruh je inline hned za „Označit vše" — objeví se, až je něco vybráno (data-bulk-toolbar hidden). Pilulka, ať je odlišený od zbytku toolbaru. */ .bulk-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.6rem; background: var(--clr-indigo-alpha, rgba(99, 102, 241, 0.08)); border-radius: 999px; font-size: 0.75rem; line-height: 1.4; } .bulk-toolbar [data-bulk-count] { color: var(--clr-text-muted); } .bulk-toolbar .button.sm { padding: 0.1rem 0.45rem; font-size: 0.75rem; } /* Pravá šedá sekce = detail (show). Grid sloupec, scrolluje uvnitř; obsah je bílá karta (.entity-preview). Container pro adaptaci detailu (entity-drawer). */ /* Pravá půlka je průhledná — žádné druhé šedé pozadí pod boxy. Boxy leží přímo na šedém pozadí stránky, oddělené mezerou. */ .entity-index-right { min-width: 0; overflow-y: auto; background: transparent; padding: 0; container: entity-drawer / inline-size; } .entity-index-empty, .entity-index-loading { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; color: var(--clr-text-muted); } /* Report otevřený v pravém panelu (Forecast / Funnel / Výkazy). Bílý box jako ostatní pravé boxy; kompaktní hlavička; široká tabulka scrolluje vodorovně, když je panel užší. */ .report-panel { overflow-x: auto; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 1.15rem 1.35rem; } .report-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); } .report-panel__head h2 { margin: 0; font-size: var(--fs-lg); } /* Detail už není jedna karta — je to sloupec boxů. Kontejner sám je průhledný, boxy (hlavička-karta + tělo) si nesou vlastní pozadí a mezeru. */ .entity-preview { display: flex; flex-direction: column; gap: 0.85rem; } /* První box = karta vybrané věci (1:1 jako řádek v listu, jen výrazněji zvýrazněná): jemný indigo tint + silný indigo proužek vlevo. Uvnitř grid: velký titul + akce v prvním řádku, meta přes celou šířku ve druhém (headtext je display:contents → h2 a meta jdou přímo do gridu). */ .entity-preview-header { background: color-mix(in srgb, var(--clr-indigo) 13%, var(--clr-surface)); border: 1px solid color-mix(in srgb, var(--clr-indigo) 28%, transparent); border-radius: var(--radius-md); padding: 1rem 1.25rem; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; } /* Tělo = průhledný kontejner sekcí-boxů. Grid má jeden sloupec (u firmy/pozice + postranní na širokém draweru, viz @container). Sloupce stackují jednotlivé sekce-boxy s mezerou mezi nimi. */ .entity-preview-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; } .entity-preview-main, .entity-preview-side { min-width: 0; display: flex; flex-direction: column; gap: 0.85rem; } /* Každá sekce v těle = samostatný bílý box na šedém pozadí. Staré linkové oddělovače (margin-top/border-top uvnitř jednoho těla) se ruší — mezeru teď dělá gap mezi boxy. */ .entity-preview-main > .entity-section, .entity-preview-main > .entity-preview-section, .entity-preview-main > .invoice-attributions, .entity-preview-side > .entity-section, .entity-preview-side > .entity-preview-section { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 1.15rem 1.35rem; margin: 0; border-top: none; } /* Primární sekce = hlavní obsah panelu (VŘ u náboru/kandidáta, Zakázky u firmy, Nábor u zakázky) — hlavní věc na stránce. Křiklavé indigo jako primary button: celý box plné indigo, bílý text; vnitřní obsah (pozice, karty zakázek, seznamy) = surface boxy v boxu, flow/funnel leží přímo na indigu. Max 1 na panel. */ .entity-preview-main > .entity-section--primary, .entity-preview-main > .entity-preview-section--primary { background: var(--clr-indigo); border-color: var(--clr-indigo); color: #fff; } .entity-preview-main > .entity-section--primary .muted, .entity-preview-main > .entity-section--primary .muted-empty, .entity-preview-main > .entity-section--primary .muted-count, .entity-preview-main > .entity-section--primary .funnel__conv, .entity-preview-main > .entity-section--primary .funnel__conv-pct, .entity-preview-main > .entity-section--primary .funnel__empty, .entity-preview-main > .entity-preview-section--primary .muted, .entity-preview-main > .entity-preview-section--primary .muted-empty, .entity-preview-main > .entity-preview-section--primary .muted-count, .entity-preview-main > .entity-preview-section--primary .funnel__conv, .entity-preview-main > .entity-preview-section--primary .funnel__conv-pct, .entity-preview-main > .entity-preview-section--primary .funnel__empty { color: color-mix(in srgb, #fff 78%, transparent); } /* Odkazy přímo na indigu (historické zakázky, titulky v seznamech). */ .entity-preview-main > .entity-section--primary .entity-info-link, .entity-preview-main > .entity-preview-section--primary .entity-info-link { color: #fff; } /* Boxy v boxu: vnitřní karty, které jinde stojí jen na borderu, dostanou na indigu plný surface povrch (světlý režim bílá, tmavý tmavá). */ .entity-preview-main > .entity-section--primary .proj-pos-item, .entity-preview-main > .entity-section--primary .proj-card, .entity-preview-main > .entity-section--primary .section-list, .entity-preview-main > .entity-section--primary .flow-picker, .entity-preview-main > .entity-section--primary .kop-required, .entity-preview-main > .entity-preview-section--primary .proj-pos-item, .entity-preview-main > .entity-preview-section--primary .proj-card, .entity-preview-main > .entity-preview-section--primary .section-list, .entity-preview-main > .entity-preview-section--primary .flow-picker, .entity-preview-main > .entity-preview-section--primary .kop-required { background: var(--clr-surface); border-color: transparent; border-radius: var(--radius-sm); color: var(--clr-text); } /* Seznam (VŘ kandidáta, uzavřená řízení) jako box potřebuje vlastní padding a tlumené texty vrátit do normálu — uvnitř už je surface, ne indigo. */ .entity-preview-main > .entity-section--primary .section-list, .entity-preview-main > .entity-preview-section--primary .section-list { padding: 0.25rem 0.85rem; } .entity-preview-main > .entity-section--primary .section-list .muted, .entity-preview-main > .entity-section--primary .proj-pos-item .muted, .entity-preview-main > .entity-section--primary .proj-card .muted, .entity-preview-main > .entity-preview-section--primary .section-list .muted, .entity-preview-main > .entity-preview-section--primary .proj-pos-item .muted, .entity-preview-main > .entity-preview-section--primary .proj-card .muted { color: var(--clr-text-muted); } .entity-preview-main > .entity-section--primary .section-list .entity-info-link, .entity-preview-main > .entity-preview-section--primary .section-list .entity-info-link { color: var(--clr-link); } /* Sbalovací summary (Uzavřená řízení) sedí přímo na indigu. */ .entity-preview-main > .entity-section--primary .section-collapse > summary, .entity-preview-main > .entity-preview-section--primary .section-collapse > summary { color: color-mix(in srgb, #fff 85%, transparent); } /* Tlačítka v hlavičce (i těle) na indigu invertují na bílou (primary by splynul, ghost by nebyl vidět) — jako ghosty v hlavičce-kartě panelu. */ .entity-preview-main > .entity-section--primary > .entity-section-heading .button, .entity-preview-main > .entity-preview-section--primary > .entity-preview-section-head .button { background: #fff; border-color: #fff; color: var(--clr-indigo-dark); } .entity-preview-main > .entity-section--primary > .entity-section-heading .button:hover, .entity-preview-main > .entity-preview-section--primary > .entity-preview-section-head .button:hover { background: #eef2ff; border-color: #eef2ff; color: var(--clr-indigo-dark); } /* Nebezpečná akce (Smazat) jako samostatný box dole. */ .entity-preview-danger { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 0.9rem 1.35rem; } /* Uvnitř boxu „Informace" (kandidát) oddělit podbloky Tagy/Jazyky/Popis od gridu kontaktů i mezi sebou. */ .entity-section > .candidate-info-section { margin-top: 1.1rem; } @container entity-drawer (min-width: 34rem) { .entity-preview-header { padding: 1.1rem 1.5rem 1.1rem calc(1.5rem + 4px); } } @container entity-drawer (min-width: 50rem) { /* Dva sloupce jen když panel má postranní sloupec (firma). Kandidát ho nemá → zůstává jednosloupcový i na širokém draweru. */ .entity-preview-body:has(.entity-preview-side) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.75rem; } /* Postranní sloupec (soubory/kontakty) se drží na místě, zatímco hlavní sloupec scrolluje. */ .entity-preview-side { position: sticky; top: 0; align-self: start; } } /* Úzký drawer (tažený packou skoro na minimum — panel má min 22rem, viz .entity-index-grid): hlavička je grid 1fr auto a akce (primary „Zařadit na pozici" + Upravit + kebab) mají flex-shrink:0, takže se nesmrští a při ~22–30rem přetečou vedle titulu. Pod 30rem šířky draweru → hlavička na jeden sloupec: titul, pod ním zalomené akce, pak meta. Řídí se šířkou DRAWERU (container), ne viewportu — reaguje na tažení packou. (T-054) */ @container entity-drawer (max-width: 30rem) { .entity-preview-header { grid-template-columns: minmax(0, 1fr); } .entity-preview-actions { grid-column: 1; grid-row: 2; flex-wrap: wrap; margin-top: 0.6rem; } .entity-preview-meta { grid-row: 3; } } .entity-preview-headtext { display: contents; } .entity-preview-header h2 { grid-column: 1; grid-row: 1; margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 1.5rem; font-weight: 600; line-height: 1.2; } /* Akce vpravo: volitelná hlavní/sekundární workflow akce + kebab. Běžné editace a všechny delete akce patří do dropdownu. */ .entity-preview-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Ghost tlačítka (Upravit, Tisk do PDF, Aktivita…) v barevné hlavičce-kartě potřebují neprůhledné bílé pozadí a tmavší text — default transparent ghost by na indigo tintu splynul a text by nebyl vidět. Primary necháváme. */ .entity-preview-actions .button:not(.primary):not(.danger) { background: var(--clr-surface); border-color: color-mix(in srgb, var(--clr-indigo) 30%, var(--clr-border)); color: var(--clr-text); } .entity-preview-actions .button:not(.primary):not(.danger):hover { background: var(--clr-surface-alt); border-color: var(--clr-indigo); } .entity-preview-meta { grid-column: 1 / -1; grid-row: 2; font-size: 0.85rem; color: var(--clr-text-muted); margin-top: 0.35rem; } /* Meta složená ze spanů (firma: obor · web · HRP) — oddělovač mezi kousky. Kandidát skládá meta jako text, spanů se pravidlo nedotkne. */ .entity-preview-meta > span + span::before { content: '·'; margin: 0 0.35rem; } /* Primární kontakt firmy v hlavičce panelu (T-188) — vlastní řádek pod meta, ne další span, aby ho `·` oddělovač nespojil s odvětvím a webem. */ .entity-preview-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin-top: 0.2rem; } .entity-preview-section { margin-top: 0.85rem; padding-top: 0.6rem; border-top: 1px solid var(--clr-border); } .entity-preview-section h3 { margin: 0 0 0.5rem 0; font-size: 0.95rem; font-weight: 600; } /* Nadpisy sekcí v panelu jednotné — malé a tučné. „Úkoly" (entity-section-heading, jinde 1rem/bold) srovnáme na týž vzhled jako ostatní sekce (O pozici, VŘ, …). */ .entity-preview .entity-section-heading { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; } .entity-preview-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .entity-preview-section-head h3 { margin: 0; } .position-process { border-left: 4px solid var(--clr-indigo); } .position-process--blocked { border-left-color: #d97706; } .position-process--healthy { border-left-color: #10b981; } .position-process__head { gap: 0.75rem; align-items: flex-start; } .position-process__head form { margin: 0; } .position-process__subtitle { margin: 0.2rem 0 0; color: var(--clr-text-muted); font-size: var(--fs-sm); } .position-process__next { display: grid; gap: 0.2rem; padding: 0.75rem 0.85rem; border: 1px solid color-mix(in srgb, var(--clr-indigo) 18%, var(--clr-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--clr-indigo) 6%, var(--clr-surface)); } .position-process__label { color: var(--clr-text-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; } .position-process__next strong, .position-process__blockers strong { color: var(--clr-text); } .position-process__next span:last-child, .position-process__blockers span, .position-process__ok { color: var(--clr-text-2); font-size: var(--fs-sm); line-height: 1.45; } .position-process__blockers { display: grid; gap: 0.55rem; margin: 0.75rem 0 0; padding: 0; list-style: none; } .position-process__blockers li { display: grid; gap: 0.15rem; padding-left: 0.85rem; border-left: 2px solid color-mix(in srgb, #d97706 40%, var(--clr-border)); } .position-process__ok { margin: 0.75rem 0 0; } /* Popis: rich text, defaultně sbalený s fadeout maskou; odkaz na konci rozbalí. */ .candidate-desc { font-size: 0.9rem; color: var(--clr-text-2); line-height: 1.5; } .candidate-desc.is-collapsed { max-height: 4.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); } .candidate-desc-toggle { display: inline-block; margin-top: 0.35rem; font-size: 0.85rem; } /* CV/soubor vykreslený přímo v náhledu (index). Plátno uvnitř spoléhá na flex:1 + výšku rodiče — v úzkém panelu mu ji proto dáme napevno. */ .candidate-preview-name-link { color: inherit; text-decoration: none; } .candidate-preview-name-link:hover { color: var(--clr-indigo); text-decoration: underline; } .muted-count { color: var(--clr-text-muted); font-weight: normal; font-size: 0.85rem; } .muted { color: var(--clr-text-muted); font-size: 0.85rem; } /* Na mobilu dvoupanel nedává smysl — stack pod sebe (list, pak detail), bez předělu, normální scroll stránky. */ @media (max-width: 820px) { .page-wrap:has(.entity-index-grid) { padding: 1rem; } /* Pod tímhle bodem se split rozpadne na stack — list-min + panel-min by se jinak nevešly a grid by přetekl. Overlay se sem nedostane (JS: mobile). */ .entity-index-grid { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; } .pane-resize-handle { display: none; } /* Levý box zůstává bílým boxem i na mobilu, jen scrolluje s celou stránkou. */ .entity-index-left { height: auto; overflow: visible; padding: 1rem; } .entity-index-right { background: transparent; padding: 1rem 0 0; overflow: visible; height: auto; } } /* ── Úkoly: chip vazby, soubory, dashboard seznam ──────────────────── */ .tasks-index-attachments { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; } .tasks-index-attachment { display: inline-flex; align-items: center; padding: 0.05rem 0.4rem; background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: 3px; font-size: 0.75rem; color: var(--clr-text); text-decoration: none; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tasks-index-attachment::before { content: "📎"; margin-right: 0.25rem; font-size: 0.7rem; } .tasks-index-attachment:hover { background: var(--clr-border); } .tasks-index-table { width: 100%; margin-top: 1rem; /* Fixní layout: sloupec „Úkol" dostane zbylou šířku a dlouhý text se zalomí dovnitř buňky místo roztažení tabulky přes okraj stránky. */ table-layout: fixed; } .tasks-index-table tr.archived { color: var(--clr-text-muted); } /* Per-column widths a styly v tasks index tabulce. */ .tasks-index-table th.col-user, .tasks-index-table td.col-user, .tasks-index-table th.col-creator, .tasks-index-table td.col-creator { width: 8rem; } .tasks-index-table th.col-closed, .tasks-index-table td.col-closed { width: 6rem; } .tasks-index-table th.col-state, .tasks-index-table td.col-state { width: 4rem; white-space: nowrap; } .tasks-index-table th.col-check { width: 2.5rem; } .tasks-index-table th.col-priority, .tasks-index-table td.col-priority { width: 6rem; } .tasks-index-table th.col-deadline, .tasks-index-table td.col-deadline { width: 6rem; white-space: nowrap; } .tasks-index-table th.col-actions, .tasks-index-table td.col-actions { width: 4rem; } .tasks-index-table td.col-task { max-width: 0; } /* Hlavička řádku (vazby + název úkolu) na jedné lince, název v normální velikosti písma jako zbytek tabulky (ne zmenšený jako .button.link). */ .tasks-index-row-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.35rem; min-width: 0; } .tasks-index-title { color: var(--clr-text); text-decoration: none; font-size: 0.92rem; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tasks-index-row-head .entity-chip { flex: 0 0 auto; } /* Title není odkaz na pohled — žádná barva ani podtržení v hoveru, ani v uzavřených (archived) řádcích, kde by `.archived a` obarvilo indigo. */ .tasks-index-title:hover, .tasks-index-table tr.archived .tasks-index-title { color: var(--clr-text); text-decoration: none; } /* Checkboxy ve výpisu úkolů v normální velikosti (default render bývá drobný). */ .tasks-index-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--clr-indigo, #6366f1); cursor: pointer; } .priority-chip { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.8rem; background: #f1f3f4; color: #555; } .priority-chip.priority-medium { background: #fff3cd; color: #8a6d3b; } .priority-chip.priority-high { background: #f8d7da; color: #a94442; } .overdue { color: var(--clr-danger); font-weight: 500; } /* Inline bulk-akce form (Rails form_with -> form wrapper). */ .bulk-form-inline { display: inline; } /* Drobný "× Zrušit filtr" link v h1 hlavičce tasks. */ .tasks-clear-filter { font-size: 0.85rem; margin-left: 0.5rem; } .tasks-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.75rem 0 0; } /* Reset baseline pro inputy a selecty (display: block; width: 100%) přebije přirozenou inline šíři ve flex kontejneru — vrátíme auto, aby filtry seděly horizontálně, ne pod sebou. Původně řešeno přes form.inline pravidlo z framework/forms.css. */ .tasks-filter select, .tasks-filter input { width: auto; } .tasks-filter__search { min-width: 16rem; } /* Dashboard — moje úkoly (sdílí task-checklist; tady jen drobnosti) */ .dashboard-tasks-desc { display: inline; } .dashboard-tasks-from { display: block; color: var(--clr-text-muted); font-size: 0.75rem; margin-top: 0.2rem; } .dashboard-tasks-empty { color: var(--clr-text-muted); font-size: 0.85rem; margin: 0.25rem 0; } /* Tasks index — split-view + preview pane (mirror candidates-index) */ .tasks-index-grid { margin-top: 1rem; } .tasks-index-left { min-width: 0; } .tasks-index-row { outline: none; } .tasks-index-row:hover { background: rgba(0, 0, 0, 0.02); } .tasks-index-row:focus, .tasks-index-row.is-active { background: var(--clr-indigo-alpha, rgba(99, 102, 241, 0.08)); box-shadow: var(--shadow-active-row); } .task-priority-low { --task-priority-bg: color-mix(in srgb, #9ca3af 7%, var(--clr-surface)); --task-priority-border: color-mix(in srgb, #9ca3af 34%, var(--clr-border)); --task-priority-accent: #9ca3af; --task-priority-shadow: 0.22rem 0.22rem 0 color-mix(in srgb, var(--task-priority-accent) 40%, transparent); } .task-priority-medium { --task-priority-bg: color-mix(in srgb, #f59e0b 13%, var(--clr-surface)); --task-priority-border: color-mix(in srgb, #d97706 38%, var(--clr-border)); --task-priority-accent: #d97706; --task-priority-shadow: 0.22rem 0.22rem 0 color-mix(in srgb, var(--task-priority-accent) 40%, transparent); } .task-priority-high { --task-priority-bg: color-mix(in srgb, #ef4444 12%, var(--clr-surface)); --task-priority-border: color-mix(in srgb, #dc2626 42%, var(--clr-border)); --task-priority-accent: #dc2626; --task-priority-shadow: 0.22rem 0.22rem 0 color-mix(in srgb, var(--task-priority-accent) 40%, transparent); } .entity-card.task-priority-low, .entity-card.task-priority-medium, .entity-card.task-priority-high { background: var(--task-priority-bg); border-color: var(--task-priority-border); box-shadow: var(--task-priority-shadow); } .entity-card.task-priority-low.is-active, .entity-card.task-priority-medium.is-active, .entity-card.task-priority-high.is-active { background: color-mix(in srgb, var(--sel-accent) 7%, var(--task-priority-bg)); box-shadow: var(--task-priority-shadow), var(--glow-accent); } .entity-card.task-priority-low.is-closed, .entity-card.task-priority-medium.is-closed, .entity-card.task-priority-high.is-closed { --task-closed-bg: color-mix(in srgb, #10b981 16%, var(--task-priority-bg)); --task-closed-border: color-mix(in srgb, #10b981 48%, var(--task-priority-border)); background: linear-gradient(90deg, color-mix(in srgb, #10b981 22%, transparent) 0, transparent 42%), var(--task-closed-bg); border-color: var(--task-closed-border); box-shadow: inset 0 0 0 1px color-mix(in srgb, #10b981 18%, transparent), var(--task-priority-shadow); } .entity-card.task-priority-low.is-closed .tasks-index-title, .entity-card.task-priority-medium.is-closed .tasks-index-title, .entity-card.task-priority-high.is-closed .tasks-index-title { color: color-mix(in srgb, var(--clr-text) 78%, #10b981); } .entity-card.task-priority-low.is-closed .task-card__description, .entity-card.task-priority-medium.is-closed .task-card__description, .entity-card.task-priority-high.is-closed .task-card__description { background: color-mix(in srgb, #10b981 12%, var(--clr-surface)); color: color-mix(in srgb, var(--clr-text) 76%, #10b981); } .entity-card.task-priority-low.is-closed:not(:has(.col-check [data-bulk-item]:checked)) .task-check.is-checked .task-check-box, .entity-card.task-priority-medium.is-closed:not(:has(.col-check [data-bulk-item]:checked)) .task-check.is-checked .task-check-box, .entity-card.task-priority-high.is-closed:not(:has(.col-check [data-bulk-item]:checked)) .task-check.is-checked .task-check-box, .tasks-index-row.is-closed:not(:has(> .col-check [data-bulk-item]:checked)) .task-check.is-checked .task-check-box { background: #10b981; border-color: color-mix(in srgb, #10b981 72%, var(--task-priority-accent)); } .entity-card.task-priority-low.is-closed.is-active, .entity-card.task-priority-medium.is-closed.is-active, .entity-card.task-priority-high.is-closed.is-active { background: color-mix(in srgb, var(--sel-accent) 7%, var(--task-closed-bg)); border-color: color-mix(in srgb, var(--sel-accent) 35%, var(--task-closed-border)); box-shadow: var(--task-priority-shadow), var(--glow-accent); } .entity-card.task-priority-low.is-closed.is-selected, .entity-card.task-priority-medium.is-closed.is-selected, .entity-card.task-priority-high.is-closed.is-selected, .entity-card.task-priority-low.is-closed:has(.col-check [data-bulk-item]:checked), .entity-card.task-priority-medium.is-closed:has(.col-check [data-bulk-item]:checked), .entity-card.task-priority-high.is-closed:has(.col-check [data-bulk-item]:checked) { background: var(--sel-indigo); border-color: color-mix(in srgb, var(--sel-indigo) 78%, #000); color: #fff; box-shadow: var(--task-priority-shadow), var(--glow-accent); } .entity-card.task-priority-low.is-closed.is-selected .tasks-index-title, .entity-card.task-priority-medium.is-closed.is-selected .tasks-index-title, .entity-card.task-priority-high.is-closed.is-selected .tasks-index-title, .entity-card.task-priority-low.is-closed:has(.col-check [data-bulk-item]:checked) .tasks-index-title, .entity-card.task-priority-medium.is-closed:has(.col-check [data-bulk-item]:checked) .tasks-index-title, .entity-card.task-priority-high.is-closed:has(.col-check [data-bulk-item]:checked) .tasks-index-title, .entity-card.task-priority-low.is-closed.is-selected .task-card__description, .entity-card.task-priority-medium.is-closed.is-selected .task-card__description, .entity-card.task-priority-high.is-closed.is-selected .task-card__description, .entity-card.task-priority-low.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description, .entity-card.task-priority-medium.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description, .entity-card.task-priority-high.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description { color: #fff; } .entity-card.task-priority-low.is-closed.is-selected .task-card__description, .entity-card.task-priority-medium.is-closed.is-selected .task-card__description, .entity-card.task-priority-high.is-closed.is-selected .task-card__description, .entity-card.task-priority-low.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description, .entity-card.task-priority-medium.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description, .entity-card.task-priority-high.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description { background: rgba(255, 255, 255, 0.14); } .tasks-index-row.task-priority-low:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td, .tasks-index-row.task-priority-medium:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td, .tasks-index-row.task-priority-high:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td { background: var(--task-priority-bg); border-top-color: var(--task-priority-border); border-bottom-color: var(--task-priority-border); } .tasks-index-row.task-priority-low.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td, .tasks-index-row.task-priority-medium.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td, .tasks-index-row.task-priority-high.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td { background: color-mix(in srgb, #10b981 13%, var(--task-priority-bg)); border-top-color: color-mix(in srgb, #10b981 45%, var(--task-priority-border)); border-bottom-color: color-mix(in srgb, #10b981 45%, var(--task-priority-border)); } .tasks-index-row.task-priority-low:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child, .tasks-index-row.task-priority-medium:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child, .tasks-index-row.task-priority-high:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child { border-left: 1px solid var(--task-priority-border); } .tasks-index-row.task-priority-low.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child, .tasks-index-row.task-priority-medium.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child, .tasks-index-row.task-priority-high.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child { border-left: 4px solid #10b981; } .tasks-index-row.task-priority-low:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child, .tasks-index-row.task-priority-medium:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child, .tasks-index-row.task-priority-high:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child { border-right: 1px solid var(--task-priority-border); } .tasks-index-row.task-priority-low.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child, .tasks-index-row.task-priority-medium.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child, .tasks-index-row.task-priority-high.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child { border-right: 1px solid color-mix(in srgb, #10b981 45%, var(--task-priority-border)); } .task-card__taskables { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; } .task-card__files-count { margin-top: 0.2rem; font-size: var(--fs-sm); color: var(--clr-text-muted); } .task-card__bottom { align-items: stretch; min-height: 4rem; } .task-card__description { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; min-height: 3.6rem; background: color-mix(in srgb, var(--clr-indigo) 7%, var(--clr-surface)); border-radius: var(--radius-sm); color: var(--clr-text); font-weight: 500; line-height: 1.45; padding: 0.7rem 0.85rem; cursor: pointer; } .task-card__description-text { flex: 1; min-width: 0; } .task-card__state { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .task-card__state--standalone { align-self: center; } .task-card__state .task-check { width: 2.15rem; height: 2.15rem; } .task-card__state .task-check-box { width: 1.45rem; height: 1.45rem; border-radius: 6px; } .task-card__state .task-check.is-checked .task-check-box::after { left: 6px; top: 2px; width: 6px; height: 12px; } .task-preview-document .doc-viewer { min-height: 28rem; } .task-preview-document .doc-viewer-canvas { min-height: 24rem; } .task-preview .entity-description { margin: 0; padding: 0.15rem 0 0; color: color-mix(in srgb, var(--clr-text) 86%, #fff); font-size: 1.02rem; line-height: 1.55; font-weight: 500; } :root[data-theme="dark"] .task-preview .entity-description { color: color-mix(in srgb, var(--clr-text-2) 84%, var(--clr-text)); } /* Úkoly: checklist (entity section + dashboard) — bez rámečků, velký checkbox */ .task-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .task-checklist-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.5rem 0; border-bottom: 1px solid var(--clr-border); font-size: 0.9rem; } .task-checklist-item:last-child { border-bottom: none; } .task-checklist-item.is-closed { color: var(--clr-text-muted); } .task-checklist-item.is-closed .tasks-section-desc, .task-checklist-item.is-closed .dashboard-tasks-desc { text-decoration: line-through; } .task-checklist-item-main { flex: 1; min-width: 0; } .task-checklist-item-actions { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .task-checklist .entity-chip, .tasks-index-table .entity-chip, .page-header__title .entity-chip { margin-right: 0.2rem; font-size: var(--fs-xs); } .task-checklist .entity-chip__avatar, .tasks-index-table .entity-chip__avatar, .page-header__title .entity-chip__avatar { width: 1.25rem; height: 1.25rem; } /* Klikatelný řádek úkolu u entity (vede na detail úkolu). */ .task-checklist-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; color: var(--clr-text); } .task-checklist-link:hover .tasks-section-desc { color: var(--clr-indigo, #6366f1); text-decoration: underline; } .tasks-section-desc { font-weight: 500; } .tasks-section-excerpt { color: var(--clr-text-2); font-size: 0.85rem; overflow-wrap: break-word; } .tasks-section-attrs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .tasks-section-deadline { color: var(--clr-text-muted); font-size: 0.8rem; } .tasks-section-meta { color: var(--clr-text-muted); font-size: 0.8rem; } /* Přílohy uvnitř klikatelného řádku jsou statické (ne odkazy). */ .task-checklist-link .tasks-index-attachment { cursor: pointer; } /* Velký checkbox jako tlačítko (form se posílá po kliku). */ .task-check-form { display: inline-flex; vertical-align: middle; margin: 0; padding: 0; } .task-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: transparent; border: none; cursor: pointer; flex-shrink: 0; } .task-check-box { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--clr-border, #d1d5db); border-radius: 4px; background: var(--clr-surface); transition: border-color 0.12s, background 0.12s; position: relative; } .task-check:hover .task-check-box { border-color: var(--clr-indigo, #6366f1); } .task-check:hover .task-check-box::after { content: ""; position: absolute; inset: 2px; background: var(--clr-indigo, #6366f1); opacity: 0.15; border-radius: 2px; } .task-check.is-checked .task-check-box { background: var(--clr-indigo, #6366f1); border-color: var(--clr-indigo, #6366f1); } .task-check.is-checked .task-check-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ── Jazyky kandidáta (nested form řádky) ─────────────────────── */ .language-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; } .language-row__select { flex: 1 1 auto; min-width: 0; } /* ── Dark mode: sémantické tinty ─────────────────────────────────── Statusové/tintové plochy (warning/success/danger/indigo) mají v light světlé pozadí s tmavým textem — na dark by zůstaly svítivě bílé a nečitelné. Tady je pro dark překreslíme na tlumené průsvitné varianty se světlejším textem. Light zůstává beze změny (pravidla 2, 3, 4). Blok kryje tinty napříč komponentami (application.css se loaduje jako poslední, takže přebije definice z ostatních .css). */ :root[data-theme="dark"] { /* Sémantické tint tokeny — používané níže i případně jinde. */ --tint-warn-bg: rgba(250, 199, 117, 0.15); --tint-warn-brd: rgba(250, 199, 117, 0.34); --tint-warn-text: #f0c07a; --tint-danger-bg: rgba(239, 83, 80, 0.16); --tint-danger-brd: rgba(239, 83, 80, 0.34); --tint-danger-text:#ef8a88; --tint-ok-bg: rgba(92, 196, 106, 0.15); --tint-ok-brd: rgba(92, 196, 106, 0.34); --tint-ok-text: #7fd68b; } /* Flash zprávy + form-errors (application.css). */ :root[data-theme="dark"] .flash-alert, :root[data-theme="dark"] .form-errors { background: var(--tint-warn-bg); border-color: var(--tint-warn-brd); color: var(--tint-warn-text); } :root[data-theme="dark"] .flash-alert { border-left-color: var(--tint-warn-text); } :root[data-theme="dark"] .form-errors { border: 1px solid var(--tint-warn-brd); } :root[data-theme="dark"] .flash-notice { background: var(--tint-ok-bg); border-left-color: var(--tint-ok-text); color: var(--tint-ok-text); } /* Priorita úkolu (application.css). Base = neutrál, medium = amber, high = red. */ :root[data-theme="dark"] .priority-chip { background: var(--clr-surface-alt); color: var(--clr-text-2); } :root[data-theme="dark"] .priority-chip.priority-medium { background: var(--tint-warn-bg); color: var(--tint-warn-text); } :root[data-theme="dark"] .priority-chip.priority-high { background: var(--tint-danger-bg); color: var(--tint-danger-text); } /* Disabled/readonly inputy — beige v light; na dark jen tlumená plocha. */ :root[data-theme="dark"] input[disabled], :root[data-theme="dark"] textarea[disabled], :root[data-theme="dark"] input[readonly="readonly"], :root[data-theme="dark"] textarea[readonly="readonly"], :root[data-theme="dark"] select[disabled], :root[data-theme="dark"] select[readonly="readonly"], :root[data-theme="dark"] trix-editor[disabled], :root[data-theme="dark"] trix-editor[readonly="readonly"], :root[data-theme="dark"] label:has(input[type="checkbox"]):has(input[disabled]), :root[data-theme="dark"] label:has(input[type="radio"]):has(input[disabled]) { background-color: var(--clr-surface-alt); } /* Duplicitní kandidát / interní poznámka (edit_form.css) — amber karta. */ :root[data-theme="dark"] .duplicates-zone-row, :root[data-theme="dark"] .candidate-internal-note { background: var(--tint-warn-bg); border-color: var(--tint-warn-brd); } :root[data-theme="dark"] .candidate-internal-note { color: var(--tint-warn-text); } :root[data-theme="dark"] .duplicates-zone-tag { background: var(--tint-warn-bg); border-color: var(--tint-warn-brd); color: var(--tint-warn-text); } /* „z CV" zvýrazněný input (edit_form.css) — indigo tint. */ :root[data-theme="dark"] .edit-field.has-from-cv-badge input, :root[data-theme="dark"] .edit-field.has-from-cv-badge select, :root[data-theme="dark"] .edit-field.has-from-cv-badge textarea { background: var(--clr-indigo-alpha); } /* Smazat soubor — danger hover (edit_form.css). */ :root[data-theme="dark"] .file-remove-btn:hover { background: var(--tint-danger-bg) !important; color: var(--tint-danger-text) !important; } /* Poznámkový banner doc-vieweru — amber (edit_form.css). */ :root[data-theme="dark"] .doc-viewer-note { background: var(--tint-warn-bg); border-color: var(--tint-warn-brd); color: var(--tint-warn-text); } /* KOP koeficient badge + cenová karta (kop.css) — success/danger/indigo tinty. */ :root[data-theme="dark"] .kop-coef-badge.is-positive { background: var(--tint-ok-bg); color: var(--tint-ok-text); } :root[data-theme="dark"] .kop-coef-badge.is-negative { background: var(--tint-danger-bg); color: var(--tint-danger-text); } :root[data-theme="dark"] .kop-price { background: var(--tint-ok-bg); border-color: var(--tint-ok-brd); } :root[data-theme="dark"] .kop-price-label { color: var(--tint-ok-text); } :root[data-theme="dark"] .kop-price-side { color: var(--tint-ok-text); } :root[data-theme="dark"] .kop-price.is-overridden { background: var(--clr-indigo-alpha); border-color: color-mix(in srgb, var(--clr-indigo) 45%, transparent); } /* KOP chip u pozice (funnel.css) — fialový tint. */ :root[data-theme="dark"] .kop-chip { background: var(--clr-indigo-alpha); color: var(--clr-link); } :root[data-theme="dark"] .kop-chip:hover { background: color-mix(in srgb, var(--clr-indigo) 28%, transparent); } /* Náborový trychtýř (funnel.css): světlé hsl pásy → na dark tmavší, ať text (var(--clr-text)) i počty zůstanou čitelné. Hue se zachová. */ :root[data-theme="dark"] .funnel__band { background: hsl(var(--h) 30% 18%); border-color: hsl(var(--h) 28% 26%); } :root[data-theme="dark"] .funnel__fill { background: hsl(var(--h) 40% 30%); } :root[data-theme="dark"] .funnel__band.is-empty .funnel__fill { background: hsl(var(--h) 16% 22%); } :root[data-theme="dark"] .funnel__band.is-empty .funnel__count { background: hsl(var(--h) 22% 28%); color: hsl(var(--h) 30% 78%); } /* Rozcestník typů projektů (projects#hub, #196) — dlaždice = odkaz na seznam jednoho typu. Všechny dlaždice vypadají stejně: typ se NEodlišuje barvou ani proužkem (INV-11), nese ho popisek. Barvy jdou z tokenů, takže dark mode nepotřebuje vlastní blok. */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.25rem; } .hub-tile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.25rem 1.35rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); color: var(--clr-text); text-decoration: none; /* Kartový jazyk (T-080): stejná signatura jako .entity-card — offset stín v indigo accentu (dlaždice = projekty → indigo) + zdvih na hover, ať rozcestník čte jako součást stejné rodiny jako karty, ne jako cizí stránka. */ box-shadow: 0.22rem 0.22rem 0 color-mix(in srgb, var(--clr-indigo) 40%, transparent); transition: transform 0.12s ease-out, border-color 0.12s ease, background 0.12s ease; } .hub-tile:hover, .hub-tile:focus-visible { border-color: var(--clr-indigo); background: var(--clr-surface-alt); transform: translateY(-0.5rem); } .hub-tile__label { font-size: 1.05rem; font-weight: 500; } .hub-tile__count { min-width: 2.25rem; padding: 0.15rem 0.55rem; border: 1px solid var(--clr-border); border-radius: 999px; background: var(--clr-surface-alt); color: var(--clr-text-2); font-size: 0.9rem; text-align: center; } .hub-tile:hover .hub-tile__count { background: var(--clr-surface); } /* „Všechny projekty" = cesta na holý index, který zůstává ALL (INV-7). Táž dlaždice, jen přes celou šířku mřížky. */ .hub-tile--all { grid-column: 1 / -1; background: var(--clr-surface-alt); } /* Rozcestník seskupený podle kategorie (T-055) — Klientské / Interní. Nadpis sekce je textový (INV-11), ne barevný. Interní sekce může být prázdná → empty-state dlaždice bez odkazu (typy teprve přibudou, T-057). */ .hub-section { margin-top: 1.75rem; } .hub-section__title { font-size: 1rem; font-weight: 600; color: var(--clr-text-2); margin-bottom: 0.75rem; } .hub-section .hub-grid { margin-top: 0; } .hub-tile--empty { border-style: dashed; color: var(--clr-text-2); cursor: default; box-shadow: none; } /* Empty-state placeholder (typy teprve přibudou, T-057) není zvednutá karta — žádný accent stín ani zdvih na hover. */ .hub-tile--empty:hover, .hub-tile--empty:focus-visible { border-color: var(--clr-border); background: var(--clr-surface); transform: none; }