@charset "utf-8";
/* =====================================================================
   ROLF · BOSS ROOT (LIGHT-ONLY – Dark neutralisiert)
   ===================================================================== */

/* -------------------- Tokens (Light) -------------------- */
:root{
  /* Flächen & Text */
  --bg:               #f5f5f5;
  --fg:               #111827;
  --muted:            #6b7280;

  /* Container */
  --surface:          #ffffff;     /* Karten / Eingabeflächen */
  --surface-soft:     #fafafa;

  /* Ränder */
  --border:           #e5e7eb;
  --border-subtle:    #eef0f3;

  /* Header */
  --hdr-bg:           #000000;
  --hdr-fg:           #ffffff;
  --hdr-border:       rgba(255,255,255,.16);

  /* Header-Buttons */
  --hdr-btn-bg:       rgba(255,255,255,.06);
  --hdr-btn-bg-hov:   rgba(255,255,255,.14);
  --hdr-btn-border:   rgba(255,255,255,.25);

  /* Akzent */
  --acc:              #f97316;
  --acc-soft:         rgba(249,115,22,.18);

  /* Controls */
  --control-h:        40px;
  --radius:           14px;
  --radius-md:        12px;
  --radius-pill:      9999px;

  /* Buttons */
  --btn-primary:      #f97316;
  --btn-primary-fg:   #111827;
  --btn-muted:        #ffffff;
  --btn-muted-fg:     #111827;

  /* Inputs */
  --inp-bg:           #ffffff;
  --inp-fg:           #111827;
  --inp-border:       #e5e7eb;

  /* Typo & Motion */
  --font: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
  --tr: 150ms ease;

  /* BOSS – gekoppelte Tokens für Inputs/Buttons */
  --boss-control-height: var(--control-h);
  --boss-radius-pill:    var(--radius);
  --boss-radius-lg:      var(--radius);
  --boss-input-border:   var(--border);
  --boss-input-bg:       var(--inp-bg);
  --boss-input-fg:       var(--inp-fg);
  --boss-border:         var(--border);
  --boss-bg-elevated:    var(--surface);
  --boss-fg:             var(--fg);
  --boss-accent:         var(--acc);
  --boss-accent-soft:    var(--acc-soft);
}

/* -------------------- Dark neutralisieren -------------------- */
html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"]{
  --bg:               #f5f5f5;
  --fg:               #111827;
  --muted:            #6b7280;
  --surface:          #ffffff;
  --surface-soft:     #fafafa;
  --border:           #e5e7eb;
  --border-subtle:    #eef0f3;
  --hdr-bg:           #000000;
  --hdr-fg:           #ffffff;
  --hdr-border:       rgba(255,255,255,.16);
  --hdr-btn-bg:       rgba(255,255,255,.06);
  --hdr-btn-bg-hov:   rgba(255,255,255,.14);
  --hdr-btn-border:   rgba(255,255,255,.25);
  --acc:              #f97316;
  --acc-soft:         rgba(249,115,22,.18);
  --btn-primary:      #f97316;
  --btn-primary-fg:   #111827;
  --btn-muted:        #ffffff;
  --btn-muted-fg:     #111827;
  --inp-bg:           #ffffff;
  --inp-fg:           #111827;
  --inp-border:       #e5e7eb;
}

/* -------------------- Base -------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:var(--font);
}
img,svg{ display:block; max-width:100%; }

/* -------------------- Layout -------------------- */
.wrap{ max-width:1100px; margin:16px auto; padding:0 12px 24px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.card + .card{ margin-top:12px; }

/* -------------------- Header / App-Bar -------------------- */
header.bar.appbar{
  background:var(--hdr-bg); color:var(--hdr-fg);
  border-bottom:1px solid var(--hdr-border);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; min-height:56px;
}
header.bar.appbar .bar{
  max-width:1100px; margin:0 auto;
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
header.bar.appbar .brand{
  display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none;
}
header.bar.appbar .brand-logo{ height:34px; width:auto; }
header.bar.appbar .brand-text{ display:flex; flex-direction:column; }
header.bar.appbar .brand-text .big{ font-weight:800; letter-spacing:.06em; font-size:.95rem; }
header.bar.appbar .brand-text .sub{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8); }
header.bar.appbar .brand.brand--imageonly .brand-text{ display:none; }

header.bar.appbar .page-title{
  flex:1; text-align:center; font-weight:600; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
header.bar.appbar .bar-actions{ display:flex; align-items:center; gap:8px; }

/* Header-Iconbuttons (weiß, transparent) */
header.bar.appbar .btn-icon{
  width:var(--control-h); height:var(--control-h);
  border-radius:12px; border:1px solid var(--hdr-btn-border);
  background:var(--hdr-btn-bg); color:var(--hdr-fg);
  transition: background-color var(--tr), border-color var(--tr), color var(--tr);
}
header.bar.appbar .btn-icon:hover{ background:var(--hdr-btn-bg-hov); }

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--control-h); padding:0 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--btn-muted); color:var(--btn-muted-fg);
  text-decoration:none; cursor:pointer; user-select:none;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr), background-color var(--tr), color var(--tr);
}
.btn.primary{
  background:var(--btn-primary); color:var(--btn-primary-fg);
}
.btn:disabled{ opacity:.55; cursor:default; }

