/* ops-Lagerverwaltung.css – cleaned (nur Lagerverwaltung-spezifisch) */

/* Scope: alles innerhalb der Lagerverwaltung */
#lagerverwaltung {}

/* Header: links Titel/KPIs, rechts Aktionen */
#lagerverwaltung .card-header-lager{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}
#lagerverwaltung .card-header-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
#lagerverwaltung .card-header-actions .btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
}

/* KPI-Pills */
#lagerverwaltung .inv-summary-kpi{
  margin-top:4px;
  margin-bottom:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#lagerverwaltung .inv-kpi-pill{
  min-width:150px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,253,0.25);
  display:flex;
  flex-direction:column;
  gap:2px;
}
#lagerverwaltung .inv-kpi-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#9ca3af;
}
#lagerverwaltung .inv-kpi-value{
  font-size:13px;
  font-weight:600;
  color:#e5e7eb;
}
#lagerverwaltung .inv-kpi-pill--warning{
  border-color:rgba(252,211,77,0.8);
  background:radial-gradient(circle at top left, rgba(252,211,77,0.25), rgba(15,23,42,0.95));
}
#lagerverwaltung .inv-kpi-pill--danger{
  border-color:rgba(248,113,113,0.9);
  background:radial-gradient(circle at top left, rgba(248,113,113,0.25), rgba(15,23,42,0.95));
}
#lagerverwaltung .inv-kpi-pill--value{
  border-color:rgba(52,211,153,0.85);
  background:radial-gradient(circle at top left, rgba(52,211,153,0.25), rgba(15,23,42,0.95));
}

/* Toolbar / Filter */
#lagerverwaltung .inv-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 16px;
  margin-top:10px;
}
#lagerverwaltung .inv-toolbar label,
#lagerverwaltung .inv-filter label,
#lagerverwaltung .inv-location-group-label,
#lagerverwaltung .inv-toolbar .tiny{
  color:#e5e7eb;
  opacity:0.9;
}

/* Select-Wrapper (eigener Pfeil) */
#lagerverwaltung .select-wrapper{
  position:relative;
  display:inline-block;
  min-width:160px;
}
#lagerverwaltung .select-wrapper::after{
  content:"▾";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:0.75rem;
  pointer-events:none;
  color:#e5e7eb;
}
#lagerverwaltung .select-wrapper select{
  width:100%;
  padding:8px 28px 8px 12px;
  min-height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(10,18,35,0.9);
  color:#e5e7eb;
  outline:none;
  cursor:pointer;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
#lagerverwaltung .select-wrapper select:focus{
  border-color:rgba(88,166,255,0.9);
  box-shadow:0 0 0 1px rgba(88,166,255,0.35);
}

/* Lagerplatz-Filterzeile */
#lagerverwaltung .inv-lager-location{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:4px;
  margin-bottom:10px;
}
#lagerverwaltung .inv-location-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:150px;
  flex:1 1 150px;
}
#lagerverwaltung .inv-location-field label{
  font-size:0.8rem;
  font-weight:500;
  opacity:0.85;
}
#lagerverwaltung .inv-location-field input[type="text"],
#lagerverwaltung .inv-location-field select{
  font-size:0.9rem;
  padding:8px 12px;
  min-height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(10,18,35,0.9);
  color:#e5e7eb;
  outline:none;
}
#lagerverwaltung .inv-location-field input[type="text"]:focus,
#lagerverwaltung .inv-location-field select:focus{
  border-color:rgba(88,166,255,0.9);
  box-shadow:0 0 0 1px rgba(88,166,255,0.35);
}

/* Tabelle-Container (ersetzt Inline-Style) */
#lagerverwaltung .table-wrap{
  height:650px;
  max-height:60vh;
  overflow:auto;
  border:1px solid rgba(148,163,184,0.4);
  border-radius:6px;
  padding:2px;
  background:rgba(15,23,42,0.85);
}

/* Spalten-Dialog Liste (falls genutzt) */
#lagerverwaltung .cols-list{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:6px;
  font-size:12px;
}

/* Detail-/Druckansicht */
#artikelDetailView{
  padding:0;
}
.artikel-detail-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:10px;
}
.detail-header-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.detail-logo{
  width:40px;
  height:40px;
  object-fit:contain;
}
.detail-header-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.detail-company{
  font-weight:700;
}
.detail-title{
  font-size:14px;
  opacity:0.9;
}
.detail-header-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  opacity:0.9;
}
.meta-label{
  opacity:0.75;
  margin-right:6px;
}
.detail-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.detail-table th,
.detail-table td{
  text-align:left;
  padding:6px 8px;
  border-bottom:1px solid rgba(148,163,184,0.25);
  vertical-align:top;
}
.detail-table th{
  color:rgba(229,231,235,0.85);
  width:240px;
}

@media (max-width: 900px){
  #lagerverwaltung .card-header-lager{ flex-direction:column; }
  #lagerverwaltung .card-header-actions{ justify-content:flex-start; }
  #lagerverwaltung .table-wrap{ height:auto; max-height:none; }
  .artikel-detail-header{ flex-direction:column; }
  .detail-table th{ width:auto; }
}
.table-wrap{
  width: 100%;
  height: 650px;
  max-height: 60vh;
  overflow: auto;
}


/* =========================================================
   UI polish v2 – modern, aligned, subtle glow (scoped)
   ========================================================= */
#lagerverwaltung{
  --lv-bg: rgba(2, 6, 23, 0.55);
  --lv-panel: rgba(15, 23, 42, 0.78);
  --lv-panel-2: rgba(15, 23, 42, 0.62);
  --lv-border: rgba(148,163,184,0.30);
  --lv-border-strong: rgba(148,163,184,0.45);
  --lv-text: rgba(226,232,240,0.92);
  --lv-muted: rgba(148,163,184,0.85);
  --lv-muted2: rgba(148,163,184,0.70);
  --lv-glow: 0 0 0 1px rgba(56,189,248,0.18), 0 10px 30px rgba(0,0,0,0.45);
}

/* Card overall */
#lagerverwaltung.card{
  background: linear-gradient(180deg, var(--lv-panel), var(--lv-panel-2));
  border: 1px solid var(--lv-border);
  box-shadow: var(--lv-glow);
  overflow: hidden;
}

/* Header refinements */
#lagerverwaltung .card-header{
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--lv-border);
  background:
    radial-gradient(900px 300px at 15% 0%, rgba(56,189,248,0.14), transparent 60%),
    radial-gradient(700px 260px at 95% 10%, rgba(168,85,247,0.12), transparent 62%);
}
#lagerverwaltung .card-header h1{
  letter-spacing: -0.02em;
}
#lagerverwaltung .card-header p.tiny{
  color: var(--lv-muted);
  max-width: 72ch;
}

/* Buttons inside header: align & premium hover */
#lagerverwaltung .card-header .btn{
  border-radius: 10px;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
}
#lagerverwaltung .card-header .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(148,163,184,0.22), 0 10px 18px rgba(0,0,0,0.25);
}
#lagerverwaltung .card-header .btn:active{
  transform: translateY(0px);
}

/* Toolbar layout */
#lagerverwaltung .inv-toolbar{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 14px 18px 10px;
  margin: 0;
  align-items: end;
}
#lagerverwaltung .inv-lager-location{
  display: grid;
  grid-template-columns: 110px 1fr 1fr 1.2fr 1fr;
  gap: 12px;
  padding: 6px 18px 10px;
  align-items: end;
}
#lagerverwaltung .inv-location-group-label{
  align-self: center;
  font-size: 11px;
  color: var(--lv-muted2);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: 6px;
}
#lagerverwaltung .inv-filter label,
#lagerverwaltung .inv-location-field label{
  display:block;
  font-size: 11px;
  color: var(--lv-muted2);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 6px 2px;
}

