:root{
 --c1:#e8f1ff;
 --c2:#cde1ff;
 --c3:#9fc2ff;
 --c4:#6aa5ff;
 --c5:#2e7bf6;
 --text:#0b234a;
 --muted:#4a6aa3;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#f7fbff, #eaf3ff);}
a{color:var(--c5);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:24px auto;padding:0 16px}
.topbar{display:flex;align-items:center;padding:10px 16px;color:white}
.topbar.gradient{background:linear-gradient(90deg, var(--c4), var(--c5));box-shadow:0 2px 10px rgba(0,0,0,.12)}
.brand{font-weight:700;letter-spacing:.5px}
.spacer{flex:1}
.userbox{display:flex;gap:8px;align-items:center}
.topmenu{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:12px;background:linear-gradient(180deg,#d8e7ff, #c7ddff);border-bottom:1px solid #b7cfff;position:sticky;top:0;z-index:9}
.menu-btn{padding:10px 14px;border-radius:999px;background:linear-gradient(180deg,#ffffff,#e9f2ff);border:1px solid #c7dafc;color:#124;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .1s ease, box-shadow .2s, background .2s}
.menu-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(54,109,255,.15);background:linear-gradient(180deg,#fff,#f2f7ff)}
.menu-btn.active{background:linear-gradient(180deg,#e9f2ff,#d9e9ff);border-color:#9bbcff}
.card{background:linear-gradient(180deg,#fff,#f5f9ff);border:1px solid #d7e6ff;padding:16px;border-radius:16px;box-shadow:0 8px 24px rgba(93,135,255,.08);margin-bottom:16px}
.card.alt{background:linear-gradient(180deg,#f6faff,#edf4ff)}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid #bcd3ff;background:linear-gradient(180deg,#fff,#eaf3ff);cursor:pointer}
.btn:hover{box-shadow:0 6px 18px rgba(54,109,255,.15)}
.btn.primary,.btn-primary{background:linear-gradient(180deg,#e4edff,#cfe0ff);border-color:#9dbbff}
.btn.small{padding:6px 10px;font-size:.9rem}
input,select,textarea{width:100%;padding:10px;border:1px solid #c7dafc;border-radius:10px;background:linear-gradient(180deg,#fff,#f3f8ff);margin:6px 0 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:#84aaff;box-shadow:0 0 0 3px rgba(60,120,255,.12)}
label{font-size:.9rem;color:var(--muted)}
.table{width:100%;border-collapse:separate;border-spacing:0;margin:8px 0}
.table th,.table td{padding:10px;border-bottom:1px solid #e2ecff;text-align:left;font-size:.95rem}
.table th{background:#eef5ff;position:sticky;top:0}
.alert{padding:10px 12px;border-radius:10px}
.alert-danger{background:#ffe8e8;border:1px solid #ffc7c7;color:#8a0000}
.footer{margin:40px auto 16px;text-align:center;color:var(--muted)}
.login-body{display:grid;place-items:center;height:100vh}
.login-card{width:min(380px,92vw);padding:24px;border-radius:18px;border:1px solid #cfe0ff;background:linear-gradient(180deg,#fff,#eef5ff);box-shadow:0 18px 50px rgba(20,70,180,.12)}
.captcha-wrap{display:flex;align-items:center;gap:10px}
.captcha-img{border-radius:8px;border:1px solid #cfe0ff}
.public-links{margin-top:16px;text-align:center;color:#557}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid #cfe0ff;background:#f3f8ff;font-size:.8rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.modal{position:fixed;inset:0;background:rgba(0,20,60,.45);display:none;align-items:center;justify-content:center;padding:20px}
.modal .content{background:#fff;border-radius:16px;max-width:800px;width:100%;padding:16px}


/* === Kategorien: Ebenen-Färbung === */
.cat-item { position: relative; }
.cat-item.level-1 {
  background: linear-gradient(180deg, #ffffff, #f7faff);
  border: 1px solid #cfe0ff;
}
.cat-item.level-2 {
  background: linear-gradient(180deg, #f6f7fb, #eef0f6);
  border: 1px solid #d6d9e6;
}
.cat-item.level-3 {
  background: linear-gradient(180deg, #eceff5, #e2e6ef);
  border: 1px solid #c8cedd;
}

/* Leichter Farbstreifen links zur besseren Orientierung */
.cat-item.level-1::before,
.cat-item.level-2::before,
.cat-item.level-3::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px; border-top-left-radius: 12px; border-bottom-left-radius: 12px;
}
.cat-item.level-1::before { background: #7fb2ff; }
.cat-item.level-2::before { background: #9aa6bf; }
.cat-item.level-3::before { background: #7f889e; }

/* Drag-Handle etwas kontrastreicher je Ebene */
.level-1 .drag-handle { background: linear-gradient(180deg, #eef4ff, #e2edff); border-color: #c2d8ff; }
.level-2 .drag-handle { background: linear-gradient(180deg, #f0f2f7, #e6e9f1); border-color: #cfd4e3; }
.level-3 .drag-handle { background: linear-gradient(180deg, #eaedf4, #e0e4ec); border-color: #c3c9d8; }

/* --- Kategoriezeile (Name + Löschsymbol in einer Linie) --- */
.cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;        /* kein Zeilenumbruch */
}

.cat-name {
  flex: 1 1 auto;           /* nimmt verbleibenden Platz ein */
  font-weight: 600;
  color: #0b234a;
  word-break: break-word;   /* falls Name sehr lang ist */
  white-space: nowrap;      /* bleibt in einer Zeile */
  overflow: hidden;
  text-overflow: ellipsis;  /* ... falls zu lang */
}

.cat-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.cat-del {
  background: linear-gradient(180deg,#fff,#ffecec);
  border: 1px solid #ffcfcf;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  transition: box-shadow .2s;
}
.cat-del:hover {
  box-shadow: 0 6px 16px rgba(255,0,0,.15);
}

/* ===== Drag&Drop: Cursor je Intent ===== */
body.dnd-intent-before, body.dnd-intent-after { cursor: ns-resize; }  /* dazwischen schieben */
body.dnd-intent-inside { cursor: copy; }                              /* als Unterkategorie */

/* Indikatoren klar unterscheiden */
.drop-indicator { position:absolute; left:8px; right:8px; border-radius:4px; pointer-events:none; }
.drop-indicator.before { top:-2px; height:4px; background:#3a86ff; box-shadow:0 0 0 3px rgba(58,134,255,.18); }
.drop-indicator.after  { bottom:-2px; height:4px; background:#3a86ff; box-shadow:0 0 0 3px rgba(58,134,255,.18); }
.drop-indicator.inside { left:16px; right:16px; top:50%; height:6px; transform:translateY(-50%); background:#2a9d8f; box-shadow:0 0 0 3px rgba(42,157,143,.18); }

/* Drag-Handle optisch als Griff und Drop-Zonen verlässlicher machen */
.drag-handle { cursor: grab; }
.cat-item { position: relative; padding: 8px; }
.cat-row { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.cat-name { flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-actions { flex:0 0 auto; margin-left:auto; display:flex; align-items:center; }

/* macht den Handle in allen Browsern wirklich ziehbar */
.drag-handle {
  -webkit-user-drag: element;
  user-select: none;
}

details > summary { cursor: pointer; }
details[open] > summary { opacity: .85; }

/* Live-Suche Dropdown */
.combo{ position: relative; }
.search-results{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid #cfdaf4; border-top:none;
  z-index:20; max-height:260px; overflow:auto; border-radius:0 0 10px 10px;
  box-shadow:0 10px 24px rgba(40,80,160,.12);
}
.search-item{
  padding:10px 12px; cursor:pointer;
  border-top:1px solid #eef3ff; background:linear-gradient(180deg,#fff,#f8fbff);
}
.search-item:hover{ background:#eef5ff; }

/* Icon-Buttons (Edit/Löschen) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; border:1px solid #cfdaf4;
  background:linear-gradient(180deg,#fff,#f4f7ff); cursor:pointer;
  font-size:18px; line-height:1; padding:0; margin:0 4px;
  transition: box-shadow .2s, transform .06s;
}
.icon-btn:hover{ box-shadow:0 6px 18px rgba(54,109,255,.15); }
.icon-btn:active{ transform: translateY(1px); }
.icon-btn.edit{ border-color:#c7dafc; }
.icon-btn.delete{ border-color:#ffcfcf; background:linear-gradient(180deg,#fff,#ffefef); }
.icon-btn.delete:hover{ box-shadow:0 6px 18px rgba(255,0,0,.15); }

/* Modal Optimierung */
.modal{ position:fixed; inset:0; background:rgba(0,20,60,.45); display:none; align-items:center; justify-content:center; padding:20px; }
.modal .content{
  background:#fff; border-radius:16px; max-width:720px; width:100%; padding:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

/* Legende/Chips unter der Ausgabe */
.legend-wrap { margin-top:10px; padding:10px; border:1px solid #dce6ff; border-radius:12px; background:linear-gradient(180deg,#f8fbff,#f2f6ff); }
.legend-title { font-weight:600; color:#123; margin-bottom:8px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #cfe0ff; border-radius:999px;
  background:linear-gradient(180deg,#fff,#eef5ff);
  font-size:.9rem;
}
.chip code { font-weight:700; color:#124; }
.chip-sub { color:#506; opacity:.8; font-size:.85rem; }
.chip.hint { border-style:dashed; color:#556; }
.chip.static { border-color:#d5e3ff; background:linear-gradient(180deg,#fff,#f7faff); }

/* 3-Spalten Kartenliste */
.grid3cards{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){ .grid3cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .grid3cards{ grid-template-columns: 1fr; } }

.prod-card{
  border:1px solid #d2defc; border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f7faff);
  padding:10px; display:flex; gap:10px; align-items:flex-start;
}
.prod-thumb{ width:68px; height:68px; flex:0 0 68px; border-radius:10px; overflow:hidden; background:#eef3ff; display:flex; align-items:center; justify-content:center; border:1px solid #dfe7ff; }
.prod-thumb img{ width:100%; height:100%; object-fit:cover; }
.prod-thumb .noimg{ font-weight:600; color:#7b8ab0; }

.prod-meta{ flex:1 1 auto; min-width:0; }
.prod-line{ display:flex; gap:8px; }
.prod-line .k{ width:74px; color:#5a6b96; font-weight:600; }
.prod-line .v{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.prod-actions{ display:flex; gap:6px; align-items:center; }

.list-head{ display:flex; align-items:center; gap:12px; }
.search-inline{ display:flex; align-items:center; gap:8px; flex:1 1 auto; }
.search-inline input[type="text"]{ max-width:260px; }

/* Live-Suche (wie bei Titeln) */
.combo{ position:relative; }
.search-results{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid #cfdaf4; border-top:none;
  z-index:20; max-height:260px; overflow:auto; border-radius:0 0 10px 10px;
  box-shadow:0 10px 24px rgba(40,80,160,.12);
}
.search-item{
  padding:10px 12px; cursor:pointer;
  border-top:1px solid #eef3ff; background:linear-gradient(180deg,#fff,#f8fbff);
}
.search-item:hover{ background:#eef5ff; }

/* Pager */
.pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px; }
.page-btn{ padding:6px 10px; border:1px solid #cfe0ff; border-radius:10px; background:linear-gradient(180deg,#fff,#eef5ff); }
.page-info{ color:#4f5f88; }

/* Schlanke Kartenliste (ohne Bild), 12px Text */
.grid3cards.slim{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:980px){ .grid3cards.slim{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .grid3cards.slim{ grid-template-columns:1fr; } }

.prod-card.slim{ border:1px solid #d2defc; border-radius:12px; background:linear-gradient(180deg,#fff,#f7faff); padding:10px; display:flex; gap:10px; align-items:flex-start; font-size:12px; }
.prod-meta.slim .prod-line .k{ width:54px; color:#5a6b96; font-weight:600; font-size:12px; }
.prod-meta.slim .prod-line .v{ font-size:12px; }

/* Kleinere Icon-Buttons */
.icon-btn.xs{
  width:24px; height:24px; font-size:14px; border-radius:8px; padding:0;
}

/* Spec-Editor im Modal */
.sep{ height:1px; background:linear-gradient(90deg,#dce6ff,rgba(0,0,0,0)); margin:10px 0; }
.spec-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
.spec-row{ display:grid; grid-template-columns: 240px 1fr; gap:8px; align-items:center; }
.spec-label{ color:#334; font-weight:600; font-size:12px; }
.spec-input{ font-size:12px; padding:8px; }
@media (max-width:700px){ .spec-row{ grid-template-columns:1fr; } }


/* 2-Spalten, jede Karte = eine Zeile (sehr schlank) */
.grid2rows.slim{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;
}
@media (max-width:900px){ .grid2rows.slim{ grid-template-columns: 1fr; } }

.prod-row.slim{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid #d2defc; border-radius:10px;
  background:linear-gradient(180deg,#ffffff,#f7faff);
  padding:6px 10px; font-size:12px; transition: box-shadow .15s, transform .03s, border-color .15s, background .15s;
}
.prod-row.slim:hover{
  border-color:#b9c9ff;
  background:linear-gradient(180deg,#f9fbff,#eef3ff);
  box-shadow:0 6px 18px rgba(60,100,200,.10);
}

.row-left{ display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }
.row-left .cell{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-left .cell.id{ font-weight:700; color:#334; margin-right:6px; }
.row-left .cell.k{ color:#5a6b96; font-weight:600; }
.row-left .cell.v{ max-width:44vw; }
@media (max-width:900px){ .row-left .cell.v{ max-width:60vw; } }

.row-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn.xs{ width:24px; height:24px; font-size:14px; border-radius:8px; padding:0; }

/* Live-Suche Dropdown (bestehend) */
.combo{ position:relative; }
.search-results{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid #cfdaf4; border-top:none;
  z-index:20; max-height:260px; overflow:auto; border-radius:0 0 10px 10px;
  box-shadow:0 10px 24px rgba(40,80,160,.12);
}
.search-item{ padding:10px 12px; cursor:pointer; border-top:1px solid #eef3ff; background:linear-gradient(180deg,#fff,#f8fbff); }
.search-item:hover{ background:#eef5ff; }

/* Spec-Editor (wie zuvor) */
.sep{ height:1px; background:linear-gradient(90deg,#dce6ff,rgba(0,0,0,0)); margin:10px 0; }
.spec-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
.spec-row{ display:grid; grid-template-columns: 240px 1fr; gap:8px; align-items:center; }
.spec-label{ color:#334; font-weight:600; font-size:12px; }
.spec-input{ font-size:12px; padding:8px; }
@media (max-width:700px){ .spec-row{ grid-template-columns:1fr; } }

/* Spezifikationen: kompakt (12px) + 2 Spalten */
.spec-list.slim {
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2 Spalten */
  gap: 10px;
}
@media (max-width: 900px) {
  .spec-list.slim { grid-template-columns: 1fr; } /* mobil 1 Spalte */
}

/* einzelne Karten/Zeilen */
.spec-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #d2defc;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f7faff);
  transition: box-shadow .15s, border-color .15s, background .15s;
}
.spec-item:hover {
  border-color: #b9c9ff;
  background: linear-gradient(180deg, #f9fbff, #eef3ff);
  box-shadow: 0 6px 18px rgba(60,100,200,.10);
}

.spec-item .left { min-width: 0; }
.spec-key {
  font-weight: 600;
  color: #0b234a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spec-example {
  color: #667; opacity: .85;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.spec-item .right {
  display: flex; align-items: center; gap: 8px;
}
.chk { display: inline-flex; align-items: center; gap: 6px; }
.chk input { transform: scale(0.95); }

.shortcode {
  width: 140px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #cfe0ff;
  background: #fff;
}

/* Aktionsleiste unten */
.spec-actions-bar {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px;
}

/* === Spezifikationen: ultrakompakte 2-Spalten-Liste (12px) === */
.spec-compact { font-size: 12px; }
.spec-ul{
  list-style: none; margin: 0; padding: 0;
  column-count: 2;                 /* zwei Spalten */
  column-gap: 16px;
}
@media (max-width: 900px){ .spec-ul{ column-count: 1; } }

.spec-li{
  break-inside: avoid;             /* verhindert Spaltenbruch in einem Item */
  display: flex; align-items: center; gap: 8px;
  padding: 2px 6px; margin: 0 0 4px 0;
  border: 1px solid #dbe6ff;
  border-radius: 8px;
  background: linear-gradient(180deg,#ffffff,#f7faff);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.spec-li:hover{
  background: linear-gradient(180deg,#f9fbff,#eef3ff);
  border-color: #b9c9ff;
  box-shadow: 0 4px 12px rgba(60,100,200,.08);
}

.spec-key{
  flex: 1 1 auto; min-width: 0;
  font-weight: 600; color: #0b234a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.spec-rel{
  display: inline-flex; align-items: center; gap: 4px;
  color: #4c5d86; user-select: none;
}
.spec-rel input{ transform: scale(.9); }

.spec-sc{
  width: 120px; max-width: 40%;
  font-size: 12px; padding: 4px 6px;
  border: 1px solid #cfe0ff; border-radius: 6px; background: #fff;
}

/* Verkaufsliste – kompakte Form */
.sale-form.slim { font-size:12px; }
.sale-form.slim input,
.sale-form.slim select,
.sale-form.slim textarea { font-size:12px; padding:6px 8px; }
.grid2.slim { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:900px){ .grid2.slim { grid-template-columns:1fr; } }
.card.alt.slim h3 { margin-top:0; }

/* Live-Suche (wie gehabt) */
.combo{ position:relative; }
.search-results{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid #cfdaf4; border-top:none;
  z-index:20; max-height:260px; overflow:auto; border-radius:0 0 10px 10px;
  box-shadow:0 10px 24px rgba(40,80,160,.12);
}
.search-item{ padding:8px 10px; cursor:pointer; border-top:1px solid #eef3ff; background:linear-gradient(180deg,#fff,#f8fbff); font-size:12px; }
.search-item:hover{ background:#eef5ff; }

/* Schlanke Liste der Einträge (2 Spalten) */
.sales-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:900px){ .sales-list { grid-template-columns:1fr; } }
.sales-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid #d2defc; border-radius:10px;
  background:linear-gradient(180deg,#ffffff,#f7faff);
  padding:6px 10px; font-size:12px;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
.sales-row:hover{
  border-color:#b9c9ff;
  background:linear-gradient(180deg,#f9fbff,#eef3ff);
  box-shadow:0 6px 18px rgba(60,100,200,.10);
}
.sales-row .cell{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sales-row .cell.id{ font-weight:700; color:#334; margin-right:4px; }
.sales-row .cell.k{ color:#5a6b96; font-weight:600; }
.sales-row .cell.v.name{ max-width:44vw; }
.row-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn.xs{ width:24px; height:24px; font-size:14px; border-radius:8px; padding:0; }

ini_set('display_errors','1'); error_reporting(E_ALL);
/* === Edit-Lightbox thumbs (50x50) === */
#ie_imgs img { width:50px; height:50px; object-fit:cover; }


/* === Sales table strict alignment (2025-10-08) === */
.sales-table{ margin-bottom:8px; }
.sales-table .sales-header-row,
.sales-list .sales-row.grid{
  display:grid;
  grid-template-columns: 56px 120px 1fr 110px 90px 70px 64px 240px 96px;
  align-items:center;
  column-gap:8px;
  text-align:center;
}
.sales-table .sales-header-row{
  font-weight:700; color:#334; font-size:12px;
  padding:6px 10px; border:1px solid #cfdaf4; border-radius:10px;
  background:linear-gradient(180deg,#fafcff,#f0f6ff);
  margin-bottom:6px;
}
.sales-list{ display:block; }
.sales-row{ display:block !important; }
.sales-list .sales-row.grid{
  display:grid !important;
  border:1px solid #d2defc; border-radius:10px; padding:6px 10px;
  background:linear-gradient(180deg,#ffffff,#f7faff);
}
.sales-list .sales-row.grid .cell{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sales-list .sales-row.grid .cell.name{ text-align:left; }
.sales-list .sales-row.grid .row-actions{ justify-self:end; display:flex; gap:6px; }

.cell.imgs{ position:relative; }
.cell.imgs .img-hover{
  position:absolute; top:100%; left:0; margin-top:6px; display:none;
  width:150px; height:150px; padding:6px; background:#fff; border:1px solid #dfe7ff; border-radius:8px;
  box-shadow:0 10px 24px rgba(20,40,120,.15); z-index:50;
}
.cell.imgs:hover .img-hover{ display:block; }
.cell.imgs .img-hover img{ width:150px; height:150px; object-fit:cover; display:block; }
/* === Datawasher Sales: strict alignment (2025-10-08) === */

/* 0) Edit-Lightbox Bildvorschau 50x50 erzwingen */
#ie_imgs img {
  width:50px !important;
  height:50px !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
}

/* 1) Header + Zeilen: identische Grid-Spalten */
.sales-table .sales-header-row,
.sales-list .sales-row.grid {
  display:grid !important;
  grid-template-columns:
    56px   /* ID */
    120px  /* PN */
    1fr    /* Name */
    110px  /* Bilder */
    90px   /* Geizhals */
    70px   /* Demo */
    64px   /* Qty */
    240px  /* UVP / Shop / MA */
    96px;  /* Aktion */
  align-items:center;
  column-gap:8px;
}

/* 2) Header-Styling */
.sales-table { margin-bottom:8px; }
.sales-table .sales-header-row{
  font-weight:700; color:#334; font-size:12px;
  padding:6px 10px; border:1px solid #cfdaf4; border-radius:10px;
  background:linear-gradient(180deg,#fafcff,#f0f6ff);
  margin-bottom:6px;
}

/* 3) Altes Layout neutralisieren, Grid durchsetzen */
.sales-list{ display:block !important; }
.sales-row{ display:block !important; } /* kill old flex */
.sales-list .sales-row.grid{
  border:1px solid #d2defc; border-radius:10px; padding:6px 10px;
  background:linear-gradient(180deg,#ffffff,#f7faff);
}
.sales-list .sales-row.grid .cell{
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sales-list .sales-row.grid .cell.name{ text-align:center; }
.sales-list .sales-row.grid .row-actions{ justify-self:end; display:flex; gap:6px; }

/* 4) Bilder: Hover-Vorschau 150x150 */
.cell.imgs{ position:relative; }
.cell.imgs .img-hover{
  position:absolute; top:100%; left:0; margin-top:6px; display:none;
  width:150px; height:150px; padding:6px;
  background:#fff; border:1px solid #dfe7ff; border-radius:8px;
  box-shadow:0 10px 24px rgba(20,40,120,.15); z-index:50;
}
.cell.imgs:hover .img-hover{ display:block; }
.cell.imgs .img-hover img{
  width:150px; height:150px; object-fit:cover; display:block;
}


/* === Spezifikationen: 2-Zeilen-Layout (Titel+Relevant | Shortcode+Titel) === */
.spec-compact {
  font-size: 12px;
}

.spec-compact .spec-li{
  display: block;
  padding: 4px 6px;
  margin: 0 0 4px 0;
}

.spec-compact .spec-row-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.spec-compact .spec-row-bottom{
  display: flex;
  gap: 8px;
}

.spec-compact .spec-field{
  flex: 1 1 0;
  min-width: 0;
}

.spec-compact .spec-input{
  width: 100%;
  font-size: 12px;
  padding: 4px 6px;
}

.spec-compact .spec-input-sc{
}

.spec-compact .spec-rel{
  font-size: 12px;
  white-space: nowrap;
}


/* ==========================================================
   Datawasher Midnight Theme v13.0
   Global dark navy visual layer inspired by Developer UI.
   ========================================================== */
:root{
  --dw-bg:#08111f;
  --dw-bg-2:#0b1628;
  --dw-surface:#111d31;
  --dw-surface-2:#16243a;
  --dw-surface-3:#0f1a2c;
  --dw-border:#2a3a55;
  --dw-border-soft:#223149;
  --dw-text:#e8eef8;
  --dw-muted:#94a6c1;
  --dw-blue:#3b82f6;
  --dw-blue-2:#2563eb;
  --dw-cyan:#38bdf8;
  --dw-green:#22c55e;
  --dw-red:#ef4444;
  --dw-amber:#f59e0b;
  --dw-shadow:0 16px 45px rgba(0,0,0,.26);
  color-scheme:dark;
  --text:var(--dw-text);
  --muted:var(--dw-muted);
  --c5:var(--dw-cyan);
}
html{background:var(--dw-bg)!important}
body{
  background:
    radial-gradient(circle at 12% -10%,rgba(37,99,235,.18),transparent 30%),
    radial-gradient(circle at 90% 5%,rgba(56,189,248,.08),transparent 26%),
    linear-gradient(180deg,var(--dw-bg),#0a1425 52%,#08111f)!important;
  color:var(--dw-text)!important;
  min-height:100vh;
}
a{color:#7dd3fc!important}a:hover{color:#bae6fd!important;text-decoration:none!important}
.container{max-width:1460px!important;margin:22px auto!important;padding:0 20px!important}

/* Header / navigation */
.topbar.gradient,.topbar{
  background:linear-gradient(90deg,#0d1930,#12284a 55%,#123258)!important;
  border-bottom:1px solid #29405f!important;
  box-shadow:0 10px 30px rgba(0,0,0,.22)!important;
  padding:12px 20px!important;
}
.brand{font-size:1.05rem!important;font-weight:800!important;letter-spacing:.4px!important;color:#f8fbff!important}
.userbox{gap:8px!important}.userbox>span{color:#cbd5e1!important}
.topmenu{
  background:rgba(11,22,40,.96)!important;
  border-bottom:1px solid var(--dw-border)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
  gap:7px!important;padding:10px 14px!important;backdrop-filter:blur(12px);
}
.menu-btn{
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  background:#111d31!important;border:1px solid #2b3b57!important;color:#cbd5e1!important;
  border-radius:9px!important;padding:8px 11px!important;font-size:.86rem!important;font-weight:650!important;
  box-shadow:none!important;transition:.16s ease!important;
}
.menu-btn:hover{transform:translateY(-1px)!important;background:#182945!important;border-color:#3c5a82!important;color:#fff!important}
.menu-btn.active{background:linear-gradient(180deg,#1d4f91,#173c70)!important;border-color:#4b83c9!important;color:#fff!important;box-shadow:0 7px 20px rgba(37,99,235,.18)!important}

/* Core surfaces */
.card,.panel,.dw-card,.dw-panel,.dw-kpi,.dw-period,.dw-act,.dw-user-card,.dw-create,.pf-section,.pf-result,.pf-results-card,.pf-search-top,.pf-field,.pf-own,.pf-no-offers,.dwcsv-card,
[class*="-card"]{
  background:linear-gradient(180deg,var(--dw-surface),#0f1a2c)!important;
  border-color:var(--dw-border)!important;color:var(--dw-text)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.16)!important;
}
.card.alt{background:linear-gradient(180deg,#132239,#101c30)!important}
h1,h2,h3,h4,h5,h6,.dw-db-head h2,.dw-panel h3,.dw-kpi .v,.dw-mini-row b,.pf-result-title,.dw-user-name{color:#f1f5f9!important}
.muted,.dw-muted,.pf-muted,.dw-panel-sub,.dw-kpi .l,.dw-act .time,.pw-note{color:var(--dw-muted)!important}

/* Forms */
input,select,textarea{
  background:#0c1728!important;color:#e5edf8!important;border:1px solid #334866!important;
  border-radius:9px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
input::placeholder,textarea::placeholder{color:#61738e!important}
input:focus,select:focus,textarea:focus{border-color:#4f8edc!important;box-shadow:0 0 0 3px rgba(59,130,246,.16)!important}
label{color:#a9b8cc!important}
option{background:#0c1728!important;color:#e5edf8!important}

/* Buttons */
.btn,.btn-primary,button.btn{
  background:#1a2a43!important;border:1px solid #3b506e!important;color:#e7eef8!important;
  border-radius:9px!important;box-shadow:none!important;font-weight:700!important;
}
.btn:hover,.btn-primary:hover,button.btn:hover{background:#223856!important;border-color:#52729a!important;color:#fff!important;box-shadow:0 8px 18px rgba(0,0,0,.18)!important}
.btn.primary,.btn-primary,.gradient.btn{background:linear-gradient(180deg,#2f73cb,#245ca6)!important;border-color:#4e8bd4!important;color:#fff!important}
.btn.green{background:#15803d!important}.btn.red{background:#991b1b!important}.btn.gray{background:#334155!important}
.icon-btn{background:#17263c!important;border-color:#334866!important;color:#dbeafe!important}

/* Tables */
.table,table{color:var(--dw-text)!important}
.table th,.table td,table th,table td{border-color:#263751!important;color:#dbe5f2!important}
.table th,table th{background:#14233a!important;color:#dce8f8!important}
.table tbody tr:nth-child(even),table tbody tr:nth-child(even){background:rgba(255,255,255,.015)!important}
.table tbody tr:hover,table tbody tr:hover{background:rgba(59,130,246,.08)!important}

/* Lists, searches and modals */
.search-results,.modal .content,.dw-modal,.dw-user-dialog,.dwlb-sheet{
  background:#101c30!important;border-color:#334866!important;color:var(--dw-text)!important;box-shadow:var(--dw-shadow)!important;
}
.search-item{background:#111d31!important;border-color:#263751!important;color:#e2e8f0!important}.search-item:hover{background:#1b2e4a!important}
.modal,.dwlb-overlay{background:rgba(2,7,15,.72)!important;backdrop-filter:blur(5px)}
.badge,.dw-badge,.pf-badge,.tag{background:#20314c!important;border-color:#38506f!important;color:#cbd5e1!important}
.alert-danger,.pw-err{background:#3b171c!important;border-color:#7f2833!important;color:#fecaca!important}
.pw-ok{background:#123524!important;border-color:#24633f!important;color:#bbf7d0!important}

/* Category tree */
.cat-item.level-1,.cat-item.level-2,.cat-item.level-3,.cat-item{
  background:#111d31!important;border-color:#30425f!important;color:#e5edf8!important;
}
.cat-name{color:#e5edf8!important}.drag-handle{background:#17263c!important;border-color:#334866!important;color:#b9c7da!important}
.cat-del{background:#30191f!important;border-color:#60313a!important;color:#fecaca!important}

/* Dashboard theme refinements */
.dw-dashboard{gap:16px!important}.dw-db-head{padding:4px 2px 0}
.dw-kpi{position:relative!important;overflow:hidden!important;padding:16px 15px 14px!important;min-height:104px!important}
.dw-kpi::after{content:"";position:absolute;right:-24px;bottom:-35px;width:90px;height:90px;border-radius:50%;background:rgba(59,130,246,.08)}
.dw-kpi-icon{font-size:1.35rem;display:block;margin-bottom:8px;filter:saturate(.9)}
.dw-kpi .v{font-size:1.5rem!important}.dw-kpi .l{font-size:.76rem!important}
.dw-panel{padding:17px!important}.dw-panel h3{display:flex;align-items:center;gap:8px!important}
.dw-period{background:#0c1728!important;border-color:#263751!important}.dw-period .title{color:#9fb3ce!important}
.dw-act{background:#0d192b!important;border-color:#263751!important}.dw-act .name{color:#cfe3ff!important}.dw-act .info{color:#a9bad0!important}
.dw-empty{color:#7f91aa!important;border-color:#33445e!important;background:#0c1728!important}
.dw-pos{color:#65d58b!important}.dw-warn{color:#fbbf24!important}.dw-neg{color:#fb7185!important}.dw-dot.ok{background:#22c55e!important}.dw-dot.err{background:#ef4444!important}
.dw-badge.ok{background:#123524!important;color:#86efac!important}.dw-badge.err{background:#3b171c!important;color:#fda4af!important}

/* Product finder */
.pf-tabs,.pf-category-pills{border-color:#2a3a55!important}.pf-chip,.pf-cat{background:#16263e!important;border-color:#334866!important;color:#cbd5e1!important}.pf-chip.active,.pf-cat.active{background:#244f86!important;color:#fff!important}
.pf-result-template,.pf-detail,.pf-fails{background:#0c1728!important;border-color:#263751!important;color:#cbd5e1!important}
.pf-proc-table{background:#0b1628!important}.pf-proc-table th{background:#14233a!important}.pf-score{color:#93c5fd!important}.pf-copy{color:#dbeafe!important}

/* User management */
.dw-role{background:#20314c!important;color:#cbd5e1!important}.dw-avatar{background:#1d4f91!important;color:#fff!important}.dw-admin-note{background:#34270d!important;border-color:#6d5415!important;color:#fde68a!important}.dw-perm{background:#0d192b!important;border-color:#2a3a55!important}

/* Login and password page */
.login-card{background:linear-gradient(180deg,#111d31,#0d1829)!important;border-color:#30415d!important;box-shadow:0 28px 70px rgba(0,0,0,.42)!important}
.login-card h1{color:#f8fafc!important}.captcha-img{border-color:#334866!important}.public-links{color:#8294ae!important}

/* Common inline-light leftovers from older pages */
[style*="background:#fff"],[style*="background: #fff"],[style*="background:white"],[style*="background: white"]{background:#111d31!important;color:var(--dw-text)!important}
[style*="color:#10284d"],[style*="color: #10284d"],[style*="color:#0b234a"]{color:#e8eef8!important}
[style*="border:1px solid #d"],[style*="border: 1px solid #d"]{border-color:#2a3a55!important}

/* Scrollbar */
*{scrollbar-color:#405675 #0b1628;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0b1628}::-webkit-scrollbar-thumb{background:#405675;border-radius:20px;border:2px solid #0b1628}

.footer{color:#6f829d!important}
@media(max-width:900px){.container{padding:0 12px!important}.topmenu{justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important}.menu-btn{white-space:nowrap!important}}

/* ==========================================================
   Datawasher Midnight Theme v13.1 – Legacy Component Polish
   Closes remaining light-theme surfaces in older modules.
   ========================================================== */

/* 1) Produktdaten einlesen – bereits eingelesene Produkte */
.grid2rows.slim .prod-row.slim,
.prod-row.slim,
.prod-card,
.prod-card.slim{
  background:linear-gradient(180deg,#132239,#101b2d)!important;
  border:1px solid #2d4260!important;
  color:#e7eef8!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12)!important;
}
.grid2rows.slim .prod-row.slim:hover,
.prod-row.slim:hover,
.prod-card:hover,
.prod-card.slim:hover{
  background:linear-gradient(180deg,#182b46,#13243b)!important;
  border-color:#45658d!important;
  box-shadow:0 7px 20px rgba(0,0,0,.2)!important;
}
.prod-row.slim .cell,
.prod-row.slim .cell.id,
.prod-row.slim .cell.k,
.prod-row.slim .cell.v,
.prod-line .k,.prod-line .v{
  color:#c9d7e9!important;
}
.prod-row.slim .cell.id{color:#f1f5f9!important}
.prod-row.slim .cell.k{color:#83a2ca!important}

/* 2) Spezifikationen – Karten komplett dunkel */
.spec-list.slim .spec-item,
.spec-item,
.spec-compact .spec-li{
  background:linear-gradient(180deg,#132239,#101b2d)!important;
  border:1px solid #2d4260!important;
  color:#e7eef8!important;
  box-shadow:none!important;
}
.spec-list.slim .spec-item:hover,
.spec-item:hover,
.spec-compact .spec-li:hover{
  background:#172941!important;
  border-color:#45658d!important;
}
.spec-key,.spec-example,.spec-label,
.spec-compact .spec-row-top,
.spec-compact .spec-rel,
.spec-item label{
  color:#dce7f5!important;
}
.spec-example{color:#91a5c1!important}
.spec-compact input[type="checkbox"]{accent-color:#3b82f6}

/* 3) Verkaufsliste / Lagerstände */
.sales-table .sales-header-row{
  background:#16263d!important;
  border-color:#304762!important;
  color:#dce8f8!important;
}
.sales-list .sales-row.grid,
.sales-row.grid{
  background:linear-gradient(180deg,#132239,#101b2d)!important;
  border-color:#2d4260!important;
  color:#dce7f5!important;
}
.sales-list .sales-row.grid:hover,
.sales-row.grid:hover{
  background:#172941!important;
  border-color:#45658d!important;
}
.sales-row .cell,.sales-row .cell.id,.sales-row .cell.k,.sales-row .cell.v,
.sales-list .sales-row.grid .cell{
  color:#d2deed!important;
}
.sales-row .cell.id{color:#f1f5f9!important}
.sales-row .cell.k{color:#89a5c8!important}
.cell.imgs .img-hover{background:#101c30!important;border-color:#334866!important}

/* 4) Vorformatierte Titel – Legende */
.legend-wrap{
  background:linear-gradient(180deg,#111f34,#0d192b)!important;
  border-color:#2d4260!important;
  color:#dce7f5!important;
}
.legend-title{color:#f1f5f9!important}
.chip,.chip.static,.chip.hint{
  background:#17263d!important;
  border-color:#38516f!important;
  color:#dce7f5!important;
}
.chip code{color:#9dd7ff!important}
.chip-sub{color:#c39af1!important;opacity:1!important}

/* 5) Product Finder – buttons, search criteria and procurement table */
.pf-tabs .btn,.pf-tabs button,
.pf-category-pills .pf-cat,
.pf-actions .btn,.pf-actions button,
.pf-search-top button,
.pf-results-toolbar button{
  background:#17283f!important;
  border:1px solid #36506e!important;
  color:#dbeafe!important;
  box-shadow:none!important;
}
.pf-tabs .on,.pf-tabs .btn.on,.pf-tabs button.on,
.pf-category-pills .on,.pf-cat.on,
.pf-category-pills .pf-cat.active{
  background:linear-gradient(180deg,#2d72c8,#245a9f)!important;
  border-color:#5790d3!important;
  color:#fff!important;
}
.pf-search-grid,.pf-searchrow,.pf-field{
  background:linear-gradient(180deg,#132239,#101b2d)!important;
  border-color:#304762!important;
  color:#e5edf8!important;
}
.pf-searchrow-head,.pf-field-head,.pf-group-title{color:#f1f5f9!important}
.pf-searchrow .pf-muted,.pf-field .pf-muted{color:#8fa4c0!important}
.pf-searchrow-controls{gap:8px!important}
.pf-searchrow-controls input,.pf-searchrow-controls select,
.pf-field input,.pf-field select{
  background:#0b1728!important;border-color:#36506e!important;color:#e6eef9!important;
}
.pf-proc-table,
.pf-proc-table tbody,
.pf-proc-table tr,
.pf-proc-table td,
.pf-proc-table th{
  background:#0d192b!important;
  color:#dce7f5!important;
  border-color:#2b405c!important;
}
.pf-proc-table th{background:#16263d!important;color:#eaf2fd!important}
.pf-proc-table tr.best td,.pf-proc-table tr:first-child td{background:#14283b!important}
.pf-best-price{color:#8ee6aa!important;font-weight:800!important}
.pf-results-toolbar,.pf-actions{background:#101c30!important;border-color:#2a3a55!important}

/* 6) User & Rechte – role sections and containers */
.dw-users .dw-section,
.dw-users .dw-role-box,
.dw-role-box,
.dw-section,
.dw-role-boxes > *,
.dw-users-list{
  background:linear-gradient(180deg,#111f34,#0d192b)!important;
  border-color:#2d4260!important;
  color:#e7eef8!important;
}
.dw-section-head,.dw-role-box h2,.dw-role-box h3{color:#f1f5f9!important}
.dw-user-card{
  background:#14243a!important;
  border-color:#304762!important;
}
.dw-user-card:hover{background:#192d48!important;border-color:#45658d!important}
.dw-perm{
  background:#101d31!important;
  border-color:#304762!important;
  color:#d9e5f3!important;
}
.dw-perm:hover{background:#16283f!important}
.dw-role-box .dw-muted,.dw-section .dw-muted{color:#90a5c1!important}

/* Generic older white strips/cards not covered by semantic classes */
.prod-row.slim,
.spec-item,
.sales-row.grid,
.legend-wrap,
.pf-searchrow,
.dw-section,
.dw-role-box{
  color-scheme:dark!important;
}

/* Keep text contrast strong on all dark surfaces */
.prod-row.slim strong,.spec-item strong,.sales-row.grid strong,
.legend-wrap strong,.pf-searchrow strong,.dw-section strong,.dw-role-box strong{
  color:#f8fafc!important;
}

/* Responsive polish */
@media(max-width:900px){
  .pf-search-grid{grid-template-columns:1fr!important}
  .dw-role-boxes{grid-template-columns:1fr!important}
}

/* ==========================================================
   Datawasher Midnight Theme v13.2 – Inventory contrast + Finder nav
   ========================================================== */

/* Verkaufsliste: Produktnamen und alle Zellen sicher hell auf dunkel. */
.sales-table .sales-list .sales-row.grid,
.sales-table .sales-list .sales-row.grid .cell,
.sales-table .sales-list .sales-row.grid .cell.name,
.sales-table .sales-list .sales-row.grid .name-text,
.sales-table .sales-list .sales-row.grid span:not(.note-tip),
.sales-row.grid .name-text {
  color:#e7eef8!important;
}
.sales-table .sales-list .sales-row.grid .cell.name.has-note .name-text {
  color:#60a5fa!important;
}
.sales-table .sales-header-row,
.sales-table .sales-header-row .col {
  color:#f1f5f9!important;
}

/* Produktfinder: Tabs und Kategorie-Pills sind Links (<a>), nicht Buttons. */
.pf-tabs {
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  border:0!important;
  background:transparent!important;
}
.pf-tabs > a,
.pf-category-pills > a,
a.pf-cat {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:8px 14px!important;
  border-radius:10px!important;
  border:1px solid #36506e!important;
  background:linear-gradient(180deg,#17283f,#132239)!important;
  color:#dbeafe!important;
  text-decoration:none!important;
  font-weight:700!important;
  line-height:1.1!important;
  box-shadow:none!important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease!important;
}
.pf-tabs > a:hover,
.pf-category-pills > a:hover,
a.pf-cat:hover {
  background:#203653!important;
  border-color:#52749c!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
.pf-tabs > a.on,
.pf-tabs > a.active,
.pf-category-pills > a.on,
.pf-category-pills > a.active,
a.pf-cat.on,
a.pf-cat.active {
  background:linear-gradient(180deg,#2d72c8,#245a9f)!important;
  border-color:#5a95dc!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(37,99,235,.2)!important;
}

/* Finder-Konfiguration: weiße Badge-/Pill-Reste vermeiden. */
.pf-list .pf-cat .pf-badge,
.pf-cat .pf-badge {
  background:#223754!important;
  border:1px solid #3c5879!important;
  color:#bfd2ea!important;
}
.pf-cat.on .pf-badge,
.pf-cat.active .pf-badge {
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.22)!important;
  color:#fff!important;
}

/* Suchindex-Aktionsbutton an Theme angleichen. */
.pf-index-inline button,
.pf-search-top button,
.pf-actions button,
.pf-results-toolbar button {
  background:linear-gradient(180deg,#1a2d47,#14243a)!important;
  border:1px solid #3b5878!important;
  color:#e5edf8!important;
  border-radius:9px!important;
  padding:8px 12px!important;
  font-weight:700!important;
}
.pf-index-inline button:hover,
.pf-search-top button:hover,
.pf-actions button:hover,
.pf-results-toolbar button:hover {
  background:#223b5d!important;
  border-color:#56789f!important;
  color:#fff!important;
}