/* Jógarázs — megosztott dizájn-réteg (önhostolt, CSP 'self').
   Bootstrap 5 fölé épül; tokenek + komponensek: page-head, stat-csempék,
   súlyossági csíkok, kártyák, táblák, üres-állapotok, sparkline. */

:root {
  --gz-brand: #1e4fe0;
  --gz-brand-2: #123bb8;
  --gz-brand-3: #0e2f93;
  --gz-brand-ink: #1a40b4;
  --gz-brand-soft: #e4eafd;

  --gz-ok: #1c9c57;   --gz-ok-soft: #dcf3e6;
  --gz-warn: #c77e00; --gz-warn-soft: #fbedd1;
  --gz-crit: #d23434; --gz-crit-soft: #fbe0e0;
  --gz-info: #1e4fe0; --gz-info-soft: #e4eafd;

  --gz-ink: #16202e;
  --gz-muted: #5b6675;
  --gz-line: #e2e7f0;

  --gz-radius: 16px;
  --gz-radius-sm: 11px;
  --gz-shadow: 0 1px 2px rgba(16,21,28,.05), 0 12px 28px -18px rgba(16,21,28,.22);
  --gz-shadow-lg: 0 2px 8px rgba(16,21,28,.07), 0 34px 60px -32px rgba(16,21,28,.4);

  --bs-primary: #1e4fe0;
  --bs-primary-rgb: 30,79,224;
  --bs-link-color: var(--gz-brand-ink);
  --bs-link-hover-color: var(--gz-brand-3);
  --bs-border-radius: 12px;
}

body.bg-body-tertiary {
  background:
    radial-gradient(1200px 480px at 100% -10%, #eaf0ff 0%, rgba(234,240,255,0) 60%),
    radial-gradient(900px 420px at -10% 0%, #eef2fb 0%, rgba(238,242,251,0) 55%),
    #f3f5fb;
  -webkit-font-smoothing: antialiased;
  color: var(--gz-ink);
}

/* ---------- Navbar ---------- */
.navbar.bg-primary {
  background: linear-gradient(100deg, var(--gz-brand) 0%, var(--gz-brand-2) 60%, var(--gz-brand-3) 100%) !important;
  box-shadow: 0 6px 22px -14px rgba(14,47,147,.8);
}
.navbar .navbar-brand { display: inline-flex; align-items: center; gap: .5rem; letter-spacing: -.01em; }
.navbar .brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-weight: 800;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
}
.navbar .nav-link { border-radius: 9px; padding-inline: .6rem !important; display: inline-flex; align-items: center; gap: .38rem; opacity: .9; }
.navbar .nav-link:hover { background: rgba(255,255,255,.14); opacity: 1; }
.navbar .nav-link.active { background: rgba(255,255,255,.22); opacity: 1; font-weight: 600; }

/* ---------- Page header band ---------- */
.page-head {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--gz-brand) 0%, var(--gz-brand-2) 62%, var(--gz-brand-3) 100%);
  color: #fff; border-radius: var(--gz-radius); padding: 1.15rem 1.35rem; margin-bottom: 1.25rem;
  box-shadow: var(--gz-shadow);
}
.page-head .ph-title { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 800; letter-spacing: -.02em; }
.page-head .ph-title .bi { font-size: 1.35rem; opacity: .95; }
.page-head .ph-sub { margin: .25rem 0 0; opacity: .82; font-size: .92rem; max-width: 70ch; }
.page-head .ph-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-head .ph-actions .btn-light { font-weight: 600; }
.page-head .ph-actions .btn-outline-light { border-color: rgba(255,255,255,.55); }
.page-head::after {
  content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle at center, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.page-head.head-slim { padding: .85rem 1.15rem; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--gz-line); border-radius: var(--gz-radius); box-shadow: var(--gz-shadow); }