/* Inputs/selects: glass + focus glow */
#lagerverwaltung input[type="text"],
#lagerverwaltung input[type="number"],
#lagerverwaltung input[type="date"],
#lagerverwaltung select,
#lagerverwaltung textarea{
  width: 100%;
  background: rgba(2,6,23,0.40);
  color: var(--lv-text);
  border: 1px solid var(--lv-border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#lagerverwaltung textarea{ min-height: 42px; }
#lagerverwaltung select{
  padding-right: 34px;
  appearance: none;
}
#lagerverwaltung .select-wrapper{
  position: relative;
}
#lagerverwaltung .select-wrapper::after{
  content: "▾";
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 12px;
  color: rgba(148,163,184,0.9);
  pointer-events: none;
}
#lagerverwaltung input::placeholder{
  color: rgba(148,163,184,0.65);
}
#lagerverwaltung input:focus,
#lagerverwaltung select:focus,
#lagerverwaltung textarea:focus{
  border-color: rgba(56,189,248,0.55);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.12), inset 0 1px 0 rgba(255,255,255,0.03);
  background: rgba(2,6,23,0.52);
}

/* Summary row */
#lagerverwaltung .inv-summary{
  margin: 6px 18px 12px;
  padding: 10px 12px;
  border: 1px solid var(--lv-border);
  border-radius: 12px;
  background: rgba(2,6,23,0.35);
  display:flex;
  flex-wrap:wrap;
  gap: 12px 18px;
}
#lagerverwaltung .inv-summary span{
  color: var(--lv-muted);
}
#lagerverwaltung .inv-summary span span{
  color: var(--lv-text);
  font-weight: 650;
}

/* Table wrap */
#lagerverwaltung .table-wrap{
  margin: 0 18px 18px;
  background: rgba(2,6,23,0.30);
  border: 1px solid var(--lv-border);
  border-radius: 14px;
  overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
}

/* Table styling (sticky header, zebra, hover) */
#lagerverwaltung table.data-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  color: var(--lv-text);
}
#lagerverwaltung table.data-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(15,23,42,0.82));
  border-bottom: 1px solid var(--lv-border-strong);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.88);
  padding: 10px 10px;
  white-space: nowrap;
}
#lagerverwaltung table.data-table tbody td{
  border-bottom: 1px solid rgba(148,163,184,0.14);
  padding: 10px 10px;
  vertical-align: middle;
  white-space: nowrap;
}
#lagerverwaltung table.data-table tbody tr:nth-child(odd){
  background: rgba(2,6,23,0.22);
}
#lagerverwaltung table.data-table tbody tr:hover{
  background: rgba(56,189,248,0.08);
}
#lagerverwaltung table.data-table a{
  color: inherit;
}

/* Checkbox column align */
#lagerverwaltung table.data-table th:first-child,
#lagerverwaltung table.data-table td:first-child{
  text-align: center;
  width: 32px;
}

/* Scrollbar (WebKit) */
#lagerverwaltung .table-wrap::-webkit-scrollbar{ height: 10px; width: 10px; }
#lagerverwaltung .table-wrap::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.28);
  border-radius: 999px;
  border: 2px solid rgba(2,6,23,0.40);
}
#lagerverwaltung .table-wrap::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,0.40);
}
#lagerverwaltung .table-wrap::-webkit-scrollbar-corner{
  background: rgba(2,6,23,0.30);
}

/* Responsive improvements */
@media (max-width: 1100px){
  #lagerverwaltung .inv-toolbar{
    grid-template-columns: 1fr 1fr;
  }
  #lagerverwaltung .inv-lager-location{
    grid-template-columns: 110px 1fr 1fr;
  }
}
@media (max-width: 700px){
  #lagerverwaltung .inv-toolbar{
    grid-template-columns: 1fr;
  }
  #lagerverwaltung .inv-lager-location{
    grid-template-columns: 1fr;
  }
  #lagerverwaltung .inv-location-group-label{
    padding-bottom: 0;
  }
}
/* KPI Bereich (ERP-Kacheln) */
.inv-kpi{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin: 10px 0 12px;
}

.kpi-card{
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.62));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  position: relative;
  overflow:hidden;
}

.kpi-card::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.18), transparent 55%);
  pointer-events:none;
}

.kpi-top{
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(226,232,240,.85);
  font-size: 12px;
  letter-spacing:.02em;
}

.kpi-icon{
  width:26px;height:26px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border-radius: 10px;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.kpi-label{ font-weight:600; }

.kpi-value{
  margin-top:8px;
  font-size: 22px;
  font-weight: 750;
  color: #e2e8f0;
}

.kpi-sub{
  margin-top:4px;
  font-size: 12px;
  color: rgba(148,163,184,.9);
}

.kpi-warn .kpi-icon{ background: rgba(250,204,21,.14); border-color: rgba(250,204,21,.25); }
.kpi-muted .kpi-icon{ background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.20); }
.kpi-money .kpi-icon{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); }

.kpi-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:999px;
  background: rgba(250,204,21,.9);
  box-shadow: 0 0 12px rgba(250,204,21,.45);
  margin-right:6px;
}

/* Responsive */
@media (max-width: 1100px){
  .inv-kpi{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .inv-kpi{ grid-template-columns: 1fr; }
}
/* =========================================================
   ERP Modern v3 – strict alignment, consistent typography
   Paste at END of ops-Lagerverwaltung.css
   ========================================================= */

#lagerverwaltung{
  /* Design Tokens */
  --erp-bg: rgba(2, 6, 23, .55);
  --erp-panel: rgba(15, 23, 42, .78);
  --erp-panel-2: rgba(15, 23, 42, .62);
  --erp-border: rgba(148,163,184,.28);
  --erp-border-2: rgba(148,163,184,.45);
  --erp-text: rgba(226,232,240,.92);
  --erp-muted: rgba(148,163,184,.82);
  --erp-accent: rgba(56,189,248,.80);
  --erp-accent-soft: rgba(56,189,248,.14);

  --erp-radius: 14px;
  --erp-radius-sm: 10px;

  --erp-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --erp-font-size: 12px;
  --erp-font-size-sm: 11px;
  --erp-font-size-md: 13px;

  --erp-h: 40px;       /* gleiche Höhe für Inputs/Selects/Buttons */
  --erp-pad-x: 12px;
  --erp-gap: 12px;

  color: var(--erp-text);
  font-family: var(--erp-font);
  font-size: var(--erp-font-size);
  line-height: 1.35;
}

/* Card */
#lagerverwaltung.card{
  background: linear-gradient(180deg, var(--erp-panel), var(--erp-panel-2));
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  box-shadow: 0 0 0 1px rgba(56,189,248,.10), 0 16px 44px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Header: clean ERP bar */
#lagerverwaltung .card-header{
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--erp-border);
  background:
    radial-gradient(900px 280px at 15% 0%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(700px 260px at 92% 10%, rgba(168,85,247,.10), transparent 62%);
}
#lagerverwaltung .card-header h1{
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
#lagerverwaltung .card-header p.tiny{
  margin: 6px 0 0;
  color: var(--erp-muted);
  font-size: var(--erp-font-size-sm);
}

/* KPI row: clean + aligned */
#lagerverwaltung .inv-summary-kpi{
  margin: 10px 18px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--erp-gap);
}
#lagerverwaltung .inv-kpi-pill{
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--erp-radius);
  background: rgba(2,6,23,.36);
  border: 1px solid var(--erp-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
#lagerverwaltung .inv-kpi-label{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--erp-muted);
  margin: 0 0 6px;
}
#lagerverwaltung .inv-kpi-value{
  font-size: 18px;
  font-weight: 800;
  color: var(--erp-text);
}
#lagerverwaltung .inv-kpi-pill--warning{ border-color: rgba(250,204,21,.35); }
#lagerverwaltung .inv-kpi-pill--danger{  border-color: rgba(248,113,113,.35); }
#lagerverwaltung .inv-kpi-pill--value{   border-color: rgba(34,197,94,.30); }

/* Toolbar: strict grid alignment (alles in Linie) */
#lagerverwaltung .inv-toolbar{
  margin: 12px 18px 8px;
  padding: 0;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--erp-gap);
  align-items: end;
}

