/* Datei: /var/www/pierce-home.de/assets/css/mpb_inventur.css */

/* =========================
   Basis & Theme
   ========================= */
:root{
  --bg:#f7f9fc; --surface:#fff; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb;
  --primary:#2563eb; --primary-600:#1d4ed8;
  --success:#15803d; --warn:#a16207; --danger:#b91c1c;
  --focus:2px solid #93c5fd;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f172a; --surface:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --border:#1f2a44;
    --primary:#3b82f6; --primary-600:#2563eb;
    --success:#22c55e; --warn:#f59e0b; --danger:#ef4444;
    --focus:2px solid #60a5fa; --shadow:0 1px 2px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--bg)}

/* =========================
   Header
   ========================= */
.ph-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;
}
.ph-header h1{margin:0;font-size:1.1rem}

/* =========================
   Layout
   ========================= */
.ph-main{padding:12px;max-width:1000px;margin:0 auto}
section h2{font-size:1rem;margin:12px 8px;color:var(--muted)}

/* =========================
   Buttons
   ========================= */
.btn{
  appearance:none;cursor:pointer;user-select:none;
  border:1px solid var(--primary-600);background:var(--primary);color:#fff;
  border-radius:var(--radius-sm);padding:10px 14px;min-height:44px;
}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border)}
.btn-add{background:var(--success);border-color:rgba(0,0,0,.15)}
.btn-delete{background:var(--danger);border-color:rgba(0,0,0,.15)}
.btn:focus{outline:var(--focus)}

/* =========================
   Cards & Lists
   ========================= */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px;margin:12px 0;
}
.items{list-style:none;margin:0;padding:0}
.item.card{padding:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}
.chip{display:inline-block;border:1px solid var(--border);padding:2px 8px;border-radius:999px;font-size:.82rem;color:var(--muted)}

/* =========================
   Formular-Grundstil
   (gilt für Erfassung UND Filter)
   ========================= */
label{display:flex;flex-direction:column;gap:6px}
input, select, textarea{
  font:inherit;color:inherit;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 12px;min-height:44px;
}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:var(--focus)}
.grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}

/* =========================
   Toolbar als Akkordeon
   ========================= */
.toolbar{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);margin:10px 0 14px;
}
.toolbar.accordion{padding:0}
.toolbar.accordion > summary{
  list-style:none;cursor:pointer;padding:12px 14px;font-weight:700;border-bottom:1px solid var(--border)
}
.toolbar.accordion[open] > summary{border-bottom-color:transparent}
.toolbar.accordion > form{padding:10px}
.toolbar .row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.toolbar .row:last-child{margin-bottom:0}

/* WICHTIG: Filter-Inputs exakt so groß wie Erfassungsinputs */
.toolbar input[type="search"],
.toolbar input[type="text"],
.toolbar select{
  padding:10px 12px;min-height:44px;border-radius:var(--radius-sm);
}

/* =========================
   Einheitliche Checkboxen
   ========================= */
input[type="checkbox"]{
  inline-size:20px;block-size:20px;accent-color:var(--primary);vertical-align:middle;
}
fieldset.stack{
  border:1px dashed var(--border);border-radius:var(--radius-sm);
  padding:8px;margin:0;grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;
}
fieldset.stack label{display:inline-flex;align-items:center;gap:8px;line-height:1.2}

/* =========================
   Suggest-Dropdown
   ========================= */
.suggest-wrap{position:relative}
.suggest-list{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);margin:0;padding:4px 0;list-style:none;max-height:260px;overflow:auto;
}
.suggest-list li{padding:8px 10px;display:flex;gap:8px;align-items:center;cursor:pointer}
.suggest-list li.is-active{background:rgba(0,0,0,.06)}
@media (prefers-color-scheme: dark){
  .suggest-list li.is-active{background:rgba(255,255,255,.06)}
}

/* =========================
   Tooltip-Hinweis für <abbr>
   ========================= */
abbr[title]{
  text-decoration:underline dotted; text-underline-offset:3px; cursor:help;
}

/* =========================
   Details / Disclosure
   ========================= */
details{border:1px solid var(--border);border-radius:var(--radius-sm);background:rgba(0,0,0,.02)}
details + details{margin-top:8px}
details[open]{background:var(--surface)}
details > summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:600}
details > summary::-webkit-details-marker{display:none}
details > *:not(summary){padding:10px 12px}

/* =========================
   Alerts
   ========================= */
.alert{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;background:var(--surface)}
.alert.warn{border-color:rgba(161,98,7,.5);color:var(--warn)}

/* =========================
   Responsive
   ========================= */
@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  .toolbar .row{flex-direction:column}
  .btn, .toolbar input, .toolbar select{width:100%}
  .inline{flex-direction:column;align-items:stretch}
}

/* =========================
   A11y & Print
   ========================= */
:focus-visible{outline:var(--focus);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}
@media print{
  .ph-header, .toolbar, .btn, .inline, details > summary{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ccc}
}