/* ============================================================
   PERUN — skin "Nova" v7.0
   Moderný monitoring (Grafana 11 / Datadog / Vercel observability):
   hlboké tmavomodré pozadie s jemným svetelným gradientom, sklenené
   panely s hairline okrajom a vnútorným zvýraznením hrany, elektricky
   modrý → tyrkysový akcent, svietiace stavové indikátory, veľké
   tabulárne čísla v mono.

   Samostatný súbor — NEPOTREBUJE perun.css. Nahrádza ho celý.
   Pôvodný vzhľad "Warm Studio" v5 ostáva v perun.css (rollback):
     • /?skin=classic   (cookie, per prehliadač)
     • PERUN_UI_SKIN=classic v .env + systemctl restart perun-push.service
   ============================================================ */

/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; text-align: inherit; }
table { border-collapse: collapse; width: 100%; }
svg { display: block; }

/* ---------- 2. TOKENY ---------- */
:root {
  --font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* svetlá téma */
  color-scheme: light;
  --bg:            #eef1f6;
  --bg-glow-a:     rgba(59,130,246,.10);
  --bg-glow-b:     rgba(34,211,238,.08);
  --bg-elevated:   #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f7f9fc;
  --bg-input:      #f1f4f9;
  --bg-hover:      #e9edf4;
  --border:        #dfe4ec;
  --border-strong: #c7cfdb;
  --border-hi:     rgba(255,255,255,.9);
  --text:          #0f172a;
  --text-dim:      #9aa4b4;
  --text-muted:    #5b6678;

  --accent:        #2563eb;
  --accent-2:      #0891b2;
  --accent-hover:  #1d4ed8;
  --accent-soft:   rgba(37,99,235,.10);
  --accent-glow:   0 0 0 3px rgba(37,99,235,.18);
  --accent-grad:   linear-gradient(135deg, #2563eb 0%, #0891b2 100%);

  --ok:            #15803d;
  --ok-soft:       rgba(22,163,74,.12);
  --warn:          #b45309;
  --warn-soft:     rgba(217,119,6,.13);
  --crit:          #dc2626;
  --crit-soft:     rgba(220,38,38,.10);
  --unkn:          #7c3aed;
  --unkn-soft:     rgba(124,58,237,.10);
  --gpu:           #0e7490;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
  --shadow-pop:  0 24px 64px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.10);

  /* sidebar je tmavý v oboch témach */
  --sidebar-bg:          #0b0f17;
  --sidebar-hover:       rgba(255,255,255,.05);
  --sidebar-active:      rgba(59,130,246,.14);
  --sidebar-text:        #8b96a8;
  --sidebar-text-hover:  #e2e8f0;
  --sidebar-text-active: #ffffff;
  --sidebar-border:      rgba(255,255,255,.07);
  --sidebar-accent:      #60a5fa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:            #0a0d14;
    --bg-glow-a:     rgba(59,130,246,.14);
    --bg-glow-b:     rgba(34,211,238,.08);
    --bg-elevated:   #111623;
    --bg-card:       rgba(255,255,255,.028);
    --bg-card-hover: rgba(255,255,255,.045);
    --bg-input:      rgba(255,255,255,.04);
    --bg-hover:      rgba(255,255,255,.06);
    --border:        rgba(255,255,255,.075);
    --border-strong: rgba(255,255,255,.14);
    --border-hi:     rgba(255,255,255,.05);
    --text:          #e6eaf2;
    --text-dim:      #5a6579;
    --text-muted:    #8691a5;

    --accent:        #3b82f6;
    --accent-2:      #22d3ee;
    --accent-hover:  #60a5fa;
    --accent-soft:   rgba(59,130,246,.16);
    --accent-glow:   0 0 0 3px rgba(59,130,246,.28);
    --accent-grad:   linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);

    --ok:            #22c55e;
    --ok-soft:       rgba(34,197,94,.14);
    --warn:          #f59e0b;
    --warn-soft:     rgba(245,158,11,.14);
    --crit:          #f43f5e;
    --crit-soft:     rgba(244,63,94,.14);
    --unkn:          #a78bfa;
    --unkn-soft:     rgba(167,139,250,.14);
    --gpu:           #22d3ee;

    --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25);
    --shadow-pop:  0 32px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0a0d14;
  --bg-glow-a:     rgba(59,130,246,.14);
  --bg-glow-b:     rgba(34,211,238,.08);
  --bg-elevated:   #111623;
  --bg-card:       rgba(255,255,255,.028);
  --bg-card-hover: rgba(255,255,255,.045);
  --bg-input:      rgba(255,255,255,.04);
  --bg-hover:      rgba(255,255,255,.06);
  --border:        rgba(255,255,255,.075);
  --border-strong: rgba(255,255,255,.14);
  --border-hi:     rgba(255,255,255,.05);
  --text:          #e6eaf2;
  --text-dim:      #5a6579;
  --text-muted:    #8691a5;

  --accent:        #3b82f6;
  --accent-2:      #22d3ee;
  --accent-hover:  #60a5fa;
  --accent-soft:   rgba(59,130,246,.16);
  --accent-glow:   0 0 0 3px rgba(59,130,246,.28);
  --accent-grad:   linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);

  --ok:            #22c55e;
  --ok-soft:       rgba(34,197,94,.14);
  --warn:          #f59e0b;
  --warn-soft:     rgba(245,158,11,.14);
  --crit:          #f43f5e;
  --crit-soft:     rgba(244,63,94,.14);
  --unkn:          #a78bfa;
  --unkn-soft:     rgba(167,139,250,.14);
  --gpu:           #22d3ee;

  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25);
  --shadow-pop:  0 32px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);
}

