/*
  Modern UI overrides
  - Only presentation; no logic changes
  - Uses existing color variables and existing color values from styles.css
  - Loaded after styles.css to non-destructively refine the UI
*/

:root {
  /* Spacing and radius scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 12px;
  --container-max: 1100px;
  /* Ergänzung: zarte Statusfarben für Produktion */
  --prod-green-bg: #e6f4ea; /* sanftes Grün, harmoniert mit Gold */
  --prod-green-fg: #164b2f;
  --prod-red-bg: #fde8e8;  /* sanftes Rot, guter Kontrast */
  --prod-red-fg: #7a1c1c;
}

/* Typography */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Container */
.container {
  max-width: var(--container-max);
  padding: var(--space-5);
  border-radius: var(--radius-3);
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .container { padding: var(--space-4); }
}

/* Header */
.header {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

#userInfo { color: var(--color-gold); }

/* Forms */
.form-container {
  padding: var(--space-5);
  border-radius: var(--radius-3);
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

form { gap: var(--space-4); }

input, select, textarea {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
}

input::placeholder, textarea::placeholder { color: var(--color-text-secondary); }

/* Focus ring (uses existing gold variables) */
:where(button, .button, .btn, input, select, textarea):focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--color-gold-transparent);
}

/* Buttons */
button, .button, .btn, .submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid transparent;
}

button:hover, .button:hover, .btn:hover, .submit-button:hover {
  transform: translateY(-1px);
  background-color: var(--color-gold-transparent) !important;
  color: var(--color-black);
}

button:active, .button:active, .btn:active { transform: translateY(0); }

button:disabled, .button:disabled, .btn:disabled {
  background-color: var(--color-disabled);
  color: var(--color-text-secondary);
}

.btn-primary { background-color: var(--color-gold); color: var(--color-black); }
.btn-primary:hover { background-color: var(--color-gold-transparent); }

.btn-secondary { color: white; }

.submit-button {
  width: 100%;
  background-color: #28a745;
}

.submit-button:hover { background-color: #218838; }

/* Navigation as tabs */
.module-nav {
  display: inline-flex;
  gap: var(--space-2);
  padding: 4px;
  width: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
}

.module-btn {
  background: transparent;
  border: none;
  color: var(--color-text);
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
}

.module-btn.active {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.feature-nav {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.feature-nav button {
  background: transparent;
  border: none;
  color: var(--color-text);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.feature-nav button.active {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Mobile: Feature-Navigation als Accordion behandeln */
@media (max-width: 768px) {
  .feature-nav {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    background: var(--color-bg-secondary);
    border-radius: 8px;
  }
  #timeTrackingButtons.hidden,
  #inventoryButtons.hidden {
    display: none !important;
  }
}

/* Tables */
.table-container {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow-x: auto; /* falls es doch breiter wird, sauber scrollen */
  -webkit-overflow-scrolling: touch; /* iOS sanftes Scrollen */
}

table { border-collapse: separate; border-spacing: 0; }
/* Optimierte Spaltenbreiten für Tagesbuchungs-Tabellen */
#dailyIncomingTable,
#dailyClosingTable,
#provisioningTable { 
    table-layout: fixed; 
    width: 100%; 
    min-width: 900px; /* Mindestbreite für alle Spalten */
}

/* Einkauf/Produktion Tabellentypen: Inhalte bestimmen Breite; Container scrollt horizontal bei Bedarf */
#purchaseTable,
#productionTable {
  table-layout: auto;
  width: auto; /* Produktion bleibt Vorlage; Einkauf wird per JS feinjustiert */
  min-width: 900px;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-secondary);
  color: var(--color-gold);
}

tbody tr:hover td { background-color: rgba(255, 255, 255, 0.08); }

/* Pagination */
.pagination { gap: var(--space-3); }
.pagination button, .pagination-button, .agination-button {
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
}

/* Filter controls */
.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.filter-summary {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-bg-secondary);
}

.filter-tag { border: 1px solid var(--color-border); background: var(--color-bg); }

