/******************************************************************************/
/* Modernizace vzhledu systému.                                               */
/* Načítá se JEDINÝM řádkem v ini/ini_css.php (za ostatními styly).           */
/* Návrat k původnímu vzhledu = smazat onen řádek (tento soubor se nenačte).  */
/* Nic v main.css a spol. se neměnilo — tato vrstva pouze přepisuje.          */
/******************************************************************************/

/* Společný odstín „chrome" — záhlaví a levý panel menu. Držet je stejné je
   podstata harmonie: tvoří jeden souvislý tmavý rám kolem světlého obsahu. */
:root { --chrome-bg: #23272e; --chrome-border: rgba(255,255,255,.08); --head-line: rgba(110,180,63,.5); }

body { background: #f3f4f6; }

/******************************************************************************/
/* TYPOGRAFIE — Inter (text) + Space Grotesk (nadpisy a čísla)                */
/* Fonty načítá označený <link> v ini/ini_css.php. Open Sans zůstává načtený  */
/* v ini_css.php (aby po smazání modern.css platil původní vzhled), ale v     */
/* těchto stacích SCHVÁLNĚ není: prohlížeč ho jinak stahuje jako mezikrok     */
/* fallbacku, přestože ho nic nevykresluje. Jako záloha nemá smysl — je také  */
/* z Google Fonts, takže při jejich výpadku by selhal stejně.                 */
/*                                                                            */
/* Základní font systému je v css/tinymce.css (`body { font-family: open      */
/* sans, tahoma }`), další deklarace jsou v main.css u polí formulářů,        */
/* jQuery UI widgetů a tooltipu — všechny se přepisují níže.                  */
/* Obsah editoru TinyMCE se ZÁMĚRNĚ nemění: css/tinymce.css slouží zároveň    */
/* jako content_css editoru a jeho text jde do e-mailů a PDF, kde tyto fonty  */
/* nejsou k dispozici.                                                        */
/******************************************************************************/

body, input, textarea, select, button,
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button,
.ui-tooltip { font-family: 'Inter', tahoma, sans-serif; }

h1, h2, h3, .block h2, #account-name, .dashboard-tile-count { font-family: 'Space Grotesk', 'Inter', tahoma, sans-serif; }

/* Inter má proporcionální číslice — ve sloupcích s čísly a v stránkování se
   tím rozjíždí zarovnání, proto tabulkové číslice */
.table-list th, .table-list td, .table-border td, .table-border-full td,
.dashboard-tile-count, .paging a, .account-time { font-variant-numeric: tabular-nums; }

/******************************************************************************/
/* záhlaví                                                                    */
/* main.css dlaždicuje texturu bg_head.png (51×185 px, ~#2c2c2d) a odděluje    */
/* obsah 5px zeleným pruhem. Textura se s plochým skinem tluče a v tmavém     */
/* motivu vycházela SVĚTLEJŠÍ než pozadí stránky (#2c2c2d vs #16181c), takže  */
/* záhlaví působilo obráceně. Nahrazeno plochou barvou z tokenu + tenčí       */
/* akcentovou linkou a měkkým stínem. Soubor bg_head.png zůstává v repu.      */
/******************************************************************************/

/* Linka pod záhlavím: 1px v akcentu s nižším krytím místo plného 3px pruhu
   (barvu drží --head-line, aby si ji každý motiv nastavil sám). */
#wrap-head { background: var(--chrome-bg); border-bottom: 1px solid var(--head-line); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
/* Jednotné odsazení shora i zdola. #wrap-account je plovoucí (float: right),
   takže do výšky #head nepočítá a fotka profilu přetékala pod linku záhlaví —
   proto se float uzavírá clearfixem. */
#head { padding-bottom: 15px; }
#head::after { clear: both; content: ""; display: block; }

/* Místo loga textový nápis. V šabloně už existuje (`#zakazkovy-system`
   v tpl/head.php), main.css ho jen skrývá — stačí prohodit viditelnost,
   produkční šablona se tedy nemění. Pozor: skrytím #logo mizí i varianta
   loga pro Propag (logo_propag.png). */
#logo { display: none; }
#zakazkovy-system { color: #fff; display: inline-block; font-family: 'Space Grotesk', 'Inter', tahoma, sans-serif; font-size: 22px; font-weight: 600; left: auto; letter-spacing: -.01em; margin: 14px 0; position: static; text-transform: none; top: auto; vertical-align: middle; }

/* profilová fotka: sladit se zaoblením zbytku skinu, tvrdý šedý rámeček pryč */
#profile-photo { background: rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; }
#profile-photo img { border: 0; border-radius: 10px; }

/* Rychlé volby v hlavičce („+ Nová nabídka", …) — vykresluje tpl/fast_menu.php.
   Nahrazují původní svislý panel #fast-menu u pravého okraje okna. */
#head-actions { display: inline-block; list-style: none; margin: 0 0 0 24px; padding: 0; vertical-align: middle; }
#head-actions li { display: inline-block; margin: 2px 2px 2px 0; }
#head-actions li a { border-radius: 8px; color: rgba(255,255,255,.82) !important; display: inline-block; font-size: 13px; padding: 6px 11px; text-decoration: none; transition: background .15s ease; white-space: nowrap; }
#head-actions li a:hover { background: rgba(255,255,255,.10); color: #fff !important; }
.head-actions-plus { font-size: 16px; font-weight: 600; margin-right: 3px; }

/* v úzké hlavičce by se volby tlačily s blokem účtu; pod 650 px se skryjí
   (na mobilu je hlavička i tak stísněná a naviguje se hamburgerem) */
@media only screen and (max-width: 650px) {
#head-actions { display: none; }
}

/* jméno účtu a doplňkové údaje — zjemnit hierarchii */
#account-name { font-weight: 600; letter-spacing: -.01em; }
#account-info { color: rgba(255,255,255,.72); }
#account-info a { color: #fff; }
/* Ikona běžících stopek v záhlaví (account_info.php). Barvu měla dřív inline
   (#6eb43f), takže ji nešlo přebít z CSS — inline styl byl odstraněn a barva
   je tady, aby ji mohly motivy řídit. Bez tohoto pravidla by ikonu přebilo
   #account-info a a byla by bílá. */
#account-info .fa-stopwatch { color: var(--highlight); }

h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-bottom: .75em; }

/* bloky */
.block, .block-for-bookmark { border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 20px; }
.block-for-bookmark { border-top-left-radius: 0; }
.block h2 { align-items: center; display: flex; flex-wrap: wrap; font-size: 17px; font-weight: 600; gap: 8px; letter-spacing: -.01em; margin-bottom: .75em; }
.block h2 .fa { color: var(--highlight); font-size: 16px; }
.block h2 small { color: #9ca3af; font-weight: 400; }

/* přehledové dlaždice (dashboard) — pravidla jsou záměrně kompletní (vč.
   pozadí, flexu a svislého řazení), aby dlaždice nezávisely na stylech
   z konce main.css, který mívají prohlížeče ve starší cache */
.dashboard-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1em; }
.dashboard-tile { background: var(--tile-bg, #fff); box-sizing: border-box; border: 1px solid var(--tile-border, #e5e7eb); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); color: inherit; display: block; flex: 1 1 190px; padding: 18px; text-align: left; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.dashboard-tile:hover { box-shadow: 0 8px 20px rgba(0,0,0,.1); transform: translateY(-2px); }

/* horní řádek dlaždice: ikona vlevo, trend vpravo (rozvržení dle předloh) */
.dashboard-tile-head { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 14px; }
.dashboard-tile-icon { background: var(--tile-chip, rgba(110,180,63,.12)); border-radius: 12px; color: var(--tile-ink, var(--highlight-dark)); display: inline-block; flex: 0 0 auto; font-size: 16px; height: 40px; line-height: 40px; text-align: center; width: 40px; }
.dashboard-tile-trend { border-radius: 999px; font-size: 11px; font-weight: 600; padding: 4px 9px; white-space: nowrap; }
.dashboard-tile-trend.up   { background: #dcfce7; color: #15803d; }
.dashboard-tile-trend.down { background: #fee2e2; color: #b91c1c; }
.dashboard-tile-trend.flat { background: #eef0f3; color: #6b7280; }

.dashboard-tile-count { display: block; font-size: 2.2em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.dashboard-tile-label { color: #6b7280; display: block; font-size: .9em; margin-top: .35em; }

/* Barevné varianty dlaždic — bez odlišení se v pěti stejných kartách hůř
   orientuje. Paleta odpovídá pastelovým lepíkům z návrhu; dvojice „moje /
   všechny" drží příbuzný tón. Barvu přiřazuje mod/statistic/user.php. */
.dashboard-tile-amber  { --tile-bg: #fff8f0; --tile-border: #fbe3c7; --tile-chip: #fde4c4; --tile-ink: #b45309; }
.dashboard-tile-yellow { --tile-bg: #fefcf0; --tile-border: #f7edbf; --tile-chip: #fbeeb4; --tile-ink: #a16207; }
.dashboard-tile-blue   { --tile-bg: #f2f7ff; --tile-border: #d5e4fa; --tile-chip: #cfe0fb; --tile-ink: #1d4ed8; }
.dashboard-tile-pink   { --tile-bg: #fdf4f8; --tile-border: #f8dbe8; --tile-chip: #fad4e6; --tile-ink: #be185d; }
.dashboard-tile-green  { --tile-bg: #f2fbf4; --tile-border: #cfeed8; --tile-chip: #c9edd4; --tile-ink: #15803d; }

/* Kalendář — grafické znázornění záznamů na časové ose (blok #calendar-day).
   Pruhy se pozicují v procentech šířky stopy, rozsah osy počítá PHP z dat. */
.cal-timeline { margin-bottom: 1.25em; }
.cal-timeline-scale { height: 16px; margin-left: 62px; position: relative; }
.cal-timeline-hour { color: #9ca3af; font-size: 10px; position: absolute; transform: translateX(-50%); }
.cal-timeline-day { align-items: center; display: flex; gap: 10px; margin-bottom: 6px; }
.cal-timeline-label { color: #6b7280; flex: 0 0 52px; font-size: 12px; text-align: right; }
/* výšku stopy i svislou pozici pruhů počítá PHP (rozvržení do lanes, aby se
   souběžné záznamy nepřekrývaly) a posílá je inline — proto tu není `height`
   ani `top`/`bottom`; hodnoty musí sedět s $i_lane_h / $i_lane_gap v modulu */
.cal-timeline-track { background: #f3f4f6; border-radius: 8px; flex: 1 1 auto; min-height: 30px; position: relative; }
.cal-timeline-empty { color: #9ca3af; font-size: 11px; left: 10px; line-height: 30px; position: absolute; }
.cal-event { border-radius: 6px; font-size: 11px; line-height: 24px; overflow: hidden; padding: 0 6px; position: absolute; white-space: nowrap; }
.cal-event span { display: block; overflow: hidden; text-overflow: ellipsis; }
.cal-timeline-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0 62px; }
.cal-legend-item { align-items: center; color: #6b7280; display: inline-flex; font-size: 11px; gap: 5px; }
.cal-legend-item i { border-radius: 4px; display: inline-block; height: 10px; width: 14px; }

/* Barvy typů záznamu: 0 zakázka, 1 lékař a jiné, 2 dovolená, 3 volná kapacita.
   Hodnoty jsou převzaté z klasického kalendáře (css/main.css ř. 599–603), aby
   dashboard i stránka kalendar/ vypadaly stejně. Samotné pruhy a jména dostávají
   barvu inline z PHP (uživatel může mít vlastní us_ca_background) — tyhle třídy
   drží hlavně čtverečky v legendě. U dovolené je uvedená barva schváleného
   záznamu; neschválená se kreslí šedě jako ostatní „holiday" typy.
   Typ 3 (volná kapacita) je tu jen pro úplnost — v legendě se nevypisuje
   (viz mod/statistic/user.php) a v datech se nevyskytuje. Šedá je záměrně
   shodná s typem 1, protože klasický kalendář vybarvuje šedě všechno
   od typu 1 výš (pravidlo .active.holiday). */
.cal-event-t0 { background: rgba(110,180,63,1); color: #111; }
.cal-event-t1 { background: #ccc; color: #111; }
.cal-event-t2 { background: #444; color: #fff; }
.cal-event-t3 { background: #ccc; color: #111; }

/* státní svátek na ose dlaždice — stopa je jemně podbarvená a u pravého okraje
   je název svátku. Pruhy končí nejpozději v 17:00, takže se u běžné pracovní
   doby nepřekrývají; kdyby přece, popisek nechytá myš a text pruhu je nad ním. */
.cal-label-holiday { color: #6b7280; }
.cal-track-holiday { background: #edeae1; }   /* teplá šeď, stejně jako svátek v tabulce kalendáře */
.cal-holiday-flag { color: #6b7280; font-size: 10px; line-height: 30px; max-width: 45%; overflow: hidden; pointer-events: none; position: absolute; right: 8px; text-overflow: ellipsis; top: 0; white-space: nowrap; }

/* jméno uživatele ve výpisu pod osou — stejná barva jako pruh na ose */
.cal-who { border-radius: 4px; display: inline-block; padding: 1px 6px; }

/******************************************************************************/
/* STRÁNKA KALENDÁŘ — modernizace tabulky .calendar (main.css ř. 569–620)      */
/*                                                                            */
/* main.css tuhle tabulku kreslí ještě původním jazykem: dvojité šedé linky,   */
/* plný šedý pruh s názvem dne, černá tečkovaná linka „teď". Níže se přebarví  */
/* do stejného jazyka jako .table-list a dlaždice — vlasové linky, potlačená   */
/* stupnice, akcentní zelená. Struktura ani rozměry buněk se nemění, aby       */
/* seděla šířka počítaná v mod/calendar/list.php a pozice linky „teď“.         */
/* Po smazání modern.css platí původní vzhled, nic v main.css se nemění.       */
/******************************************************************************/

/* mřížka — místo dvojitých a tmavých linek vlasové jako u .table-list */
.calendar th, .calendar td { border-bottom: 1px solid #f1f2f4; }
.calendar th { background: #fff; border-bottom: 2px solid #e5e7eb; }
.calendar th:nth-child(even) { border-bottom: 2px solid #e5e7eb; }
.calendar th:first-child, .calendar td.name { border-right: 1px solid #d8dbe0; }
/* konec hodiny — bez svislé linky (main.css ji má jako 1px solid #dedede).
   Pevná linka byla na bílé sotva znát (kontrast 1,16:1), na šedi víkendu
   splývala úplně (1:1) a na svátku skoro (1,04:1) — zato přes zelený pruh
   záznamu byla nejvýraznější (2,19:1) a krájela souvislý blok na hodinové
   díly. Byla tedy vidět hlavně tam, kde překážela. Orientaci v čase nese
   stupnice v hlavičce; svislá vodítka by musela být znatelně silnější, aby
   k něčemu byla, a to je v téhle husté mřížce moc rušivé. */
.calendar td.edge-hour { border-right: 0; }
.calendar tr.weekend.sa { border-top: 1px solid #e5e7eb; }
.calendar tr.weekend.su { border-bottom: 1px solid #e5e7eb; }

/* hodinová stupnice — potlačená, tabulkové číslice kvůli zarovnání */
.calendar th.hour { color: #6b7280; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Ukotvení hlavičky s hodinami při rolování.
   main.css dává .wrap-calendar `overflow: hidden` — ořezává tím linku „teď",
   které js/calendar_list.js nastavuje výšku celé tabulky. `hidden` ale z obalu
   dělá scrollport a sticky by se pak vázalo na něj, ne na stránku, takže by
   hlavička zůstala stát na místě. `clip` ořezává stejně, ale scrollport
   neustavuje, a ukotvení se tak váže na okno.
   Ověřený řetězec předků (html › body#body › #wrap-content › #content-float ›
   #content › #text › #load-calendar › .wrap-block › .block › .wrap-calendar)
   nemá žádný další overflow; `overflow-y: scroll` na body se propaguje na
   viewport, takže samotné body scrollport není.
   Tabulka má třídu table-floatThead-PAUSE, kterou selektor .table-floatThead
   v js/func.js schválně nechytá — s klonovanou hlavičkou si tedy sticky
   nekoliduje. */
.wrap-calendar { overflow: clip; }
.calendar thead th { position: sticky; top: 0; z-index: 3; }

/* levý sloupec: den, datum, jméno */
.calendar td.text { background: #f9fafb; }
.calendar td.day, .calendar td.date { color: #6b7280; font-size: 11px; font-variant-numeric: tabular-nums; }
.calendar td.name { font-size: 12px; }
.calendar td.name.name-active { color: var(--highlight-dark); }

/* oddělovač dne — z plného šedého pruhu jen jemný popisek */
.calendar tr.separator-day td { background: #fff; color: #9ca3af; font-size: 10px; font-weight: 600; letter-spacing: .08em; padding: 3px 0; text-transform: uppercase; }
.calendar tr.separator-weekend td { font-size: 6px; }

/* najetí myší na řádek. Víkend a svátek se vynechávají schválně — jejich
   podbarvení je informace, ne dekorace, a hover (0,5,3) by ho přebil. */
.calendar tbody tr:not(.weekend):not(.public-holiday):hover td.text { background: #f4f8f0; }

/* pruhy záznamů — zaoblené konce.
   Levý konec se pozná podle .contract-title: mod/calendar/list.php ho vypisuje
   jen do první buňky záznamu. Pravý konec má třídu .edge. Prohlížeč :has()
   buď umí, nebo celé pravidlo ignoruje a konce zůstanou hranaté jako dosud. */
.calendar td.active:has(.contract-title) { border-bottom-left-radius: 7px; border-top-left-radius: 7px; }
.calendar td.active.edge { border-bottom-right-radius: 7px; border-top-right-radius: 7px; }
.calendar .contract-title { font-size: 11px; font-weight: 500; }

/* linka aktuálního času — černá jako v původním vzhledu, jen ztlumená, aby
   nekonkurovala pruhům záznamů */
.calendar .now { border-right: 1px dotted rgba(17,24,39,.5); }
.calendar .now-pointer { background: rgba(17,24,39,.6); }


/* Okno „Filtrovat podle zákazníka".
   Colorbox si obsah změří ve chvíli otevření a rozměry okna pak už nemění.
   Dokud byl popisek a pole na jednom řádku, stačilo, aby se text o kousek
   rozšířil — třeba když doběhne webové písmo z modern.css — a obsah se přestal
   vejít: pole se zalomilo na další řádek a v okně naskočil posuvník.
   Řešení je nezávislé na měření textu: pevná šířka a každý prvek na svém
   řádku, takže šířka ani výška na metrikách písma nestojí.
   Pole je navíc jQuery UI combobox (js/autocomplete.js), který původní <select>
   nahradí vlastním <input> — proto se šířka nastavuje oběma. */
.popup-customer-filter { box-sizing: border-box; width: 320px; }
.popup-customer-filter label { display: block; margin-bottom: 4px; }
.popup-customer-filter select,
.popup-customer-filter .custom-combobox { display: block; width: 100%; }
.popup-customer-filter .custom-combobox input { box-sizing: border-box; width: 100%; }
.popup-customer-filter .popup-actions { margin-top: 10px; }

/* Skrolovací šipka „dolů" se stěhuje pod šipku „nahoru" (zadal uživatel
   2026-09-23). Pravý dolní roh tím celý připadne sloupci ikon chatu a obě
   šipky drží pohromadě jako dvojice „skoč na začátek / na konec".
   #scroll-top má v main.css `top: 30px` a je 30 px vysoká, tedy 30 + 30 + 6.
   Vodorovnou polohu obou šipek řídí js/scroll_top.js (right: 14 px po
   odrolování, jinak -45 px mimo obraz), do toho se tu nesahá. */
#scroll-down { top: 66px; bottom: auto; }

/* dashboard: bloky ve dvou sloupcích (obal .dashboard-grid v mod/statistic/user.php).
   minmax(0,1fr) brání roztažení sloupce širokým obsahem, align-items: stretch dá
   blokům v jednom řádku shodnou výšku (K expedici × Poslední aktivita),
   overflow-x dá širokým tabulkám vlastní posuvník. */
.dashboard-grid { align-items: stretch; display: grid; gap: 1em; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-grid > .block { margin-bottom: 0; overflow-x: auto; }
.dashboard-grid > .block.dashboard-grid-full,
.dashboard-grid > .dashboard-grid-full-row { grid-column: 1 / -1; } /* přes celou šířku mřížky */
.dashboard-grid > .dashboard-tiles { margin-bottom: 0; }

/* pod 1800 px jeden sloupec — dva bloky vedle sebe mají smysl až na širokých monitorech */
@media only screen and (max-width: 1800px) {
.dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}

/* filtrovací dlaždice (dopravci, roky, oddělení) — též kompletní, viz výše */
.dispatch-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1em; }
.dispatch-filter a { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 999px; color: #374151; padding: 6px 14px; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.dispatch-filter a:hover { border-color: var(--highlight); }
.dispatch-filter a.active { background: var(--highlight); border-color: var(--highlight-dark); color: #fff; font-weight: 600; }

/* tabulky výpisů — buňky musí mít vlastní bílé pozadí (v modulech leží tabulky
   přímo na šedém pozadí stránky, nikoli v bílém .block jako na dashboardu) */
.table-list th { background: #fff; border-bottom: 2px solid #e5e7eb; color: #4b5563; font-size: 11px; letter-spacing: .05em; padding: 9px 8px; text-transform: uppercase; }
.table-list td { background: #fff; border-bottom: 1px solid #e9ecef; padding: 10px 8px; }
.table-list tr:hover td { background: #f4f8f0; }
/* řaditelné hlavičky tabulek expedice (odkaz uvnitř th) */
.table-list th .dispatch-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.table-list th .dispatch-sort:hover { color: var(--highlight-dark); }
.table-list th .dispatch-sort.active { color: var(--highlight-dark); }
.dispatch-sort-dir { font-size: 10px; }

.table-list td a { color: #111827; }
.table-list td a:hover { color: var(--highlight-dark); }

/* stavové řádky výpisů — barvy z main.css musí zůstat čitelné i při hoveru
   (tento soubor se načítá později, jinak by je přebil obecný hover výše) */
.table-list tr.active td, .table-list tr.active:hover td { background: rgba(110, 180, 63, 0.25); }
.table-list tr.active-researcher td, .table-list tr.active-researcher:hover td { background: #e8f5ec; }
.table-list tr.active-researcher-printer td, .table-list tr.active-researcher-printer:hover td { background: #b0e0e6; }
.table-list tr.key td, .table-list th.key, .table-list td.key { background: #eee; }
.table-list td.empty, .table-list tr:hover td.empty { background: none; }

/* Tabulky v blocích dashboardu bez čárového oddělení řádků — bloky jsou samy
   o sobě ohraničené karty, linky v nich působily rušivě. Řádky odlišuje hover.
   Zůstává jen linka pod hlavičkou (odděluje záhlaví, ne záznamy).
   Platí jen uvnitř .dashboard-grid — ve výpisech modulů linky zůstávají.
   Pravidla motivů níže mění u buněk jen `border-bottom-color`, takže nulovou
   šířku nastavenou tady nevrátí zpět. */
.dashboard-grid .table-list td { border-bottom: 0; }

/* Kompaktnější řádky — jen NA DASHBOARDU. Bloky jsou malé karty a vzdušnost
   z modulových výpisů tu ubírá počet záznamů, které se vejdou bez rolování.
   Scopováno na .dashboard-grid, takže výpisy v modulech (zakázky, faktury,
   sklad…) zůstávají beze změny.
   Nadpisy skupin v „Mých termínech" (.dl-section) mají vlastní odsazení —
   jejich pravidlo je v souboru níž a při shodné specificitě vyhrává. */
.dashboard-grid .table-list th { padding-bottom: 4px; padding-top: 4px; }
.dashboard-grid .table-list td { line-height: 1.3; padding-bottom: 4px; padding-top: 4px; }

/* štítky — display doplněn záměrně: v main.css má inline-block jen `.tag`,
   `.tag-black` a `.tag-eco`, takže samostatné `.tag-gray` / `.tag-green` /
   `.tag-orange` se jako <div> roztahovaly přes celou buňku tabulky */
.tag, .tag-black, .tag-eco, .tag-gray, .tag-green, .tag-orange { border-radius: 999px; display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; }
.tag.clear { background: #e5e7eb; color: #1f2937; }
.tag.expiration { color: #fff; }
.tag-green { color: #fff; }

/* stránkování */
.paging { margin-top: 1em; }
.paging a { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; display: inline-block; margin-right: 4px; min-width: 30px; padding: 5px 0; text-align: center; transition: border-color .15s ease; }
.paging a:hover { background: #fff; border-color: var(--highlight); color: #111827; }
.paging a.page-active { background: var(--highlight); border-color: var(--highlight-dark); color: #fff; }

/* formuláře */
input, textarea, select { border: 1px solid #d1d5db; border-radius: 8px; }
input:focus, textarea:focus, select:focus { border-color: var(--highlight); outline: none; }
.fieldset { background: #fafafa; border: 1px solid #e5e7eb; border-radius: 10px; }

/* přepínač sbalení výběru řešitelů ve filtru kalendáře (main.css u
   .fieldset-researcher drží jeho funkční část) */
.filter-toggle { align-items: center; border-radius: 8px; color: #6b7280; display: inline-flex; font-size: 12px; gap: 6px; padding: 4px 10px 4px 2px; transition: color .15s ease; }
/* mezera patří k rozbalenému obsahu, ne k přepínači — po sbalení by jinak
   uvnitř bloku zůstaly 4 px navíc dole */
.filter-toggle-body { margin-top: 4px; }
/* Blok s řešiteli je ve filtru poslední, ale `.wrap-block .block:last-child`
   z main.css ř. 504 na něj nesedí: za ním jsou ještě <script> a skryté
   <input name="url_filter">, takže mu zůstával margin-bottom: 1em navíc
   k patnáctce, kterou má .wrap-block jako padding. Zdola tím vznikala větší
   mezera než shora nad prvním blokem. */
#filter-researchers { margin-bottom: 0; }
.filter-toggle:hover { color: var(--highlight-dark); }
.filter-toggle .fa { font-size: 10px; }

/* tlačítka
   .button-submit-yellow („Přidat" u položek) do obou řádků patří taky: bez toho
   mělo jiné zaoblení než sousední tlačítka a jeho hover z main.css mění barvu
   z #f9d301 na #f9d200, tedy o 0,005 jasu — okem nepostřehnutelné. Se
   společným pravidlem se chová jako zbytek tlačítek v systému. */
.button, .back, .button-black, .button-gray, .button-green, .button-submit,
.button-submit-yellow { border-radius: 8px; transition: filter .15s ease; }
.button-black:hover, .button-gray:hover, .button-green:hover, .button-submit:hover,
.button-submit-yellow:hover { filter: brightness(1.08); }

/* systémové zprávy */
#msg-ok, .msg-ok, #msg-error, .msg-error { border-radius: 10px; padding: 10px 15px; }

/******************************************************************************/
/* širší obsah — hlavička, obsah i patička využívají celou šířku okna         */
/* s postranním odsazením (přepisuje pevných 1180 px z main.css; pod 1200 px  */
/* platí plynulá šířka 96 % z responsive_design.css beze změny)               */
/******************************************************************************/

@media only screen and (min-width: 1201px) {

#head, #content-float, #foot { padding-left: 24px; padding-right: 24px; width: auto; }

/* Volba uživatele „původní šířka" (zs_user.us_content_width = fixed) vrací
   pevných 1180 px z původního designu. Použit max-width, ne width: s připnutým
   levým panelem (232 px) by pevná šířka na užších monitorech vytlačila obsah
   mimo okno — takto se v těsnu jen zúží. #foot si drží své vodorovné odsazení
   30 px z main.css, #head a #content-float ho původně neměly. */
html.content-fixed #head,
html.content-fixed #content-float,
html.content-fixed #foot { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 1180px; }
html.content-fixed #head,
html.content-fixed #content-float { padding-left: 0; padding-right: 0; }
html.content-fixed #foot { padding-left: 30px; padding-right: 30px; }

/* Abecední štítek ve výpisu zákazníků a dodavatelů (.label z main.css) visí
   41 px vlevo od obsahu, v okraji vedle pevných 1180 px. Při celé šířce je
   okraj jen 24 px, štítek zajel pod levé menu a byl vidět jen napůl; zúžen
   tak, aby se do okraje vešel (2026-10-08). Původní šířka beze změny. */
.label { left: -23px; width: 22px; }
html.content-fixed .label { left: -41px; width: 40px; }

}

/* horní lišta filtru faktur na jednom řádku (2026-10-16): po přidání „všech / výběr / moje“
   se nevešla a vyhledávání spadlo na další řádek. Lišta je flexbox, vyhledávání si vezme
   zbylé místo (150–300 px) a vpravo zůstane; až když nezbude ani 150 px, zalomí se. Do 950 px
   jako dosud na celou šířku (responsive_design.css). Jen faktury (.inv-filter). */
.filter.inv-filter { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.filter.inv-filter > .group { margin: 1px 0; }
/* min-width: 0 — jinak by se skupina nesmrskla pod šířku obsahu: pole má size="22"
   (~170 px) a celá skupina by chtěla ~230 px, takže by se zalomila i při 170 px místa */
.filter.inv-filter > .group.last { flex: 1 1 150px; float: none; margin-left: auto; max-width: 300px; min-width: 0; }
.filter.inv-filter > .group.last .wrap { align-items: center; box-sizing: border-box; display: flex; float: none; min-width: 0; width: 100%; }
.filter.inv-filter > .group.last input[name="search"] { flex: 1 1 0; min-width: 60px; width: 0; }
.filter.inv-filter > .group2 { flex: 0 0 100%; }
@media only screen and (max-width: 950px) {
    .filter.inv-filter > .group.last { flex-basis: 100%; max-width: none; }
}

/* filtry nad výpisem faktur (Zákazník, Schválení, Příznak, Vůz): popisek a výběr drží
   spolu a při užší obrazovce se zalomí jako celek; výběry s rozumnou šířkou (2026-10-15) */
.inv-filter-item { display: inline-block; margin: 3px 0 3px 15px; white-space: nowrap; }
.inv-filter-item select { max-width: 150px; }
/* řádek filtrů (2026-10-15, 2026-10-16): vlevo období (s rychlými volbami na témž řádku)
   a filtry — vedle sebe, když se vejdou, jinak filtry pod obdobím (.inv-filter-left, řídí
   se šířkou obsahu, ne okna); vpravo tlačítka vedle sebe, svisle na střed */
.inv-filter-bar { align-items: center; column-gap: 20px; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; }
.inv-filter-left { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 24px; grid-column: 1; grid-row: 1; }
.inv-filter-period { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.inv-filter-period .wrap-period { display: inline-block; margin: 0 0 0 8px; }
.inv-filter-items { text-align: left; }
.inv-filter-items .inv-filter-item:first-child { margin-left: 0; }
.inv-filter-buttons { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; grid-row: 1; justify-content: flex-end; }
/* úzká obrazovka (telefon): vše pod sebou, tlačítka na konec */
@media only screen and (max-width: 800px) {
    .inv-filter-bar { grid-template-columns: 1fr; }
    .inv-filter-buttons { grid-column: 1; grid-row: 2; justify-content: flex-start; }
}

/* Skok na řádek výpisu (…?id=123#ID123 — po uložení, z e-mailu, z dlaždic): prohlížeč srovná
   řádek k hornímu okraji, kde ho zakryje ukotvená hlavička tabulky (thead.sticky). U faktur je
   hlavička vysoká (svislé nadpisy Odeslání / Upomínka), hledaný řádek tak nebyl vidět. Odsazení
   jen na stránkách s ukotvenou hlavičkou (2026-10-15). */
html:has(thead.sticky) { scroll-padding-top: 150px; }

/* dlaždice „Fakturace“ na dashboardu (2026-10-09): záložky se souhrnem a vlastní období */
.inv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px 0; }
.inv-tab { border: 1px solid #e5e7eb; border-radius: 10px; color: inherit; flex: 1 1 140px; padding: 8px 12px; text-decoration: none; }
.inv-tab small { color: #6b7280; display: block; font-size: 11px; }
.inv-tab b { display: block; font-size: 15px; margin-top: 2px; white-space: nowrap; }
.inv-tab:hover { border-color: var(--highlight); }
.inv-tab.active { background: #f3f9ea; border-color: var(--highlight); }
.inv-period-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 1em; }
.inv-period-row .dispatch-filter, .inv-period-row .inv-period-form { margin-bottom: 0; margin-top: 0; }
.inv-period-form { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
/* souhrn nad tabulkou (počty upomínek, dlužné a stáří dluhu) — odstup od tabulky */
.inv-summary { margin-bottom: 14px; }
.inv-summary p { margin: 0 0 4px 0; }
.inv-period-form input[type="date"] { padding: 3px 6px; }
html.dark .inv-tab { border-color: var(--dark-border); }
html.dark .inv-tab small { color: var(--dark-text-dim); }
html.dark .inv-tab.active { background: rgba(110,180,63,.14); }

/* Štítek přes celou výšku řádku (2026-10-08): ukotvený k buňce, ne k obsahu
   stránky. Jen v prohlížečích s :has() — bez něj by top/bottom vztažené
   k #text roztáhly štítek přes celou stránku, takže tam zůstane původní. */
@supports selector(:has(> *)) {
.table-list td:has(> .label) { position: relative; }
.table-list td > .label { align-items: center; bottom: 0; box-sizing: border-box; display: flex; height: auto; justify-content: center; margin-top: 0; padding-top: 0; top: 0; }
}

/******************************************************************************/
/* sklápěcí levé menu (jen desktop ≥ 1051 px; pod touto hranicí se rovnou     */
/* zobrazí mobilní hamburgerové menu — viz sekce za tímto blokem)             */
/* Sbalený stav = úzká lišta s ikonami, najetí na položku ukáže titulek       */
/* (bublina .menu-tooltip, js/modern.js); rozbalení pouze připnutím           */
/* hamburgerem nahoře (stav drží js/modern.js v localStorage).                */
/******************************************************************************/

@media only screen and (min-width: 1051px) {

body { padding-left: 60px; }

/* Přihlašovací stránka menu vůbec nevykresluje (je uvnitř isLogin() v
   tpl/head.php), rezervované místo vlevo by tam zůstalo prázdné a pozadí
   záhlaví by nezačínalo u levého okraje. Třídu `no-menu` dává tělu
   tpl/head.php.

   Řeší se to jen u záhlaví: záporný levý margin ho přetáhne přes rezervu až
   k okraji okna (pozadí, linka i stín jdou přes celou šířku), stejně velký
   levý padding ale vrátí jeho VNITŘEK zpět. Odsazení těla tak zůstává
   zachované — nápis v záhlaví i přihlašovací formulář stojí tam, kde budou
   po přihlášení, podle stavu menu (sbalené 60 px / připnuté 232 px). */
body.no-menu #wrap-head { margin-left: -60px; padding-left: 60px; }
html.menu-pinned body.no-menu #wrap-head { margin-left: -232px; padding-left: 232px; }

.menu { background: var(--chrome-bg); bottom: 0; box-shadow: 2px 0 8px rgba(0,0,0,.15); display: flex; flex-direction: column; left: 0; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 10px 0; position: fixed; scrollbar-width: none; top: 0; width: 60px; z-index: 1000; }

/* Mnoho položek + malá výška obrazovky = panel se roluje. Ve SBALENÉM stavu
   nesmí mít viditelný scrollbar: 60 px je na ikonu (24) + padding (2x10) +
   okraje (2x8) přesně, takže 11 px scrollbaru by ikonu i zelenou aktivní
   dlaždici zúžilo a odřízlo (overflow: hidden). Rolování kolečkem zůstává.
   V PŘIPNUTÉM stavu (232 px) je místa dost, tam se ukáže tenký, decentní. */
.menu::-webkit-scrollbar { height: 0; width: 0; }
html.menu-pinned .menu { scrollbar-color: rgba(255,255,255,.28) transparent; scrollbar-width: thin; }
html.menu-pinned .menu::-webkit-scrollbar { width: 8px; }
html.menu-pinned .menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 4px; }
html.menu-pinned .menu::-webkit-scrollbar-track { background: transparent; }
/* stav připnutí drží třída na <html> (nastavuje se před vykreslením stránky), */
/* animace se zapíná až prvním kliknutím na hamburger — načtení stránky tak    */
/* nikdy "nenabíhá". Obsah se připnutému panelu uhýbá (padding-left na body),  */
/* aby panel nepřekrýval bloky stránky.                                        */
html.menu-pinned .menu { width: 232px; }
html.menu-pinned body { padding-left: 232px; }
html.menu-anim .menu { transition: width .15s ease; }
html.menu-anim body { transition: padding-left .15s ease; }

/* titulek položky u sbaleného menu (element vytváří js/modern.js) */
.menu-tooltip { background: #23272e; border-radius: 8px; box-shadow: 2px 2px 8px rgba(0,0,0,.25); color: #fff; font-size: 13px; padding: 7px 12px; pointer-events: none; position: fixed; transform: translateY(-50%); white-space: nowrap; z-index: 1100; }

.menu li { display: block; margin: 0 8px 2px 8px; }
.menu li a { align-items: center; background: none; border: 0; border-radius: 8px; color: #cbd5e1; display: flex; gap: 12px; overflow: hidden; padding: 9px 10px; text-align: left; white-space: nowrap; }
.menu li a span { flex: 0 0 24px; margin: 0; text-align: center; }
/* pojistka proti odříznutí ikony, kdyby se obsahová šířka panelu zmenšila */
html:not(.menu-pinned) .menu li:not(.menu-group) a { box-sizing: border-box; min-width: 44px; }
.menu li:hover a { background: rgba(255,255,255,.1); border: 0; color: #fff !important; }
.menu li.active a { background: var(--highlight); border: 0; color: #000 !important; }

/* Nadpisy skupin menu (Hlavní, Finance, Provoz, Nástroje, HR).
   Ve SBALENÉM panelu (60 px) by se text nevešel — místo nadpisu se proto
   vykreslí jen tenká oddělovací linka; text se objeví po připnutí. */
.menu li.menu-group { color: rgba(255,255,255,.4); font-size: 10px; font-weight: 600; letter-spacing: .09em; margin: 16px 8px 4px 8px; padding: 0 10px; text-transform: uppercase; }
html:not(.menu-pinned) .menu li.menu-group { border-top: 1px solid rgba(255,255,255,.12); height: 0; margin: 8px 16px; overflow: hidden; padding: 0; }
.menu li.menu-group:first-child { margin-top: 4px; }
html:not(.menu-pinned) .menu li.menu-group:first-child { border-top: 0; margin-top: 0; }

/* hamburger = připnutí/odepnutí panelu, řadí se nahoru */
.menu li.icon-hamburger { background: var(--chrome-bg); display: block; margin: 0; order: -1; padding: 0 8px 12px 8px; position: sticky; top: -10px; z-index: 2; }
/* top: -10px kvůli padding-boxu panelu (padding: 10px 0) — hamburger tak
   drží u horní hrany a odrolované položky mu neprosvítají nad hlavou.     */
.menu li.icon-hamburger a { color: #9ca3af; font-size: 16px; padding-left: 14px; }
.menu li.icon-hamburger:hover a { color: #fff !important; }

}

/******************************************************************************/
/* menu pod 1051 px — rovnou mobilní (hamburgerové) menu                      */
/* Původní horizontální horní menu se už nepoužívá: pod hranicí levého panelu  */
/* se přechází přímo na hamburger (dosud nastupoval až pod 650 px).           */
/* Rozbalení dělá stávající js/menu.js třídou .open na ul.menu.               */
/******************************************************************************/

@media only screen and (max-width: 1050px) {

/* padding-bottom = odsazení menu od zeleného pruhu, který dělí hlavičku a obsah;
   vodorovné hodnoty musí zůstat 2 % + width 96 % (dokument nepoužívá border-box) */
/* min-height drží řádek i na stránkách bez odpovídající položky menu (např.
   historie/) — hamburger je mimo tok, jinak by z menu vyčníval */
.menu { display: block; left: 0; margin: 10px 0 0 0; min-height: 34px; padding: 0 2% 14px 2%; position: relative; width: 96%; }

/* margin-right = pruh vpravo vyhrazený hamburgeru, aby na něm neležel:
   ikona tak zůstává na tmavém pozadí hlavičky a je dobře vidět */
.menu li { display: none; margin-right: 52px; }
.menu li.active { display: block; }            /* sbalené menu ukazuje aktuální sekci */
.menu li a { background: none; border: 0; border-radius: 6px; display: block; min-width: 0; padding: 9px 10px; text-align: left; text-decoration: none; }
.menu.open li:not(.icon-hamburger) { border-bottom: 1px solid rgba(255,255,255,.12); display: block; }
/* nadpisy skupin: bez oddělovací linky a bez odsazení jako u položek */
.menu li.menu-group { border-bottom: 0 !important; color: rgba(255,255,255,.45); font-size: 10px; font-weight: 600; letter-spacing: .09em; margin: 12px 0 2px 0; padding: 0 8px; text-transform: uppercase; }
.menu.open li:nth-last-child(2) { border-bottom: 0; }
.menu li:first-child a, .menu li:last-child a, .menu li:nth-last-child(2) a { border-radius: 6px; }

/* kontrast na tmavé hlavičce (#2c2c2d): běžná položka bílá, aktivní zelený   */
/* pruh s tmavým textem, hover jemné zesvětlení. Původně se u aktivní/hover   */
/* položky dědil z main.css `color: #000 !important` → černá na tmavém.       */
.menu li a { color: #fff !important; }
.menu li:hover a { background: rgba(255,255,255,.14); border: 0; color: #fff !important; }
.menu li.active a { background: var(--highlight); border: 0; color: #111 !important; font-weight: 600; }

/* hamburger vpravo na řádku první položky (dřív padal na samostatný řádek,
   resp. pod 650 px ležel v rohu na zeleném pruhu aktivní položky) */
.menu li.icon-hamburger { display: block; font-size: 1.5em; line-height: 1; margin: 0; padding: 8px 10px; position: absolute; right: 2%; top: 0; }
.menu li.icon-hamburger a { background: none; border-radius: 6px; color: #fff !important; padding: 0; }
.menu li.icon-hamburger:hover a { background: none; color: var(--highlight) !important; }

}

/******************************************************************************/
/* TMAVÝ REŽIM                                                                */
/* Přepínač #theme-switch v hlavičce (tpl/head.php), stav drží js/modern.js    */
/* třídou `dark` na <html> (localStorage: theme). Třída se nastavuje už při    */
/* načtení skriptu v <head>, aby stránka neblikla světlým motivem.            */
/*                                                                            */
/* Barvy systému jsou v main.css převážně napevno (#fff, #eee, #444, …),      */
/* proto se tmavý motiv skládá z přepisů konkrétních ploch. Tokeny níže drží  */
/* paletu na jednom místě — nové plochy stavět z nich, ne z nových hodnot.    */
/******************************************************************************/

html.dark {
    --dark-bg: #16181c;          /* pozadí stránky */
    --dark-surface: #1f232a;     /* bloky, dlaždice, buňky tabulek */
    --dark-surface-2: #262b33;   /* zvýrazněné plochy (hlavičky tabulek, hover) */
    --dark-border: #333a44;
    --dark-text: #e5e7eb;
    --dark-text-dim: #9ca3af;

    /* chrome je tmavší než plochy bloků → vzniká čitelný žebříček:
       stránka #16181c < chrome #1a1e24 < bloky #1f232a */
    --chrome-bg: #1a1e24;
    /* ve tmavém motivu nese linka hlavní tíhu oddělení (záhlaví i stránka jsou
       tmavé), proto vyšší krytí než u světlých motivů */
    --head-line: rgba(110,180,63,.6);
}

/* v tmavém motivu je plný zelený pruh pod záhlavím zbytečně křiklavý */
html.dark #wrap-head { box-shadow: 0 1px 4px rgba(0,0,0,.45); }

/* Ikony v záhlaví stojí vpravo od fotky ve TŘECH ŘADÁCH, na střed:
       Odhlásit
       Motiv     Šířka     Nastavení
       Zvoneček  Chat
   Čtyři ikony pod sebou byly na výšku fotky (65 px) namačkané; ve třech řadách
   zbude na mezery místo. Sazbu řídí zalamovaný flex a šířky položek, ne pořadí
   v HTML — to je odhlášení, motiv, šířka, nastavení, zvoneček, chat.
   Pořadí ale určuje, KTERÁ ikona kam padne, protože sloty jsou stejně široké;
   nastavení je třetí na přání uživatele (2026-09-22), takže první řada nese
   volby vzhledu a profilu a druhá upozornění.
   Jednotlivé ikony mají vlastní historické posuny (#logout má font-size 22px,
   position: relative a top 5px; přepínač a kolo margin-right), které by sazbu
   rozházely — proto se tu resetují a velikost se sjednotí. */
#account-actions { align-content: center; column-gap: 5px; display: inline-flex; flex-wrap: wrap; height: 65px; justify-content: center; position: relative; row-gap: 5px; vertical-align: top; width: 55px; }
/* Odhlášení zůstává větší a samo v prvním řádku, pod ním je o kus víc místa
   než mezi zbylými řadami. */
/* line-height: 1 dělá z výšky řady přesně velikost písma, takže se dá spočítat,
   že se sloupec do výšky fotky vejde: 17 + 4 + 5 + 13 + 5 + 13 = 57 ≤ 65 px.
   Platí pro TŘI řady. S pěti malými ikonami (2026-09-22 přibyl chat) by se do
   sloupce 40 px vešly jen po dvou, vyšly by čtyři řady a obsah by končil na
   70 px, tedy pod spodkem fotky. Proto je sloupec širší, viz níž. */
#account-actions a { font-size: 13px; line-height: 1; margin: 0; position: static; right: auto; top: auto; text-align: center; }
#account-actions #logout { flex: 0 0 100%; font-size: 17px; margin-bottom: 4px; }
/* Pět ikon pod odhlášením má PEVNÝ SLOT 15 px, takže se vejdou po třech
   vedle sebe (15 + 5 + 15 + 5 + 15 = 55 px šířky sloupce) a zbylé dvě se
   zalomí do další řady. Šířka 55 px je přesně kvůli tomu — do původních 40 px
   se vešly jen dvě a s pátou ikonou by vznikla čtvrtá řada.
   Slot je pevný proto, aby o zalomení nerozhodovala šířka konkrétní
   ikony z FontAwesome (bublina chatu je 16 px, ostatní okolo 13). Do vizuální mezery se počítá i volné místo ve slotu:
   13px glyf v 15px slotu přidá po stranách asi 1 px, takže mezi ikonami je
   opticky ~7 px (dřív 18px slot a 8px mezera dávaly ~13 px). */
#account-actions #theme-switch, #account-actions #content-width,
#account-actions #news, #account-actions #chat-icon, #account-actions #profile-edit { flex: 0 0 15px; }
/* Zvoneček nových zakázek se sem přesunul z bloku „Dnes evidováno" (2026-09-10).
   Žlutou barvu aktivního stavu dává main.css selektorem #account-info a#news.active
   — ten sem nedosáhne, protože řada ikon je mimo #account-info. */
#account-actions #news.active { color: #fcd209; }

/* Bez chatu (účet nemá ac_ch_vie) jsou pod odhlášením jen čtyři ikony a v 55px
   sloupci by vyšly 3 + 1. Původní šířka 40 px pojme přesně dvě
   (15 + 5 + 15 = 35 px), takže vyjde 2 + 2 (přání uživatele 2026-09-25). Na výšku
   se nic nemění — tři řady, viz výpočet výše. Třídu dává tpl/head.php. */
#account-actions.account-actions-no-chat { width: 40px; }

/* přepínač motivu: měsíc ve světlém režimu, slunce v tmavém (FA 6: \f186 / \f185) */
#theme-switch { cursor: pointer; }
#theme-switch:hover { color: var(--highlight) !important; }
/* ikona ukazuje AKTUÁLNÍ motiv: slunce = světlý (výchozí v HTML),
   paleta = pastelový, měsíc = tmavý (FA 6: \f185 / \f53f / \f186) */
html.pastel #theme-switch::before { content: "\f53f"; }
html.crimson #theme-switch::before { content: "\f06d"; }
html.dark #theme-switch::before { content: "\f186"; }

/* ozubené kolo = úprava vlastního profilu (odkaz na uzivatele/{id}-…/upravit/).
   Jméno v záhlaví na profil odkazovalo i dřív, ale nebylo to na první pohled
   poznat. Sedí ve stejné řadě jako přepínač motivu a odhlášení. */
#profile-edit { cursor: pointer; }
#profile-edit:hover { color: var(--highlight) !important; }

/* Pod 550 px dává responsive_design.css #logout position: absolute v rohu
   hlavičky. Ve sloupci by se tím vytrhl z řady, proto se do rohu posadí celý
   sloupec (#account-actions a { position: static } výše přebije #logout). */
@media only screen and (max-width: 550px) {
/* fotka je tu skrytá, takže vazba na její výšku nedává smysl */
#account-actions { gap: 7px; height: auto; position: absolute; right: 15px; top: 12px; }
}

/* plocha stránky */
html.dark body { background: var(--dark-bg); color: var(--dark-text); }
html.dark a, html.dark .color { color: var(--dark-text); }
html.dark h1, html.dark h2, html.dark h3 { color: var(--dark-text); }
html.dark #breadcrumbs, html.dark #breadcrumbs a { color: var(--dark-text-dim); }

/* bloky a dlaždice */
html.dark .block, html.dark .block-for-bookmark { background: var(--dark-surface); border-color: var(--dark-border); box-shadow: none; color: var(--dark-text); }
html.dark .dashboard-tile { background: var(--tile-bg, var(--dark-surface)); border-color: var(--tile-border, var(--dark-border)); box-shadow: none; color: var(--dark-text); }

/* tmavé varianty dlaždic — přebarvují jen tokeny, pravidla zůstávají výše */
html.dark .dashboard-tile-amber  { --tile-bg: #2a2118; --tile-border: #3d2f1e; --tile-chip: #4a3520; --tile-ink: #fbbf24; }
html.dark .dashboard-tile-yellow { --tile-bg: #262316; --tile-border: #3a341c; --tile-chip: #46401f; --tile-ink: #facc15; }
html.dark .dashboard-tile-blue   { --tile-bg: #171f2e; --tile-border: #22304a; --tile-chip: #27395a; --tile-ink: #93c5fd; }
html.dark .dashboard-tile-pink   { --tile-bg: #2a1a23; --tile-border: #3e2532; --tile-chip: #4a2b3a; --tile-ink: #f9a8d4; }
html.dark .dashboard-tile-green  { --tile-bg: #172318; --tile-border: #223424; --tile-chip: #27402b; --tile-ink: #86efac; }
html.dark .dashboard-tile-label { color: var(--dark-text-dim); }
html.dark .dashboard-tile:hover { box-shadow: 0 8px 20px rgba(0,0,0,.45); }
html.dark .block h2 small { color: var(--dark-text-dim); }
html.dark .block .cblock { background: rgba(110,180,63,.14); }

/* výpisové tabulky */
html.dark .table-list th { background: var(--dark-surface-2); border-bottom-color: var(--dark-border); color: var(--dark-text-dim); }
html.dark .table-list td { background: var(--dark-surface); border-bottom-color: var(--dark-border); color: var(--dark-text); }
html.dark .table-list tr:hover td { background: var(--dark-surface-2); }
html.dark .table-list tr.dl-section td, html.dark .table-list tr.dl-section:hover td { background: rgba(255,255,255,.055); color: var(--dark-text-dim); }
html.dark .table-list th .dispatch-sort:hover, html.dark .table-list th .dispatch-sort.active { color: var(--highlight); }
html.dark .table-list td a { color: var(--dark-text); }
html.dark .table-list td a:hover { color: var(--highlight); }

/* stavové řádky — tlumené varianty, aby zůstaly čitelné na tmavém podkladu */
html.dark .table-list tr.active td, html.dark .table-list tr.active:hover td { background: #2f4a24; }
html.dark .table-list tr.active-researcher td, html.dark .table-list tr.active-researcher:hover td { background: #24382c; }
html.dark .table-list tr.active-researcher-printer td, html.dark .table-list tr.active-researcher-printer:hover td { background: #1f3b45; }
html.dark .table-list tr.key td, html.dark .table-list th.key, html.dark .table-list td.key { background: var(--dark-surface-2); }
html.dark .table-list td.empty, html.dark .table-list tr:hover td.empty { background: none; }

/* Tabulky položek (.table-in) — formuláře zakázky, nabídky a faktury.

   Záhlaví má v main.css natvrdo color: #444, což je na tmavém podkladu skoro
   nečitelné; stejný tlumený odstín jako u výpisových tabulek výše.

   Zápatí (.odd2, pruh „Načíst položku ze skladu") je v main.css béžové, což
   v tmavém motivu působilo jako světlý ostrůvek. Přebarvuje se proto na
   --dark-surface, tedy na stejnou plochu jako blok pod ním, a od zelených
   řádků položek ho odděluje linka místo barvy.

   Použit je --dark-surface, ne zvýrazněný --dark-surface-2: tlačítko
   .button-submit-inverse (zakázka) má v tmavém motivu právě --dark-surface-2
   a na stejně barevném pruhu by splynulo. Takhle je o odstín světlejší než
   podklad a zůstane vidět. Třída odd2 je v systému jen tady
   (mod/item/add.html), takže se změna nikde jinde neprojeví. */
html.dark .table-in th { border-bottom-color: var(--dark-border); color: var(--dark-text-dim); }
html.dark .table-in tr td.odd2, html.dark .table-in-item tr td.odd2 { background: var(--dark-surface); border-top: 1px solid var(--dark-border); color: var(--dark-text); }

/* Tlačítka na tom pruhu potřebují VIDITELNOU HRANICI. Obě varianty mají tmavou
   plochu (button-submit #444, button-submit-inverse v tmavém motivu
   --dark-surface-2 #262b33) a proti pruhu #1f232a vycházejí 1,62:1 a 1,11:1 —
   text je sice čitelný, ale samotné tlačítko splývá s podkladem. Běžný rámeček
   --dark-border dá jen 1,37:1; #6b7280 dává 3,26:1, tedy hranici prvku, kterou
   WCAG požaduje (3:1). Platí jen uvnitř pruhu — jinde tlačítka leží na zelených
   řádcích, kde je kontrast dostatečný. */
html.dark .table-in tr td.odd2 .button-submit,
html.dark .table-in tr td.odd2 .button-submit-inverse { border-color: #6b7280; }

/* filtrovací dlaždice a stránkování */
html.dark .dispatch-filter a { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
html.dark .dispatch-filter a.active { background: var(--highlight); border-color: var(--highlight-dark); color: #111; }
html.dark .paging a { background: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text); }
html.dark .paging a:hover { background: var(--dark-surface-2); border-color: var(--highlight); color: var(--dark-text); }
html.dark .paging a.page-active { background: var(--highlight); border-color: var(--highlight-dark); color: #111; }

/* formuláře */
html.dark input, html.dark textarea, html.dark select { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--dark-text-dim); }
html.dark .fieldset { background: var(--dark-surface); border-color: var(--dark-border); }
html.dark .filter-toggle { color: var(--dark-text-dim); }
html.dark .filter-toggle:hover { color: var(--highlight); }
html.dark .fieldset legend { color: var(--dark-text-dim); }

/* Modální okna (colorbox) — přidání času řešiteli, přidání/odebrání řešitele,
   úprava poznámky, časový odhad, úkoly…
   `#cboxContent{background:#fff}` sedí v js/jquery/colorbox/colorbox.css ř. 34
   a tmavý motiv ho dosud nepřebíjel. Obsah okna přitom světlou barvu textu
   z `html.dark body` dědil, takže na bílé ploše zůstal světle šedý text
   (změřeno: plocha #fff, text #e5e7eb) a čitelný byl jen nadpis, který má
   v main.css ř. 543 natvrdo `color: #000`.
   Formulářová pole uvnitř řeší pravidla výše, tabulky obecná pravidla tabulek. */
html.dark #cboxContent, html.dark #cboxLoadedContent, html.dark .cboxIframe { background: var(--dark-surface); }
html.dark #cboxLoadedContent { color: var(--dark-text); }
html.dark .popup .title { color: var(--dark-text); }

/* štítky — neutrální varianty ztmavit (základní `.tag` má v main.css tmavé
   průhledné pozadí a černý text, na tmavém podkladu je nečitelný) */
html.dark .tag, html.dark .tag-eco { background: rgba(255,255,255,.12); color: var(--dark-text); }
html.dark .tag-gray, html.dark .tag.gray { background: #313743; color: var(--dark-text); }
html.dark .tag-black { background: #0f1114; color: var(--dark-text); }

/* Významové varianty si MUSÍ udržet svou barvu. Obecné `html.dark .tag` výše má
   vyšší specificitu než `.tag.expiration` z main.css (0,2,1 vs 0,2,0) a přebilo
   by je — proto se tu deklarují znovu. Stejný princip jako u stavových řádků. */
html.dark .tag.clear { background: var(--dark-surface-2); color: var(--dark-text); }
html.dark .tag.expiration { background: #ed3d4a; color: #fff; }
html.dark .tag.warning { background: #ffa500; color: #111; }
html.dark .tag.green, html.dark .tag:hover, html.dark .tag.active { background: var(--highlight); color: #111; }
html.dark .tag-green { color: #fff; }
html.dark .tag-orange { background: #ffa500; color: #111; }
html.dark .tag-red { background: #f00; color: #fff; }
html.dark .tag-gold { background: #ffd700; color: #111; }

/* tlačítka se světlým pozadím — `.button`, `.back` (bílá) a `.button2` (#f9f9f9)
   nemají v main.css vlastní `color`, dědily by světlou barvu odkazu z pravidla
   `html.dark a` výše → bílý text na bílém pozadí. Ostatní varianty
   (.button-gray/-submit #444, .button-black #222, .button-green) jsou tmavé
   nebo barevné a text mají vlastní, takže se nechávají beze změny. */
html.dark .button, html.dark .back, html.dark .button2,
html.dark .button-submit-inverse { background: var(--dark-surface-2); border: 1px solid var(--dark-border); color: var(--dark-text); }

/* Žluté tlačítko „Přidat" u položek. Pravidlo pro vstupy výše
   (html.dark input, specificita 0,1,2) přebíjí .button-submit-yellow z main.css
   (0,1,0), takže tlačítko v klidu ztrácelo žlutou a dostávalo tmavý podklad se
   světlým textem. Při najetí ale vyhraje .button-submit-yellow:hover (0,2,0),
   podklad skočí zpátky na žlutou — a světlý text z pravidla pro vstupy na ní
   zůstane. Odtud ta nečitelná bledá popiska.
   Obě pravidla mají proto vyšší specificitu (0,2,1) a (0,3,1) a drží žlutou
   v obou stavech; text je tmavý, na žluté má kontrast 15:1.
   Sousední .button-submit-inverse svoje pravidlo má o řádek výš, na žluté
   variantě se zapomnělo. */
html.dark .button-submit-yellow,
html.dark .button-submit-yellow:hover { background: #f9d301; border: 1px solid #f9d301; color: #111; }
html.dark .button:hover, html.dark .back:hover, html.dark .button2:hover { background: #39414d; color: var(--dark-text); }

/******************************************************************************/
/* Plochy se světlým pozadím z main.css, které NEMAJÍ vlastní `color`.        */
/* Dědí světlou barvu odkazu z `html.dark a` výše → světlý text na světlém    */
/* pozadí. Je to nejčastější past tohoto motivu; při přidávání dalších ploch  */
/* vždy ověřit, jestli prvek barvu textu deklaruje.                          */
/******************************************************************************/

/* akční tlačítka v řádku výpisu (Tisk / Expedováno / Dokončeno / Upravit /
   Smazat) — .icon má v main.css krémové #fffff1 a zobrazuje se až při najetí */
html.dark .icon { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
html.dark .icon:hover { background: #39414d; border-color: var(--highlight); color: var(--dark-text); }
html.dark .active-researcher .icon { background: #2b3340; }   /* vyšší specificita než pravidlo výše */

/* podmenu a záložky */
html.dark .submenu li a { background: var(--dark-surface-2); color: var(--dark-text); }
html.dark .submenu li a:hover, html.dark .submenu li a.active { background: var(--highlight); color: #111; }
html.dark .bookmark li a { background: var(--dark-surface-2); color: var(--dark-text); }
html.dark .bookmark li a.active, html.dark .bookmark li a:hover { background: var(--dark-surface); color: var(--dark-text); }

/* obalové plochy a bloky */
html.dark .form, html.dark .wrap-block, html.dark .td-block { background: var(--dark-surface); }

/* Náhled obálky v detailu zákazníka (customer_detail.php).
   `.address` má v main.css ř. 637 světlé pozadí natvrdo, ale text se dědil
   z `html.dark a` — světlý na světlém, naměřený kontrast 1,09, tedy prakticky
   neviditelný (viz obrázek od uživatele).
   Papírové pozadí zůstává záměrně: je to náhled toho, co se vytiskne, takže
   má vypadat jako obálka, ne jako další tmavá dlaždice. Doplněn jen tmavý
   text, rámeček a stín, aby to na tmavém podkladu působilo jako list papíru. */
/* Obálka = `.a-address`, ta široká plocha; okýnko s adresou = `.address`
   uvnitř ní (odtud margin-top 50px a align=right v customer_detail.php —
   napodobuje to okénkovou obálku DL). V tmavém motivu neměla obálka žádné
   pozadí a splývala s dlaždicí, takže bylo vidět jen okýnko. */
/* Obálka v tmavém motivu (2026-09-16, po třech kolech ladění).
   Zadání skončilo u toho, že obálky braly příliš mnoho pozornosti. Na vině
   nebyly ani tak barvy jako tři věci dohromady: obálka byla světlejší než
   ostatní bloky (#343b47 proti #1f232a), měla stín — který nemá žádný jiný
   blok na stránce, viz `html.dark .block` výš — a okýnko bylo čistě bílé
   (15,76 proti obálce, nejjasnější plocha na celé stránce).
   Proto teď obálka používá rovnou --dark-surface a --dark-border, tj. přesně
   to, co .block: v ploše stránky je to další panel, ne plovoucí karta.
   Rozlišení nese jen okýnko — 11,13 proti obálce, text v něm 12,78.
   Zvažované odstíny okýnka (okýnko/obálka × text/okýnko): #fff 15,76 × 18,11
   · #e8eaee 13,09 × 15,04 · #d5d9df 11,13 × 12,78 (zvoleno)
   · #c2c8d0 9,36 × 10,75 · #aeb5bf 7,63 × 8,76. */
html.dark .a-address {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    box-shadow: none;
    padding: 0 18px 18px 0;
}
html.dark .a-address:hover { border-color: var(--highlight); }

/* okýnko: tlumený papír, ne bílá — čitelné, ale netáhne oko přes celou stránku */
html.dark .address {
    background: #d5d9df;
    border: 1px solid var(--dark-border);
    color: #14161a;
}

/* Popisky nad obálkami a podobné šedé nadpisy: #999 z main.css dává na tmavém
   podkladu 5,53 — projde, ale na tučný nadpis je to málo. */
html.dark .c-gray { color: var(--dark-text-dim); }
html.dark .fieldset-time { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
html.dark .fieldset-time:hover { background: #39414d; border-color: var(--dark-border); }

/* Štítky u času řešitele (Zbývá / Ušetřeno / Přečerpáno). main.css je dělá
   sytě zelené s černým textem a sytě červené s bílým — v tmavém motivu to
   svítí a „Přečerpáno" mělo kontrast jen 4,36:1. Stejně jako u podbarvení
   řádků se proto použije tlumený tón pozadí a světlý text; zelený odstín je
   shodný s html.dark .table-list tr.active td. */
html.dark .fieldset-time.good { background: #24371c; border-color: #3f6330; color: var(--dark-text); }
html.dark .fieldset-time.good legend { background: #335026; border-color: #4d7a3b; color: #e8f7de; }
html.dark .fieldset-time.not-good { background: #3a1c1f; border-color: #6b2f33; color: var(--dark-text); }
html.dark .fieldset-time.not-good legend { background: #6b2f33; border-color: #8a3b41; color: #ffdfe1; }

/* abecední štítek ve výpisu zákazníků (.label, absolutně pozicovaný) */
html.dark .label { background: rgba(255,255,255,.12); color: var(--dark-text); }

/* rámované tabulky (reporty, kontaktní osoby) */
html.dark .table-border th, html.dark .table-border-full th { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
html.dark .table-border td, html.dark .table-border-full td { border-color: var(--dark-border); color: var(--dark-text); }
html.dark .table-border tr.even td, html.dark .table-border-full tr.even td { background: var(--dark-surface-2); }
html.dark .table-border tr.total td, html.dark .table-border-full tr.total td { background: var(--dark-surface-2); border-color: var(--dark-border); }
html.dark .table-border th.br, html.dark .table-border td.br, html.dark .table-border tr.total td.br { border-right-color: var(--dark-border); }

/* časová osa kalendáře a trendové štítky dlaždic */
html.dark .cal-timeline-track { background: var(--dark-surface-2); }
html.dark .cal-timeline-hour, html.dark .cal-timeline-label,
html.dark .cal-timeline-empty, html.dark .cal-legend-item { color: var(--dark-text-dim); }
html.dark .cal-label-holiday, html.dark .cal-holiday-flag { color: var(--dark-text-dim); }
html.dark .cal-track-holiday { background: #302c22; }
/* Barvy záznamů se v tmavém motivu NEPŘEBARVUJÍ. Pruhy i jména mají barvu
   inline z PHP (uživatelské us_ca_background nelze v CSS přebít bez !important)
   a klasický kalendář si významové barvy v tmavém motivu drží také — viz
   poznámka u html.dark .calendar níže. Vlastní tmavé varianty by legendu
   rozešly s tím, co je vidět na ose. */
html.dark .dashboard-tile-trend.up   { background: #1c3524; color: #86efac; }
html.dark .dashboard-tile-trend.down { background: #3a1f21; color: #fca5a5; }
html.dark .dashboard-tile-trend.flat { background: var(--dark-surface-2); color: var(--dark-text-dim); }
html.dark .dashboard-tile-label { color: var(--dark-text-dim); }

/* filtry v modulech: `.group2 .wrap` je v main.css bílý pruh s černým textem
   (řádek 309), `.group .wrap` je naopak tmavý už ve světlém režimu */
html.dark .group2 .wrap { background: var(--dark-surface); border-top-color: var(--dark-border); color: var(--dark-text); }
html.dark .group2 .wrap a, html.dark .group2 .wrap label { color: var(--dark-text); }

/* stránka Kalendář (tabulka .calendar v main.css ř. 574–614) má vlastní světlé
   buňky bez deklarované barvy textu → dědily by světlý text z `html.dark a`
   a byly by nečitelné. Ponechány jen významové barvy: zelená = obsazeno,
   #444 = schváleno, holiday zůstává výrazný. */
html.dark .calendar th { background: var(--dark-surface-2); border-bottom-color: var(--dark-border); color: var(--dark-text); }
html.dark .calendar th, html.dark .calendar td { border-bottom-color: var(--dark-border); }
html.dark .calendar td { color: var(--dark-text); }
html.dark .calendar td.text { background: var(--dark-surface); }
html.dark .calendar tr.weekend td:not(.active) { background: var(--dark-surface-2); }
html.dark .calendar tr.weekend td.day, html.dark .calendar tr.weekend td.date, html.dark .calendar tr.weekend td.name { color: var(--dark-text-dim); }
html.dark .calendar th:first-child, html.dark .calendar td.name { border-right-color: var(--dark-border); }
html.dark .calendar .edge { border-right-color: var(--dark-border); }
html.dark .calendar .small td { border-bottom-color: var(--dark-border); }
html.dark .calendar tr.weekend.sa, html.dark .calendar tr.weekend.su { border-color: var(--dark-border); }
html.dark .calendar tr.separator-day td { background: var(--dark-surface); color: var(--dark-text-dim); }
html.dark .calendar tbody tr:not(.weekend):not(.public-holiday):hover td.text { background: var(--dark-surface-2); }
/* státní svátek — stejné podbarvení jako víkend (viz main.css u .calendar
   tr.weekend.su); musí stát až za víkendovými pravidly výše */
html.dark .calendar tr.public-holiday td:not(.active) { background: #302c22; }
html.dark .calendar tr.public-holiday td.day { border-left-color: #f9d301; }
html.dark .calendar tr.public-holiday td.day, html.dark .calendar tr.public-holiday td.date, html.dark .calendar tr.public-holiday td.name { color: #a9a08a; }
html.dark .calendar .calendar-holiday { color: #bdb49c; }
/* v tmavém motivu je černá neviditelná, proto ztlumená světlá */
html.dark .calendar .now { border-right-color: rgba(229,231,235,.45); }
html.dark .calendar .now-pointer { background: rgba(229,231,235,.55); }
html.dark .calendar .active a { color: #111; }             /* obsazeno = zelená plocha */
html.dark .calendar .active.approved a { color: #fff; }
html.dark .calendar .active.holiday { color: #111; }

/* rámeček fotky v hlavičce (placeholder pod profilovým obrázkem) */
html.dark #profile-photo { background: var(--dark-surface-2); }

/* patička — dekorativní obrázek go_green.png (roztažený přes celou šířku
   se záporným margin-top) se nezobrazuje */
#wrap-foot img { display: none; }

/* patička */
html.dark #foot, html.dark #foot a { color: var(--dark-text-dim); }

/* bublina titulku u sbaleného menu (menu samo je tmavé v obou režimech) */
html.dark .menu-tooltip { background: #0f1114; }

/* Grafy: Google Charts vykresluje popisky natvrdo tmavě a barvy se posílají
   ze serveru, kdežto motiv se přepíná až v prohlížeči → na tmavém podkladu by
   byly nečitelné. Plocha grafu proto zůstává světlá i v tmavém režimu.
   (Trvalé řešení = předat motiv na server cookie a nastavit barvy grafu.) */
html.dark #chart-contract-years,
html.dark #chart-invoicing-years,
html.dark #chart-monthly-revenue,
html.dark #column-chart1, html.dark #column-chart2,
html.dark #pie-chart1, html.dark #pie-chart2 { background: #f3f4f6; border-radius: 10px; }

/******************************************************************************/
/* PASTELOVÝ MOTIV                                                            */
/* Třetí motiv (světlý → pastelový → tmavý), třída `pastel` na <html>.        */
/* Vychází z předloh: teplé odstíny lomené bílé, měkčí okraje a stíny,        */
/* jantarový akcent a pastelové dlaždice.                                     */
/*                                                                            */
/* POZOR: `--highlight` (zelená) se ZÁMĚRNĚ nemění. Je navázaná na význam —   */
/* zelená = hotovo/schváleno/aktivní řádek napříč všemi moduly a přebarvení   */
/* by tyto stavy rozbilo. Jantarová se proto používá jen tam, kde nese pouze  */
/* vizuální akcent (aktivní položka menu, filtry, stránkování, ikony bloků).  */
/******************************************************************************/

html.pastel {
    --pastel-bg: #f6f7f9;         /* plocha stránky — teplá lomená bílá */
    --pastel-surface: #fff;       /* karty a bloky */
    --pastel-surface-2: #fbfbfd;  /* hlavičky tabulek */
    --pastel-border: #e9ebf0;
    --pastel-text: #1f2430;
    --pastel-text-dim: #6b7280;
    --pastel-accent: #f59e0b;     /* jantarová z předloh */
    --pastel-accent-dark: #d97706;
    --pastel-hover: #fdf8ef;      /* teplý hover řádku tabulky */

    --chrome-bg: #1c2028;         /* tmavě modrošedý panel jako v předloze */
    --head-line: rgba(245,158,11,.5);
}

html.pastel body { background: var(--pastel-bg); color: var(--pastel-text); }

/* měkčí karty — větší rádius a jemnější stín než ve světlém motivu */
html.pastel .block, html.pastel .block-for-bookmark,
html.pastel .dashboard-tile { border-color: var(--pastel-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
html.pastel .dashboard-tile:hover { box-shadow: 0 10px 24px rgba(16,24,40,.10); }
html.pastel .block h2 .fa { color: var(--pastel-accent); }
html.pastel .block h2 small { color: var(--pastel-text-dim); }

/* záhlaví a akcentová linka */
/* linku drží token --head-line výše */
html.pastel .menu li.active a { background: var(--pastel-accent); color: #111 !important; }
/* ikony v záhlaví: výchozí hover je zelený z --highlight, tady jantarový */
html.pastel #theme-switch:hover, html.pastel #profile-edit:hover { color: var(--pastel-accent) !important; }
html.pastel #account-info .fa-stopwatch { color: var(--pastel-accent); }

/* tabulky — teplejší odstíny místo šedé */
html.pastel .table-list th { background: var(--pastel-surface-2); border-bottom-color: var(--pastel-border); color: var(--pastel-text-dim); }
html.pastel .table-list td { border-bottom-color: var(--pastel-border); }
html.pastel .table-list tr:hover td { background: var(--pastel-hover); }
/* podbarvení vyznačeného řádku — v main.css zelený nádech; obě varianty se drží
   jantarové, ale různě sytě, aby šly od sebe rozeznat.
   .active-researcher-printer zůstává modrý, ten se zelenou nekoliduje. */
html.pastel .table-list tr.active td,
html.pastel .table-in tr.active td { background: rgba(245,158,11,.22); }
html.pastel .table-list tr.active-researcher td { background: #fdf3e3; }
/* šipka řazení — viz poznámka u karmínového motivu */
html.pastel .table-list th .c-start.fa-caret-down,
html.pastel .table-list th .c-start.fa-caret-up { color: var(--pastel-accent-dark); }
html.pastel .table-list td a:hover { color: var(--pastel-accent-dark); }
html.pastel .table-list th .dispatch-sort:hover, html.pastel .table-list th .dispatch-sort.active { color: var(--pastel-accent-dark); }

/* filtry, stránkování a focus — jantarový akcent */
/* Filtrovací lišta modulů (.group): main.css dává aktivní i najeté volbě
   var(--highlight), tedy zelenou. Ta je v systému SÉMANTICKÁ (hotovo/schváleno)
   a motivy ji jinak nepřebarvují — tady ale nejde o stav záznamu, jen o zvolený
   filtr, takže se sladí s jantarovou barvou motivu. */
html.pastel .group a:hover,
html.pastel .group a.active { background: var(--pastel-accent); border-top-color: var(--pastel-accent-dark); color: #111; }

html.pastel .dispatch-filter a { background: var(--pastel-surface-2); border-color: var(--pastel-border); }
html.pastel .dispatch-filter a:hover { border-color: var(--pastel-accent); }
html.pastel .dispatch-filter a.active { background: var(--pastel-accent); border-color: var(--pastel-accent-dark); color: #111; }
html.pastel .paging a { border-color: var(--pastel-border); }
html.pastel .paging a:hover { border-color: var(--pastel-accent); }
html.pastel .paging a.page-active { background: var(--pastel-accent); border-color: var(--pastel-accent-dark); color: #111; }
html.pastel input:focus, html.pastel textarea:focus, html.pastel select:focus { border-color: var(--pastel-accent); }
html.pastel input, html.pastel textarea, html.pastel select { border-color: #dfe3ea; }
html.pastel .fieldset { background: var(--pastel-surface-2); border-color: var(--pastel-border); }
html.pastel .icon-top { color: var(--pastel-accent); }

/* akční tlačítka v řádku výpisu — v předloze měkké světlé karty */
html.pastel .icon { background: var(--pastel-surface); border-color: var(--pastel-border); border-radius: 8px; }
html.pastel .icon:hover { border-color: var(--pastel-accent); }

/* podmenu a záložky */
html.pastel .submenu li a { background: var(--pastel-surface); }
html.pastel .submenu li a:hover, html.pastel .submenu li a.active { background: var(--pastel-accent); color: #111; }

/* časová osa kalendáře v pastelovém motivu */
html.pastel .cal-timeline-track { background: var(--pastel-surface-2); }
html.pastel .cal-track-holiday { background: #edeae1; }
html.pastel .cal-timeline-hour, html.pastel .cal-timeline-label,
html.pastel .cal-timeline-empty, html.pastel .cal-legend-item { color: var(--pastel-text-dim); }

/* sytější pastely dlaždic — v předloze jsou dlaždice výraznější než karty */
html.pastel .dashboard-tile-amber  { --tile-bg: #fff4e6; --tile-border: #fadcb8; --tile-chip: #fbd7a5; }
html.pastel .dashboard-tile-yellow { --tile-bg: #fdf9e3; --tile-border: #f3e7ac; --tile-chip: #f7e79f; }
html.pastel .dashboard-tile-blue   { --tile-bg: #eaf2ff; --tile-border: #c8dcf8; --tile-chip: #bcd6f8; }
html.pastel .dashboard-tile-pink   { --tile-bg: #fdeef5; --tile-border: #f6cede; --tile-chip: #f8c8dd; }
html.pastel .dashboard-tile-green  { --tile-bg: #ebf9ef; --tile-border: #c3e9ce; --tile-chip: #b9e8c8; }

/******************************************************************************/
/* KARMÍNOVÝ MOTIV                                                            */
/* Čtvrtý motiv (třída `crimson` na <html>), vychází z dodané předlohy:       */
/* plochý editorial vzhled — bílé karty s tenkým rámečkem a BEZ STÍNŮ, malý   */
/* rádius, karmínový akcent, drobné verzálkové popisky, font Archivo.         */
/*                                                                            */
/* Jako JEDINÝ motiv má SVĚTLÝ panel a hlavičku (v předloze je sidebar bílý). */
/* Bylo to možné až po nahrazení loga textem — bílé logo by na světlém        */
/* podkladu zmizelo. Kvůli tomu se tu přebarvuje i celý obsah hlavičky        */
/* a levého menu, které jsou jinde stavěné na tmavý podklad.                  */
/*                                                                            */
/* `--highlight` (zelená) se stejně jako u pastelového motivu NEMĚNÍ — nese   */
/* význam (hotovo/schváleno/aktivní řádek). Karmín je čistě vizuální akcent.  */
/* Pozor při rozšiřování: karmín je blízko červené `.tag.expiration`          */
/* (prošlý termín), proto se nepoužívá na nic stavového.                      */
/******************************************************************************/

html.crimson {
    --crimson-bg: #f7f8f9;
    --crimson-surface: #fff;
    --crimson-surface-2: #fafbfc;
    --crimson-border: #e3e5e8;
    --crimson-text: #14161a;
    --crimson-text-dim: #6b7280;
    --crimson-accent: #e8123c;
    --crimson-accent-dark: #c20f33;
    --crimson-accent-soft: #fdeaee;

    --chrome-bg: #fff;              /* světlý panel — jako v předloze */
    --head-line: #e3e5e8;
}

/* písmo Archivo pro celý motiv; nadpisy a čísla těžké a stažené */
html.crimson body, html.crimson input, html.crimson textarea, html.crimson select, html.crimson button,
html.crimson .ui-widget, html.crimson .ui-tooltip { font-family: 'Archivo', 'Inter', tahoma, sans-serif; }
html.crimson h1, html.crimson h2, html.crimson h3, html.crimson .block h2,
html.crimson #account-name, html.crimson #zakazkovy-system,
html.crimson .dashboard-tile-count { font-family: 'Archivo', 'Inter', tahoma, sans-serif; font-weight: 800; letter-spacing: -.02em; }

html.crimson body { background: var(--crimson-bg); color: var(--crimson-text); }

/* ploché karty bez stínů, malý rádius */
html.crimson .block, html.crimson .block-for-bookmark,
html.crimson .dashboard-tile { background: var(--crimson-surface); border: 1px solid var(--crimson-border); border-radius: 8px; box-shadow: none; }
html.crimson .dashboard-tile:hover { box-shadow: none; border-color: var(--crimson-accent); transform: none; }

/* nadpis bloku jako drobný verzálkový štítek (rys předlohy) */
html.crimson .block h2 { color: var(--crimson-text); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
html.crimson .block h2 .fa { color: var(--crimson-accent); font-size: 13px; }
html.crimson .block h2 small { color: var(--crimson-text-dim); letter-spacing: 0; text-transform: none; }

/* SVĚTLÁ hlavička — vše v ní musí mít tmavý text */
/* main.css dává #wrap-head `color: #fff` (počítá s tmavým podkladem) — na bílé
   hlavičce by byl jakýkoli přímý text neviditelný, proto se barva přepisuje */
html.crimson #wrap-head { border-bottom: 1px solid var(--crimson-border); box-shadow: none; color: var(--crimson-text); }
html.crimson #wrap-head a { color: var(--crimson-text); }
/* vyšší specificita než `html.crimson #wrap-head a` výše, jinak by nápis zůstal tmavý */
html.crimson #wrap-head #zakazkovy-system { color: var(--crimson-accent); }
html.crimson #account-info { color: var(--crimson-text-dim); }
html.crimson #account-info a, html.crimson #account-name { color: var(--crimson-text); }
html.crimson #profile-photo { background: var(--crimson-surface-2); }
html.crimson #logout, html.crimson #theme-switch, html.crimson #profile-edit { color: var(--crimson-text-dim) !important; }
html.crimson #logout:hover, html.crimson #theme-switch:hover, html.crimson #profile-edit:hover { color: var(--crimson-accent) !important; }
html.crimson #account-info .fa-stopwatch { color: var(--crimson-accent); }
html.crimson #head-actions li a { color: var(--crimson-text) !important; }
html.crimson #head-actions li a:hover { background: var(--crimson-accent-soft); color: var(--crimson-accent) !important; }

/* SVĚTLÝ levý panel — aktivní položka měkce karmínová (jako v předloze) */
html.crimson .menu { box-shadow: 1px 0 0 var(--crimson-border); }
/* světlý panel — bílý palec scrollbaru by na něm nebyl vidět */
html.crimson.menu-pinned .menu { scrollbar-color: rgba(0,0,0,.22) transparent; }
html.crimson.menu-pinned .menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); }
html.crimson .menu li a { color: var(--crimson-text-dim); }
html.crimson .menu li:hover a { background: var(--crimson-surface-2); color: var(--crimson-text) !important; }
html.crimson .menu li.active a { background: var(--crimson-accent-soft); color: var(--crimson-accent) !important; font-weight: 600; }
html.crimson .menu li.menu-group { color: var(--crimson-text-dim); }
html.crimson:not(.menu-pinned) .menu li.menu-group { border-top-color: var(--crimson-border); }
html.crimson .menu li.icon-hamburger a { color: var(--crimson-text-dim); }
html.crimson .menu li.icon-hamburger:hover a { color: var(--crimson-accent) !important; }
html.crimson .menu-tooltip { background: var(--crimson-text); color: #fff; }
html.crimson .menu.open li:not(.icon-hamburger) { border-bottom-color: var(--crimson-border); }

/* tabulky — verzálková hlavička, bez zbytečných linek */
html.crimson .table-list th { background: var(--crimson-surface); border-bottom: 1px solid var(--crimson-border); color: var(--crimson-text-dim); }
html.crimson .table-list td { border-bottom-color: var(--crimson-border); }
html.crimson .table-list tr:hover td { background: var(--crimson-surface-2); }
/* podbarvení vyznačeného řádku — v main.css zelený nádech, tady karmínový;
   „řešitel dokončil" je světlejší, aby šel od vyznačeného řádku rozeznat.
   .active-researcher-printer zůstává modrý, se zelenou nekoliduje. */
html.crimson .table-list tr.active td, html.crimson .table-list tr.active:hover td,
html.crimson .table-in tr.active td { background: var(--crimson-accent-soft); }
html.crimson .table-list tr.active-researcher td,
html.crimson .table-list tr.active-researcher:hover td { background: #fdf5f6; }

/* Šipka řazení v hlavičce tabulky je .c-start, tedy zelená z --highlight.
   Cílí se PŘES fa-caret-*, protože .c-start jinde znamená „hotovo/schváleno"
   (zaškrtnuté kolečko u řešitele apod.) a tam zelená zůstat musí. */
html.crimson .table-list th .c-start.fa-caret-down,
html.crimson .table-list th .c-start.fa-caret-up { color: var(--crimson-accent); }
html.crimson .table-list th .dispatch-sort:hover, html.crimson .table-list th .dispatch-sort.active { color: var(--crimson-accent); }
html.crimson .table-list td a { color: var(--crimson-text); }
html.crimson .table-list td a:hover { color: var(--crimson-accent); }

/* filtry, stránkování, focus a tlačítka — ploché, karmínový aktivní stav */
html.crimson .dispatch-filter a { background: var(--crimson-surface); border-color: var(--crimson-border); border-radius: 6px; color: var(--crimson-text-dim); }
html.crimson .dispatch-filter a:hover { border-color: var(--crimson-accent); color: var(--crimson-text); }
html.crimson .dispatch-filter a.active { background: var(--crimson-accent); border-color: var(--crimson-accent-dark); color: #fff; }
html.crimson .paging a { border-color: var(--crimson-border); border-radius: 6px; }
html.crimson .paging a:hover { border-color: var(--crimson-accent); }
html.crimson .paging a.page-active { background: var(--crimson-accent); border-color: var(--crimson-accent-dark); color: #fff; }
html.crimson input, html.crimson textarea, html.crimson select { border-color: var(--crimson-border); border-radius: 6px; }
html.crimson input:focus, html.crimson textarea:focus, html.crimson select:focus { border-color: var(--crimson-accent); }
html.crimson .fieldset { background: var(--crimson-surface-2); border-color: var(--crimson-border); border-radius: 8px; }
html.crimson .button, html.crimson .back, html.crimson .button2 { background: var(--crimson-surface); border: 1px solid var(--crimson-border); border-radius: 6px; color: var(--crimson-text); }
html.crimson .button:hover, html.crimson .back:hover { border-color: var(--crimson-accent); color: var(--crimson-accent); }
html.crimson .icon { background: var(--crimson-surface); border-color: var(--crimson-border); border-radius: 6px; }
html.crimson .icon:hover { border-color: var(--crimson-accent); }
html.crimson .submenu li a { background: var(--crimson-surface); border: 1px solid var(--crimson-border); }
html.crimson .submenu li a:hover, html.crimson .submenu li a.active { background: var(--crimson-accent); border-color: var(--crimson-accent-dark); color: #fff; }

/* dlaždice: bílé karty jako v předloze, rozlišuje je barevná placka a číslo */
html.crimson .dashboard-tile { --tile-bg: #fff; --tile-border: #e3e5e8; }
html.crimson .dashboard-tile-icon { border-radius: 8px; }
html.crimson .dashboard-tile-count { color: var(--tile-ink, var(--crimson-accent)); font-size: 2.4em; }
html.crimson .dashboard-tile-label { color: var(--crimson-text-dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
html.crimson .dashboard-tile:hover { border-color: var(--tile-ink, var(--crimson-accent)); }

/* Filtrovací lišta modulů (.group) — v main.css tmavě šedá #444 s bílým textem
   a zeleným aktivním stavem. V karmínovém motivu ploché světlé segmenty
   s tenkým rámečkem a karmínovým aktivním stavem. */
html.crimson .group a, html.crimson .group .wrap { background: var(--crimson-surface); border: 1px solid var(--crimson-border); color: var(--crimson-text); }
html.crimson .group a:hover { background: var(--crimson-accent-soft); border-color: var(--crimson-accent); color: var(--crimson-accent); }
html.crimson .group a.active { background: var(--crimson-accent); border-color: var(--crimson-accent-dark); color: #fff; }
html.crimson .group a:first-child, html.crimson .group .wrap:first-child { border-radius: 6px 0 0 6px; }
html.crimson .group a:last-child, html.crimson .group .wrap:last-child { border-radius: 0 6px 6px 0; }

/* Rozbalovací seznamy v liště (Rok, Na stránku). Šipka je v main.css bílý PNG
   (img/arrow_bottom.png, 10×5 px) pro tmavý podklad — na světlém by zmizela,
   proto se nahrazuje tmavou SVG. Mění se jen background-color a -image,
   aby zůstala pozice šipky, kterou main.css nastavuje pro každou variantu
   selectu zvlášť (.wrap-select.year, .limit, .websites). */
html.crimson .group .wrap-select select { background-color: var(--crimson-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5'%3E%3Cpath d='M0 0h10L5 5z' fill='%2314161a'/%3E%3C/svg%3E"); color: var(--crimson-text); }

/* časová osa kalendáře */
html.crimson .cal-timeline-track { background: var(--crimson-surface-2); border: 1px solid var(--crimson-border); }
html.crimson .cal-track-holiday { background: #edeae1; }
html.crimson .cal-timeline-hour, html.crimson .cal-timeline-label,
html.crimson .cal-timeline-empty, html.crimson .cal-legend-item { color: var(--crimson-text-dim); }

/* patička */
html.crimson #foot, html.crimson #foot a { color: var(--crimson-text-dim); }

/******************************************************************************/
/* Ovládání viditelnosti dlaždic dashboardu                                   */
/* Křížek pro skrytí je v nadpisu bloku; grafy nadpis nemají, u nich sedí     */
/* v .block-tools vpravo nahoře. Barva se dědí (currentColor), takže funguje  */
/* ve všech čtyřech schématech bez dalších pravidel. Základní průhlednost je  */
/* nenulová záměrně — na dotykových zařízeních není hover.                    */
/******************************************************************************/

/* Ovládací prvky (šipky + křížek) drží pohromadě v .block-tools; auto margin má
   jen ten obal. Kdyby ho měl každý prvek zvlášť, flexbox by mezi ně volné místo
   rozdělil rovnoměrně a šipky by skončily uprostřed nadpisu. Float tu nepomůže —
   .block h2 je flexbox a float by se v něm ignoroval. */
.block-hide { color: inherit; font-size: 14px; opacity: .28; text-decoration: none; transition: opacity .15s ease; }
.block:hover .block-hide, .dashboard-tiles:hover .block-hide { opacity: .6; }
.block-hide:hover { opacity: 1 !important; }
/* blok bez nadpisu (grafy): .block-tools je blokový prvek a musí být flex,
   jinak by se zarovnání doprava neuplatnilo */
.block-tools { align-items: center; display: flex; gap: 9px; justify-content: flex-end; line-height: 1; min-height: 14px; }
.block h2 .block-tools { flex: 0 0 auto; margin-left: auto; }   /* jediný auto margin v nadpisu */
/* Pruh dlaždic: křížek v pravém horním rohu MIMO TOK. Pruh je flexbox, a kdyby
   v něm křížek zůstal jako položka, jeho float by zkolaboval výšku obalu na nulu
   (odtud „zub") a při zaplněném řádku by se navíc zalomil na vlastní řádek.
   Místo toho si pruh vyhradí místo padding-rightem, takže do něj karty nezasahují
   a křížek lícuje s jejich horní i pravou hranou. */
/* right: 20px = vnitřní odsazení .block, takže křížek pruhu stojí na stejné
   svislici jako křížky v nadpisech ostatních bloků */
/* Křížek pruhu dlaždic sedí v POSLEDNÍ dlaždici, v jejím pravém horním rohu.
   Dlaždice je odkaz, a protože odkaz nelze vnořit do odkazu, obaluje ji div,
   který přebírá její flexové rozměry a slouží jako kotva pro absolutní
   umístění. Řeší to i zalamování: křížek je vždy u té dlaždice, ke které
   patří, ať se pruh zalomí na kolik řádků chce. */
/* box-sizing: border-box na obou — dokument jinak počítá content-box, takže by
   se k flex-basis dlaždice připočetl ještě její padding (2×18 px) a obalená
   dlaždice by vyšla o 38 px užší než ostatní */
.dashboard-tile-wrap { box-sizing: border-box; display: flex; flex: 1 1 190px; position: relative; }
.dashboard-tile-wrap > .dashboard-tile { flex: 1 1 auto; }
.dashboard-tile-wrap > .block-tools { position: absolute; right: 18px; top: 18px; }
.dashboard-tile-wrap .dashboard-tile-head { padding-right: 22px; }   /* místo pro křížek vedle trendu */
.dashboard-tiles .block-tools { gap: 9px; }

/* vysvětlivka pod skupinou checkboxů ve formuláři uživatele */
.note { display: inline-block; font-size: 12px; margin-top: 6px; opacity: .7; }

/* lišta skrytých dlaždic používá stejné pilulky jako ostatní filtry v blocích */
#tiles-hidden .dispatch-filter { flex-wrap: wrap; }

/******************************************************************************/
/* Tlačítka s tmavým podkladem — napříč všemi motivy                          */
/*                                                                            */
/* .table-list td a (specificita 0,1,2) přebíjí .button-submit { color: #fff }*/
/* z main.css, takže text vycházel skoro černý na tmavě šedém tlačítku        */
/* (kontrast 1,8:1 ve světlém, pastelovém i karmínovém motivu). Musí to stát  */
/* AŽ ZA bloky motivů a se selektorem od `html` — html.crimson .table-list td */
/* a má specificitu (0,2,3), tedy o jeden element víc než (0,2,2); bez `html`  */
/* by karmínový motiv vyhrál. Takto je specificita shodná a rozhoduje pořadí.  */
/*                                                                            */
/* Týká se jen tříd s tmavým podkladem; .button, .back, .button-submit-inverse*/
/* a .button-submit-yellow mají světlý podklad a tmavý text je u nich správně.*/
/******************************************************************************/

html .table-list td a.button-submit,
html .table-list td a.button-black,
html .table-list td a.button-gray { color: #fff; }

/******************************************************************************/
/* Modul „Nejbližší akce" (blok #events na dashboardu, js/event.js)           */
/*                                                                            */
/* Dvě skupiny jako u odkazů (firemní / moje). V klidu je vidět jen odpočet,  */
/* název a termín; pole, mazání, řádek pro přidání a PROBĚHLÉ akce odkrývá    */
/* až režim úprav (.event-edit-mode na bloku), který zapíná tužka v nadpisu.  */
/******************************************************************************/

.event-group + .event-group { margin-top: 14px; }
.event-group-title { color: #6b7280; font-size: 11px; letter-spacing: .05em; margin-bottom: 6px; text-transform: uppercase; }

.event-items { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; }
.event-item { align-items: baseline; display: flex; gap: 8px; }

/* odpočet je hlavní údaj — pilulka s barvou podle naléhavosti */
.event-count { border-radius: 999px; flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 2px 8px; white-space: nowrap; }
.event-state-now    { background: #dc2626; color: #fff; }
.event-state-today  { background: #f59e0b; color: #111; }
.event-state-soon   { background: rgba(0,0,0,.07); }
.event-state-future { background: rgba(0,0,0,.05); color: #6b7280; }
.event-state-past   { background: rgba(0,0,0,.05); color: #9ca3af; }

.event-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* akce s odkazem — název je proklik, poznat se má podtržením až po najetí */
a.event-a { color: inherit; text-decoration: none; }
a.event-a:hover { text-decoration: underline; }
.event-when { color: #9ca3af; flex: 0 0 auto; font-size: 11px; }
.event-empty { color: #9ca3af; font-size: 12px; }

/* proběhlé akce se ukazují jen v režimu úprav, aby se daly odklidit */
.event-past { display: none; }
.event-edit-mode .event-item-edit.event-past { display: flex; opacity: .7; }

.event-edit-row { display: none; }
.event-add { display: none; }
.event-edit-mode .event-edit-row { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.event-edit-mode .event-item-edit .event-count,
.event-edit-mode .event-item-edit .event-title,
.event-edit-mode .event-item-edit .event-when { display: none; }
.event-edit-mode .event-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* pole s adresou zabírá vlastní řádek, takže fajfka s košem spadnou až pod něj;
   větší rozestup v režimu úprav dá najevo, ke které akci patří */
.event-edit-mode .event-items { gap: 12px; }

.event-edit-row input, .event-add input { border: 1px solid #d1d5db; border-radius: 8px; font-size: 12px; min-width: 0; padding: 4px 8px; }
.event-edit-title, .event-add-title { flex: 1 1 45%; }
/* adresa je delší než ostatní pole — vlastní řádek, ať se nemačká */
.event-edit-url, .event-add-url { flex: 1 1 100%; }
.event-edit-save, .event-del, .event-add-button { color: inherit; flex: 0 0 auto; opacity: .55; text-decoration: none; }
.event-edit-save:hover, .event-del:hover, .event-add-button:hover { opacity: 1; }

.event-busy { opacity: .6; }

/******************************************************************************/
/* Modul „Rychlé odkazy" (blok #links na dashboardu, js/link.js)              */
/*                                                                            */
/* Dvě skupiny pod sebou: firemní a moje. Nástroje (úchyt, křížek) se ukazují */
/* až po najetí, stejně jako u poznámek — v klidu má být vidět jen odkaz.     */
/******************************************************************************/

.link-group + .link-group { margin-top: 14px; }
.link-group-title { color: #6b7280; font-size: 11px; letter-spacing: .05em; margin-bottom: 6px; text-transform: uppercase; }

.link-items { list-style: none; margin: 0; padding: 0; }
/* obě rozvržení používají flex s mezerou — svisle pod sebou, nebo vedle
   sebe se zalamováním; align-items: flex-start drží položky u obsahu */
.link-layout-stack .link-items { align-items: flex-start; display: flex; flex-direction: column; gap: 4px; }
/* width: fit-content — položka je široká jen podle obsahu, ale zůstává
   blokovým prvkem, takže v rozvržení „pod sebou" je dál jedna na řádek.
   Bez toho se přes celý blok táhlo i podbarvení a plocha pro najetí. */
.link-item { align-items: center; border-radius: 8px; display: flex; gap: 6px; max-width: 100%; padding: 4px 6px; width: fit-content; }
.link-item:hover { background: rgba(0,0,0,.04); }

.link-a { color: inherit; flex: 1 1 auto; min-width: 0; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.link-a:hover { color: var(--highlight-dark); text-decoration: underline; }

/* V KLIDU je vidět jen odkaz — žádné ovládání, ani po najetí myší.
   Vše ostatní odkrývá až režim úprav (třída .link-edit-mode na bloku),
   který zapíná tužka v nadpisu bloku a platí pro celý seznam naráz. */
.link-edit-row { display: none; }
.link-add { display: none; }

.link-edit-mode .link-edit-row { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.link-edit-mode .link-item .link-a { display: none; }
.link-edit-mode .link-item { width: 100%; }
.link-edit-mode .link-add { display: flex; }
/* Řádek úprav se v úzké dlaždici zalamuje a fajfka s košem spadnou pod pole.
   Ve výchozí mezeře 4 px by pak nebylo poznat, ke které položce patří —
   v režimu úprav se proto rozestup zvětší. */
.link-edit-mode .link-layout-stack .link-items,
.link-edit-mode .link-layout-inline .link-items { gap: 12px; }

.link-grip { color: inherit; cursor: grab; flex: 0 0 auto; font-size: 12px; opacity: .35; text-decoration: none; }
.link-edit-row input { border: 1px solid #d1d5db; border-radius: 8px; font-size: 12px; min-width: 0; padding: 4px 8px; }
.link-edit-title { flex: 0 1 30%; }
.link-edit-url { flex: 1 1 40%; }
.link-edit-save, .link-del { color: inherit; flex: 0 0 auto; opacity: .55; text-decoration: none; }
.link-edit-save:hover, .link-del:hover { opacity: 1; }

.link-empty { color: #9ca3af; font-size: 12px; padding: 4px 6px; }

.link-add { gap: 6px; margin-top: 8px; }
.link-add input { border: 1px solid #d1d5db; border-radius: 8px; font-size: 12px; min-width: 0; padding: 4px 8px; }
.link-add-title { flex: 0 1 40%; }
.link-add-url { flex: 1 1 60%; }
.link-add-button { align-self: center; color: inherit; opacity: .5; text-decoration: none; }
.link-add-button:hover { opacity: 1; }

.link-busy { opacity: .6; }

/* --- podbarvení odkazu (paleta shodná s poznámkami) ---------------------- */

.link-color-yellow { background: #fef9c3; }
.link-color-pink   { background: #fce7f3; }
.link-color-blue   { background: #dbeafe; }
.link-color-green  { background: #dcfce7; }
.link-color-purple { background: #ede9fe; }
.link-color-gray   { background: #f1f5f9; }
/* podbarvený odkaz si drží barvu i při najetí, jinak by pod kurzorem zmizela */
.link-item[class*="link-color-"]:hover { filter: brightness(.96); }

/* výběr barvy v nástrojích položky — puntíky jako u poznámek */
.link-colors { display: flex; flex: 0 0 auto; gap: 4px; }
.link-color { border: 1px solid rgba(0,0,0,.15); border-radius: 50%; display: inline-block; height: 10px; text-decoration: none; width: 10px; }
.link-color.active { box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.link-color-swatch-none   { background: transparent; }
.link-color-swatch-yellow { background: #fef9c3; }
.link-color-swatch-pink   { background: #fce7f3; }
.link-color-swatch-blue   { background: #dbeafe; }
.link-color-swatch-green  { background: #dcfce7; }
.link-color-swatch-purple { background: #ede9fe; }
.link-color-swatch-gray   { background: #f1f5f9; }

/* --- rozvržení: pod sebou (výchozí) / vedle sebe ------------------------- */

/* vedle sebe: z položek jsou pilulky, které se lámou do dalšího řádku.
   Úchyt pro přetažení se skrývá — v řádkovém rozvržení nedává smysl svisle
   přetahovat a zabíral by místo; pořadí se dá srovnat po přepnutí zpět. */
.link-layout-inline .link-items { display: flex; flex-wrap: wrap; gap: 6px; }
.link-layout-inline .link-item { border: 1px solid rgba(0,0,0,.1); border-radius: 999px; padding: 3px 10px; width: auto; }
/* v režimu úprav zabere položka celý řádek i v pilulkovém rozvržení;
   selektor musí přebít .link-layout-inline .link-item výše (0,2,0) */
.link-edit-mode .link-layout-inline .link-item { border-radius: 8px; flex: 1 1 100%; width: 100%; }
.link-layout-inline .link-a { flex: 0 1 auto; max-width: 220px; }
.link-layout-inline .link-grip { display: none; }
/* …ale v režimu úprav se pilulky stejně přerovnají na řádky přes celou šířku
   (pravidlo o kus výš), takže svislé přetahování dává smysl i tady — bez úchytu
   by v tomhle rozvržení nešlo měnit pořadí vůbec */
.link-edit-mode .link-layout-inline .link-grip { display: inline-block; }
/* místo, kam odkaz při přetahování spadne (jQuery UI sortable) */
.link-placeholder { background: rgba(0,0,0,.03); border: 1px dashed rgba(0,0,0,.25); border-radius: 8px; flex: 1 1 100%; list-style: none; width: 100%; }
.link-layout-inline .link-empty { border: 0; }

/******************************************************************************/
/* Modul „Moje poznámky" (blok #notes na dashboardu, js/note.js)              */
/*                                                                            */
/* Lístek je <li class="note note-<barva>">: úchyt pro přetažení, editovatelný */
/* text a nástroje vpravo. Nástroje se ukazují až po najetí — v klidu má       */
/* lístek být čistý; připnutý špendlík zůstává vidět vždy, jinak by nebylo     */
/* poznat, proč je poznámka nahoře. Barvy nesou klíč z note_colors().          */
/******************************************************************************/

#note-list { list-style: none; margin: 0 0 12px 0; padding: 0; }

.note { align-items: flex-start; border: 1px solid; border-radius: 12px; display: flex; gap: 8px; margin-bottom: 8px; padding: 12px 12px 12px 8px; position: relative; }
.note:last-child { margin-bottom: 0; }

.note-grip { color: rgba(0,0,0,.28); cursor: grab; flex: 0 0 auto; font-size: 13px; line-height: 1.5; padding-top: 2px; }
.note-grip:active { cursor: grabbing; }

/* text a štítky jsou v obalu .note-body — do contenteditable nesmí přijít nic,
   co není text poznámky, jinak by se to uložilo spolu s ním (js/note.js .text()) */
.note-body { flex: 1 1 auto; min-width: 0; }
.note-text { line-height: 1.45; min-height: 1.45em; outline: 0; word-break: break-word; }
.note-text:focus { box-shadow: 0 0 0 2px rgba(0,0,0,.12); border-radius: 4px; }
/* URL v poznámce je odkaz (vykresluje note_text_html(), otevírá js/note.js).
   Barva se dědí z lístku — ten má vlastní pastelové pozadí v každém motivu,
   takže odkaz odlišuje podtržení, ne barva. */
.note-text a { color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.note-text a:hover { opacity: .7; }

/* Nástroje lístku — v klidu skryté, na dotykových zařízeních se ukážou po ťuknutí.
   Viditelnost se řídí po JEDNOTLIVÝCH prvcích, ne na celé liště: stavové ikony
   (špendlík u připnuté, vlaječka u prioritní) mají zůstat vidět i bez najetí,
   kdežto ostatní nástroje se schovají. Dřív se schovávala celá lišta a výjimky
   se dopisovaly ručně — po přidání termínu a zakázky pak u připnutého lístečku
   svítila i tahle dvě pole. */
.note-tools { align-items: center; display: flex; flex: 0 0 auto; gap: 5px; }
.note-tools > * { opacity: 0; transition: opacity .15s ease; }
.note:hover .note-tools > *, .note:focus-within .note-tools > * { opacity: 1; }

/* stavové ikony zůstávají i v klidu */
.note-pinned .note-pin, .note-priority-on .note-priority, .note-waiting-on .note-waiting { opacity: 1; }

.note-color { border: 1px solid rgba(0,0,0,.15); border-radius: 50%; display: inline-block; height: 12px; text-decoration: none; width: 12px; }
.note-color.active { box-shadow: 0 0 0 2px rgba(0,0,0,.35); }

.note-pin, .note-del, .note-priority, .note-waiting { color: rgba(0,0,0,.45); font-size: 13px; margin-left: 3px; text-decoration: none; }
.note-pin:hover, .note-del:hover, .note-priority:hover, .note-waiting:hover { color: rgba(0,0,0,.8) !important; }
.note-pinned .note-pin { color: rgba(0,0,0,.75); transform: rotate(45deg); }

.note-empty { color: #6b7280; margin: 0 0 12px 0; }

/* --- úkolový režim lístečku (docs/sql/2026-09-10-note-todo.sql) ------------ */

/* odškrtávátko je vidět vždy, na rozdíl od ostatních nástrojů — je to hlavní
   akce úkolu a schovávat ji pod hover by znamenalo hledat, kam kliknout */
.note-check { color: inherit; flex: 0 0 auto; font-size: 14px; line-height: 1.45; opacity: .45; text-decoration: none; transition: opacity .15s ease; }
.note-check:hover { opacity: 1; }

/* hotový úkol: přeškrtnutý a ztlumený; v seznamu klesá dolů (řadí SQL) */
.note-done { opacity: .55; }
.note-done .note-text { text-decoration: line-through; }
.note-done .note-check { opacity: .8; }

/* Priorita: červený rámeček se silným proužkem vlevo a červená vlaječka, která
   je vidět i bez najetí myší (viz pravidla nástrojů výše). Samotný proužek byl
   málo — v klidu o prioritě nic jiného nevypovídalo.
   Selektor .note.note-priority-on je zdvojený schválně: barvy lístků
   (.note-yellow…) jsou v souboru AŽ ZA tímhle pravidlem a při shodné
   specificitě by jejich border-color vyhrálo. */
.note.note-priority-on { border-color: #dc2626; border-left-width: 4px; }
.note-priority-on .note-priority { color: #dc2626 !important; }

/* Nadpisy skupin v bloku „Moje termíny" — drobný popisek verzálkami jako
   .link-group-title u odkazů a .note-section u poznámek, ale s JEMNÝM
   podbarvením: sotva znatelný pruh se zaoblenými rohy, ne šedý blok jako
   dřívější .key z main.css.
   Odstup nad skupinou dělá PRŮHLEDNÝ horní okraj spolu s background-clip:
   padding-box — pozadí se pod okraj nekreslí, takže vznikne mezera, aniž by
   se muselo sahat na border-spacing celé tabulky.
   Zaoblení na buňce funguje proto, že výpisové tabulky nikde nenastavují
   border-collapse, platí tedy výchozí separate. Hover se přepisuje na stejnou
   barvu, jinak by nadpis reagoval na myš jako řádek s daty. */
.table-list tr.dl-section td { background: rgba(0,0,0,.035); background-clip: padding-box; border-radius: 6px; border-top: 10px solid transparent; color: #6b7280; font-size: 11px; letter-spacing: .05em; padding: 4px 8px; text-transform: uppercase; }
.table-list tr.dl-section:first-child td { border-top-width: 2px; }
.table-list tr.dl-section:hover td { background: rgba(0,0,0,.035); }
/* main.css dává všem ikonám v obsahu 16 px (#content .fa) — vedle popisku
   o velikosti 11 px pak působí předimenzovaně; srovnáno s textem */
.dl-section .fa { font-size: 12px; margin-right: 5px; }

/* Text termínu se nesmí lámat po slovech: prázdný sloupec s width:100% na konci
   řádku (drží vazbu hned za textem) jinak stlačí textový sloupec na nejužší
   možnou šířku. Dlouhý název se proto ořízne třemi tečkami — celý zůstává
   v title atributu, který přidává short_text(). */
.dl-title { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-section-count { opacity: .65; }

/* Stav „Čekám na…" — věc není na mně. Přerušovaný okraj a ztlumení odlišují
   čekání od vlastní práce, přesýpací hodiny zůstávají vidět i v klidu
   (stejně jako špendlík u připnuté a vlaječka u prioritní). */
.note.note-waiting-on { border-style: dashed; opacity: .85; }
/* stejná šedá jako u zapnutého připínáčku — hnědá se do palety lístečků nehodila */
.note-waiting-on .note-waiting { color: rgba(0,0,0,.75); }

/* nadpis oddělující čekací lístečky od vlastních úkolů */
.note-section { color: #6b7280; font-size: 11px; letter-spacing: .05em; list-style: none; margin: 10px 0 4px 0; text-transform: uppercase; }
.note-section .fa { font-size: 12px; margin-right: 5px; }

/* štítky pod textem: termín a zakázka */
.note-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.note-chip { align-items: center; background: rgba(0,0,0,.06); border-radius: 999px; color: inherit; display: inline-flex; font-size: 11px; gap: 4px; padding: 2px 8px; text-decoration: none; }
a.note-chip:hover { background: rgba(0,0,0,.12); }
.note-chip-late { background: #dc2626; color: #fff; }

/* pole pro termín a zakázku se ukazují s nástroji; :focus-within je nutné,
   aby nezmizela ve chvíli, kdy myš odjede k otevřenému kalendáříku */
.note-date, .note-co { border: 1px solid rgba(0,0,0,.15); border-radius: 6px; font-size: 11px; padding: 1px 4px; }
.note-co { width: 72px; }


/* řádek pro novou poznámku */
.note-add { align-items: center; display: flex; gap: 8px; }
.note-add-colors { display: flex; flex: 0 0 auto; gap: 4px; }
.note-add-color { border: 1px solid rgba(0,0,0,.15); border-radius: 50%; display: inline-block; height: 13px; text-decoration: none; width: 13px; }
.note-add-color.active { box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.note-add-text { border: 1px solid var(--tile-border, #e5e7eb); border-radius: 10px; flex: 1 1 auto; font-size: 1em; padding: 10px 12px; }
/* Oranžová z návrhu (#f59e0b) dává bílému „+" kontrast jen 2,15:1, což
   nesplňuje ani hranici 3:1 pro grafické prvky — proto tmavší odstín (5,02:1). */
.note-add-button { align-items: center; background: #b45309; border-radius: 10px; color: #fff !important; display: flex; flex: 0 0 auto; font-size: 15px; height: 38px; justify-content: center; text-decoration: none; transition: filter .15s ease; width: 44px; }
.note-add-button:hover { filter: brightness(1.08); }

/* během ukládání blok mírně zešedne, aby bylo poznat, že se čeká na server */
.note-busy { opacity: .6; }

/* barevné varianty lístku (klíče z note_colors()) */
.note-yellow { background: #fef9c3; border-color: #fde68a; }
.note-pink   { background: #fce7f3; border-color: #fbcfe8; }
.note-blue   { background: #dbeafe; border-color: #bfdbfe; }
.note-green  { background: #dcfce7; border-color: #bbf7d0; }
.note-purple { background: #ede9fe; border-color: #ddd6fe; }
.note-gray   { background: #f1f5f9; border-color: #e2e8f0; }

.note-color-yellow { background: #fde68a; }
.note-color-pink   { background: #fbcfe8; }
.note-color-blue   { background: #bfdbfe; }
.note-color-green  { background: #bbf7d0; }
.note-color-purple { background: #ddd6fe; }
.note-color-gray   { background: #e2e8f0; }

/* Tmavý motiv: syté pastely by svítily, proto tlumené tóny a světlý text.
   Odstíny puntíků zůstávají světlé, aby byla paleta na první pohled čitelná. */
html.dark .note { color: var(--dark-text); }
html.dark .note-grip { color: rgba(255,255,255,.32); }
html.dark .note-text:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
html.dark .note-pin, html.dark .note-del, html.dark .note-priority, html.dark .note-waiting { color: rgba(255,255,255,.55); }
html.dark .note-pin:hover, html.dark .note-del:hover, html.dark .note-priority:hover, html.dark .note-waiting:hover { color: #fff !important; }
html.dark .note-waiting-on .note-waiting { color: rgba(255,255,255,.85); }
html.dark .note-section { color: var(--dark-text-dim); }
html.dark .note-pinned .note-pin { color: rgba(255,255,255,.85); }
html.dark .note-color { border-color: rgba(255,255,255,.2); }
html.dark .note-color.active, html.dark .note-add-color.active { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
html.dark .note-add-color { border-color: rgba(255,255,255,.2); }
html.dark .note-add-text { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
html.dark .note-empty { color: var(--dark-text-dim); }
html.dark .link-item:hover { background: rgba(255,255,255,.07); }
html.dark .event-group-title, html.dark .event-when, html.dark .event-empty { color: var(--dark-text-dim); }
html.dark .event-state-soon { background: rgba(255,255,255,.12); }
html.dark .event-state-future, html.dark .event-state-past { background: rgba(255,255,255,.08); color: var(--dark-text-dim); }
html.dark .event-edit-row input, html.dark .event-add input { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
html.dark .link-group-title, html.dark .link-empty { color: var(--dark-text-dim); }
html.dark .link-add input, html.dark .link-edit-row input { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
html.dark .link-placeholder { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.25); }
html.dark .link-color-yellow { background: #3a3524; }
html.dark .link-color-pink   { background: #3a2430; }
html.dark .link-color-blue   { background: #1e2b3f; }
html.dark .link-color-green  { background: #22371f; }
html.dark .link-color-purple { background: #2d2743; }
html.dark .link-color-gray   { background: #2a2f38; }
html.dark .link-color { border-color: rgba(255,255,255,.2); }
html.dark .link-color.active { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
html.dark .link-layout-inline .link-item { border-color: rgba(255,255,255,.15); }
html.dark .note-chip { background: rgba(255,255,255,.12); }
html.dark a.note-chip:hover { background: rgba(255,255,255,.2); }
html.dark .note-date, html.dark .note-co { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
html.dark .note-check { color: rgba(255,255,255,.6); }
html.dark .note.note-priority-on { border-color: #f87171; }
html.dark .note-priority-on .note-priority { color: #f87171 !important; }

html.dark .note-yellow { background: #3a3524; border-color: #554d2f; }
html.dark .note-pink   { background: #3a2430; border-color: #55344a; }
html.dark .note-blue   { background: #1e2b3f; border-color: #2d425f; }
html.dark .note-green  { background: #22371f; border-color: #34532f; }
html.dark .note-purple { background: #2d2743; border-color: #423a63; }
html.dark .note-gray   { background: #2a2f38; border-color: #3a4150; }

/* Dvojšipka u stavu menu ve výpisu uživatelů (user.php) — zmenšená na 75 %,
   aby vedle textu nepřebíjela samotný údaj. Selektor musí začínat #content:
   main.css:183 dává všem ikonám uvnitř #content font-size: 16px se specificitou
   (1,1,0), samotná třída (0,1,0) by prohrála. */
#content .us-menu-icon { font-size: 12px; }

/* ---------------------------------------------------------------------------
   Chat (2026-09-22)
   Vlákno u zakázky. Barvy se berou z proměnných, aby to sedělo i v tmavém
   motivu bez druhé sady pravidel — výjimkou je vlastní zpráva a zvýraznění
   nové, kde je potřeba jiný odstín pro světlo a tmu.
   --------------------------------------------------------------------------- */

.chat-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.chat-message {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
}
.chat-message-own { background: #f4f8f0; border-color: #dfe8d4; }
.chat-message-new { border-left: 3px solid var(--highlight); }
.chat-message-deleted { opacity: .65; }

.chat-message-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.chat-message-time { color: #6b7280; font-size: 11px; }
.chat-message-edited { color: #6b7280; font-size: 11px; font-style: italic; }
.chat-message-text { word-break: break-word; }

.chat-mention { background: rgba(249,210,1,.35); border-radius: 3px; padding: 0 3px; font-weight: 600; }

.chat-message-actions { display: flex; gap: 10px; margin-top: 4px; }
.chat-inline-form { display: inline; margin: 0; }
.chat-link {
    background: none; border: 0; padding: 0;
    color: #6b7280; font-size: 11px; cursor: pointer; text-decoration: underline;
}
.chat-message-actions .chat-edit { color: #6b7280; font-size: 11px; }
.chat-link:hover, .chat-message-actions .chat-edit:hover { color: var(--highlight-dark); }

/* odznáček s počtem nepřečtených u ikony v hlavičce
   Selektor musí být dvouIDčkový: #account-actions a (1,0,1) výše nastavuje
   position: static, takže samotné #chat-icon (1,0,0) prohraje a odznáček by se
   navěsil na celý sloupec ikon místo na bublinu. Nahlásil uživatel 2026-09-22. */
#account-actions #chat-icon { position: relative; }
.chat-badge {
    position: absolute; top: -6px; right: -8px;
    min-width: 16px; height: 16px; padding: 0 4px;
    box-sizing: border-box;
    background: var(--highlight-dark); color: #fff;
    border-radius: 8px;
    font-family: inherit; font-size: 10px; font-weight: 700; line-height: 16px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Plovoucí okno chatu (2026-09-23)

   Umístění: jeden sloupec ikon úplně vpravo dole — zdola AI chat, bublina
   chatu, nad nimi zkratky. Otevřené okno stojí vlevo od sloupce (62 px =
   8 + 46 + 8); jen když by sloupec zůstal prázdný, bublina se schová a okno
   si sedne do jeho pruhu.
   --------------------------------------------------------------------------- */

/* Jeden společný sloupec úplně vpravo: zdola AI chat (umístěný v tpl/foot.php),
   nad ním tahle bublina, nad ní zkratky. Roh je volný, protože se šipka
   #scroll-down přestěhovala nahoru (viz pravidlo výš). */
.chat-widget-toggle {
    position: fixed; right: 8px; bottom: 8px; z-index: 9998;
    width: 46px; height: 46px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    /* Inverzní ladění k bublině AI chatu (rozhodl uživatel 2026-09-23): bílá
       plocha, zelený znak, jemný obrys. Obrys je tu nutnost, ne ozdoba —
       bílá má proti světlému pozadí systému kontrast 1,10, takže bez něj
       by bublinu držel jen stín. */
    background: #fff; color: var(--highlight-dark);
    border: 1px solid #e0e3e7; border-radius: 50%;
    font-size: 20px; text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    transition: transform .15s ease;
}
/* Hover nemění barvu, ale velikost — stejně jako bublina AI chatu
   (zadal uživatel 2026-09-23). */
.chat-widget-toggle:hover { color: var(--highlight-dark); transform: scale(1.08); }
html.has-chat .chat-widget-toggle { bottom: 62px; }

/* Sloupec zkratek roste NAHORU nad hlavní bublinou (námět uživatele 2026-09-23,
   podle Facebooku). Vodorovná řada by se táhla přes 270 px spodní hrany, kde
   jsou patičky, pravé okraje tabulek a #scroll-down; svislý pruh je široký 46 px
   a pravý okraj nad rohem bývá prázdný. Hlavně ale nechá volný levý bok, takže
   se okno otevře VEDLE sloupce, ne přes něj — v tom je celý smysl zkratek. */
.chat-pins {
    position: fixed; right: 8px; bottom: 62px; z-index: 9998;
    display: flex; flex-direction: column-reverse; gap: 8px;
}
html.has-chat .chat-pins { bottom: 116px; }
.chat-pins:empty { display: none; }

.chat-pin-bubble {
    position: relative;
    width: 46px; height: 46px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--highlight-dark);
    border: 1px solid #e0e3e7; border-radius: 50%;
    font-size: 17px; text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    transition: transform .15s ease;
}
.chat-pin-bubble:hover { color: var(--highlight-dark); transform: scale(1.08); }
/* právě otevřená konverzace */
.chat-pin-bubble-active { border-color: var(--highlight-dark); border-width: 2px; }

/* Zástupce rozbaleného AI chatu: sedí přesně na místě jeho sbalené bubliny,
   tedy na dně sloupce, a nese kroužek „otevřeno". Klik ho zavře (js/chat.js).

   Barva je opsaná z komponenty (--za-accent), aby oba stavy téže věci vypadaly
   stejně — ve světlém motivu modrozelená, v tmavém zelená, přesně jak to dělá
   ona. Naše zeleň by tu byla cizí prvek: sbalená bublina AI chatu vedle
   modrozelená není. */
.chat-ai-stand-in {
    position: fixed; right: 8px; bottom: 8px; z-index: 9998;
    color: hsl(174 79% 25%);
    border-color: hsl(174 79% 25%); border-width: 2px;
}
.chat-ai-stand-in:hover { color: hsl(174 79% 25%); }
.chat-ai-stand-in[hidden] { display: none; }

.chat-pin-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    background: #d92d20; color: #fff;
    border: 2px solid #e0e3e7; border-radius: 9px;
    font-family: inherit; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
}
.chat-pin-badge[hidden], .chat-pin-bubble[hidden] { display: none; }

/* Se zkratkami zůstává sloupec viditelný i s otevřeným oknem — jinak by se
   mezi konverzacemi nedalo přepínat bez zavírání. Okno proto uhne doleva
   o šířku bubliny. Bez zkratek platí dál to jednodušší: bublina se schová
   a okno si sedne na její místo. */
/* Okno stojí vedle sloupce. Když ve sloupci nic nezůstane (žádný AI chat ani
   zkratky), bublina se schová a okno si sedne do jeho pruhu. */
html.has-chat .chat-widget,
html.has-pins .chat-widget { right: 62px; }

/* špendlík v záhlaví okna */
/* Aktivní špendlík v záhlaví okna. Samotné .chat-widget-pin-on (0,1,0) dřív
   prohrávalo s obecným .chat-widget-head a (0,1,1) níže, takže přišpendlená
   konverzace měla stejně šedý špendlík jako nepřišpendlená. Kromě barvy má
   i podklad — u malé ikony by samotná změna barvy byla málo znát. */
.chat-widget-head a.chat-widget-pin-on {
    background: rgba(110,180,63,.16); border-radius: 6px; color: var(--highlight-dark);
}
.chat-widget-head a.chat-widget-pin-on:hover { background: rgba(110,180,63,.26); }

/* přišpendlení na plné stránce */
/* Blok, ne inline: dřív se tlačítko dotýkalo výpisu zpráv (naměřeno 0 px). */
.chat-pin-form { display: block; margin: 0 0 14px; }

/* Řádek pod nadpisem Diskuze: vlevo viditelnost (.chat-vis), vpravo zkratka
   (mod/chat/thread.php, od 24. 9.). margin-left: auto drží zkratku vpravo, i
   když se řádek na úzké obrazovce zalomí. Svislé odstupy zůstávají, jak je
   uživatel odsouhlasil 23. 9.: od nadpisu 5 px (-2 px vůči okraji h4),
   k výpisu zpráv 14 px. */
.chat-thread-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -2px 0 14px; }
.chat-thread-meta .chat-vis,
.chat-thread-meta .chat-pin-form { margin: 0; }
.chat-thread-meta .chat-pin-form { margin-left: auto; }
.chat-pin-toggle {
    background: none; border: 0; cursor: pointer; padding: 0;
    color: #6b7280; font-family: inherit; font-size: 12px; text-decoration: none;
}
.chat-pin-toggle .fa { margin-right: 5px; }
/* podtržený je jen text; podtržítko pod špendlíkem vypadalo jako překlep */
.chat-pin-label { text-decoration: underline; }
.chat-pin-toggle:hover { color: var(--highlight-dark); }
.chat-pin-toggle-on { color: var(--highlight-dark); }

.chat-widget-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    background: #d92d20; color: #fff;
    /* prstenec má odznáček oddělit od plochy pod ním — na bílé bublině
       by bílý splynul, proto tatáž šeď jako obrys bubliny */
    border: 2px solid #e0e3e7; border-radius: 9px;
    font-family: inherit; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
}

/* FontAwesome dává .fa display:inline-block, takže hidden na prvcích s ikonou
   musí být explicitní — třetí výskyt téhle pasti, viz .chat-edit-form. */
.chat-widget-toggle[hidden], .chat-widget-badge[hidden], .chat-widget[hidden] { display: none; }

/* Bottom je 8 px, ne 62: při otevření se bublina schovává a panel si sedne
   na její místo — zavírá se ikonou „−" v hlavičce. Zařizuje js/chat.js. */
.chat-widget {
    position: fixed; right: 8px; bottom: 8px; z-index: 9998;
    width: 340px; max-width: calc(100vw - 16px);
    height: 460px; max-height: calc(100vh - 100px);
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    overflow: hidden;
}

.chat-widget-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.chat-widget-head {
    display: flex; align-items: center; gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    flex: 0 0 auto;
}
.chat-widget-title { flex: 1 1 auto; min-width: 0; margin: 0 4px; }
.chat-widget-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kdo na zprávy vidí. Otevřená konverzace má jantarovou, soukromá tlumenou
   šeď — pozornost si zaslouží ten stav, kde se člověk může uřeknout. */
.chat-widget-vis {
    display: block; margin-top: 1px;
    color: #6b7280; font-size: 10.5px; font-weight: 400; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* box v em ze stejného důvodu jako u .chat-vis níže; okraj zůstává 4 px,
   řádek je v 222px pruhu a nesmí se rozjet do ořezu */
.chat-widget-vis .fa { font-size: 9.5px; width: 1.25em; text-align: center; margin-right: 4px; }
.chat-widget-vis-open { color: #b45309; }

/* Totéž na plné stránce, pod nadpisem Diskuze. Odsazení je jiné než v okně —
   nadpis h4 má vlastní spodní okraj, takže se řádek přisazuje k němu. */
.chat-vis {
    display: block; margin: -2px 0 10px;
    color: #6b7280; font-size: 12px; line-height: 1.3;
}
/* Mezera se nedá nechat na mezerníku v HTML — vyšla 3,3 px a řádek působil
   slepeně. Ikona si ji proto drží sama.
   width je v em, ne v px: fa-users má v FontAwesome 6 advance 640/512 = 1,25 em,
   tedy 13,75 px při 11px písmu, a do původního boxu 13 px se nevešla — přetékala
   ven a ukrajovala si z vlastního okraje. Ostatní ikony (fa-lock 0,88 em,
   fa-thumbtack 0,75 em) jsou užší a box je vycentruje.
   Okraj je 6 px, ne 5: fa-users kreslí až k hraně své šířky, kdežto zámek
   i špendlík mají po stranách vlastní vzduch, takže při stejném čísle působí
   řádek s panáčky slepeně. */
.chat-vis .fa { font-size: 11px; width: 1.25em; text-align: center; margin-right: 6px; }
.chat-vis-open { color: #b45309; }
html.dark .chat-vis { color: var(--dark-text-dim); }
html.dark .chat-vis-open { color: #e0a44a; }
/* odsazení je kvůli ploše na kliknutí — samotný znak ikony má sotva 10×12 px */
.chat-widget-head a { color: #6b7280; text-decoration: none; padding: 4px; line-height: 1; }
.chat-widget-head a:hover { color: var(--highlight-dark); }
.chat-widget-min .fa { width: 12px; text-align: center; }

/* jediná rolovatelná část okna */
.chat-widget-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.chat-widget-empty { color: #6b7280; font-size: 12px; padding: 14px 12px; text-align: center; }

/* nový chat v okně — výběr kolegy (mod/chat/widget.php, view=new) */
.chat-widget-new-body { padding: 14px 12px; }
.chat-widget-new-form label { color: #374151; display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.chat-widget-new-row { align-items: center; display: flex; gap: 6px; }
.chat-widget-new-row .custom-combobox { flex: 1 1 auto; min-width: 0; }
.chat-widget-new-row .chat-user-pick { width: 100%; }
.chat-widget-new-row button { flex: 0 0 auto; }
.chat-widget-new-note { font-size: 11.5px; margin: 14px 0 0; }
.chat-widget-new-note a { color: #6b7280; }
.chat-widget-new-note a:hover { color: var(--highlight-dark); }
.chat-widget-error { background: #fdecec; border-radius: 6px; color: #b42318; font-size: 12px; margin-bottom: 10px; padding: 7px 9px; }

.chat-widget-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid #f1f2f4;
    color: inherit; font-size: 13px; text-decoration: none;
}
.chat-widget-item:hover { background: #f9fafb; }
.chat-widget-item .fa { color: #9ca3af; width: 14px; text-align: center; }
.chat-widget-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-widget-item-unread .chat-widget-item-name { font-weight: 700; }
.chat-widget-item-pinned, .chat-list-pin { color: var(--highlight-dark); font-size: 10px; }
html.dark .chat-widget-item-pinned, html.dark .chat-list-pin { color: var(--highlight); }
.chat-widget-item-count {
    background: var(--highlight-dark); color: #fff;
    border-radius: 9px; padding: 1px 6px;
    font-size: 10px; font-weight: 700;
}

.chat-widget-msg { padding: 8px 12px; border-bottom: 1px solid #f6f7f8; font-size: 13px; }
.chat-widget-msg-own { background: #f4f8f0; }
.chat-widget-msg-new { border-left: 3px solid var(--highlight); }
.chat-widget-msg-head { color: #6b7280; font-size: 11px; margin-bottom: 2px; }
.chat-widget-msg-head span { margin-left: 4px; }
.chat-widget-msg-text { word-break: break-word; }

.chat-widget-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #e5e7eb; flex: 0 0 auto; }
.chat-widget-form textarea { flex: 1 1 auto; min-width: 0; resize: none; font-size: 13px; }
.chat-widget-form button {
    flex: 0 0 auto; width: 34px;
    background: var(--highlight-dark); color: #fff;
    border: 0; border-radius: 6px; cursor: pointer;
}
.chat-widget-form button:hover { filter: brightness(1.1); }

/* Přílohy v okně. Sponka je vedlejší tlačítko: .chat-widget-form button výše
   (0,1,1) barví zeleně všechno, proto tady (0,2,0). */
.chat-widget-form .chat-widget-attach {
    background: transparent; border: 1px solid #e5e7eb; color: #6b7280;
}
.chat-widget-form .chat-widget-attach:hover { color: var(--highlight-dark); filter: none; }
.chat-widget-attach.is-busy .fa { animation: fa-spin 1s linear infinite; }
.chat-widget-attach.is-busy .fa::before { content: "\f110"; }   /* fa-spinner */
/* soubor tažený nad pole */
.chat-widget-form.dz-drag-hover { background: #f4f8f0; outline: 2px dashed var(--highlight); outline-offset: -4px; }

/* rozepsané přílohy nad polem */
.chat-widget-draft:empty { display: none; }
.chat-widget-draft { border-top: 1px solid #e5e7eb; flex: 0 0 auto; max-height: 76px; overflow-y: auto; padding: 5px 10px 0; }
.chat-widget-draft ul { list-style: none; margin: 0; padding: 0; }
.chat-widget-draft li { align-items: center; color: #374151; display: flex; font-size: 11.5px; gap: 5px; line-height: 1.6; }
.chat-widget-draft li .fa { color: #9ca3af; font-size: 10px; }
.chat-widget-draft .chat-file-del { margin-left: auto; }

/* přílohy u zpráv — okno je úzké, náhledy menší než na plné stránce */
.chat-widget-msg .chat-message-files { gap: 5px; margin-top: 4px; }
.chat-widget-msg .chat-file-image img { max-height: 72px; max-width: 100%; }
.chat-widget-msg .chat-file { font-size: 11px; max-width: 100%; overflow: hidden; padding: 2px 7px; text-overflow: ellipsis; white-space: nowrap; }

/* tmavý motiv */
/* Bublina AI chatu se s motivem PŘEKLÁPÍ do tmavé (ověřeno snímkem od uživatele
   2026-09-23), takže se překlápí i tahle — jinak by v tmavém motivu svítila
   bílá vedle tmavé.
   Pravidlo na barvu znaku je nutné: html.dark a má specificitu (0,1,2)
   a přebilo by .chat-widget-toggle (0,1,0) na barvu textu. */
html.dark .chat-widget-toggle,
html.dark .chat-widget-toggle:hover,
html.dark .chat-pin-bubble,
html.dark .chat-pin-bubble:hover { color: var(--highlight); }
html.dark .chat-pin-bubble { background: var(--dark-surface); border-color: var(--dark-border); }
html.dark .chat-pin-bubble-active { border-color: var(--highlight); }
html.dark .chat-ai-stand-in,
html.dark .chat-ai-stand-in:hover { color: hsl(96 48% 48%); border-color: hsl(96 48% 48%); }
html.dark .chat-pin-badge { border-color: var(--dark-border); }
html.dark .chat-pin-toggle { color: var(--dark-text-dim); }
html.dark .chat-pin-toggle:hover, html.dark .chat-pin-toggle-on { color: var(--highlight); }
html.dark .chat-widget-toggle { background: var(--dark-surface); border-color: var(--dark-border); }
html.dark .chat-widget-badge { border-color: var(--dark-border); }
html.dark .chat-widget { background: var(--dark-surface); border-color: var(--dark-border); }
html.dark .chat-widget-head { border-bottom-color: var(--dark-border); }
html.dark .chat-widget-vis { color: var(--dark-text-dim); }
html.dark .chat-widget-vis-open { color: #e0a44a; }
html.dark .chat-widget-head a.chat-widget-pin-on { background: rgba(110,180,63,.22); color: var(--highlight); }
html.dark .chat-widget-head a,
html.dark .chat-widget-empty,
html.dark .chat-widget-msg-head,
html.dark .chat-widget-item .fa { color: var(--dark-text-dim); }
html.dark .chat-widget-item { border-bottom-color: var(--dark-border); }
html.dark .chat-widget-item:hover { background: var(--dark-surface-2); }
html.dark .chat-widget-msg { border-bottom-color: var(--dark-border); }
html.dark .chat-widget-msg-own { background: #24301f; }
html.dark .chat-widget-form { border-top-color: var(--dark-border); }
html.dark .chat-widget-form .chat-widget-attach { border-color: var(--dark-border); color: var(--dark-text-dim); }
html.dark .chat-widget-form.dz-drag-hover { background: #1c2a1a; }
html.dark .chat-widget-draft { border-top-color: var(--dark-border); }
html.dark .chat-widget-draft li { color: var(--dark-text); }
html.dark .chat-widget-new-form label { color: var(--dark-text); }
html.dark .chat-widget-new-note a { color: var(--dark-text-dim); }
html.dark .chat-widget-error { background: #3a1c1f; color: #fca5a5; }

/* na telefonu přes celou šířku */
@media only screen and (max-width: 480px) {
    /* na telefonu by sloupec sebral půl obrazovky; zkratky zůstávají
       přednostně v přehledu, viz mod/chat/widget.php */
    .chat-pins { display: none; }
    .chat-widget, html.has-chat .chat-widget, html.has-pins .chat-widget { right: 8px; left: 8px; width: auto; height: calc(100vh - 66px); }
    html.has-chat .chat-widget { right: 8px; }
}

/* ---------------------------------------------------------------------------
   Přehled konverzací (2026-09-22)
   --------------------------------------------------------------------------- */

/* FontAwesome dává .fa display: inline-block, což je autorské pravidlo a přebíjí
   display:none z výchozího stylu prohlížeče — bez tohohle by atribut hidden
   na ikoně nic nedělal. Potřetí stejná past, viz .chat-edit-form a .chat-badge. */
.icon-top[hidden] { display: none; }

/* Odkaz zpět nad blokem diskuze. Obal i .block mají nulové okraje, takže se
   bez tohohle tlačítko dotýkalo bloku pod sebou (naměřeno 0 px).
   .back má v main.css ř. 68 margin: 0, mezeru tedy musí dát obal. */
.chat-detail-back { margin: 0 0 14px; }

.chat-list-actions { margin: 0 0 10px; }
.chat-list-actions a { color: #6b7280; font-size: 12px; text-decoration: none; }
.chat-list-actions a:hover { color: var(--highlight-dark); }

/* úzký sloupec jen pro ikonu; šířka je pevná, aby se názvy srovnaly pod sebe */
.chat-list-icon { width: 24px; color: #9ca3af; text-align: center; }
.chat-list-name a { font-weight: 600; text-decoration: none; }
.chat-list-name a:hover { text-decoration: underline; }
.chat-list-date { color: #6b7280; font-size: 12px; white-space: nowrap; }
/* štítek ani hlavičky se nemají lámat do dvou řádků — rozhodí to výšku řádku */
.chat-list-type { font-size: 11px; white-space: nowrap; }
.table-list th.chat-list-nowrap { white-space: nowrap; }

/* počet nepřečtených: kolečko jako u zvonečku, ne holé číslo */
.chat-list-unread {
    display: inline-block; min-width: 20px; padding: 1px 6px;
    background: var(--highlight-dark); color: #fff;
    border-radius: 10px;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* zvýrazněný řádek s nepřečtenými — .key má main.css, tady jen název ztuční */
.table-list tr.key .chat-list-name a { font-weight: 700; }
.table-list tr.key .chat-list-icon { color: var(--highlight-dark); }

.chat-list-members { color: #6b7280; font-size: 12px; }

/* oba formuláře vedle sebe; na úzkém displeji pod sebou.
   margin-top odděluje lištu od tabulky nad ní — bez něj na sebe lepily. */
.chat-new { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; }
.chat-new-col { flex: 1 1 280px; min-width: 0; }
.chat-new-col h4 { margin-top: 0; }
.chat-new-col h4 .fa { color: #9ca3af; margin-right: 5px; }
.chat-new-col form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chat-new-col label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chat-new-col p { font-size: 12px; margin: 8px 0 0; }
/* výběr kolegy — combobox z js/autocomplete.js místo selectu */
.chat-user-pick { box-sizing: border-box; width: 240px; max-width: 100%; }
/* aktivních uživatelů je kolem šedesáti; po jednom písmenu by menu sahalo
   přes celou obrazovku */
.chat-user-menu { max-height: 280px; overflow-x: hidden; overflow-y: auto; }

/* Selektory musí obsahovat i .table-list td: pravidlo html.dark .table-list td
   výš má specificitu (0,2,2) a prosté html.dark .chat-list-icon (0,2,1) by
   přebilo. Stejná past jako u odznáčku chatu v řadě ikon. */
html.dark .chat-list-actions a { color: var(--dark-text-dim); }
html.dark .table-list td.chat-list-icon,
html.dark .table-list td.chat-list-members,
html.dark .table-list td.chat-list-date { color: var(--dark-text-dim); }
html.dark .chat-new-col h4 .fa { color: var(--dark-text-dim); }

/* přílohy pod zprávou */
.chat-message-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.chat-file-image img { display: block; max-height: 120px; width: auto; border-radius: 6px; border: 1px solid #e5e7eb; }
.chat-file {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f1f2f4; border-radius: 6px; padding: 3px 8px;
    font-size: 12px; text-decoration: none;
}
.chat-file:hover { background: #e5e7eb; }

/* nahrávání u rozepsané zprávy — dropzone je jinde v systému velká plocha,
   tady musí být nenápadná, aby nepřevážila samotné pole na text */
.chat-dropzone { min-height: 0; padding: 6px 10px; border: 1px dashed #d1d5db; border-radius: 6px; width: 100%; box-sizing: border-box; }
.chat-dropzone .dz-message { margin: 0; font-size: 12px; }
.chat-draft-files ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; }

/* Smazání přílohy (obsluha js/chat.js, maže chat_file_del.php). Křížek je
   vidět pořád, ne až pod myší — na dotykovém displeji by jinak nešel najít. */
.chat-file-del {
    color: #9ca3af; font-size: 15px; line-height: 1; padding: 0 3px; text-decoration: none;
}
.chat-file-del:hover { color: #b42318; }
/* u přílohy odeslané zprávy */
.chat-file-item { align-items: center; display: inline-flex; position: relative; }
/* u obrázku kolečko v rohu náhledu, u souboru prostě za názvem */
.chat-file-item .chat-file-image + .chat-file-del {
    background: #fff; border: 1px solid #d8dbe0; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.12);
    font-size: 13px; height: 18px; line-height: 16px; padding: 0; position: absolute; right: -6px;
    text-align: center; top: -6px; width: 18px;
}
.chat-file-item .chat-file + .chat-file-del { margin-left: 2px; }

.chat-textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.chat-form, .chat-edit-form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Formulář pro úpravu je v HTML u každé vlastní zprávy, jen s atributem hidden.
   Ten ale zařizuje display:none jen ve výchozím stylu prohlížeče, a pravidlo
   výše s display:flex je autorské — takže ho přebíjí a formulář byl vidět
   pořád. Proto se skrytí musí napsat explicitně. Nahlásil uživatel 2026-09-22. */
.chat-form[hidden], .chat-edit-form[hidden],
.chat-message-actions[hidden], .chat-badge[hidden] { display: none; }
.chat-edit-cancel { font-size: 11px; color: #6b7280; }

/* Nabídka našeptávače zmínek. Vzhled dává téma smoothness z jQuery UI, které
   systém načítá globálně; tady se jen zúží a v tmavém motivu ztlumí, aby
   nesvítila přes celou stránku. z-index řeší main.css ř. 37. */
.chat-textarea + .ui-autocomplete, .ui-autocomplete { max-width: 320px; }

/* tmavý motiv */
html.dark .ui-autocomplete { background: var(--dark-surface-2); border-color: var(--dark-border); }
html.dark .ui-autocomplete .ui-menu-item-wrapper { background: transparent; border: 0; color: var(--dark-text); }
html.dark .ui-autocomplete .ui-menu-item-wrapper.ui-state-active { background: var(--highlight-dark); color: #fff; }
html.dark .chat-message { background: var(--dark-surface-2); border-color: var(--dark-border); }
html.dark .chat-message-own { background: #24301f; border-color: #35492c; }
html.dark .chat-message-time,
html.dark .chat-message-edited,
html.dark .chat-link,
html.dark .chat-edit-cancel,
html.dark .chat-message-actions .chat-edit { color: var(--dark-text-dim); }
html.dark .chat-mention { background: rgba(249,210,1,.22); color: var(--dark-text); }
html.dark .chat-file { background: var(--dark-surface); color: var(--dark-text); }
html.dark .chat-file:hover { background: #39414d; }
html.dark .chat-file-image img { border-color: var(--dark-border); }
html.dark .chat-file-del { color: var(--dark-text-dim); }
html.dark .chat-file-del:hover { color: #fca5a5; }
html.dark .chat-file-item .chat-file-image + .chat-file-del { background: var(--dark-surface-2); border-color: var(--dark-border); }
html.dark .chat-dropzone { border-color: var(--dark-border); background: var(--dark-surface); }

/* na úzkém displeji ať zpráva nepřetéká */
@media (max-width: 600px) {
    .chat-message { padding: 8px; }
    .chat-message-head { gap: 5px; }
}

/* Oprávnění účtu (mod/account/add.html): skupiny podle hlavního menu.
   Každá skupina je vlastní <tbody> — nadpis na šedém pruhu, mezera za
   posledním řádkem skupiny (odsazení, ne rámeček, ať prosvítá pozadí bloku
   v každém motivu). main.css ruší linku u tr:last-child, takže poslední
   řádek skupiny linku nemá a skupiny se neslévají. */
.table-permissions thead th { padding-bottom: 4px; }
.table-permissions tr.table-permissions-group td { background: #eef0f3; border-bottom: 0; border-radius: 4px; color: #4b5563; font-size: 11px; font-weight: 600; letter-spacing: .09em; padding: 5px 8px; text-transform: uppercase; }
.table-permissions tbody:not(:last-child) tr:last-child td { padding-bottom: 18px; }
.table-permissions-note { color: #6b7280; font-size: 11px; margin-left: 4px; }
.table-permissions-note::before { content: "· "; }
html.dark .table-permissions tr.table-permissions-group td { background: var(--dark-surface-2); color: var(--dark-text-dim); }
html.dark .table-permissions-note { color: var(--dark-text-dim); }