:root{
  --bg:#f4f7fa;
  --header:#1f6fb2;
  --panel:#ffffff;
  --accent:#c62828;
  --muted:#6b6b6b;
  --radius:10px;
  --gap:10px;
  --card-shadow: 0 8px 24px rgba(16,24,40,0.06);
  --text:#111;
  --ui-size:13px;
  --cat-color: #c62828;
  --subcat-color: #ff6fa3;
  --row-height:44px;
  --silver-100: #e0e0e0;
  --silver-200: #bfbfbf;
  --silver-300: #8f8f8f;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#f6f8fa 0%, #eef3f7 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-size: var(--ui-size);
}

/* HEADER */
.app-header{
  background: linear-gradient(180deg, var(--header), #1667a8);
  color:#fff;
  position:sticky;
  top:0;
  z-index:120;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
  padding: 12px 0;
}
.header-inner{
  width:100%;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand-area{display:flex;align-items:center;gap:12px}
.menu-btn{background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer;padding:6px}

/* BRAND */
.brand { position: relative; display: inline-block; perspective: 800px; -webkit-font-smoothing: subpixel-antialiased; }
.brand-text{
  display:inline-block;
  font-weight:900;
  font-size:1.18rem;
  letter-spacing:0.6px;
  color:#fff;
  padding:6px 10px;
  transform-origin:50% 50%;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.12),
    0 4px 10px rgba(0,0,0,0.5),
    0 0 8px rgba(255,255,255,0.06),
    0 0 22px rgba(30,144,255,0.12);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25));
  animation: floatTitle 4.5s ease-in-out infinite;
  will-change: transform, filter;
}
.brand-text::after{
  content: "";
  position: absolute;
  inset: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.12), rgba(255,255,255,0.00));
  mix-blend-mode: screen;
  opacity: 0.6;
  transform: translateZ(0);
  animation: brandShine 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand-text, .brand-text::after { animation: none; }
}
@keyframes floatTitle {
  0% { transform: translateY(0px) rotateX(0deg) }
  40% { transform: translateY(-4px) rotateX(1deg) }
  70% { transform: translateY(-2px) rotateX(-0.5deg) }
  100% { transform: translateY(0px) rotateX(0deg) }
}
@keyframes brandShine {
  0% { left: -60%; opacity:0.35 }
  60% { left: 120%; opacity:0.28 }
  100% { left: 120%; opacity:0.0 }
}