/* ---------- 3. BASE ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font: 13.5px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); }
input, textarea { caret-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.hidden { display: none !important; }
.tnum, table, .tl-val, .sl-stat-value, .stat-value, .stat-period-value, .sl-usage-pct,
.sl-usage-detail, .host-count, .mttr-val, .sla-pct, .week-cnt, .node-cell, .heat-count,
.live-clock, .td-time { font-variant-numeric: tabular-nums; }

/* ---------- 4. LAYOUT ---------- */
.app {
  display: grid;
  grid-template-columns: 236px 1fr;
  grid-template-rows: 1fr;
  height: 100vh;
}
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column;
  padding: 14px 12px 12px;
  overflow-y: auto;
  color-scheme: dark;
}
.main {
  display: grid; grid-template-rows: auto 1fr;
  min-width: 0; overflow: hidden;
  background:
    radial-gradient(900px 420px at 18% -8%, var(--bg-glow-a), transparent 60%),
    radial-gradient(700px 360px at 92% 0%, var(--bg-glow-b), transparent 60%),
    var(--bg);
}
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px; height: 58px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.content { padding: 20px 22px 44px; overflow-y: auto; min-width: 0; }
.page { display: none; }
.page.active { display: block; animation: pageIn .22s cubic-bezier(.2,.7,.2,1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- 5. BRAND / TOPBAR ---------- */
.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 6px 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--sidebar-border);
}
.brand-logo { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(59,130,246,.25); }
.brand-text { font-weight: 700; font-size: 14.5px; letter-spacing: .04em; color: var(--sidebar-text-active); }
.brand-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sidebar-text); margin-top: 1px; }

.topbar-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.topbar-title h1, #page-title { font-size: 16px; font-weight: 600; letter-spacing: -.012em; margin: 0; color: var(--text); white-space: nowrap; }
.topbar-subtitle {
  font-size: 12px; color: var(--text-muted); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36ch;
}
@media (max-width: 1500px) { .topbar-subtitle { display: none; } }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-grad); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* živé metriky v topbare */
.topbar-live {
  display: flex; align-items: stretch; gap: 4px; flex-shrink: 0; white-space: nowrap;
  padding: 4px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border);
}
.topbar-live .tl-item {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: 2px 10px; border-radius: 7px; line-height: 1.15;
}
.topbar-live .tl-label { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.topbar-live .tl-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); }
.topbar-live .tl-val.tl-ok   { color: var(--ok); }
.topbar-live .tl-val.tl-warn { color: var(--warn); }
.topbar-live .tl-val.tl-crit { color: var(--crit); }
.topbar-live .tl-trend { font-size: 10px; margin-left: 3px; }
.topbar-live .tl-trend.up { color: var(--warn); }
.topbar-live .tl-trend.down { color: var(--ok); }
.topbar-live .tl-updated {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
  display: flex; align-items: center; padding: 0 10px 0 12px; border-left: 1px solid var(--border);
}
@media (max-width: 1280px) { .topbar-live { display: none; } }

/* ---------- 6. NAV ---------- */
.nav { display: flex; flex-direction: column; }
.nav-section {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sidebar-text); padding: 16px 10px 6px; margin: 0; opacity: .75;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  cursor: pointer; user-select: none;
}
.nav-section:hover { opacity: 1; }
.nav-section:first-child { padding-top: 4px; }
.nav-section-arrow { flex-shrink: 0; width: 11px; height: 11px; transition: transform .18s ease; }
.nav-section.collapsed .nav-section-arrow { transform: rotate(-90deg); }
.nav-item.nav-collapsed-hidden { display: none !important; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 12px; margin: 1px 0;
  border-radius: 8px; position: relative;
  color: var(--sidebar-text); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.nav-item.active {
  background: linear-gradient(90deg, var(--sidebar-active), transparent 85%);
  color: var(--sidebar-text-active); font-weight: 600;
}
.nav-item.active svg { color: var(--sidebar-accent); opacity: 1; }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px;
  background: var(--accent-grad); box-shadow: 0 0 10px var(--sidebar-accent);
}
.nav-badge {
  margin-left: auto; background: var(--crit); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1;
  padding: 3px 6px; border-radius: 999px; flex-shrink: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--crit) 50%, transparent);
}
.nav-pulse { width: 7px; height: 7px; box-shadow: 0 0 8px currentColor; }

/* ---------- 7. SEARCH ---------- */
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 9px; padding: 0 12px; height: 36px;
  flex: 0 1 360px; position: relative;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: var(--accent-glow); background: var(--bg-elevated); }
.search-box svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.search-box input { background: transparent; border: none; outline: none; color: var(--text); font-size: 13px; width: 100%; padding: 0; }
.search-box input::placeholder { color: var(--text-muted); }

#global-search-results {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 320px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  max-height: 400px; overflow-y: auto; z-index: 500; padding: 6px;
}
#global-search-results.open { display: block; }
#global-search-results .gsr-group-label { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); padding: 8px 10px 4px; }
#global-search-results .gsr-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text); }
#global-search-results .gsr-item:hover { background: var(--bg-hover); }
#global-search-results .gsr-empty { padding: 12px 8px; font-size: 12px; color: var(--text-muted); }