/* Lager/Ort Zeile: ebenfalls grid */
#lagerverwaltung .inv-lager-location{
  margin: 0 18px 12px;
  padding: 0;
  display: grid;
  grid-template-columns: 120px 1fr 1fr 1.2fr 1fr;
  gap: var(--erp-gap);
  align-items: end;
}
#lagerverwaltung .inv-location-group-label{
  align-self: end;
  padding-bottom: 8px;
  font-size: 10px;
  color: var(--erp-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Labels: einheitlich */
#lagerverwaltung .inv-filter label,
#lagerverwaltung .inv-location-field label,
#lagerverwaltung .inv-toolbar label{
  display: block;
  margin: 0 0 6px 2px;
  font-size: 10px;
  color: var(--erp-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Inputs/Selects/Textareas: gleiche Höhe + gleiche Optik */
#lagerverwaltung input[type="text"],
#lagerverwaltung input[type="number"],
#lagerverwaltung input[type="date"],
#lagerverwaltung select,
#lagerverwaltung textarea{
  width: 100%;
  min-height: var(--erp-h);
  height: var(--erp-h);
  box-sizing: border-box;
  background: rgba(2,6,23,.38);
  color: var(--erp-text);
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-sm);
  padding: 0 var(--erp-pad-x);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  font-size: var(--erp-font-size-md);
}
#lagerverwaltung textarea{
  height: auto;
  min-height: calc(var(--erp-h) + 12px);
  padding: 10px var(--erp-pad-x);
}
#lagerverwaltung input::placeholder{ color: rgba(148,163,184,.60); }
#lagerverwaltung input:focus,
#lagerverwaltung select:focus,
#lagerverwaltung textarea:focus{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 4px var(--erp-accent-soft), inset 0 1px 0 rgba(255,255,255,.03);
  background: rgba(2,6,23,.52);
}

/* Select arrow: sauber, immer gleich positioniert */
#lagerverwaltung .select-wrapper{
  position: relative;
  width: 100%;
  min-width: 0;
}
#lagerverwaltung .select-wrapper::after{
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: rgba(148,163,184,.95);
  pointer-events: none;
}
#lagerverwaltung .select-wrapper select{
  padding-right: 34px !important;
  appearance: none;
}

/* Buttons (nur in Lagerverwaltung) */
#lagerverwaltung .btn{
  min-height: var(--erp-h);
  height: var(--erp-h);
  padding: 0 12px;
  border-radius: var(--erp-radius-sm);
  border: 1px solid var(--erp-border);
  background: rgba(2,6,23,.40);
  color: var(--erp-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--erp-font-size-md);
  line-height: 1;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
#lagerverwaltung .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 0 0 1px rgba(56,189,248,.12), 0 14px 22px rgba(0,0,0,.26);
}
#lagerverwaltung .btn:active{ transform: translateY(0); }

/* Table wrapper */
#lagerverwaltung .table-wrap{
  margin: 0 18px 18px;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  background: rgba(2,6,23,.28);
  overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
}

/* Table: strict ERP grid */
#lagerverwaltung table.data-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--erp-font-size);
  color: var(--erp-text);
}
#lagerverwaltung table.data-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.84));
  border-bottom: 1px solid var(--erp-border-2);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(226,232,240,.88);
  padding: 10px 10px;
  white-space: nowrap;
}
#lagerverwaltung table.data-table tbody td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(148,163,184,.14);
  white-space: nowrap;
  vertical-align: middle;
}
#lagerverwaltung table.data-table tbody tr:nth-child(odd){ background: rgba(2,6,23,.20); }
#lagerverwaltung table.data-table tbody tr:hover{ background: rgba(56,189,248,.08); }

/* Checkbox column consistent */
#lagerverwaltung table.data-table th:first-child,
#lagerverwaltung table.data-table td:first-child{
  width: 34px;
  text-align: center;
}

/* Aktionen-Select in Tabelle: gleiche Höhe wie andere Elemente */
#lagerverwaltung .inv-action-select-wrapper select,
#lagerverwaltung select.inv-action-select{
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
  font-size: 12px;
  padding: 0 32px 0 10px;
}

/* Summary row (falls du sie nutzt) */
#lagerverwaltung .inv-summary{
  margin: 10px 18px 12px;
  padding: 10px 12px;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  background: rgba(2,6,23,.32);
}
#lagerverwaltung .inv-summary span{ color: var(--erp-muted); }
#lagerverwaltung .inv-summary span span{
  color: var(--erp-text);
  font-weight: 750;
}

/* Responsive */
@media (max-width: 1100px){
  #lagerverwaltung .inv-summary-kpi{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lagerverwaltung .inv-toolbar{ grid-template-columns: 1fr 1fr; }
  #lagerverwaltung .inv-lager-location{ grid-template-columns: 120px 1fr 1fr; }
}
@media (max-width: 700px){
  #lagerverwaltung .inv-summary-kpi{ grid-template-columns: 1fr; }
  #lagerverwaltung .inv-toolbar{ grid-template-columns: 1fr; }
  #lagerverwaltung .inv-lager-location{ grid-template-columns: 1fr; }
  #lagerverwaltung .inv-location-group-label{ padding-bottom: 0; }
}
/* =========================================
   ERP Actions Menu – unified look
   ========================================= */

/* Select selbst */
#lagerverwaltung select.inv-action-select{
  background: linear-gradient(
    180deg,
    rgba(30,58,138,.95),
    rgba(15,23,42,.95)
  );
  color: #e5e7eb;
  border: 1px solid rgba(59,130,246,.6);
  border-radius: 10px;
  height: 34px;
  font-size: 12px;
  font-weight: 600;
  padding: 0 34px 0 12px;
}

/* Dropdown-Liste */
#lagerverwaltung select.inv-action-select option{
  background: rgba(15,23,42,0.98);
  color: #e5e7eb;
  font-weight: 500;
}

/* Hover / Fokus */
#lagerverwaltung select.inv-action-select:hover,
#lagerverwaltung select.inv-action-select:focus{
  border-color: rgba(59,130,246,.9);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}
/* =========================================================
   FIX: Detailansicht (Details) + Aktionen-Select (Dropdown)
   - Dark Background überall
   - gleiche Schrift / Farben / Linien
   ========================================================= */

/* ===== Aktionen (Select) – weniger blass, mehr ERP-like ===== */
#lagerverwaltung .inv-action-select-wrapper select.inv-action-select{
  background: rgba(2,6,23,0.55) !important;
  color: rgba(226,232,240,0.94) !important;
  border: 1px solid rgba(148,163,184,0.40) !important;
  border-radius: 12px !important;
  min-height: 38px !important;
  padding: 8px 34px 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
#lagerverwaltung .inv-action-select-wrapper select.inv-action-select:focus{
  border-color: rgba(56,189,248,0.65) !important;
  box-shadow: 0 0 0 4px rgba(56,189,248,0.14) !important;
}

/* Viele Browser übernehmen das für die Dropdown-Liste (Optionen) */
#lagerverwaltung .inv-action-select-wrapper select.inv-action-select option{
  background: #0b1220 !important;
  color: rgba(226,232,240,0.95) !important;
}

/* ===== Detailansicht ist NICHT im #lagerverwaltung Scope → extra darken ===== */
#artikelDetailView,
#artikelDetailView *{
  box-sizing: border-box;
  font-family: inherit;
}

/* Wenn Details in einem <dialog> liegen, hilft das zusätzlich */
dialog#artikelDetailView,
dialog#artikelDetailDialog{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Der eigentliche “Sheet/Panel”-Look */
#artikelDetailView{
  --lv-detail-bg: rgba(15,23,42,0.92);
  --lv-detail-bg2: rgba(2,6,23,0.78);
  --lv-detail-border: rgba(148,163,184,0.30);
  --lv-detail-text: rgba(226,232,240,0.92);
  --lv-detail-muted: rgba(148,163,184,0.82);

  background: linear-gradient(180deg, var(--lv-detail-bg), var(--lv-detail-bg2)) !important;
  color: var(--lv-detail-text) !important;
  border: 1px solid var(--lv-detail-border) !important;
  border-radius: 16px !important;

  /* macht es “nicht zu lang” und sauber zentriert */
  max-width: 860px;
  width: min(860px, 96vw);
  margin: 10px auto;
  padding: 14px 16px !important;

  box-shadow: 0 0 0 1px rgba(56,189,248,0.12), 0 18px 50px rgba(0,0,0,0.55);
}

/* Header oben in der Detailansicht */
#artikelDetailView .artikel-detail-header{
  margin: 0 0 10px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}
#artikelDetailView .detail-company,
#artikelDetailView .detail-title{
  color: var(--lv-detail-text) !important;
}
#artikelDetailView .detail-header-meta,
#artikelDetailView .meta-label{
  color: var(--lv-detail-muted) !important;
}

/* Tabelle in Details – gleiche Linien, kompakter, ERP-clean */
#artikelDetailView .detail-table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 12px !important;
  color: var(--lv-detail-text) !important;
}
#artikelDetailView .detail-table th,
#artikelDetailView .detail-table td{
  padding: 9px 10px !important;
  border-bottom: 1px solid rgba(148,163,184,0.18) !important;
  vertical-align: middle !important;
}
#artikelDetailView .detail-table th{
  width: 260px;
  color: rgba(148,163,184,0.86) !important;
}
/* =========================================================
   FIX: Detail-Dialog + Detail-View im gleichen Dark-ERP Look
   (weil #artikelDetailView / #invDetailDialog außerhalb #lagerverwaltung liegen)
   ========================================================= */

#invDetailDialog{
  /* eigenes Farbschema (gleiches Feeling wie Lagerverwaltung) */
  --lv-bg: rgba(2, 6, 23, 0.72);
  --lv-panel: rgba(15, 23, 42, 0.92);
  --lv-panel-2: rgba(15, 23, 42, 0.78);
  --lv-border: rgba(148,163,184,0.32);
  --lv-border-strong: rgba(148,163,184,0.48);
  --lv-text: rgba(226,232,240,0.94);
  --lv-muted: rgba(148,163,184,0.86);
  --lv-muted2: rgba(148,163,184,0.72);

  background: linear-gradient(180deg, var(--lv-panel), var(--lv-panel-2)) !important;
  color: var(--lv-text) !important;
  border: 1px solid var(--lv-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(56,189,248,0.16), 0 22px 60px rgba(0,0,0,0.55) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hintergrund hinter dem Dialog (Backdrop) */
#invDetailDialog::backdrop{
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(6px);
}

/* Inhalt der Detailansicht */
#artikelDetailView{
  background: radial-gradient(900px 320px at 12% 0%, rgba(56,189,248,0.14), transparent 60%),
              radial-gradient(700px 260px at 95% 10%, rgba(168,85,247,0.12), transparent 62%),
              linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.82)) !important;
  color: rgba(226,232,240,0.94) !important;
  padding: 18px 18px 14px !important;
}

/* Überschrift im Detail */
#artikelDetailView h2,
#artikelDetailView h1{
  color: rgba(226,232,240,0.96) !important;
  letter-spacing: -0.02em;
  margin-top: 0;
}

/* Kopfzeile im Detail (Logo/Meta) */
#artikelDetailView .artikel-detail-header{
  padding: 12px 12px 10px;
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: 14px;
  background: rgba(2,6,23,0.28);
  margin-bottom: 14px;
}

#artikelDetailView .detail-header-meta{
  color: rgba(148,163,184,0.92) !important;
}

/* Tabelle im Detail: klare Linien, gleiche Schrift, nichts „blass/weiß“ */
#artikelDetailView .detail-table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: rgba(2,6,23,0.20);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 14px;
  overflow: hidden;
}

#artikelDetailView .detail-table th,
#artikelDetailView .detail-table td{
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(148,163,184,0.16) !important;
  font-size: 12px;
  line-height: 1.25;
}

#artikelDetailView .detail-table tr:last-child th,
#artikelDetailView .detail-table tr:last-child td{
  border-bottom: none !important;
}

#artikelDetailView .detail-table th{
  width: 260px;
  color: rgba(148,163,184,0.86) !important;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  background: rgba(2,6,23,0.18);
}

#artikelDetailView .detail-table td{
  color: rgba(226,232,240,0.94) !important;
}

/* Buttons unten im Detail (Drucken/Schließen) */
#artikelDetailView .inv-detail-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 12px;
}

#artikelDetailView .inv-detail-actions .btn,
#artikelDetailView .inv-detail-actions button{
  border-radius: 10px;
}


/* =========================================================
   FIX: Dropdowns ("Alle") sollen nicht grau wirken
   (native Select-Menüs sind browser-/OS-abhängig, aber das hilft in Chrome/Edge/Firefox oft)
   ========================================================= */

#lagerverwaltung select{
  color-scheme: dark; /* wichtig: sagt dem Browser „Dark UI“ */
}

#lagerverwaltung select option,
#lagerverwaltung select optgroup{
  background: rgba(2,6,23,0.96);
  color: rgba(226,232,240,0.96);
}

/* Actions Select in der Tabelle: etwas kräftiger + gleiche Optik */
#lagerverwaltung .inv-action-select-wrapper select.inv-action-select{
  background: rgba(2,6,23,0.46);
  border-color: rgba(56,189,248,0.30);
}
#lagerverwaltung .inv-action-select-wrapper select.inv-action-select:focus{
  border-color: rgba(56,189,248,0.60);
}
/* FIX: Header-Actions immer klickbar (Overlay/Z-Index-Probleme) */
#lagerverwaltung .card-header,
#lagerverwaltung .card-header-actions{
  position: relative;
  z-index: 50;
}

#lagerverwaltung #invBanfBtn{
  position: relative;
  z-index: 60;
  pointer-events: auto;
}
#lagerverwaltung .inv-action-select-wrapper{
  position: relative;
  z-index: 10;
}
/* Header Selects (Rolle/Plan) – ERP Dark/Blue */
.app-header .header-select{
  background: linear-gradient(180deg, rgba(30,58,138,.95), rgba(15,23,42,.95));
  color: rgba(226,232,240,.95);
  border: 1px solid rgba(59,130,246,.55);
  border-radius: 12px;
  height: 34px;
  padding: 0 34px 0 12px;
  font-weight: 650;

  /* wichtig für "dark native UI" */
  color-scheme: dark;
}

/* Optionen (wirkt je nach OS/Browser unterschiedlich gut) */
.app-header .header-select option,
.app-header .header-select optgroup{
  background: rgba(15,23,42,.98);
  color: rgba(226,232,240,.95);
}
#invDeleteAllBtn { position: relative; z-index: 1; }
/* KPI Cards – kräftiger + Hover (safe, nur Optik) */
.kpi-card{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease;
  border: 1px solid rgba(255,255,255,.08);
}

.kpi-card:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* Artikel (neutral/blau) */
.kpi-card{
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(15,23,42,.15));
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.kpi-card:hover{
  box-shadow: 0 0 18px rgba(56,189,248,.18), inset 0 0 0 1px rgba(56,189,248,.14);
}

/* Unter Mindestbestand (gelb) */
.kpi-card.kpi-warn{
  background: linear-gradient(135deg, rgba(250,204,21,.16), rgba(15,23,42,.12));
}
.kpi-card.kpi-warn:hover{
  box-shadow: 0 0 18px rgba(250,204,21,.20), inset 0 0 0 1px rgba(250,204,21,.18);
}

/* Bestand = 0 (rot) */
.kpi-card.kpi-muted{
  background: linear-gradient(135deg, rgba(248,113,113,.16), rgba(15,23,42,.12));
}
.kpi-card.kpi-muted:hover{
  box-shadow: 0 0 18px rgba(248,113,113,.20), inset 0 0 0 1px rgba(248,113,113,.18);
}

/* Materialwert (grün/teal) */
.kpi-card.kpi-money{
  background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(15,23,42,.12));
}
.kpi-card.kpi-money:hover{
  box-shadow: 0 0 18px rgba(34,197,94,.18), inset 0 0 0 1px rgba(34,197,94,.16);
}
/* Sprachbutton (DE/EN) */
#opsLangToggle{
  color: #fff !important;
}

/* optional: auch bei Hover/Focus weiß lassen */
#opsLangToggle:hover,
#opsLangToggle:focus{
  color: #fff !important;
}
/* Sprachbutton (DE/EN) */
#opsLangToggle{
  color: #fff !important;
}

/* optional: auch bei Hover/Focus weiß lassen */
#opsLangToggle:hover,
#opsLangToggle:focus{
  color: #fff !important;
}

/* =========================================================
   GLOBAL DIALOG THEME – Dark Blue (für ALLE Dialoge)
   - gilt für <dialog class="dialog"> (OPS_UI) und RBAC-Dialoge
   - überschreibt NICHT eure Lagerverwaltung-Styles, sondern nur Dialog-Inhalte
   ========================================================= */

:root{
  --ops-dlg-panel: rgba(15,23,42,0.92);
  --ops-dlg-panel-2: rgba(2,6,23,0.78);
  --ops-dlg-border: rgba(148,163,184,0.32);
  --ops-dlg-border-strong: rgba(148,163,184,0.48);
  --ops-dlg-text: rgba(226,232,240,0.94);
  --ops-dlg-muted: rgba(148,163,184,0.86);
  --ops-dlg-accent: rgba(56,189,248,0.80);
  --ops-dlg-accent-soft: rgba(56,189,248,0.14);
  --ops-dlg-radius: 16px;
}

/* Basis für alle Dialoge, die die Klasse "dialog" tragen */
dialog.dialog{
  background: transparent;
  border: none;
  padding: 0;
  color: var(--ops-dlg-text);
}

dialog.dialog::backdrop{
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

/* Dialog-Card (OPS_UI + eigene Dialoge) */
dialog.dialog .card{
  background:
    radial-gradient(900px 320px at 12% 0%, rgba(56,189,248,0.14), transparent 60%),
    radial-gradient(700px 260px at 95% 10%, rgba(168,85,247,0.12), transparent 62%),
    linear-gradient(180deg, var(--ops-dlg-panel), var(--ops-dlg-panel-2));
  border: 1px solid var(--ops-dlg-border);
  border-radius: var(--ops-dlg-radius);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.14), 0 22px 60px rgba(0,0,0,0.55);
  padding: 16px;
  max-height: 86vh;
  overflow: auto;
}

/* Header/Title für „große“ Dialoge (z.B. RBAC) */
dialog.dialog .ops-dialog-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin: 0 0 12px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}

dialog.dialog .ops-dialog-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* OPS_UI nutzt <h3> */
dialog.dialog h3{
  color: var(--ops-dlg-text);
}

dialog.dialog .ops-dialog-note{
  color: var(--ops-dlg-muted);
}

/* Inputs in Dialogen */
dialog.dialog input[type="text"],
dialog.dialog input[type="password"],
dialog.dialog input[type="number"],
dialog.dialog input[type="date"],
dialog.dialog select,
dialog.dialog textarea{
  width: 100%;
  box-sizing: border-box;
  background: rgba(2,6,23,0.38);
  color: var(--ops-dlg-text);
  border: 1px solid var(--ops-dlg-border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

dialog.dialog input:focus,
dialog.dialog select:focus,
dialog.dialog textarea:focus{
  border-color: rgba(56,189,248,0.55);
  box-shadow: 0 0 0 4px var(--ops-dlg-accent-soft), inset 0 1px 0 rgba(255,255,255,0.03);
  background: rgba(2,6,23,0.52);
}

/* Footer/Actions */
dialog.dialog .ops-dialog-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

/* RBAC-Matrix Tabelle */
dialog.dialog table.ops-rbac-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 12px;
  font-size: 12px;
}

dialog.dialog table.ops-rbac-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.84));
  border-bottom: 1px solid var(--ops-dlg-border-strong);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.88);
  padding: 10px 10px;
  white-space: nowrap;
  text-align: center;
}

dialog.dialog table.ops-rbac-table thead th:first-child{
  text-align: left;
}

dialog.dialog table.ops-rbac-table tbody td{
  border-bottom: 1px solid rgba(148,163,184,0.14);
  padding: 10px 10px;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
}

dialog.dialog table.ops-rbac-table tbody td:first-child{
  text-align: left;
  white-space: normal;
  color: rgba(226,232,240,0.94);
}

dialog.dialog table.ops-rbac-table tbody tr:nth-child(odd){
  background: rgba(2,6,23,0.20);
}

dialog.dialog table.ops-rbac-table tbody tr:hover{
  background: rgba(56,189,248,0.08);
}

dialog.dialog table.ops-rbac-table input[type="checkbox"]{
  accent-color: var(--ops-dlg-accent);
  width: 16px;
  height: 16px;
}
/* ===== DEMO/Portable: Centered Card Layout Override ===== */
.app-main{
  /* zentriert den Inhalt, wie in deiner "Vorher"-Ansicht */
  max-width: 1360px;
  margin: 0 auto;
  padding: 18px 16px 28px;
}

#lagerverwaltung.card{
  width: 100%;
  margin: 0 auto;
}

/* Optional: wenn irgendwo display:flex gesetzt ist und das Layout "zieht" */
.app-main > #lagerverwaltung.card{
  flex: 0 1 auto;
}

/* Mobile: etwas mehr Platz */
@media (max-width: 720px){
  .app-main{ padding: 12px 10px 18px; }
}
/* ===== DEMO/Portable: Centered Card Layout Override ===== */
.app-main{
  /* zentriert den Inhalt, wie in deiner "Vorher"-Ansicht */
  max-width: 1360px;
  margin: 0 auto;
  padding: 18px 16px 28px;
}

#lagerverwaltung.card{
  width: 100%;
  margin: 0 auto;
}

/* Optional: wenn irgendwo display:flex gesetzt ist und das Layout "zieht" */
.app-main > #lagerverwaltung.card{
  flex: 0 1 auto;
}

/* Mobile: etwas mehr Platz */
@media (max-width: 720px){
  .app-main{ padding: 12px 10px 18px; }
}
/* ===== OpsDeck DEMO: Custom Select (iPhone-like) ===== */
.opsx-select-wrap{
  position: relative;
}

.opsx-select-native{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  pointer-events:none !important; /* native dropdown deaktivieren */
}

.opsx-select-btn{
  width: 100%;
  min-height: 44px;
  padding: 10px 40px 10px 12px;
  border-radius: 12px;
  background: rgba(29, 78, 216, 0.14);
  border: 1px solid rgba(88, 166, 255, 0.42);
  color: rgba(226,232,240,0.96);
  font-weight: 600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  cursor: pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.opsx-select-btn:focus{
  outline:none;
  border-color: rgba(88,166,255,0.80);
  box-shadow: 0 0 0 4px rgba(88,166,255,0.18);
  background: rgba(29,78,216,0.18);
}

.opsx-select-btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
}

.opsx-select-caret{
  opacity:.85;
  font-size: 12px;
  transform: translateY(-1px);
}

/* Popover */
.opsx-select-pop{
  position: fixed;
  z-index: 5000;
  min-width: 240px;
  max-width: min(520px, 92vw);
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.opsx-select-pop-head{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.opsx-select-pop-title{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(226,232,240,0.96);
  font-size: 13px;
}

.opsx-select-pop-close{
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(2,6,23,0.35);
  color: rgba(226,232,240,0.92);
  border-radius: 10px;
  min-height: 34px;
  padding: 6px 10px;
}

.opsx-select-pop-list{
  max-height: min(54vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.opsx-opt{
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: rgba(226,232,240,0.92);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}

.opsx-opt:hover{
  background: rgba(29,78,216,0.20);
}

.opsx-opt[aria-selected="true"]{
  background: rgba(29,78,216,0.32);
  box-shadow: inset 0 0 0 1px rgba(88,166,255,0.35);
}

.opsx-opt small{
  opacity:.75;
  font-weight:600;
}

.opsx-optgroup{
  padding: 10px 12px 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(159,176,214,0.9);
  opacity:.9;
}
#scrollFixWrapper {
  height: 650px;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;  /* <- verhindert horizontales Auslaufen */
  max-width: 100%;
  border: 2px solid red; /* Testzwecke */
  box-sizing: border-box;
}
.data-table {
  width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
}

/* Mobile-first */
.layout { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Tablet */
@media (min-width: 768px){
  .layout { grid-template-columns: 1fr; }
}

/* Desktop */
@media (min-width: 1200px){
  .layout { grid-template-columns: 320px 1fr; } /* sidebar + content */
}

/* === iPhone-Style Bottom-Sheet: Filter (Mobile) === */
.inv-sheet-overlay{
  display:none; /* nur Mobile */
}

@media (max-width: 767px){
  /* Overlay */
  .inv-sheet-overlay{
    display:block;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.45);
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease;
    z-index: 999; /* unter dem Sheet */
  }
  body.filters-open .inv-sheet-overlay{
    opacity:1;
    pointer-events:auto;
  }

  /* Body scroll sperren, wenn Sheet offen */
  body.filters-open{
    overflow:hidden;
  }

  /* Panel wird zum Bottom-Sheet */
  #invFiltersPanel{
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    transform: translateY(110%);
    transition: transform .25s ease;
    pointer-events:none;

    max-height: 85vh;
    overflow:auto;
    -webkit-overflow-scrolling: touch;

    padding: 10px 12px 16px;
    border-radius: 18px 18px 0 0;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148,163,184,0.28);
    box-shadow: 0 -12px 40px rgba(0,0,0,0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  body.filters-open #invFiltersPanel{
    transform: translateY(0);
    pointer-events:auto;
  }

  /* iOS Grabber + Header */
  #invFiltersPanel .inv-sheet-head{
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: -10px -12px 10px; /* align with sheet padding */
    padding: 8px 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  #invFiltersPanel .inv-sheet-grabber{
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(226,232,240,0.35);
    margin: 2px auto 8px;
  }
  #invFiltersPanel .inv-sheet-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }
  #invFiltersPanel .inv-sheet-title{
    font-weight: 800;
    letter-spacing: .02em;
    color: rgba(226,232,240,0.96);
  }
  #invFiltersPanel .inv-sheet-close{
    min-height: 36px;
    padding: 6px 10px;
  }

  /* Filter-Button nur auf Mobile zeigen */
  #invFiltersToggleBtn{ display:inline-flex; }
}