/* Hover → Orange-Rand + softer Glow */
.btn:hover,
.btn:focus-visible{
  border-color:var(--acc);
  box-shadow:0 0 0 2px var(--acc-soft);
  transform:translateY(-1px);
}

/* Primär leicht andunkeln beim Hover */
.btn.primary:hover,
.btn.primary:focus-visible{
  filter:brightness(.97);
  border-color:var(--acc);
  box-shadow:0 0 0 2px var(--acc-soft);
}

/* Icon-Buttons (außer Header) */
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--control-h); height:var(--control-h);
  border-radius:var(--radius-pill); border:1px solid var(--border);
  background:var(--btn-muted); color:var(--btn-muted-fg); padding:0;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr), background-color var(--tr), color var(--tr);
}
.btn-icon svg{ width:18px; height:18px; stroke-width:1.8; }

/* Hover → Orange-Rand + softer Glow (außer Header-Variante) */
:not(header) .btn-icon:hover,
:not(header) .btn-icon:focus-visible{
  border-color:var(--acc);
  box-shadow:0 0 0 2px var(--acc-soft);
  transform:translateY(-1px);
}

/* -------------------- Forms -------------------- */
.card.form .form-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:860px){ .card.form .form-grid{ grid-template-columns:1fr 1fr; } }
.fld{ display:flex; flex-direction:column; gap:8px; }
.fld-span2{ grid-column:1 / -1; }
.lbl{ font-weight:600; }

/* Einheitliche Eingaben (Card-spezifisch) */
.card.form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.card.form select,
.card.form textarea{
  background:var(--inp-bg); color:var(--inp-fg);
  border:1px solid var(--inp-border);
  border-radius:var(--radius-pill);
  transition:border-color var(--tr), box-shadow var(--tr), background-color var(--tr), color var(--tr);
}
.card.form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.card.form select{
  height:var(--control-h); line-height:var(--control-h); padding:0 14px;
}
.card.form textarea{ min-height:88px; padding:10px 14px; border-radius:var(--radius); }
.card.form ::placeholder{ color:var(--muted); }

/* Fokus → Orange-Rand + softer Glow (global & robust) */
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible{
  outline:0 !important;
  border-color:var(--acc) !important;
  box-shadow:0 0 0 2px var(--acc-soft) !important;
}

/* EAN + Scan nebeneinander, gleiche Höhe */
.fld-row{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
}
.fld-row .btn-icon{
  width:var(--control-h); height:var(--control-h);
  border:1px solid var(--border); background:var(--btn-muted); color:var(--btn-muted-fg);
}

/* File-Upload */
.fld input[type="file"]{
  height:var(--control-h); background:var(--surface); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius); padding:6px 8px;
}
.fld input[type="file"]::file-selector-button{
  background:var(--btn-muted); color:var(--btn-muted-fg);
  border:1px solid var(--border); border-radius:8px; padding:4px 12px; cursor:pointer;
  transition: border-color var(--tr), box-shadow var(--tr), background-color var(--tr), color var(--tr);
}
.fld input[type="file"]::file-selector-button:hover{
  border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-soft);
}

/* Formular-Aktionen unten rechts */
.form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }

/* -------------------- Suche -------------------- */
.search-form{ display:flex; align-items:center; gap:8px; }
.search-form input[type="search"]{
  flex:1 1 auto; height:var(--control-h); line-height:var(--control-h);
  background:var(--inp-bg); border:1px solid var(--inp-border); border-radius:var(--radius-pill); padding:0 14px;
}
.search-form input[type="search"]:focus{ border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-soft); }

/* Suchfeld-X sichtbar passend zum Modus */
body[data-theme="dark"]  input[type="search"]{ color-scheme:dark; }
body[data-theme="light"] input[type="search"]{ color-scheme:light; }