/* ---------- 8. TLAČIDLÁ ---------- */
.btn-ghost, .sl-btn, .sl-back, .fbtn, #mob-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 8px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 8px;
  width: 34px; height: 34px; padding: 7px; transition: background .15s, color .15s, border-color .15s;
}
.btn-ghost:hover, .icon-btn:hover, .sl-btn:hover, .sl-back:hover, .fbtn:hover, #mob-nav-toggle:hover {
  background: var(--bg-hover); color: var(--text); border-color: var(--border-strong);
}
.icon-btn-danger:hover { color: var(--crit); border-color: var(--crit); }
.sl-btn-sm { padding: 4px 9px; font-size: 11.5px; }
.sl-back { margin-bottom: 14px; }
.topbar-actions .btn-ghost { height: 34px; padding: 0 10px; }

.btn-primary, .login-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent-grad); color: #fff; border: none;
  border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: filter .15s, box-shadow .15s, transform .1s;
}
.btn-primary:hover, .login-submit:hover { filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn-primary:active, .login-submit:active { transform: translateY(1px); }
.btn-primary:disabled, .login-submit:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--crit-soft); color: var(--crit); border: 1px solid color-mix(in srgb, var(--crit) 40%, transparent);
  border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; transition: background .15s, color .15s;
}
.btn-danger:hover { background: var(--crit); color: #fff; }

.fbtn.active, .fbtn[data-active="true"] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.period-toggle {
  display: inline-flex; gap: 2px; flex-wrap: wrap; align-items: center;
  background: var(--bg-input); border: 1px solid var(--border); padding: 3px; border-radius: 9px;
}
.period-btn-sm {
  padding: 5px 12px; border-radius: 6px; border: none; line-height: 1.4;
  background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 500; font-family: inherit;
  transition: background .15s, color .15s, box-shadow .15s; cursor: pointer;
}
.period-btn-sm:hover { color: var(--text); border-color: transparent; }
.period-btn-sm.active { background: var(--bg-elevated); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 0 0 1px var(--border); border-color: transparent; }
.alerts-limit-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch-track { width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; }
.switch-track::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .18s cubic-bezier(.2,.7,.2,1); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input { display: none; }

/* ---------- 9. PANELY ---------- */
.sl-card, .card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin: 0 0 16px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.card-header-row, .sl-card-header, .card-header {
  padding: 13px 18px 11px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card-title, .sl-card-header-title {
  font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.card-title svg { color: var(--accent); flex-shrink: 0; width: 15px; height: 15px; }
svg:not([width]):not([height]) { width: 16px; height: 16px; }
.nav-item svg, .sl-badge svg, .btn-primary svg, .btn-danger svg, .sl-btn svg { width: 14px; height: 14px; }
.sl-card-body, .card-body { padding: 14px 18px 18px; }
.sl-card-over { box-shadow: var(--shadow-card), inset 3px 0 0 var(--crit); }
.sl-card-warn { box-shadow: var(--shadow-card), inset 3px 0 0 var(--warn); }

.sl-page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sl-page-title { display: none; } /* názov stránky nesie topbar */
.sl-page-sub { font-size: 12.5px; color: var(--text-muted); max-width: 90ch; }
.sl-header-right { display: flex; align-items: center; gap: 8px; }

.insights-section-heading { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.insights-section-heading:first-of-type { margin-top: 0; }
.insights-section-heading .ish-title { font-size: 14px; font-weight: 600; }
.insights-section-heading .ish-sub { font-size: 12px; color: var(--text-muted); }

.grid-2, .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 1100px) { .three-col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2,1fr) !important; } .grid-2, .two-col, .three-col { grid-template-columns: 1fr; } }

/* prehľadové dlaždice v jednom paneli: oddelené čiarou, nie vnorené karty */
#overview-kpi-grid { gap: 0 !important; }
#overview-kpi-grid .stat { background: transparent; border: none; border-radius: 0; box-shadow: none !important; padding: 14px 18px 16px; }
#overview-kpi-grid .stat + .stat { border-left: 1px solid var(--border); }
#overview-kpi-grid .stat:hover { background: var(--bg-card-hover); transform: none; }
#overview-kpi-grid .stat-value { font-family: var(--font-ui) !important; font-size: 19px !important; font-weight: 600; letter-spacing: -.015em; }

/* ---------- 10. TABUĽKY ---------- */
.sl-tbl-wrap { overflow-x: auto; }
.scroll-x { overflow-x: auto; max-width: 100%; }
.scroll-x table { min-width: max-content; }
.sl-scrollable { max-height: 360px; overflow-y: auto; }
.sl-scrollable-lg { max-height: 600px; overflow-y: auto; }

.sl-table, .alerts-table { width: 100%; font-size: 13px; }
.sl-table th, .alerts-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
  padding: 9px 14px; border-bottom: 1px solid var(--border-strong);
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--bg-elevated) 85%, transparent); backdrop-filter: blur(8px);
}
.sl-table td, .alerts-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.sl-table tbody tr, .alerts-table tbody tr { transition: background .1s; }
.sl-table tbody tr:hover, .alerts-table tbody tr:hover { background: var(--bg-hover); }
.sl-table tbody tr:last-child td, .alerts-table tbody tr:last-child td { border-bottom: none; }
.sl-sortable-head th[data-sort], th.sortable { cursor: pointer; user-select: none; }
.sl-sortable-head th[data-sort]:hover, th.sortable:hover { color: var(--text); }
th.sortable.sort-active { color: var(--accent); }
.sl-sort-arrow { display: inline-block; margin-left: 4px; opacity: .6; font-size: .9em; }
.sl-log-error { color: var(--crit); font-weight: 600; }
.sl-log-warn { color: var(--warn); }