/* Modal */
.modal-content {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.modal-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Tabellen im Modal - nahtlose Integration ins Design */
.modal-content {
  max-width: 90vw !important; /* Größere Breite für Tabellen */
}

@media (min-width: 768px) {
  .modal-content {
    max-width: 800px !important; /* Desktop: mehr Platz für Tabellen */
  }
}

.modal-content .table-container {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow-x: auto;
  margin-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}

.modal-content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 100%;
}

.modal-content th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-secondary);
  color: var(--color-gold);
  border: 1px solid var(--color-border);
  padding: 8px;
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
}

.modal-content td {
  padding: 8px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
}

.modal-content tbody tr:nth-child(even) {
  background-color: var(--color-bg-secondary);
}

.modal-content tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Summary card */
.summary {
  text-align: right;
  border-radius: var(--radius-2);
  background: var(--color-bg-secondary);
}

/* Utilities (optional, non-breaking) */
.stack > * + * { margin-top: var(--space-3); }
.muted { color: var(--color-text-secondary); }
.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}



/* === Custom Select fixes === */
/* Allow JS to control dropdown positioning */
.custom-select-dropdown {
  z-index: 2147483646;
}

/* Keep trigger compact inside tables and filters */
table .custom-select-trigger { min-height: 30px; padding: 4px 8px; white-space: nowrap; }
table .custom-select-wrapper { display: inline-block; vertical-align: middle; }
.filter-controls .custom-select-wrapper, .filter-controls .custom-select-trigger { width: auto; }

/* Slightly tighter table rows globally */
table td, table th { padding: 3px 8px; }

/* Vereinheitliche Zeilenhöhe in Einkauf/Produktion */
#purchaseTable td, #purchaseTable th,
#productionTable td, #productionTable th {
  line-height: 1.05; /* identisch kompakt wie Produktion */
}

/* Produktion: Eingabefeld-Farblogik (Zugang/Verbrauch) */
#productionTable input.production-qty.qty-positive {
  background-color: var(--prod-green-bg);
  color: var(--prod-green-fg);
}

#productionTable input.production-qty.qty-negative {
  background-color: var(--prod-red-bg);
  color: var(--prod-red-fg);
}

/* Leichte Übergänge beim Wechsel */
#productionTable input.production-qty { transition: background-color 120ms ease, color 120ms ease; }
/* Sub-Navigation unter Buchen */
.sub-nav { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: 10px; }
.group-label { font-weight: 600; margin-left: 10px; margin-right: 6px; }
.feature-nav button.active { outline: 2px solid #d4af37; border-radius: 8px; }
.sub-nav.hidden { display: none; }
.sub-nav button.active { background: #2d2d2d; border-color: #d4af37; color: #fff; }
/* Wareneingänge Segmented */
.gr-section.hidden { display: none; }

/* Tagesbuchungen: Von-LO Breite am Header orientieren (keine Vollbreite-Erzwingung) */
#dailyIncomingTable th:nth-child(7) { white-space: nowrap; }
#dailyIncomingTable td:nth-child(7) { overflow: hidden; white-space: nowrap; }
/* Von-LO Select sauber innerhalb der Zellbreite rendern (nativ und CustomSelect) */
#dailyIncomingTable td:nth-child(7) select.from-location,
#dailyIncomingTable td:nth-child(7) .custom-select-wrapper,
#dailyIncomingTable td:nth-child(7) .custom-select-trigger {
  display: block;
  width: 100%; /* an Spaltenbreite (Headerbreite) ausrichten */
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bevorratung: Von-LO Breite am Header orientieren (analog Tagesbuchung) */
#provisioningTable th:nth-child(7) { white-space: nowrap; }
#provisioningTable td:nth-child(7) { overflow: hidden; white-space: nowrap; }
/* Von-LO Select sauber innerhalb der Zellbreite rendern (nativ und CustomSelect) */
#provisioningTable td:nth-child(7) select.from-location,
#provisioningTable td:nth-child(7) .custom-select-wrapper,
#provisioningTable td:nth-child(7) .custom-select-trigger {
  display: block;
  width: 100%; /* an Spaltenbreite (Headerbreite) ausrichten */
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tagesbuchungen: Optimierte Spaltenbreiten für bessere Lesbarkeit */
/* Spalte 1: Artikel ID - kompakt */
#dailyIncomingTable td:nth-child(1),
#dailyIncomingTable th:nth-child(1) { width: 80px; }

/* Spalte 2: Artikel - flexibel, aber mindestens 200px */
#dailyIncomingTable td:nth-child(2),
#dailyIncomingTable th:nth-child(2) { width: 200px; min-width: 200px; }

/* Spalte 3: Maß - kompakt */
#dailyIncomingTable td:nth-child(3),
#dailyIncomingTable th:nth-child(3) { width: 60px; }

/* Spalte 4: ME - kompakt */
#dailyIncomingTable td:nth-child(4),
#dailyIncomingTable th:nth-child(4) { width: 60px; }

/* Spalte 5: Bestand vorher - ausreichend Platz für Zahlen + Einheit */
#dailyIncomingTable td:nth-child(5),
#dailyIncomingTable th:nth-child(5) { width: 120px; }

/* Spalte 6: Zugang - kompakt für Input */
#dailyIncomingTable td:nth-child(6),
#dailyIncomingTable th:nth-child(6) { width: 80px; }
#dailyIncomingTable td:nth-child(6) { overflow: hidden; }
#dailyIncomingTable td:nth-child(6) input.incoming-qty {
  display: block;
  width: 100% !important;
  max-width: none;
  box-sizing: border-box;
}

/* Spalte 7: Von-LO - ausreichend Platz für Lagerort-Namen */
#dailyIncomingTable td:nth-child(7),
#dailyIncomingTable th:nth-child(7) { width: 150px; }

/* Spalte 8: Bestand neu - ausreichend Platz für Zahlen + Einheit */
#dailyIncomingTable td:nth-child(8),
#dailyIncomingTable th:nth-child(8) { width: 120px; }

/* Text-Überlauf-Behandlung für alle Spalten */
#dailyIncomingTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 6px; /* Kompaktere Polsterung */
}