@media (min-width: 768px){
  /* Tablet/Desktop: ganz normal im Flow */
  #invFiltersPanel{
    position: static;
    transform: none;
    transition: none;
    pointer-events:auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Sheet UI auf groß aus */
  #invFiltersPanel .inv-sheet-head{ display:none; }
  .inv-sheet-overlay{ display:none; }

  /* Button aus */
  #invFiltersToggleBtn{ display:inline-flex; }
}


/* Desktop/Tablet: kurzer Hinweis-Effekt beim Klick auf "Filter" */
.inv-desktop-flash{
  outline: 2px solid rgba(83,155,245,.35);
  outline-offset: 4px;
  animation: invFlash .65s ease;
}
@keyframes invFlash{
  from{ outline-color: rgba(83,155,245,0); }
  50%{ outline-color: rgba(83,155,245,.45); }
  to{ outline-color: rgba(83,155,245,0); }
}



/* ===== Bottom-Sheet: Drag-to-close (iPhone Style) ===== */
@media (max-width: 767px){
  #invFiltersPanel.is-dragging{
    transition: none !important;
  }
}
/* ===== FIX: Aktionen-Select auch im Vollbild (außerhalb #lagerverwaltung) ===== */
select.inv-action-select{
  background: rgba(2,6,23,0.55) !important;
  color: rgba(226,232,240,0.94) !important;
  border: 1px solid rgba(148,163,184,0.40) !important;
  border-radius: 12px !important;
  min-height: 38px !important;
  padding: 8px 34px 8px 12px !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  color-scheme: dark; /* verhindert oft "grau" in Vollbild */
}

select.inv-action-select option{
  background: #0b1220 !important;
  color: rgba(226,232,240,0.95) !important;
}

/* Vollbild-Spezialfall (Browser-spezifisch) */
:fullscreen select.inv-action-select,
:-webkit-full-screen select.inv-action-select,
:-moz-full-screen select.inv-action-select{
  background: rgba(2,6,23,0.55) !important;
  color-scheme: dark;
}
/* =========================================================
   Dialog-Controls vereinheitlichen + Aktionen-Select in Details
   - macht Select/Input in ALLEN Dialogen gleich (Dark ERP)
   - verhindert "zu breite" Aktionen-Flächen in Detailansicht
   ========================================================= */

/* 1) Einheitlicher Look für Inputs/Selects in allen <dialog class="dialog"> */
dialog.dialog input[type="text"],
dialog.dialog input[type="number"],
dialog.dialog input[type="date"],
dialog.dialog input[type="file"],
dialog.dialog textarea,
dialog.dialog select{
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;

  background: rgba(2,6,23,0.46);
  color: rgba(226,232,240,0.94);
  border: 1px solid rgba(148,163,184,0.32);
  border-radius: 12px;
  padding: 10px 12px;

  outline: none;
  color-scheme: dark;
}

dialog.dialog textarea{ min-height: 44px; resize: vertical; }

dialog.dialog input:focus,
dialog.dialog textarea:focus,
dialog.dialog select:focus{
  border-color: rgba(56,189,248,0.80);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.14);
}

/* Optional: Select Pfeil/Native-Optik beruhigen */
dialog.dialog select{
  padding-right: 34px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Optionen dunkler (falls Browser es übernimmt) */
dialog.dialog select option,
dialog.dialog select optgroup{
  background: rgba(15,23,42,0.98) !important;
  color: rgba(226,232,240,0.95) !important;
}

/* 2) Detailansicht: Aktionen NICHT über die ganze Zeile breit ziehen */
#invDetailDialog .inv-action-select-wrapper,
#artikelDetailView .inv-action-select-wrapper{
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  padding: 0 !important;
}

#invDetailDialog select.inv-action-select,
#artikelDetailView select.inv-action-select{
  width: auto !important;          /* <- wichtig: nicht 100% */
  min-width: 180px;
  max-width: 320px;
}

/* Falls das Select in einer "vollen" Zelle steckt: nur Inhalt soll wirken */
#invDetailDialog .inv-action-select-wrapper *{
  background-clip: padding-box;
}
/* Details-Dialog: nur den äußeren Dialog transparent lassen */
#invDetailDialog { background: transparent !important; }

/* NICHT mehr #artikelDetailView transparent machen */
#invDetailDialog .inv-detail-view{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* ===== Resizable Table (Bottom-Right Handle) ===== */
#scrollFixWrapper{
  /* wichtig: resize braucht overflow != visible */
  overflow: hidden !important;

  /* Ziehgriff unten rechts */
  resize: vertical;              /* empfohlen (nur Höhe, Layout bleibt stabil) */
  /* resize: both; */            /* optional: auch Breite, kann aber Layout zerlegen */

  /* Grenzen */
  min-height: 320px;
  max-height: 85vh !important;   /* überschreibt dein max-height:60vh inline */
}
/* ===== Resizable Table (Width + Height) - SAFE ===== */
#scrollFixWrapper{
  /* resize braucht overflow != visible */
  overflow: hidden !important;

  /* unten rechts ziehbar */
  resize: both;

  /* Grenzen: verhindert "alles kaputt" */
  min-width: 520px;
  max-width: 100%;
  min-height: 320px;
  max-height: 85vh !important;

  /* wichtig in Grid/Flex, damit max-width greift */
  box-sizing: border-box;
}

/* Falls der Parent ein Grid/Flex ist: Resizing darf nicht vom Layout blockiert werden */
.table-wrap, .card-body, .inv-kpi-wrap, .inv-table-wrap{
  min-width: 0;
}
/* Globales X oben rechts für alle Dialoge */
dialog.dialog{
  position: relative;
}

dialog.dialog .dlg-x{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  cursor: pointer;
}

dialog.dialog .dlg-x:hover{ background: rgba(255,255,255,.10); }
dialog.dialog .dlg-x:active{ transform: scale(.98); }
/* Globales X oben rechts für alle <dialog class="dialog"> */
dialog.dialog{
  position: relative;
}

dialog.dialog .dlg-x{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);

  cursor: pointer;
  z-index: 5;
}

dialog.dialog .dlg-x:hover{ background: rgba(255,255,255,.10); }
dialog.dialog .dlg-x:active{ transform: scale(.98); }
/* ===== Schritt 1: Table polish (safe override nur für #invTable) ===== */
#lagerverwaltung table#invTable.data-table{
  font-size: 12px;
}

#lagerverwaltung table#invTable.data-table thead th{
  /* saubere Alpha-Werte + etwas mehr Tiefe */
  background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.84)) !important;
  border-bottom: 1px solid rgba(148,163,184,0.22) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}

#lagerverwaltung table#invTable.data-table tbody td{
  border-bottom: 1px solid rgba(148,163,184,0.12) !important;
}

#lagerverwaltung table#invTable.data-table tbody tr{
  transition: background .12s ease;
}

/* subtileres Zebra */
#lagerverwaltung table#invTable.data-table tbody tr:nth-child(odd){
  background: rgba(2,6,23,0.20) !important;
}
#lagerverwaltung table#invTable.data-table tbody tr:nth-child(even){
  background: rgba(2,6,23,0.12) !important;
}

