/* Manažerský dashboard Drbna. Tokeny převzaté z drbna-crm (designový handoff srpen 2026) — stejná značková červená, stejná šedá škála, stejné rozměry chipů a karet. Ať to na jednom serveru nevypadá jako dvě různé firmy. */ :root{ --red:#e20613; --red-dark:#c40511; --red-l:#fdf2f1; --red-l2:#fdeae8; --red-line:#f3b7ae; --ink:#1c1c1e; --ink-2:#3f434a; --sec:#65676b; --mut:#9aa0aa; --mut-2:#c0c4ca; --bg:#f4f4f5; --card:#fff; --hover:#fafafb; --zebra:#fbfbfc; --line:#e4e4e7; --line-soft:#ededf0; --line-strong:#d9dade; --line-inp:#d3d6dc; --gray-chip:#f0f1f3; --ok-fg:#0f6e56; --ok-bg:#e1f5ee; --ok-line:#8ed3ba; --amber-fg:#92400e; --amber-bg:#fef3c7; --err-fg:#991b1b; --err-bg:#fee2e2; } /* Tmavý režim se nasazuje skriptem na ještě před vykreslením, takže stav „podle zařízení" se sem nedostane a paleta se nepíše podruhé. */ html[data-tema="tmave"]{ color-scheme:dark; --red-l:rgba(226,6,19,.16); --red-l2:rgba(226,6,19,.22); --red-line:rgba(226,6,19,.45); --ink:#e6e8ea; --ink-2:#cdd1d6; --sec:#a2a8b0; --mut:#8b919b; --mut-2:#6b7079; --bg:#14161a; --card:#1c1f24; --hover:#23262c; --zebra:#1f2228; --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.16); --line-inp:rgba(255,255,255,.18); --gray-chip:#2a2e35; --ok-fg:#7fcfa4; --ok-bg:#12301f; --ok-line:rgba(127,207,164,.45); --amber-fg:#e8c07d; --amber-bg:#3a2c12; --err-fg:#f0a3a3; --err-bg:#3a1a1a; } *{box-sizing:border-box} body{margin:0; background:var(--bg); color:var(--ink); font:13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased} a{color:var(--red-dark); text-decoration:none} a:hover{text-decoration:underline} code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; color:var(--sec)} /* ---- horní lišta ---- */ .hlava{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40} .hlava-in{max-width:1240px; margin:0 auto; padding:0 20px; height:52px; display:flex; align-items:center; gap:22px} .znacka{display:flex; flex-direction:column; line-height:1.15; color:inherit} .znacka:hover{text-decoration:none} .znacka-nad{font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--red)} .znacka-hl{font-weight:700; font-size:15px; color:var(--ink)} .menu{display:flex; gap:4px; margin-right:auto} .menu a{height:28px; display:inline-flex; align-items:center; padding:0 11px; border-radius:6px; font-weight:600; font-size:12.5px; color:var(--sec)} .menu a:hover{background:var(--gray-chip); text-decoration:none} .menu a.je{background:var(--red-l); color:var(--red)} .kdo{font-size:12px; color:var(--mut)} .odhlas{display:flex; align-items:center; gap:10px} /* ---- rozcestník (kotvy) ---- */ .kotvy{position:sticky; top:52px; z-index:30; background:var(--bg); padding:10px 0 10px; margin:-4px 0 0; display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line-soft)} .kotva{height:26px; display:inline-flex; align-items:center; padding:0 10px; border-radius:6px; background:var(--gray-chip); color:var(--sec); font-weight:600; font-size:12px} .kotva:hover{background:var(--line); text-decoration:none} .kotva.je{background:var(--red-l); color:var(--red)} /* Výběr let pod nadpisem. Vybraný rok je značkově červený s fajfkou, nevybraný jen obrys — aby byl výběr vidět i když je vybráno všechno. */ .roky{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px} .roky .kotva{font-variant-numeric:tabular-nums; background:transparent; border:1px solid var(--line-inp); color:var(--sec)} .roky .kotva:hover{background:var(--gray-chip)} .roky .kotva.je{background:var(--red-l); border-color:var(--red-line); color:var(--red)} .roky .kotva.je::before{content:"✓"; font-size:10px; margin-right:5px; font-weight:700} .roky .chip{margin-left:5px} .roky .oddel{width:1px; align-self:stretch; background:var(--line); margin:2px 6px} .roky .popisek{font-size:11.5px; color:var(--mut); align-self:center; margin-right:2px} /* ---- obsah ---- */ .obsah{max-width:1240px; margin:0 auto; padding:14px 20px 60px} .zahlavi{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:8px 0 16px} h1{font-size:22px; font-weight:700; letter-spacing:-.01em; margin:0} .podnadpis{margin:3px 0 0; color:var(--mut); font-size:12.5px} /* ---- karty ---- */ .card{background:var(--card); border:1px solid var(--line); border-radius:8px; margin-bottom:14px; overflow:hidden} .card-h{padding:12px 14px; border-bottom:1px solid var(--line-soft)} .card-title{font-weight:700; font-size:13.5px; margin:0} .card-pozn{margin:3px 0 0; font-size:11.5px; color:var(--mut); line-height:1.5; max-width:78ch} .card-body{padding:14px} .mriz2{display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:0 14px} /* ---- KPI ---- */ .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-bottom:14px} .kpi{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:5px} .kpi.predbezne{border-color:var(--amber-bg); background:linear-gradient(0deg,var(--amber-bg) 0%,var(--card) 60%)} .kpi .lbl{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mut)} .kpi .val{font-weight:700; font-size:23px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink)} .kpi .sub{font-size:11.5px; color:var(--mut); font-variant-numeric:tabular-nums} /* ---- chipy ---- */ .chip{display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:4px; font-size:11px; font-weight:700; white-space:nowrap; background:var(--gray-chip); color:var(--ink-2); font-variant-numeric:tabular-nums} .chip-ok{background:var(--ok-bg); color:var(--ok-fg)} .chip-err{background:var(--err-bg); color:var(--err-fg)} .chip-amber{background:var(--amber-bg); color:var(--amber-fg)} .chip-red{background:var(--red-l2); color:var(--red-dark)} .chip-mut{background:var(--gray-chip); color:var(--mut)} /* ---- tabulky ---- */ .tbl{overflow-x:auto} table{width:100%; border-collapse:collapse; font-size:12.5px} th{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mut); text-align:left; padding:0 10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--card)} td{padding:0 10px; height:38px; border-bottom:1px solid var(--line-soft); color:var(--ink-2)} tbody tr:hover td{background:var(--hover)} tr:last-child td{border-bottom:none} .c{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} td.c{color:var(--ink)} td.jm{color:var(--ink); font-weight:600} td.drobne{color:var(--mut); font-size:11.5px} tr.soucet td{font-weight:700; color:var(--ink); border-top:1px solid var(--line-strong); background:var(--zebra)} .mesicni td,.mesicni th{padding:0 7px; font-size:11.5px} .mesicni td.c{font-size:11.5px} /* Srovnání je uvnitř buňky: pod letošním číslem menší čísla minulých let. Řádky proto musí povolit víc textu než jeden. */ .mesicni.se-srovnanim td{height:auto; padding:6px 7px; vertical-align:top} .mesicni .hl{display:block; font-weight:600; color:var(--ink)} /* Číslo vede na doklady, ze kterých vzniklo. Podtržení až při najetí, ať tabulka není samá čára. */ .mesicni .hl a{color:inherit; text-decoration:none} .mesicni .hl a:hover{color:var(--red); text-decoration:underline} .mesicni .sr{display:block; font-size:10.5px; color:var(--mut); white-space:nowrap; margin-top:1px} .mesicni td.jm .sr{color:var(--mut-2); font-weight:600} .mesicni .sr i{font-style:normal; font-weight:700; margin-left:3px} .mesicni .sr i.lepe{color:var(--ok-fg)} .mesicni .sr i.hure{color:var(--err-fg)} .mesicni .sr i.nic{color:var(--mut-2)} .mesicni td.souhrn{background:var(--zebra); border-left:1px solid var(--line)} /* Tabulky bez součtového řádku (výsledek, programatika) mají poslední řádek jako závěr — Výsledek, respektive Netto. */ .mesicni tbody tr:last-child td{border-top:1px solid var(--line-strong)} .mesicni tbody tr:last-child .hl{font-weight:700} .mesicni td.souhrn .hl{font-weight:700} /* ---- graf ---- */ .graf{width:100%; overflow-x:auto; position:relative} .zona{fill:transparent; cursor:default} .zona:hover,.zona.je{fill:var(--red); fill-opacity:.05} .zona:focus-visible{outline:2px solid var(--red); outline-offset:-2px} .bublina{position:absolute; top:6px; z-index:5; min-width:190px; padding:9px 11px; background:var(--card); border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 6px 22px -8px rgba(0,0,0,.35); font-size:12px; pointer-events:none} .b-hlava{font-weight:700; font-size:12.5px; margin-bottom:6px; color:var(--ink)} .b-radek{display:flex; justify-content:space-between; gap:16px; line-height:1.7; color:var(--sec)} .b-radek b{color:var(--ink); font-variant-numeric:tabular-nums} .b-radek i{font-style:normal; color:var(--mut); font-weight:400; margin-left:4px} .b-plus b{color:var(--ok-fg)} .b-minus b{color:var(--err-fg)} .b-cara{height:1px; background:var(--line); margin:6px 0} .graf svg{display:block; min-width:560px; width:100%; height:auto} .mrizka{stroke:var(--line); stroke-width:1} .popis{font-size:10.5px; fill:var(--mut)} .sl-vynos{fill:var(--red)} .sl-naklad{fill:var(--mut-2)} .cara-ted{fill:none; stroke:var(--red); stroke-width:2; stroke-linejoin:round} .bod-ted{fill:var(--red)} .osa-nula{stroke:var(--line-strong); stroke-width:1.5} .cara-loni{fill:none; stroke:var(--ink-2); stroke-width:1.5; stroke-dasharray:4 3; opacity:.6} .cara-predloni{fill:none; stroke:var(--mut); stroke-width:1.5; stroke-dasharray:1 3; opacity:.7} .legenda{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:11.5px; color:var(--sec)} .legenda i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px} .i-vynos{background:var(--red)} .i-naklad{background:var(--mut-2)} .i-vysledek{background:var(--red); height:3px; border-radius:2px} .i-loni{background:var(--ink-2); opacity:.55} .i-predloni{background:var(--mut); opacity:.8} /* ---- pruhy ---- */ .pruhy{display:flex; flex-direction:column; gap:9px} .pruh{display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:baseline} .pruh .nm{font-size:12.5px; color:var(--ink-2)} .pruh .kc{font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600} .drah{grid-column:1/-1; height:6px; background:var(--gray-chip); border-radius:3px; position:relative; overflow:hidden} .drah i{position:absolute; inset:0 auto 0 0; border-radius:3px; display:block} .drah .v-vynos{background:var(--red)} .drah .v-naklad{background:var(--mut-2)} .drah .loni{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink-2); opacity:.5} /* ---- formuláře ---- */ .btn{height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 11px; border:1px solid var(--line-inp); border-radius:6px; background:var(--card); color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer} .btn:hover{background:var(--bg); text-decoration:none} .btn-primary{border:0; background:var(--red); color:#fff} .btn-primary:hover{background:var(--red-dark)} .btn-sm{height:26px; padding:0 9px; font-size:11.5px; border-radius:5px} .btn-ghost{border:0; background:transparent; color:var(--sec)} .btn-ghost:hover{background:var(--gray-chip)} input[type=text],input[type=email],input[type=password],input[list],select,input[type=file]{ height:32px; padding:0 10px; border:1px solid var(--line-inp); border-radius:6px; background:var(--card); color:var(--ink); font:inherit; font-size:12.5px} input[type=file]{padding:5px 8px; height:auto} select{padding-right:6px} :focus-visible{outline:2px solid var(--red); outline-offset:1px} .radek{display:flex; gap:8px; align-items:center; flex-wrap:wrap} .hlaska{border-radius:6px; padding:10px 13px; font-size:12.5px; margin:0 0 14px; border:1px solid} .hlaska.ok{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-fg)} .hlaska.chyba{background:var(--err-bg); border-color:var(--err-fg); color:var(--err-fg)} .vystraha{height:26px; display:inline-flex; align-items:center; padding:0 10px; border-radius:6px; background:var(--amber-bg); color:var(--amber-fg); font-weight:700; font-size:12px} .vystraha:hover{text-decoration:none; filter:brightness(.97)} /* ---- tým: rozdíl a oddělení bloků osob ---- */ .zap{color:var(--err-fg); font-weight:600} .kla{color:var(--ok-fg); font-weight:600} .odd-radek td{border-bottom:2px solid var(--line-strong)} /* ---- lišta náhledu role ---- */ .nahled-lista{display:flex; align-items:center; gap:14px; position:sticky; top:52px; z-index:35; background:var(--amber-bg); color:var(--amber-fg); font-size:12.5px; border-bottom:1px solid color-mix(in srgb, var(--amber-fg) 35%, transparent); border-left:3px solid var(--amber-fg); padding:8px 20px} .nahled-lista b{font-weight:700} /* ---- výkaz honorářů ---- */ .vykaz input.kc{width:78px; text-align:right} .vykaz td{padding:4px 6px; height:auto} .vykaz .v-celkem,.vykaz .v-naklad{font-variant-numeric:tabular-nums; font-weight:600} .vykaz tfoot td{font-weight:700; border-top:1px solid var(--line-strong); background:var(--zebra)} /* ---- přihlášení ---- */ .prihlaseni-body{display:grid; place-items:center; min-height:100vh; padding:20px; background:var(--bg)} .prihlaseni{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:28px; width:min(360px,100%); display:flex; flex-direction:column; gap:12px} .prihlaseni h1{font-size:20px; margin:0} .prihlaseni label{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--sec)} .prihlaseni .btn{justify-content:center; height:38px; margin-top:4px} .pata{max-width:1240px; margin:0 auto; padding:16px 20px 36px; color:var(--mut); font-size:11.5px; border-top:1px solid var(--line)}