/* header right area */
.header-actions{display:flex;align-items:center;gap:12px}
.legend{display:flex;gap:10px;align-items:center}
.legend-item{font-size:0.82rem;color:rgba(255,255,255,0.92);display:flex;align-items:center;gap:6px}
.mhd-swatch{width:10px;height:10px;border-radius:3px;display:inline-block}
.search-area{display:flex;align-items:center;gap:8px}
.search-area input[type="search"]{
  padding:6px 8px;border-radius:8px;border:0;width:200px;background:rgba(255,255,255,0.12);color:#fff;
  outline: none;font-size:0.95rem;
}
.search-area select{
  background:#fff;color:#111;border-radius:8px;padding:6px 8px;min-width:150px;font-size:0.95rem;
}
.search-area select option{ color:#000; }
.icon-btn{
  background:transparent;border:0;color:#fff;font-size:16px;cursor:pointer;padding:6px;border-radius:6px;
}
.icon-btn:hover{ background: rgba(255,255,255,0.06); }

/* CART (header) */
.cart-wrap{ position:relative; display:inline-block; }
.cart-btn{ position:relative; font-size:16px; background:transparent; color:#fff; border:0; padding:6px 10px; cursor:pointer; }
.cart-badge{
  display:inline-block;
  min-width:18px;height:18px;line-height:18px;border-radius:999px;
  background:#ff6b6b;color:#fff;font-weight:800;font-size:11px;text-align:center;margin-left:6px;padding:0 5px;
  vertical-align:middle;
}

/* cart panel */
.cart-panel{
  position:absolute;
  right:0;
  top:44px;
  width:360px;
  max-height:420px;
  overflow:auto;
  background:#fff;
  color:#111;
  border-radius:8px;
  box-shadow: 0 14px 40px rgba(8,20,40,0.18);
  border:1px solid rgba(0,0,0,0.06);
  z-index:999;
  padding:10px;
}
.cart-panel h4{ margin:0 0 8px 0; font-size:1rem; }
.cart-item{ display:flex; gap:8px; align-items:center; padding:8px; border-bottom:1px dashed #eef3f7; }
.cart-item .name{ flex:1; font-weight:700; font-size:0.95rem; }
.cart-item .qty{ width:72px; }
.cart-item input[type="number"]{ width:64px; padding:6px 8px; border-radius:6px; border:1px solid #e6edf3; }
.cart-item .remove{ background:transparent;border:0;color:#d64545;cursor:pointer;font-weight:700; }
.cart-summary{ display:flex; justify-content:space-between; align-items:center; padding:10px 6px; font-weight:800; }
.cart-actions{ display:flex; gap:8px; justify-content:flex-end; padding-top:8px; }
.cart-actions .btn{ padding:8px 10px; }

/* PAGE */
.page-wrap{padding:14px 10px 32px 10px}
.page-container{
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  padding:0 10px;
  max-width: none;
}

/* Panel common */
.panel{
  background:var(--panel);
  padding:12px;
  border-radius:var(--radius);
  box-shadow: var(--card-shadow);
}

/* FORM panel */
.form-panel-top{ display:flex; flex-direction:column; gap:8px; }
.form-title{margin:0;font-size:1.02rem}

/* 3D form styling */
.form-3d{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,246,248,1));
  border-radius:12px;
  padding:14px;
  box-shadow:
    0 8px 28px rgba(8,20,40,0.08),
    0 1px 0 rgba(255,255,255,0.8) inset;
  border: 1px solid rgba(0,0,0,0.04);
}

/* form grid */
.form-grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
  gap:8px;
  align-items:end;
}
.form-grid .field label{display:block;font-size:0.92rem;color:var(--muted)}
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid select{
  background: linear-gradient(180deg, #fff, #fbfcfd);
  border: 1px solid rgba(8,20,40,0.06);
  padding:8px 10px;
  border-radius:8px;
  box-shadow: inset 0 2px 6px rgba(10,20,40,0.03);
  transition: transform .12s ease, box-shadow .12s ease;
}
.form-grid input:focus,
.form-grid select:focus{
  outline:none;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(16,64,255,0.08), inset 0 2px 6px rgba(10,20,40,0.04);
  border-color: rgba(35,95,255,0.7);
}

/* actions inline */
.actions-field-inline .form-actions{
  display:flex;
  justify-content:flex-end;
}
.actions-field-inline #saveBtn{
  min-height: 40px;
  padding: 10px 16px;
}

/* 3D buttons */
.btn-3d{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; font-weight:700; border: none; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease; transform: translateZ(0); }
.btn-3d.primary, .btn-3d.btn-primary{ background: linear-gradient(180deg,#ff6b6b,#d64545); color:#fff; box-shadow: 0 12px 26px rgba(214,69,69,0.26), inset 0 -2px 6px rgba(0,0,0,0.12); }
.btn-3d.primary:hover, .btn-3d.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(214,69,69,0.28); }
.btn-3d.outline{ background: linear-gradient(180deg,#ffffff,#f6f7f8); color:#1b1b1b; border:1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.btn-3d.outline:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }

/* List panel and groups */
.list-panel .panel-header{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.list-panel h2{margin:0;font-size:1.02rem}
.list-panel .panel-sub{font-size:0.86rem;color:var(--muted)}

/* Category strip (metallic) */
.category{ margin:0 6px 12px 6px; border-radius:8px; overflow:visible; background: transparent; }
.category-header{
  position: relative;
  margin: 8px 0;
  padding: 16px 22px;
  border-radius:10px;
  background: linear-gradient(90deg,
    rgba(60,60,60,1) 0%,
    rgba(140,140,140,1) 20%,
    rgba(245,245,245,1) 48%,
    rgba(140,140,140,1) 72%,
    rgba(70,70,70,1) 100%
  );
  box-shadow:
    0 12px 32px rgba(0,0,0,0.30),
    0 -2px 8px rgba(255,255,255,0.06) inset;
  color: #fff;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:12px;
  overflow: hidden;
  font-size: 1.12rem;
  letter-spacing: 0.6px;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.18),
    0 3px 8px rgba(0,0,0,0.45);
  cursor:pointer;
}
.category-header::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width:10px;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), var(--cat-color));
  box-shadow: 0 3px 16px rgba(198,40,40,0.22);
  z-index: 1;
}
.category-header > * { position: relative; z-index: 3; }

.category.collapsed .sub-row-grid{ display:none; }

/* sub-row grid */
.sub-row-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:12px;
  align-items:start;
  padding:6px 6px;
  margin: 0 6px 8px 6px;
  background: transparent;
}
.sub-left{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  padding-top:6px;
}
.subcategory-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,111,163,0.08);
  color: var(--subcat-color);
  font-weight:600;
  font-size:0.92rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.subcat-icon{ font-size:1rem; display:inline-block; }

