/* ===== Custom sizing für Angebotsformular ===== */
table.items input[name$="[qty]"] { width: 96px; }
table.items input[name$="[unit_price]"] { width: 140px; }

.badge{display:inline-block;padding:.2rem .5rem;border-radius:.4rem;background:#eef;border:1px solid #ccd;font-size:.9rem}
.status-form select,.status-form button{padding:.35rem .5rem;font-size:.9rem}
@media print {
  .status-form {
    display: none !important;
  }
}
@media print {
  .status-form { display: none !important; }
  .badges { display: none !important; } /* blendet auch das Status-Badge aus */
  .print-btn { display: none !important; }
}
/* Positionszeilen in den Edit-Formularen */
table.items input[name*="[description]"] {
  width: 100%;
  min-width: 380px;     /* Beschreibung deutlich breiter */
}

table.items input[name*="[qty]"] {
  width: 110px;         /* Menge etwas größer */
  text-align: right;
}

table.items select[name*="[unit]"],
table.items input[name*="[unit]"] {
  width: 80px;          /* Einheit etwas kleiner/kompakt */
}

/* Optional: Spalten wirken luftiger */
table.items td { vertical-align: middle; }
table.items input, table.items select { height: 34px; }
/* Positionszeilen im Erstellen/Bearbeiten-Formular */
#items input[name*="[description]"] {
  width: 100%;
  min-width: 200px;    /* Beschreibung deutlich breiter */
}

#items input[name*="[qty]"] {
  width: 70px;        /* Menge etwas größer */
  text-align: right;
}

#items select[name*="[unit]"],
#items input[name*="[unit]"] {
  width: 40px;         /* Einheit kompakter */
}

#items input[name*="[unit_price]"] {
  width: 100px;        /* Einzelpreis fix, damit es ruhig wirkt */
  text-align: right;
}

/* optional: etwas mehr Höhe für Inputs */
#items input, #items select {
  height: 34px;
}
/* mobile: 2 spalten layout -> 1 spalte */
@media screen and (max-width: 768px){
  .grid-2{
    grid-template-columns: 1fr !important;
  }

  /* damit überschriften und karten nicht abgeschnitten werden */
  .card{
    width: 100% !important;
    overflow-x: hidden;
  }
}
/* --- Generic table scroll for small screens --- */
@media screen and (max-width: 768px){
  .table-scroll{                      /* wrapper, der scrollen darf */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll > table{              /* echte Tabellenbreite beibehalten */
    min-width: 720px;                 /* genügt für ID/Name/Email/Ort/... */
  }
}