/* Grund-Einstellungen */
html {
    font-size: 16px; /* Basis-Größe für Berechnungen */
}

body {
    font-family: Verdana, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f0f2f5;
    color: #333;
}

/* Kopfbereich */
header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
}

/* Hauptbereich mit 3 Spalten */
main {
    display: grid;
    /* Spalten-Definition */
    grid-template-columns: 450px 1fr 500px;
    flex: 1;
    gap: 12px;
    padding: 12px;
    overflow: hidden;
}

/* Gemeinsame Spalten-Eigenschaften */
.column {
    background-color: white;
    border-radius: 4px;
    padding: 1rem;
    border: 1px solid #cfd8dc;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.column h3 {
    margin-top: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #eee;
    font-size: 1.1rem;
}

h4 {
    margin-top: 10px;         /* Abstand nach oben */
    padding-bottom: 8px;      /* Abstand vom Text zur Linie */
    border-bottom: 1px solid #eee; /* Feine, helle Linie */
    font-size: 1rem;
    font-weight: bold;
    color: #2c3e50;           /* Passend zum Header-Dunkelblau */
}


/* Spezifische Spalten-Anpassungen */
.col-left { background-color: #ffffff; }
.col-main { background-color: #ffffff; }
.col-right { background-color: #fcfcfc; border-left: 3px solid #2c3e50; }

/* Fussbereich */
footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    padding: 8px;
    text-align: center;
    font-size: 0.85rem;
    flex-shrink: 0;           /* NEU;  Verhindert, dass der Footer zusammengedrückt wird */
}

/* RESPONSIVE ANPASSUNGEN (für Monitore bis 1200px) */
@media (max-width: 1300px) {
    html {
        font-size: 14px; /* Verkleinert Text, Abstände und Paddings global */
    }

    main {
        grid-template-columns: 370px 1fr 420px; /* Spalten werden schmaler */
        gap: 8px;
        padding: 8px;
    }
}

/* Blaue Buttons aus Access */
.btn-nav, .btn-pay {
    background: linear-gradient(to bottom, #87cbff 0%, #3d94f6 100%);
    border: 1px solid #1f628d;
    border-radius: 4px;
    padding: 8px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 1px 1px 2px #888;
}

.btn-nav:hover, .btn-pay:hover {
    opacity: 0.9;
    filter: brightness(1.1);
    cursor: pointer;
    box-shadow: 2px 2px 4px #666; /* Etwas stärkerer Schatten beim Hover */
    transform: translateY(-1px); /* Minimales Anheben */
}

.btn-nav:active, .btn-pay:active {
    transform: translateY(1px);
    box-shadow: 1px 1px 2px #888;
}

/* Spezielles Styling für den Logout-Button */
.btn-nav.logout-red {
    background: #E58D8A !important; /* Nutzt 'background' statt 'background-color' */
    color: white !important;
    border: 1px solid #b92c28 !important;
    box-shadow: 1px 1px 2px #888;
   /* grid-column: span 2; /* Optional: Falls er die ganze Breite füllen soll */
}

.logout-red:hover {
    background-color: #c9302c !important;
}

/* Den Container auf Flexbox umstellen, damit Abstände funktionieren 30.3.2026*/
.payment-grid {
    display: flex !important;
    flex-wrap: wrap;      /* Erlaubt Zeilenumbruch auf kleinen Bildschirmen */
    gap: 8px;             /* Abstand zwischen den normalen Buttons */
    align-items: center;
    width: 100%;
}

/* Punkt 2: Unterschiedliche Farben für Bezahlarten */
.btn-pay.bar   { background: linear-gradient(to bottom, #a5d6a7 0%, #4caf50 100%); border-color: #2e7d32; } /* Grün */
.btn-pay.twint { background: linear-gradient(to bottom, #81d4fa 0%, #03a9f4 100%); border-color: #0277bd; } /* Hellblau */
.btn-pay.karte { background: linear-gradient(to bottom, #9fa8da 0%, #3f51b5 100%); border-color: #283593; } /* Blau/Violett */
.btn-pay.euro  { background: linear-gradient(to bottom, #ffe082 0%, #ffc107 100%); border-color: #ff8f00; } /* Gold/Gelb */
.btn-pay.gegeben  { background: linear-gradient(to bottom, #ffc107 0%, #ff8f00 100%); border-color: #D47140; margin-left: auto; } /* Gold/Gelb */

/* Hover-Effekte für die Bunten Buttons */
.btn-pay:hover { opacity: 0.9; filter: brightness(1.1); }

.nav-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.btn-nav-active {
    color: #000000 !important; /* Text tiefschwarz */
    font-weight: bold;
    border: 2px solid #00838f; /* Optional: etwas dickerer Rand zur Markierung */
    background-color: #e1f5fe; /* Heller Hintergrund für aktiven Status */
}

/* Den Pfeil oder Punkt vor dem Wort einfügen */
.btn-nav-active::before {
    content: "➤ "; /* Oder "• " für einen Punkt */
    font-size: 0.9rem;
    margin-right: 5px;
}

.artikel-zeile {
    display: grid;
    grid-template-columns: 35px 30px 50px 1fr 60px 40px;
    gap: 8px;
    align-items: center;
    padding: 4px;
    border-bottom: 1px solid #ddd;
    font-size: 0.9rem;
}

.btn-rabatt { background-color: #c8e6c9; border: 1px solid #4caf50; }
.btn-add { background-color: #bbdefb; border: 1px solid #2196f3; }

.input-access {     margin-top: 15px; width: 50%; padding: 5px; border: 1px solid #80d3dd; }

/* Styling für den Lösch-Button */
.btn-remove {
    background-color: #f44336; /* Rot wie im Access-Vorbild */
    color: white;
    border: none;
    border-radius: 3px;
    padding: 2px 8px;
    cursor: pointer;
    font-weight: bold;
}

.btn-remove:hover {
    background-color: #d32f2f;
}

.list-container {
    flex-grow: 1;
    overflow-y: auto;
    background: #fff;
    border: 1px inset #ccc;
    padding: 5px;
    margin-bottom: 10px;
    min-height: 200px;
}

.list-container-small {
    min-height: 150px;   /* Stellt sicher, dass die Liste immer Platz einnimmt */
    overflow-y: auto;
}

.cart-item {
    display: grid;
    grid-template-columns: 45px 1fr 60px 70px 65px;
    gap: 5px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.75rem;
}


/* Die orangen Korrektur-Buttons aus dem Screenshot */
.btn-minus, .btn-remove {
    background-color: #ff9800;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    font-weight: bold;
}

.btn-remove { background-color: #f44336; }

.total-box {
    background: #e0e0e0;
    padding: 10px;
    text-align: right;
    font-weight: bold;
    color: #000;
    font-size: 1rem;
    border: 2px solid #333;
    margin-bottom: 10px;
}

.euro-small {
    display: inline;
    font-size: 1rem;
    color: #666;
    margin-left: 10px;
}

.bierdeckel-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

/* --- Kosmetik-Updates --- */

/* Zu Punkt 2 & 3: Einzeiliges Layout und Abstand nach oben */
.bierdeckel-save-box {
    display: flex;             /* Bringt Input und Button in eine Zeile */
    gap: 8px;                  /* Abstand zwischen Input und Button */
    margin-top: 15px;          /* Punkt 3: Abstand zu den btn-pay */
}

/* Zu Punkt 4: Kleinerer Bezahlen-Button in der Liste */
.bierdeckel-item .btn-nav {
    padding: 4px 8px;          /* Weniger Innenabstand */
    font-size: 0.8rem;         /* Kleinere Schrift */
    min-width: 80px;           /* Schmalere Breite */
}

/* Punkt 1: Bierdeckelliste analog zur Lagerwarnung stylen */
.bierdeckel-section {
    margin-top: 15px;
    border-top: 2px solid #eee;
    padding-top: 10px;
}

.bierdeckel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem; /* Gleiche Größe wie Lagerwarnung */
    color: #000;         /* Schwarzer Text wie gewünscht */
}

/* Gezieltes Styling für die Buttons in der Bierdeckel-Tabelle */
.bierdeckel-table .btn-nav {
    padding: 2px 8px;          /* Erste Zahl (2px) verringert die Höhe (oben/unten) */
    font-size: 0.75rem;        /* Etwas kleinere Schrift für kompakten Look */
    min-width: 70px;           /* Breite leicht reduziert */
    line-height: 1.2;          /* Verhindert, dass der Button durch Zeilenhöhe aufgebläht wird */
    vertical-align: middle;    /* Richtet den Button mittig zur Textzeile aus */
    margin: 0;                 /* Entfernt etwaige Standard-Abstände */
}

.bierdeckel-table td {
    padding: 6px 0;      /* Zeilenabstände analog zur Warnung */
    border-bottom: 1px solid #f0f0f0;
}

.bierdeckel-item-name {
    font-weight: normal;
}

/* Zu Punkt 5: Hover-Effekt für die Artikelliste */
.artikel-zeile {
    transition: background-color 0.2s; /* Sanfter Übergang */
}

.artikel-zeile:hover {
    background-color: #e3f2fd; /* Ein helles, freundliches Hellblau */
    cursor: pointer;
}

/* Korrektur für das Kunden-Input-Feld in der Zeile */
#kundenAuswahl {
    flex: 1;                   /* Das Textfeld nimmt den restlichen Platz ein */
}

/* Styling für die Lagerwarnung */
.stock-warning-area {
    margin-top: 20px;
    font-size: 0.85rem;
}

.warn-table {
    width: 100%;
    border-collapse: collapse;
}

.warn-table th {
    text-align: left;
    color: #46a0cc; /* Das Hellblau aus dem Screenshot */
    font-weight: normal;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.warn-link {
    color: #46a0cc;
    padding: 5px 0;
    cursor: pointer;
}

.warn-val {
    text-align: center;
    color: #46a0cc;
}

/* Styling für den Brotzettel*/
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: white; margin: 5% auto; padding: 20px; width: 370px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.brot-row {
    display: grid;
    grid-template-columns: 5px 1fr 60px; /* Deine angepasste Breite vorher 120px*/
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
    align-items: center; /* Vertikal zentriert */
    text-align: left;    /* Horizontal linksbündig */
}
/* Zebra-Look in Hellblau für den Brotzettel */
.brot-row:nth-child(even) {
    background-color: #f0f8ff; /* Sehr helles Hellblau (AliceBlue) */
}

.brot-row:hover {
    background-color: #C7E3FF; /* Etwas kräftiger bei Maus-Kontakt */
    cursor: pointer;
}

/* Zettelnummer ebenfalls linksbündig */
.brot-col-zettel {
    text-align: left;
    color: #666;
    font-family: monospace;
}

/* Artikelname explizit linksbündig */
.brot-col-name {
    text-align: left;
    font-weight: normal;
    padding-left: 5px; /* Ein kleiner Abstand zum Rand */
    cursor: pointer;
    user-select: none; /* Verhindert Markieren des Textes beim Klicken */
    display: inline-block;
    width: 100%;
}

/* Mengenfeld als kleine Box rechts */
.brot-qty {
    width: 45px;
    padding: 3px;
    border: 1px solid #ccc;
    text-align: right;
    border-radius: 2px;
}

/* Die Trennlinie unter dem Scan-Feld für den "leeren" Look */
.modal-body hr {
    border: 0;
    border-top: 1px solid #333;
    margin: 15px 0;
}

 /* Styling für die Einstellungen-Box (Eurokurs/Saison) */
.settings-box {
    border: 1px solid #cfd8dc;
    padding: 15px;
    border-radius: 5px;
    background-color: #fcfcfc;
    margin: 25px 0; /* Mehr Abstand nach oben und unten */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.settings-box p {
    margin: 10px 0;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between; /* Text links, Input rechts */
    align-items: center;
}

.settings-box input {
    padding: 4px;
    border: 1px solid #80d3dd;
    border-radius: 3px;
    font-family: inherit;
}

/* Vorbereitung für das 3-Spalten-Layout (Verwaltung) */
.admin-layout {
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex: 1;
    overflow: hidden;
    padding: 15px;
}