/* -------------------- Tabellen -------------------- */
.table{ width:100%; border-collapse:collapse; font-size:.98rem; background:var(--surface); }
.table th,.table td{ padding:8px 10px; border-bottom:1px solid var(--border-subtle); text-align:left; }
.table thead th{ font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

/* -------------------- Bild-Thumbnails -------------------- */
.images-head{ margin-bottom:8px; }
.images-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.images-grid .img{ position:relative; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.images-grid .img img{ width:100%; height:110px; object-fit:cover; }
.images-grid .img .img-actions{ position:absolute; right:6px; top:6px; display:flex; gap:6px; }
.badge-main{ position:absolute; left:6px; top:6px; background:var(--acc); color:#fff; padding:2px 6px; border-radius:10px; font-size:.75rem; }

/* -------------------- Utils & SVG -------------------- */
.badge{ display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:var(--radius-pill); border:1px solid var(--border-subtle); background:var(--surface-soft); }
.badge-note{ color:var(--muted); font-size:.9rem; }
.hidden,[hidden]{ display:none !important; }
.muted{ color:var(--muted); }

.flash{
  margin:10px 0;
  padding:10px;
  border:1px solid rgba(0,128,64,.35);
  background:rgba(0,128,64,.06);
  border-radius:var(--radius);
}

svg{
  fill:none !important;
  stroke:currentColor !important;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ===== BOSS ENFORCER: Einheitliche Form-Controls (site-wide) ===== */
:where(input[type="text"],input[type="email"],input[type="tel"],input[type="search"],
       input[type="number"],input[type="password"],select,textarea){
  height: var(--boss-control-height, 40px) !important;
  padding: 0 14px !important;
  border-radius: var(--boss-radius-pill, var(--radius, 14px)) !important;
  border: 1px solid var(--boss-input-border, #d0d0d0) !important;
  background: var(--boss-input-bg, #ffffff) !important;
  color: var(--boss-input-fg, #111111) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

:where(textarea){
  min-height: 120px !important;
  padding: 10px 12px !important;
  border-radius: var(--boss-radius-lg, 14px) !important;
  height: auto !important;
}

:where(input,select,textarea):focus{
  border-color: var(--boss-accent, #f97316) !important;
  box-shadow: 0 0 0 1px var(--boss-accent-soft, rgba(249,115,22,.16)) !important;
}

/* Icon-Buttons */
:where(.btn-icon){
  width: var(--boss-control-height, 40px) !important;
  height: var(--boss-control-height, 40px) !important;
  min-width: var(--boss-control-height, 40px) !important;
  border-radius: 12px !important;
  border: 1px solid var(--boss-border, #d0d0d0) !important;
  background: var(--boss-bg-elevated, #fff) !important;
  color: var(--boss-fg, #111) !important;
}
:where(.btn-icon):hover{
  border-color: var(--boss-accent, #f97316) !important;
}

/* ===== HOTFIX: Header-Icon darf NIE weiß werden ===== */
header.bar.appbar .btn-icon{
  background: var(--hdr-btn-bg) !important;
  color: var(--hdr-fg) !important;
  border-color: var(--hdr-btn-border) !important;
}
header.bar.appbar .btn-icon:hover{
  background: var(--hdr-btn-bg-hov) !important;
  border-color: var(--hdr-btn-border) !important;
}

/* ===== Layout-Utilities ===== */
.grid,
.grid-2{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media (min-width: 720px){
  .grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width: 860px){
  .grid-2{ grid-template-columns:1fr 1fr; }
}
.grid-2 .span-2{ grid-column:1 / -1; }

.col{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Hilfsreihe für Inline-Controls (EAN+Scan, Suche+Lupe etc.) */
.row{ display:flex; gap:8px; align-items:center; }

/* Tabellen-Wrapper */
.table-wrap,
.tablewrap{
  width:100%;
  overflow-x:auto;
}

/* Header-Home-Icon immer stroke-only */
header.bar.appbar .btn-icon svg{
  width:18px; height:18px; fill:none !important; stroke:currentColor !important;
}
/* Fixes für .grid-2 / .row: erlauben korrektes Shrinking und flexibles Wachsen */
.grid-2 > * {
  min-width: 0; /* wichtig, damit Kinder in Grid-Spalten schrumpfen können */
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
  /* flex-nowrap beibehalten, aber Elemente dürfen schrumpfen */
  flex-wrap: nowrap;
}

.row > * {
  min-width: 0;
}

/* Form controls in inline rows should expand to fill available space */
.row input[type="text"],
.row input[type="number"],
.row select,
.row textarea {
  flex: 1 1 0;
  width: auto;       /* width:100% kann in flex zu unerwartetem Overflow führen */
  box-sizing: border-box;
  min-width: 0;
}

/* Kleine Aktionen behalten natürliche Größe */
.row > .btn-icon,
.row > button,
.row > input[type="number"]:not(.full),
.row > select:not(.full) {
  flex: 0 0 auto;
}

/* zusätzlich: sicherstellen, dass Grid-Items nicht überlaufen */
.grid-2, .grid {
  align-items: start;
}