.sub-right{
  display:flex;
  flex-direction:column;
  gap:6px;
  background: #fff;
  border-radius:6px;
  padding:10px 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
  color: #111;
}

/* UPDATED: table header & product rows (removed price + total columns) */
.table-header{
  display:grid;
  grid-template-columns: 1fr 110px 48px 90px; /* Name | Menge | cart | MHD */
  gap:8px;
  padding:6px 0;
  font-size:0.85rem;
  color:var(--muted);
}
.prod-row{
  display:grid;
  grid-template-columns: 1fr 110px 48px 90px; /* Name | Menge | cart | MHD */
  gap:8px;
  align-items:center;
  padding:6px 0;
  height:var(--row-height);
  font-size:0.92rem;
  border-bottom:1px solid #e9eef2;
  cursor:pointer;
  color: #111 !important;
}
.prod-row:hover{ background: linear-gradient(180deg,#fff,#fbfcfd); transform: translateY(-1px); }
.prod-name{ font-weight:600; }
.mhd-cell{ display:flex; justify-content:flex-end; align-items:center; }

.buy-btn{ background:transparent; border:0; cursor:pointer; font-size:18px; padding:6px; border-radius:8px; }
.buy-btn:hover{ background:rgba(0,0,0,0.04); }

.mhd-badge{
  display:inline-block;padding:6px 8px;border-radius:999px;font-weight:700;font-size:0.82rem;
  min-width:54px;text-align:center;
}
.mhd-green{ background:#27ae60;color:#fff; }
.mhd-yellow{ background:#f1c40f;color:#111; }
.mhd-orange{ background:#f39c12;color:#fff; }
.mhd-expired{ background:#e74c3c;color:#fff; animation: pulse 1s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(231,76,60,0.6) } 70%{ box-shadow:0 0 0 10px rgba(231,76,60,0) } 100%{ box-shadow:0 0 0 0 rgba(231,76,60,0) } }

/* modal */
.kb-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.36); display:flex; align-items:center; justify-content:center; z-index:9999; padding:18px; }
.kb-card{ background:#fff;border-radius:10px; max-width:900px;width:100%; box-shadow:0 30px 60px rgba(0,0,0,0.24); padding:18px; display:flex; gap:18px; align-items:flex-start; color: #111; }
.kb-thumb{ width:140px; height:140px; border-radius:10px; background:#f6f6f8; border:1px solid #eee; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.kb-thumb img{ width:100%; height:100%; object-fit:cover; }
.kb-details{ flex:1; display:flex; flex-direction:column; gap:8px; }
.kb-card .small-muted{ color:#666 !important; }
.kb-actions{ display:flex; gap:10px; margin-top:8px; }
.kb-btn{ padding:10px 12px; border-radius:8px; border:1px solid #e8eef5; background:#fff; cursor:pointer; }
.kb-btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.kb-close{ margin-left:auto; background:transparent; border:0; font-size:1.2rem; color:#333 }

.catalog-mode-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(45,140,255,0.10);
  color:#0f63d9;
  font-weight:800;
  font-size:0.9rem;
}

/* DARK / NIGHT MODE adjustments */
body.dark{
  --bg:#0f1720;
  --header:#0b1220;
  --panel:#0e1621;
  --accent:#ff8a65;
  --muted:#aab3be;
  --text:#e9eef6;
  background: linear-gradient(180deg,#0b1220 0%, #0f1720 100%);
  color:var(--text);
}
body.dark .app-header{ background: linear-gradient(180deg,#0b1220,#0a2a42); }
body.dark .sub-right{ background:#fff; color:#111; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; }
body.dark .prod-row{ color:#111 !important; }
body.dark .category-header{
  background: linear-gradient(90deg,
    rgba(20,20,24,1) 0%,
    rgba(60,60,68,1) 20%,
    rgba(200,200,200,0.06) 48%,
    rgba(60,60,68,1) 72%,
    rgba(18,18,20,1) 100%
  );
  box-shadow:
    0 12px 36px rgba(0,0,0,0.6),
    0 -2px 8px rgba(255,255,255,0.02) inset;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* responsive */
@media (max-width:980px){
  :root{ --ui-size:12px; }
  .form-grid{ grid-template-columns: 1fr; }
  .search-area input[type="search"]{ width:140px; }

  /* UPDATED responsive columns (removed price/total) */
  .table-header, .prod-row { grid-template-columns: 1fr 90px 48px 70px; }

  .kb-card{ flex-direction:column; align-items:center; }
  .kb-thumb{ width:260px; height:260px; }

  .sub-row-grid{ grid-template-columns: 1fr; }
  .sub-left{ order:0; }
  .sub-right{ order:1; }
}