.card .card-header { background: #fff; border-bottom: 1px solid var(--gz-line); font-weight: 700; border-top-left-radius: var(--gz-radius); border-top-right-radius: var(--gz-radius); }
.card.card-hover, a.card { transition: transform .12s ease, box-shadow .12s ease; }
.card.card-hover:hover, a.card:hover { transform: translateY(-3px); box-shadow: var(--gz-shadow-lg); }

/* ---------- Stat / KPI tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.stat {
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--gz-line);
  border-radius: var(--gz-radius); padding: 1rem 1.1rem; box-shadow: var(--gz-shadow);
  display: flex; flex-direction: column; gap: .15rem;
}
.stat .stat-ico {
  position: absolute; top: .85rem; right: .9rem; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.35rem;
}
.stat .stat-label { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gz-muted); }
.stat .stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .stat-hint { font-size: .82rem; color: var(--gz-muted); }
.stat.accent-brand { border-top: 3px solid var(--gz-brand); }
.stat.accent-ok    { border-top: 3px solid var(--gz-ok); }
.stat.accent-warn  { border-top: 3px solid var(--gz-warn); }
.stat.accent-crit  { border-top: 3px solid var(--gz-crit); }

.ico-brand { background: var(--gz-brand-soft); color: var(--gz-brand-ink); }
.ico-ok    { background: var(--gz-ok-soft);    color: var(--gz-ok); }
.ico-warn  { background: var(--gz-warn-soft);  color: var(--gz-warn); }
.ico-crit  { background: var(--gz-crit-soft);  color: var(--gz-crit); }

/* ---------- Severity stripes (list rows / cards) ---------- */
.sev { border-left: 4px solid var(--gz-line); }
.sev-ok   { border-left-color: var(--gz-ok); }
.sev-warn { border-left-color: var(--gz-warn); }
.sev-crit { border-left-color: var(--gz-crit); }
.chip-soft { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.chip-ok   { background: var(--gz-ok-soft);   color: #0f5132; }
.chip-warn { background: var(--gz-warn-soft); color: #7a4f00; }
.chip-crit { background: var(--gz-crit-soft); color: #842029; }
.chip-brand{ background: var(--gz-brand-soft);color: var(--gz-brand-ink); }

/* ---------- Icon chip (generic) ---------- */
.icon-chip { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; flex: none; }

/* ---------- Tables ---------- */
.card > .table-responsive > .table, .card > .table { margin-bottom: 0; }
.table > thead th { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gz-muted); font-weight: 700; border-bottom-color: var(--gz-line); }
.table > tbody > tr { transition: background .1s ease; }
.table-hover > tbody > tr:hover { background: var(--gz-brand-soft); }
.table td, .table th { vertical-align: middle; }
.plate { font-family: var(--bs-font-monospace); font-weight: 700; letter-spacing: .5px; background: #1b2331; color: #fff; padding: .12rem .45rem; border-radius: 6px; font-size: .82rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; }
.btn-primary { background: var(--gz-brand); border-color: var(--gz-brand); }
.btn-primary:hover { background: var(--gz-brand-2); border-color: var(--gz-brand-2); }
.btn-lg { border-radius: 12px; }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 2.4rem 1rem; color: var(--gz-muted); }
.empty svg { width: 120px; height: auto; margin-bottom: .8rem; opacity: .95; }
.empty .empty-title { font-weight: 700; color: var(--gz-ink); margin-bottom: .2rem; }

/* ---------- Sparkline / mini bars ---------- */
.sparkline { display: block; }
td .sparkline { margin-left: auto; }
.spark { display: block; width: 100%; height: 40px; }
.minibars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.minibars .bar { flex: 1; background: var(--gz-brand-soft); border-radius: 4px 4px 0 0; position: relative; min-height: 3px; }
.minibars .bar > span { position: absolute; inset: 0; background: linear-gradient(180deg, var(--gz-brand), var(--gz-brand-3)); border-radius: 4px 4px 0 0; }

/* ---------- Section titles ---------- */
.section-title { display: flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.01em; }
.section-title .bi { color: var(--gz-brand-ink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }