/* ============================================================
   MOSES ERP – erp.css (konsolidiert)
   Ziel:
   - Doppelte Blöcke entfernt
   - EIN gemeinsames :root (Farben wie „oben“ beibehalten)
   - Help-Card Farben: exakt wie im oberen (rgba(13,110,253,...))
   ============================================================ */

/* ============================================================
   GLOBAL
   ============================================================ */

.erp-body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#f3f5f9;
}

/* ============================================================
   BUTTON STANDARD
   ============================================================ */

.erp-body .btn{
  --bs-btn-padding-y:.25rem;
  --bs-btn-padding-x:.6rem;
  --bs-btn-font-size:.875rem;
  --bs-btn-border-radius:.375rem;
  line-height:1.2;
}

.erp-body .btn-sm{
  --bs-btn-padding-y:.25rem;
  --bs-btn-padding-x:.6rem;
  --bs-btn-font-size:.875rem;
}

.erp-body .btn-lg{
  --bs-btn-padding-y:.5rem;
  --bs-btn-padding-x:1rem;
  --bs-btn-font-size:1rem;
}

/* ============================================================
   FARBEN / VARS (EINMALIG)
   ============================================================ */

:root{
  /* Feiertag (Gelb) */
  --moses-holiday-bg: rgba(255, 193, 7, 0.12);
  --moses-holiday-bg-strong: rgba(255, 193, 7, 0.18);
  --moses-holiday-border: rgba(255, 193, 7, 0.45);

  /* Betriebsurlaub (Blau) */
  --moses-vacation-bg: rgba(13, 110, 253, 0.10);
  --moses-vacation-bg-strong: rgba(13, 110, 253, 0.16);
  --moses-vacation-border: rgba(13, 110, 253, 0.45);

  --moses-day-outline: rgba(0, 0, 0, 0.06);

  /* Slot-UX (Schichtplan) */
  --moses-slot-bg-1: rgba(0, 0, 0, 0.018);
  --moses-slot-bg-2: rgba(0, 0, 0, 0.032);
  --moses-slot-border: rgba(0, 0, 0, 0.08);
  --moses-slot-hover: rgba(13, 110, 253, 0.06);

  /* Help-Card Farben: ✅ exakt wie „oben“ */
  --moses-help-bg: rgba(13, 110, 253, 0.04);
  --moses-help-border: rgba(13, 110, 253, 0.18);
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.erp-sidebar{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:260px;
  background:#111827;
  color:#e5e7eb;
  padding:1rem;
  display:flex;
  flex-direction:column;
}

.erp-sidebar-header{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.5rem;
}

.erp-logo{ height:32px; }

.erp-product-name{
  font-size:.9rem;
  font-weight:600;
}

.erp-nav{
  flex:1;
  overflow-y:auto;
}

.erp-nav-section-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6b7280;
  margin:1rem 0 .25rem;
}

.erp-nav-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .6rem;
  border-radius:.5rem;
  font-size:.9rem;
  color:#e5e7eb;
  text-decoration:none;
}

.erp-nav-item:hover{ background:#1f2937; }

.erp-nav-item.active{
  background:#2563eb;
  color:#f9fafb;
}

/* Subnav */
.erp-nav-item-sub{
  padding-left:2.25rem;
  opacity:.95;
  font-size:.95em;
}

.erp-sidebar-footer{
  margin-top:1.5rem;
  font-size:.8rem;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.erp-main{
  margin-left:260px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.erp-topbar{
  padding:1rem 1.5rem;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.erp-page-title{
  margin:.1rem 0 0;
  font-size:1.25rem;
  font-weight:600;
}

.erp-content{ padding:1.5rem; }

/* ============================================================
   BADGES – SCHICHTEN & BEDIENER
   ============================================================ */

.badge.moses-schicht-badge{
  background-color:var(--schicht-bg,#6c757d)!important;
  color:var(--schicht-fg,#fff)!important;
  font-weight:500;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
}

.badge.moses-badge-color{
  background-color:var(--badge-bg,#6c757d)!important;
  color:var(--badge-fg,#fff)!important;
  border:1px solid rgba(0,0,0,.1);
  display:inline-flex;
  align-items:center;
}

/* ============================================================
   SCHICHTPLAN – TAGE (Heute / Wochenende)
   ============================================================ */

.moses-day-today{
  background-color:rgba(13,110,253,.08);
  box-shadow:inset 0 0 0 1px rgba(13,110,253,.35);
}

th.moses-day-today{
  background-color:rgba(13,110,253,.14);
  font-weight:600;
}

.moses-day-weekend{ background-color:rgba(0,0,0,.03); }

/* ============================================================
   SCHICHTPLAN – FEIERTAGE & BETRIEBSURLAUB (SCHRAFFIERT)
   ============================================================ */

.moses-day-holiday{
  background-image:repeating-linear-gradient(
    45deg,
    var(--moses-holiday-bg),
    var(--moses-holiday-bg) 10px,
    transparent 10px,
    transparent 20px
  );
  box-shadow:inset 0 0 0 1px var(--moses-day-outline);
}

th.moses-day-holiday{
  background-image:repeating-linear-gradient(
    45deg,
    var(--moses-holiday-bg-strong),
    var(--moses-holiday-bg-strong) 10px,
    transparent 10px,
    transparent 20px
  );
  box-shadow:inset 0 -2px 0 0 var(--moses-holiday-border);
  font-weight:600;
}

.moses-day-company-vacation{
  background-image:repeating-linear-gradient(
    -45deg,
    var(--moses-vacation-bg),
    var(--moses-vacation-bg) 10px,
    transparent 10px,
    transparent 20px
  );
  box-shadow:inset 0 0 0 1px var(--moses-day-outline);
}

th.moses-day-company-vacation{
  background-image:repeating-linear-gradient(
    -45deg,
    var(--moses-vacation-bg-strong),
    var(--moses-vacation-bg-strong) 10px,
    transparent 10px,
    transparent 20px
  );
  box-shadow:inset 0 -2px 0 0 var(--moses-vacation-border);
  font-weight:600;
}

.moses-day-holiday.moses-day-company-vacation{
  background-image:
    repeating-linear-gradient(
      45deg,
      var(--moses-holiday-bg),
      var(--moses-holiday-bg) 10px,
      transparent 10px,
      transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      var(--moses-vacation-bg),
      var(--moses-vacation-bg) 10px,
      transparent 10px,
      transparent 20px
    );
}

th.moses-day-holiday.moses-day-company-vacation{
  background-image:
    repeating-linear-gradient(
      45deg,
      var(--moses-holiday-bg-strong),
      var(--moses-holiday-bg-strong) 10px,
      transparent 10px,
      transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      var(--moses-vacation-bg-strong),
      var(--moses-vacation-bg-strong) 10px,
      transparent 10px,
      transparent 20px
    );
  box-shadow:inset 0 -2px 0 0 rgba(0,0,0,.15);
}

.moses-day-today.moses-day-holiday,
.moses-day-today.moses-day-company-vacation{
  outline:2px solid rgba(13,110,253,.35);
  outline-offset:-2px;
}

/* ============================================================
   TABLE BUTTONS (KONSISTENT)
   ============================================================ */

.table .btn,
.table form .btn{
  padding:.15rem .45rem;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  white-space:nowrap;
}

.table form.d-inline{
  margin:0;
  display:inline-flex;
}

/* ============================================================
   INFO ICON
   ============================================================ */

.moses-info-icon{
  cursor:help;
  opacity:.65;
}

.moses-info-icon:hover,
.moses-info-icon:focus{ opacity:1; }

/* ============================================================
   DASHBOARD – KPI GRID
   ============================================================ */

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.25rem;
  position:relative;
  z-index:2;
}

@media (max-width:1200px){
  .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:576px){
  .kpi-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   KPI CARDS – V2
   ============================================================ */

.kpi-card{
  position:relative;
  border-radius:.75rem;
  padding:1.05rem 1.2rem;
  background:linear-gradient(180deg,#2f3b4d 0%,#1f2936 100%);
  color:#f8fafc;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 .5rem 1.25rem rgba(0,0,0,.14);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}

.kpi-card:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 .75rem 1.75rem rgba(0,0,0,.2);
}

.kpi-linkwrap{
  position:relative;
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}

.kpi-linkwrap:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
}

.kpi-linkwrap:focus-within{
  outline:2px solid rgba(13,110,253,.35);
  outline-offset:2px;
}

.kpi-linkwrap .stretched-link{
  position:absolute;
  inset:0;
  z-index:1;
}

.kpi-linkwrap > *:not(.stretched-link){
  position:relative;
  z-index:2;
}

.kpi-blue{ border-left:.35rem solid #0d6efd; }
.kpi-purple{ border-left:.35rem solid #6f42c1; }
.kpi-green{ border-left:.35rem solid #198754; }
.kpi-amber{ border-left:.35rem solid #ffc107; }

.kpi-label{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(248,250,252,.88);
}

.kpi-value{
  font-size:2rem;
  font-weight:800;
  line-height:1.1;
  margin:.35rem 0 .5rem;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

.kpi-sub,
.kpi-footer{
  font-size:.87rem;
  color:rgba(248,250,252,.78);
}

.kpi-footer-value{
  font-weight:700;
  color:#fff;
}

.kpi-mini-link{
  position:relative;
  z-index:3;
  margin-left:.35rem;
  color:rgba(248,250,252,.9);
  text-decoration:underline;
  text-underline-offset:2px;
}

.kpi-mini-link:hover{ color:#fff; }

/* ============================================================
   DASHBOARD – SECTIONS / TABLE HOVER
   ============================================================ */

.dash-section-card{ border-radius:.75rem; }

.dash-section-card .card-header{
  background:#fff;
  padding:.6rem .9rem;
}

.dash-orders-table tbody tr:hover{
  background:rgba(13,110,253,.04);
}

/* ============================================================
   PILLS
   ============================================================ */

.time-pill{
  display:inline-block;
  padding:.15rem .45rem;
  border-radius:999px;
  font-size:.75rem;
  background:rgba(0,0,0,.08);
  color:#111827;
  margin-right:.5rem;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  padding:.2rem .55rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  line-height:1;
  border:1px solid rgba(0,0,0,.08);
}

.status-ok{ background:rgba(25,135,84,.15); color:#0f5132; }
.status-warning{ background:rgba(255,193,7,.25); color:#664d03; }
.status-error{ background:rgba(220,53,69,.18); color:#842029; }
.status-info{ background:rgba(13,202,240,.25); color:#055160; }

/* ============================================================
   PRE / SNAPSHOT SCROLL
   ============================================================ */

.erp-pre-scroll{
  background:var(--bs-light);
  border-radius:.5rem;
  padding:1rem;
  max-height:520px;
  overflow:auto;
}

/* ============================================================
   FILTER BAR (EINE ZEILE)
   ============================================================ */

.moses-filterbar-row{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:1rem;
  align-items:flex-end;
}

.moses-filterbar-field{ min-width:0; }
.moses-filterbar-search{ flex:1 1 520px; }
.moses-filterbar-status{ flex:0 0 260px; }
.moses-filterbar-perpage{ flex:0 0 160px; }
.moses-filterbar-btn{ flex:0 0 120px; }

.moses-filterbar-hint{
  white-space:nowrap;
  max-width:360px;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:992px){
  .moses-filterbar-row{ flex-wrap:wrap!important; }
  .moses-filterbar-hint{ white-space:normal; max-width:none; }
}

.moses-w-220{ max-width:220px; }

/* Filterbar widths (kein Inline-Style) */
.moses-td-minw-140{ min-width:140px; }
.moses-td-minw-180{ min-width:180px; }
.moses-td-minw-220{ min-width:220px; }
.moses-td-minw-260{ min-width:260px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:767.98px){
  .erp-sidebar{ width:220px; }
  .erp-main{ margin-left:220px; }
  .erp-page-title{ font-size:1.1rem; }
  .erp-content{ padding:1rem; }
}

/* ============================================================
   SCHICHTPLAN – UX: Slots + Aktionen
   ============================================================ */

.moses-slot{
  border:1px solid var(--moses-slot-border);
  border-radius:.5rem;
  background:var(--moses-slot-bg-1);
  padding:.5rem .6rem;
  margin-bottom:.5rem;
}

.moses-slot:last-child{ margin-bottom:0; }

td .moses-slot:nth-of-type(even){
  background:var(--moses-slot-bg-2);
}

.moses-slot:hover,
.moses-slot:focus,
.moses-slot:focus-within{
  background:var(--moses-slot-hover);
}

.moses-cell-actions{
  margin-top:.35rem;
  display:flex;
  justify-content:flex-end;
  gap:.35rem;
  flex-wrap:wrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease-in-out;
}

td:hover .moses-cell-actions,
td:focus-within .moses-cell-actions{
  opacity:1;
  pointer-events:auto;
}

@media (hover:none){
  .moses-cell-actions{
    opacity:1;
    pointer-events:auto;
  }
}

/* Bediener einklappen */
.moses-people-more{
  display:none;
  margin-top:.25rem;
}

.moses-slot.is-people-open .moses-people-more{ display:block; }

.moses-people-toggle{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:.15rem;
  padding:0;
  border:0;
  background:transparent;
  color:var(--bs-secondary-color,#6c757d);
  font-size:.8rem;
  text-decoration:underline;
  text-underline-offset:2px;
  opacity:.85;
}

.moses-people-toggle:hover,
.moses-people-toggle:focus{
  opacity:1;
  color:var(--bs-body-color);
}

.moses-slot.is-people-open .moses-people-toggle{ opacity:.7; }

/* ============================================================
   HELP CARD (Farben: ✅ wie oben übernehmen)
   ============================================================ */

.moses-help-card,
.help-card{
  background:var(--moses-help-bg);
  border:1px solid var(--moses-help-border);
}

/* wenn du die linke Akzentlinie willst, nutze nur .moses-help-card */
.moses-help-card{
  border-left:4px solid var(--moses-help-border);
  border-radius:12px;
  padding:.75rem;
}

.moses-help-card .accordion-item{ background:transparent; }
.moses-help-card .accordion-button{ background:transparent; }

/* ============================================================
   LOGIN HINT
   ============================================================ */

.erp-hint-login{
  color:#94a3b8;
  font-style:italic;
  line-height:1.4;
}

/* Material kleine optische Ordnung */
.moses-material-kpi .display-6{ line-height:1.1; }

/* ============================================================
   SILO – CARDS (Ampel)
   ============================================================ */

.erp-silo-card{ border-left:6px solid rgba(0,0,0,.08); }
.erp-silo-ok{ border-left-color:rgba(25,135,84,.35); }
.erp-silo-kritisch{ border-left-color:rgba(255,193,7,.55); }
.erp-silo-leer{ border-left-color:rgba(220,53,69,.35); }

/* ============================================================
   SILO FORM UI
   ============================================================ */

.silo-geo-card{
  display:block;
  border:1px solid rgba(0,0,0,.12);
  border-radius:.75rem;
  padding:.75rem;
  background:#fff;
  cursor:pointer;
  user-select:none;
}

.silo-geo-card:hover{ border-color:rgba(0,0,0,.22); }
.silo-geo-card input{ margin-right:.5rem; }

.silo-geo-card__body{ display:inline-block; vertical-align:top; }

.silo-geo-card__title{
  display:block;
  font-weight:700;
  margin-bottom:.15rem;
}

.silo-geo-card__sub{
  display:block;
  color:rgba(0,0,0,.6);
  font-size:.875rem;
}

.silo-sketch-wrap{
  border:1px dashed rgba(0,0,0,.18);
  border-radius:.75rem;
  padding:.75rem;
  background:rgba(0,0,0,.02);
}

.silo-sketch{
  width:100%;
  height:auto;
  display:block;
}

.sketch-shape{
  fill:rgba(13,110,253,.06);
  stroke:rgba(0,0,0,.65);
  stroke-width:2;
}

.sketch-dim{
  stroke:rgba(0,0,0,.55);
  stroke-width:1.5;
}

.sketch-label{
  font-size:14px;
  fill:rgba(0,0,0,.80);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* KPI Boxes */
.kpi-box{
  border:1px solid rgba(0,0,0,.12);
  border-radius:.75rem;
  padding:.75rem;
  background:#fff;
}

.kpi-box--strong{ border-color:rgba(0,0,0,.22); }

/* (Silo-KPI Texte – separat von Dashboard-KPI) */
.kpi-box .kpi-label{
  font-size:.85rem;
  color:rgba(0,0,0,.60);
  letter-spacing:normal;
  text-transform:none;
}

.kpi-box .kpi-value{
  font-size:1.15rem;
  font-weight:800;
  margin-top:.15rem;
  text-shadow:none;
}

.kpi-box .kpi-sub{
  font-size:.85rem;
  color:rgba(0,0,0,.55);
}


/* ============================================================
   Silo – Sketch (Blender-like)
   Zweck: klare Kanten + dezente Flächenhelligkeit (ohne inline)
   ============================================================ */

.silo-sketch .sketch-edge {
  fill: none;
  stroke: rgba(0,0,0,.65);
  stroke-width: 2;
}

.silo-sketch .sketch-face {
  stroke: rgba(0,0,0,.65);
  stroke-width: 2;
}

.silo-sketch .sketch-face--top   { fill: rgba(0,0,0,.08); }
.silo-sketch .sketch-face--left  { fill: rgba(0,0,0,.12); }
.silo-sketch .sketch-face--right { fill: rgba(0,0,0,.22); }

/* Optional: Dimension lines etwas leichter */
.silo-sketch .sketch-dim {
  stroke: rgba(0,0,0,.45);
  stroke-width: 1.5;
}
.silo-sketch .sketch-label {
  font-size: 16px;
  fill: rgba(0,0,0,.85);
}