/* Ausnahme: Artikel-Spalte darf umbrechen */
#dailyIncomingTable td:nth-child(2) {
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

/* Einkauf/Produktion: Spaltenbreiten analog zu Tagesbuchung (identische Logik) */
/* Spalte 1: Artikel ID - kompakt wie Tagesbuchung */
#purchaseTable td:nth-child(1),
#purchaseTable th:nth-child(1),
#productionTable td:nth-child(1),
#productionTable th:nth-child(1) { width: 80px; }

/* Spalte 2: Artikel - orientiert sich am längsten Wert (kein Trunkieren) */
#purchaseTable td:nth-child(2),
#purchaseTable th:nth-child(2),
#productionTable td:nth-child(2),
#productionTable th:nth-child(2) { 
  width: auto;
  min-width: 220px;
  white-space: nowrap;
  overflow: visible;
}

/* Spalte 3: Maß - kompakt wie Tagesbuchung */
#purchaseTable td:nth-child(3),
#purchaseTable th:nth-child(3),
#productionTable td:nth-child(3),
#productionTable th:nth-child(3) { width: 60px; }

/* Spalte 4: ME - kompakt wie Tagesbuchung */
#purchaseTable td:nth-child(4),
#purchaseTable th:nth-child(4),
#productionTable td:nth-child(4),
#productionTable th:nth-child(4) { width: 60px; }

/* Spalte 5: Bestand aktuell - ausreichend Platz für Zahlen + Einheit wie Tagesbuchung */
#purchaseTable td:nth-child(5),
#purchaseTable th:nth-child(5),
#productionTable td:nth-child(5),
#productionTable th:nth-child(5) { width: 120px; }

/* Spalte 8: Bestand neu - automatische Breite basierend auf Inhalt */
#purchaseTable td:nth-child(8),
#purchaseTable th:nth-child(8),
#productionTable td:nth-child(8),
#productionTable th:nth-child(8) {
  width: auto;
  white-space: nowrap;
}


