/*
* Eurodach IS — Dashboard/reporty (krok 7 BUILD_PLAN).
* Stejná paleta jako admin branding (viz static/admin/css/eurodach_theme.css,
* pravidlo 60-30-10) — barvy vědomě zopakované tady, ne @import, ať appka
* nezávisí na admin staticfiles.
*/
/* Carlito (metricky kompatibilní náhrada Calibri) VYZKOUŠENO a VRÁCENO
ZPĚT (Michal, 2026-09-07: "ten font není dobrý... dělá různě velká
čísla") - v prohlížeči (na rozdíl od WeasyPrint/PDF, kde Carlito
zůstává) dělal nekonzistentní vzhled čísel, nejspíš problém s fallbackem
na tučný řez. `table.list`/`table.report`/`.form-row` teď zase dědí
běžný systémový font ze `body`. Fonty v `dashboard/static/dashboard/fonts/carlito/`
zůstávají na disku (nezávadné, nic je teď needeklaruje) pro případ
budoucího opakovaného pokusu. */
:root {
/* Redesign 2026-09-15 (Michal poslal mockupy login-design.html/
uvod-redesign.html/priprava-vyroba-redesign.html) - paleta sjednocená
s login stránkou (teplý amber + tmavě šedá místo dřívější syté
oranžové + skoro černé). HODNOTY proměnných se mění, NÁZVY ne - grid/
status-pill/badge apod. napříč appkou je používají přes `var(--x)`,
žádná šablona/JS na konkrétní hex nespoléhá. */
--primary: #e8963c;
--primary-dark: #c97a2e;
--secondary: #26292f;
/* Teplejší krémové pozadí + odpovídající okraj (mockup --bg/--border)
místo dřívější studené šedé - karty (--surface-bg zůstává čistě bílá)
díky tomu líp "vystoupí" bez nutnosti sytější stín. */
--body-bg: #f6f4ef;
--surface-bg: #ffffff;
/* "Ink" paleta z mockupu - jemně namodralá tmavá/šedá místo čistě
neutrální #212529/#6C757D, sjednoceno s login stránkou (.login-page__brand
barva). --ink-faint je NOVÁ (dřív appka nejjemnější úroveň textu
neměla jako token, řešilo se to ad-hoc inline stylem). */
--body-fg: #16233a;
--muted-fg: #67748c;
--ink-faint: #98a2b5;
--border-color: #e7e3d9;
--success: #198754;
--success-bg: #BDECB6;
--warning: #FFC107;
--error: #DC3545;
--error-bg: #F8D7DA;
/* Redesign 2026-09-15 - 210px (dřívější zúžení kvůli "Výzva k úhradě
přijatá" na jeden řádek, viz komentář u `.sidebar__sublink`) přestalo
stačit s novým bočním paddingem sidebaru + podtitulkem "VAZNÍKY · CNC
· DŘEVOSTAVBY" (Michal - "v novém designu se vlezou ty tři slova
vedle sebe... rozšiř o pár mm"). Širší hodnota jen POMÁHÁ i té
dřívější podmínce (víc místa, ne míň), žádný konflikt. */
--sidebar-width: 232px;
--topbar-height: 56px;
--sidebar-active-bg: #fbead6;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
/* Formulářová pole (input/select/textarea) - design-instrukce-komentare.md,
Michal: pole dnes všude dědí `--radius-sm` (6-7px), což vedle
zaoblenějších karet/tlačítek/sidebar chipů z redesignu 2026-09-15
působí "hranatě". Tři úrovně místo jedné - textarea o něco méně
kulatá než jednořádkové pole (na víc řádků textu velký poloměr
opticky "uřezává" roh vedle prvního/posledního řádku textu). */
--radius-field: 16px;
--radius-field-textarea: 12px;
/* Dvouvrstvý stín (jemná blízká vrstva + širší měkká vrstva) - běžný
trik pro "vystupující kartu" (viz komentář u --body-bg výš), jedna
ostrá vrstva vždycky vypadá plošeji. */
--shadow-sm: 0 1px 3px rgba(33,37,41,.09), 0 4px 10px rgba(33,37,41,.05);
--shadow-md: 0 2px 6px rgba(33,37,41,.10), 0 10px 24px rgba(33,37,41,.10);
/* Vrstvený stín z mockupu (jemná ostrá linka + širší rozostřená
vrstva) - o něco výraznější než --shadow-md, pro karty na krémovém
pozadí (viz .card níž). */
--shadow-card: 0 1px 1px rgba(16,23,41,.03), 0 20px 34px -18px rgba(16,23,41,.18);
--accent-blue-bg: #eaf0fe; --accent-blue-fg: #2f6fed;
--accent-green-bg: #e6f5ef; --accent-green-fg: #1f9d75;
--accent-amber-bg: #fbead6; --accent-amber-fg: #c97a2e;
--accent-red-bg: #fdeaec; --accent-red-fg: #e2555f;
--accent-purple-bg: #efe9fe; --accent-purple-fg: #7c5cf0;
/* Nové 2026-09-15 (mockup stav-dropdown.html) - neutrální "šedá"
varianta chyběla, potřebná pro Stav "Nová" a "Neměří se" v nové
roletce (core/_status_dropdown.html). */
--accent-gray-bg: #eef0f3; --accent-gray-fg: #67748c;
/* "Měkký" tón v půli mezi -bg (moc bledý na kolečku - "hrozně
světlé jakoby vybledlé") a -fg (moc syté - "ostré") - přesný
aritmetický průměr obou, ne nová paleta. Feedback od Michala -
"přijde mi to moc světlé, trochu bych to ztmavil" + "ty kolečka
vedle textu K úhradě a Po splatnosti bych obarvil analogicky
stejně" (viz dashboard.css .donut-segment/.donut-legend__dot). */
--accent-blue-soft: #97b7f7;
--accent-red-soft: #f0a0a7;
}
/* Manrope (UI text) + JetBrains Mono (čísla/kódy) - self-hosted (Michal,
2026-09-15: appka nemá za běhu záviset na Google Fonts CDN, viz README/
CLAUDE.md důraz na výkon a spolehlivost v ostrém provozu). Jen latin +
latin-ext podmnožiny (čeština) - stažené přímo z fonts.gstatic.com, ne
celá znaková sada. Manrope v20 je proměnný font (jeden soubor pokrývá
celou váhovou osu) - `font-weight: 400 800` rozsah místo 5 kopií pravidla. */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("fonts/manrope-latin.938c6e8019b6.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("fonts/manrope-latin-ext.6d36d5bdedfa.woff2") format('woff2');
unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/jetbrains-mono-500-latin.a21e038a03f7.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/jetbrains-mono-500-latin-ext.311b1217e9b0.woff2") format('woff2');
unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF;
}
/* Utilita pro čísla/kódy ve sloupcích (mockup - Manrope pro text, JetBrains
Mono pro číselné/tabulkové hodnoty), volitelná - ne plošná přestavba
existujících tabulek. */
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
* { box-sizing: border-box; }
body {
margin: 0;
font-family: 'Manrope', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--body-bg);
color: var(--body-fg);
}
/* Michal, 2026-09-16 - "udělej nové ikonky pro checkboxy... podle nového
konceptu designu": nativní checkbox/radio byl VŠUDE v appce natívní
prohlížečová modrá, neladil s jantarovou paletou appky. `accent-color`
(podporováno všemi moderními prohlížeči) přebarví natívní vzhled bez
nutnosti kreslit vlastní SVG náhradu - jedno pravidlo pro CELOU appku
(dřív byl per-místo `accent-color` jen na pár izolovaných místech, např.
`.grid-panel__col-row input[type=checkbox]` výš). */
input[type=checkbox], input[type=radio] { accent-color: var(--primary-dark); }
/* --- Shell (sidebar + hlavní obsah) ---------------------------------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
width: var(--sidebar-width);
flex: 0 0 var(--sidebar-width);
/* `position: sticky; left: 0` - když je grid (table.list) širší než
okno a stránka se kvůli tomu scrolluje vodorovně (viz `.table-scroll`
výš), sidebar by jinak odjel z obrazovky spolu se zbytkem `.shell`
flex řádku (Michalův bugreport - "vodorovný scrollbar by neměl
odrolovat i levé menu"). Sticky ho drží na místě, `z-index` ať
zůstane NAD obsahem, co se pod ním posouvá (má vlastní neprůhledné
pozadí, takže nic nesvítí skrz). */
position: sticky;
left: 0;
z-index: 20;
background: var(--secondary);
color: #DEE2E6;
display: flex;
flex-direction: column;
/* Redesign 2026-09-15 (mockup priprava-vyroba-redesign.html/
uvod-redesign.html `.sidebar`) - boční "gutter" (dřív 0) je NUTNÝ, aby
položky menu níž mohly vypadat jako zaoblené "čipy" s viditelnou
mezerou od okraje panelu - Michal po hard reload správně poznal, že
předchozí verze byla "ostrohraná" (položky sahaly ke krajům, žádný
prostor pro zaoblení se neprojevil). */
padding: 20px 12px;
}
.sidebar__brand {
font-weight: 700;
letter-spacing: .03em;
color: #fff;
/* Boční padding přesunutý na `.sidebar` výš - dřívějších 20px tady by
teď zdvojilo odsazení. */
padding: 0 8px 2px;
}
.sidebar__brand span { color: var(--primary); }
/* Podtitulek pod brandem (mockup + login stránka - stejná "VAZNÍKY · CNC
· DŘEVOSTAVBY" značka na obou místech, ať appka a přihlašovací obrazovka
působí jako jeden celek). JetBrains Mono - stejná konvence jako
`.login-page__brand-sub`. */
.sidebar__brand-tag {
font-family: 'JetBrains Mono', monospace;
font-size: .6rem;
letter-spacing: .09em;
color: #7c8898;
padding: 0 8px 16px;
white-space: nowrap;
}
.sidebar__nav { flex: 1; overflow-y: auto; }
.sidebar__link, .sidebar__group-header {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
color: #DEE2E6;
text-decoration: none;
font-size: .87rem;
cursor: pointer;
user-select: none;
/* Mockup `.nav-item` - zaoblený "čip", ne plný obdélník od kraje ke
kraji (viz `.sidebar` padding výš, proč se to teď vůbec projeví). */
border-radius: 8px;
margin-bottom: 2px;
}
/* Odstín hoveru VĚDOMĚ jiný/silnější než dřívější .06 (Michalův
feedback + konkurenční IS screenshot - "trochu jiný odstín aby
podbarvili řádek jako hover efekt") - musí být znát i vedle aktivního
oranžového řádku, ne skoro neviditelný. */
.sidebar__link:hover, .sidebar__group-header:hover { background: rgba(255,255,255,.10); color: #fff; }
/* Michal, 2026-09-15 - "aktivní položka je taková zaoblená" + "na řádku
Banka je vidět hover efekt před kliknutím": ani jedno není náš styl -
BEZ vlastního `:focus` pravidla prohlížeč kreslí NATIVNÍ obrys (zaoblený,
obarvený podle systémového akcentu Windows), co navíc zůstává viditelný
i PO kliknutí, dokud focus nepřejde jinam (vypadá jako "zaseklý hover").
`:focus-visible` (ne obyčejné `:focus`) - moderní prohlížeče ho na rozdíl
od `:focus` NEukážou po prostém kliknutí myší, jen při navigaci
klávesnicí (Tab), takže "zaseklý" vzhled po kliknutí zmizí úplně, ne jen
se přebarví. */
.sidebar__link:focus-visible, .sidebar__group-header:focus-visible {
outline: none;
background: rgba(255,255,255,.10);
color: #fff;
}
/* Redesign 2026-09-15 - dřívější plný oranžový blok (bg: var(--primary),
tmavý text) nahrazen jemným gradientem + levým amber pruhem (mockup
`.nav-item.active`) - konzistentní s tmavým sidebarem, text zůstává
světlý místo přepínání na tmavý. */
.sidebar__link.is-active {
background: linear-gradient(90deg, rgba(232,150,60,.18), rgba(232,150,60,.02));
color: #fff;
font-weight: 600;
box-shadow: inset 2px 0 0 var(--primary);
}
.sidebar__icon { width: 17px; height: 17px; flex: 0 0 17px; }
/* Počet čekajících položek u odkazu (Docházka - žádosti ke schválení). */
.sidebar__count { margin-left: auto; font: 500 10.5px 'JetBrains Mono', monospace; color: #e0913c; }
.sidebar__group-header span { flex: 1; min-width: 0; }
.sidebar__chevron { width: 14px; height: 14px; transition: transform .15s; flex: 0 0 14px; }
.sidebar__toggle { position: absolute; opacity: 0; pointer-events: none; }
.sidebar__toggle:checked ~ .sidebar__group-header .sidebar__chevron { transform: rotate(90deg); }
.sidebar__submenu {
max-height: 0;
overflow: hidden;
transition: max-height .18s ease;
}
/* 600px, ne přesně napočítaná hodnota - Doklady má teď 11 položek
(Výzvy/DDPP/Faktury rozdělené na vydané/přijaté, viz split_by_direction)
a dřívějších 240px je ořezávalo (Dobropisy a další skoro neviditelné) -
generózní strop ať to nespadne znovu, až přibude další typ dokladu. */
.sidebar__toggle:checked ~ .sidebar__submenu { max-height: 600px; }
.sidebar__sublink {
display: block;
/* Mělčí odsazení než dřívějších 48px (Michalův bugreport - "Výzva k
úhradě přijatá by se měla vlézt na jeden řádek", `--sidebar-width`
zúžená na 210px) + `nowrap` místo default zalomení - dlouhý název
typu dokladu se už nezalomí na 2 řádky. */
padding: 7px 14px 7px 30px;
color: #ADB5BD;
text-decoration: none;
font-size: .8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 8px;
}
.sidebar__sublink:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar__sublink:focus-visible { outline: none; background: rgba(255,255,255,.08); color: #fff; }
.sidebar__sublink.is-active {
background: rgba(232, 150, 60, .18); /* var(--primary) #e8963c s průhledností */
color: var(--primary);
font-weight: 600;
}
/* Menu Dokladů po druzích (handoff 9a, kap. 3): nadpisy oddílů Vydané ·
Přijaté · Ostatní a počty vpravo, jako v prototypu. */
.sidebar__toggle:checked ~ .sidebar__submenu--doklady { max-height: 1100px; }
.sidebar__subhead {
font: 600 9.5px 'JetBrains Mono', monospace;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.42);
padding: 9px 14px 3px 30px;
}
.sidebar__subsep { height: 1px; background: rgba(255,255,255,.08); margin: 6px 14px 4px 30px; }
.sidebar__sublink--count { display: flex; align-items: center; gap: 8px; }
.sidebar__sublink-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar__subcount { font: 500 10.5px 'JetBrains Mono', monospace; color: rgba(255,255,255,.4); flex: none; }
.sidebar__subcount--alert { color: #e08a72; }
.sidebar__sublink.is-active .sidebar__subcount { color: #e0913c; }
.sidebar__footer { border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }
.sidebar-backdrop { display: none; }
/* --- Hlavní panel + úzký topbar (jen mobil-toggle a uživatel) -------- */
.shell__main { flex: 1; min-width: 0; }
/* Topbar + Rychlé záložky sdílí JEDNU tmavou lištu (feedback od Michala -
dřív byl nad černou lištou zbytečný prázdný bílý pruh jen pro
admin/Odhlásit). `.quicklinks` (viz níž) je teď flex potomek TÉHLE
lišty, ne samostatný blok pod ní. */
.topbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
background: var(--secondary);
padding: 6px 24px;
min-height: var(--topbar-height);
}
.topbar__menu-toggle {
display: none;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: #DEE2E6;
padding: 6px;
}
.topbar__menu-icon { width: 22px; height: 22px; }
.topbar__user {
display: flex;
align-items: center;
gap: 10px;
font-size: .85rem;
white-space: nowrap;
color: #DEE2E6;
margin-left: auto;
}
.topbar__logout { margin: 0; }
/* Redesign 2026-09-15 - amber obrys místo neutrálně bílého (mockup
`.logout-btn`), ať odhlášení vizuálně ladí se zbytkem amber akcentů. */
.topbar__logout button {
background: none;
border: 1px solid rgba(232,150,60,.4);
color: var(--primary);
border-radius: var(--radius-sm);
padding: 5px 12px;
cursor: pointer;
font-size: .82rem;
font-weight: 700;
}
.topbar__logout button:hover { background: rgba(232,150,60,.1); }
/* --- Rychlé záložky (core.models.QuickLink, dashboard/_quick_links.html) */
.quicklinks {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.quicklinks__tab {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,.08);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
max-width: 90px;
}
/* Redesign 2026-09-15 - dřívější plný amber blok (tmavý text) nahrazen
subtilnějším "current tab" vzhledem z mockupu (`.tab.current`) - jen
světlejší podklad + amber spodní linka, text zůstává světlý jako u
neaktivních tabů. */
.quicklinks__tab.is-active { background: rgba(255,255,255,.14); box-shadow: inset 0 -2px 0 var(--primary); }
.quicklinks__tab a {
color: #DEE2E6;
text-decoration: none;
font-size: .78rem;
padding: 5px 4px 5px 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quicklinks__tab.is-active a { color: #fff; font-weight: 600; }
.quicklinks__remove-form { display: contents; }
.quicklinks__remove-form button {
background: none; border: none; cursor: pointer;
color: #ADB5BD; padding: 4px 8px 4px 2px; font-size: .85rem; line-height: 1;
}
.quicklinks__tab.is-active .quicklinks__remove-form button { color: #DEE2E6; }
.quicklinks__remove-form button:hover { color: #fff; }
.quicklinks__add { position: relative; }
.quicklinks__add summary {
list-style: none; cursor: pointer;
color: #DEE2E6; font-size: .9rem; font-weight: 700;
padding: 5px 10px; border-radius: var(--radius-sm);
}
.quicklinks__add summary::-webkit-details-marker { display: none; }
.quicklinks__add summary:hover { background: rgba(255,255,255,.08); }
.quicklinks__add-form {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
display: flex; gap: 6px;
background: var(--surface-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 10px;
}
.quicklinks__add-form input {
border: 1px solid var(--border-color); border-radius: var(--radius-sm);
padding: 5px 8px; font-size: .85rem; width: 140px;
}
@media (max-width: 900px) {
.sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 40;
transform: translateX(-100%);
transition: transform .2s ease;
}
body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-md); }
body.sidebar-open .sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(0,0,0,.3);
z-index: 30;
}
.topbar__menu-toggle { display: inline-flex; }
}
.page {
/* Bez max-width/centrování (feedback od Michala - zbytečná prázdná
mezera na širších monitorech) - je to gridový/tabulkový systém se
seznamy až s 26 sloupci, ať mají kde být. */
padding: 24px;
}
/* DRUHÝ POKUS o vodorovné scrollování širokého gridu (`core/_list_base.html`
obaluje `{% block list_table %}` `.table-scroll` divem) - PRVNÍ pokus
(`overflow-x: auto` přímo na tomhle divu) byl špatně: scrollbar se
objevil až úplně DOLE POD VŠEMI ŘÁDKY tabulky, takže u delšího gridu
nebyl vůbec k nalezení bez scrollování stránky až na konec (Michalův
bugreport - "vodorovnej scrollbar vůbec nevidím"). `.table-scroll` je
teď JEN neutrální wrapper (bez overflow) - scrolluje se rovnou CELÉ
OKNO (nativní scrollbar dole v prohlížeči, spolehlivě viditelný a
"nezanořený"), sidebar zůstává na místě přes `position: sticky` NÍŽE
u `.sidebar`, ne přes zadržení scrollu uvnitř malého boxu. */
.table-scroll { }
.breadcrumb {
display: flex; align-items: center; gap: 6px;
font-size: .82rem; color: var(--muted-fg);
margin-bottom: 6px;
}
.breadcrumb__sep { color: var(--border-color); }
.breadcrumb__item.is-current { color: var(--body-fg); font-weight: 600; }
.page__title {
font-size: 1.4rem;
margin: 0 0 20px;
/* `display:flex` sem, ne na zvláštní wrapper div - `.page__title` je
JEDINÝ obalující element z base.html, takže "Filtrováno" pilulka
(`.filtered-pill`) jde přímo dovnitř jako druhý řádkový prvek.
Jednořádkový titulek beze změny (jediné dítě = stejné chování jako
dřív). */
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
/* core/_list_base.html - "Realizace (90)" (Michal, 2026-09-15: starý IS
tohle měl za názvem seznamu, "je to šikovné"). Muted/lehčí váha, ať
vizuálně nesoupeří s hlavním titulkem. */
.page__count { color: var(--muted-fg); font-weight: 400; font-size: .85em; }
/* Indikace aktivních filtrů (mockup filtr-indikator.html, design-
instrukce-stav-filtry.md) - varianta B (souhrnný pruh se štítky) +
C (badge u nadpisu + přepočet položek), Michal 2026-09-15 - staré IS
mělo obojí, "abychom věděli, že se nedíváme na kompletní seznam". */
.filtered-pill {
display: inline-flex; align-items: center; gap: 5px;
background: var(--accent-amber-bg); color: var(--accent-amber-fg);
font-size: .72rem; font-weight: 700;
padding: 3px 10px; border-radius: 20px;
}
.filtered-pill svg { width: 11px; height: 11px; }
.page-sub { font-size: .82rem; color: var(--muted-fg); margin: -12px 0 20px; }
.page-sub__num { font-family: 'JetBrains Mono', monospace; color: var(--body-fg); font-weight: 700; }
/* Stav v titulku (Michal, 2026-09-19, mockup Detail realizace) - pilulka
vedle jména, stejný tvar jako `.filtered-pill` výš, jiné barvy/obecnější
jméno (použitelné i mimo grid-filtr kontext). */
.status-pill {
display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700;
padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.status-pill--info { background: var(--accent-blue-bg); color: var(--accent-blue-fg); }
.status-pill--muted { background: var(--accent-gray-bg); color: var(--accent-gray-fg); }
/* Typ "M" - jen montáž, bez vlastní výroby (Michal, 2026-09-18 - "nemáme
ikonku pro pouze montáž... potřebujeme třeba u rekonstrukce"), odlišná
barva od V (`--muted`) i V+M (`--info`), viz Realizace.production_type_badge. */
.status-pill--purple { background: var(--accent-purple-bg); color: var(--accent-purple-fg); }
.filter-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: -8px 0 16px;
padding: 9px 14px;
background: var(--accent-amber-bg);
border: 1px solid rgba(232,150,60,.35);
border-radius: var(--radius-md);
font-size: .82rem;
}
.filter-bar__funnel { width: 15px; height: 15px; color: var(--accent-amber-fg); flex-shrink: 0; }
.filter-bar__lead { font-weight: 700; color: var(--accent-amber-fg); white-space: nowrap; }
.filter-bar__chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.filter-bar__chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--surface-bg); border: 1px solid rgba(232,150,60,.4);
color: var(--body-fg); font-weight: 600; font-size: .78rem;
padding: 4px 8px 4px 10px; border-radius: 20px;
text-decoration: none;
}
.filter-bar__chip:hover { border-color: var(--accent-amber-fg); }
.filter-bar__chip-x {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; border-radius: 50%;
color: var(--muted-fg); font-size: .7rem;
}
.filter-bar__chip:hover .filter-bar__chip-x { color: var(--accent-amber-fg); }
.filter-bar__clear {
font-weight: 700; color: var(--muted-fg); white-space: nowrap;
text-decoration: none;
}
.filter-bar__clear:hover { color: var(--accent-amber-fg); }
.card {
background: var(--surface-bg);
/* Skoro neviditelný okraj (ne var(--border-color), ten byl proti
tmavšímu pozadí najednou vidět moc ostře a rušil "vystupující" efekt
stínu, viz komentář u --body-bg) - jemné vymezení hrany dělá hlavně
stín. */
border: 1px solid rgba(33,37,41,.05);
/* Redesign 2026-09-15 - větší roh + vrstvený stín z mockupu
(--shadow-card), o něco výraznější "vystupující" efekt na novém
krémovém pozadí než dřívější --radius-md/--shadow-sm. */
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: 20px;
margin-bottom: 20px;
}
/* Nadpis karty + akční tlačítko vedle sebe (např. "Položky" + "+ Přidat
položku" na documents/document_detail.html) - tlačítko VLEVO (feedback
od Michala), nadpis za ním. */
.card__header-row { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.card__header-row h2 { margin: 0; }
/* Karta, jejíž hlavní obsah je tabulka bez vlastního rámečku (mockup
uvod-redesign.html - "Vaše faktury po splatnosti"/"Moje probíhající
realizace"/"Moje poptávky" widgety). Michal, 2026-09-15 (porovnání
screenshotů): vodorovné linky tabulky mají sahat AŽ ke krajům widgetu
(ne zůstat zaražené uvnitř `.card` paddingu), a `table.list` (na rozdíl
od `table.report`, co je vždycky flush) svým VLASTNÍM rámečkem/stínem
"přelézal ven z widgetu" - dělal vizuálně kartu v kartě. `.card--table`
zruší boční padding karty (tabulka jde přes celou šířku) a přesune ho na
nadpis/prázdný stav zvlášť + odstraní `table.list` vlastní box vzhled,
když je takhle vnořená v kartě (na SAMOSTATNÝCH stránkách gridů
`table.list` svůj rámeček/stín pořád má, tohle je jen pro widgety na
Úvodu). */
.card--table { padding: 20px 0 6px; }
.card--table > h2 { padding: 0 20px; margin: 0 0 4px; }
.card--table > .empty-state { padding: 0 20px; margin-top: 0; }
.card--table table.list { background: transparent; border: none; box-shadow: none; }
.card--table table.list th, .card--table table.list td,
.card--table table.report th, .card--table table.report td { padding: 10px 20px; }
/* Michal, 2026-09-15 - "pokud jezdím kurzorem po řádku... pozadí taky
takové krémové" (mockup `.mini-table tbody tr:hover td`). `table.list`
tohle už dostává plošně (`table.list tbody tr:hover` výš, od Michalova
"dej to klidně přes celou appku") - tady doplňuje jen `table.report`
(žádné vlastní hover pravidlo jinde nemá). */
.card--table table.report tbody tr:hover td { background: #fbf9f4; }
/* banking/_account_header.html - "Účet" přepínač nad Bankovními pohyby/
Importem (Michalův screenshot starého IS) - karta se stavem účtu pod
selectem. */
.banking-account-card { max-width: 700px; margin-bottom: 16px; }
.banking-account-card__info { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 4px; }
/* banking/bankimport_detail.html - log importu (banking.models.BankImport.log) */
.log-view {
background: var(--body-bg); border: 1px solid var(--border-color); border-radius: 8px;
padding: 12px 16px; font-family: monospace; font-size: .82rem; white-space: pre-wrap;
max-height: 500px; overflow-y: auto;
}
/* Karty s klíč/hodnota detailem (Detail/Kategorizace/Dokumenty) NEmají
roztahovat hodnoty přes celou širokou stránku (feedback od Michala) -
na rozdíl od karet s opravdovou tabulkou dat (položky dokladu, Vyhodnocení
Realizace...), ty zůstávají přes `.card` bez modifikátoru na plnou šířku,
ať mají sloupce kde být. */
.card--narrow { max-width: 900px; }
/* Checklist vedle formuláře Detailu Realizace (feedback od Michala -
"dej ten checklist napravo... šířku dej poloviční než je nyní") -
poloviční šířka `.card--narrow` (900px), viz .detail-with-checklist. */
.card--checklist { max-width: 450px; flex: 1 1 320px; }
.detail-with-checklist { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
/* Levý sloupec Detailu Realizace (Průchod zakázkou, formulář) - obyčejný
blok, ne flex (mezery mezi kartami dělá jejich vlastní `.card`
margin-bottom, ne `gap`). `flex`/`max-width` tady řídí šířku CELÉHO
sloupce v `.detail-with-checklist` řádku - jednotlivé karty uvnitř mají
svoje `.card--narrow` navíc jen kvůli max-width v jiném kontextu (mimo
tenhle sloupec), tady je to neaktivní. */
.detail-main-column { flex: 1 1 500px; max-width: 900px; min-width: 0; }
/* Pravý sloupec (Checklist + Aktivita, Michal 2026-09-19) - stejný
princip jako `.detail-main-column`, jen užší (odpovídá `.card--checklist`
šířce). `.card--checklist` uvnitř nechává vlastní max-width beze změny -
neaktivní tady, sloupec sám je užší. */
.detail-side-column { display: flex; flex-direction: column; flex: 1 1 320px; max-width: 450px; min-width: 0; }
/* Průchod zakázkou (Michal, 2026-09-17, mockup Detail realizace) - pásek
segmentů nad formulářem Detailu, stejný vizuální jazyk jako mockup
(barevný segment = aktuální krok), přebarvený na stávající světlé téma
(--primary místo mockupové oranžové, --ink-faint/--border-color na
hotové/budoucí kroky). */
.production-stage { margin-bottom: 20px; }
.production-stage__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.production-stage__head h2 { margin: 0; }
.production-stage__deadline { font-size: .78rem; color: var(--muted-fg); }
.production-stage__track { display: flex; gap: 7px; }
.production-stage__segment { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.production-stage__bar { height: 5px; border-radius: 3px; background: var(--border-color); }
.production-stage__segment--done .production-stage__bar { background: var(--ink-faint); }
.production-stage__segment--current .production-stage__bar { background: var(--primary); }
.production-stage__label {
font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--ink-faint);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.production-stage__segment--done .production-stage__label { color: var(--muted-fg); }
.production-stage__segment--current .production-stage__label { color: var(--primary-dark); font-weight: 600; }
/* Vysvětlivky pod Seznamem realizací (Michal, 2026-09-19 - "udělal bych
na ten grid i ty vysvětlivky... umožnilo by nám to zkrátit ten pásek jen
na ty zkratky"), core/_list_base.html `list_footer` blok. Průchod
(core_extras.production_stage_legend) + Typ skupina se roztáhnou na
opačné konce řádku (`:last-child { margin-left: auto }`), jako v
mockupu. */
.stage-legend {
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--border-color);
font-size: .78rem; color: var(--muted-fg);
}
.stage-legend__group { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.stage-legend__group:last-child { margin-left: auto; }
.stage-legend__title {
font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted-fg);
}
.stage-legend__swatch { display: inline-flex; align-items: center; gap: 6px; }
.stage-legend__dot { width: 16px; height: 5px; border-radius: 2px; display: inline-block; }
.stage-legend__dot--done { background: var(--ink-faint); }
.stage-legend__dot--current { background: var(--primary); height: 9px; }
.stage-legend__dot--future { background: var(--border-color); }
/* Pruh plnění u sloupce Požadovat na Seznamu realizací (Michal,
2026-09-19 - "vizuálně znázornit kolik ještě se má Požadovat"), mockup
RealizaceSeznam.dc.html "Zbývá fakt." - modrý pruh, 100 % přebarví na
šedou (ať plně vyfakturované zakázky "nekřičí" barvou). */
.grid-money-progress__value--done { color: var(--ink-faint); }
.grid-money-progress__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .72rem; color: var(--muted-fg); }
.grid-money-progress__bar { width: 44px; height: 4px; border-radius: 2px; background: var(--border-color); overflow: hidden; flex: none; }
.grid-money-progress__fill { height: 100%; border-radius: 2px; background: var(--accent-blue-fg); }
.grid-money-progress__fill--done { background: var(--ink-faint); }
/* Aktivita - trvalý panel Události/Komentáře (Michal, 2026-09-19, viz
core_extras.events_panel docstring), nahradil dřívější mizející kartu
"Čeká na potvrzení". */
.events-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.events-panel__head h2 { margin: 0; }
.events-panel__list { display: flex; flex-direction: column; gap: 12px; }
.events-panel__item { padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.events-panel__item:last-child { border-bottom: none; padding-bottom: 0; }
.events-panel__item--resolved { opacity: .6; }
.events-panel__item-meta { display: flex; align-items: center; gap: 7px; font-size: .85rem; }
.events-panel__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.events-panel__dot--task { background: var(--primary); }
.events-panel__dot--info { background: var(--accent-blue-fg); }
.events-panel__dot--done { background: var(--border-color); }
.events-panel__item-body { margin: 5px 0 0; font-size: .85rem; color: var(--body-fg); line-height: 1.5; }
.events-panel__item-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.events-panel__item-actions form { display: inline; }
.card h2 {
font-size: 1.05rem;
margin: 0 0 14px;
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.tile {
display: block;
background: var(--surface-bg);
/* Stejné zjemnění jako .card výš - klidový okraj skoro neviditelný,
hover pořád přepíná na plnou var(--primary) beze změny. */
border: 1px solid rgba(33,37,41,.05);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px;
text-decoration: none;
color: var(--body-fg);
font-weight: 600;
transition: border-color .15s;
}
.tile:hover { border-color: var(--primary); }
/* --- Stat-card dlaždice (dashboard/home.html) ------------------------ */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.stat-card {
display: flex;
align-items: center;
gap: 14px;
background: var(--surface-bg);
border: 1px solid rgba(33,37,41,.05);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px;
text-decoration: none;
color: var(--body-fg);
transition: box-shadow .15s, border-color .15s;
}
.stat-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.stat-card__icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
}
.stat-card__icon svg { width: 20px; height: 20px; }
.stat-card__icon--blue { background: var(--accent-blue-bg); color: var(--accent-blue-fg); }
.stat-card__icon--green { background: var(--accent-green-bg); color: var(--accent-green-fg); }
.stat-card__icon--amber { background: var(--accent-amber-bg); color: var(--accent-amber-fg); }
.stat-card__icon--red { background: var(--accent-red-bg); color: var(--accent-red-fg); }
.stat-card__icon--purple { background: var(--accent-purple-bg); color: var(--accent-purple-fg); }
.stat-card__body { min-width: 0; }
.stat-card__value { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.stat-card__label { font-size: .82rem; color: var(--muted-fg); }
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.badge {
display: inline-block;
min-width: 20px;
text-align: center;
background: var(--error);
color: #fff;
border-radius: 10px;
padding: 1px 7px;
font-size: .75rem;
font-weight: 700;
}
.badge--success { background: var(--success); }
.badge--warning { background: var(--warning); color: var(--secondary); }
.badge--muted { background: var(--border-color); color: var(--body-fg); }
/* "Zapnout Windows oznámení" - jen zvoneček vedle badge počtu v nadpisu
"Aktivní události" (core/dashboard/home.html, Michal 2026-09-15 - "můžeš
nechat zobrazen jen zvoneček... ušetříme tím řádek místa"), dřív
samostatné tlačítko s textem na vlastním řádku. SVG (dashboard/_icons/bell.html,
stejný vzor jako .row-action-icon), ne emoji - PŮVODNĚ emoji s opacity/
grayscale ("Michal, 2026-09-15 - udělej jednotnou barvu, ten přechod do
ztracena je moc jemný"), `currentColor` na SVG jde obarvit ostře přímo,
bez rozostřovacích triků. Netlačené = plná (ne vybledlá) `--muted-fg`
"klikni na mě", zapnuté (`--enabled` zapíná JS v dashboard/base.html) =
plná `--primary`, ať je stav vidět i bez najetí myší. */
.push-bell-btn {
display: inline-flex;
vertical-align: middle;
margin-left: 6px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--muted-fg);
}
.push-bell-btn__svg { width: 17px; height: 17px; display: block; }
.push-bell-btn:hover { color: var(--body-fg); }
.push-bell-btn--enabled, .push-bell-btn--enabled:hover { color: var(--primary); cursor: default; }
table.report {
/* ŽÁDNÉ `width: 100%` - reportové tabulky (na rozdíl od table.list,
hlavní grid s přepínatelnými sloupci, ten širokou stránku vědomě
využívá) mívají málo/krátkých sloupců a stretch je jen zbytečně
roztahoval přes celou širokou stránku (feedback od Michala - "obecně
bys asi neměl tabulky roztahovat na celou stránku, ale dávat jim jen
nějaké rozumné rozestupy mezi sloupci a cpát je doleva", "lidi mají
34" monitory, tak potom jen kroutí hlavou zprava doleva zbytečně").
Bez `width` se tabulka sama zúží na šířku obsahu a zůstane zarovnaná
doleva (výchozí chování, žádné auto-centrování). */
border-collapse: collapse;
font-size: .9rem;
}
table.report th, table.report td {
padding: 8px 10px;
border-bottom: 1px solid var(--border-color);
text-align: right;
}
table.report th:first-child, table.report td:first-child { text-align: left; }
table.report thead th {
color: var(--muted-fg);
font-weight: 600;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .02em;
}
table.report tbody tr:last-child td { border-bottom: none; }
table.report tr.total td { font-weight: 700; border-top: 2px solid var(--secondary); }
/* PŮVODNĚ tmavá hlavička jako hlavní gridy (feedback od Michala na
widgetu "Vaše faktury vydané po splatnosti" - "hlavičku opět obarvi
tmavou jak hlavních gridech"). Redesign 2026-09-15 (Michal, porovnání se
uvod-redesign.html screenshotem - "widgety jsou čistší") - `table.list`
samo teď má taky světlou hlavičku (viz komentář tam), takže tenhle
modifikátor sleduje STEJNOU změnu: jemný krémový tón místo tmavého bloku
(mockup `.mini-table thead th`), ať headline řádek pořád vizuálně
odděluje od dat, i když karta/tabulka jsou obě bílé. Jen modifikátor, ne
výchozí `table.report` chování - report tabulky se používají i jinde
(Vyhodnocení realizace apod.), kde tenhle tón nebyl vyžádaný. */
table.report--dark-header thead th { background: #fbfaf7; color: var(--ink-faint); }
/* Hustší varianta (Položky dokladu - feedback od Michala "plýtváme
místem"/"pořád jsou extrémně velké mezery mezi řádky") - STEJNÝ padding
a line-height jako hlavní grid (table.list výš), ne jen o něco menší
než výchozí .report. Zarovnání DOLEVA na VŠECH sloupcích (na rozdíl od
výchozí .report, co má čísla doprava) - stejná konvence jako hlavní
grid (table.list, taky vše doleva), feedback od Michala "sjednoť to" po
tom, co Množství (doprava) a Jednotka (doleva) vedle sebe působily
nekonzistentně. */
table.report--dense { font-size: .82rem; }
table.report--dense th, table.report--dense td { padding: 5px 10px; line-height: 1.3; text-align: left; }
/* `font-size: .82rem` NA TABULCE (ne jen th/td), přesně jako
`table.list { font-size: .82rem }` výš - našlo se, proč to i po
sjednocení paddingu/line-height pořád vypadalo větší: `.report--dense`
bez VLASTNÍHO font-size zdědilo `.9rem` z `table.report` (základní,
ne-hustá varianta), ne .82rem z table.list, jak bylo cílem (feedback od
Michala - "to písmo v položkách je stále větší než písmo na hlavním
gridu", ověřeno přímo v běžící appce přes computed CSS). */
/* Pruhované řádky, stejně jako hlavní grid (table.list - feedback od
Michala "opět to rozlišuj podbarvením jako u hlavního gridu"). */
table.report--dense tbody tr:nth-child(even) { background: var(--body-bg); }
table.report--dense tbody tr:hover { background: var(--sidebar-active-bg); }
.overdue { color: var(--error); font-weight: 600; }
/* Odpočet dní u Termínu expedice na Seznamu realizací (Michal,
2026-09-19 - "líbí se mi jak v návrhu designu se u termínů ukazuje i
dopočet kolik dní zbývá"), mockup RealizaceSeznam.dc.html. `.overdue`
výš (barva + tučně) se kombinuje, když je záporné. */
.grid-days-until { display: block; font-size: .72rem; color: var(--muted-fg); }
.ok { color: var(--success); font-weight: 600; }
.filter-form {
display: flex;
gap: 12px;
align-items: end;
margin-bottom: 20px;
flex-wrap: wrap;
}
.filter-form label {
display: block;
font-size: .8rem;
color: var(--muted-fg);
margin-bottom: 4px;
}
.filter-form input, .filter-form select {
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 6px 8px;
font-size: .9rem;
font-family: inherit;
}
.filter-form button {
background: var(--primary);
border: none;
color: var(--secondary);
font-weight: 600;
border-radius: 6px;
padding: 7px 16px;
cursor: pointer;
}
.filter-form button:hover { background: var(--primary-dark); }
.empty-state {
color: var(--muted-fg);
padding: 20px 0;
}
.link-quiet { color: var(--muted-fg); font-size: .85rem; text-decoration: none; }
.link-quiet:hover { text-decoration: underline; }
/* Button vypadající jako link-quiet - core/_attachments.html "Nastavit
jako úvodní" (uvnitř `.tag-chip__remove-form`, proto se natvrdo neopakuje
display:inline). */
.link-button {
background: none; border: none; padding: 0; cursor: pointer;
color: var(--muted-fg); font-size: .85rem; text-decoration: none;
}
.link-button:hover { text-decoration: underline; }
/* --- Seznamy (core.views.SearchableSortableListMixin) --------------- */
.list-toolbar {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.list-toolbar__search {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.list-toolbar__actions {
/* Akční tlačítka (+ Nová realizace apod.) drží pohromadě jako JEDEN
blok, hned vedle Hledat/Zobrazení (feedback od Michala - úplně
vpravo na širší stránce bez max-width to působilo odhozeně/nelogicky,
"pohromadě" mělo znamenat spolu s hledáním/filtrem, ne daleko od nich). */
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.list-toolbar__search input,
.list-toolbar__search select {
/* Michal, 2026-09-14 - "Zobrazení a kolonka pro hledání teď vypadají,
jakoby tam nepatřily" - jediné prvky v panelu bez stínu/zjemněného
okraje, co dostaly ostatní tlačítka vedle nich (viz .btn--secondary).
Sjednoceno na stejnou konvenci. */
border: 1px solid rgba(33,37,41,.08);
border-radius: var(--radius-md);
padding: 7px 10px;
font-size: .9rem;
background: var(--surface-bg);
box-shadow: var(--shadow-sm);
}
.list-toolbar__search input[name="q"] {
min-width: 220px;
}
.list-toolbar__filter select,
.list-toolbar__filter input {
min-width: 140px;
}
.btn {
display: inline-block;
/* Redesign 2026-09-15 - jemný gradient místo ploché výplně (mockup
.btn-primary), ale VĚDOMĚ beze změny měřítka stínu (var(--shadow-sm)/
--shadow-md beze změny) - Michal, 2026-09-14 (3. kolo): příliš velký
stín dělal opticky větší "půdorys" tlačítka, tenhle poznatek pořád
platí, mění se jen výplň/okraj, ne stín. */
background: linear-gradient(180deg, #edaa54, var(--primary-dark));
border: 1px solid var(--primary-dark);
color: var(--secondary);
font-weight: 600;
border-radius: 6px;
padding: 7px 16px;
cursor: pointer;
text-decoration: none;
font-size: .9rem;
box-shadow: var(--shadow-sm);
transition: box-shadow .15s, transform .15s, filter .15s;
}
.btn:hover {
filter: brightness(1.05);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* Ikonka PDF (documents/_pdf_icon.html) - klasický "červená stránka"
symbol místo dřívějšího emoji 📄 (Michal). `.btn--pdf` jen přepíná na
flex kvůli zarovnání ikony+textu, `.pdf-icon` řídí velikost - vlastní
barvy má NATVRDO v SVG (červená/bílá), ať vypadá stejně bez ohledu na
světlé/tmavé téma nebo kontext (tlačítko na kartě dokladu i sloupec v
gridu sdílí tutéž ikonku). */
.btn--pdf { display: inline-flex; align-items: center; gap: 6px; }
.pdf-icon { width: 15px; height: auto; flex: 0 0 auto; }
a.pdf-link { display: inline-flex; }
a.pdf-link .pdf-icon { width: 20px; }
.btn--secondary {
background: var(--surface-bg);
/* Michal, 2026-09-14: bílá tlačítka opticky vystupovala VÍC než
oranžová hlavní CTA - tvrdý šedý okraj (`var(--border-color)`,
plná neprůhledná barva) kolem BÍLÉHO tlačítka na SVĚTLE ŠEDÉM
pozadí dělal ostřejší "vyříznutý" tvar než teplý stín pod oranžovým
tlačítkem, i když měla obě STEJNÝ stín. Stejné zjemnění okraje jako
.card/.tile/.stat-card výš - stín (var(--shadow-sm), zdědí se z
.btn) teď nese vizuální váhu sám, oranžové CTA díky svému barevnému
stínu (viz .btn výš) zůstává jasně "nejvíc vepředu". */
border: 1px solid rgba(33,37,41,.08);
color: var(--body-fg);
}
.btn--secondary:hover { border-color: var(--primary); background: var(--body-bg); }
/* Zvýrazněná akce, co na něco upozorňuje (feedback od Michala + starý IS
screenshot - "Z výzvy / DDPP" tlačítko je červené, když má zákazník
nevyúčtovanou zálohu/DDPP čekající na odečet, jinak obyčejné). */
.btn--danger { background: var(--error); color: #fff; }
.btn--danger:hover { background: #c22836; }
table.list {
width: 100%;
/* `separate` + `border-spacing: 0` MÍSTO `collapse` (bývalo) -
`border-radius` na jednotlivých buňkách (viz níž) se v "collapsing
border modelu" podle CSS specifikace VŽDY počítá jako 0 (prohlížeče
ho tiše ignorují), takže by zaoblení rohů jinak vůbec nefungovalo.
`border-spacing: 0` drží buňky vizuálně slepené stejně jako předtím -
tabulka používá jen `border-bottom` na buňkách (ne plné ohraničení
z každé strany), takže se dřívější vzhled tímhle přepnutím nemění. */
border-collapse: separate;
border-spacing: 0;
background: var(--surface-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
font-size: .82rem;
}
/* Zaoblené rohy BEZ `overflow: hidden` na celé tabulce (mělo to tam
bývalo, ořízlo to ale i cokoliv, co z tabulky vizuálně přečnívá -
Michalův bugreport 2026-09-14: hover menu bubliny Události/Komentáře u
spodních řádků "nejde vidět", protože ho `overflow: hidden` usekl). Roh
se zaobluje přímo na rohových buňkách - vizuálně stejný výsledek, jen
nic neklipuje. */
table.list thead tr:first-child th:first-child { border-top-left-radius: var(--radius-md); }
table.list thead tr:first-child th:last-child { border-top-right-radius: var(--radius-md); }
table.list tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-md); }
table.list tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-md); }
/* Michal, 2026-09-18 - "ta lemovací linka nectí to zaoblení" / "to bílé
pozadí toho spodního řádku překrývá ten zaoblený roh a leze jakoby ven":
zebra pruhování (`tr:nth-child(even)` níž) i zvýraznění řádku barví CELÝ
`
`, ne jednotlivé buňky - na poslední řádce tak ten čtvercový podklad
"prosvítal" skrz zaoblenou buňku (border-radius zaobluje jen VLASTNÍ
podklad buňky, ne to, co skrz její průhledné pozadí prosvítá zezadu).
PRVNÍ pokus (`background-color: inherit`) nestačil - liché řádky (bez
zebry) mají `
` taky průhledný, takže se "zdědila" jen průhlednost a
skrz ni bylo dál vidět hranaté bílé pozadí SAMOTNÉ `
` (ta žádné
zaoblení nemá, `border-radius: 0`, viz `.preparer-panel table.list`).
Řešení - EXPLICITNÍ barva na buňce (ne zděděná): výchozí `--surface-bg`
(stejná bílá jako `table.list` samo, takže liché řádky vypadají stejně
jako dřív), přebitá `--body-bg` jen když je poslední řádek zároveň sudý
(zebra). Nenápadné na tabulce samotné (nic kontrastního hned vedle), ale
zjevné na `.preparer-panel`, kde tabulka sedí uvnitř vlastního
orámovaného rohu. */
table.list tbody tr:last-child td { background-color: var(--surface-bg); }
table.list tbody tr:last-child:nth-child(even) td { background-color: var(--body-bg); }
table.list th, table.list td {
/* PŮVODNĚ 4px (feedback od Michala - starý IS ukázal na monitor ~18
řádků, "u starého se mi tam vleze všechno, u nového ne"). Redesign
2026-09-15 - po vyzkoušení vyššího řádkování na Přípravě výroby
(`.list--roomy`, 10px) Michal usoudil, že s tím tehdejším 4px "to
trochu přehnal" - kompromis 7px jako NOVÝ výchozí pro všechny hlavní
gridy (o něco vzdušnější, pořád ne tak vysoké jako `.list--roomy`). */
padding: 7px 8px;
text-align: left;
border-bottom: 1px solid var(--border-color);
line-height: 1.3;
}
/* Kompaktní tlačítko PRO ŘÁDKOVOU AKCI V GRIDU (např. "Rozpoložkovat")
- `.btn`/`.btn--secondary` samotné mají padding/font-size laděné na
samostatná tlačítka nad tabulkou (7px 16px, .9rem), v úzké buňce
gridu to zbytečně nafukuje šířku sloupce. */
.btn--row { padding: 2px 8px; font-size: .78rem; }
/* DEFAULT pro VŠECHNY hlavní gridy: jeden řádek = jeden text řádek, ne
víc (Michalův bugreport na gridu Banky - "řádky jsou opět hodně vysoké,
používej stejnou výšku jako třeba v realizacích... to si někde ulož jako
default"). Dlouhý text (jméno protistrany, poznámka...) sloupec radši
rozšíří (`table.list` nemá `overflow-x` wrapper, viz komentář u
list_table výš v šablonách) než aby se zalomil na 2 řádky a nafoukl
výšku CELÉHO řádku - stejná filozofie jako `.price-cell div` níž, teď
jen jako univerzální výchozí chování místo řešení případ od případu.
Vlastní vícořádkové komponenty (`.price-cell` apod.) jsou `flex`
kontejnery UVNITŘ buňky, tímhle nedotčené - `white-space` se týká jen
textového obsahu, ne flex stackování potomků.
PLATÍ I PRO `th` (ne jen `td`) - dvouslovné záhlaví jako "Datum platby"
se v užším sloupci lámalo na 2 řádky, což nafouklo výšku CELÉHO
záhlaví (Michalův opakovaný bugreport na Bance - vypadalo to jako
"zase velký padding", i když šlo o zalomený text, ne o padding). */
table.list th, table.list td { white-space: nowrap; }
table.list thead th {
/* PŮVODNĚ tmavá (stejná barva jako boční panel) - feedback od
Michala 2026-09-14, "hlavička... má stejnou barvu jak pozadí a
zaniká", `--body-bg` tehdy bylo skoro nerozeznatelné od `--surface-bg`
karty. Redesign 2026-09-15 (Michal, porovnání se
priprava-vyroba-redesign.html screenshotem - "nový design nemá tu
hlavičku hlavní tabulky černou") - `table.list` samo o sobě je teď
vlastní "karta" (`background: var(--surface-bg)` výš) na teplém
krémovém `--body-bg`, takže i světlá hlavička s jen spodní linkou
zůstává jasně čitelná, původní problém řeší kontrast stránka/karta,
ne tmavá výplň hlavičky. */
background: var(--surface-bg);
color: var(--ink-faint);
font-weight: 700;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .05em;
border-bottom: 1px solid var(--border-color);
}
/* Střídání barvy řádků (feedback od Michala - přehlednější čtení) +
zvýraznění řádku po kliknutí, ať je vidět, se kterým se pracuje - JS
přepínač viz dashboard/base.html (klik kamkoliv do řádku), `.is-selected`
zůstává silně zvýrazněný (--sidebar-active-bg).
PŮVODNĚ (Michal, 2026-09-14) prostý HOVER bez kliknutí žádné vlastní
podbarvení řádku neměl ("trochu tahá za oko ten hover efekt... radši jen
dobarvit název") - hover signalizoval jen link (`tbody a:hover` níž).
Redesign 2026-09-15 (Michal - "dej to klidně přes celou appku", po
vyzkoušení na Přípravě výroby) tohle vědomě obrátil zpět na podbarvení
CELÉHO řádku, napříč všemi hlavními gridy - `:not(.list-group-row)`, ať
se netýká seskupovacích řádků (Přípravář: Jméno apod.), ty žádný
"pracovní" obsah nemají. */
table.list tbody tr:nth-child(even) { background: var(--body-bg); }
table.list tbody tr:not(.list-group-row):hover { background: #fbf9f4; }
table.list tbody tr.is-selected,
table.list tbody tr.is-selected:hover { background: var(--sidebar-active-bg); }
table.list tbody tr:last-child td { border-bottom: none; }
/* Poslední řádek má od výš EXPLICITNÍ barvu přímo na buňce (kvůli
zaoblení rohu, viz komentář nahoře) - dětský `
` podklad by jinak
napořád zakrýval hover/výběr `
` (rodičovské pozadí je vidět jen tam,
kde ho potomek nepřekryje vlastním, bez ohledu na specificitu). Tenhle
override musí mít vyšší specificitu než ten základní `tr:last-child td`
pravidlo výš, aby hover/výběr na posledním řádku pořád fungoval. */
table.list tbody tr:not(.list-group-row):last-child:hover td { background-color: #fbf9f4; }
table.list tbody tr.is-selected:last-child td,
table.list tbody tr.is-selected:last-child:hover td { background-color: var(--sidebar-active-bg); }
/* Řádkové seskupení podle přípraváře (inquiries/preparer_grid.html -
"Příprava výroby", Michal 2026-09-13: replikace seskupení ze starého
MS Listu "Přehled zakázek", každá skupina má nadpis "Přípravář: Jméno (N)").
`:nth-child(even)` výš by na téhle řádce vypadalo nekonzistentně (jednou
světlá/tmavá podle pozice v tabulce, ne podle obsahu) - vlastní pevná
barva místo zdědění zebry. */
/* Redesign 2026-09-15 - dřívější tmavý blok (stejná barva jako sidebar)
nahrazen jemným světlým podkladem podle mockupu (`.group-row`) - lépe
ladí s teplým krémovým pozadím appky, dost odlišené od běžných řádků i
bez tmavého kontrastu. */
table.list tr.list-group-row td {
background: #fbfaf7;
color: var(--body-fg);
font-weight: 700;
padding: 8px 14px;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
/* Inline "Dnešní čas" vstup přímo v buňce gridu (inquiries/preparer_grid.html,
inquiries/inquiry_list.html) - klik, napsat přidané hodiny, Enter (Michal,
2026-09-13). `.inline-hours-form` bez marginu, ať nerozbíjí výšku řádku
table.list, input úzký (jen pár znaků, "4,5" typicky stačí). */
.inline-hours-form { margin: 0; }
.inline-hours-input {
width: 56px;
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 3px 5px;
font-size: .82rem;
}
/* Stejný princip pro Stav/Zaměření -