.td-clickable { cursor: pointer; color: var(--accent); font-weight: 500; }
.td-clickable:hover { text-decoration: underline; text-underline-offset: 3px; }
.td-host, .td-svc { font-weight: 500; }
.td-host-row { display: flex; align-items: center; min-width: 0; }
.td-host-row .text-preview-btn { width: auto; }
.td-host-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.cat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: middle; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.cat-dot-monitoring { background: var(--accent); color: var(--accent); }
.cat-dot-disk       { background: var(--gpu); color: var(--gpu); }
.cat-dot-qos        { background: var(--unkn); color: var(--unkn); }
.cat-dot-temp       { background: var(--crit); color: var(--crit); }
.td-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.td-out, .td-message { color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-preview-btn { display: block; width: 100%; max-width: 100%; text-align: left; color: inherit; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-preview-btn:hover { color: var(--accent); }
.td-svc .text-preview-btn { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; overflow-wrap: anywhere; word-break: break-word; }
.td-svc { max-width: 100%; }
.td-check { width: 28px; text-align: center; }
table:has(#alerts-page-body) th:first-child { width: 11% !important; min-width: 150px !important; }

.sl-loading, .text-empty, .empty { text-align: center; padding: 34px 10px; color: var(--text-muted); font-size: 13px; }
.empty svg { margin: 0 auto 8px; opacity: .5; }
.error { color: var(--crit); }

/* ---------- 11. STAT DLAŽDICE ---------- */
.sl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 18px; }
.sl-stat, .stat, .stat-period-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px 16px; box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
.sl-stat-label, .stat-label, .stat-period-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.sl-stat-value, .stat-value, .stat-period-value {
  font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--text);
  letter-spacing: -.03em; line-height: 1.05;
}
.tc-accent, .sl-stat-accent .sl-stat-value { color: var(--accent) !important; }
.tc-crit, .sl-stat-crit .sl-stat-value, .stat-crit .stat-value { color: var(--crit) !important; }
.tc-warn, .sl-stat-warn .sl-stat-value, .stat-warn .stat-value { color: var(--warn) !important; }
.tc-ok, .sl-stat-ok .sl-stat-value, .stat-ok .stat-value { color: var(--ok) !important; }
.tc-gpu, .sl-stat-gpu .sl-stat-value { color: var(--gpu) !important; }
.tc-purple, .sl-stat-purple .sl-stat-value { color: var(--unkn) !important; }
.tc-dim { color: var(--text-muted) !important; }
/* stavové dlaždice: farebný nádych zhora + svietiaca linka */
.sl-stat-crit, .stat-crit { --tone: var(--crit); }
.sl-stat-warn, .stat-warn { --tone: var(--warn); }
.sl-stat-ok, .stat-ok { --tone: var(--ok); }
.sl-stat-gpu { --tone: var(--gpu); }
.sl-stat-purple { --tone: var(--unkn); }
.sl-stat-accent { --tone: var(--accent); }
.sl-stat[class*="sl-stat-"], .stat-crit, .stat-warn, .stat-ok {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 9%, transparent), transparent 55%), var(--bg-card);
  box-shadow: var(--shadow-card), inset 0 2px 0 var(--tone);
}
.sl-sync { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.stat-trend { font-size: 11px; color: var(--text-muted); }
.stat-spark { width: 60px; height: 20px; }
.stat-clickable { cursor: pointer; transition: transform .15s cubic-bezier(.2,.7,.2,1), border-color .15s, background .15s; }
.stat-clickable:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.stat-period-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 10px; margin-bottom: 18px; }
.stat-period-value { font-size: 22px; }

