/* ============================================================ Správa areálu – design systém „Provozní panel" Plochý vzhled, jediný akcent = firemní oranžová, čísla mono, tři témata (light / dark / oled) přes data-theme na . Vše výhradně přes CSS proměnné – žádné hexy v komponentách. ============================================================ */ /* ---------- Fonty (self-hosted) ---------- */ @font-face{font-family:'Mulish';font-weight:500;font-display:swap;src:url('../fonts/mulish-500.woff2') format('woff2')} @font-face{font-family:'Mulish';font-weight:600;font-display:swap;src:url('../fonts/mulish-600.woff2') format('woff2')} @font-face{font-family:'Mulish';font-weight:700;font-display:swap;src:url('../fonts/mulish-700.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url('../fonts/ibmplexmono-400.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url('../fonts/ibmplexmono-500.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url('../fonts/ibmplexmono-600.woff2') format('woff2')} /* ---------- Barevné tokeny ---------- */ :root, [data-theme="light"]{ --bg:#f0f2f5; --surface:#ffffff; --surface-2:#f7f9fc; --hover:#f4f6fb; --border:#dde2ee; --text:#1a2035; --muted:#5b6a8a; --primary:#FF7000; --primary-dark:#B35400; --primary-soft:rgba(255,112,0,.12); --ok:#38a169; --ok-soft:rgba(56,161,105,.12); --warn:#B7791F; --warn-soft:rgba(183,121,31,.14); --danger:#e53e3e; --danger-soft:rgba(229,62,62,.10); /* Tmavší varianty JEN pro text na světlém tintu (badge) – kvůli WCAG AA. Výplně a ikony dál používají --ok/--warn/--danger. */ --ok-text:#2f7a52; --warn-text:#8a5300; --danger-text:#c53030; --meter-calm:#9aa6c0; --radius:14px; --radius-sm:8px; --shadow:0 2px 10px rgba(16,24,40,.07); --shadow-lg:0 6px 24px rgba(16,24,40,.10); --navbar-bg:rgba(255,255,255,.92); color-scheme:light; } [data-theme="dark"]{ --bg:#0f1117; --surface:#1e2235; --surface-2:#1a1d2e; --hover:#252840; --border:#2d3154; --text:#e2e8f0; --muted:#8892b0; --primary:#FF7000; --primary-dark:#FF9A52; --primary-soft:rgba(255,112,0,.22); --ok:#48bb78; --ok-soft:rgba(72,187,120,.16); --warn:#E3B341; --warn-soft:rgba(227,179,65,.18); --danger:#fc8181; --danger-soft:rgba(252,129,129,.16); /* Na tmavém tintu je světlý text čitelný – text = stejná barva jako výplň. */ --ok-text:var(--ok); --warn-text:var(--warn); --danger-text:var(--danger); --meter-calm:#5a648a; --shadow:0 2px 12px rgba(0,0,0,.35); --shadow-lg:0 8px 28px rgba(0,0,0,.45); --navbar-bg:rgba(26,29,46,.92); color-scheme:dark; } [data-theme="oled"]{ --bg:#000000; --surface:#0d0d0d; --surface-2:#0a0a0a; --hover:#1a1a1a; --border:#1f1f1f; --text:#e8e8e8; --muted:#888888; --primary:#FF8527; --primary-dark:#FFA866; --primary-soft:rgba(255,133,39,.22); --ok:#4ade80; --ok-soft:rgba(74,222,128,.14); --warn:#FBBF24; --warn-soft:rgba(251,191,36,.14); --danger:#f87171; --danger-soft:rgba(248,113,113,.14); --ok-text:var(--ok); --warn-text:var(--warn); --danger-text:var(--danger); --meter-calm:#555a6e; --shadow:0 2px 8px rgba(0,0,0,.6); --shadow-lg:0 8px 28px rgba(0,0,0,.7); --navbar-bg:rgba(0,0,0,.96); color-scheme:dark; } :root{ --font-display:'Mulish',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; } /* ---------- Základ ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-size:14px; line-height:1.55; } a{color:var(--primary-dark); text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{font-family:var(--font-display); margin:0 0 .5em} h1{font-size:24px; font-weight:700; letter-spacing:-.02em} h2{font-size:16px; font-weight:600} h3{font-size:14px; font-weight:600} p{margin:0 0 .7em} hr{border:0; border-top:1px solid var(--border); margin:14px 0} .num{font-family:var(--font-mono); font-variant-numeric:tabular-nums} /* IBM Plex Mono je opticky větší než text – uvnitř věty ho zmenšit (v samostatných sloupcích tabulek zůstává plná velikost). */ p .num, li .num, .form-hint .num, .detail-label+p .num{font-size:.92em} .muted{color:var(--muted)} .small{font-size:12.5px} .right{text-align:right} .nowrap{white-space:nowrap} /* Ikony (Lucide nahrazuje za ) */ svg.lucide{width:16px; height:16px; vertical-align:-3px; flex:none} .page-title svg.lucide{width:22px; height:22px; color:var(--primary); vertical-align:-4px} /* Klávesnicový focus – jednotný oranžový prsten na VŠECH prvcích (formulářová pole si drží vlastní box-shadow, jejich :focus má přednost) */ :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; } /* Kód/konstanty v textu (nápověda, zálohy) */ code{ font-family:var(--font-mono); font-size:.92em; background:var(--surface-2); border:1px solid var(--border); border-radius:4px; padding:1px 5px; overflow-wrap:anywhere; } /* ---------- Layout ---------- */ /* Maximální šířka obsahu na velkých monitorech (ať není přehnaně roztažené). Ladí se z jednoho místa proměnnou --app-max; „none" = přes celou obrazovku. */ :root{--app-max:1600px} .container{max-width:var(--app-max); margin:0 auto; padding:20px 24px 60px} .page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px} .page-head h1{margin:0} .row-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .inline{display:inline-block; margin:0} .split-40{display:grid; gap:16px; grid-template-columns:minmax(0,2fr) minmax(0,3fr)} .split-33{display:grid; gap:16px; grid-template-columns:minmax(0,1fr) minmax(0,2fr)} .split-58{display:grid; gap:16px; grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .grid-2{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:960px){ .split-40,.split-33,.split-58,.grid-2{grid-template-columns:minmax(0,1fr)} } .app-footer{max-width:var(--app-max); margin:0 auto; padding:0 24px 24px; color:var(--muted); font-size:12px; text-align:center} /* ---------- Horní lišta ---------- */ .topbar{ position:sticky; top:0; z-index:100; min-height:46px; display:flex; align-items:stretch; /* vlevo čtverec přepínače, vedle vycentrovaný obsah */ background:var(--navbar-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } /* Stejná šířka i boční odsazení jako .container → logo lícuje s levou hranou obsahu */ .topbar-in{ flex:1 1 auto; min-width:0; max-width:var(--app-max); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:10px; min-height:46px; } /* Protiváha čtverce přepínače vpravo (47 px = čtverec + čára), aby se lišta centrovala na okno stejně jako obsah; na užším okně se zmenší až na 0 */ .topbar:has(> .applauncher)::after{content:''; flex:0 0 clamp(0px, calc(100% - var(--app-max) - 47px), 47px)} .brand{display:flex; align-items:center; gap:8px; margin-right:6px} .brand img{height:26px; width:auto; display:block} .brand::after{content:''; width:1px; height:24px; margin-left:6px; background:var(--border)} /* čára logo | menu */ /* Přepínač systémů (Apps::launcherHtml) – čtverec na plnou výšku lišty u levého okraje okna, stejný ve všech systémech. Návod: tools/prepinac-systemu-guide-portable.md */ .applauncher{position:relative; flex:0 0 auto; display:flex; border-right:1px solid var(--border)} .applauncher-btn{ display:inline-flex; align-items:center; justify-content:center; width:46px; min-height:46px; height:100%; padding:0; border:0; border-radius:0; background:transparent; color:var(--muted); cursor:pointer; } .applauncher-btn:hover{background:var(--hover); color:var(--primary)} .applauncher-btn.is-open{background:var(--primary-soft); color:var(--primary)} .applauncher-btn:focus-visible{outline:2px solid var(--primary); outline-offset:-3px} /* dovnitř – u okraje okna by vnější prsten nebyl vidět */ .applauncher-btn svg.lucide{width:20px; height:20px; vertical-align:0} .applauncher-panel{ position:absolute; top:calc(100% + 1px); left:0; z-index:200; width:min(460px, 100vw); padding:14px; background:var(--surface); border:1px solid var(--border); border-left:0; border-radius:0 0 var(--radius) 0; box-shadow:var(--shadow-lg); } .applauncher-title{ margin:0 0 10px; font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .applauncher-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px} .applauncher-item{ display:flex; flex-direction:column; gap:4px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); color:inherit; text-decoration:none; } a.applauncher-item:hover{border-color:var(--primary); background:var(--hover); text-decoration:none} .applauncher-item svg.lucide{width:22px; height:22px; color:var(--primary)} .applauncher-item .al-name{font-family:var(--font-display); font-weight:600; font-size:13.5px} .applauncher-item .al-desc{font-size:11.5px; color:var(--muted)} .applauncher-item.is-current{border-color:var(--primary); background:var(--primary-soft); cursor:default} @media (max-width:560px){ /* Na mobilu přes celou šířku; lišta tu backdrop-filter nemá (vypnutý do 760 px), takže position:fixed se vztahuje k oknu, ne k liště */ .applauncher-panel{ position:fixed; left:0; right:0; width:auto; top:calc(env(safe-area-inset-top, 0px) + 47px); border-right:0; border-radius:0; max-height:calc(100vh - 60px); overflow-y:auto; } } .nav{display:flex; align-items:center; gap:2px; flex:1; min-width:0; flex-wrap:wrap} .nav a{ font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--muted); padding:5px 9px; border-radius:var(--radius-sm); white-space:nowrap; } .nav a:hover{color:var(--text); background:var(--hover); text-decoration:none} /* Aktivní položka menu = oranžové podtržení (klidný „kde jsi" indikátor), ne barevný blok – lišta je trvale viditelná, má zůstat tichá. */ .nav a.active{color:var(--text); background:transparent; border-radius:0; box-shadow:inset 0 -2px 0 var(--primary)} .top-actions{display:flex; align-items:center; gap:6px; margin-left:auto} /* Hledání v liště = tlačítko otevírající rychlé hledání (Ctrl+K paletu) */ .searchbtn{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 8px 0 11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--muted); cursor:pointer; text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:12.5px; white-space:nowrap; } .searchbtn:hover{border-color:var(--primary); color:var(--text); text-decoration:none} .searchbtn svg.lucide{width:15px; height:15px; vertical-align:0} .searchbtn-label{margin-right:20px} .searchbtn-kbd{ font-family:var(--font-mono); font-weight:500; font-size:10.5px; letter-spacing:.02em; background:var(--surface-2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; color:var(--muted); } .icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid transparent; background:none; color:var(--muted); cursor:pointer; padding:0; } .icon-btn:hover{color:var(--text); background:var(--hover)} .icon-btn svg.lucide{width:18px; height:18px; vertical-align:0} /* Aktivní stav přepínače kompaktního zobrazení */ #densityToggle[aria-pressed="true"]{background:var(--primary-soft); color:var(--primary-dark)} /* Tlačítko uživatele = avatar s iniciálou + šipka nabídky */ .icon-btn--user{ width:auto; gap:2px; padding:0 5px 0 5px; background:var(--surface-2); border-color:var(--border); color:var(--text); } .icon-btn--user:hover{background:var(--hover); border-color:var(--primary)} .icon-btn--user .user-caret{width:14px; height:14px; color:var(--muted)} .avatar{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; border-radius:50%; background:var(--primary-soft); color:var(--primary-dark); font-family:var(--font-display); font-weight:700; font-size:11.5px; line-height:1; } .bell-badge{ position:absolute; top:-4px; right:-6px; background:var(--danger); color:#fff; font-family:var(--font-mono); font-size:10px; font-weight:600; padding:0 5px; border-radius:8px; line-height:15px; } /* V tmavých tématech je --danger pastelová – bílý text by na ní nebyl čitelný */ [data-theme="dark"] .bell-badge, [data-theme="oled"] .bell-badge{color:var(--bg)} /* Hamburger – jen mobil */ .nav-toggle{display:none} /* Skupiny v hlavním menu (rozbalovací) */ .nav-btn{ display:inline-flex; align-items:center; gap:3px; font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--muted); padding:5px 9px; border-radius:var(--radius-sm); background:none; border:0; cursor:pointer; white-space:nowrap; } .nav-btn:hover{color:var(--text); background:var(--hover)} .nav-btn.active{color:var(--text); background:transparent; border-radius:0; box-shadow:inset 0 -2px 0 var(--primary)} .nav-btn svg.lucide{width:13px; height:13px; vertical-align:-2px} .nav .dd-menu{left:0; right:auto; top:100%} /* Skupiny menu se na desktopu rozbalí najetím myší (bez klikání). Malá neviditelná lišta pod tlačítkem drží hover při přejezdu na menu. */ @media (min-width:761px){ .nav .dropdown:hover > .dd-menu{display:block} .nav .dropdown::after{content:''; position:absolute; left:0; right:0; top:100%; height:8px} } /* Rozbalovací menu (uživatel) */ .dropdown{position:relative} .dd-menu{ display:none; position:absolute; right:0; top:calc(100% + 6px); min-width:210px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:5px; z-index:200; } .dropdown.open .dd-menu{display:block} .dd-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 10px; border:0; border-radius:6px; background:none; cursor:pointer; color:var(--text); font-size:13px; font-family:inherit; } .dd-item:hover{background:var(--hover); text-decoration:none; color:var(--text)} .dd-item svg.lucide{color:var(--muted)} .dd-text{padding:5px 10px; font-size:12px; color:var(--muted)} .dd-divider{border-top:1px solid var(--border); margin:5px 0} @media (max-width:760px){ .topbar{backdrop-filter:none} .nav-toggle{display:inline-flex} /* Přepínač systémů zabere vlevo 47 px – užší odsazení a mezery, čára za logem pryč (menu je v hamburgeru), ať se lišta vejde i na 360px telefon */ .topbar-in{padding:0 12px; gap:6px} .brand{margin-right:0} .brand::after{display:none} /* Uvolnit stísněnou lištu: kompaktní přepínač i šipka u uživatele pryč */ #densityToggle{display:none} .icon-btn--user .user-caret{display:none} .icon-btn--user{width:32px; padding:0} .nav{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:1px; padding:8px 12px 12px; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg); } .topbar.open .nav{display:flex} .nav a{padding:9px 10px; font-size:14px} /* Hledání na mobilu = jen ikona lupy (popisek i „Ctrl K" se skryjí) */ .searchbtn{width:32px; padding:0; justify-content:center} .searchbtn-label, .searchbtn-kbd{display:none} /* Skupiny menu na mobilu: vždy rozbalené uvnitř panelu */ .nav .dropdown{display:block} .nav-btn{width:100%; padding:9px 10px; font-size:14px; pointer-events:none} .nav .dd-menu{display:block; position:static; box-shadow:none; border:0; background:none; padding:0 0 4px 16px; min-width:0} } /* ---------- Rychlé hledání (Ctrl+K paleta) ---------- */ .cmdk{ position:fixed; inset:0; z-index:1000; background:rgba(16,24,40,.45); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; } .cmdk[hidden]{display:none} .cmdk-box{ width:100%; max-width:620px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column; max-height:70vh; } .cmdk-head{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border)} .cmdk-head svg.lucide{color:var(--muted); width:18px; height:18px} .cmdk-head input{border:0; background:none; padding:0; font-size:16px; box-shadow:none} .cmdk-head input:focus{outline:none; box-shadow:none} .cmdk-results{overflow-y:auto; padding:6px} .cmdk-group{ font-family:var(--font-display); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 10px 4px; } .cmdk-item{ display:block; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; color:var(--text); } .cmdk-item:hover, .cmdk-item.active{background:var(--primary-soft); text-decoration:none} .cmdk-item .t{font-size:13.5px; font-weight:600; font-family:var(--font-display)} .cmdk-item .s{font-size:12px; color:var(--muted)} .cmdk-empty{padding:22px; text-align:center; color:var(--muted); font-size:13px} .cmdk-foot{ display:flex; gap:16px; padding:8px 14px; border-top:1px solid var(--border); color:var(--muted); font-size:11.5px; } .cmdk kbd{ font-family:var(--font-mono); font-size:10.5px; background:var(--surface-2); border:1px solid var(--border); border-radius:4px; padding:1px 5px; color:var(--muted); } .cmdk-head kbd{margin-left:auto} /* ---------- Vysouvací panel „Co se blíží" (zvoneček) ---------- */ .drawer{position:fixed; inset:0; z-index:1000} .drawer[hidden]{display:none} .drawer-scrim{position:absolute; inset:0; background:rgba(16,24,40,.45)} .drawer-panel{ position:absolute; top:0; right:0; height:100%; width:400px; max-width:92vw; background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; } @media (prefers-reduced-motion:no-preference){ .drawer:not([hidden]) .drawer-panel{animation:drawerIn .22s ease-out both} @keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}} .drawer:not([hidden]) .drawer-scrim{animation:scrimIn .22s ease-out both} @keyframes scrimIn{from{opacity:0}to{opacity:1}} } .drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); flex:none; } .drawer-head h2{margin:0; display:flex; align-items:center; gap:8px; font-size:15px} .drawer-head h2 svg.lucide{color:var(--primary)} .drawer-body{overflow-y:auto; flex:1; padding:8px} .drawer-foot{padding:10px 14px; border-top:1px solid var(--border); flex:none} .dl-section-label{ display:flex; align-items:center; gap:6px; padding:10px 8px 5px; font-family:var(--font-display); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .dl-section-label svg.lucide{width:14px; height:14px} .dl-section-label.dl-overdue{color:var(--danger-text)} .dl-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:9px 8px; border-radius:var(--radius-sm); text-decoration:none; color:var(--text); } .dl-item:hover{background:var(--hover); text-decoration:none} .dl-item-main{display:flex; flex-direction:column; gap:1px; min-width:0} .dl-kind{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; font-family:var(--font-display)} .dl-title{font-size:13.5px; font-weight:600; font-family:var(--font-display)} .dl-context{font-size:12px; color:var(--muted)} .dl-item-side{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; text-align:right} .dl-date{font-size:12px; color:var(--muted)} /* ---------- Karty ---------- */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:none; padding:16px 18px; margin-bottom:16px; } .card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:-16px -18px 14px; padding:12px 18px; border-bottom:1px solid var(--border); } .card-head h2{margin:0; display:flex; align-items:center; gap:7px} .card-head h2 svg.lucide{color:var(--primary)} .card--flush{padding:0} .card--flush .card-head{margin:0; padding:12px 18px} .card-foot{margin:14px -18px -16px; padding:12px 18px; border-top:1px solid var(--border)} .card--flush .card-foot{margin:0} /* KPI dlaždice */ .kpi-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:16px} .dkpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px} .dkpi .dkl{ font-family:var(--font-display); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; align-items:center; gap:7px; margin-bottom:7px; } .dkpi .dkl svg.lucide{color:var(--primary); width:15px; height:15px} .dkpi .dkv{font-family:var(--font-mono); font-size:23px; font-weight:600; line-height:1.2} .dkpi .dks{font-size:11.5px; color:var(--muted); margin-top:3px} .dkpi.is-accent{box-shadow:inset 3px 0 0 var(--primary)} .dkv.is-ok{color:var(--ok)} .dkv.is-warn{color:var(--warn)} .dkv.is-danger{color:var(--danger)} a .dkpi{color:var(--text)} a:hover .dkpi{border-color:var(--primary); text-decoration:none} /* ---------- Tlačítka ---------- */ .btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; font-family:var(--font-display); font-size:13px; font-weight:600; line-height:1.2; text-decoration:none; background:none; color:var(--text); } .btn:hover{text-decoration:none} .btn-primary{background:var(--primary); border-color:var(--primary); color:#fff} .btn-primary:hover{filter:brightness(.93); color:#fff} .btn-ghost{background:var(--surface); border-color:var(--border); color:var(--text)} .btn-ghost:hover{border-color:var(--primary); background:var(--hover); color:var(--text)} .btn-danger{background:var(--surface); border-color:var(--border); color:var(--danger)} .btn-danger:hover{border-color:var(--danger); background:var(--danger-soft); color:var(--danger)} .btn-ok{background:var(--ok); border-color:var(--ok); color:#fff} .btn-ok:hover{filter:brightness(.93); color:#fff} /* V tmavých tématech je --ok pastelová – tmavý text (vzor jako u badge) */ [data-theme="dark"] .btn-ok,[data-theme="oled"] .btn-ok{color:var(--bg)} [data-theme="dark"] .btn-ok:hover,[data-theme="oled"] .btn-ok:hover{color:var(--bg)} .btn-sm{padding:6px 10px; font-size:12px} .btn-sm svg.lucide{width:14px; height:14px} .btn-block{width:100%; justify-content:center} /* ---------- Odznaky ---------- */ .badge{ display:inline-flex; align-items:center; gap:4px; font-family:var(--font-display); font-size:12px; font-weight:600; padding:2px 9px; border-radius:var(--radius-sm); white-space:nowrap; } .badge-ok{background:var(--ok-soft); color:var(--ok-text)} .badge-warn{background:var(--warn-soft); color:var(--warn-text)} .badge-danger{background:var(--danger-soft); color:var(--danger-text)} .badge-accent{background:var(--primary-soft); color:var(--primary-dark)} .badge-muted{background:var(--hover); color:var(--muted)} /* ---------- Tabulky ---------- */ .table-wrap{overflow-x:auto} .card--flush .table-wrap{border-radius:0 0 var(--radius) var(--radius)} .data-table{width:100%; border-collapse:collapse; font-size:13px} .data-table th{ font-family:var(--font-display); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--surface-2); } .data-table td,.data-table th{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle} .data-table tbody tr:nth-child(even){background:var(--surface-2)} .data-table tbody tr:hover{background:var(--hover)} .data-table .num{text-align:right} .data-table td.right,.data-table th.right{text-align:right} .data-table tfoot th{background:var(--surface-2); font-size:13px; text-transform:none; letter-spacing:0; color:var(--text)} .data-table a{font-weight:600} .data-table tr.dim{opacity:.55} .data-table .empty-cell{color:var(--muted); padding:16px 12px} /* Mobil: tabulky se .rwd překreslí na karty (buňky mají data-label) */ @media (max-width:760px){ .data-table.rwd thead{display:none} .data-table.rwd tr{ display:block; border:1px solid var(--border); border-radius:var(--radius-sm); margin:0 10px 10px; padding:6px 10px; background:var(--surface); } .data-table.rwd tbody tr:nth-child(even){background:var(--surface)} .data-table.rwd td{display:flex; justify-content:space-between; align-items:baseline; gap:12px; border:0; padding:6px 0; text-align:left} .data-table.rwd td.right{text-align:left} .data-table.rwd td::before{content:attr(data-label); font-weight:600; color:var(--muted); font-size:12px; flex:none} .data-table.rwd td:not([data-label])::before{content:none} .data-table.rwd tfoot{display:block; padding:6px 10px} .data-table.rwd tfoot tr{border:0; margin:0; padding:0} } /* ---------- Formuláře ---------- */ label{display:block; font-family:var(--font-display); font-weight:600; font-size:12.5px; margin-bottom:5px} input,select,textarea{ width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text); font-family:inherit; font-size:13.5px; } input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)} input[type=checkbox],input[type=radio]{width:auto; accent-color:var(--primary); margin:0} input[type=date]{font-family:var(--font-mono); font-size:13px} input[type=file]{padding:7px 10px; font-size:12.5px} select{ appearance:none; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6a8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; } [data-theme="dark"] select,[data-theme="oled"] select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238892b0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } textarea{resize:vertical; min-height:70px} .form-hint{font-size:12px; color:var(--muted); margin-top:4px} .check{display:flex; align-items:center; gap:8px} .check label{margin:0; font-weight:400; font-family:inherit; font-size:13px} /* Mřížka formulářů (12 sloupců) */ .form-grid{display:grid; gap:14px; grid-template-columns:repeat(12,minmax(0,1fr))} .sp-2{grid-column:span 2} .sp-3{grid-column:span 3} .sp-4{grid-column:span 4} .sp-6{grid-column:span 6} .sp-8{grid-column:span 8} .sp-9{grid-column:span 9} .sp-12{grid-column:span 12} @media (max-width:760px){ .sp-2,.sp-3,.sp-4{grid-column:span 6} .sp-6,.sp-8,.sp-9{grid-column:span 12} } .form-actions{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap} /* Filtry nad seznamy – kompaktní řádek */ .filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center} .filters input,.filters select{width:auto; min-width:130px; padding:6px 10px; font-size:12.5px} .filters select{padding-right:28px} .filters .check{min-width:0} /* Výběr dodavatele s tlačítkem „+" pro rychlé přidání (partial supplier_select) */ .supplier-pick{display:flex; gap:6px; align-items:center} .supplier-pick select{flex:1; min-width:0} .supplier-pick .btn{flex:none} .supplier-new{ margin-top:8px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); box-shadow:inset 3px 0 0 var(--primary); } .supplier-new[hidden]{display:none} .supplier-new .form-hint{margin-top:8px} /* Nahrání přílohy přetažením. Průhledný file input překrývá celou plochu: klik i výběr klávesnicí fungují nativně (a tedy i bez JS), JS jen přidává zvýraznění při přetažení a název vybraného souboru. */ .dropzone{ position:relative; display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 14px; margin-bottom:10px; text-align:center; border:1px dashed var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--muted); font-size:13px; transition:border-color .15s, background .15s, color .15s; } .dropzone input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; } .dropzone:hover{border-color:var(--primary); color:var(--text)} .dropzone:focus-within{outline:2px solid var(--primary); outline-offset:2px} .dropzone.is-over{border-color:var(--primary); background:var(--primary-soft); color:var(--primary-dark)} .dropzone.has-file{ border-style:solid; border-color:var(--ok); background:var(--ok-soft); color:var(--ok-text); } .dropzone svg.lucide{flex:none} [data-density="compact"] .dropzone{padding:11px 12px} /* Drobné formuláře uvnitř karet (podlaží, provedení revize, upload) */ .mini-form{display:flex; gap:8px; flex-wrap:wrap; align-items:end} .mini-form>div{flex:1; min-width:110px} .mini-form input,.mini-form select{padding:6px 10px; font-size:12.5px} .mini-form label{font-size:11.5px; margin-bottom:3px} .mini-form .btn{flex:none} /* ---------- Hlášky (flash) ---------- */ .alert{ display:flex; align-items:flex-start; gap:9px; padding:11px 14px; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:13px; } .alert-success{border-color:var(--ok); background:var(--ok-soft); color:var(--ok-text)} .alert-danger{border-color:var(--danger); background:var(--danger-soft); color:var(--danger-text)} .alert-warning{border-color:var(--warn); background:var(--warn-soft); color:var(--warn-text)} .alert-info{border-color:var(--primary); background:var(--primary-soft); color:var(--primary-dark)} .alert-close{margin-left:auto; background:none; border:0; cursor:pointer; color:inherit; padding:0 2px; line-height:1} /* ---------- Seznamy a detaily ---------- */ .flush-list{list-style:none; margin:0; padding:0} .flush-list li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border)} .flush-list li:last-child{border-bottom:0} .detail-label{color:var(--muted); font-size:11.5px; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin:0 0 1px} .detail-label+p{margin-bottom:12px} .empty{color:var(--muted); text-align:center; padding:22px 12px} .empty svg.lucide{width:30px; height:30px; opacity:.4; display:block; margin:0 auto 8px} .empty-ok{color:var(--ok-text)} /* Pruhy nákladů (dashboard) */ .bar{height:8px; border-radius:4px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden} .bar-fill{height:100%; background:var(--primary)} .bar-fill.calm{opacity:.65} /* Grafy (charts.js – SVG) */ .chart svg{display:block; width:100%; height:auto} .chart-legend{display:flex; gap:16px; font-size:12px; color:var(--muted); margin-top:6px; font-family:var(--font-display); font-weight:600} .chart-legend .sw{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px} /* Záložky (reporty, nápověda) */ .tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px} /* Aktivní tab = plná výplň (vybraný segment): jasná oranžová, bílý text. Bílá na oranžové je vědomá brandová výjimka z AA (jako .btn-primary). */ .tabs .btn.active{border-color:var(--primary); background:var(--primary); color:#fff} .tabs .btn.active:hover{background:var(--primary); color:#fff; filter:brightness(.93)} /* Kalendář termínů */ .cal-month{font-family:var(--font-display); font-weight:700; font-size:15px; min-width:130px; text-align:center; display:inline-block} .cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px} .cal-dows{margin-bottom:4px} .cal-dow{ font-family:var(--font-display); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:center; padding:4px 0; } .cal-day{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); min-height:84px; padding:5px; display:flex; flex-direction:column; gap:3px; min-width:0; } .cal-day.out{background:var(--surface-2); opacity:.55} .cal-day.today{border-color:var(--primary); box-shadow:inset 0 2px 0 var(--primary)} .cal-num{font-family:var(--font-mono); font-size:11px; color:var(--muted); align-self:flex-end} .cal-day.today .cal-num{color:var(--primary-dark); font-weight:600} .cal-ev{ display:block; font-family:var(--font-display); font-weight:600; font-size:10.5px; line-height:1.3; padding:2px 5px; border-radius:5px; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-ev:hover{text-decoration:none; filter:brightness(.94)} .cal-ev.ev-overdue{background:var(--danger-soft); color:var(--danger-text)} .cal-ev.ev-warning{background:var(--warn-soft); color:var(--warn-text)} .cal-ev.ev-ok{background:var(--ok-soft); color:var(--ok-text)} .cal-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px} .cal-legend .sw{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; vertical-align:-1px} .cal-agenda{display:none} @media (max-width:760px){ .cal-wrap{display:none} .cal-agenda{display:block} } /* Stránkování seznamů */ .pagination{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:14px} /* Aktivní stránka = plná výplň jako aktivní tab (vybraný segment, ADR-019) */ .pagination .btn.active{border-color:var(--primary); background:var(--primary); color:#fff} .pagination .btn.active:hover{background:var(--primary); color:#fff; filter:brightness(.93)} .pagination-info{margin-left:auto; color:var(--muted); font-size:12px} .tab-panel[hidden]{display:none} /* Nápověda – rozbalovací sekce */ details.help{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; } details.help summary{ cursor:pointer; padding:11px 14px; list-style:none; font-family:var(--font-display); font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:8px; } details.help summary::-webkit-details-marker{display:none} details.help summary::before{ content:''; width:7px; height:7px; flex:none; border-right:2px solid var(--primary); border-bottom:2px solid var(--primary); transform:rotate(-45deg); transition:transform .15s ease; } details.help[open] summary::before{transform:rotate(45deg)} details.help[open] summary{border-bottom:1px solid var(--border)} details.help .help-body{padding:12px 16px; font-size:13.5px} details.help .help-body ul{margin:0 0 .7em; padding-left:20px} details.help .help-body li{margin-bottom:3px} /* Changelog */ .changelog-list{list-style:none; margin:0; padding:0} .changelog-list li{ display:flex; align-items:flex-start; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:13.5px; } .changelog-list li:last-child{border-bottom:0} .changelog-list .badge{flex:none; min-width:84px; justify-content:center} /* ---------- Přihlášení ---------- */ .login-wrap{max-width:400px; margin:9vh auto 0; padding:0 16px} .login-wrap .brand-big{display:flex; justify-content:center; margin-bottom:18px} .login-wrap .brand-big img{height:52px; width:auto} .login-wrap h1{font-size:18px; text-align:center} /* ---------- Kompaktní zobrazení (data-density="compact") ---------- Hustší tabulky/karty pro rychlé přehledy; zlatá čísla z compact-ui-guide (řádek tabulky ~28px, padding buňky 6px, karty 12–14px). */ [data-density="compact"] .container{padding-top:12px; padding-bottom:40px} [data-density="compact"] .page-head{margin-bottom:11px} [data-density="compact"] .filters{margin-bottom:10px} [data-density="compact"] .card{padding:12px 14px; margin-bottom:12px} [data-density="compact"] .card-head{margin:-12px -14px 10px; padding:9px 14px} [data-density="compact"] .card--flush .card-head{margin:0; padding:9px 14px} [data-density="compact"] .data-table{font-size:12.5px} [data-density="compact"] .data-table td, [data-density="compact"] .data-table th{padding:6px 9px} [data-density="compact"] .kpi-grid{gap:10px; margin-bottom:12px} [data-density="compact"] .dkpi{padding:10px 12px} [data-density="compact"] .dkpi .dkv{font-size:20px} [data-density="compact"] .dkpi .dkl{margin-bottom:5px} [data-density="compact"] .flush-list li{padding:6px 0} [data-density="compact"] .detail-label+p{margin-bottom:9px} [data-density="compact"] .cal-day{min-height:64px; padding:4px} /* Na mobilu (karty z tabulek) zůstávají čitelné mezery – neztlačovat */ /* ---------- Tisk (PDF přes Ctrl+P) ---------- */ @media print{ .topbar,.filters,.tabs,.btn,.row-actions,.alert-close,.app-footer, .mini-form,.form-actions{display:none !important} body{background:#fff} .container{padding:0; max-width:none} .card,.dkpi{box-shadow:none; animation:none; break-inside:avoid} a{color:inherit; text-decoration:none} } /* ---------- Pohyb ---------- */ /* Vstupní animace jen na dashboardu (uvítací obrazovka). Ostatní stránky se proklikávají celý den – tam by naskakování při každém načtení rušilo. */ @media (prefers-reduced-motion:no-preference){ .page-dashboard .card, .page-dashboard .dkpi{animation:fadeUp .28s ease-out both} @keyframes fadeUp{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}} } @media (prefers-reduced-motion:reduce){ .page-dashboard .card, .page-dashboard .dkpi{animation:fadeIn .2s ease-out both} @keyframes fadeIn{from{opacity:0}to{opacity:1}} }