/* Pressdata — Záskok. Bez frameworku, jen CSS proměnné. */
:root {
  --bg:#f4f6fa; --panel:#ffffff; --panel-2:#fafbfd; --line:#e2e6ee; --line-2:#eef1f6;
  --ink:#141a24; --ink-2:#4d5666; --ink-3:#8b95a6;
  --brand:#1e3a8a; --brand-2:#2f5fd0; --brand-soft:#e8eeff;
  --ok:#15803d; --ok-soft:#e6f5ea; --warn:#b45309; --warn-soft:#fdf3e3; --err:#b91c1c; --err-soft:#fdeaea;
  --carry:#9333ea;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.18);
  --r:12px; --r-s:8px;
  --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d1117; --panel:#161b23; --panel-2:#1b212b; --line:#2a323d; --line-2:#222a34;
    --ink:#e8ecf2; --ink-2:#a8b3c2; --ink-3:#6f7b8b;
    --brand:#7ea2ff; --brand-2:#5b86f0; --brand-soft:#1c2740;
    --ok:#4ade80; --ok-soft:#14281c; --warn:#fbbf24; --warn-soft:#2c2312; --err:#f87171; --err-soft:#2d1618;
    --carry:#c084fc;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.7);
  }
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body { background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
a { color:var(--brand-2); }

/* ---------------------------------------------------------------- layout */
#app { display:flex; min-height:100vh; }
.sidebar {
  width:252px; flex:0 0 252px; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand { padding:20px 20px 16px; border-bottom:1px solid var(--line-2); }
.brand .logo { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; font-size:16px; }
.brand .mark {
  width:30px; height:30px; border-radius:8px; background:linear-gradient(140deg,var(--brand-2),var(--brand));
  color:#fff; display:grid; place-items:center; font-size:14px; font-weight:800;
}
.brand .sub { color:var(--ink-3); font-size:12px; margin-top:4px; margin-left:40px; }
nav { padding:12px 10px; flex:1; overflow:auto; }
nav .group { color:var(--ink-3); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; padding:14px 10px 6px; }
nav button {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0;
  padding:9px 10px; border-radius:var(--r-s); color:var(--ink-2); cursor:pointer; font-size:14px;
}
nav button:hover { background:var(--panel-2); color:var(--ink); }
nav button.active { background:var(--brand-soft); color:var(--brand); font-weight:600; }
nav button .ic { width:18px; text-align:center; font-size:15px; }
nav .badge { margin-left:auto; background:var(--err); color:#fff; border-radius:20px; font-size:11px; font-weight:700; padding:1px 7px; }
nav button.active .badge { background:var(--brand-2); }
.who { border-top:1px solid var(--line-2); padding:12px; }
.who .row { display:flex; align-items:center; gap:10px; }
.who .name { font-weight:600; font-size:13.5px; }
.who .pos { color:var(--ink-3); font-size:12px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 34px; }
.avatar.sm { width:26px; height:26px; flex:0 0 26px; font-size:11px; }

main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:16px; padding:22px 32px 0; }
.topbar h1 { font-size:22px; margin:0; letter-spacing:-.02em; }
.topbar .desc { color:var(--ink-3); font-size:13px; margin-top:3px; }
.topbar .spacer { flex:1; }
.content { padding:22px 32px 60px; max-width:1280px; }

/* ---------------------------------------------------------------- prvky */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.card > h3 { margin:0; padding:14px 16px; border-bottom:1px solid var(--line-2); font-size:13.5px;
  letter-spacing:.01em; display:flex; align-items:center; gap:8px; }
.card > h3 .count { color:var(--ink-3); font-weight:500; }
.card .body { padding:16px; }
.card .body.tight { padding:0; }
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.stack { display:flex; flex-direction:column; gap:16px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line);
  background:var(--panel); padding:8px 14px; border-radius:var(--r-s); cursor:pointer; font-weight:550; font-size:13.5px; }
.btn:hover { border-color:var(--ink-3); }
.btn.primary { background:var(--brand-2); border-color:var(--brand-2); color:#fff; }
.btn.primary:hover { filter:brightness(1.07); }
.btn.ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.btn.danger { background:var(--panel); border-color:var(--err); color:var(--err); }
.btn.danger:hover { background:var(--err-soft); }
.btn.ghost { background:none; border-color:transparent; color:var(--ink-2); }
.btn.ghost:hover { background:var(--panel-2); }
.btn.sm { padding:5px 10px; font-size:12.5px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.chip { display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:2px 10px; font-size:12px; font-weight:600;
  border:1px solid transparent; white-space:nowrap; }
.chip .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.chip.pending { color:var(--warn); background:var(--warn-soft); }
.chip.approved { color:var(--ok); background:var(--ok-soft); }
.chip.rejected { color:var(--err); background:var(--err-soft); }
.chip.cancelled { color:var(--ink-3); background:var(--panel-2); }
.chip.type { background:var(--panel-2); color:var(--ink-2); border-color:var(--line); }

.metric { padding:16px; }
.metric .k { color:var(--ink-3); font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.metric .v { font-size:30px; font-weight:700; letter-spacing:-.03em; margin-top:2px; }
.metric .v small { font-size:14px; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.metric .h { color:var(--ink-3); font-size:12.5px; margin-top:4px; }
.bar { height:7px; border-radius:99px; background:var(--line); overflow:hidden; display:flex; margin-top:10px; }
.bar i { display:block; height:100%; }

table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; color:var(--ink-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  padding:10px 14px; border-bottom:1px solid var(--line); font-weight:600; white-space:nowrap; }
td { padding:11px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--panel-2); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.muted { color:var(--ink-3); }
.empty { padding:34px 16px; text-align:center; color:var(--ink-3); font-size:13.5px; }
.empty .big { font-size:26px; display:block; margin-bottom:6px; opacity:.6; }

/* form */
.field { margin-bottom:16px; }
.field > label { display:block; font-weight:600; font-size:13px; margin-bottom:6px; }
.field .hint { color:var(--ink-3); font-size:12.5px; margin-top:5px; }
input[type=text],input[type=date],input[type=number],select,textarea {
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--panel-2); }
/* Pruh upozorňující na ukázkový režim. */
.demobar { background:var(--warn-soft); color:var(--warn); font-size:12.5px; font-weight:600;
  padding:7px 32px; border-bottom:1px solid var(--warn); letter-spacing:.01em; }
@media (max-width:860px) { .demobar { padding-left:16px; padding-right:16px; } }

/* Řádek zástupu: kolega + jeho část agendy. */
.subrow { display:grid; grid-template-columns:minmax(140px,1fr) minmax(140px,1.3fr) auto; gap:8px; margin-bottom:8px; align-items:center; }
.subrow select, .subrow input { margin:0; }
.subrow .btn { padding:6px 9px; color:var(--ink-3); }
.subrow .btn:hover { color:var(--err); background:var(--err-soft); }
@media (max-width:620px) { .subrow { grid-template-columns:1fr auto; } .subrow input { grid-column:1 / -1; } }

/* Pokrytí agendy v detailu žádosti. */
.cover { display:flex; flex-direction:column; gap:7px; margin:2px 0 0; }
.cover .r { display:flex; align-items:center; gap:9px; font-size:13.5px; padding:7px 10px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--panel-2); }
.cover .r .p { color:var(--ink-2); font-size:13px; }
.cover .r .st { margin-left:auto; white-space:nowrap; }

/* Pole jen ke čtení (vedení vidí nároky, ale nemění je). */
input.ro { border-color:transparent; background:none; cursor:default; }
input.ro:focus { outline:none; }

input:focus,select:focus,textarea:focus { outline:2px solid var(--brand-2); outline-offset:-1px; border-color:var(--brand-2); }
textarea { min-height:76px; resize:vertical; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); cursor:pointer; }
.typegrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.typegrid label { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:var(--r-s);
  padding:10px 12px; cursor:pointer; background:var(--panel-2); font-size:13.5px; }
.typegrid label:has(input:checked) { border-color:var(--brand-2); background:var(--brand-soft); color:var(--brand); font-weight:600; box-shadow:inset 0 0 0 1px var(--brand-2); }
.typegrid input { accent-color:var(--brand-2); }

.note { border-radius:var(--r-s); padding:10px 12px; font-size:13px; display:flex; gap:9px; align-items:flex-start; margin-bottom:8px; }
.note .ic { flex:0 0 auto; }
.note.error { background:var(--err-soft); color:var(--err); }
.note.warn { background:var(--warn-soft); color:var(--warn); }
.note.info { background:var(--brand-soft); color:var(--brand); }
.note.ok { background:var(--ok-soft); color:var(--ok); }

/* kalendář */
.calwrap { overflow-x:auto; }
.cal { border-collapse:separate; border-spacing:0; min-width:900px; }
.cal th.person, .cal td.person { position:sticky; left:0; background:var(--panel); z-index:2; min-width:190px;
  border-right:1px solid var(--line); }
.cal th.d { width:26px; min-width:26px; padding:5px 0; text-align:center; font-size:10.5px; letter-spacing:0; }
.cal th.d .dow { display:block; color:var(--ink-3); font-size:9.5px; font-weight:500; }
.cal td.d { width:26px; min-width:26px; padding:0; height:30px; border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line-2); }
.cal td.d.off { background:var(--panel-2); }
.cal th.d.off { color:var(--ink-3); }
.cal td.d.hol { background:var(--warn-soft); }
.cal td.d.today, .cal th.d.today { box-shadow:inset 2px 0 0 var(--brand-2), inset -2px 0 0 var(--brand-2); }
.cal .seg { height:20px; margin:5px 0; display:block; }
/* Převzatá cizí agenda — tenký pásek u spodní hrany dne. */
.cal .carry { position:absolute; left:1px; right:1px; bottom:2px; height:4px; border-radius:2px;
  background:var(--carry); }
.cal .carry.unconf { background:repeating-linear-gradient(90deg,var(--carry),var(--carry) 3px,transparent 3px,transparent 5px); }
.cal td.d { position:relative; }
.cal tr.teamrow td { background:var(--panel-2); font-weight:600; font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); padding:7px 14px; position:sticky; left:0; }
.cal td.person .p { display:flex; align-items:center; gap:8px; padding:2px 12px; }
.cal td.person .p .nm { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.legend { display:flex; flex-wrap:wrap; gap:14px; padding:12px 16px; font-size:12.5px; color:var(--ink-2); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:14px; height:10px; border-radius:3px; display:inline-block; }

/* login */
.login { min-height:100vh; display:grid; place-items:center; padding:40px 20px; width:100%; }
.login .box { max-width:820px; width:100%; }
.login h1 { font-size:26px; letter-spacing:-.02em; margin:0 0 6px; }
.login p.lead { color:var(--ink-2); margin:0 0 22px; }
.people { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.people button { display:flex; align-items:center; gap:10px; text-align:left; padding:10px 12px;
  border:1px solid var(--line); background:var(--panel); border-radius:var(--r-s); cursor:pointer; }
.people button:hover { border-color:var(--brand-2); background:var(--brand-soft); }
.people .nm { font-weight:600; font-size:13.5px; }
.people .ps { color:var(--ink-3); font-size:12px; }

/* modal */
.overlay { position:fixed; inset:0; background:rgba(9,13,20,.5); display:grid; place-items:center; padding:20px; z-index:50; }
.modal { background:var(--panel); border-radius:var(--r); border:1px solid var(--line); width:min(560px,100%);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5); max-height:90vh; overflow:auto; }
.modal h3 { margin:0; padding:16px; border-bottom:1px solid var(--line-2); font-size:15px; }
.modal .body { padding:16px; }
.modal .foot { padding:12px 16px; border-top:1px solid var(--line-2); display:flex; gap:8px; justify-content:flex-end; }

.toast { position:fixed; right:20px; bottom:20px; background:var(--panel); border:1px solid var(--line);
  border-left:4px solid var(--ok); border-radius:var(--r-s); box-shadow:var(--shadow); padding:12px 16px;
  font-size:13.5px; z-index:60; max-width:380px; }
.toast.err { border-left-color:var(--err); }

.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; }
.kv dt { color:var(--ink-3); }
.kv dd { margin:0; }
code.url { display:block; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-s);
  padding:9px 11px; font-size:12px; word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

@media (max-width:860px) {
  #app { flex-direction:column; }
  .sidebar { width:100%; flex:none; height:auto; position:static; }
  nav { display:flex; flex-wrap:wrap; gap:4px; }
  nav .group { display:none; }
  nav button { width:auto; }
  .content, .topbar { padding-left:16px; padding-right:16px; }
}