/* ---------- tokeny: světlo (účetní linkovaný papír) ---------- */
:root{
  --ground:#E4E9E0; --paper:#FBFCFA; --panel:#F2F5EF; --rail:#141A15; --rail-ink:#D9E0D6;
  --rail-muted:#8B978A; --rail-line:#26302704; --rail-hover:#1E2720;
  --ink:#131A15; --ink-2:#3C463E; --muted:#5F6B61; --faint:#8A948C;
  --line:#C9D2C4; --line-soft:#DDE4D9; --zebra:#F3F6F1;
  --acc:#9E4520; --acc-soft:#9E452014; --acc-line:#9E452033;
  --acc-2:#1268A0; --acc-2-soft:#1268A014; --acc-2-line:#1268A033;
  --ok:#2E6B45; --ok-bg:#2E6B4514; --warn:#8A6210; --warn-bg:#8A621014;
  --crit:#A33527; --crit-bg:#A3352714;
  --shadow:0 1px 2px #131A150A, 0 6px 18px #131A150F;
  --r:7px; --r-sm:5px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101410; --paper:#191E19; --panel:#151A16; --rail:#0B0F0C; --rail-ink:#D3DACF;
    --rail-muted:#79847A; --rail-hover:#161C17;
    --ink:#E4E9DF; --ink-2:#BCC4B8; --muted:#8E9A8D; --faint:#6E7A6E;
    --line:#2A322A; --line-soft:#222922; --zebra:#1C221C;
    --acc:#C4643C; --acc-soft:#C4643C1F; --acc-line:#C4643C40;
    --acc-2:#3D93C9; --acc-2-soft:#3D93C91F; --acc-2-line:#3D93C940; --acc-2-line:#3D93C940;
    --ok:#5FA97C; --ok-bg:#5FA97C1F; --warn:#C79A3E; --warn-bg:#C79A3E1F;
    --crit:#D4705F; --crit-bg:#D4705F1F;
    --shadow:0 1px 2px #00000040, 0 6px 20px #00000038;
  }
}
:root[data-theme="dark"]{
  --ground:#101410; --paper:#191E19; --panel:#151A16; --rail:#0B0F0C; --rail-ink:#D3DACF;
  --rail-muted:#79847A; --rail-hover:#161C17;
  --ink:#E4E9DF; --ink-2:#BCC4B8; --muted:#8E9A8D; --faint:#6E7A6E;
  --line:#2A322A; --line-soft:#222922; --zebra:#1C221C;
  --acc:#C4643C; --acc-soft:#C4643C1F; --acc-line:#C4643C40;
  --acc-2:#3D93C9; --acc-2-soft:#3D93C91F; --acc-2-line:#3D93C940;
  --ok:#5FA97C; --ok-bg:#5FA97C1F; --warn:#C79A3E; --warn-bg:#C79A3E1F;
  --crit:#D4705F; --crit-bg:#D4705F1F;
  --shadow:0 1px 2px #00000040, 0 6px 20px #00000038;
}
/* identita 2 přebarví akcent */
[data-ident="id-tisk-fotek"]{ --acc:var(--acc-2); --acc-soft:var(--acc-2-soft); --acc-line:var(--acc-2-line); }

*{box-sizing:border-box}
/* třídy s vlastním display (.brana, .nacitam, .app) jinak přebijí atribut hidden */
[hidden]{display:none !important}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input,select,textarea{font:inherit; color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}

/* ---------- kostra ---------- */
.app{display:flex; min-height:100vh}
.rail{
  width:236px; flex:0 0 236px; background:var(--rail); color:var(--rail-ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:baseline; gap:8px; padding:20px 18px 16px}
.brand b{font-family:"IBM Plex Serif",Georgia,serif; font-size:19px; font-weight:600; letter-spacing:-.015em}
.brand span{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--rail-muted)}

