/* Farbdefinitionen im Dallmayr‑Stil */
:root {
  --primary-color: #18453B; /* dunkles Grün */
  --secondary-color: #C6A664; /* warmes Gold */
  --background-color: #F9F7F1; /* helles Beige */
  --card-background: #ffffff;
  --text-color: #333333;
  --border-color: #e5e5e5;
  --input-border-color: #cccccc;
  --hover-bg: #f0f3f8;
}

/* General styles */
/*
  Box‑Sizing Standard auf border‑box setzen. Dadurch beinhalten
  width‑Angaben auch die horizontale Padding‑ und Border‑Breite und
  verursachen kein ungewolltes Überlaufen der Seite. Ohne diese
  Einstellung addiert sich das Padding zur Breite und kann den
  Header breiter als das Viewport machen.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  /* Verhindert horizontales Scrollen auf Mobilgeräten, auch wenn
     Elemente breiter als die Viewportbreite sind. */
  overflow-x: hidden;
}

/* Header */

/* Header */
/*
  The header uses a three‑column grid layout to ensure the title
  remains perfectly centred between the left (back/menu) and right
  (options) buttons. This replaces the previous flexbox layout, which
  aligned items with space‑between and resulted in a visually
  unbalanced header when the title text length varied. Each column
  automatically sizes itself (auto, 1fr, auto) and the middle column
  centers the title via text‑align: center.
*/
#appHeader {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: var(--primary-color);
  color: #fff;
  /*
    Grid‑Layout sorgt dafür, dass die Kopfzeile aus drei Spalten
    besteht: links (Logo und Buttons), Mitte (Titel) und rechts
    (Optionen). Der Titel nimmt den verfügbaren Platz ein, während
    linke und rechte Spalte ihre natürliche Breite behalten. So
    bleibt das Menü‑Symbol auch auf Desktops sichtbar, ohne dass
    horizontales Scrollen nötig wird.
  */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow-x: visible;
}

/* Positioniere den Options‑Button absolut am rechten Rand des Headers,
   damit er auf mobilen Geräten nicht aus dem sichtbaren Bereich
   verschwindet. */
#optionsButton {
  /* Standardmäßig verhält sich der Menü‑Button wie ein Inline‑Element
     innerhalb des Flex‑Containers. Wir überschreiben hier die
     vorherige absolute Positionierung, damit er sich flexibel
     platzieren lässt. */
  position: static;
  right: auto;
  top: auto;
  transform: none;
}

/* Logo innerhalb des Headers */
#appHeader img#logo {
  height: 32px;
  margin-right: 0.5rem;
}

/* Linke Kopfzeile fasst Logo und Zurück‑Button zusammen */
.header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#appHeader h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  /*
    Ermöglicht das Umbrechen langer Titel, damit diese nicht abgeschnitten
    werden. Zuvor wurde `white-space: nowrap` mit Ellipsis verwendet,
    wodurch längere Texte im Header abgeschnitten wurden. Durch das
    Entfernen dieser Eigenschaften und das Zulassen von Zeilenumbrüchen
    kann der Titel in zwei Zeilen umbrechen, falls nötig, ohne die
    nebenstehenden Buttons zu überlappen.
  */
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;

  /*
    Ermöglicht dem Titel, innerhalb des Grid‑Layouts zu schrumpfen.
    Ohne eine explizite Mindestbreite erben Grid‑Items den Wert
    `min-width: auto`, wodurch sie nicht kleiner als ihr Inhalt werden
    dürfen. Das führt dazu, dass die Nachbarzellen (z. B. der Menü‑Button)
    abgeschnitten werden, sobald der Titel oder linke Button zu lang ist.
    Mit `min-width: 0` darf die Zelle schrumpfen und der Titel bricht
    korrekt um, wodurch ausreichend Platz für den rechten Text bleibt.
  */
  min-width: 0;

  /*
    Lässt die Überschrift den verfügbaren Platz innerhalb des flexbasierten
    Headers einnehmen. Dadurch wird sie zwischen den beiden äußeren
    Elementen (linke Gruppe und Menü‑Symbol) zentriert und kann bei
    Bedarf in zwei Zeilen umbrechen.
  */
  flex: 1;
}

/*
  Stile für die Mengeneingabe (plus/minus‑Feld). Die Standard‑
  HTML‑Number‑Input wurde als zu klein und schwer zu bedienen empfunden.
  Daher werden hier eigene Klassen definiert, die in der Artikel‑Detailseite
  genutzt werden. Die Buttons sind größer, besser anklickbar und die
  Eingabe orientiert sich an der Größe der Schaltflächen.
*/
.qty-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  /* Füllt die verfügbare Breite im Container aus, damit die
     Mengeneingabe auf mobilen Geräten mehr Platz erhält. */
  width: 100%;
}

.qty-wrapper .qty-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 0.4rem;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--primary-color);
  background-color: var(--secondary-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.qty-wrapper .qty-btn:hover {
  background-color: #b89a4f;
}

.qty-wrapper .qty-input {
  width: 80px;
  height: 44px;
  font-size: 1.4rem;
  text-align: center;
  border: 1px solid var(--input-border-color);
  border-radius: 0.4rem;
  background-color: var(--card-background);
  color: var(--text-color);
  box-sizing: border-box;

  /* Erlaubt dem Eingabefeld, den restlichen Raum im flex‑Container
     einzunehmen. Breite wird über flex definiert statt fix in Pixeln. */
  flex: 1 1 auto;
  width: auto;
}

/*
  Auf Smartphones ist eine zu breite Mengeneingabe ungünstig, weil sie
  sonst den restlichen Inhalt verdrängt. Begrenze daher die Breite des
  Eingabefeldes und verhindere, dass es sich übermäßig ausdehnt. Die
  Plus/Minus‑Schaltflächen bleiben unverändert groß.
*/
@media (max-width: 600px) {
  /* Responsives Layout für Benutzerliste: Tabellenzeilen werden gestapelt,
     Kopfzeilen ausgeblendet und jede Zelle erhält ein Label über
     das data‑label‑Attribut. Dies erleichtert die Bedienung in der
     mobilen Ansicht ohne horizontales Scrollen. */
  table.user-list thead {
    display: none;
  }
  table.user-list tr {
    display: block;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
  }
  table.user-list td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.25rem 0;
  }
  table.user-list td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 0.5rem;
  }
  /* Aktionsspalte: Buttons vertikal anordnen für bessere Bedienbarkeit */
  table.user-list td:last-child {
    flex-direction: column;
    gap: 0.25rem;
  }
  .qty-wrapper .qty-input {
    flex: 0 1 5rem;
    max-width: 5rem;
  }
}


.icon-btn {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.4rem;
  padding: 0.25rem;
  cursor: pointer;
}

/*
  Toast‑Container und Toast‑Meldungen
  
  Kurze Benachrichtigungen (Toasts) werden in einer fixierten
  Containerleiste am unteren Bildschirmrand angezeigt. Jede Meldung
  erscheint mit einer Fade‑In‑Animation und verschwindet nach ein
  paar Sekunden automatisch wieder. Das Design ist an die
  Primärfarbe der App angelehnt, um sich harmonisch einzufügen.
*/
.toast-container {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  pointer-events: none; /* Klicks durchreichen */
}

.toast {
  background-color: rgba(24, 69, 59, 0.95);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  min-width: 200px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0;
  animation: toast-fadein 0.3s forwards;
}

@keyframes toast-fadein {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.icon-btn:focus {
  outline: none;
}

/*
  Textvariante des Symbol-Buttons im Header. Normalerweise verwendet
  der Optionsbutton im Header ein Symbol (⋮). Wenn jedoch ein Wort
  wie „Menü“ angezeigt wird, ist die Standardgröße zu groß und der
  Text wird abgeschnitten. Durch die zusätzliche Klasse
  `.text-btn` erhält der Button eine kleinere Schrift, mehr
  horizontale Polsterung und erlaubt es, dass der gesamte Text ohne
  Abschneiden angezeigt wird.
*/
.icon-btn.text-btn {
  font-size: 1rem;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

/*
  Spezifische Stile für die Login‑Maske. Durch die eigene Klasse
  .login-card wird die Anmeldekarte zentriert, erhält etwas mehr
  Innenabstand und wirken Eingabefelder sowie Buttons optisch
  konsistenter. Wenn Sie die Abmessungen oder Farben an Ihr CI
  anpassen möchten, können Sie diese Werte hier verändern.
*/
.login-card {
  max-width: 350px;
  margin: 2rem auto;
  padding: 2rem;
}
.login-card label {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.login-card input[type="text"], .login-card input[type="password"] {
  padding: 0.8rem;
  font-size: 1rem;
}
.login-card .btn {
  margin-top: 1.2rem;
}

/* Main content */
#mainContent {
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* On wider screens (e.g. desktop), expand the maximum width of the
   main content to provide more room for tables and forms such as
   those used in the master data management. Without this rule the
   PWA remains constrained to 600px even on large monitors, making
   administrative tasks cramped. */
@media (min-width: 800px) {
  #mainContent {
    max-width: 1100px;
  }
}

/*
  Auf schmalen Geräten darf der Hauptinhalt nicht breiter als die
  Bildschirmbreite werden, sonst entsteht ein horizontaler Scrollbalken.
  Deshalb heben wir das fixe max-width auf und lassen den Inhalt 100 % der
  verfügbaren Breite einnehmen.
*/
@media (max-width: 600px) {
  #mainContent {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0.5rem;
  }

  /* Kopfzeile schmaler und Schrift kleiner für Mobilgeräte */
  #appHeader {
    padding: 0.5rem;
  }
  #appHeader h1 {
    font-size: 0.9rem;
  }
  .icon-btn {
    font-size: 1.2rem;
    padding: 0.25rem;
  }
  .qty-wrapper .qty-btn {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
}

/* Card / section container */
.card {
  background-color: var(--card-background);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-bottom: 1rem;
}

.card h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-color);
}

/* Form elements */
label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

input[type="text"], input[type="date"], input[type="number"], textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--input-border-color);
  border-radius: 0.4rem;
  font-size: 1rem;
  box-sizing: border-box;
}

input[type="text"]:focus, input[type="date"]:focus, input[type="number"]:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(24, 69, 59, 0.2);
}

textarea {
  resize: vertical;
  min-height: 3rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: var(--primary-color);
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.btn:hover {
  background-color: #0f362c;
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.btn-secondary:hover {
  background-color: #b89a4f;
}

/* Item list */
.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.item-list li {
  background-color: #f3f5f8;
  border: 1px solid #e1e5ec;
  padding: 0.6rem;
  border-radius: 0.4rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}

.item-list li:last-child {
  margin-bottom: 0;
}

.item-list .remove-btn {
  background: transparent;
  border: none;
  color: #305285;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  margin-left: 0.5rem;
}

/* Search results */
.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.search-results li {
  padding: 0.6rem;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-results li:hover {
  background-color: var(--hover-bg);
}

.search-results li:last-child {
  border-bottom: none;
}

.info-icon {
  color: var(--primary-color);
  font-size: 1.2rem;
}

/* Favoritenstern */
.favorite-star {
  font-size: 1.2rem;
  color: var(--secondary-color);
  cursor: pointer;
  margin-right: 0.25rem;
}

/* Footer / action bar (for bottom button) */
.action-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* Hide elements utility */
.hidden {
  display: none !important;
}
/* Kompakte Buttons für User-Verwaltung */
.btn-small {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  min-width: 2.2rem;
  max-width: 4.5rem;
  line-height: 1.2;
}

/* Responsive Table für Benutzerverwaltung */
.user-table-wrapper {
  overflow-x: auto;
  display: block;
  width: 100%;
}
.user-table td, .user-table th {
  word-break: break-word;
  padding: 0.25rem 0.5rem;
  vertical-align: middle;
  font-size: 0.95em;
}