/* SolarEG Monitoring — component styles (framework-agnostic).
 * Requires tokens/tokens.css. Class names match the prototypes in /prototypes.
 * Adapt to the project's styling approach (Tailwind layer, CSS modules, SCSS…) instead of adding a competing system.
 */

/* ---------- base ---------- */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh); }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--brand); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 12px; }
.muted, .sub { color: var(--muted); }
.sub { font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- app shell ---------- */
.layout { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; }
.side { flex: 1 1 var(--side-w); background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; font-weight: 700; font-size: 15px; }
.brand small { font-weight: 400; color: var(--muted); font-size: 15px; }
.logo { width: 28px; height: 28px; border-radius: 7px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: var(--nav-item-h); border-radius: 6px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"], .nav a.on { background: var(--brand-soft); color: var(--brand); }
.cnt { margin-left: auto; font-size: 11.5px; font-weight: 600; min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.cnt.c { background: var(--crit); border-color: var(--crit); color: var(--on-crit); }
.plan { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-tag); padding: 0 5px; } /* "Plán" = planned feature */
.sect { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 16px 10px 4px; font-weight: 600; }
.foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.search { flex: 1 1 300px; max-width: 520px; display: flex; align-items: center; gap: 8px; height: var(--search-h); padding: 0 10px 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--muted); }
.search input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: var(--ink); min-width: 0; }
.kbd { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--line); border-radius: var(--r-tag); padding: 0 5px; }
.demo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border: 1.5px dashed var(--ink-2); border-radius: var(--r-tag); padding: 2px 7px; } /* only on demo/prototype data */
.content { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: var(--content-max); }
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ph h1 { margin: 0; font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.015em; }
.crumb { font-size: 13px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .side { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; }
  .side .sect, .side .foot, .brand small { display: none; }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav a { white-space: nowrap; }
  .content { padding: 16px; }
  .top { padding: 10px 16px; }
}

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; }
.card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.card-h h2 { margin: 0; font-size: var(--fs-card); font-weight: 600; }
.card-b { padding: 14px 16px; }
.split { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.split > .wide { flex: 999 1 620px; min-width: 0; }
.split > .narrow { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h); padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; font-size: 13px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.pri { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--chip-h); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.chip b { font-weight: 600; color: var(--ink); }
.chip.on, .chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.chip.on b, .chip[aria-pressed="true"] b { color: var(--brand); }
.tagf { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 9px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); } /* active filter token */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg > * { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--surface); border: 0; text-decoration: none; }
.seg > * + * { border-left: 1px solid var(--line-strong); }
.seg > .on, .seg > [aria-current="page"], .seg > [aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.fld input, .fld select { height: var(--input-h); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 0 10px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.fld .hint { font-size: 12px; color: var(--muted); }
.fld .err { font-size: 12px; color: var(--crit); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs [role="tab"] { font: inherit; font-weight: 500; padding: 10px 14px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }

/* ---------- STATUS PILL: shape + color + text ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.pill .ico { width: 9px; height: 9px; flex: none; background: currentColor; display: inline-block; }
.p-ok    { color: var(--ok);    background: var(--ok-bg); }    .p-ok .ico    { border-radius: 50%; }                                            /* filled circle */
.p-alarm { color: var(--crit);  background: var(--crit-bg); }  .p-alarm .ico { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 11px; height: 10px; } /* triangle */
.p-off   { color: var(--off);   background: var(--off-bg); }   .p-off .ico   { border-radius: 1px; }                                            /* filled square */
.p-stale { color: var(--stale); background: var(--stale-bg); } .p-stale .ico { background: transparent; border: 2px solid currentColor; border-radius: 50%; } /* ring */
.p-coll  { color: var(--coll);  background: var(--coll-bg); }  .p-coll .ico  { transform: rotate(45deg); width: 8px; height: 8px; }             /* diamond */
.p-unk   { color: var(--unk);   background: transparent; border: 1px dashed var(--line-strong); } .p-unk .ico { background: transparent; border: 2px dotted currentColor; border-radius: 50%; } /* dotted circle */
.p-int   { color: var(--ink-2); background: transparent; border: 1px solid var(--line-strong); } .p-int .ico { background: transparent; border: 2px solid currentColor; border-radius: 2px; } /* outline square */
.p-due   { color: var(--warn);  background: transparent; border: 1px solid var(--warn); } .p-due .ico { background: transparent; border: 2px solid currentColor; border-radius: 1px; height: 10px; } /* outline rect */

/* ---------- SEVERITY: bar meter, separate from type ---------- */
.sev { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sev i { display: inline-flex; gap: 2px; align-items: flex-end; }
.sev s { display: block; width: 4px; border-radius: 1px; background: currentColor; opacity: .22; }
.sev s:nth-child(1) { height: 6px; } .sev s:nth-child(2) { height: 9px; } .sev s:nth-child(3) { height: 12px; }
.sev.c { color: var(--crit); } .sev.c s { opacity: 1; }
.sev.w { color: var(--warn); } .sev.w s:nth-child(-n+2) { opacity: 1; }
.sev.i { color: var(--muted); } .sev.i s:nth-child(1) { opacity: 1; }

/* ---------- CARE LEVEL: square tag + dots, never confused with status ---------- */
.care { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: var(--r-tag); font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.care i { display: inline-flex; gap: 2px; }
.care s { display: block; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--brand); }
.care.l1 s:nth-child(1), .care.l2 s:nth-child(-n+2), .care.l3 s { background: var(--brand); } /* mini / plus / individual */
.care.l0 s { border-color: var(--line-strong); }                                             /* bez smlouvy */
.care.un { border-style: dashed; color: var(--muted); } .care.un s { border-color: var(--line-strong); border-style: dotted; } /* unset */

/* ---------- validity (revize, záruky) ---------- */
.wst { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.wst .ico { width: 8px; height: 8px; display: inline-block; flex: none; }
.w-ok   { color: var(--ok); }   .w-ok .ico   { background: currentColor; border-radius: 50%; }
.w-soon { color: var(--warn); } .w-soon .ico { background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 10px; height: 9px; }
.w-exp  { color: var(--crit); } .w-exp .ico  { background: currentColor; border-radius: 1px; }
.w-na   { color: var(--muted); font-weight: 500; font-style: italic; } .w-na .ico { border: 1.5px dashed currentColor; border-radius: 50%; }

/* ---------- field value states ---------- */
.na { color: var(--muted); font-style: italic; font-weight: 400; } /* "— neposkytováno" */
.st { color: var(--stale); }                                     /* stale value; always followed by time */
.stale-v { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); } /* last-known value in tables */

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.tbl th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.tbl th button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; } /* sortable header; set aria-sort on <th> */
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .r { text-align: right; }
.lnk { color: var(--ink); font-weight: 600; text-decoration: none; } .lnk:hover { color: var(--brand); text-decoration: underline; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.kpi .lab { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; font-weight: 500; }
.kpi .val { font-size: var(--fs-kpi); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 14px; font-weight: 500; color: var(--muted); }
.kpi .meta { font-size: 12px; color: var(--muted); }
.kpi.k-crit  { box-shadow: inset 0 3px 0 var(--crit); }  .kpi.k-crit .lab  { color: var(--crit); }
.kpi.k-off   { box-shadow: inset 0 3px 0 var(--off); }
.kpi.k-stale { box-shadow: inset 0 3px 0 var(--stale); } .kpi.k-stale .lab { color: var(--stale); }
.kpi.k-coll  { box-shadow: inset 0 3px 0 var(--coll); }  .kpi.k-coll .lab  { color: var(--coll); }

/* ---------- banners, dialogs, toasts, empty/loading ---------- */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 8px; border: 1px solid; font-size: 13px; }
.b-coll  { background: var(--coll-bg);  border-color: var(--coll); }
.b-stale { background: var(--stale-bg); border-color: var(--stale); }
.b-proto { border: 1px dashed var(--line-strong); background: var(--surface); color: var(--ink-2); } /* prototype / planned feature notice */
.overlay { position: fixed; inset: 0; background: rgba(5, 10, 12, .62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-dlg); padding: 18px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-overlay); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-overlay); font-size: 12.5px; }
.empty { padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sk { background: var(--sk); border-radius: 5px; } /* skeleton block */

/* ---------- charts ---------- */
.gap { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--stale); border-right: 1px dashed var(--stale); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--stale-bg) 6px 9px); } /* missing data — never interpolate */