/* WSNIPER - zakladni vzhled (rezim Ekonom). Dalsi vzhledy prijdou v etape 5. */
:root { --bg:#f6f7f9; --card:#fff; --ink:#15181d; --muted:#5d6670; --line:#dde1e6; --acc:#1f7a4d;
        --pos:#137a3d; --neg:#b42318; --warn:#9a6700; --r:8px; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--acc); }
header { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); }
header .logo { font-weight:800; font-size:18px; letter-spacing:.5px; text-decoration:none; color:var(--ink); }
header .logo b { color:var(--acc); }
header nav { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; align-items:center; }
main { max-width:1100px; margin:0 auto; padding:16px; }
h1 { font-size:20px; margin:4px 0 12px; } h2 { font-size:16px; margin:20px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:14px; }
.grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.kpi .l { color:var(--muted); font-size:12px; } .kpi .v { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th, td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { font-size:12px; color:var(--muted); font-weight:600; }
td.n, th.n { text-align:right; white-space:nowrap; }
.scroll { overflow-x:auto; }
.pos { color:var(--pos); } .neg { color:var(--neg); } .muted { color:var(--muted); } .warn { color:var(--warn); }
.btn, button { display:inline-block; padding:7px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card);
  color:var(--ink); font:inherit; cursor:pointer; text-decoration:none; }
.btn.primary, button.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
button.danger { color:var(--neg); }
form.inline { display:inline; }
label { display:block; font-size:13px; color:var(--muted); margin:8px 0 2px; }
input, select { width:100%; max-width:420px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; font:inherit; }
input[type=checkbox] { width:auto; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:end; } .row > div { flex:1 1 160px; }
.msg { padding:8px 12px; border-radius:6px; margin-bottom:10px; background:#eef6f1; border:1px solid #cfe7d8; }
.msg.error { background:#fdeeee; border-color:#f3c9c6; }
.errorlist { color:var(--neg); margin:4px 0; padding-left:18px; font-size:13px; }
.badge { font-size:11px; padding:2px 6px; border-radius:10px; border:1px solid var(--line); color:var(--muted); }
.login { max-width:360px; margin:8vh auto; }
@media (max-width:600px) { main { padding:10px; } .kpi .v { font-size:18px; } th, td { padding:5px 6px; } }

/* --- dashboard (etapa 3) --- */
:root { --c1:#1f7a4d; --c2:#2563eb; --c3:#9a6700; --pos-bar:#2f9e5b; --neg-bar:#d4574b; }
.controls { display:flex; flex-direction:column; gap:10px; }
.ctl-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ctl-label { font-size:12px; color:var(--muted); width:52px; }
.chip { display:inline-block; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--card);
  color:var(--ink); text-decoration:none; font-size:14px; cursor:pointer; list-style:none; }
.chip.on { background:var(--acc); border-color:var(--acc); color:#fff; }
.controls select { width:auto; padding:5px 8px; border-radius:999px; }
.controls select.on { border-color:var(--acc); }
details.custom summary::-webkit-details-marker { display:none; }
details.custom[open] form { margin-top:8px; }
.theme-select { width:auto; padding:6px 8px; }
.badge.open { color:var(--warn); border-color:var(--warn); }
.status { margin-top:-6px; }
.kpis { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); margin-bottom:6px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; }
.kpi .s { font-size:12px; color:var(--muted); margin-top:2px; }
.kpi.main .v { font-size:24px; }
.note { font-size:12px; margin:4px 0 14px; }
.charts { display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(460px,1fr)); }
figure.chart { margin:0; }
figure.chart figcaption { font-size:13px; font-weight:600; margin-bottom:4px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
figure.chart svg { width:100%; height:auto; display:block; }
.c-grid { stroke:var(--line); stroke-width:1; }
.c-zero { stroke:var(--muted); stroke-width:1; }
.c-tick { fill:var(--muted); font-size:15px; }
.c-line { fill:none; stroke-width:3; }
.c-line.s1 { stroke:var(--c1); } .c-line.s2 { stroke:var(--c2); } .c-line.s3 { stroke:var(--c3); stroke-dasharray:5 4; }
.c-dot.s1 { fill:var(--c1); } .c-dot.s2 { fill:var(--c2); } .c-dot.s3 { fill:var(--c3); }
.c-dot.c-open { fill:var(--card); stroke-width:2; } .c-dot.c-open.s1 { stroke:var(--c1); } .c-dot.c-open.s2 { stroke:var(--c2); } .c-dot.c-open.s3 { stroke:var(--c3); }
.c-bar.c-pos { fill:var(--pos-bar); } .c-bar.c-neg { fill:var(--neg-bar); } .c-bar.c-open { opacity:.45; }
.c-key { font-weight:400; font-size:12px; color:var(--muted); }
.c-key::before { content:""; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; background:var(--muted); }
.c-key.s1::before { background:var(--c1); } .c-key.s2::before { background:var(--c2); } .c-key.s3::before { background:var(--c3); }
.c-key.c-pos::before { background:var(--pos-bar); } .c-key.c-neg::before { background:var(--neg-bar); }
tr.sum td { font-weight:700; border-top:2px solid var(--line); }
@media (max-width:600px) {
  .hide-m { display:none; }
  .kpis { grid-template-columns:1fr 1fr; gap:8px; }
  .kpi { padding:8px 10px; } .kpi.main { grid-column:1 / -1; }
  .charts { grid-template-columns:1fr; }
  header nav { margin-left:0; width:100%; }
  header nav .btn, header nav button, header nav select { padding:6px 8px; font-size:13px; }
  .ctl-label { width:100%; }
}