/* Spalte "Zugang" (6) - schmaler wie im Tagesbuchung-Modul */
#purchaseTable td:nth-child(6),
#purchaseTable th:nth-child(6),
#productionTable td:nth-child(6),
#productionTable th:nth-child(6) { width: 6rem; }
#purchaseTable td:nth-child(6),
#productionTable td:nth-child(6) { overflow: hidden; }
#purchaseTable td:nth-child(6) input.purchase-qty,
#productionTable td:nth-child(6) input.production-qty {
  display: block;
  width: 100% !important;
  max-width: none;
  box-sizing: border-box;
}

/* Spalte "Bewegungstyp" (7) - analog zu "Von-LO" im Tagesbuchung-Modul */
#purchaseTable td:nth-child(7),
#purchaseTable th:nth-child(7),
#productionTable td:nth-child(7),
#productionTable th:nth-child(7) { width: 10rem; white-space: nowrap; }
#purchaseTable td:nth-child(7),
#productionTable td:nth-child(7) { overflow: hidden; white-space: nowrap; }
#purchaseTable td:nth-child(7) select.purchase-type,
#purchaseTable td:nth-child(7) .custom-select-wrapper,
#purchaseTable td:nth-child(7) .custom-select-trigger,
#productionTable td:nth-child(7) select.production-type,
#productionTable td:nth-child(7) .custom-select-wrapper,
#productionTable td:nth-child(7) .custom-select-trigger {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Endbestände: Spalte "Verbrauch" (6) schmaler/halbiert */
#dailyClosingTable td:nth-child(6),
#dailyClosingTable th:nth-child(6) { width: 6rem; }
#dailyClosingTable td:nth-child(6) { overflow: hidden; }
#dailyClosingTable td:nth-child(6) input.closing-consumption {
  display: block;
  width: 100% !important;
  max-width: none;
  box-sizing: border-box;
}

/* Bevorratung: Spalte "Menge" (6) schmaler/halbiert (analog Zugang/Verbrauch) */
#provisioningTable td:nth-child(6),
#provisioningTable th:nth-child(6) { width: 6rem; }
#provisioningTable td:nth-child(6) { overflow: hidden; }
#provisioningTable td:nth-child(6) input.prov-qty {
  display: block;
  width: 100% !important;
  max-width: none;
  box-sizing: border-box;
}

/* Endbestände: Spalte "Bewegungstyp" (7) an Header orientieren */
#dailyClosingTable th:nth-child(7) { white-space: nowrap; }
#dailyClosingTable td:nth-child(7) { overflow: hidden; white-space: nowrap; }
#dailyClosingTable td:nth-child(7) select.closing-type,
#dailyClosingTable td:nth-child(7) .custom-select-wrapper,
#dailyClosingTable td:nth-child(7) .custom-select-trigger {
  display: block;
  width: 100%; /* an Spaltenbreite (Headerbreite) ausrichten */
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Artikelspalte: Standard-Umbruch wie in Bestandsübersicht */
#dailyIncomingTable td:nth-child(2),
#dailyClosingTable td:nth-child(2),
#provisioningTable td:nth-child(2),
#movementsTable td:nth-child(8) { /* Bewegungen: 8 = Artikel */
  white-space: normal;
  word-break: normal;
  width: auto; /* Automatische Breite basierend auf Inhalt */
}

/* Mobile-Optimierungen: Tabellen in Buchen flexibler darstellen */
@media (max-width: 768px) {
  /* Tabellen layouten auf auto, damit Spalten sich nach Inhalt anpassen können */
  #movementsTable,
  #purchaseTable,
  #productionTable { table-layout: auto; width: max-content !important; }

  /* Artikel-Spalte in Mobile: Kein Umbruch, orientiert sich am längsten Wert */
  #purchaseTable td:nth-child(2),
  #purchaseTable th:nth-child(2),
  #productionTable td:nth-child(2),
  #productionTable th:nth-child(2) {
    white-space: nowrap !important;
    word-break: normal !important;
    width: auto !important;
    min-width: 200px !important;
  }

  /* Inputs und CustomSelects auf volle Zellbreite */
  #dailyIncomingTable input.incoming-qty,
  #dailyClosingTable input.closing-consumption,
  #provisioningTable input.prov-qty,
  #purchaseTable input.purchase-qty,
  #productionTable input.production-qty,
  #dailyIncomingTable .custom-select-wrapper,
  #dailyClosingTable .custom-select-wrapper,
  #provisioningTable .custom-select-wrapper,
  #purchaseTable .custom-select-wrapper,
  #productionTable .custom-select-wrapper,
  #dailyIncomingTable .custom-select-trigger,
  #dailyClosingTable .custom-select-trigger,
  #provisioningTable .custom-select-trigger,
  #purchaseTable .custom-select-trigger,
  #productionTable .custom-select-trigger { width: 100% !important; max-width: none; }
}

