:root{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#fafbfd; --bd:#dfe4ec; --bd2:#eceff5;
  --tx:#16202e; --tx2:#5c6a7d; --tx3:#8a97a8;
  --ac:#2563eb; --ac-bg:#e8f0ff;
  --ok:#0f9160; --ok-bg:#e4f6ee;
  --wa:#b45309; --wa-bg:#fdf3e3;
  --er:#c0392b; --er-bg:#fdeceb;
  --blue:#1d4ed8; --white:#64748b; --tl:#7c3aed; --admin:#0891b2;
  --sh:0 1px 2px rgba(16,32,54,.06),0 4px 12px rgba(16,32,54,.05);
  --r:10px;
  --phbg:#1e2a3d; --phtx:#f2f6fc; --phtx2:#a9b8cd; --phbd:#2c3a4f;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e131b; --panel:#161d28; --panel2:#1b2331; --bd:#2a3542; --bd2:#222c39;
    --tx:#e7ecf3; --tx2:#9aa8ba; --tx3:#6f7d90;
    --ac:#5b90ff; --ac-bg:#1b2942;
    --ok:#34c48b; --ok-bg:#12301f;
    --wa:#e0a24a; --wa-bg:#33260f;
    --er:#ef6b5c; --er-bg:#361a18;
    --blue:#6b9bff; --white:#94a3b8; --tl:#a78bfa; --admin:#22b8d6;
    --sh:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --phbg:#0a0f18; --phtx:#eef3fa; --phtx2:#8b9cb3; --phbd:#31405a;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:14px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
a{color:var(--ac)}
.wrap{max-width:1360px;margin:0 auto;padding:0 18px 60px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:40;background:var(--panel);
  border-bottom:1px solid var(--bd);
}
.hd{max-width:1360px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--ac),#7c3aed);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex:none}
.hd h1{font-size:16px}
.hd .sub{font-size:12px;color:var(--tx3);margin-top:1px}
.hd .spacer{flex:1}
.status{font-size:12px;color:var(--tx2);display:flex;align-items:center;gap:6px;
  background:var(--panel2);border:1px solid var(--bd);padding:5px 10px;border-radius:99px}
.dot{width:7px;height:7px;border-radius:99px;background:var(--ok)}
.dot.warn{background:var(--wa)}
.dot.err{background:var(--er)}

nav.tabs{max-width:1360px;margin:0 auto;padding:0 18px;display:flex;gap:2px;overflow-x:auto}
nav.tabs a{
  background:none;border:none;border-bottom:2px solid transparent;color:var(--tx2);
  padding:10px 14px;font:inherit;font-weight:550;cursor:pointer;white-space:nowrap;border-radius:6px 6px 0 0
}
nav.tabs a:hover{color:var(--tx);background:var(--panel2)}
nav.tabs a.on{color:var(--ac);border-bottom-color:var(--ac)}

/* ---------- generic ---------- */
.card{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);margin-top:18px}
.card>.ch{padding:14px 16px;border-bottom:1px solid var(--bd2);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card>.ch h2{font-size:15px}
.card>.ch .spacer{flex:1}
.card>.cb{padding:16px}
.muted{color:var(--tx2)}
.small{font-size:12px}
.hint{font-size:12px;color:var(--tx3);margin-top:4px}

button.btn{
  font:inherit;font-weight:550;cursor:pointer;border-radius:8px;padding:7px 13px;
  background:var(--panel2);border:1px solid var(--bd);color:var(--tx);
}
button.btn:hover{border-color:var(--tx3)}
button.btn.pri{background:var(--ac);border-color:var(--ac);color:#fff}
button.btn.pri:hover{filter:brightness(1.08)}
button.btn.dgr{background:transparent;border-color:var(--bd);color:var(--er)}
button.btn.dgr:hover{background:var(--er-bg);border-color:var(--er)}
button.btn.sm{padding:4px 9px;font-size:12px;border-radius:7px}
button.btn:disabled{opacity:.45;cursor:not-allowed}
button.ico{background:none;border:none;cursor:pointer;color:var(--tx3);font-size:15px;padding:2px 6px;border-radius:6px;line-height:1}
button.ico:hover{color:var(--er);background:var(--er-bg)}

input,select,textarea{
  font:inherit;color:var(--tx);background:var(--panel);border:1px solid var(--bd);
  border-radius:8px;padding:6px 9px;width:100%;min-width:0
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ac-bg);border-color:var(--ac)}
textarea{resize:vertical;min-height:38px}
label.fl{display:block;font-size:12px;font-weight:600;color:var(--tx2);margin-bottom:4px}
.grid{display:grid;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--tx3);
  font-weight:700;padding:8px 10px;border-bottom:1px solid var(--bd);white-space:nowrap
}
table.tbl td{padding:7px 10px;border-bottom:1px solid var(--bd2);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl tr.tot td{border-top:2px solid var(--bd);font-weight:700;background:var(--panel2)}
.scroll{overflow-x:auto}

.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;
  border:1px solid currentColor;white-space:nowrap}
