/* GENERÁLT – ui-kit/build.php, tokens.json v0.1.0. Kézzel ne szerkeszd. */
:root {
  --px-accent: #FF5E16;
  --px-accent-ink: #c2410c;
  --px-accent-tint: rgba(255,94,22,.10);
  --px-bg: #f5f5f4;
  --px-bg-soft: #fafaf9;
  --px-surface: #ffffff;
  --px-line: #e7e5e4;
  --px-line-strong: #d6d3d1;
  --px-ink: #1c1917;
  --px-muted: #6b6560;
  --px-ok: #15803d;
  --px-ok-bg: #dcfce7;
  --px-warn: #a16207;
  --px-warn-bg: #fef3c7;
  --px-bad: #b91c1c;
  --px-bad-bg: #fee2e2;
  --px-info: #1d4ed8;
  --px-info-bg: #dbeafe;
  --px-approval: #6d28d9;
  --px-approval-bg: #ede9fe;
  --px-control: 30px;
  --px-control-touch: 44px;
  --px-toolbar: 40px;
  --px-panel-head: 34px;
  --px-radius-control: 6px;
  --px-radius-panel: 8px;
  --px-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --px-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --px-font-size: 13px;
  --px-font-line-height: 1.45;
  --px-ctl: var(--px-control);
}
@media (pointer: coarse) { :root { --px-ctl: var(--px-control-touch); } }

/* POPX UI Kit v0 – alapkomponensek. Csak tokenekre (var(--px-…)) hivatkozik; nyers szín itt nincs. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--px-bg); color: var(--px-ink);
  font-family: var(--px-font-family); font-size: var(--px-font-size); line-height: var(--px-font-line-height);
}
a { color: var(--px-accent-ink); }
a:focus-visible, .px-btn:focus-visible, .px-input:focus-visible { outline: 2px solid var(--px-accent-ink); outline-offset: 2px; }
code, .px-code { font-family: var(--px-font-mono); font-size: 12px; }
.px-mut { color: var(--px-muted); }

/* Keret: fejléc + tartalom */
.px-header { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--px-surface); border-bottom: 1px solid var(--px-line); flex-wrap: wrap; }
.px-logo { font-weight: 800; font-size: 16px; letter-spacing: .02em; text-decoration: none; color: var(--px-ink); }
.px-logo b { color: var(--px-accent-ink); }
.px-spacer { flex: 1; }
.px-main { max-width: 1100px; margin: 0 auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.px-h1 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 0; }

/* Gomb */
.px-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--px-ctl); padding: 0 12px; border-radius: var(--px-radius-control); border: 1px solid var(--px-line-strong); background: var(--px-surface); color: var(--px-ink); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
.px-btn-primary { background: var(--px-accent-ink); border-color: var(--px-accent-ink); color: #fff; }
.px-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Panel */
.px-panel { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-panel); }
.px-panel-head { min-height: var(--px-panel-head); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--px-line); font-size: 12.5px; font-weight: 700; }
.px-panel-body { padding: 12px; }

/* Űrlap */
.px-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.px-label { font-weight: 600; font-size: 12.5px; }
.px-input { height: var(--px-ctl); padding: 0 10px; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-control); background: var(--px-surface); font: inherit; color: var(--px-ink); }

