:root{
  --bg:#070a12;
  --line:#1c2a4a;
  --txt:#e7eefc;
  --mut:#9bb0d6;

  --card: rgba(255,255,255,0.02);
  --card2: rgba(0,0,0,0.14);
}

/* Light Theme überschreibt Variablen */
:root[data-theme="light"]{
  --bg:#f5f7fb;
  --line:#cfd8ea;
  --txt:#0b1220;
  --mut:#4b5b78;

  --card: rgba(255,255,255,0.85);
  --card2: rgba(255,255,255,0.55);
}

*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
html,body{height:100%}
body{margin:0;color:var(--txt);background:var(--bg)}

.bg{
  min-height:100vh;
  background:radial-gradient(1200px 900px at 20% 10%, rgba(15,23,52,0.85) 0%, var(--bg) 55%);
}
:root[data-theme="light"] .bg{
  background:radial-gradient(1200px 900px at 20% 10%, rgba(120,170,255,0.45) 0%, var(--bg) 55%);
}

.layout{display:flex;min-height:100vh}

.sidebar{
  width:300px;
  background:linear-gradient(180deg, rgba(7,11,22,0.92) 0%, rgba(7,10,18,0.92) 100%);
  border-right:1px solid var(--line);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px
}
:root[data-theme="light"] .sidebar{
  background:linear-gradient(180deg, rgba(245,247,251,0.92) 0%, rgba(245,247,251,0.92) 100%);
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
}
.logo{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,#7cf 0%, #58f 55%, #3c2 100%);
  filter:saturate(0.9)
}
.brandTitle{font-weight:800;font-size:14px}
.small{font-size:12px}
.muted{color:var(--mut)}

.nav{display:flex;flex-direction:column;gap:10px}
.navItem{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--txt);
  text-align:left;
  cursor:pointer
}
.navItem.active{
  outline:1px solid rgba(90,163,255,0.6);
  box-shadow:0 0 0 3px rgba(90,163,255,0.12) inset
}

.sidebarFooter{margin-top:auto}
.footerBox{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:var(--card);
}

.main{flex:1;padding:18px 18px 30px 18px}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  margin-bottom:14px
}
.h2{font-size:18px;font-weight:900}
.h3{font-size:14px;font-weight:800;margin:0 0 8px 0}

.row{display:flex;gap:10px;align-items:center}
.between{justify-content:space-between}
.full{width:100%}

.card{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  padding:16px
}
.cardInner{
  border:1px solid rgba(155,176,214,0.18);
  border-radius:16px;
  background:var(--card2);
  padding:12px
}

.lbl{display:block;margin-top:10px;color:var(--mut);font-size:12px}
.in{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.10);
  color:var(--txt);
  outline:none
}
:root[data-theme="dark"] .in{ background:rgba(0,0,0,0.22); }
.file{color:var(--mut)}

.btn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(90,163,255,0.45);
  background:rgba(90,163,255,0.14);
  color:var(--txt);
  cursor:pointer
}
.btn.ghost{border:1px solid var(--line);background:rgba(255,255,255,0.03)}
:root[data-theme="light"] .btn.ghost{background:rgba(0,0,0,0.02)}

.grid2{display:grid;grid-template-columns: 1.2fr 0.8fr;gap:12px;margin-top:12px}
.gridMain{align-items:start}

.kv{display:grid;grid-template-columns: 140px 1fr;gap:8px 10px}
.k{color:var(--mut);font-size:12px}
.v{font-weight:800}

.previewBox{
  border:1px dashed rgba(155,176,214,0.25);
  border-radius:16px;
  padding:12px;
  background:rgba(0,0,0,0.12)
}
:root[data-theme="light"] .previewBox{background:rgba(255,255,255,0.55)}

.canvasWrap{
  position: relative;
  margin-top:10px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(155,176,214,0.18);
  background:rgba(0,0,0,0.18);
}
:root[data-theme="light"] .canvasWrap{ background:rgba(255,255,255,0.55); }

.list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto;padding-right:6px}
.rowItem{
  border:1px solid rgba(155,176,214,0.18);
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  padding:10px
}
:root[data-theme="light"] .rowItem{background:rgba(0,0,0,0.02)}

.badgeWarn{
  display:inline-block;
  margin-left:8px;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,180,90,0.45);
  background:rgba(255,180,90,0.12);
  color:var(--txt);
}

.chipWrap{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(155,176,214,0.25);
  background:rgba(255,255,255,0.02);
  font-size:12px;
  color:var(--txt);
}
:root[data-theme="light"] .chip{ background:rgba(0,0,0,0.02); }

