/* SENTRIX — komponentová vrstva.
   Vyžaduje sentrix-tokens.css. Žiadny build krok, čisté CSS. */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font-family: var(--sx-font);
  font-size: 13px;
  color: var(--sx-body);
  background: var(--sx-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sx-brand); text-decoration: none; }
a:hover { color: var(--sx-brand-dark); }

/* ─── Typografia ────────────────────────────────────────────── */
.sx-h1     { margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--sx-ink); }
.sx-h2     { margin:0; font-size:14.5px; font-weight:700; color:var(--sx-ink); }
.sx-lead   { margin:5px 0 0; font-size:13.5px; line-height:1.55; color:var(--sx-muted); max-width:70ch; }
.sx-help   { font-size:12.5px; color:var(--sx-muted-2); }
.sx-label  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--sx-label); }
.sx-num    { font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:var(--sx-ink); }
.sx-mono   { font-family:var(--sx-font-mono); font-size:11.5px; font-weight:500; color:var(--sx-muted); }

/* ─── Tlačidlá ──────────────────────────────────────────────── */
.sx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--sx-control-h); padding:0 16px; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--sx-radius);
  font-family:var(--sx-font); font-size:13px; font-weight:600;
  cursor:pointer; transition:background-color .12s, border-color .12s, color .12s;
}
.sx-btn:focus-visible { outline:none; box-shadow:0 0 0 2px var(--sx-card), 0 0 0 4px var(--sx-brand); }
.sx-btn:disabled { background:var(--sx-line); color:var(--sx-label); box-shadow:none; pointer-events:none; }

.sx-btn--primary   { background:var(--sx-brand); color:#fff; box-shadow:var(--sx-shadow-brand); }
.sx-btn--primary:hover { background:var(--sx-brand-dark); }
.sx-btn--secondary { background:var(--sx-card); color:var(--sx-ink); border-color:var(--sx-line); }
.sx-btn--secondary:hover { background:var(--sx-surface); border-color:var(--sx-line-strong); }
.sx-btn--quiet     { background:transparent; color:var(--sx-muted); }
.sx-btn--quiet:hover { background:var(--sx-line-soft); color:var(--sx-ink); }
.sx-btn--danger    { background:var(--sx-err); color:#fff; }
.sx-btn--danger:hover { filter:brightness(.94); }

.sx-btn--sm  { height:var(--sx-control-h-sm); padding:0 12px; font-size:12.5px; border-radius:var(--sx-radius); }
.sx-btn--xs  { height:28px; padding:0 10px; font-size:11.5px; border-radius:var(--sx-radius-sm); }
.sx-btn--icon{ width:var(--sx-control-h); padding:0; border-radius:var(--sx-radius-sm); }

/* ─── Badge / pill (vždy s bodkou, okrem čistých tagov) ─────── */
.sx-badge {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border-radius:999px; padding:3px 9px;
  font-size:11px; font-weight:700; line-height:1.3;
  background:var(--sx-line-soft); color:var(--sx-muted);
}
.sx-badge__dot { width:5px; height:5px; flex-shrink:0; border-radius:999px; background:currentColor; }
.sx-badge--ok   { background:var(--sx-ok-bg);   color:var(--sx-ok); }
.sx-badge--warn { background:var(--sx-warn-bg); color:var(--sx-warn); }
.sx-badge--err  { background:var(--sx-err-bg);  color:var(--sx-err); }
.sx-badge--acc  { background:var(--sx-tag);     color:var(--sx-brand); }
.sx-badge--mut  { background:var(--sx-line-soft); color:var(--sx-muted); }
.sx-badge--tag  { background:var(--sx-tag); color:var(--sx-brand); }        /* bez bodky */

/* ─── Karty ─────────────────────────────────────────────────── */
.sx-card {
  background:var(--sx-card); border:1px solid var(--sx-line);
  border-radius:var(--sx-radius-lg); box-shadow:var(--sx-shadow-card);
}
.sx-card__head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--sx-line-soft);
}
.sx-card__body { padding:16px 18px; }
.sx-card--ok   { border-color:var(--sx-ok); }
.sx-card--warn { border-color:var(--sx-warn); }
.sx-card--err  { border-color:var(--sx-err); }

.sx-stat { display:flex; flex-direction:column; gap:7px; padding:14px 16px; }
.sx-stat__label { font-size:11.5px; font-weight:600; color:var(--sx-muted-2); }
.sx-stat__value { font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:var(--sx-ink); }
.sx-stat__value--ok  { color:var(--sx-ok); }
.sx-stat__value--warn{ color:var(--sx-warn); }
.sx-stat__value--err { color:var(--sx-err); }
.sx-stat__meta { font-size:11.5px; color:var(--sx-muted-2); }
.sx-stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(196px,1fr)); gap:12px; }

/* ─── Tabuľky (kompaktný SOC režim) ─────────────────────────── */
.sx-table-wrap { overflow-x:auto; }              /* povinné — široké tabuľky sa inak orežú */
.sx-table { width:100%; min-width:700px; border-collapse:collapse; }
.sx-table th {
  text-align:left; padding:8px 12px;
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--sx-label); white-space:nowrap;
}
.sx-table td { padding:8px 12px; border-top:1px solid var(--sx-line-soft); font-size:12.5px; color:var(--sx-body); }
.sx-table th:first-child, .sx-table td:first-child { padding-left:16px; }
.sx-table th:last-child,  .sx-table td:last-child  { padding-right:16px; }
.sx-table--hover tbody tr:hover { background:var(--sx-row); cursor:pointer; }
.sx-table .sx-num-cell { text-align:right; font-variant-numeric:tabular-nums; }
.sx-table .sx-strong   { font-weight:700; color:var(--sx-ink); }
.sx-table .sx-sub      { font-family:var(--sx-font-mono); font-size:11px; font-weight:500; color:var(--sx-muted-2); }

.sx-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:11px 16px; border-bottom:1px solid var(--sx-line-soft); }
.sx-search {
  display:flex; align-items:center; gap:7px; flex:1; min-width:200px;
  height:var(--sx-control-h-sm); padding:0 10px;
  border:1px solid var(--sx-line); background:var(--sx-field); border-radius:var(--sx-radius);
}
.sx-search input { flex:1; min-width:0; border:0; background:transparent; outline:none; font-family:var(--sx-font); font-size:12.5px; color:var(--sx-ink); }
.sx-select {
  height:var(--sx-control-h-sm); padding:0 30px 0 12px; cursor:pointer;
  border:1px solid var(--sx-line); background:var(--sx-card); border-radius:var(--sx-radius);
  font-family:var(--sx-font); font-size:12.5px; font-weight:600; color:var(--sx-muted);
}
.sx-chip {
  display:inline-flex; align-items:center; gap:7px; height:var(--sx-control-h-sm); padding:0 12px;
  border:1px solid var(--sx-line); background:var(--sx-card); border-radius:var(--sx-radius);
  font-size:12.5px; font-weight:600; color:var(--sx-muted); cursor:pointer;
}
.sx-chip--active { border-color:var(--sx-brand); background:var(--sx-tag); color:var(--sx-brand); font-weight:700; }

/* ─── Formuláre ─────────────────────────────────────────────── */
.sx-field { display:flex; flex-direction:column; gap:5px; }
.sx-field > label { font-size:11.5px; font-weight:700; color:var(--sx-ink); }
.sx-input, .sx-textarea {
  height:var(--sx-control-h); padding:0 12px;
  border:1px solid var(--sx-line); background:var(--sx-field); border-radius:var(--sx-radius);
  font-family:var(--sx-font); font-size:13px; color:var(--sx-ink); outline:none;
}
.sx-textarea { height:auto; padding:10px 12px; line-height:1.6; }
.sx-input:focus, .sx-textarea:focus { border-color:var(--sx-brand); box-shadow:0 0 0 3px var(--sx-tag); }
.sx-hint { font-size:11.5px; color:var(--sx-muted-2); }

/* ─── Meter / progress ──────────────────────────────────────── */
.sx-meter { height:5px; border-radius:999px; background:var(--sx-line-soft); overflow:hidden; }
.sx-meter__fill { height:100%; border-radius:999px; background:var(--sx-brand); }
.sx-meter__fill--warn { background:var(--sx-warn); }
.sx-meter__fill--err  { background:var(--sx-err); }

/* ─── Záložky ───────────────────────────────────────────────── */
.sx-tabs { display:flex; gap:2px; border-bottom:1px solid var(--sx-line); flex-wrap:wrap; }
.sx-tab {
  padding:8px 14px; margin-bottom:-1px; cursor:pointer;
  border:0; background:transparent; border-bottom:2px solid transparent;
  font-family:var(--sx-font); font-size:12.5px; font-weight:600; color:var(--sx-muted-2);
}
.sx-tab--active { color:var(--sx-brand); font-weight:700; border-bottom-color:var(--sx-brand); }

/* ─── Upozornenia ───────────────────────────────────────────── */
.sx-note { display:flex; gap:11px; padding:13px 16px; border-radius:var(--sx-radius-lg); border:1px solid var(--sx-line); background:var(--sx-surface); }
.sx-note--ok   { border-color:var(--sx-ok);   background:var(--sx-ok-bg); }
.sx-note--warn { border-color:var(--sx-warn); background:var(--sx-warn-bg); }
.sx-note--err  { border-color:var(--sx-err);  background:var(--sx-err-bg); }
.sx-note__title { font-size:12.5px; font-weight:700; }
.sx-note__text  { font-size:12px; color:var(--sx-body); line-height:1.55; margin-top:2px; }

/* ─── Prázdny stav ──────────────────────────────────────────── */
.sx-empty { max-width:520px; margin:8vh auto 0; text-align:center; }
.sx-empty__icon { width:46px; height:46px; margin:0 auto 16px; border-radius:var(--sx-radius-lg); background:var(--sx-tag); color:var(--sx-brand); display:flex; align-items:center; justify-content:center; }

/* ─── Shell ─────────────────────────────────────────────────── */
.sx-shell { display:flex; height:100vh; overflow:hidden; background:var(--sx-bg); }

