/* ===========================
   Foora – Telegram Theme (v13)
   Živý background, glass sidebar, ikonky, karty, tabuľky
   =========================== */

/* ---------- Paleta / tokens ---------- */
:root{
  /* Telegram škála */
  --tg-50:#E6F7FF; --tg-100:#D6F2FF; --tg-200:#BFEAFF; --tg-300:#99DBF5;
  --tg-400:#5EC3EE; --tg-500:#2AABEE; --tg-600:#229ED9; --tg-700:#1A84B6; --tg-800:#136A92; --tg-900:#0D4B66;

  /* brand aliasy */
  --brand: var(--tg-600);
  --brand-400: var(--tg-500);
  --brand-500: var(--tg-600);
  --brand-600: var(--tg-700);

  --warn-500:#f59e0b;
  --error-500:#ef4444;

  /* neutrál */
  --bg-1:#F6FAFF; --bg-2:#F2F7FD; --bg-3:#FFFFFF;
  --ink:#0f172a; --ink-2:#475569;
  --border:rgba(15,23,42,.10);
  --ring:color-mix(in oklab, var(--brand-500) 35%, transparent);

  --panel:rgba(255,255,255,.86);
  --shadow:0 14px 32px rgba(2,6,23,.10);
  --shadow-soft:0 10px 22px rgba(2,6,23,.08);

  --bg-grad-from:#F6FAFF;
  --bg-grad-to:#FFFFFF;

  /* voliteľné SVG logo (ak ho neskôr pridáš) */
  --logo-url:url("/static/img/foora.svg");
}

/* Dark téma */
.theme-dark{
  --bg-1:#0E1420; --bg-2:#131E33; --bg-3:#0F1A2B;
  --bg-grad-from:#0E1420; --bg-grad-to:#0F1A2B;
  --panel:rgba(18, 27, 46, .78);
  --ink:#EAF4FF; --ink-2:#B9C7DB;
  --border:rgba(255,255,255,.12);
  --shadow:0 18px 48px rgba(0,0,0,.45);
  --shadow-soft:0 12px 28px rgba(0,0,0,.34);
  --ring:color-mix(in oklab, var(--brand-400) 45%, transparent);
}

/* ---------- Živé Telegram pozadie + jemná textúra ---------- */
@keyframes tgBgPan { 0%{background-position:0% 0%} 50%{background-position:100% 50%} 100%{background-position:0% 0%} }
.app-bg{
  position: relative;
  background-color:#f7fbff;
  background-image:
    radial-gradient(800px 500px at 85% -10%, rgba(42,171,238,.28), transparent 60%),
    radial-gradient(900px 520px at -10% -20%, rgba(34,158,217,.20), transparent 55%),
    radial-gradient(500px 300px at 20% 110%, rgba(34,158,217,.10), transparent 60%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 60%);
  background-attachment: fixed,fixed,fixed,scroll;
  background-size: auto, auto, auto, 100% 100%;
  animation: tgBgPan 28s linear infinite;
}
.app-bg::before{
  content:""; position: fixed; inset: 0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.008) 0 2px, transparent 2px 4px);
  opacity:.25;
}

/* ---------- Layout ---------- */
html,body{height:100%}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "SF Pro", "Noto Sans", Arial; color:var(--ink)}
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
@media (max-width:1024px){ .layout{grid-template-columns:84px 1fr} }
.content{padding:22px 26px}

/* ---------- Sidebar (glass + telegram border) ---------- */
.sidebar{
  position:sticky; top:0; height:100vh; align-self:start;
  padding:18px; display:flex; flex-direction:column; gap:18px;
  border-right:1px solid rgba(34,158,217,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
  backdrop-filter:saturate(160%) blur(14px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.theme-dark .sidebar{
  background:linear-gradient(180deg, rgba(18,27,46,.55), rgba(18,27,46,.32));
}

/* Brand (logo + text) */
.brand{display:flex;gap:12px;align-items:center;padding:6px 8px;text-decoration:none;color:inherit}
.brand-title{font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:12px;color:#64748b}
@media (max-width:1024px){ .brand-title,.brand-sub{display:none} }

/* BRAND LOGO – glass/gradient + shine (bez SVG) */
.brand-mark{
  --c1:#2AABEE; --c2:#229ED9; --c3:#6fd3ff;
  position: relative;
  width: 36px; height: 36px;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(255,255,255,.9), transparent 35%),
    linear-gradient(135deg, var(--c1), var(--c2) 60%, var(--c3));
  box-shadow: 0 10px 24px rgba(34,158,217,.35), inset 0 0 0 1px rgba(255,255,255,.55);
  overflow: hidden;
}
.brand-mark::before{
  content:"";
  position:absolute; inset:1px;
  border-radius: 11px;
  background:
    radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.65), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.06));
  mix-blend-mode: screen;
}
@keyframes brandShine { from{transform:translateX(-60%) rotate(12deg)} to{transform:translateX(60%) rotate(12deg)} }
.brand-mark::after{
  content:"";
  position:absolute; left:-40%; right:-40%; top:-30%; height:130%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  filter: blur(6px);
  transform: rotate(12deg);
  animation: brandShine 4.2s ease-in-out infinite;
}
.brand-mark iconify-icon{
  position:absolute; inset:0; margin:auto; width:18px; height:18px; color:white; opacity:.95;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* ---------- Navigácia ---------- */
.nav{display:flex;flex-direction:column;gap:6px;min-height:0}
.navlink{
  display:flex;align-items:center;gap:.6rem;
  padding:10px 12px;border-radius:12px;font-weight:700;
  color:#0f172a;text-decoration:none;transition:transform .15s ease, background .18s ease, border-color .18s ease;
  border:1px solid transparent;
}
.navlink:hover{background:rgba(34,158,217,.06)}
.navlink.is-active{
  background:linear-gradient(90deg, rgba(34,158,217,.18), rgba(42,171,238,.12));
  border-color:rgba(34,158,217,.28);
  box-shadow:0 10px 22px rgba(34,158,217,.10);
}
.nav .nav-ico{ width:18px; height:18px; color:var(--tg-600) }
.navlink.is-active .nav-ico{ color:#0ea5e9 }
.theme-dark .navlink{color:var(--ink)}
.theme-dark .navlink:hover{background:rgba(255,255,255,.06)}

/* ---------- Header ---------- */
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.header-title{font-size:22px;font-weight:800}
.header-actions{display:flex;gap:12px;align-items:center}
.icon-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--border);
  display:grid;place-items:center;background:var(--panel);cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}