/* ---------- 12. ODZNAKY ---------- */
.sl-badge, .badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em;
  background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border);
}
.sl-badge-over, .sl-badge-failed { background: var(--crit-soft); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
.sl-badge-warn-lim, .sl-badge-over.sl-badge-warn-lim { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.s-ok, .s-warning, .s-critical, .s-unknown { border-color: color-mix(in srgb, currentColor 30%, transparent); }
.s-ok, .s-warning, .s-critical, .s-unknown { position: relative; padding-left: 16px; }
.s-ok::before, .s-warning::before, .s-critical::before, .s-unknown::before {
  content: ''; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor;
}
.s-ok       { background: var(--ok-soft);   color: var(--ok); }
.s-warning  { background: var(--warn-soft); color: var(--warn); }
.s-critical { background: var(--crit-soft); color: var(--crit); font-weight: 600; }
/* bliká len čerstvý CRIT (< 10 min) — trieda .nv-fresh z perun-nova.js */
.nv-fresh .s-critical::before { animation: blink 1.6s ease-in-out infinite; }
.nv-fresh > td:first-child { color: var(--text); }
.s-unknown  { background: var(--unkn-soft); color: var(--unkn); }
.s-default  { background: var(--bg-input); color: var(--text-muted); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- 13. PROGRESS / BARY ---------- */
.sl-progress { background: var(--bg-input); border-radius: 999px; overflow: hidden; height: 6px; position: relative; }
.sl-progress-bar { height: 100%; border-radius: 999px; background: var(--accent-grad); transition: width .4s cubic-bezier(.2,.7,.2,1); }
.sl-usage { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.sl-usage-bar { height: 6px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.sl-usage-bar > div { height: 100%; border-radius: 999px; }
.sl-usage-detail { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); }
.sl-usage-pct { font-size: 11.5px; font-weight: 600; font-family: var(--font-mono); }
.ust-bar-cell { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.ust-minibar { width: 50px; flex-shrink: 0; }
.ust-zero { color: var(--text-muted); }
.host-bar-wrap, .host-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.host-bar { flex: 1; height: 10px; background: var(--bg-input); border-radius: 999px; overflow: hidden; }
.host-bar-fill { height: 100%; background: var(--accent-grad); border-radius: 999px; }
.host-name { font-size: 12.5px; font-weight: 500; min-width: 100px; }
.host-count { font-size: 11.5px; color: var(--text-muted); min-width: 44px; text-align: right; font-family: var(--font-mono); }
.mttr-row, .sla-row, .week-row, .svc-trend-row, .prob-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.mttr-bar, .sla-bar-wrap, .week-bar-wrap { flex: 1; height: 10px; background: var(--bg-input); border-radius: 999px; overflow: hidden; }
.mttr-fill, .sla-bar-fill, .week-bar-fill { height: 100%; background: var(--accent-grad); border-radius: 999px; }
.mttr-svc, .sla-host, .week-label, .prob-svc, .prob-host { font-size: 12.5px; min-width: 90px; }
.mttr-val, .sla-pct, .week-cnt { font-size: 11.5px; color: var(--text-muted); min-width: 40px; text-align: right; font-family: var(--font-mono); }
.prob-dur { font-size: 11.5px; color: var(--warn); margin-left: auto; }
.svc-name, .svc-count { font-size: 12.5px; }
.state-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.state-label { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; min-width: 90px; text-align: center; white-space: nowrap; }
.state-count { font-size: 11px; min-width: 90px; text-align: right; font-weight: 600; font-family: var(--font-mono); }

/* ---------- 14. FORMULÁRE / FILTRE ---------- */
.sl-search, input.sl-search, .sl-select, .filter-input {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.sl-search:focus, input.sl-search:focus, .sl-select:focus, .filter-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }
.filter-bar, .filters, .alerts-filter-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); gap: 14px; }
.setting-row:last-child { border-bottom: none; }
.setting-label { font-weight: 600; font-size: 13.5px; }
.setting-desc, .setting-info { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.setting-control { flex-shrink: 0; }
.show-pw { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); background: none; border: none; padding: 4px; }
.show-pw:hover { color: var(--accent); }
.cb-wrap { display: inline-flex; align-items: center; gap: 6px; }
.checkmark { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--border-strong); }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 6px; border-radius: 5px; background: var(--bg-input); border: 1px solid var(--border-strong); border-bottom-width: 2px; font-family: var(--font-mono); font-size: 11px; }

/* ---------- 15. MODÁLY ---------- */
.sl-modal-overlay, #qos-modal-overlay, .text-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(5,8,14,.66);
  z-index: 9999; overflow-y: auto; padding: 32px 16px; backdrop-filter: blur(6px);
}
.sl-modal-overlay.active, .sl-modal-overlay.open, #qos-modal-overlay.active, .text-modal-overlay.open { display: block; }
#user-global-overlay { background: rgba(5,8,14,.66); backdrop-filter: blur(6px); }
.sl-modal, .text-modal {
  margin: 0 auto; background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); animation: modalIn .22s cubic-bezier(.2,.7,.2,1);
}
.sl-modal { max-width: 920px; }
.text-modal { max-width: 720px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.sl-modal-header, .text-modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.sl-modal-title { font-size: 16px; font-weight: 600; color: var(--text); }
.text-modal-title { font-weight: 600; font-size: 14px; }
.sl-modal-close, .text-modal-close {
  margin-left: auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--text-muted); cursor: pointer; background: var(--bg-input); border: none; font-size: 18px; line-height: 1;
}
.sl-modal-close:hover, .text-modal-close:hover { background: var(--bg-hover); color: var(--text); }
.sl-modal-body { padding: 22px; }
.text-modal-body { padding: 20px 22px; font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--text); margin: 0; font-family: var(--font-mono); }

/* ---------- 16. PRIHLÁSENIE ---------- */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(640px 420px at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(520px 360px at 85% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%),
    var(--bg);
}
.login-box {
  width: 100%; max-width: 380px; background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: 18px;
  box-shadow: var(--shadow-pop), 0 0 0 1px var(--border-hi) inset; padding: 38px 32px; text-align: center;
}
.login-logo { max-width: 200px; max-height: 60px; margin: 0 auto 18px; display: block; overflow: hidden; }
.login-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.login-subtitle { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 22px; }
.login-field-wrap { position: relative; margin-bottom: 12px; }
.login-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 42px 12px 14px; font-size: 14px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.login-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }
.login-submit { width: 100%; padding: 12px; font-size: 14px; margin-top: 4px; }
.login-error { color: var(--crit); font-size: 12.5px; margin-top: 12px; }
.login-footer { font-size: 11px; color: var(--text-muted); margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.login-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 17. GRAFY ---------- */
.chart-wrap { position: relative; width: 100%; height: 260px; }
.chart-box-lg { position: relative; height: 220px; }
.spark-wrapper { width: 70px; height: 22px; }
.donut-wrap { display: flex; justify-content: center; margin-bottom: 12px; height: 140px; }
.live-clock { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--accent-2); }

/* ---------- 18. WIDGETY ---------- */
.heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px,1fr)); gap: 5px; }
.heat-tile { border-radius: 8px; padding: 7px 5px; text-align: center; background: var(--bg-input); border: 1px solid var(--border); }
.heat-name { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-count { font-size: 12.5px; font-weight: 600; font-family: var(--font-mono); }
.heatmap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.heatmap-col { margin-bottom: 0 !important; min-width: 0; }
.heatmap-grid { display: grid; grid-template-columns: 26px repeat(24, minmax(12px, 1fr)); gap: 2px; font-size: 8px; }
.heatmap-grid > div { border-radius: 3px; }
@media (max-width: 1300px) { .heatmap-row { grid-template-columns: 1fr; } }
.freq-grid { display: flex; flex-direction: column; gap: 6px; }
.freq-cell, .freq-label { font-size: 11px; }
.freq-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); }
.qos-commercial-card { box-shadow: var(--shadow-card), inset 0 2px 0 var(--unkn); }
.qos-commercial-summary { display: flex; gap: 16px; flex-wrap: wrap; padding: 4px 0 8px; font-size: 12.5px; color: var(--text-muted); }
.qos-commercial-metric b { color: var(--text); }
.cluster-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 8px; }
.cluster-mini-cell { border-radius: 8px; padding: 6px; text-align: center; }
.cluster-mini-val { font-weight: 600; font-size: 13px; font-family: var(--font-mono); }
.cluster-mini-lbl { color: var(--text-muted); font-size: 10px; }
.user-detail-view { display: none; }
.user-detail-view.active { display: block; }
.overview-view.hidden { display: none; }

