/* inventory.css – komplett (SVG-Icons via <img> + CSS filter) */

:root{
  --bg:#f2f2f2;
  --card:#ffffff;
  --text:#111111;
  --muted:#666666;
  --line:#dddddd;

  --btn:#111111;
  --btnText:#ffffff;

  --ghost:#e9e9e9;
  --pill:#f0f0f0;

  /* Icon-Farbsteuerung: Light = schwarz (kein Filter) */
  --iconFilter: none;
}

body.dark{
  --bg:#0e0e0e;
  --card:#1a1a1a;
  --text:#eeeeee;
  --muted:#aaaaaa;
  --line:#333333;

  --btn:#2b2b2b;
  --btnText:#ffffff;

  --ghost:#222222;
  --pill:#1b1b1b;

  /* Dark = Icons invertieren -> weiß */
  --iconFilter: invert(1) brightness(1.2) contrast(1.1);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }
.muted{ color:var(--muted); }

/* Header */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 12px;
  gap:12px;
}
.brand h1{
  margin:0;
  font-size:20px;
  line-height:1.2;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.pill{
  background:var(--pill);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px;
}

button{
  border:none;
  cursor:pointer;
  border-radius:10px;
  padding:10px;
  background:var(--btn);
  color:var(--btnText);
}
button:hover{ opacity:.92; }
button.ghost{
  width:auto;
  background:var(--ghost);
  color:var(--text);
  border:1px solid var(--line);
  padding:8px 10px;
}

/* Suche / Controls */
.controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px 6px;
}
input, select, textarea{
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  outline:none;
}
input, select{
  min-width:220px;
  flex:1 1 220px;
}

/* Ergebnis Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
  padding:12px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.card img{
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
  display:block;
}
.card h3{
  margin:10px 0 4px;
  font-size:16px;
}
.price{
  font-weight:800;
  font-size:18px;
  margin-top:8px;
}
.card button{
  width:100%;
  margin-top:10px;
}

/* Filterbar */
.filterbar{
  display:flex;
  gap:12px;
  padding:6px 12px 0;
  flex-wrap:wrap;
}
.filterblock{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  flex:1 1 320px;
}
.filtertitle{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:8px;
}
.pillrow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pillbtn{
  width:auto;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
}
.pillbtn.active{
  background:var(--ghost);
}

/* Plattform Tiles */
.platforms{
  padding:8px 12px 0;
}
.platforms-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:6px 0 10px;
}
.platforms h2{
  margin:0;
  font-size:16px;
}
.platform-group{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
}
.platform-group-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:8px;
}
.platform-group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.platform-tile{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
}
.platform-tile span{
  font-weight:700;
}
.platform-tile.active{
  outline:2px solid var(--line);
}

/* ✅ SVG Icon als IMG + Filter */
.piconimg{
  width:26px;
  height:26px;
  display:inline-block;
  object-fit:contain;
  filter: var(--iconFilter);
}

/* Mobile */
@media (max-width:720px){
  input, select{ min-width:160px; }
  .platform-group-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
}
/* ===========================
   Status Farben (BADGES)
   Klassen: .status-verfuegbar / .status-reserviert / .status-verkauft
   =========================== */
.status{
  display:inline-block;
  margin-top:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid transparent;
}

/* 🟢 Verfügbar */
.status-verfuegbar{
  color:#0f5132;
  background:#d1e7dd;
  border-color:#badbcc;
}

/* 🟡 Reserviert */
.status-reserviert{
  color:#664d03;
  background:#fff3cd;
  border-color:#ffecb5;
}

/* 🔴 Verkauft */
.status-verkauft{
  color:#842029;
  background:#f8d7da;
  border-color:#f5c2c7;
}

/* Dark Mode */
body.dark .status-verfuegbar{
  color:#75f0b5;
  background:#0f3d2e;
  border-color:#1b6b4f;
}
body.dark .status-reserviert{
  color:#ffe08a;
  background:#3b2f00;
  border-color:#7a5c00;
}
body.dark .status-verkauft{
  color:#ff9aa2;
  background:#3b0d12;
  border-color:#7a1f28;
}