.icon-btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-soft)}
.user-box{color:var(--ink-2)}
.role-badge{
  display:inline-flex;align-items:center;gap:.35rem; padding:.18rem .55rem; border-radius:9999px;
  font-size:.78rem; font-weight:800; color:#0f172a;
  background:linear-gradient(90deg, color-mix(in oklab, var(--brand-400) 22%, transparent), transparent);
  border:1px solid color-mix(in oklab, var(--brand-500) 28%, transparent);
}

/* ---------- Panely / karty ---------- */
.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:16px 18px;
  box-shadow:var(--shadow-soft);
}
.panel-title{font-weight:800;margin-bottom:10px}

/* „stat“ karty hore */
.stat{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; border-radius:16px;
  background: var(--panel);
  border:1px solid var(--border);
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(17,24,39,.12); border-color: color-mix(in oklab, var(--brand-500) 25%, transparent); }
.stat .meta{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#64748b}
.stat .value{font-size:34px; font-weight:800; line-height:1}
.stat .chip{
  font-size:11px; padding:.25rem .5rem; border-radius:999px; font-weight:800;
  background:linear-gradient(90deg, color-mix(in oklab, var(--brand-400) 16%, transparent), color-mix(in oklab, var(--brand-500) 10%, transparent));
  color:#1f2937; border:1px solid color-mix(in oklab, var(--brand-500) 22%, transparent);
}
.badge{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand-400) 18%, transparent), rgba(99,102,241,.10));
  border:1px solid color-mix(in oklab, var(--brand-500) 30%, transparent);
  box-shadow: inset 0 -6px 12px rgba(2,6,23,.06);
  font-size:20px;
}