/* uzly — "rack" dlaždice so svetelnou hranou */
.node-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.node-cell {
  position: relative; width: 78px; height: 52px; border-radius: 9px; font-size: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-mono); font-weight: 500; color: var(--text-muted);
  border: 1px solid var(--border); background: var(--bg-input); cursor: default; overflow: hidden;
  --tone: transparent;
}
.node-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--tone); box-shadow: 0 0 10px var(--tone); }
.node-cell.busy-cpu  { --tone: var(--accent); }
.node-cell.busy-gpu  { --tone: var(--gpu); }
.node-cell.node-down { --tone: var(--crit); }
.node-cell.node-drain{ --tone: var(--warn); }
.node-cell.temp-ok   { --tone: var(--ok); }
.node-cell.temp-warn { --tone: var(--warn); }
.node-cell.temp-crit { --tone: var(--crit); }
.node-cell.busy-cpu, .node-cell.busy-gpu, .node-cell.temp-ok, .node-cell.temp-warn, .node-cell.temp-crit, .node-cell.node-down, .node-cell.node-drain {
  color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 18%, transparent), color-mix(in srgb, var(--tone) 6%, transparent)), var(--bg-card);
  border-color: color-mix(in srgb, var(--tone) 45%, var(--border));
}
.node-cell.node-down { color: var(--crit); font-weight: 600; }
.node-cell.node-down::before, .node-cell.node-drain::before { background: repeating-linear-gradient(45deg, var(--tone), var(--tone) 4px, transparent 4px, transparent 8px); box-shadow: none; }
.node-cell.node-drain { border-style: dashed; }
.node-cell.temp-crit { font-weight: 600; }
.node-cell.node-clickable { cursor: pointer; transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .15s; }
.node-cell.node-clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--tone) 60%, rgba(0,0,0,.4)); }
.node-cell-count { font-size: 10.5px; opacity: .8; }
.node-cell-temp-max { font-size: 14px; font-weight: 600; }
.node-cell-temp-sub { font-size: 9.5px; opacity: .7; }
.node-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 3px; vertical-align: middle; }
.node-dot-idle { background: var(--bg-input); border: 1px solid var(--border-strong); }
.node-dot-cpu  { background: var(--accent); }
.node-dot-gpu  { background: var(--gpu); }

/* Live Status */
.nav-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); color: var(--ok); margin-left: auto; flex-shrink: 0; animation: pulse-anim 2s infinite; }
.nav-pulse.degraded { background: var(--warn); color: var(--warn); }
.nav-pulse.outage { background: var(--crit); color: var(--crit); }
@keyframes pulse-anim { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.ls-header {
  --tone: var(--ok); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%), var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--border));
}
.ls-header.degraded { --tone: var(--warn); }
.ls-header.outage { --tone: var(--crit); }
.ls-header-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; background: var(--tone) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 22%, transparent), 0 0 18px var(--tone); }
.ls-header-title { font-size: 17px; font-weight: 600; }
.ls-header-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono); }
.ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap: 14px; }
.ls-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.ls-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ls-card-name { font-weight: 600; font-size: 14px; flex: 1; }
.ls-badge { padding: 2px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border: 1px solid transparent; }
.ls-badge.up { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.ls-badge.degraded { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.ls-badge.down { background: var(--crit-soft); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
.ls-badge.unknown { background: var(--bg-input); color: var(--text-muted); border-color: var(--border); }
.ls-meta { display: flex; gap: 16px; margin-bottom: 10px; font-size: 11.5px; color: var(--text-muted); }
.ls-meta span b { color: var(--text); font-weight: 600; font-family: var(--font-mono); }
.ls-uptime-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-bottom: 5px; margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; }
.ls-bars { display: grid; grid-template-columns: repeat(var(--ls-slots,288), minmax(0,1fr)); gap: 1px; height: 26px; align-items: stretch; overflow: hidden; border-radius: 5px; }
.ls-bar { min-width: 0; cursor: default; }
.ls-bar.up { background: color-mix(in srgb, var(--ok) 78%, var(--bg-card)); }
.ls-bar.down { background: var(--crit); box-shadow: 0 0 6px var(--crit); }
.ls-bar.degraded { background: var(--warn); }
.ls-bar.nodata { background: var(--border); }
.ls-refresh { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); text-align: right; margin-bottom: 12px; }

/* ---------- 19. UNREAD / TOASTY ---------- */
.unread-toggle { position: relative; }
.unread-count { position: absolute; top: -3px; right: -3px; background: var(--crit); color: #fff; font-size: 9px; font-weight: 700; border-radius: 999px; padding: 1px 5px; min-width: 15px; text-align: center; border: 2px solid var(--sidebar-bg); }
.unread-center {
  display: none; position: absolute; right: 20px; top: 62px; width: 360px; max-height: 440px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); z-index: 400;
}
.unread-center.open { display: block; }
.unread-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.unread-total { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.unread-list { padding: 6px; }
.unread-item { display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 8px; font-size: 12.5px; background: transparent; border: none; color: var(--text); }
.unread-item:hover { background: var(--bg-hover); }
.unread-empty { padding: 26px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast {
  --tone: var(--accent);
  background: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--border));
  border-radius: 12px; box-shadow: var(--shadow-pop); padding: 12px 16px; color: var(--text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 12%, transparent), transparent 60%), var(--bg-elevated);
  animation: toastIn .22s cubic-bezier(.2,.7,.2,1); position: relative;
}
.toast.crit { --tone: var(--crit); }
.toast.warn { --tone: var(--warn); }
.toast.ok   { --tone: var(--ok); }
.toast.leaving { animation: toastOut .25s ease-in forwards; }
.toast-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.toast-body { font-size: 12.5px; color: var(--text-muted); word-break: break-word; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* ---------- 20. WS STATUS / FOOTER ---------- */
.ws-status { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--sidebar-text); }
.ws-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sidebar-text); flex-shrink: 0; }
.ws-status.connected .ws-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.ws-status.connecting .ws-dot { background: var(--warn); animation: blink 1.2s infinite; }
.sidebar-footer { padding: 12px 8px 2px; border-top: 1px solid var(--sidebar-border); margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sidebar-footer .icon-btn { width: 28px; height: 28px; background: transparent; border-color: var(--sidebar-border); color: var(--sidebar-text); }
.sidebar-footer .icon-btn:hover { color: var(--sidebar-text-hover); background: var(--sidebar-hover); }

/* ---------- 21. MOBIL ---------- */
#mob-nav-toggle { display: none; width: 36px; height: 36px; padding: 0; }
#mob-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 199; }
#mob-overlay.open { display: block; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  #mob-nav-toggle { display: inline-flex; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 272px; z-index: 200; transform: translateX(-100%); transition: transform .22s cubic-bezier(.2,.7,.2,1); box-shadow: var(--shadow-pop); }
  .sidebar.mob-open { transform: translateX(0); }
  .topbar { gap: 8px; padding: 0 12px; height: 54px; }
  .topbar-subtitle { display: none; }
  #page-title { overflow: hidden; text-overflow: ellipsis; max-width: 36vw; font-size: 15px; }
  .search-box { flex: 1 1 0; min-width: 0; }
  .content { padding: 14px 12px 36px; }
  .three-col, .grid-2, .two-col { grid-template-columns: 1fr !important; }
  .sl-stats { grid-template-columns: repeat(2, 1fr); }
  #overview-kpi-grid .stat + .stat { border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 520px) {
  .content { padding: 12px 10px 32px; }
  .sl-stats, .stats { grid-template-columns: 1fr 1fr !important; }
  .sl-stat-value, .stat-value { font-size: 23px; }
  .brand-text { font-size: 14px; }
}

/* ---------- 22. POHYB / TLAČ ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .sidebar, .topbar, #mob-nav-toggle { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .main { background: #fff; }
  .page[data-page="insights"] > *:not(#insights-monthly-card) { display: none !important; }
  .insights-noprint { display: none !important; }
}

/* ---------- 23. INLINE FARBY Z JS (CPU/GPU štítky a boxy) ----------
   perun.js/dashboard.html generujú CPU (indigo) a GPU (oranžové cez --warn)
   štítky s inline štýlom. V Nova: CPU = akcent, GPU = --gpu (nie varovanie). */
:is([style*="rgba(99,102,241,.1)"], [data-nv-src*="rgba(99,102,241,.1)"]), :is([style*="rgba(99,102,241,.2)"], [data-nv-src*="rgba(99,102,241,.2)"]) {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
:is([style*="rgba(249,115,22,.1)"], [data-nv-src*="rgba(249,115,22,.1)"]), :is([style*="rgba(249,115,22,.2)"], [data-nv-src*="rgba(249,115,22,.2)"]) {
  background: color-mix(in srgb, var(--gpu) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--gpu) 35%, transparent) !important;
}
:is([style*="rgba(249,115,22,"], [data-nv-src*="rgba(249,115,22,"])[style*="color:var(--warn)"],
:is([style*="rgba(249,115,22,"], [data-nv-src*="rgba(249,115,22,"]) [style*="color:var(--warn)"] { color: var(--gpu) !important; }
:is([style*="rgba(99,102,241,"], [data-nv-src*="rgba(99,102,241,"])[style*="color:var(--accent-hover)"],
:is([style*="rgba(99,102,241,"], [data-nv-src*="rgba(99,102,241,"]) [style*="color:var(--accent-hover)"] { color: var(--accent) !important; }
[style*="background:var(--warn);color:#1a1a1a"] { color: #1a1206 !important; }
.live-clock { color: var(--accent-2) !important; }

/* ---------- 24. PÁS "ČO HORÍ TERAZ" (Dashboard) ---------- */
.nv-strip {
  display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(130px, 1fr));
  gap: 0; margin-bottom: 16px; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.nv-strip > button { --tone: var(--text-muted); text-align: left; padding: 12px 16px; min-width: 0; transition: background .15s; }
.nv-strip > button:hover { background: var(--bg-card-hover); }
.nv-strip > button + button { border-left: 1px solid var(--border); }
.nv-strip [data-tone="ok"]   { --tone: var(--ok); }
.nv-strip [data-tone="warn"] { --tone: var(--warn); }
.nv-strip [data-tone="crit"] { --tone: var(--crit); }
.nv-strip-overall { display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 13%, transparent), transparent 80%); }
.nv-strip-overall:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 18%, transparent), transparent 80%) !important; }
.nv-led { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--tone);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 20%, transparent), 0 0 16px var(--tone); }
.nv-strip-overall[data-tone="crit"] .nv-led { animation: blink 1.6s ease-in-out infinite; }
.nv-strip-ov-text { display: flex; flex-direction: column; min-width: 0; }
.nv-strip-ov-text b { font-size: 15px; font-weight: 600; color: var(--text); }
.nv-strip-ov-text small { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-strip-cell { display: flex; flex-direction: column; gap: 1px; }
.nv-strip-cell small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.nv-strip-cell b { font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--tone); line-height: 1.25; }
.nv-strip-cell[data-tone="ok"] b { color: var(--text); }
.nv-strip-detail { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1200px) {
  .nv-strip { grid-template-columns: repeat(4, 1fr); }
  .nv-strip-overall { grid-column: 1 / -1; border-bottom: 1px solid var(--border); }
  .nv-strip > .nv-strip-overall + button { border-left: none; }
}
@media (max-width: 640px) {
  .nv-strip { grid-template-columns: 1fr 1fr; }
  .nv-strip > button:nth-child(4) { border-left: none; }
  .nv-strip > button:nth-child(n+4) { border-top: 1px solid var(--border); }
}

/* ---------- 25. CTRL+K PALETA ---------- */
.nv-palette-btn { gap: 8px; }
.nv-palette-btn .kbd { font-size: 10px; padding: 1px 5px; border-bottom-width: 1px; color: var(--text-muted); }
@media (max-width: 900px) { .nv-palette-btn .kbd { display: none; } }
.nv-palette-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000; padding: 12vh 16px 16px;
  background: rgba(5,8,14,.55); backdrop-filter: blur(4px);
}
.nv-palette-overlay.open { display: block; }
.nv-palette {
  max-width: 560px; margin: 0 auto; background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); overflow: hidden; animation: modalIn .18s cubic-bezier(.2,.7,.2,1);
}
.nv-palette-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.nv-palette-search svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.nv-palette-search input { flex: 1; height: 50px; background: transparent; border: none; outline: none; font-size: 15px; color: var(--text); }
.nv-palette-search input::placeholder { color: var(--text-muted); }
.nv-palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.nv-palette-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 8px; color: var(--text); font-size: 13.5px;
}
.nv-palette-item svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.nv-palette-item.sel, .nv-palette-item:hover { background: var(--accent-soft); }
.nv-palette-item.sel svg { color: var(--accent); }
.nv-pi-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-pi-sec { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.nv-palette-empty { padding: 22px; text-align: center; color: var(--text-muted); font-size: 13px; }
.nv-palette-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }
.nv-palette-foot .kbd { font-size: 10px; margin-right: 3px; }

/* ---------- 26. OPRAVY PO KONTROLE STRÁNOK ---------- */
/* topbar: dlhý názov stránky nesmie zaliezť pod vyhľadávanie */
.topbar-title { flex-shrink: 0; }
.search-box { min-width: 160px; }
@media (max-width: 900px) { .topbar-title { flex-shrink: 1; } .search-box { min-width: 0; } }

/* polia bez vlastnej triedy (Nastavenia, modály, filtre) — nízka špecifickosť cez :where */
:where(.content, .sl-modal, .text-modal) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; color: var(--text); min-height: 32px;
  transition: border-color .15s, box-shadow .15s;
}
:where(.content, .sl-modal, .text-modal) :where(input, select, textarea):focus {
  outline: none; border-color: var(--accent); box-shadow: var(--accent-glow);
}
:where(.content, .sl-modal) :where(input, textarea)::placeholder { color: var(--text-muted); }
:where(.content, .sl-modal) input[type="checkbox"], :where(.content, .sl-modal) input[type="radio"] { accent-color: var(--accent); }
.search-box input { min-height: 0 !important; border: none !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; }

/* duplicitné nadpisy stránok s inline štýlom (Job Štatistiky, Kvóty) — nesie ich topbar */
.page [style="font-size:20px;font-weight:700;margin-bottom:4px"] { display: none; }

/* bočné farebné pruhy na štatistických kartách -> farbu nesie už štítok a hodnota */
.stat-period-card[style*="inset 3px 0 0"] { box-shadow: var(--shadow-card) !important; }

/* veľké čísla sa prispôsobia šírke dlaždice (napr. "1.17 / 0.87 / 0.78") */
.sl-stat, .stat { container-type: inline-size; }
.sl-stat .sl-stat-value, .stat .stat-value { font-size: clamp(17px, 12.5cqi, 28px); white-space: nowrap; }

/* Live Status hlavička: inline <style> v šablóne má .ls-header.degraded (vyššia špecificita) */
.ls-header.operational, .ls-header.degraded, .ls-header.outage {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%), var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--border));
}
.ls-badge.up, .ls-badge.degraded, .ls-badge.down, .ls-badge.unknown { font-weight: 600; }

/* ---------- 27. JEDNOTNÉ PÍSMO ----------
   Inline "font-family:monospace" (≈1300 buniek tabuliek) by padol na systémový
   DejaVu Mono — v Nova je jediné mono písmo JetBrains Mono. Hrúbky max 600. */
[style*="font-family:monospace"], [style*="font-family: monospace"], [style*="font-family:'JetBrains"],
code, pre, kbd, samp, .sl-log-warn, .sl-log-error { font-family: var(--font-mono) !important; }
code { font-size: .92em; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
b, strong, [style*="font-weight:700"], [style*="font-weight: 700"], [style*="font-weight:800"], [style*="font-weight:bold"] { font-weight: 600 !important; }
.content :where(h1, h2, h3, h4) { font-weight: 600; letter-spacing: -.01em; }