.model-col { white-space: nowrap; opacity: .9; }

/* =========================================
   Einheitliche Card-Höhe (Kundenansicht)
   ========================================= */

/* Grid erzwingt gleiche Höhe */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch; /* 🔑 alle Cards gleiche Höhe */
}

/* Card als Flexbox */
.inventory-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;               /* 🔑 füllt Grid-Zelle */
}

/* Einheitlicher Bildbereich */
.inventory-grid .card img {
  width: 100%;
  height: 200px;              /* 🔑 feste Bildhöhe */
  object-fit: contain;        /* nichts verzerren */
  background: var(--ghost);   /* Platzhalterfarbe */
  border-radius: 12px;
}

/* Falls KEIN Bild existiert → Platz trotzdem reservieren */
.inventory-grid .card .no-image,
.inventory-grid .card img:empty {
  height: 200px;
  background: var(--ghost);
  border-radius: 12px;
}

/* Inhalt darf wachsen */
.inventory-grid .card h3,
.inventory-grid .card .muted,
.inventory-grid .card .status,
.inventory-grid .card .price {
  flex-shrink: 0;
}

/* Button immer unten */
.inventory-grid .card button,
.inventory-grid .card a {
  margin-top: auto;           /* 🔑 Button nach unten */
}

/* Optional: Button volle Breite */
.inventory-grid .card button {
  width: 100%;
}
/* =========================================
   FIX: Alle Cards exakt gleich hoch (Kunden)
   Greift für .grid (dein aktuelles Layout) UND .inventory-grid
   ========================================= */

/* Grid: Cards strecken */
.grid,
.inventory-grid{
  align-items: stretch;
}

/* Card: Flex + volle Höhe */
.grid .card,
.inventory-grid .card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Einheitlicher "Bildbereich" auch wenn KEIN Bild existiert */
.grid .card img,
.inventory-grid .card img{
  width:100%;
  height:200px;
  object-fit:contain;
  background:var(--ghost);
  border-radius:12px;
  border:1px solid var(--line);
  display:block;
}

/* Wenn statt <img> nur "Kein Bild" angezeigt wird:
   -> reserviert denselben Platz wie ein Bild */
.grid .card > .muted:first-child,
.inventory-grid .card > .muted:first-child{
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ghost);
  border-radius:12px;
  border:1px solid var(--line);
  margin-bottom:10px;
}

/* Button immer unten auf gleicher Höhe */
.grid .card button,
.grid .card a,
.inventory-grid .card button,
.inventory-grid .card a{
  margin-top:auto;
}

/* Button volle Breite */
.grid .card button,
.inventory-grid .card button{
  width:100%;
}


.platform-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
}
.platform-ico img{
  width:26px;
  height:26px;
  display:block;
}
.platform-fallback{
  display:none;
  width:26px;
  height:26px;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  background: var(--ghost);
  border:1px solid var(--line);
}

/* ===== Tile size fix (override) ===== */
.platform-group-grid{
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
}

.platform-tile{
  padding: 10px 10px;
  border-radius: 14px;
}

.platform-ico{
  width: 44px;
  height: 44px;
}

.platform-ico img{
  max-width: 34px;
  max-height: 34px;
}

.platform-fallback{
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.platform-label{
  font-size: 12px;
  margin-top: 6px;
}

/* Wenn du sehr viele Tiles hast, hilft das gegen "Riesen-Kacheln" */
.platforms .platform-group{
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== Darkmode Tiles: bessere Sichtbarkeit ===== */
body.dark .platform-tile{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

body.dark .platform-tile:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

body.dark .platform-tile.active{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.32);
}

body.dark .platform-label{
  color: rgba(255,255,255,.92);
}

body.dark .platform-ico{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

/* SVG/Icons im Darkmode sichtbar machen */
body.dark .platform-ico img{
  filter: brightness(1.35) contrast(1.15);
}

/* Fallback-Buchstaben (wenn Icon fehlt) */
body.dark .platform-fallback{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

#cartPopup {
  background: var(--accent, #1f7a3b);
}