:root{
  --bg:#f0f6fc; --card:#ffffff; --ink:#2b2b2b; --muted:#6f6f6f; --line:#dde6ee;
  --accent:rgb(47,62,139); --accent-ink:#ffffff; --link:rgb(47,62,139);
  --radius:12px; --gap:14px;
}
[data-theme="dark"]{ --bg:#0f1720; --card:#111827; --ink:#e5e7eb; --muted:#9ca3af; --line:#243244; --accent:#60a5fa; --accent-ink:#0b1220; --link:#93c5fd; }
[data-theme="gelb"]{ --bg:#fff7d1; --card:#ffffff; --ink:#2b2b1a; --muted:#6f6542; --line:#f6dfa2; --accent:#ca8a04; --accent-ink:#1a1606; --link:#b45309; }
[data-theme="gruen"]{ --bg:#eafaf2; --card:#ffffff; --ink:#0f2419; --muted:#4b6b58; --line:#c6ead7; --accent:#0f9d58; --accent-ink:#ffffff; --link:#0b7a43; }
[data-theme="rot"]{ --bg:#fff1f1; --card:#ffffff; --ink:#1f1b1b; --muted:#6b5a5a; --line:#f2c2c2; --accent:#c81e1e; --accent-ink:#ffffff; --link:#991b1b; --thead:#d64b4b; --thead-ink:#ffffff; --zebra:#fff8f8; --badge-bg:#fde2e2; --badge-ink:#991b1b; }
[data-theme="rosa"]{ --bg:#fff1f7; --card:#ffffff; --ink:#2b2430; --muted:#7a6b7a; --line:#ffd6e7; --accent:#ec4899; --accent-ink:#ffffff; --link:#be185d; }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.35}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}

.container{width:100%;padding:24px clamp(16px,2vw,32px);display:grid;gap:var(--gap)}

/* ========= HEADER (NEU) ========= */
.header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:14px 16px;
  border-radius:12px;
  background:#1B3A6B;
  border:1px solid #1B3A6B;
  color:#fff;
  gap:20px;
}
.title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:700;
  color:#fff;
}
.title img{height:28px;width:auto;display:block}

.actions{
  display:flex;
  align-items:center;
  margin-left:auto;
  gap:10px;
}
.search-group{
  display:flex;
  align-items:center;
  gap:10px;
}

.header a{color:#fff}
.searchbox{
  max-width:240px;
  width:100%;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  background:#fff;
  font-size:14px;
  color:#1f2937;
}
.theme-btn{
  height:32px;width:32px;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.theme-btn:hover{background:rgba(255,255,255,.12)}

.theme-select{
  height:32px;border:1px solid rgba(255,255,255,.35);
  background:#fff;color:#111;border-radius:8px;padding:0 8px;font-size:13px;
}
.hidden{display:none!important}
.icon-btn img{
  position:relative;
  top:2px;
}

/* =================================== */

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 0 rgba(0,0,0,.02);padding:16px 18px}
.card h4{margin:0 0 8px;font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}

.kv{display:grid;grid-template-columns:180px 1fr;gap:6px 14px;font-size:14px}
.kv .label{color:var(--muted)}

.form{display:grid;gap:8px}
.frow{display:grid;grid-template-columns:140px 1fr 140px 1fr;gap:8px}
.frow.single{grid-template-columns:140px 1fr}
.frow .lbl{color:var(--muted);font-size:13px;align-self:center}
.field{border:1px solid var(--line);background:#f8fbff;border-radius:8px;padding:8px 10px;min-height:32px;display:flex;align-items:center}
[data-theme="dark"] .field{background:#0b1220}

.md-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.span-2{grid-column:span 2}

.kpi{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.k{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.k h5{margin:0 0 6px;font-size:12px;color:var(--muted)}
.k strong{font-size:18px}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.table thead th{text-align:left;color:var(--muted);font-weight:700;background:#f0f6fc;position:sticky;top:0;z-index:1}

.grid{display:grid;gap:var(--gap)}
.cols-3{grid-template-columns:1.2fr 1fr 1fr}
.cols-2{grid-template-columns:1fr 1fr}
.cols-4{grid-template-columns:repeat(4,1fr)}

.subhead{margin:14px 0 6px;color:var(--muted);font-size:12px;letter-spacing:.3px;text-transform:uppercase}
.table-wrap{max-height:360px;overflow:auto}

@media (max-width:1100px){
  .cols-3,.cols-4{grid-template-columns:1fr}
  .frow{grid-template-columns:140px 1fr}
  .md-grid{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
}

/* Tooltip für Artikelnummer-Input */
.artnr-tooltip-wrap{
  position:relative;
  display:inline-block;
}

.artnr-tooltip{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  background:#222;
  color:#fff;
  font-size:12px;
  padding:6px 8px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
  transition-delay:0ms;
  z-index:9999;
}

.artnr-tooltip-wrap:hover .artnr-tooltip,
.artnr-tooltip-wrap:focus-within .artnr-tooltip{
  opacity:1;
  transform:translateY(0);
}

/* ===== Pfeil-Button wie Vorgangsdashboard ===== */
.vgnr-wrap{
  position:relative;
  display:inline-block;
}
.vgnr-wrap .searchbox{
  padding-right:34px;
}
.searchbox-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  height:22px;
  width:22px;
  border:0;
  border-radius:6px;
  cursor:pointer;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.searchbox-btn:active{
  transform:translateY(-50%) scale(.96);
}

/* Styling für Stücklistenstruktur */
tr.parent-row {
cursor: pointer;
}

tr.level-1 td:first-child { padding-left: 20px; }
tr.level-2 td:first-child { padding-left: 40px; }
tr.level-3 td:first-child { padding-left: 60px; }
tr.level-4 td:first-child { padding-left: 80px; }
tr.level-5 td:first-child { padding-left: 100px; }
tr.level-6 td:first-child { padding-left: 120px; }
tr.level-7 td:first-child { padding-left: 140px; }
tr.level-8 td:first-child { padding-left: 160px; }
tr.level-9 td:first-child { padding-left: 180px; }
tr.level-10 td:first-child { padding-left: 200px; }

.toggle-icon {
display: inline-block;
transition: transform 0.2s;
}

tr.expanded .toggle-icon {
transform: rotate(90deg);
}

/* ===== Inline Chart Styles ===== */
.card-row{
  display:flex;
  gap:24px;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  max-width:1400px;
  margin:0 auto;
  padding:20px 0;
}
.card.graph-card{
  flex:0 0 520px;
  max-width:520px;
  width:520px;
}
.cg-wrap{
  width:100%;
  font-size:12px;
}
.cg-title{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}
.cg-top{
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.cg-y{
  width:50px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:160px;
  font-size:11px;
  color:var(--muted);
  border-right:1px solid var(--line);
  padding-right:8px;
  margin-right:4px;
}
.cg-bars{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex:1;
  border-bottom:1px solid var(--line);
  height:160px;
}
.cg-bar-wrap{
  flex:1;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.cg-bar{
  width:16px;
  background:rgba(47,62,139,.35);
  border-radius:4px 4px 0 0;
  margin-bottom:-1px;
}
.cg-bar-value{
  position:absolute;
  bottom:100%;
  margin-bottom:6px;
  font-size:10px;
  color:var(--muted);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease-out;
}
.cg-bar-wrap:hover .cg-bar-value{
  opacity:1;
}
.cg-x-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:6px;
  font-size:11px;
}
.cg-x-placeholder{
  width:50px;
}
.cg-x-labels{
  display:flex;
  gap:12px;
  flex:1;
}
.cg-x-labels div{
  flex:1;
  text-align:center;
}

/* ===== Login Screen ===== */
#login-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  z-index: 10000;
  flex-direction: column;
  gap: 16px;
}
#login-screen .login-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 40px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
#login-screen .login-box h2 {
  margin: 0 0 8px;
  font-size: 20px;
}
.login-logo-wrap {
  width: 80px;
  height: 80px;
  background: #1B3A6B;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
#login-screen .login-box p {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 20px;
}
#btn-login {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
#btn-login:hover { opacity: .9; }
#login-error {
  display: none;
  color: #c81e1e;
  font-size: 13px;
  margin-top: 12px;
}

/* ===== Skeleton Loading ===== */
.skeleton {
  background: linear-gradient(90deg, var(--line) 25%, transparent 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
  min-height: 20px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ================================================================
   Stücklisten-Auswertung (Feature-Modul stueli-export.js)
   ================================================================ */
.sx-open-btn{
  height:32px;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;border-radius:8px;padding:0 12px;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.sx-open-btn:hover{background:rgba(255,255,255,.12)}

#sx-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;z-index:10001;
  padding:24px;
}
.sx-panel{
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;width:min(1500px,100%);max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.sx-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:#1B3A6B;color:#fff;
}
.sx-title{font-size:16px;font-weight:700}
.sx-title .sx-muted{color:rgba(255,255,255,.7);font-weight:500}
.sx-bar-actions{display:flex;align-items:center;gap:8px}
.sx-btn{
  height:30px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);
  color:#fff;border-radius:8px;padding:0 12px;font-size:13px;cursor:pointer;
}
.sx-btn:hover{background:rgba(255,255,255,.18)}
.sx-btn:disabled{opacity:.45;cursor:default}
.sx-btn-close{padding:0 10px;font-weight:700}

.sx-progress-wrap{height:4px;background:var(--line)}
.sx-progress{height:4px;width:0;background:var(--accent);transition:width .3s ease}
.sx-status{padding:8px 16px;font-size:13px;color:var(--muted)}

.sx-filterbar{
  display:flex;gap:20px;flex-wrap:wrap;padding:4px 16px 12px;
  border-bottom:1px solid var(--line);
}
.sx-filtercol{min-width:220px;flex:1}
.sx-modecol{flex:0 0 auto;min-width:240px}
.sx-filterhead{font-size:12px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.sx-chkbox{
  display:flex;flex-wrap:wrap;gap:4px 14px;max-height:110px;overflow:auto;
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#f8fbff;
}
[data-theme="dark"] .sx-chkbox{background:#0b1220}
.sx-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;white-space:nowrap}
.sx-chk input{cursor:pointer}

.sx-tablewrap{flex:1;overflow:auto}
.sx-table{width:100%;border-collapse:collapse;font-size:13px}
.sx-table th,.sx-table td{padding:8px 10px;border-bottom:1px solid var(--line);
  vertical-align:top;text-align:left}
.sx-table thead th{position:sticky;top:0;z-index:1;background:#f0f6fc;
  color:var(--muted);font-weight:700;white-space:nowrap}
[data-theme="dark"] .sx-table thead th{background:#0b1220}
.sx-table tbody tr:hover{background:rgba(47,62,139,.06)}
.sx-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-nowrap{white-space:nowrap}
.sx-klcell{min-width:220px}
.sx-kl{font-size:12px;line-height:1.4}
.sx-klg{color:var(--muted)}
.sx-muted{color:var(--muted)}
.sx-err{color:#c81e1e;font-weight:800;cursor:help}
.sx-total{padding:10px 16px;font-size:13px;border-top:1px solid var(--line);
  background:#f8fbff;color:var(--ink)}
[data-theme="dark"] .sx-total{background:#0b1220}/* ================================================================
   Stüli-Auswertung v0.3 — Baum-Elemente (an styles.css anhängen)
   Nutzt bestehende Variablen: --line, --muted, --accent, --ink
   ================================================================ */

/* Baum-Zelle: erste Spalte, Einrückung kommt inline per padding-left (JS) */
.sx-treecell{white-space:nowrap}

/* Auf-/Zuklapp-Pfeil */
.sx-toggle{
  display:inline-block;width:16px;text-align:center;margin-right:4px;
  cursor:pointer;color:var(--muted);font-size:11px;line-height:1;
  user-select:none;transition:color .15s ease;
}
.sx-toggle:hover{color:var(--accent)}

/* Platzhalter bei Blattknoten (kein Pfeil, gleiche Breite -> saubere Ausrichtung) */
.sx-toggle-empty{cursor:default}
.sx-toggle-empty:hover{color:var(--muted)}

/* ArtNr neben dem Pfeil */
.sx-artnr{font-variant-numeric:tabular-nums}

/* Ebene-1-Zeilen leicht hervorheben (Baugruppen-Wurzeln) */
.sx-table tbody tr[data-pfad] .sx-treecell{position:relative}
/* ===== Listen-Navigation (im Header, ?liste=...) ===== */
.liste-nav {
  display:flex; align-items:center; gap:6px;
  margin-left:6px; padding-left:10px;
  border-left:1px solid rgba(255,255,255,.25);
}
.liste-btn-header {
  height:28px; width:28px; border:1px solid rgba(255,255,255,.35);
  background:transparent; color:#fff; border-radius:6px;
  font-size:12px; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; flex-shrink:0;
}
.liste-btn-header:hover { background:rgba(255,255,255,.15); }
.liste-btn-header:disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }
.liste-select-header {
  max-width:280px; height:28px; border:1px solid rgba(255,255,255,.35);
  border-radius:6px; padding:0 8px; font-size:13px;
  background:#fff; color:#111;
}
.liste-counter-header {
  font-size:12px; color:rgba(255,255,255,.7); white-space:nowrap; flex-shrink:0;
}