/* Hover etwas klarer, aber nicht knallig */
#lagerverwaltung table#invTable.data-table tbody tr:hover{
  background: rgba(56,189,248,0.10) !important;
}
/* iOS-like segmented row for the first navigation button row in header */
#lagerverwaltung .card-header > div:nth-of-type(2){
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#lagerverwaltung .card-header > div:nth-of-type(2) .btn{
  box-shadow: none;                /* cleaner in segmented group */
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
/* =========================================================
   MODERN HEADER TOOLBARS – ohne HTML Änderungen
   ========================================================= */

/* Portal-Navigation row (2. div im card-header) */
#lagerverwaltung .card-header > div:nth-of-type(2),
/* Action button row (3. div im card-header) */
#lagerverwaltung .card-header > div:nth-of-type(3){
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* Buttons in diesen beiden Reihen modernisieren */
#lagerverwaltung .card-header > div:nth-of-type(2) .btn,
#lagerverwaltung .card-header > div:nth-of-type(3) .btn{
  height: 36px;
  min-height: 36px;
  padding: 0 12px;

  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(255,255,255,.04);
  box-shadow: none;

  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;

  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#lagerverwaltung .card-header > div:nth-of-type(2) .btn:hover,
#lagerverwaltung .card-header > div:nth-of-type(3) .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(148,163,184,.32);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}

#lagerverwaltung .card-header > div:nth-of-type(2) .btn:active,
#lagerverwaltung .card-header > div:nth-of-type(3) .btn:active{
  transform: translateY(0) scale(.98);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Primary klarer und moderner */
#lagerverwaltung .card-header > div:nth-of-type(2) .btn-primary,
#lagerverwaltung .card-header > div:nth-of-type(3) .btn-primary{
  border-color: rgba(56,189,248,.45);
  background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(56,189,248,.10));
}

#lagerverwaltung .card-header > div:nth-of-type(2) .btn-primary:hover,
#lagerverwaltung .card-header > div:nth-of-type(3) .btn-primary:hover{
  border-color: rgba(56,189,248,.62);
  box-shadow: 0 10px 22px rgba(0,0,0,.24), 0 0 0 1px rgba(56,189,248,.10);
}

/* Ghost: ruhig, aber mit gutem Hover */
#lagerverwaltung .card-header > div:nth-of-type(2) .btn-ghost,
#lagerverwaltung .card-header > div:nth-of-type(3) .btn-ghost{
  background: transparent;
  border-color: rgba(148,163,184,.16);
}

#lagerverwaltung .card-header > div:nth-of-type(2) .btn-ghost:hover,
#lagerverwaltung .card-header > div:nth-of-type(3) .btn-ghost:hover{
  background: rgba(255,255,255,.05);
}

/* "Tabelle löschen" als Danger (optional, nur dieser Button) */
#lagerverwaltung #invDeleteAllBtn{
  border-color: rgba(248,113,113,.28);
}

#lagerverwaltung #invDeleteAllBtn:hover{
  border-color: rgba(248,113,113,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.24), 0 0 0 1px rgba(248,113,113,.10);
}
/* =========================================================
   iOS GLASS – Force Override (nur Header Button-Reihen)
   Trifft: die beiden <div style="display:flex;flex-wrap:wrap..."> in .card-header
   ========================================================= */

/* Optional TEST: wenn du DAS nicht siehst, wird die CSS nicht geladen */
/* #lagerverwaltung .card-header { outline: 2px solid lime !important; } */

#lagerverwaltung .card-header > div[style*="flex-wrap:wrap"]{
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(2,6,23,.16) !important;

  backdrop-filter: blur(12px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#lagerverwaltung .card-header > div[style*="flex-wrap:wrap"] .btn{
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  color: rgba(226,232,240,.95) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 34px rgba(0,0,0,.42) !important;

  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;

  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;

  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease !important;
}

#lagerverwaltung .card-header > div[style*="flex-wrap:wrap"] .btn:hover{
  border-color: rgba(255,255,255,.24) !important;
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 40px rgba(0,0,0,.52) !important;
}

#lagerverwaltung .card-header > div[style*="flex-wrap:wrap"] .btn:active{
  transform: translateY(0) scale(.98) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 10px 22px rgba(0,0,0,.45) !important;
}

/* Ghost soll auch glasig sein (nicht “leer/transparent”) */
/* ================================
   Rubriken / Gruppen (glassy)
   ================================ */

#lagerverwaltung .lv-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
}

/* Group container */
#lagerverwaltung .lv-group{
  position: relative;
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  padding: 14px 10px 10px;
  border-radius: 16px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

/* small label pill */
#lagerverwaltung .lv-group::before{
  content: attr(data-label);
  position:absolute;
  top:-10px;
  left:12px;

  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(226,232,240,.78);

  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(2,6,23,.62);
  border: 1px solid rgba(255,255,255,.10);
}

/* Buttons inside groups: iOS-like pills */
#lagerverwaltung .lv-group .btn{
  height: 36px;
  min-height: 36px;
  padding: 0 12px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 26px rgba(0,0,0,.34);

  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

#lagerverwaltung .lv-group .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 34px rgba(0,0,0,.46);
}

#lagerverwaltung .lv-group .
/* ===== Lagerverwaltung: Admin-Buttons als eigener Block (rechts + Trenner) ===== */
#lagerverwaltung #invPermsBtn{
  margin-left: auto;              /* schiebt Admin-Gruppe nach rechts */
  position: relative;
}

/* kleiner vertikaler Trenner vor "Berechtigungen" */
#lagerverwaltung #invPermsBtn::before{
  content:"";
  position:absolute;
  left:-10px;
  top:8px;
  bottom:8px;
  width:1px;
  background: rgba(148,163,184,0.25);
}

/* Admin/Rechte leicht "Warnung" (gelblich) */
#lagerverwaltung #invPermsBtn,
#lagerverwaltung #invAdminBtn{
  border-color: rgba(250,204,21,0.35);
  background: rgba(250,204,21,0.08);
}

/* Löschen deutlich "Danger" (rot) */
#lagerverwaltung #invDeleteAllBtn{
  border-color: rgba(248,113,113,0.40);
  background: rgba(248,113,113,0.10);
}
#lagerverwaltung #invDeleteAllBtn:hover{
  box-shadow: 0 0 0 1px rgba(248,113,113,0.20), 0 10px 18px rgba(0,0,0,0.25);
}
/* ===== Rubriken-Kacheln für Aktionen ===== */
#lagerverwaltung .inv-actions-rubrics{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:10px;
  margin-top: 10px;
}

/* Kachel-Look ähnlich KPI-Cards */
#lagerverwaltung .rubric-card{
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 10px 12px;
  background:
    radial-gradient(800px 220px at 20% 0%, rgba(59,130,246,.10), transparent 60%),
    rgba(15,23,42,.55);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

#lagerverwaltung .rubric-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom: 8px;
}

#lagerverwaltung .rubric-icon{
  width:26px;height:26px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border-radius: 10px;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

#lagerverwaltung .rubric-title{
  font-weight: 700;
  color: rgba(226,232,240,.92);
  letter-spacing: .01em;
}

#lagerverwaltung .rubric-body{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
}

/* Admin-Kachel leicht “warnender” + Delete als Danger */
#lagerverwaltung .rubric-card--admin{
  border-color: rgba(250,204,21,.22);
  background:
    radial-gradient(800px 220px at 20% 0%, rgba(250,204,21,.12), transparent 60%),
    rgba(15,23,42,.55);
}

#lagerverwaltung .rubric-card--admin #invDeleteAllBtn{
  border-color: rgba(248,113,113,0.40);
  background: rgba(248,113,113,0.10);
}
/* ===== Rubriken-Kacheln für Aktionen (wie KPI-Cards) ===== */

/* Wichtig: Parent ist flex -> Rubriken müssen volle Breite bekommen */
#lagerverwaltung .card-header-actions .inv-actions-rubrics{
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

/* Grid für Rubriken */
#lagerverwaltung .inv-actions-rubrics{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  align-items: start;
}

/* Kachel-Optik */
#lagerverwaltung .rubric-card{
  min-width: 0;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 10px 12px;
  background:
    radial-gradient(800px 220px at 20% 0%, rgba(59,130,246,.10), transparent 60%),
    rgba(15,23,42,.55);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

#lagerverwaltung .rubric-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#lagerverwaltung .rubric-icon{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.18);
}