.ident-switch{padding:0 12px 14px; position:relative}
.ident-btn{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px;
  background:#ffffff0A; border:1px solid #ffffff14; border-radius:var(--r); text-align:left;
}
.ident-btn:hover{background:#ffffff12}
.chip{
  width:26px; height:26px; flex:0 0 26px; border-radius:5px; display:grid; place-items:center;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; color:#fff; background:var(--acc); text-shadow:0 1px 1px #0003;
}
.ident-btn .t{flex:1; min-width:0}
.ident-btn .t b{display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ident-btn .t span{display:block; font-size:10.5px; color:var(--rail-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ident-btn .car{color:var(--rail-muted); font-size:10px}
.ident-menu{
  position:absolute; left:12px; right:12px; top:calc(100% - 8px); z-index:40;
  background:#20282136; backdrop-filter:blur(14px); background-color:#1B221C;
  border:1px solid #ffffff1F; border-radius:var(--r); padding:5px; box-shadow:0 14px 34px #00000059;
}
.ident-menu[hidden]{display:none}
.ident-menu button{width:100%; display:flex; gap:9px; align-items:center; padding:8px; border-radius:var(--r-sm); text-align:left}
.ident-menu button:hover{background:#ffffff14}
.ident-menu .t b{font-size:12.5px} .ident-menu .t span{font-size:10.5px; color:var(--rail-muted)}

nav{padding:6px 12px; display:flex; flex-direction:column; gap:1px; flex:1; overflow-y:auto}
.nav-lbl{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rail-muted); padding:14px 10px 5px}
nav a{
  display:flex; align-items:center; gap:9px; padding:7.5px 10px; border-radius:var(--r-sm);
  color:var(--rail-ink); text-decoration:none; font-size:13px;
}
nav a:hover{background:var(--rail-hover)}
nav a.on{background:#ffffff14; font-weight:600}
nav a.on .ic{color:var(--acc)}
nav a .ic{width:15px; display:grid; place-items:center; color:var(--rail-muted); flex:0 0 15px}
nav a .badge{margin-left:auto; font-size:10.5px; color:var(--rail-muted); font-family:"IBM Plex Mono",monospace}
.rail-foot{padding:12px; border-top:1px solid #ffffff14; font-size:11px; color:var(--rail-muted); display:flex; align-items:center; gap:8px}
.rail-foot .dot{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:0 0 6px}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  padding:16px 28px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.topbar h1{font-family:"IBM Plex Serif",Georgia,serif; font-size:21px; letter-spacing:-.015em}
.topbar .sub{font-size:12px; color:var(--muted); margin-top:1px}
.spacer{flex:1}
.wrap{padding:24px 28px 56px; max-width:1240px; width:100%}

/* ---------- prvky ---------- */
a.btn{text-decoration:none}
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--paper); font-size:13px; font-weight:500;
  transition:background .12s, border-color .12s;
}
.btn:hover{background:var(--panel); border-color:var(--muted)}
.btn.primary{background:var(--acc); border-color:var(--acc); color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent; background:transparent}
.btn.ghost:hover{background:var(--panel)}
.btn.sm{padding:5px 9px; font-size:12px}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-h{padding:14px 18px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:12px}
.card-h h2{font-size:13.5px; font-weight:600; letter-spacing:-.005em}
.card-h .hint{font-size:11.5px; color:var(--muted)}
.card-b{padding:18px}

.lbl{display:block; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.fld{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); transition:border-color .12s, box-shadow .12s;
}
.fld:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft)}
select.fld{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px}
.row{display:grid; gap:14px}
.row.c2{grid-template-columns:1fr 1fr}
.row.c3{grid-template-columns:repeat(3,1fr)}

.pill{display:inline-flex; align-items:center; gap:5px; padding:2.5px 8px; border-radius:100px; font-size:11.5px; font-weight:600; white-space:nowrap}
.pill::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.pill.ok{color:var(--ok); background:var(--ok-bg)}
.pill.warn{color:var(--warn); background:var(--warn-bg)}
.pill.crit{color:var(--crit); background:var(--crit-bg)}
.pill.mute{color:var(--muted); background:var(--panel)}

table{width:100%; border-collapse:collapse}
th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
td.num,td.mono,th.r{white-space:nowrap}
tbody tr:nth-child(even){background:var(--zebra)}
tbody tr:hover{background:var(--acc-soft)}
.r{text-align:right} .tbl-wrap{overflow-x:auto}
.trunc{max-width:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px}
.kpi{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:15px 17px; box-shadow:var(--shadow)}
.kpi .k{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.kpi .v{font-family:"IBM Plex Serif",Georgia,serif; font-size:26px; font-weight:600; letter-spacing:-.02em; margin-top:7px; font-variant-numeric:tabular-nums}
.kpi .m{font-size:11.5px; color:var(--muted); margin-top:3px}
.kpi.alert .v{color:var(--crit)}
.kpi.good .v{color:var(--ok)}

.empty{padding:40px 18px; text-align:center; color:var(--muted); font-size:13px}
.tabs{display:inline-flex; gap:2px; padding:2.5px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
.tabs button{padding:5.5px 12px; border-radius:var(--r-sm); font-size:12.5px; font-weight:500; color:var(--muted)}
.tabs button.on{background:var(--paper); color:var(--ink); font-weight:600; box-shadow:0 1px 2px #131A1514}
.note{font-size:12px; color:var(--muted); line-height:1.55}
kbd{font-family:"IBM Plex Mono",monospace; font-size:11px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:1px 5px; background:var(--panel)}

/* graf */
.chart{width:100%; display:block; overflow:visible}
.chart .bar{fill:var(--acc); transition:opacity .12s}
.chart .bar:hover{opacity:.75}
.chart .grid{stroke:var(--line-soft); stroke-width:1}
.chart .axt{fill:var(--faint); font-size:10px; font-family:"IBM Plex Mono",monospace}
.chart .dlbl{fill:var(--ink-2); font-size:10.5px; font-weight:600; font-family:"IBM Plex Mono",monospace}
.tip{
  position:fixed; z-index:60; pointer-events:none; background:var(--rail); color:var(--rail-ink);
  padding:7px 10px; border-radius:var(--r-sm); font-size:12px; box-shadow:0 8px 22px #00000038;
  opacity:0; transition:opacity .1s; white-space:nowrap;
}
.tip.on{opacity:1}
.tip b{font-family:"IBM Plex Mono",monospace; display:block; font-size:13px; margin-top:2px}

/* modal */
.scrim{position:fixed; inset:0; background:#0B0F0C99; backdrop-filter:blur(3px); z-index:50; display:grid; place-items:start center; padding:32px 20px; overflow-y:auto}
.scrim[hidden]{display:none}
.modal{background:var(--paper); border:1px solid var(--line); border-radius:10px; width:100%; max-width:1140px; box-shadow:0 24px 60px #00000045}
.modal-h{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px}
.modal-h h2{font-family:"IBM Plex Serif",Georgia,serif; font-size:18px}
.modal-b{padding:20px}
.modal-f{padding:14px 20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; background:var(--panel); border-radius:0 0 10px 10px}

@media (max-width:940px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .row.c2,.row.c3{grid-template-columns:1fr}
  .app{flex-direction:column}
  .rail{width:100%; flex:none; height:auto; position:static}
  nav{flex-direction:row; overflow-x:auto; padding:4px 10px 10px}
  .nav-lbl{display:none}
  .rail-foot{display:none}
  .wrap,.topbar{padding-left:16px; padding-right:16px}
}

/* ---------- přihlašovací brána ---------- */
.brana{min-height:100vh; display:grid; place-items:center; padding:32px 20px; background:var(--ground)}
.brana .box{max-width:420px; text-align:center}
.brana .znak{font-family:"IBM Plex Serif",Georgia,serif; font-size:28px; font-weight:600; letter-spacing:-.02em}
.brana .znak span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:block; margin-top:4px; font-family:"IBM Plex Sans",sans-serif; font-weight:500}
.brana p{color:var(--muted); font-size:13.5px; line-height:1.6; margin:18px 0 22px}
.brana .chyba{color:var(--crit); background:var(--crit-bg); border-radius:var(--r-sm);
  padding:10px 12px; font-size:13px; margin-bottom:16px; text-align:left}
.nacitam{min-height:100vh; display:grid; place-items:center; color:var(--muted); font-size:14px}