/* Állapotjelző – mindig jel + szöveg, sosem csak szín */
.px-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.px-b-ok { background: var(--px-ok-bg); color: var(--px-ok); }
.px-b-warn { background: var(--px-warn-bg); color: var(--px-warn); }
.px-b-bad { background: var(--px-bad-bg); color: var(--px-bad); }
.px-b-info { background: var(--px-info-bg); color: var(--px-info); }
.px-b-appr { background: var(--px-approval-bg); color: var(--px-approval); }
.px-b-decl { background: var(--px-bg); color: #57534e; border: 1px dashed var(--px-line-strong); }

/* Táblázat */
.px-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.px-table th { text-align: left; font-weight: 600; color: var(--px-muted); font-size: 12px; padding: 6px 10px; border-bottom: 1px solid var(--px-line); background: var(--px-bg-soft); }
.px-table td { padding: 7px 10px; border-bottom: 1px solid var(--px-line); vertical-align: top; }

/* Üzenet */
.px-alert { padding: 10px 12px; border-radius: var(--px-radius-control); border: 1px solid var(--px-line); background: var(--px-bg-soft); }
.px-alert-bad { border-color: var(--px-bad); background: var(--px-bad-bg); color: var(--px-bad); }
.px-note { font-size: 12px; color: #57534e; background: var(--px-bg-soft); border: 1px dashed var(--px-line-strong); border-radius: var(--px-radius-control); padding: 8px 10px; }

/* Bejelentkezés */
.px-auth { max-width: 380px; margin: 10vh auto; padding: 0 16px; }

@media (max-width: 600px) { .px-main { padding: 14px 12px; } }
.px-logo[data-size="lg"] { font-size: 22px; }
.px-normal { font-weight: 400; }
.px-row { display: flex; gap: 10px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.px-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
.px-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.px-kpi { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--px-line); }
.px-kpi b { font-size: 24px; letter-spacing: -.02em; }
.px-kpi span { font-size: 12.5px; color: var(--px-muted); }
details.px-panel > summary { cursor: pointer; list-style: none; }
details.px-panel[open] > summary { border-bottom: 1px solid var(--px-line); }
.px-chip { display: inline-block; margin: 2px; padding: 1px 6px; border: 1px solid var(--px-line); border-radius: 4px; background: var(--px-bg-soft); }
.px-panel > .px-note { margin: 0 12px 12px; }
.px-code-block { margin: 0; padding: 10px 0; overflow-x: auto; font-family: var(--px-font-mono); font-size: 12px; line-height: 1.55; background: var(--px-bg-soft); }
.px-code-block span { display: block; padding: 0 12px; white-space: pre; }
.px-code-block .px-mark { background: var(--px-warn-bg); }

/* M3: alkalmazáskeret (menü + munkaterület + jobb panel) */
.px-app { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; min-height: calc(100vh - 53px); }
.px-app > .px-work:last-child { grid-column: 2 / 4; }
.px-nav { background: var(--px-surface); border-right: 1px solid var(--px-line); padding: 6px 8px 16px; display: flex; flex-direction: column; gap: 1px; }
.px-nav-group { font-size: 11.5px; font-weight: 700; color: var(--px-muted); padding: 12px 10px 4px; }
.px-nav-item { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 10px; border-radius: var(--px-radius-control); color: var(--px-ink); text-decoration: none; }
.px-nav-item:hover { background: var(--px-bg-soft); }
.px-nav-on { background: var(--px-accent-tint); font-weight: 700; color: var(--px-accent-ink); }
.px-nav-plan { color: var(--px-muted); }
.px-nav-ico { width: 16px; text-align: center; }
.px-nav-badge { margin-left: auto; }
.px-work { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.px-aside { padding: 18px 14px; background: var(--px-surface); border-left: 1px solid var(--px-line); display: flex; flex-direction: column; gap: 12px; }
.px-stack { display: flex; flex-direction: column; gap: 8px; }
.px-ink { color: var(--px-ink); }
.px-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--px-line); padding: 0 8px; }
.px-tab { padding: 8px 12px; color: var(--px-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.px-tab-on { color: var(--px-ink); font-weight: 700; border-bottom-color: var(--px-accent); }
.px-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--px-bg); border: 1px solid var(--px-line); }
.px-bg-ok { background: var(--px-ok); } .px-bg-warn { background: #d97706; } .px-bg-bad { background: var(--px-bad); } .px-bg-info { background: var(--px-info); }
.px-bg-unk { background: repeating-linear-gradient(45deg, var(--px-bg-soft) 0 4px, var(--px-line) 4px 8px); }
.px-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--px-muted); margin: 8px 0; }
.px-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.px-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.px-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-panel); color: var(--px-ink); text-decoration: none; }
.px-card:hover { border-color: var(--px-accent-ink); }
.px-card-t { font-weight: 700; }
.px-chainmini { display: flex; gap: 3px; }
.px-cm { width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--px-bg); color: var(--px-muted); }
.px-cm-ok { background: var(--px-ok-bg); color: var(--px-ok); } .px-cm-bad { background: var(--px-bad-bg); color: var(--px-bad); } .px-cm-warn { background: var(--px-warn-bg); color: var(--px-warn); } .px-cm-doc { background: var(--px-info-bg); color: var(--px-info); }
.px-chain { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.px-link { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--px-line); border-radius: var(--px-radius-control); }
.px-link-bad { box-shadow: 0 0 0 2px var(--px-bad); } .px-link-warn { box-shadow: 0 0 0 1px #d97706; }
.px-link .px-mut { font-size: 11.5px; }
.px-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.px-sep { border-bottom: 1px solid var(--px-line); }
.px-row-l { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
@media (max-width: 1100px) { .px-app { grid-template-columns: 200px minmax(0, 1fr); } .px-aside { grid-column: 2; border-left: 0; background: transparent; } .px-app > .px-work:last-child { grid-column: 2; } }
@media (max-width: 700px) { .px-app { grid-template-columns: 1fr; } .px-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--px-line); } .px-nav-group { display: none; } .px-aside, .px-app > .px-work:last-child { grid-column: 1; } }
.px-bar span { flex-basis: 0; }
.px-kpi span b { font-size: inherit; letter-spacing: 0; }
.px-bar [data-w="1"]{flex-grow:1}.px-bar [data-w="2"]{flex-grow:2}.px-bar [data-w="3"]{flex-grow:3}.px-bar [data-w="4"]{flex-grow:4}.px-bar [data-w="5"]{flex-grow:5}.px-bar [data-w="6"]{flex-grow:6}.px-bar [data-w="7"]{flex-grow:7}.px-bar [data-w="8"]{flex-grow:8}.px-bar [data-w="9"]{flex-grow:9}.px-bar [data-w="10"]{flex-grow:10}.px-bar [data-w="11"]{flex-grow:11}.px-bar [data-w="12"]{flex-grow:12}.px-bar [data-w="13"]{flex-grow:13}.px-bar [data-w="14"]{flex-grow:14}.px-bar [data-w="15"]{flex-grow:15}.px-bar [data-w="16"]{flex-grow:16}.px-bar [data-w="17"]{flex-grow:17}.px-bar [data-w="18"]{flex-grow:18}.px-bar [data-w="19"]{flex-grow:19}.px-bar [data-w="20"]{flex-grow:20}.px-bar [data-w="21"]{flex-grow:21}.px-bar [data-w="22"]{flex-grow:22}.px-bar [data-w="23"]{flex-grow:23}.px-bar [data-w="24"]{flex-grow:24}.px-bar [data-w="25"]{flex-grow:25}.px-bar [data-w="26"]{flex-grow:26}.px-bar [data-w="27"]{flex-grow:27}.px-bar [data-w="28"]{flex-grow:28}.px-bar [data-w="29"]{flex-grow:29}.px-bar [data-w="30"]{flex-grow:30}.px-bar [data-w="31"]{flex-grow:31}.px-bar [data-w="32"]{flex-grow:32}.px-bar [data-w="33"]{flex-grow:33}.px-bar [data-w="34"]{flex-grow:34}.px-bar [data-w="35"]{flex-grow:35}.px-bar [data-w="36"]{flex-grow:36}.px-bar [data-w="37"]{flex-grow:37}.px-bar [data-w="38"]{flex-grow:38}.px-bar [data-w="39"]{flex-grow:39}.px-bar [data-w="40"]{flex-grow:40}.px-bar [data-w="41"]{flex-grow:41}.px-bar [data-w="42"]{flex-grow:42}.px-bar [data-w="43"]{flex-grow:43}.px-bar [data-w="44"]{flex-grow:44}.px-bar [data-w="45"]{flex-grow:45}.px-bar [data-w="46"]{flex-grow:46}.px-bar [data-w="47"]{flex-grow:47}.px-bar [data-w="48"]{flex-grow:48}.px-bar [data-w="49"]{flex-grow:49}.px-bar [data-w="50"]{flex-grow:50}.px-bar [data-w="51"]{flex-grow:51}.px-bar [data-w="52"]{flex-grow:52}.px-bar [data-w="53"]{flex-grow:53}.px-bar [data-w="54"]{flex-grow:54}.px-bar [data-w="55"]{flex-grow:55}.px-bar [data-w="56"]{flex-grow:56}.px-bar [data-w="57"]{flex-grow:57}.px-bar [data-w="58"]{flex-grow:58}.px-bar [data-w="59"]{flex-grow:59}.px-bar [data-w="60"]{flex-grow:60}.px-bar [data-w="61"]{flex-grow:61}.px-bar [data-w="62"]{flex-grow:62}.px-bar [data-w="63"]{flex-grow:63}.px-bar [data-w="64"]{flex-grow:64}.px-bar [data-w="65"]{flex-grow:65}.px-bar [data-w="66"]{flex-grow:66}.px-bar [data-w="67"]{flex-grow:67}.px-bar [data-w="68"]{flex-grow:68}.px-bar [data-w="69"]{flex-grow:69}.px-bar [data-w="70"]{flex-grow:70}.px-bar [data-w="71"]{flex-grow:71}.px-bar [data-w="72"]{flex-grow:72}.px-bar [data-w="73"]{flex-grow:73}.px-bar [data-w="74"]{flex-grow:74}.px-bar [data-w="75"]{flex-grow:75}.px-bar [data-w="76"]{flex-grow:76}.px-bar [data-w="77"]{flex-grow:77}.px-bar [data-w="78"]{flex-grow:78}.px-bar [data-w="79"]{flex-grow:79}.px-bar [data-w="80"]{flex-grow:80}.px-bar [data-w="81"]{flex-grow:81}.px-bar [data-w="82"]{flex-grow:82}.px-bar [data-w="83"]{flex-grow:83}.px-bar [data-w="84"]{flex-grow:84}.px-bar [data-w="85"]{flex-grow:85}.px-bar [data-w="86"]{flex-grow:86}.px-bar [data-w="87"]{flex-grow:87}.px-bar [data-w="88"]{flex-grow:88}.px-bar [data-w="89"]{flex-grow:89}.px-bar [data-w="90"]{flex-grow:90}.px-bar [data-w="91"]{flex-grow:91}.px-bar [data-w="92"]{flex-grow:92}.px-bar [data-w="93"]{flex-grow:93}.px-bar [data-w="94"]{flex-grow:94}.px-bar [data-w="95"]{flex-grow:95}.px-bar [data-w="96"]{flex-grow:96}.px-bar [data-w="97"]{flex-grow:97}.px-bar [data-w="98"]{flex-grow:98}.px-bar [data-w="99"]{flex-grow:99}.px-bar [data-w="100"]{flex-grow:100}