.detailsSummary{
  cursor:pointer;
  user-select:none;
  font-weight:800;
  color:var(--txt);
  padding:10px 12px;
  border:1px solid rgba(155,176,214,0.18);
  border-radius:12px;
  background:rgba(255,255,255,0.02);
}
:root[data-theme="light"] .detailsSummary{ background:rgba(0,0,0,0.02); }

.reportBox{
  white-space:pre-wrap;
  font-size:13px;
  line-height:1.45;
  margin-top:8px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(155,176,214,0.18);
  background:rgba(0,0,0,0.14);
  max-height:520px;
  overflow:auto;
}
:root[data-theme="light"] .reportBox{ background:rgba(255,255,255,0.60); }

.ampelWrap{display:flex;align-items:center;gap:8px}
.ampelDot{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;
  border:1px solid rgba(255,255,255,0.25);
}
.ampelOff{background:rgba(155,176,214,0.25)}
.ampelGreen{background:rgba(70, 220, 130, 0.95)}
.ampelYellow{background:rgba(255, 200, 70, 0.95)}
.ampelRed{background:rgba(255, 90, 90, 0.95)}

.tabsBar{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid rgba(155,176,214,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
}
:root[data-theme="light"] .tabsBar{ background:rgba(0,0,0,0.02); }

.tabBtn{
  border:1px solid rgba(155,176,214,0.18);
  background:rgba(255,255,255,0.02);
  color:var(--txt);
  border-radius:12px;
  padding:9px 12px;
  cursor:pointer;
  font-weight:800;
}
:root[data-theme="light"] .tabBtn{ background:rgba(0,0,0,0.02); }
.tabBtn.active{
  outline:1px solid rgba(90,163,255,0.6);
  box-shadow:0 0 0 3px rgba(90,163,255,0.12) inset;
}

.tabPanel{ margin-top:8px; }

/* Flow Mode */
.flowMode .main{
  display:block !important;
  max-width:1200px;
}
.flowMode .main + .main{
  margin-top:18px;
}

/* Print */
@media print {
  body{ background:#fff !important; color:#000 !important; }
  .sidebar, .btn, .nav, #flowBtn { display:none !important; }
  .layout{ display:block !important; }
  .main{ padding:0 !important; }
  .topbar{ border:none !important; background:transparent !important; }
  .card{ border:none !important; background:transparent !important; padding:0 !important; }
  .cardInner, .previewBox{ border:1px solid #ddd !important; background:#fff !important; }
  .reportBox{ max-height:none !important; overflow:visible !important; }
  #out{ display:none !important; }
}

.selectedRow{
  outline:1px solid rgba(90,163,255,0.6);
  box-shadow:0 0 0 3px rgba(90,163,255,0.12) inset;
}

.customerListItem{
  cursor:pointer;
}


/* =========================================================
   Stammdaten kompakter / Kundenprofil übersichtlicher
   ========================================================= */

[data-tabpanel="s-customers"] > .grid2{
  grid-template-columns: 0.72fr 1.28fr !important;
  gap: 14px !important;
  align-items: start;
}

[data-tabpanel="s-customers"] .cardInner{
  padding: 12px;
}

#stCustomerList{
  max-height: 520px !important;
  gap: 6px;
}

#stCustomerList .rowItem{
  padding: 8px 10px;
  min-height: 62px;
  border-radius: 10px;
}

#stCustomerList .rowItem b{
  font-size: 14px;
}

#stCustomerList .muted.small{
  font-size: 12px;
}

#stCustomerProfileWrap .tabsBar{
  padding: 6px;
  gap: 6px;
}

#stCustomerProfileWrap .tabBtn{
  padding: 8px 11px;
  border-radius: 10px;
}

#stCustomerProfileWrap .lbl{
  margin-top: 8px;
}

#stCustomerProfileWrap .in{
  padding: 9px 11px;
  border-radius: 12px;
}

#stCustomerProfileWrap .row{
  gap: 8px;
}

#stCustomerProfileWrap .list{
  max-height: 360px;
}

#stCustomerProfileWrap .rowItem{
  padding: 9px 10px;
  border-radius: 10px;
}

#stCustomerProfileTitle{
  margin-bottom: 2px;
}

#stCustomerProfileEmpty{
  padding: 6px 2px;
}

@media (max-width: 1200px){
  [data-tabpanel="s-customers"] > .grid2{
    grid-template-columns: 1fr !important;
  }

  #stCustomerList{
    max-height: 320px !important;
  }
}


/* =========================================================
   Kundenprofil Ausbau
   ========================================================= */

.customerProfileHero{
  border:1px solid rgba(155,176,214,0.18);
  border-radius:16px;
  background:var(--card2);
  padding:12px;
}

.customerHeroTitleRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.customerHeroActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.customerHeroMeta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}

