:root{
  --accent:#444;
  --bg:#f7f7f9;
  --card:#fff;
  --muted:#6b7280;
  --control-h:44px;
}

/* Allgemeines Setup */
#mpr-app,
#mpr-app *{
  box-sizing:border-box;
}
#mpr-app{
  -webkit-text-size-adjust:100%;
}

/* Container / Karte */
#mpr-app .mpr-wrap{
  max-width:980px;
  margin:24px auto;
  padding:16px;
}
#mpr-app .mpr-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  padding:18px 20px;
}
#mpr-app .mpr-card > *:first-child{
  margin-top:0 !important;
}

/* Titel & Badge */
#mpr-app h1{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center !important;
  gap:.5rem !important;
  margin:0 0 .8rem !important;
  font-size:1.8rem !important;
  font-weight:800 !important;
  color:#111 !important;
}
#mpr-app .pill{
  display:inline-flex !important;
  align-items:center;
  padding:.25em .6em;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:.8rem;
}

/* Labels + Inputs */
#mpr-app label{
  font-weight:600;
  color:#111;
}
#mpr-app .mpr-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
#mpr-app input,
#mpr-app select,
#mpr-app textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  outline:none;
  font-size:16px;
  min-height:var(--control-h);
  line-height:1.2;
}

/* Select-Pfeil */
#mpr-app select{
  -webkit-appearance:none;
  appearance:none;
  background-clip:padding-box;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:14px 14px;
  padding-right:2rem;
}

/* Zahleneingaben ohne Spinner */
#mpr-app input[type=number]::-webkit-outer-spin-button,
#mpr-app input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
#mpr-app input[type=number]{
  -moz-appearance:textfield;
}

/* Buttons */
#mpr-app .btn{
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
#mpr-app .btn.secondary{
  background:#6b7280;
}
#mpr-app .btn:hover{
  background:#333;
}

/* Chip-Buttons */
#mpr-app .chipbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
#mpr-app .chip-btn{
  background:#fff;
  border:1px solid #d7dbe2;
  border-radius:999px;
  padding:6px 10px;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
#mpr-app .chip-btn[aria-pressed="true"]{
  border-color:var(--accent);
  border-width:2px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}

/* Accordion Grundlogik – Standardmarker ausblenden */
#mpr-app summary::-webkit-details-marker,
#mpr-app summary::marker{
  display:none;
}
.accordion-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.15rem;
  cursor:pointer;
  padding:12px 4px;
}
.accordion-row .caret{
  transition:transform .2s ease;
  display:inline-block;
}

/* EXTRAS Accordion */
#mpr-app #extrasPanel[open] .extras-head .caret{
  transform:rotate(90deg);
}

/* PRODUKTE ERSTELLEN Sub-Accordion */
#mpr-app #productsPanel{
  margin-top:18px;
  padding-left:10px;
  border-left:3px solid #e5e7eb;
}
#mpr-app #productsPanel .products-head{
  padding:10px 4px;
  font-size:1.05rem;
}
#mpr-app #productsPanel.open .products-head .caret{
  transform:rotate(90deg);
}
#mpr-app #productsBody{
  display:none;
  margin-top:10px;
}
#mpr-app #productsPanel.open #productsBody{
  display:block;
}

/* Extras Tabelle */
#mpr-app .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#mpr-app table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}
#mpr-app th,
#mpr-app td{
  border:1px solid #e5e7eb;
  padding:8px;
  text-align:left;
  vertical-align:middle;
}
#mpr-app th{
  background:#fafafa;
  text-align:center;
}

/* Column Buttons */
#mpr-app .col-btn{
  background:#f9fafb;
  border:1px solid #d1d5db;
  border-radius:999px;
  padding:0 10px;
  min-width:28px;
  height:auto;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  font-weight:600;
  color:#374151;
}
#mpr-app .col-btn.red{
  color:#b91c1c;
  border-color:#fca5a5;
  background:#fef2f2;
}

/* Extra Spaltenbreiten */
#mpr-app #extras{
  table-layout:fixed;
}
#mpr-app #extras th:nth-child(1),
#mpr-app #extras td:nth-child(1){width:38%}
#mpr-app #extras th:nth-child(2),
#mpr-app #extras td:nth-child(2){width:12%}
#mpr-app #extras th:nth-child(3),
#mpr-app #extras td:nth-child(3){width:10%}
#mpr-app #extras th:nth-child(4),
#mpr-app #extras td:nth-child(4){width:22%}
#mpr-app #extras th:nth-child(5),
#mpr-app #extras td:nth-child(5){width:8%;text-align:center}
#mpr-app #extras th:nth-child(6),
#mpr-app #extras td:nth-child(6){width:10%;text-align:center}

/* Checkbox in Extras mittig */
#mpr-app #extras td input[type="checkbox"]{
  display:block;
  margin:auto;
}