#lagerverwaltung .rubric-title{
  font-weight: 700;
  color: rgba(226,232,240,.92);
  letter-spacing: .01em;
}

#lagerverwaltung .rubric-body{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Admin-Kachel leicht abgesetzt */
#lagerverwaltung .rubric-card--admin{
  border-color: rgba(250,204,21,.22);
  background:
    radial-gradient(800px 220px at 20% 0%, rgba(250,204,21,.12), transparent 60%),
    rgba(15,23,42,.55);
}

/* Löschen als Danger */
#lagerverwaltung .rubric-card--admin #invDeleteAllBtn{
  border-color: rgba(248,113,113,0.40);
  background: rgba(248,113,113,0.10);
}
/* ===== FIX: Rubriken-Grid darf NICHT vom Inline-flex Header-Wrapper dominiert werden ===== */
#lagerverwaltung .card-header > div[style*="flex-wrap:wrap"]{
  display: block !important;   /* nimmt dem Wrapper das flex weg */
}

/* Grid erzwingen */
#lagerverwaltung .inv-actions-rubrics{
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px !important;
}

/* Kacheln sollen sich sauber ausdehnen */
#lagerverwaltung .rubric-card{
  min-width: 0;
}
/* =========================================================
   Rubriken-Kacheln (inv-actions-rubrics / rubric-card)
   PASTE AT VERY END of ops-Lagerverwaltung.css
   ========================================================= */

/* Wichtig: Dein Rubriken-Container ist das 3. DIV im card-header.
   Alte Regeln für div:nth-of-type(3) neutralisieren wir hier. */
#lagerverwaltung .card-header > div:nth-of-type(3).inv-actions-rubrics{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Container: responsive Grid */
#lagerverwaltung .card-header .inv-actions-rubrics{
  width: 100% !important;
  box-sizing: border-box;
  margin-top: 10px;

  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* Kachel */
#lagerverwaltung .inv-actions-rubrics .rubric-card{
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.62));
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  position: relative;
  overflow: hidden;
}

#lagerverwaltung .inv-actions-rubrics .rubric-card::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.14), transparent 55%);
  pointer-events:none;
}

#lagerverwaltung .inv-actions-rubrics .rubric-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(56,189,248,.14), 0 18px 48px rgba(0,0,0,.28);
}

/* Kopfzeile */
#lagerverwaltung .inv-actions-rubrics .rubric-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom: 10px;
  color: rgba(226,232,240,.90);
}

#lagerverwaltung .inv-actions-rubrics .rubric-icon{
  width: 26px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.18);
}

#lagerverwaltung .inv-actions-rubrics .rubric-title{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .92;
}

/* Body: Buttons sauber umbrechen */
#lagerverwaltung .inv-actions-rubrics .rubric-body{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Optional: Admin-Kachel subtil anders */
#lagerverwaltung .inv-actions-rubrics .rubric-card--admin{
  border-color: rgba(248,113,113,.22);
}
#lagerverwaltung .inv-actions-rubrics .rubric-card--admin::after{
  background: radial-gradient(circle at 30% 30%, rgba(248,113,113,.14), transparent 55%);
}

/* Mobile: 1 Spalte */
@media (max-width: 640px){
  #lagerverwaltung .card-header .inv-actions-rubrics{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Actions Rubrics – iPhone glass look (ONLY for Rubriken)
   Scope: #lagerverwaltung .inv-actions-rubrics ...
   ========================================================= */

/* Rubriken-Grid darf in der Header-Actions-Leiste volle Breite nehmen */
#lagerverwaltung .card-header-actions .inv-actions-rubrics{
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

/* Grid */
#lagerverwaltung .inv-actions-rubrics{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}

/* Kachel (glassy) */
#lagerverwaltung .inv-actions-rubrics .rubric-card{
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px 12px 10px;

  background:
    radial-gradient(900px 320px at 12% 0%, rgba(56,189,248,0.12), transparent 60%),
    radial-gradient(700px 260px at 95% 10%, rgba(168,85,247,0.10), transparent 62%),
    rgba(2,6,23,0.20);

  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 45px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
#lagerverwaltung .inv-actions-rubrics .rubric-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 55px rgba(0,0,0,.45);
}

/* Kopf */
#lagerverwaltung .inv-actions-rubrics .rubric-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
#lagerverwaltung .inv-actions-rubrics .rubric-icon{
  width: 30px;
  height: 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
#lagerverwaltung .inv-actions-rubrics .rubric-title{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(226,232,240,.90);
}

/* Body */
#lagerverwaltung .inv-actions-rubrics .rubric-body{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Admin-Kachel subtil abgesetzt */
#lagerverwaltung .inv-actions-rubrics .rubric-card--admin{
  border-color: rgba(250,204,21,.18);
}

/* =========================================================
   iPhone-Style Buttons (NUR innerhalb der Rubriken)
   ========================================================= */
#lagerverwaltung .inv-actions-rubrics .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  height: 38px;
  min-height: 38px;
  padding: 0 14px;

  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 34px rgba(0,0,0,.42) !important;

  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);

  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;

  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  will-change: transform;
}

#lagerverwaltung .inv-actions-rubrics .btn:hover{
  border-color: rgba(255,255,255,.22) !important;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 40px rgba(0,0,0,.52) !important;
}
#lagerverwaltung .inv-actions-rubrics .btn:active{
  transform: translateY(0) scale(.98);
}

/* Primary / Ghost Varianten (nur Rubriken) */
#lagerverwaltung .inv-actions-rubrics .btn-primary{
  border-color: rgba(56,189,248,.40) !important;
  background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(56,189,248,.10)) !important;
}
#lagerverwaltung .inv-actions-rubrics .btn-primary:hover{
  border-color: rgba(56,189,248,.60) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 40px rgba(0,0,0,.52),
    0 0 0 1px rgba(56,189,248,.14) !important;
}

#lagerverwaltung .inv-actions-rubrics .btn-ghost{
  border-color: rgba(148,163,184,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
}
#lagerverwaltung .inv-actions-rubrics .btn-ghost:hover{
  border-color: rgba(148,163,184,.30) !important;
}

/* Danger (Tabelle löschen) */
#lagerverwaltung .inv-actions-rubrics #invDeleteAllBtn{
  border-color: rgba(248,113,113,.28) !important;
  background: linear-gradient(180deg, rgba(248,113,113,.18), rgba(248,113,113,.08)) !important;
}
#lagerverwaltung .inv-actions-rubrics #invDeleteAllBtn:hover{
  border-color: rgba(248,113,113,.55) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 40px rgba(0,0,0,.52),
    0 0 0 1px rgba(248,113,113,.12) !important;
}

/* Mobile: 1 Spalte */
@media (max-width: 640px){
  #lagerverwaltung .inv-actions-rubrics{ grid-template-columns: 1fr; }
}
/* ===== Dropdown-Pfeil für ALLE Selects (auch ohne .select-wrapper) ===== */
:where(dialog.dialog, #lagerverwaltung) select:not([multiple]):not([size]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  padding-right: 44px !important;           /* Platz für Pfeil */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%23E2E8F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;

  cursor: pointer;
}

/* Optional: beim Hover etwas deutlicher */
:where(dialog.dialog, #lagerverwaltung) select:not([multiple]):not([size]):hover {
  border-color: rgba(226,232,240,.28);
}
/* ===== Dialog-Felder: iPhone-Glas + keine "Überlappungs"-Optik ===== */
dialog.dialog .card input:not([type="checkbox"]):not([type="radio"]),
dialog.dialog .card select,
dialog.dialog .card textarea{
  /* Glasig (grau-blau) statt grau */
  background: rgba(15, 23, 42, 0.35) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.92) !important;

  /* Damit Text sicher "im Feld" sitzt */
  padding: 10px 12px !important;
  min-height: 40px !important;
  line-height: 20px !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

dialog.dialog .card textarea{
  min-height: 70px !important;
}

/* Labels etwas klarer (optional, sicher) */
dialog.dialog .card label{
  display:block;
  margin: 0 0 6px;
  color: rgba(226,232,240,0.88);
}
/* Mehr Luft zwischen 2-Spalten-Reihen (falls WE/WA ein grid-2 nutzt) */
dialog.dialog .grid-2{
  gap: 12px !important;
}