.sx-sidebar { width:var(--sx-sidebar-w); flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; background:var(--sx-card); border-right:1px solid var(--sx-line); }
.sx-sidebar__brand { display:flex; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid var(--sx-line-soft); }
.sx-sidebar__logo { width:30px; height:30px; flex-shrink:0; border-radius:var(--sx-radius); background:linear-gradient(140deg,#6D63F0,#4338CA); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.sx-sidebar__nav { flex:1; overflow-y:auto; padding:8px 8px 14px; }
.sx-sidebar__user { display:flex; align-items:center; gap:9px; padding:10px 12px; border-top:1px solid var(--sx-line-soft); }

.sx-navgroup { margin-bottom:3px; }
.sx-navgroup__head {
  display:flex; align-items:center; gap:9px; width:100%; height:32px; padding:0 9px;
  border:0; background:transparent; border-radius:var(--sx-radius-sm); cursor:pointer;
  font-family:var(--sx-font); font-size:12.5px; font-weight:700; color:var(--sx-muted-2);
}
.sx-navgroup__head--current { color:var(--sx-ink); }
.sx-navgroup__label { padding:9px 10px 3px 32px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--sx-label); }

.sx-navitem {
  display:flex; align-items:center; gap:8px; width:100%; height:30px; padding:0 8px 0 12px;
  border:0; background:transparent; border-radius:var(--sx-radius-sm); cursor:pointer;
  font-family:var(--sx-font); font-size:12.5px; font-weight:500; color:var(--sx-muted);
}
.sx-navitem:hover { background:var(--sx-line-soft); color:var(--sx-ink); }
.sx-navitem--active { background:var(--sx-tag); color:var(--sx-brand); font-weight:700; }
.sx-navitem__mark { width:5px; height:5px; flex-shrink:0; margin-right:3px; border-radius:999px; background:var(--sx-line-strong); border:1px solid transparent; }
.sx-navitem--active .sx-navitem__mark { background:var(--sx-brand); }
.sx-navitem--advanced .sx-navitem__mark { background:transparent; border-color:var(--sx-line-strong); }
/* Položka na úrovni hlavičiek skupín: rovnaká výška, odsadenie a medzera, aby ikona sedela v stĺpci s ikonami skupín. */
.sx-navitem--top { height:32px; padding:0 9px; gap:9px; margin-bottom:3px; font-weight:700; color:var(--sx-muted-2); }
.sx-navitem__tag { display:inline-flex; align-items:center; height:17px; padding:0 6px; border-radius:999px; font-size:10px; font-weight:700; background:var(--sx-line-soft); color:var(--sx-muted-2); }
.sx-navitem--active .sx-navitem__tag { background:var(--sx-brand); color:#fff; }

.sx-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.sx-topbar { height:var(--sx-topbar-h); flex-shrink:0; display:flex; align-items:center; gap:12px; padding:0 20px; background:var(--sx-card); border-bottom:1px solid var(--sx-line); }
.sx-content { flex:1; overflow-y:auto; padding:22px 24px 40px; }

.sx-page-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 24px; margin-bottom:16px; }
.sx-page-head__actions { display:flex; gap:8px; flex-shrink:0; }

/* Sprievodca (/sprievodca): čiara krokov, formulár vľavo, vysvetlivky vpravo. */
.sx-wizard-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.sx-wizard-step { display:flex; align-items:center; gap:10px; min-width:0; color:var(--sx-muted); }
.sx-wizard-step__dot { width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--sx-line); background:var(--sx-card); color:var(--sx-muted); }
.sx-wizard-step__label { display:block; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-wizard-step__hint { display:block; font-size:11px; color:var(--sx-muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-wizard-step--current { color:var(--sx-ink); }
.sx-wizard-step--current .sx-wizard-step__dot { border-color:var(--sx-brand); background:var(--sx-tag); color:var(--sx-brand); }
.sx-wizard-step--done { color:var(--sx-ok); }
.sx-wizard-step--done .sx-wizard-step__dot { border-color:var(--sx-ok); background:var(--sx-ok-bg); color:var(--sx-ok); }
.sx-wizard-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
.sx-wizard-aside { padding:16px 18px; }
.sx-wizard-aside__title { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; font-weight:700; color:var(--sx-ink); }
.sx-wizard-aside__title svg { color:var(--sx-brand); }
.sx-wizard-aside__sub { margin:14px 0 6px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--sx-label); }
@media (max-width:1100px) {
  .sx-wizard-grid { grid-template-columns:minmax(0,1fr); }
  .sx-wizard-steps { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
}

/* ─── Rozloženia obsahu ─────────────────────────────────────── */
.sx-split      { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:12px; align-items:start; }
.sx-split--wide{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; align-items:start; }
.sx-stack      { display:flex; flex-direction:column; gap:12px; }
.sx-grid-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }

@media (max-width: 1180px) {
  .sx-split, .sx-split--wide { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 900px) {
  .sx-sidebar { position:fixed; inset:0 auto 0 0; z-index:40; transform:translateX(-100%); transition:transform .18s; box-shadow:var(--sx-shadow-pop); }
  .sx-sidebar--open { transform:none; }
}