/* Tablet-Optimierungen (z. B. iPad) */
@media (max-width: 1024px) {
  #movementsTable,
  #purchaseTable,
  #productionTable { table-layout: auto; width: max-content !important; }

  #dailyIncomingTable input.incoming-qty,
  #dailyClosingTable input.closing-consumption,
  #provisioningTable input.prov-qty,
  #purchaseTable input.purchase-qty,
  #productionTable input.production-qty { width: 100% !important; max-width: none; }

  /* Artikel-Spalte in Tablet: Kein Umbruch, orientiert sich am längsten Wert */
  #purchaseTable td:nth-child(2),
  #purchaseTable th:nth-child(2),
  #productionTable td:nth-child(2),
  #productionTable th:nth-child(2) {
    white-space: nowrap !important;
    word-break: normal !important;
    width: auto !important;
    min-width: 200px !important;
  }

  /* Gebe der Artikelspalte auf Tablets etwas Mindestbreite, damit sie lesbar bleibt */
  #dailyIncomingTable td:nth-child(2), #dailyIncomingTable th:nth-child(2),
  #dailyClosingTable td:nth-child(2), #dailyClosingTable th:nth-child(2),
  #provisioningTable td:nth-child(2), #provisioningTable th:nth-child(2) { min-width: 14rem; }
}

/* Desktop-Optimierungen: stabile, gut lesbare Tabellen im Modul Buchen */
@media (min-width: 1025px) {
  #movementsTable,
  #purchaseTable,
  #productionTable { table-layout: auto; width: max-content !important; }

/* Zelleninhalt kann Breite bestimmen (robust gegen Trunkierungen) */
#purchaseTable .cell-content,
#productionTable .cell-content {
  display: inline-block;
  width: max-content;
}
}

/* === Custom Select (Modal Variante) === */
.custom-select-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483645;
}
.custom-select-modal {
  width: min(360px, 45vw); /* Desktop: halbiert von 720px auf 360px */
  max-height: 70vh;
  border-radius: 12px;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-gold);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.custom-select-search { padding: 12px; border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.custom-select-search input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg-secondary); color: var(--color-text); }
.custom-select-options { padding: 6px; overflow: auto; max-height: 60vh; }
.custom-select-option { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.custom-select-option:hover { background: rgba(255,255,255,0.08); }
.custom-select-option.selected, .custom-select-option[aria-selected="true"] { outline: 2px solid var(--color-gold); }

/* Einheitliche Control-Höhe in Tabellenzellen (Buchen/Tagesbuchung) */
#dailyIncomingTable td input[type="number"],
#dailyClosingTable td input[type="number"],
#provisioningTable td input[type="number"],
#purchaseTable td input[type="number"],
#productionTable td input[type="number"] {
  height: 28px;
  line-height: 28px;
  padding: 2px 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* CustomSelect Trigger kompakt halten */
#dailyIncomingTable td .custom-select-trigger,
#dailyIncomingTable td .custom-select-wrapper,
#dailyClosingTable td .custom-select-trigger,
#dailyClosingTable td .custom-select-wrapper,
#provisioningTable td .custom-select-trigger,
#provisioningTable td .custom-select-wrapper,
#purchaseTable td .custom-select-trigger,
#purchaseTable td .custom-select-wrapper,
#productionTable td .custom-select-trigger,
#productionTable td .custom-select-wrapper {
  height: 28px;
  padding: 2px 8px; /* etwas Top/Bottom für optisches Zentrieren */
  font-size: 14px;
  display: grid;          /* zuverlässige vertikale Zentrierung in allen Browsern */
  align-items: center;
  justify-content: start;
  width: auto;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Erzwinge Überschreiben evtl. vorhandener Inline-Styles (aus JS) in Tabellenzellen */
#dailyIncomingTable td .custom-select-trigger,
#dailyClosingTable td .custom-select-trigger,
#provisioningTable td .custom-select-trigger,
#purchaseTable td .custom-select-trigger,
#productionTable td .custom-select-trigger {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  line-height: 28px !important;
}