.badge.b1{color:var(--blue)} .badge.b2{color:var(--white)} .badge.b3{color:var(--tl)} .badge.b4{color:var(--admin)}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.no{background:var(--er-bg);color:var(--er)}
.pill.mid{background:var(--wa-bg);color:var(--wa)}
.pill.off{background:var(--bd2);color:var(--tx3)}

.note{border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.55}
.note.i{background:var(--ac-bg);color:var(--tx)}
.note.w{background:var(--wa-bg);color:var(--tx)}
.note.e{background:var(--er-bg);color:var(--tx)}

/* ---------- KPI stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.tile{background:var(--panel2);border:1px solid var(--bd2);border-radius:var(--r);padding:12px 14px}
.tile .t{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--tx3);font-weight:700}
.tile .v{font-size:21px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.tile .s{font-size:11.5px;color:var(--tx3);margin-top:1px}

/* ---------- person cards ---------- */
.pcard{border:1px solid var(--bd);border-radius:var(--r);background:var(--panel);margin-bottom:18px;overflow:hidden;box-shadow:var(--sh)}
.pcard.inel{opacity:.72}
.ph{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--phbg);color:var(--phtx);
  border-bottom:1px solid var(--phbd);flex-wrap:wrap;box-shadow:inset 3px 0 0 var(--ac)}
.ph .nm{font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.ph .small,.ph label.small{color:var(--phtx2)}
.ph .fl{color:var(--phtx2)}
.ph .spacer{flex:1}
.kbadge{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;
  background:rgba(255,255,255,.12);color:var(--phtx);border:1px solid rgba(255,255,255,.18)}
.kbadge.ok{background:rgba(52,196,139,.18);border-color:rgba(52,196,139,.45)}
.kbadge.off{background:transparent;color:var(--phtx2);border-style:dashed;font-weight:600}
.pbody{padding:0}
.crit{display:grid;grid-template-columns:1fr 190px;gap:14px;padding:11px 14px;border-bottom:1px solid var(--bd2);align-items:center}
.crit:last-of-type{border-bottom:1px solid var(--bd)}
.crit .cn{font-weight:600}
.crit .ce{font-size:12px;color:var(--tx2);margin-top:2px}
.seg{display:flex;gap:0;border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.seg button{flex:1;background:var(--panel);border:none;border-right:1px solid var(--bd);color:var(--tx2);
  font:inherit;font-size:12px;font-weight:650;padding:6px 0;cursor:pointer}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--ac);color:#fff}
.seg button.on.zero{background:var(--er)}
.seg button.on.half{background:var(--wa)}
.wt{font-size:11px;color:var(--tx3);font-weight:600;white-space:nowrap}
.pfoot{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:12px 14px;background:var(--panel2)}
.pf{}
.pf .t{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--tx3);font-weight:700}
.pf .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.pf .v.big{font-size:19px;color:var(--ok)}
.pf .v.zero{color:var(--tx3)}
.bar{height:6px;border-radius:99px;background:var(--bd2);overflow:hidden;margin-top:6px}
.bar>i{display:block;height:100%;background:var(--ok);border-radius:99px}
.bar>i.mid{background:var(--wa)} .bar>i.low{background:var(--er)}

.inline-num{width:92px}
.inline-sm{width:74px}

.rolegroup{margin-top:22px}
.rolegroup>h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:10px}

.critrow{display:grid;grid-template-columns:1.3fr 1.5fr 1.5fr 78px 96px 34px;gap:8px;align-items:start;
  padding:9px 0;border-bottom:1px solid var(--bd2)}
.critrow.head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--tx3);font-weight:700;border-bottom:1px solid var(--bd)}
.critrow.arch{opacity:.55}
@media (max-width:900px){
  .crit{grid-template-columns:1fr}
  .critrow{grid-template-columns:1fr;gap:5px;padding:12px 0}
  .critrow.head{display:none}
}
footer{max-width:1360px;margin:0 auto;padding:24px 18px;color:var(--tx3);font-size:12px}
.hidden{display:none!important}

/* ---------- Laravel / Livewire kiegészítések ---------- */
nav.tabs a{text-decoration:none;display:inline-block}
.user{font-size:12px;color:var(--tx2);display:flex;align-items:center;gap:8px}
.user b{color:var(--tx)}
.user form{margin:0}
.flash{margin-top:14px}
.err{color:var(--er);font-size:12px;margin-top:4px}
.auth{min-height:100vh;display:grid;place-items:center;padding:16px}
.auth .card{width:100%;max-width:400px;margin:0}
.auth .logo{margin-bottom:10px}
.auth .code{font:600 22px/1 ui-monospace,Menlo,monospace;letter-spacing:8px;text-align:center}
.stack{display:grid;gap:12px}
.saving{font-size:12px;color:var(--tx3)}
.pagination{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
@media (max-width:640px){
  .wrap{padding:0 16px 60px}
  .hd{padding:10px 16px}
}