/* Auditum design system -- navy + white, vibrant accents. Plain CSS (no build step). */
:root {
  --navy-900:#0D1A33; --navy-800:#14264A; --navy-700:#1E3A6B; --navy-600:#2B4C86;
  --ink:#24304C; --muted:#66728C; --line:#E4E9F2; --surface:#FFFFFF; --canvas:#F5F8FC;
  --sidebar:#14264A; --sidebar-ink:#C6D2E8; --sidebar-ink-strong:#FFFFFF;
  --orange:#FB7A3C; --green:#1FBE8A; --purple:#7C5CFC; --amber:#F2B43C; --red:#F0605D;
  --ok-bg:rgba(31,190,138,.12); --ok-fg:#0E9E70;
  --draft-bg:rgba(242,180,60,.16); --draft-fg:#B47F13;
  --late-bg:rgba(240,96,93,.13); --late-fg:#D23F3C;
  --shadow:0 1px 2px rgba(19,38,74,.06), 0 8px 24px rgba(19,38,74,.06);
  --radius:14px;
  --font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] {
  --ink:#E6ECF7; --muted:#93A0BC; --line:#24314F; --surface:#131E36; --canvas:#0C1526;
  --sidebar:#0B1428; --sidebar-ink:#9FB0D0;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --ok-bg:rgba(31,190,138,.16); --draft-bg:rgba(242,180,60,.16); --late-bg:rgba(240,96,93,.18);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --ink:#E6ECF7; --muted:#93A0BC; --line:#24314F; --surface:#131E36; --canvas:#0C1526;
    --sidebar:#0B1428; --sidebar-ink:#9FB0D0;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --ok-bg:rgba(31,190,138,.16); --draft-bg:rgba(242,180,60,.16); --late-bg:rgba(240,96,93,.18);
  }
}

* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); background:var(--canvas); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; }
a { color:inherit; }
.app { display:grid; grid-template-columns:244px 1fr; min-height:100vh; }

/* Sidebar */
.side { background:var(--sidebar); color:var(--sidebar-ink); display:flex; flex-direction:column; padding:22px 16px; gap:26px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:11px; padding:0 6px; text-decoration:none; }
.brand .mark { width:34px; height:34px; border-radius:9px; flex:0 0 auto; background:linear-gradient(135deg,var(--purple),var(--navy-600)); position:relative; }
.brand .mark::after { content:""; position:absolute; inset:9px; border-radius:3px; background:var(--sidebar-ink-strong); clip-path:polygon(0 60%,35% 60%,50% 15%,65% 85%,80% 45%,100% 45%,100% 100%,0 100%); opacity:.9; }
.brand b { color:var(--sidebar-ink-strong); font-size:19px; letter-spacing:.2px; font-weight:650; }
.nav { display:flex; flex-direction:column; gap:3px; }
.nav .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:#7d8db1; padding:6px 10px; margin-top:8px; }
.nav a { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; color:var(--sidebar-ink); text-decoration:none; font-size:14.5px; font-weight:500; }
.nav a .ico { width:17px; height:17px; opacity:.75; flex:0 0 auto; }
.nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav a.active { background:rgba(124,92,252,.20); color:#fff; }
.nav a.active .ico { opacity:1; }
.side .who { margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-top:1px solid rgba(255,255,255,.08); }
.who .av { width:32px; height:32px; border-radius:50%; background:var(--orange); color:#3a1c07; display:grid; place-items:center; font-weight:700; font-size:13px; }
.who small { display:block; color:#7d8db1; font-size:12px; }
.who b { color:var(--sidebar-ink-strong); font-size:13.5px; }

/* Main */
.main { padding:26px 30px 46px; max-width:1120px; }
.top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.top h1 { margin:0 0 3px; font-size:23px; font-weight:650; letter-spacing:-.01em; }
.top p { margin:0; color:var(--muted); font-size:14px; }
.actions { display:flex; gap:10px; align-items:center; }
.btn { border:0; border-radius:10px; padding:10px 15px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; display:inline-flex; gap:8px; align-items:center; text-decoration:none; }
.btn.primary { background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(251,122,60,.28); }
.btn.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.toggle { background:var(--surface); border:1px solid var(--line); color:var(--muted); border-radius:9px; width:38px; height:38px; cursor:pointer; font-size:15px; }

.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 15px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.kpi.c1::before{background:var(--purple);} .kpi.c2::before{background:var(--orange);}
.kpi.c3::before{background:var(--green);} .kpi.c4::before{background:var(--navy-600);}
.kpi .k { font-size:12.5px; color:var(--muted); font-weight:500; }
.kpi .v { font-size:29px; font-weight:680; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; }
.kpi .d { font-size:12px; margin-top:3px; display:flex; gap:5px; align-items:center; }
.kpi .up{color:var(--ok-fg);} .kpi .warn{color:var(--draft-fg);}

.grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start; }
@media (max-width:960px){ .grid{grid-template-columns:1fr;} .kpis{grid-template-columns:repeat(2,1fr);} }
@media (max-width:720px){ .app{grid-template-columns:1fr;} .side{display:none;} }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card .hd { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); }
.card .hd h2 { margin:0; font-size:15px; font-weight:640; }
.card .hd a { color:var(--purple); text-decoration:none; font-size:13px; font-weight:600; }
.card .hd .eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }

.row { display:flex; align-items:center; gap:13px; padding:13px 18px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.row:last-child{border-bottom:0;}
.row:hover{ background:var(--canvas); }
.row .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.row .nm { font-weight:570; font-size:14.5px; }
.row .sub { color:var(--muted); font-size:12.5px; margin-top:1px; }
.row .grow{ flex:1 1 auto; min-width:0; }
.pill { font-size:11.5px; font-weight:650; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.pill.ok{background:var(--ok-bg); color:var(--ok-fg);}
.pill.draft{background:var(--draft-bg); color:var(--draft-fg);}
.pill.late{background:var(--late-bg); color:var(--late-fg);}
.tag { font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:7px; }
.tag.pu{background:rgba(124,92,252,.12); color:var(--purple);}
.tag.or{background:rgba(251,122,60,.13); color:#d1600f;}
.tag.gr{background:rgba(31,190,138,.13); color:var(--ok-fg);}

.detail .attrs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
.attr { background:var(--surface); padding:12px 15px; }
.attr.full{ grid-column:1 / -1; }
.attr .lab { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.attr .lab i { width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.attr .val { font-size:13.5px; color:var(--ink); }
.who-line{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.raci{ font-size:11px; font-weight:700; border-radius:5px; padding:1px 5px; }
.raci.R{background:rgba(251,122,60,.15); color:#d1600f;}
.raci.A{background:rgba(240,96,93,.14); color:var(--late-fg);}
.raci.C{background:rgba(124,92,252,.14); color:var(--purple);}
.raci.I{background:rgba(102,114,140,.14); color:var(--muted);}

.comp { padding:15px 18px; display:flex; align-items:center; gap:14px; }
.ring { width:52px; height:52px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; }
.ring span{ width:38px; height:38px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }

/* Auth */
.auth { min-height:100vh; display:grid; place-items:center; background:
  radial-gradient(1200px 500px at 50% -10%, rgba(124,92,252,.10), transparent 60%), var(--canvas); padding:24px; }
.auth .box { width:100%; max-width:392px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:30px 28px; }
.auth .brand { justify-content:center; margin-bottom:6px; }
.auth .brand b { color:var(--ink); }
.auth h1 { font-size:19px; margin:14px 0 4px; text-align:center; }
.auth p.sub { color:var(--muted); font-size:13.5px; text-align:center; margin:0 0 20px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.field input { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:14px; font-family:inherit; background:var(--canvas); color:var(--ink); }
.field input:focus { outline:2px solid var(--purple); outline-offset:1px; border-color:transparent; }
.auth .btn.primary { width:100%; justify-content:center; margin-top:4px; }
.auth .err { background:var(--late-bg); color:var(--late-fg); font-size:13px; padding:9px 12px; border-radius:9px; margin-bottom:14px; }
.auth .hint { text-align:center; color:var(--muted); font-size:12px; margin-top:16px; }

.foot { margin-top:22px; color:var(--muted); font-size:12.5px; text-align:center; }

/* ---------- Process graph ---------- */
.graph-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px;
  padding:6px 12px; font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; }
.chip.active { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
:root[data-theme="dark"] .chip.active { background:var(--purple); border-color:var(--purple); }
.graph-controls { display:flex; gap:6px; }
.graph-controls button { width:34px; height:34px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); border-radius:9px; font-size:16px; cursor:pointer; }

.graph-viewport { border:1px solid var(--line); border-radius:var(--radius); background:
  linear-gradient(var(--canvas),var(--canvas)); box-shadow:var(--shadow); overflow:auto; max-height:72vh; }
.graph-canvas { position:relative; transform-origin:0 0; }
.graph-lane { position:absolute; left:6px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); opacity:.6; margin-top:-14px; }

.graph-svg { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:visible; }
.graph-edge-casing { stroke:var(--canvas); stroke-width:6.5; opacity:1; }
.graph-edge { stroke-width:2.2; opacity:.9; transition:opacity .15s; }
.graph-edge.is-back { stroke-dasharray:5 4; opacity:.7; }
.edge-orange { stroke:var(--orange); } .mk-orange { fill:var(--orange); }
.edge-green  { stroke:var(--green); }  .mk-green  { fill:var(--green); }
.edge-purple { stroke:var(--purple); } .mk-purple { fill:var(--purple); }
.edge-red    { stroke:var(--red); }    .mk-red    { fill:var(--red); }
.edge-muted  { stroke:var(--muted); }  .mk-muted  { fill:var(--muted); }
.edge-navy-600 { stroke:var(--navy-600); } .mk-navy-600 { fill:var(--navy-600); }
/* dark theme: lift the blue/grey edges off the dark canvas for legible contrast */
:root[data-theme="dark"] .edge-navy-600, :root[data-theme="dark"] .lg-line.edge-navy-600 { stroke:#6f97da; border-top-color:#6f97da; }
:root[data-theme="dark"] .mk-navy-600 { fill:#6f97da; }
:root[data-theme="dark"] .edge-muted { stroke:#8391ad; } :root[data-theme="dark"] .mk-muted { fill:#8391ad; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .edge-navy-600 { stroke:#6f97da; }
  :root:not([data-theme="light"]) .mk-navy-600 { fill:#6f97da; }
  :root:not([data-theme="light"]) .edge-muted { stroke:#8391ad; }
  :root:not([data-theme="light"]) .mk-muted { fill:#8391ad; }
}
.lg-line.edge-navy-600 { border-top-color:var(--navy-600); }
.graph-edge-label { fill:var(--muted); font-size:10.5px; font-family:var(--font); paint-order:stroke;
  stroke:var(--canvas); stroke-width:3px; }

.graph-node { position:absolute; z-index:1; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--navy-600); border-radius:11px; box-shadow:var(--shadow); overflow:hidden;
  transition:opacity .15s, box-shadow .15s, transform .15s; }
.graph-node:hover { box-shadow:0 8px 22px rgba(19,38,74,.16); transform:translateY(-1px); }
.gn-body { display:flex; flex-direction:column; height:100%; padding:9px 12px; text-decoration:none; color:inherit; }
.gn-title { font-weight:640; font-size:13.5px; line-height:1.25; }
.gn-sub { color:var(--muted); font-size:11.5px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gn-foot { margin-top:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gn-sla { font-size:10.5px; font-weight:700; color:var(--draft-fg); background:var(--draft-bg); border-radius:6px; padding:1px 6px; }
/* node type variants */
.gn-partner { border-style:dashed; border-left-style:solid; background:var(--canvas); }
.gn-system  { opacity:.92; border-left-color:var(--muted); }
.gn-level   { border-left-color:var(--purple); background:linear-gradient(90deg, rgba(124,92,252,.06), var(--surface)); }
.gn-gap     { border-color:var(--red); border-left-color:var(--red); }
.gn-gap .gn-title { color:var(--late-fg); }
/* category left-border colors */
.cat-ktv { border-left-color:var(--purple); }
.cat-telefon { border-left-color:var(--green); }
.cat-halozat { border-left-color:var(--navy-600); }
.cat-szamlazas { border-left-color:var(--orange); }
.cat-modem { border-left-color:var(--green); }
.cat-kritikus { border-left-color:var(--red); }
.graph-node.dim, .graph-edge.dim, .graph-edge-label.dim { opacity:.12; }

.graph-legend { display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; padding:12px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.lg-group { display:flex; gap:16px; flex-wrap:wrap; }
.lg-item { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); }
.lg-box { width:15px; height:12px; border-radius:3px; border:1px solid var(--line); border-left:3px solid var(--navy-600); background:var(--surface); }
.lg-box.gn-partner { border-style:dashed; border-left-style:solid; }
.lg-box.gn-system { border-left-color:var(--muted); }
.lg-box.gn-gap { border-color:var(--red); border-left-color:var(--red); }
.lg-line { width:22px; height:0; border-top:2.5px solid var(--navy-600); }
.lg-line.edge-orange { border-top-color:var(--orange); } .lg-line.edge-green { border-top-color:var(--green); }
.lg-line.edge-red { border-top-color:var(--red); }
.lg-line.edge-purple.is-back { border-top-style:dashed; border-top-color:var(--purple); }

.graph-fallback-wrap { margin-top:16px; }
.graph-fallback-wrap > summary { cursor:pointer; color:var(--purple); font-weight:600; font-size:13.5px; padding:6px 0; }