.customerMetaCard{
  border:1px solid rgba(155,176,214,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  padding:10px 12px;
}

:root[data-theme="light"] .customerMetaCard{
  background:rgba(0,0,0,0.02);
}

.customerMetaLabel{
  font-size:12px;
  color:var(--mut);
  margin-bottom:4px;
}

.customerMetaValue{
  font-weight:800;
  line-height:1.35;
  word-break:break-word;
}

.customerSectionTitle{
  font-size:14px;
  font-weight:800;
  margin-bottom:6px;
}

.customerFormGrid .in{
  width:100%;
}

@media (max-width: 1200px){
  .customerHeroMeta{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .customerHeroTitleRow{
    flex-direction:column;
  }
}


/* =========================================================
   Maschinenprofil Erweiterung
   ========================================================= */
.machineSectionTitle{
  font-size:14px;
  font-weight:800;
  margin-top:6px;
  margin-bottom:2px;
}

.machineCapabilityChecks{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 14px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(155,176,214,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
}

:root[data-theme="light"] .machineCapabilityChecks{
  background:rgba(0,0,0,0.02);
}

.machineCapabilityChecks .row{
  gap:8px;
  align-items:flex-start;
}

.machineCapabilityGrid{
  align-items:start;
}

@media (max-width: 980px){
  .machineCapabilityChecks{
    grid-template-columns:1fr;
  }
}


/* ===== Maschinenprofil V2 ===== */
.machinePageGrid{
  grid-template-columns: 0.72fr 1.28fr !important;
  gap: 14px !important;
  align-items: start;
}
.machineCompactList{max-height:620px;gap:6px}
.machineRowCompact{padding:9px 10px;border-radius:10px}
.machineHeaderRow{gap:12px;flex-wrap:wrap}
.machineHeaderActions{gap:10px;flex-wrap:wrap}
.machineTabsBar{padding:6px;gap:6px}
.machineSectionTitle{font-size:14px;font-weight:800;margin-bottom:6px}
.machineFormGridCols{grid-template-columns: 1fr 1fr; gap:14px}
.machineCheckboxRow{margin-top:6px;gap:12px;flex-wrap:wrap}
.machineCapabilityChecks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px;
  padding:10px 12px;
  border:1px solid rgba(155,176,214,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
}
:root[data-theme="light"] .machineCapabilityChecks{background:rgba(0,0,0,0.02)}
.machineUnitsWrap{display:flex;flex-direction:column;gap:12px}
.machineUnitCard{
  border:1px solid rgba(155,176,214,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  padding:12px;
}
:root[data-theme="light"] .machineUnitCard{background:rgba(0,0,0,0.02)}
.machinePosWrap{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.machinePosCard{
  border:1px solid rgba(155,176,214,0.16);
  border-radius:12px;
  background:rgba(0,0,0,0.10);
  padding:10px;
}
:root[data-theme="light"] .machinePosCard{background:rgba(255,255,255,0.55)}
.machinePosGrid{grid-template-columns:1fr 1fr;gap:10px}
.machineOpsSelect{min-height:110px}
@media (max-width: 1200px){
  .machinePageGrid{grid-template-columns:1fr !important}
}
@media (max-width: 900px){
  .machineCapabilityChecks,.machineFormGridCols,.machinePosGrid{grid-template-columns:1fr}
}


/* ===== Firmenregeln ===== */
[data-tabpanel="s-rules"] .grid2{
  align-items:start;
}


/* ===== Hilfe Tooltips V3 ===== */
.helpTip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  font-size:10px;
  font-weight:400;
  margin-left:5px;
  cursor:pointer;
  border:1px solid rgba(155,176,214,0.45);
  background:rgba(255,255,255,0.06);
  color:var(--txt);
  vertical-align:middle;
  line-height:1;
}
.helpTip:hover,
.helpTip:focus-visible{
  background:rgba(90,163,255,0.24);
  outline:none;
  box-shadow:0 0 0 3px rgba(90,163,255,0.14);
}
.helpBox{
  position:fixed;
  max-width:280px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--txt);
  font-size:12px;
  line-height:1.45;
  z-index:9999;
  pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.rulePreviewBox{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(155,176,214,0.18);
  background:rgba(255,255,255,0.02);
}
:root[data-theme="light"] .rulePreviewBox{
  background:rgba(0,0,0,0.02);
}
.rulePreviewTitle{
  font-size:12px;
  color:var(--mut);
  margin-bottom:6px;
}
.rulePreviewText{
  font-weight:700;
  line-height:1.5;
}


.unitToolBox{
  border:1px solid rgba(155,176,214,0.18);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,0.02);
}
:root[data-theme="light"] .unitToolBox{background:rgba(0,0,0,0.02)}
.unitToolGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.unitOverlayList .rowItem{
  padding:8px 10px;
}
@media (max-width: 900px){
  .unitToolGrid{grid-template-columns:1fr;}
}