/* Vertikale Ausrichtung innerhalb der 7. Spalte exakt mittig */
#dailyIncomingTable td:nth-child(7),
#dailyClosingTable td:nth-child(7),
#provisioningTable td:nth-child(7),
#purchaseTable td:nth-child(7) {
  vertical-align: middle;
}

/* Native Selects in Spalte 7 angleichen (Fallback, falls Trigger nicht aktiv) */
#dailyIncomingTable td:nth-child(7) select.from-location,
#dailyClosingTable Table td:nth-child(7) select.closing-type,
#provisioningTable td:nth-child(7) select.from-location,
#purchaseTable td:nth-child(7) select.purchase-type,
#productionTable td:nth-child(7) select.production-type {
  height: 28px;
  line-height: 1;
  padding: 0 8px;
  font-size: 14px;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
}

/* Sicherstellen, dass der Text im Trigger selbst mittig sitzt */
#dailyIncomingTable td:nth-child(7) .custom-select-trigger > *,
#dailyClosingTable td:nth-child(7) .custom-select-trigger > *,
#provisioningTable td:nth-child(7) .custom-select-trigger > *,
#purchaseTable td:nth-child(7) .custom-select-trigger > * {
  line-height: 1 !important;
  display: inline-block;
  vertical-align: middle;
}

/* Plus/Minus-Buttons für Endbestände-Tabelle */
#dailyClosingTable td:nth-child(9) {
  text-align: center;
  vertical-align: middle;
  width: 80px;
  min-width: 80px;
}

.row-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.btn-add-row, .btn-remove-row {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.2s ease;
}

.btn-add-row:hover {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.btn-remove-row:hover {
  background-color: #f44336;
  color: white;
  border-color: #f44336;
}

.btn-remove-row:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Zeiterfassungstabelle: Zusatzzeit-Spalte an Überschrift orientieren */
#timeTable th:nth-child(7),
#timeTable td:nth-child(7) {
  white-space: nowrap;
  text-align: center;
  /* Breite wird per JavaScript dynamisch angepasst */
}

/* Zusätzliche Zeilen visuell unterscheiden */
#dailyClosingTable tbody tr.additional-row {
  background-color: #2a2a2a;
  border-top: 1px solid #444;
}

#dailyClosingTable tbody tr.additional-row td {
  color: #e0e0e0;
  border-color: #444;
}

#dailyClosingTable tbody tr.additional-row td:first-child {
  border-left: 3px solid #FFA726;
  background-color: #333;
}

/* Input-Felder in zusätzlichen Zeilen anpassen */
#dailyClosingTable tbody tr.additional-row input.closing-consumption {
  background-color: #1a1a1a;
  color: #e0e0e0;
  border: 1px solid #555;
}

#dailyClosingTable tbody tr.additional-row input.closing-consumption:focus {
  background-color: #2a2a2a;
  border-color: #FFA726;
  color: #fff;
}

/* Select-Felder in zusätzlichen Zeilen anpassen */
#dailyClosingTable tbody tr.additional-row select.closing-type {
  background-color: #1a1a1a;
  color: #e0e0e0;
  border: 1px solid #555;
}

#dailyClosingTable tbody tr.additional-row .custom-select-trigger {
  background-color: #1a1a1a;
  color: #e0e0e0;
  border: 1px solid #555;
}

#dailyClosingTable tbody tr.additional-row .custom-select-trigger:hover {
  background-color: #2a2a2a;
  border-color: #FFA726;
}

/* Hover-Effekt für zusätzliche Zeilen */
#dailyClosingTable tbody tr.additional-row:hover {
  background-color: #333;
}

#dailyClosingTable tbody tr.additional-row:hover td {
  background-color: #333;
}