/* Icon Buttons (X etc.) */
#mpr-app .icon-btn{
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:10px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  font-size:16px;
  line-height:1;

}
#mpr-app .icon-btn.x-del,
#mpr-app .icon-btn.remove-model{
  color:#b91c1c;
  background:#fef2f2;
  border-color:#fca5a5;
}
#mpr-app .icon-btn.x-del:hover,
#mpr-app .icon-btn.remove-model:hover{
  background:#fee2e2;
}

/* Produkte erstellen – Zeile */
#mpr-app .product-create-card .row{
  display:grid;
  grid-template-columns:42% 12% 10% 22% 8% 6%;
  gap:0;
}

/* Modelle */
#mpr-app .models-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#mpr-app .model-row{
  display:grid;
  grid-template-columns:1fr 180px 44px;
  gap:10px;
  align-items:end; /* X bündig mit Feldern */
}
#mpr-app .model-row .model-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}
#mpr-app .model-row:first-child .remove-model{
  visibility:hidden;
}

/* Km + Zielort */
#mpr-app .km-row{
  display:grid;
  grid-template-columns:120px minmax(220px,1fr);
  gap:10px;
}
#mpr-app .km-helper{
  display:flex;
  gap:8px;
}

/* Km-Zeile: gleiche Höhe wie Miettage */
#mpr-app .km-row input,
#mpr-app .km-helper input,
#mpr-app .km-helper .btn{
  padding-top:6px;
  padding-bottom:6px;
  height:var(--control-h);
}

/* Zusammenfassung unten (Grundpreis, Fahrtkosten, Gesamt …) */
#mpr-app .grid-2{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin:10px 0;
  padding:4px 0;
}
#mpr-app .grid-2 + .grid-2{
  border-top:1px dashed #eceff3;
  padding-top:10px;
  margin-top:10px;
}
#mpr-app .grid-2.total{
  margin-top:16px;
  border-top:0;
  padding-top:12px;
}
#mpr-app .grid-2 div:last-child{
  text-align:right;
}
#mpr-app .total{
  font-size:1.8rem;
  font-weight:900;
  margin-top:4px;
}

/* Mobile Extras: Kartenlayout */
@media (max-width:640px){
  /* Modelle: auf Handy untereinander */
  #mpr-app .model-row{
    grid-template-columns:1fr;
  }
  #mpr-app .model-row .model-actions{
    justify-content:flex-end;
    margin-top:6px;
  }

  /* Miettage/Km/Zielort: mobile untereinander */
  #mpr-app .mpr-row{
    display:grid;
    grid-template-columns:1fr;
    row-gap:12px;
  }

  #mpr-app .km-row{
    display:block;
    margin-top:4px;
  }

  #mpr-app .km-helper{
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:8px;
    margin-top:6px;
  }

  #mpr-app .km-helper input{
    width:100%;
  }

  /* Spaltenbreiten von Extras auf Handy aufheben */
  #mpr-app #extras th,
  #mpr-app #extras td{
    width:100% !important;
  }

  #mpr-app #extras thead{
    display:none;
  }
  #mpr-app #extras table,
  #mpr-app #extras tbody,
  #mpr-app #extras tbody tr{
    display:block;
    width:100%;
  }
  #mpr-app #extras tbody tr{
    margin-bottom:18px;
    padding:12px 10px 14px;
    border-radius:18px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    box-shadow:0 1px 2px rgba(15,23,42,0.04);
  }
  #mpr-app #extras tbody td{
    display:block;
    width:100%;
    padding:6px 0;
    border:0;
    font-size:.95rem;
  }
  #mpr-app #extras tbody td::before{
    content:attr(data-th);
    display:block;
    margin-bottom:4px;
    font-size:.9rem;
    font-weight:600;
    color:#4b5563;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mpr-app #extras tbody td input[type="text"],
  #mpr-app #extras tbody td input[type="number"],
  #mpr-app #extras tbody td select{
    width:100%;
  }
  #mpr-app #extras tbody td:last-child{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:4px;
  }

  /* Buttons volle Breite im Rechner allgemein */
  #mpr-app .btn{
    width:100%;
  }
  /* aber Go-Button nicht volle Breite */
  #mpr-app .km-helper .btn{
    width:auto;
    padding-left:18px;
    padding-right:18px;
  }
}
/* Gespeicherte Vorlagen */
#mpr-app #mList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#mpr-app .preset-chip{
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:4px 10px;
  background:#fff;
  font-size:.9rem;
  cursor:pointer;
}
/* Gespeicherte Vorlagen nur anzeigen, wenn "Extras" geöffnet ist */
#mpr-app #extrasPanel + #mPresets{
  display:none;
}