/* ---------- Inputs ---------- */
.input{
  width:100%;height:42px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff;color:#0f172a;
  outline:none;transition:box-shadow .18s ease,border-color .18s ease;
}
.input:focus{box-shadow:0 0 0 6px var(--ring);border-color:color-mix(in oklab, var(--brand-500) 60%, #fff 40%)}
.label{font-size:12px;color:#64748b;display:block;margin-bottom:6px}

/* ---------- Buttons ---------- */
.btn-primary,.btn-danger,.btn-secondary{
  border:none;padding:10px 14px;border-radius:12px;font-weight:800;cursor:pointer;color:#fff;
  display:inline-flex;align-items:center;gap:8px;transition:transform .14s ease,box-shadow .22s ease, filter .2s;
}
.btn-primary{background:linear-gradient(90deg,var(--brand-500),var(--brand-400)); box-shadow:0 10px 22px rgba(34,158,217,.22) }
.btn-secondary{background:linear-gradient(90deg,#334155,#0f172a)}
.btn-danger{background:linear-gradient(90deg,#ef4444,#f43f5e); box-shadow:0 10px 22px rgba(244,63,94,.25)}
.btn-primary:hover,.btn-secondary:hover,.btn-danger:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* ---------- Tabuľky ---------- */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  position:sticky; top:0; z-index:2; background:linear-gradient(#fbfdff,#eef6ff);
  text-align:left; font-weight:800; font-size:.78rem; letter-spacing:.02em;
  padding:10px 12px; border-bottom:1px solid var(--border)
}
.table tbody td{padding:10px 12px;border-bottom:1px solid rgba(15,23,42,.06)}
.table tbody tr:hover{background:color-mix(in oklab, var(--brand-400) 8%, transparent)}

/* ---------- Chipy / tagy ---------- */
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .55rem;border-radius:9999px;font-size:.74rem;font-weight:800;border:1px solid var(--border)}
.chip--loc{background:#eef6ff;color:#0d4b66;border-color:color-mix(in oklab, var(--brand-500) 22%, transparent)}
.chip--ok{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.chip--work{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.chip--out{background:#fee2e2;color:#991b1b;border-color:#fecaca}

/* ---------- Upozornenia pod grafom ---------- */
.alerts{display:grid;gap:10px;margin-top:14px}
.alert{
  display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;
  border:1px solid var(--border); box-shadow:var(--shadow); backdrop-filter:blur(4px)
}
.alert--warn {background: linear-gradient(180deg,#fff9db,#fffbe7)}
.alert--err  {background: linear-gradient(180deg,#ffe4e6,#fff1f3)}
.alert .dot{width:10px;height:10px;border-radius:50%}
.alert--warn .dot{background:var(--warn-500)}
.alert--err .dot{background:var(--error-500)}

/* ---------- Skeleton pre čísla ---------- */
@keyframes skeletonShift{0%{background-position:100% 0}100%{background-position:0 0}}
.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#eef6ff 25%,#f8fbff 37%,#eef6ff 63%);background-size:400% 100%;animation:skeletonShift 1.2s ease-in-out infinite}

/* ---------- Animácie vstupu ---------- */
.animate-in{animation:fadeInUp .45s ease-out both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Fix horizontálneho scrollu (Chart.js a pod.) ---------- */
html, body{ overflow-x: clip; width:100% }
@supports not (overflow: clip){ html, body{ overflow-x: hidden } }
#dash{ position:relative; overflow-x: clip; }
#dash .stat, #dash .panel-gradient, #dash .chart-wrap{ overflow: clip; }
#dash .stat::after{ animation: none !important; transform: none !important; left:0 !important; right:0 !important; }
#dash .chart-wrap{ position:relative; width:100%; }
#dash .chart-wrap canvas{ display:block; width:100% !important; max-width:100% !important; }



/* --- Sidebar: výraznejšia aktívna položka, ikonky, hover --- */
.navlink{font-weight:600}
.navlink.is-active{font-weight:800}
.navlink:hover{
  background:rgba(34,158,217,.06);
}
.navlink.is-active{
  background:linear-gradient(90deg, rgba(34,158,217,.18), rgba(42,171,238,.12));
  border:1px solid rgba(34,158,217,.28);
  box-shadow:0 10px 22px rgba(34,158,217,.10);
}
.nav-ico{width:18px;height:18px;color:var(--tg2)}
.navlink.is-active .nav-ico{color:#0ea5e9}


/* Jemné svetelné body – väčší “telegram vibe” */
.app-bg::before, .app-bg::after{
  content:""; position:fixed; pointer-events:none; z-index:-1; border-radius:50%;
  filter: blur(60px); opacity:.18; transform: translateZ(0);
}
.app-bg::before{
  width:60vw; height:60vw; top:-22vw; right:-12vw;
  background:radial-gradient(circle at 30% 30%, var(--tg1) 0%, transparent 60%);
}
.app-bg::after{
  width:58vw; height:58vw; bottom:-25vw; left:-18vw;
  background:radial-gradient(circle at 70% 70%, var(--tg2) 0%, transparent 60%);
}



/* ---- Foora brand logo (bez kocky) ---- */
.brand-logo{ width:36px; height:36px; border-radius:12px; display:block;
  filter: drop-shadow(0 10px 24px rgba(34,158,217,.28)); }
@media (max-width:1024px){ .brand-title,.brand-sub{display:none} }


/* ==== Telegram “mesh” pozadie s jemným pohybom ==== */
@keyframes meshDrift { 
  0%{ transform:translate3d(-3%, -2%, 0) scale(1.02) } 
  50%{ transform:translate3d(2%, 1%, 0)  scale(1.04) } 
  100%{ transform:translate3d(-3%, -2%, 0) scale(1.02) } 
}
.app-bg{
  position:relative;
  background:linear-gradient(180deg,#F6FAFF,#FFFFFF); /* fallback */
  overflow-x:clip;
}
.app-bg::before,
.app-bg::after{
  content:""; position:fixed; inset:auto; left:-10vw; right:-10vw; top:-20vh; height:60vh; z-index:-1;
  background:
    radial-gradient(40vw 40vh at 15% 30%, rgba(42,171,238,.35), transparent 60%),
    radial-gradient(35vw 35vh at 85% -10%, rgba(34,158,217,.30), transparent 60%),
    radial-gradient(50vw 45vh at 60% 100%, rgba(34,158,217,.18), transparent 60%);
  filter: blur(10px);
  animation: meshDrift 26s ease-in-out infinite;
}
.app-bg::after{
  top:auto; bottom:-25vh; height:55vh;
  background:
    radial-gradient(38vw 32vh at 80% 70%, rgba(42,171,238,.26), transparent 60%),
    radial-gradient(30vw 30vh at 10% 90%, rgba(34,158,217,.22), transparent 60%);
  animation-duration: 30s;
}

/* rešpektuj používateľov s reduced-motion */
@media (prefers-reduced-motion: reduce){
  .app-bg::before, .app-bg::after{ animation:none }
}

.logout .btn-danger{
  background:linear-gradient(90deg,#ef4444,#f43f5e);
  border:none; border-radius:12px; color:#fff; font-weight:800;
  box-shadow:0 12px 24px rgba(244,63,94,.25);
}
.logout .btn-danger:hover{ transform:translateY(-1px); filter:brightness(1.05); }





/* ======= Off-canvas sidebar na mobiloch (fix grid + overlay) ======= */
@media (max-width: 1024px){
  /* 1) zruš 2-stĺpcový grid, nech je len 1 stĺpec (žiadna “rezerva” pre sidebar) */
  .layout{
    display:block !important;           /* dôležité: zruší grid-template-columns z desktopu */
  }

  /* 2) sidebar spravíme ako off-canvas */
  .sidebar{
    position: fixed;
    inset: 0 auto 0 0;                  /* top:0; left:0; bottom:0 */
    width: 260px;
    max-width: 86vw;
    z-index: 50;
    transform: translateX(-100%);       /* skrytý mimo plátna */
    transition: transform .25s ease;
    box-shadow: 0 10px 30px rgba(2,6,23,.15);
  }
  body.nav-open .sidebar{
    transform: translateX(0);           /* zobraziť */
  }

  /* 3) obsah nech používa celú šírku */
  .content{ padding-left: 0 !important; }

  /* 4) sticky header + overlay */
  .header{ position: sticky; top: 0; z-index: 30; }

  /* overlay je mimo .layout (v base.html má id=mobileOverlay) */
  #mobileOverlay{
    display: none;
  }
  body.nav-open #mobileOverlay{
    display: block;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.35);
    backdrop-filter: blur(1px);
    z-index: 40;
  }

  /* 5) disable scroll, aby sa stránka nehýbala za otvoreným menu */
  body.nav-open{
    overflow: hidden;
    touch-action: none;
  }

  /* 6) iOS auto-zoom prevention pri fókusovaní inputov */
  .input, select, textarea, input[type="date"], input[type="number"]{
    font-size: 16px;
  }
}

/* drobné – nech logout tlačidlo v sidebare neprečnieva */
.sidebar .logout{ margin-top: auto; }
.sidebar .logout{ padding-top:8px; padding-bottom:max(8px, env(safe-area-inset-bottom)); }




/* === REPLACE OR APPEND AT THE VERY END OF /static/css/custom.css === */
#navToggle{
  display:inline-grid !important;
  place-items:center;
  position:relative;
  z-index:60;
  pointer-events:auto;
}

#mobileOverlay{
  position:fixed; inset:0; z-index:40;
  background:rgba(15,23,42,.35);
  backdrop-filter:blur(1px);
  display:none;
}
#navstate:checked ~ #mobileOverlay{ display:block; }

.layout,.content,.page{min-width:0;}
body{overflow-x:hidden;}

@media (min-width:1025px){
  .layout{display:grid; grid-template-columns:300px 1fr; min-height:100vh;}
  .sidebar{position:sticky; top:0; height:100vh; transform:none !important; width:300px !important; z-index:10;}
  .content{padding:22px 26px;}
}

@media (max-width:1024px){
  .layout{display:block !important;}
  .sidebar{
    position:fixed !important;
    inset:0 auto 0 0;
    width:300px !important;
    max-width:86vw;
    z-index:50;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:0 10px 30px rgba(2,6,23,.15);
  }
  #navstate:checked ~ .sidebar{ transform:translateX(0); }
  .header{position:sticky; top:0; z-index:30;}
  .content{padding-left:0 !important;}
}

/* Optional: keep off-canvas also for very tall small-width devices */
@media (max-width:812px){
  .page{padding:1rem;}
}

/* Tables safe scroll */
.table-wrap,.table-responsive,.page table{
  display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.page table{ min-width:720px; }



/* Komponentové skratky bez Tailwind build-u */
.input{
  width:100%;
  border-radius:12px;
  border:1px solid #d1d5db;
  background:rgba(255,255,255,.9);
  padding:.5rem .75rem;
  outline:none;
  transition:box-shadow .2s, border-color .2s, background-color .2s, filter .2s;
}
.input:focus{
  background:#fff;
  border-color:transparent;
  box-shadow:0 0 0 6px var(--ring, rgba(34,158,217,.25));
}

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg, var(--brand-600, #1A84B6), var(--brand-500, #229ED9));
  color:#fff; border:none; border-radius:12px;
  padding:.625rem 1rem; font-weight:700;
  box-shadow:0 10px 30px -10px rgba(79,70,229,.35);
  transition:transform .14s, filter .2s, box-shadow .2s;
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #d1d5db; border-radius:12px;
  padding:.625rem 1rem;
  transition:background-color .2s, transform .14s;
}
.btn-secondary:hover{ background:#f9fafb; transform:translateY(-1px); }

.card{
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(17,24,39,.08);
}


/* --- Fix akčných tlačidiel v tabuľke (čitateľnosť) --- */
.btn{display:inline-flex;align-items:center;gap:8px;line-height:1;font-weight:800;border-radius:12px;padding:10px 14px}

.btn-primary{color:#fff}
.btn-danger{color:#fff}

/* Sekundárne – boli biele na bielom, spravíme tmavý text a jemný okraj */
.btn-secondary{
  background:#ffffff;
  color:#0f172a !important;
  border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(2,6,23,.06);
}
.btn-secondary:hover{background:#f8fafc}

/* nech sú ikonky v tlačidlách viditeľné */
.btn iconify-icon, .btn svg{width:18px;height:18px;vertical-align:middle}

/* šírka/zalomenie v stĺpci „Akcie“ */
.table td .btn{white-space:nowrap}
.input-lg {
  padding: 0.9rem 1.1rem;
  font-size: 1.15rem;
  border-radius: 0.8rem;
}

.btn-lg {
  padding: 0.8rem 1.6rem;
  font-size: 1.05rem;
  border-radius: 0.8rem;
}

.action-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  background: white;
  transition: all 0.15s ease;
}

.action-card input {
  display: none;
}

.action-card .title {
  font-weight: 700;
  font-size: 1.1rem;
}

.action-card .desc {
  font-size: 0.85rem;
  color: #64748b;
}

.action-card:hover {
  border-color: #3b82f6;
}

.action-card:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
}

.action-card.danger:has(input:checked) {
  border-color: #dc2626;
  background: #fef2f2;
}

/* ===========================
   UI Polish v3 (global override)
   =========================== */
:root{
  --ui-bg-1:#f3f8ff;
  --ui-bg-2:#eef5ff;
  --ui-bg-3:#ffffff;
  --ui-ink:#0b1628;
  --ui-muted:#5b6b82;
  --ui-border:rgba(10,34,64,.12);
  --ui-brand:#1f9bd6;
  --ui-brand-2:#47b8ef;
  --ui-focus:rgba(31,155,214,.24);
  --ui-radius:16px;
  --ui-shadow:0 16px 36px rgba(12,26,44,.10);
  --ui-shadow-soft:0 8px 20px rgba(12,26,44,.08);
}

body{
  font-family:"Segoe UI Variable","Bahnschrift","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  color:var(--ui-ink);
  letter-spacing:.01em;
}

.app-bg{
  background:
    radial-gradient(1100px 520px at -8% -18%, rgba(31,155,214,.20), transparent 62%),
    radial-gradient(1000px 560px at 106% 108%, rgba(71,184,239,.18), transparent 58%),
    linear-gradient(180deg, var(--ui-bg-1) 0%, var(--ui-bg-2) 38%, var(--ui-bg-3) 100%);
}
.theme-dark .app-bg{
  background:
    radial-gradient(980px 520px at 8% -12%, rgba(31,155,214,.24), transparent 58%),
    radial-gradient(920px 520px at 100% 100%, rgba(71,184,239,.17), transparent 55%),
    linear-gradient(180deg,#0d1628 0%,#0e1a2f 45%,#0f2038 100%);
}

.sidebar{
  border-right:1px solid color-mix(in oklab, var(--ui-brand) 28%, transparent);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.40);
}
.theme-dark .sidebar{
  border-right-color:rgba(111,180,232,.24);
}

.navlink{
  border-radius:14px;
  border:1px solid transparent;
  padding:11px 12px;
}
.navlink:hover{
  transform:translateX(2px);
  background:linear-gradient(90deg, rgba(31,155,214,.12), rgba(71,184,239,.06));
}
.navlink.is-active{
  transform:none;
  background:linear-gradient(90deg, rgba(31,155,214,.20), rgba(71,184,239,.12));
  border-color:color-mix(in oklab, var(--ui-brand) 34%, transparent);
  box-shadow:0 10px 24px rgba(31,155,214,.14);
}

.header{
  margin-bottom:18px;
  padding:10px 12px;
  border:1px solid var(--ui-border);
  border-radius:14px;
  background:rgba(255,255,255,.64);
  backdrop-filter:blur(10px) saturate(140%);
}
.theme-dark .header{
  background:rgba(17,30,51,.72);
}

.header-title{font-size:clamp(18px,2vw,24px); font-weight:900;}
.user-box{font-size:14px; color:var(--ui-muted);}

.icon-btn{
  border-radius:12px;
  border:1px solid var(--ui-border);
}
.icon-btn:hover{
  box-shadow:var(--ui-shadow-soft);
}

.panel,.card{
  border-radius:var(--ui-radius);
  border:1px solid var(--ui-border);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
  box-shadow:var(--ui-shadow-soft);
}
.theme-dark .panel,
.theme-dark .card{
  background:linear-gradient(180deg, rgba(20,35,58,.84), rgba(16,30,49,.84));
}

.panel-title{
  font-size:clamp(16px,1.5vw,21px);
  letter-spacing:.01em;
  margin-bottom:12px;
}

.input, select, textarea{
  border-radius:12px;
  border:1px solid var(--ui-border);
  background:rgba(255,255,255,.94);
  color:var(--ui-ink);
}
.input:focus, select:focus, textarea:focus{
  border-color:color-mix(in oklab, var(--ui-brand) 56%, #fff 44%);
  box-shadow:0 0 0 5px var(--ui-focus);
}

.btn{
  border-radius:12px;
  font-weight:800;
  letter-spacing:.01em;
}
.btn-primary{
  background:linear-gradient(95deg, var(--ui-brand), var(--ui-brand-2));
  box-shadow:0 12px 26px rgba(31,155,214,.26);
}
.btn-primary:hover{
  filter:brightness(1.03);
  box-shadow:0 14px 30px rgba(31,155,214,.32);
}
.btn-secondary{
  border:1px solid var(--ui-border);
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  color:var(--ui-ink) !important;
}
.btn-danger{
  box-shadow:0 12px 26px rgba(239,68,68,.24);
}

.role-badge{
  font-weight:900;
  border-color:color-mix(in oklab, var(--ui-brand) 32%, transparent);
  background:linear-gradient(90deg, rgba(31,155,214,.18), rgba(71,184,239,.08));
}

.table{
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--ui-border);
  border-radius:14px;
  overflow:hidden;
}
.table thead th{
  background:linear-gradient(180deg,#f9fcff,#ecf5ff);
  border-bottom:1px solid var(--ui-border);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.table tbody td{
  background:rgba(255,255,255,.80);
}
.table tbody tr:nth-child(even) td{
  background:rgba(248,252,255,.84);
}
.table tbody tr:hover td{
  background:color-mix(in oklab, var(--ui-brand) 11%, #fff 89%);
}

.theme-dark .table thead th{
  background:linear-gradient(180deg,#182841,#15253d);
}
.theme-dark .table tbody td{
  background:rgba(20,35,58,.68);
}
.theme-dark .table tbody tr:nth-child(even) td{
  background:rgba(17,31,52,.70);
}

.muted, .label{ color:var(--ui-muted); }

@media (max-width:1024px){
  .content{padding:14px;}
  .header{padding:8px 10px;}
  .panel{padding:14px;}
}


/* Forlit redesign v25: appended to preserve page-specific warehouse and label styles. */
/* ============================================================
   Forlit Slovakia — Informačný systém
   Redesign v25 · Clean SaaS theme (style-only, no markup changes)
   Class names preserved from the original app.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* Accent (indigo) */
  --accent:#4F46E5;
  --accent-600:#4338CA;
  --accent-700:#3730A3;
  --accent-soft:#EEF0FF;

  /* Status */
  --ok:#13B57E;      --ok-ink:#0E8E63;   --ok-soft:rgba(19,181,126,.12);
  --warn:#F2933C;    --warn-ink:#C76A1E; --warn-soft:rgba(242,147,60,.14);
  --error:#EF4444;   --error-soft:#FEF2F2;

  /* Neutrals */
  --page:#F4F5F7;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --ink:#14181F;
  --ink-2:#586074;
  --muted:#8A92A2;
  --faint:#9AA1AE;
  --border:#ECEEF2;
  --border-2:#E7E9EE;
  --line:#F0F1F4;

  /* Shape & depth */
  --radius:16px;
  --radius-sm:11px;
  --radius-xs:10px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.04);
  --shadow-md:0 8px 24px rgba(16,24,40,.08);
  --ring:color-mix(in srgb, var(--accent) 13%, transparent);

  --font-sans:'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- Dark theme ---------- */
.theme-dark{
  --page:#0E1118;
  --surface:#161B24;
  --surface-2:#1B212C;
  --ink:#EAEEF5;
  --ink-2:#AEB7C6;
  --muted:#7E8799;
  --faint:#6B7488;
  --border:#262D39;
  --border-2:#2C3340;
  --line:#222936;
  --accent-soft:rgba(99,102,241,.16);
  --surface-2:#1A2029;
  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 12px 32px rgba(0,0,0,.42);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:clip; width:100%}
@supports not (overflow:clip){ html,body{overflow-x:hidden} }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Calm, flat background (replaces animated blue mesh) */
.app-bg{ background:var(--page); }
.app-bg::before, .app-bg::after{ content:none !important; display:none !important; }

::selection{ background:color-mix(in srgb, var(--accent) 22%, transparent); }

/* Scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#D7DBE2;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#C2C8D2;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
.theme-dark *::-webkit-scrollbar-thumb{background:#39414F;background-clip:content-box}

/* ---------- Layout ---------- */
.layout{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; }
.content{ padding:0; min-width:0; display:flex; flex-direction:column; }

/* ---------- Sidebar ---------- */
.sidebar{
  position:sticky; top:0; height:100vh; align-self:start;
  display:flex; flex-direction:column; gap:4px;
  padding:18px 12px 12px;
  background:var(--surface);
  border-right:1px solid var(--border);
  backdrop-filter:none;
  overflow-y:auto; overscroll-behavior:contain;
}

/* Brand */
.brand{ display:flex; align-items:center; gap:11px; padding:2px 8px 16px; text-decoration:none; color:inherit; }
.brand-title{ font-weight:800; letter-spacing:-.01em; }
.brand-sub{ font:500 11px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }

/* ---------- Navigation ---------- */
.nav{ display:flex; flex-direction:column; gap:3px; min-height:0; padding:0 0 8px; }
.navlink{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--radius-xs);
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease;
}
.navlink:hover{ background:var(--surface-2); color:var(--ink); transform:none; }
.navlink.is-active{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:transparent;
  box-shadow:none;
  font-weight:700;
}
.nav .nav-ico, .nav-ico{ width:18px; height:18px; font-size:18px; color:currentColor; opacity:.9; flex:0 0 auto; }
.navlink.is-active .nav-ico{ color:var(--accent); opacity:1; }
.theme-dark .navlink{ color:var(--ink-2); }
.theme-dark .navlink:hover{ background:var(--surface-2); color:var(--ink); }

/* Logout */
.sidebar .logout{ margin-top:auto; padding-top:10px; padding-bottom:max(8px, env(safe-area-inset-bottom)); border-top:1px solid var(--border); }
.logout .btn-danger{
  width:100%; justify-content:center;
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--border); border-radius:var(--radius-xs);
  font:600 13px var(--font-sans); box-shadow:none;
  padding:10px 12px;
}
.logout .btn-danger:hover{
  background:var(--error-soft); border-color:#FECACA; color:#DC2626;
  transform:none; filter:none;
}
.theme-dark .logout .btn-danger:hover{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.4); color:#FCA5A5; }

/* ---------- Header / topbar ---------- */
.header{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  min-height:72px; padding:14px 30px; margin:0;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--border);
  border-radius:0;
}
.header-title{ display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.header-actions{ display:flex; gap:12px; align-items:center; }
.icon-btn{
  width:38px; height:38px; border-radius:var(--radius-xs);
  border:1px solid var(--border); background:var(--surface);
  display:grid; place-items:center; cursor:pointer; color:var(--ink-2);
  transition:background .15s ease, color .15s ease;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--ink); transform:none; box-shadow:none; }
.user-box{ font-size:13px; color:var(--ink-2); }
.user-box .muted{ color:var(--muted); }
.user-box strong{ color:var(--ink); font-weight:700; }

.role-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  font:600 11px var(--font-mono); letter-spacing:.02em;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid transparent;
}

/* ---------- Page wrapper ---------- */
.page{ padding:22px 30px 34px; min-width:0; }

/* ---------- Panels / cards ---------- */
.panel,.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.panel{ padding:20px 22px; }
.panel-title{ font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0 0 12px; color:var(--ink); }

/* Stat cards */
.stat{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-sm); backdrop-filter:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.stat:hover{ transform:none; border-color:var(--border-2); box-shadow:var(--shadow-md); }
.stat .meta{ font:600 10.5px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.stat .value{ font-size:34px; font-weight:800; line-height:1; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.stat .chip{
  font:700 11.5px var(--font-sans); padding:3px 8px; border-radius:999px;
  color:var(--ok-ink); background:var(--ok-soft); border:1px solid transparent;
}
.badge{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid transparent;
  box-shadow:none; color:var(--accent); font-size:20px;
}

/* ---------- Inputs ---------- */
.input, select, textarea{
  width:100%; height:auto; min-height:40px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 12px; background:var(--surface-2); color:var(--ink);
  font:500 13.5px var(--font-sans); outline:none;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, textarea::placeholder{ color:var(--faint); }
.input:focus, select:focus, textarea:focus{
  background:var(--surface); border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
}
.input-lg{ min-height:48px; padding:12px 16px; font-size:15px; border-radius:12px; }
.label,.muted{ color:var(--muted); }
.label{ display:block; font-size:12px; margin-bottom:6px; font-weight:600; }

/* ---------- Buttons ---------- */
.btn,.btn-primary,.btn-secondary,.btn-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 15px; border-radius:var(--radius-sm);
  font:700 13px var(--font-sans); line-height:1; cursor:pointer;
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-primary:hover{ background:var(--accent-600); transform:none; filter:none; box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 36%, transparent); }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn-secondary{ background:var(--surface); color:var(--ink) !important; border-color:var(--border); box-shadow:var(--shadow-sm); }
.btn-secondary:hover{ background:var(--surface-2); border-color:var(--border-2); transform:none; }
.btn-danger{ background:var(--surface); color:var(--ink-2); border-color:var(--border); box-shadow:none; }
.btn-danger:hover{ background:var(--error-soft); border-color:#FECACA; color:#DC2626; transform:none; filter:none; }
.btn-lg{ padding:12px 22px; font-size:14.5px; border-radius:12px; }
.btn iconify-icon, .btn svg, .btn-primary iconify-icon, .btn-danger iconify-icon{ width:18px; height:18px; vertical-align:middle; }

/* ---------- Tables ---------- */
.table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.table thead th{
  position:sticky; top:0; z-index:2; text-align:left;
  background:var(--surface-2);
  font:700 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  padding:11px 14px; border-bottom:1px solid var(--border);
}
.table tbody td{ padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); font-size:13.5px; color:var(--ink); }
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.table td .btn{ white-space:nowrap; }
.theme-dark .table thead th{ background:var(--surface-2); }

/* Tables safe scroll */
.table-wrap,.table-responsive,.page table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.page table{ min-width:680px; }

/* ---------- Chips / tags ---------- */
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:3px 9px; border-radius:999px; font:600 11.5px var(--font-sans); border:1px solid var(--border); color:var(--ink-2); background:var(--surface-2); }
.chip--loc{ background:var(--accent-soft); color:var(--accent-700); border-color:transparent; }
.chip--ok{ background:var(--ok-soft); color:var(--ok-ink); border-color:transparent; }
.chip--work{ background:var(--warn-soft); color:var(--warn-ink); border-color:transparent; }
.chip--out{ background:var(--error-soft); color:#B91C1C; border-color:transparent; }

/* ---------- Alerts ---------- */
.alerts{ display:grid; gap:10px; margin-top:14px; }
.alert{
  display:flex; gap:10px; align-items:flex-start; border-radius:12px; padding:12px 14px;
  border:1px solid var(--border); box-shadow:none; backdrop-filter:none; background:var(--surface);
}
.alert--warn{ background:var(--warn-soft); border-color:transparent; }
.alert--err{ background:var(--error-soft); border-color:transparent; }
.alert .dot{ width:9px; height:9px; border-radius:50%; margin-top:5px; flex:none; }
.alert--warn .dot{ background:var(--warn); }
.alert--err .dot{ background:var(--error); }

/* ---------- Skeleton ---------- */
@keyframes skeletonShift{ 0%{background-position:100% 0} 100%{background-position:0 0} }
.skeleton{ position:relative; overflow:hidden; border-radius:8px; background:linear-gradient(90deg, var(--line) 25%, var(--surface-2) 37%, var(--line) 63%); background-size:400% 100%; animation:skeletonShift 1.3s ease-in-out infinite; }

/* ---------- Entry animation (content visible by default; animates only if motion allowed) ---------- */
.animate-in{ opacity:1; }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
@media (prefers-reduced-motion:no-preference){
  .animate-in{ animation:fadeInUp .4s ease-out both; }
}

/* ---------- Action cards (settings/labels) ---------- */
.action-card{
  display:flex; gap:1rem; align-items:center; padding:14px 16px;
  border-radius:14px; border:1px solid var(--border); cursor:pointer;
  background:var(--surface); transition:border-color .15s ease, background .15s ease;
}
.action-card input{ display:none; }
.action-card .title{ font-weight:700; font-size:14.5px; }
.action-card .desc{ font-size:12.5px; color:var(--muted); }
.action-card:hover{ border-color:var(--border-2); background:var(--surface-2); }
.action-card:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.action-card.danger:has(input:checked){ border-color:#DC2626; background:var(--error-soft); }

/* ============================================================
   Responsive / off-canvas sidebar (functional — preserved)
   ============================================================ */
@media (min-width:1025px){
  .layout{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; }
  .sidebar{ position:sticky; top:0; height:100vh; transform:none !important; width:264px !important; z-index:10; }
}

@media (max-width:1024px){
  .layout{ display:block !important; }
  .sidebar{
    position:fixed !important; inset:0 auto 0 0;
    width:280px !important; max-width:86vw; z-index:50;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 10px 30px rgba(2,6,23,.15);
  }
  #navstate:checked ~ .sidebar{ transform:translateX(0); }
  .header{ position:sticky; top:0; z-index:30; padding:12px 16px; }
  .page{ padding:16px; }
  .content{ padding-left:0 !important; }
}

#navToggle{ display:none; }
@media (max-width:1024px){ #navToggle{ display:inline-grid !important; place-items:center; position:relative; z-index:60; pointer-events:auto; } }

#mobileOverlay{ position:fixed; inset:0; z-index:40; background:rgba(15,23,42,.35); backdrop-filter:blur(1px); display:none; }
#navstate:checked ~ #mobileOverlay{ display:block; }
body.nav-open{ overflow:hidden; }

@media (max-width:1024px){
  .input, select, textarea, input[type="date"], input[type="number"]{ font-size:16px; }
}

.layout,.content,.page{ min-width:0; }

/* ============================================================
   Forlit Operations UI v27
   A restrained industrial layer: technical rhythm, clear state,
   and fewer generic "floating SaaS card" cues.
   ============================================================ */
:root{
  --ops-blue:#2563EB;
  --ops-cyan:#0891B2;
  --ops-grid:rgba(20,24,31,.035);
}
.theme-dark{ --ops-grid:rgba(255,255,255,.035); }

.app-bg{
  background-color:var(--page);
  background-image:none !important;
  background-attachment:scroll;
  animation:none !important;
}
.app-bg::before,.app-bg::after{ content:none !important; display:none !important; animation:none !important; }

.sidebar{
  border-right:1px solid var(--border-2);
  box-shadow:8px 0 30px rgba(16,24,40,.025);
}
.sidebar::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--accent) 0 64%,var(--ops-cyan) 64% 82%,transparent 82%);
}
.brand{ border-bottom:1px solid var(--line); margin-bottom:7px; }
.navlink{ position:relative; border-radius:7px; }
.navlink.is-active{
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 14%,var(--border));
}
.navlink.is-active::before{
  content:"";
  position:absolute;
  left:-12px;
  top:7px;
  bottom:7px;
  width:3px;
  border-radius:0 2px 2px 0;
  background:var(--accent);
}

.header{ min-height:76px; box-shadow:0 1px 0 rgba(16,24,40,.025); }
.header-identity{ min-width:0; }
.header-kicker{
  margin-bottom:2px;
  font:600 9px/1.2 var(--font-mono);
  letter-spacing:.13em;
  color:var(--faint);
}
.header-kicker span{ color:var(--accent); padding:0 3px; }
.header-title{ line-height:1.2; }
.system-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-right:13px;
  border-right:1px solid var(--border);
  font:600 9px/1 var(--font-mono);
  letter-spacing:.08em;
  color:var(--muted);
  white-space:nowrap;
}
.system-state-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-soft);
}

.panel,.card,.stat{
  border-radius:10px;
  box-shadow:0 1px 2px rgba(16,24,40,.035), 0 7px 20px rgba(16,24,40,.025);
}
.panel{ position:relative; }
.panel::before{
  content:"";
  position:absolute;
  left:18px;
  top:-1px;
  width:34px;
  height:2px;
  background:var(--accent);
}
.panel-title{
  font-size:15px;
  letter-spacing:-.012em;
}
.role-badge{ border-radius:5px; }
.btn,.btn-primary,.btn-secondary,.btn-danger,.input,select,textarea,.icon-btn{ border-radius:7px; }
.table{ border-radius:8px; }
.table thead th{ letter-spacing:.075em; }

@media (max-width:760px){
  .system-state{ display:none; }
  .header-kicker{ display:none; }
  .header{ min-height:64px; }
}