#mpr-app #extrasPanel[open] + #mPresets{
  display:block;
}
/* =========================================
   FIX: Extras & Produkte erstellen
   ========================================= */

/* 1) Checkboxen wieder klein machen (nicht wie Textfelder) */
#mpr-app input[type="checkbox"]{
  width:18px;
  height:18px;
  padding:0;
  min-height:0;          /* überschreibt die 44px aus den Textfeldern */
  border-radius:4px;
}

/* 2) Extras-Tabelle: "pro Wagen" – Checkbox mittig, Text ausblenden (nur Desktop) */
#mpr-app #extras td[data-th="pro Wagen"] .per-wagon-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

#mpr-app #extras td[data-th="pro Wagen"] .per-wagon-wrap span{
  display:none;
}

/* Checkbox in der Extras-Tabelle sauber zentrieren */
#mpr-app #extras td input[type="checkbox"]{
  display:block;
  margin:0 auto;
}

/* 3) Header "Pro WC" etwas kompakter, damit er nicht wie ein Riesen-Pill aussieht */
#mpr-app #extras th:nth-child(5) .col-btn{
  padding:3px 8px;
  font-size:.7rem;
  line-height:1.1;
}

/* 4) Produkte erstellen: Zeile schlanker ausrichten */
#mpr-app .product-create-card .row{
  align-items:center;    /* alles vertikal mittig */
}

/* Checkbox in Produkte-erstellen-Zeile zentriert */
#mpr-app .product-create-card #mPerWagon{
  justify-self:center;
}

/* Disketten-Button kompakt halten */
#mpr-app .product-create-card .save-btn{
  width:34px;
  height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* =========================================
   Feintuning: "+ Weiteres Modell" & Gesamtpreis
   ========================================= */

/* "+ Weiteres Modell" näher an die Modell-Zeile und filigraner */
#mpr-app .models-toolbar{
  margin-top:4px;                 /* kleiner Abstand zur Modell-Zeile */
}

#mpr-app .models-toolbar .btn.secondary{
  padding:7px 14px;               /* etwas schlanker */
  font-size:0.95rem;
  border-radius:999px;            /* wirkt wie ein Chip */
}

/* Gesamt (brutto) unten etwas weniger fett/gewaltig */
#mpr-app .total{
  font-size:1.35rem;              /* kleiner als vorher (1.8rem) */
  font-weight:800;                /* etwas leichter */
}

/* Label + Betrag in der letzten Zeile optisch zusammengehörig */
#mpr-app .grid-2.total div:first-child{
  font-size:1.05rem;
  font-weight:700;
}
#mpr-app .grid-2.total div:last-child{
  font-size:1.25rem;
  font-weight:800;
}

/* Extras – Produktfeld mit Name + Vorlage-Select nebeneinander */
#mpr-app .x-product-wrapper{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1.3fr);
  gap:6px;
  align-items:center;
}

/* Extras – Aktionen (Diskette + X) nebeneinander */
#mpr-app .x-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}

#mpr-app .icon-btn.x-save{
  color:#1d4ed8;
  border-color:#bfdbfe;
  background:#eff6ff;
}
#mpr-app .icon-btn.x-save:hover{
  background:#dbeafe;
}

/* mPresets als eigenes Akkordeon */
#mpr-app #mPresets.sub-accordion .templates-head{
  padding:10px 4px;
  font-size:1.0rem;
}
#mpr-app #mPresets.sub-accordion.open .templates-head .caret{
  transform:rotate(90deg);
}

/* Produkte-erstellen-Panel komplett ausblenden (Logik bleibt im JS) */
#mpr-app #productsPanel{
  display:none !important;
}

#mpr-app .icon-btn.x-save{
  position:relative;
}

#mpr-app .icon-btn.x-save::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%25231d4ed8%27%20d%3D%27M6%203h11l4%204v14H3V3h3zm2%202v6h8V5H8zm0%208v6h8v-6H8z%27/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* Produkt-Dropdown-Button in Extras */
#mpr-app .x-name-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}

#mpr-app .x-name-wrap .x-name{
  flex:1 1 auto;
}

#mpr-app .x-name-wrap .x-name-dd{
  flex:0 0 auto;
  padding-inline:10px;
  font-size:14px;
}

/* Popover-Menü für Produkt-Vorlagen */
.mpr-product-menu{
  z-index:9999;
  background:#ffffff;
  border-radius:12px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 25px rgba(15,23,42,0.16);
  padding:6px 0;
  max-height:260px;
  overflow:auto;
}

.mpr-product-menu .mpr-product-menu-item{
  display:block;
  width:100%;
  padding:6px 12px;
  text-align:left;
  font-size:.9rem;
  border:0;
  background:transparent;
  cursor:pointer;
}

.mpr-product-menu .mpr-product-menu-item:hover{
  background:#f3f4f6;
}