/* =========================================================================
   1. GLOBALER DESIGN-STAPEL & DRK-FARBEN
   ========================================================================= */
:root {
    --drk-dunkelblau: #002d55;   /* Hauptfarbe für Titel, Header & Tabellenköpfe */
    --drk-hellblau: #ebf5ff;     /* Hintergrund für wechselnde Tabellenzeilen */
    --drk-blau60: #698caf;       /* Rahmenfarbe für sekundäre Elemente */
    --drk-blau30: #b4c3d7;       /* Standard-Rahmen für Eingabefelder */
    --drk-rot: #e60005;          /* DRK-Rot für Warnungen, Fehler & Lösch-Buttons */
    --drk-rot36: #eb8264 ;       /* Signalfarbe im Hintergrund abgelaufener Artikel */
    --drk-rot30: #fac3af;        /* Signalfarbe im Hintergrund abgelaufener Artikel */
    --jrk-gruen: #2ec4b6;        /* JRK-Grün für Speichern- & Bestätigen-Buttons */
    --drk-grau: #7f7f7f;         /* Neutrale Icons & sekundäre Schließen-Symbole */
    --drk-dunkelgrau: #554f4a;   /* Standardfarbe für gut lesbare Fließtexte */
    --drk-hellgrau: #efeeea;     /* Feine Trennlinien zwischen Inhalten */
    --drk-hintergrund: #fafafa;  /* Gesamter Seitenhintergrund */
    --drk-reinweiss: #ffffff;    /* Weiß für Eingabefelder & Inhaltsboxen */
    --drk-black: #000000;        /* Reines Schwarz für maximale Textkontraste */
    --drk-schatten: rgba(0, 0, 0, 0.15); /* Strukturierte Popup-Schattierung */
}
body { font-family: sans-serif; color: var(--drk-black); background-color: var(--drk-hintergrund); margin: 0; padding: 0; }
.sticky-header-container { background: var(--drk-reinweiss); padding: 15px; border-bottom: 3px solid var(--drk-dunkelblau); box-shadow: 0 2px 8px var(--drk-schatten); }
.app-title-head { color: var(--drk-dunkelblau); text-align: center; font-size: 20px; margin: 0 0 15px 0; text-transform: uppercase; font-weight: bold; }
.table-section-title { color: var(--drk-dunkelblau); font-size: 16px; font-weight: bold; margin: 20px 12px 10px 12px; text-transform: uppercase; }

/* =========================================================================
   2. GEMEINSAME BASIS FÜR DIE FILTER-PANELS & SCHRIFTEN
   ========================================================================= */
.filter-form { 
    display: flex; 
    flex-direction: row; 
    gap: 10px; 
    width: 100%; 
    align-items: center;
}
.button-group { 
    display: flex; 
    gap: 8px; 
    width: auto; 
}
.form-easy { display: block; width: 100%; margin-bottom: 12px; }
.form-choice { display: flex; gap: 10px; width: 100%; margin-bottom: 12px; }
.form-input-styled { width: 100%; padding: 8px 10px; border: 1px solid var(--drk-blau30); border-radius: 4px; font-size: 15px; color: var(--drk-black); background: var(--drk-reinweiss); box-sizing: border-box; }
.form-input-styled:focus { border-color: var(--drk-dunkelblau); outline: none; }
.label-heading { font-size: 13px; font-weight: bold; color: var(--drk-dunkelblau); text-transform: uppercase; margin: 0 0 4px 0; }
.text-centered { text-align: center; }

/* Smartphone-Automatik: Im Hochformat alles untereinander stapeln */
@media (max-width: 768px) { 
    .filter-form { flex-direction: column; align-items: stretch; } 
    .button-group { width: 100%; }
    .form-choice { flex-direction: column; gap: 8px; } 
}

/* =========================================================================
   3. STRUKTUR DER HELFER-TABELLE (MOBIL OPTIMIERT)
   ========================================================================= */
                                                            /* Macht das Wischen auf dem iPhone butterweich */
/*.table-responsive-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }*/
.table-helfer { width: 100%; border-collapse: collapse; background: var(--drk-reinweiss); }
.table-helfer th { background-color: var(--drk-dunkelblau); color: var(--drk-reinweiss); text-align: left; padding: 10px; font-size: 14px; border-right: 1px solid var(--drk-blau60); }
.table-helfer th:last-child { border-right: none; }
.table-helfer td { padding: 12px 10px; border-bottom: 1px solid var(--drk-hellgrau); border-right: 1px solid var(--drk-hellgrau); vertical-align: top; font-size: 14px; }
.table-helfer td:last-child { border-right: none; }
.table-helfer tbody tr:nth-child(even), .drk-matrix-table tbody tr:nth-child(even) { background-color: var(--drk-hellblau) !important; }
.table-helfer tbody tr:hover, .drk-matrix-table tbody tr:hover { background-color: rgba(0, 45, 85, 0.04) !important; }
.cell-artikel-info { color: var(--drk-dunkelgrau); font-size: 12px; font-style: italic; }
/*.meta-charge-text { color: var(--drk-grau); font-size: 12px; margin-top: 2px; }*/
.link-ort-filter { color: var(--drk-dunkelblau); text-decoration: underline; font-weight: bold; }
.cell-centered-qty { text-align: center; }
.unit-badge-small { background: var(--drk-hellgrau); color: var(--drk-dunkelgrau); padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: bold; }
.qty-display-bold { font-size: 18px; font-weight: bold; color: var(--drk-dunkelblau); }
.booking-flex-row { display: flex; gap: 4px; align-items: center; justify-content: flex-start; }
.btn-minus { background-color: var(--drk-rot); color: var(--drk-reinweiss); border: none; border-radius: 4px; width: 32px; height: 32px; font-weight: bold; cursor: pointer; }
.input-qty { width: 50px; height: 32px; text-align: center; border: 1px solid var(--drk-blau30); border-radius: 4px; box-sizing: border-box; }




/* =========================================================================
   4. STRUKTUR DER ADMIN-MATRIX (DICHTE DATENMASKE)
   ========================================================================= */
.drk-matrix-table { width: 100%; border-collapse: collapse; background: var(--drk-reinweiss); margin-top: 15px; }
.drk-matrix-table th { background-color: var(--drk-dunkelblau); color: var(--drk-reinweiss); text-align: left; padding: 8px; font-size: 13px; border: 1px solid var(--drk-blau60); }
.drk-matrix-table td { padding: 6px; border: 1px solid var(--drk-blau30); vertical-align: middle; font-size: 13px; }
.matrix-input { width: 100%; padding: 6px; border: 1px solid var(--drk-blau30); border-radius: 3px; box-sizing: border-box; font-size: 13px; background: var(--drk-reinweiss); }
.matrix-input:focus { border-color: var(--drk-dunkelblau); background: var(--drk-hellblau); outline: none; }
.field-stacked-top { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.field-stacked-bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
.mhd-feld-rot { background-color: var(--drk-rot30) !important; color: var(--drk-rot); font-weight: bold; }
.mhd-feld-gelb { background-color: #fff3cd !important; color: #856404; }
.status-stack-wrapper { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }

/* =========================================================================
   5. INTERAKTIVE POPUPS (OVERLAYS) & ALLGEMEINE BUTTONS
   ========================================================================= */
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1000; justify-content: center; align-items: center; }
.overlay-box { background: var(--drk-reinweiss); padding: 20px; border-radius: 6px; width: 90%; max-width: 500px; box-shadow: 0 4px 15px var(--drk-schatten); border-top: 5px solid var(--drk-dunkelblau); }
.box-compact { max-width: 320px; }
.overlay-head-flex { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--drk-dunkelblau); padding-bottom: 8px; margin-bottom: 15px; }
.overlay-title-drk { color: var(--drk-dunkelblau); margin: 0; font-size: 16px; font-weight: bold; }
.btn-close-overlay { background: none; border: none; font-size: 24px; cursor: pointer; font-weight: bold; color: var(--drk-grau); }
.scrollable-basket-list { max-height: 220px; overflow-y: auto; margin-bottom: 15px; border: 1px solid var(--drk-hellgrau); padding: 8px; }
.login-error-alert { color: var(--drk-rot); font-size: 12px; font-weight: bold; margin-bottom: 12px; text-align: center; }
.btn { padding: 10px 15px; border: none; border-radius: 4px; font-size: 14px; font-weight: bold; cursor: pointer; text-align: center; text-decoration: none; display: inline-block; box-sizing: border-box; }
.btn-save { background: var(--jrk-gruen); color: var(--drk-reinweiss); flex: 2; }
.btn-alert-fire { background: var(--drk-rot); color: var(--drk-reinweiss); flex: 1; }
.btn-search-fire { background: var(--drk-rot); color: var(--drk-reinweiss); max-width: 280px; }
.btn-reset-gray { background: var(--drk-grau); color: var(--drk-reinweiss); }
.btn-back-blue { background: var(--drk-dunkelblau); color: var(--drk-reinweiss); }

/* =========================================================================
   6. OPTISCHE SCHRAUBEN FÜR DIE ADMIN-MATRIX (STRIKTE TRENNUNG)
   ========================================================================= */
.drk-matrix-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--drk-reinweiss);
    margin-top: 15px;
}

.drk-matrix-table th {
    background-color: var(--drk-dunkelblau);
    color: var(--drk-reinweiss);
    text-align: left;
    padding: 8px;
    font-size: 13px;
    border: 1px solid var(--drk-blau60);
}

.drk-matrix-table td {
    padding: 6px;
    border: 1px solid var(--drk-blau30);
    vertical-align: middle;
    font-size: 13px;
}

/* Kompakte, rahmenlose Inline-Eingabefelder für schnelles Tippen in der Matrix */
.matrix-input {
    width: 100%;
    padding: 6px;
    border: 1px solid var(--drk-blau30);
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 13px;
    background: var(--drk-reinweiss);
}

.matrix-input:focus {
    border-color: var(--drk-dunkelblau);
    background: var(--drk-hellblau);
    outline: none;
}

/* Gestapelte Eingabefelder ohne doppelte Innenränder (z.B. Größe/Charge) */
.field-stacked-top {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.field-stacked-bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Farbcodierung direkt für die Ablauf-Fristen (MHD / Prüfung) */
.mhd-feld-rot {
    background-color: var(--drk-rot30) !important;
    color: var(--drk-rot);
    font-weight: bold;
}

.mhd-feld-gelb {
    background-color: #fff3cd !important; /* Warn-Gelb */
    color: #856404;
}

/* Kompakter vertikaler Stapel für die Aktiv-/Lagerort-Checkboxen ganz rechts */
.status-stack-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
}

/* =========================================================================
   7. DESIGN-HARMONISIERUNG (GLEICHE OPTIK FÜR BEIDE WELTEN)
   ========================================================================= */

/* Hebel 1: Identische Kopfzeilen-Struktur für Helfer & Admin */
.sticky-header-container {
    background: var(--drk-reinweiss);
    padding: 16px;
    border-bottom: 3px solid var(--drk-dunkelblau);
    box-shadow: 0 2px 8px var(--drk-schatten);
}

.brand-logo {
    height: 45px;
    display: block;
    margin: 0 auto 12px auto;
}

.app-title-head {
    color: var(--drk-dunkelblau);
    text-align: center;
    font-size: 20px;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Hebel 2: Identische, hochmoderne Filter-Bar für beide Seiten */
.filter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.button-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* Gemeinsame Button-Grundoptik mit DRK-Farbsteuerung */
.btn-search-fire { background: var(--drk-rot); color: var(--drk-reinweiss); width: 100%; }
.btn-reset-gray { background: var(--drk-grau); color: var(--drk-reinweiss); }
.btn-back-blue { background: var(--drk-dunkelblau); color: var(--drk-reinweiss); }

/* Hebel 3: Zeilen-Wechsel-Rhythmus für beide Tabellen angleichen */
.table-helfer tbody tr:nth-child(even),
.drk-matrix-table tbody tr:nth-child(even) {
    background-color: var(--drk-hellblau) !important;
}

.table-helfer tbody tr:hover,
.drk-matrix-table tbody tr:hover {
    background-color: rgba(0, 45, 85, 0.05) !important; /* Sanfter DRK-Hover-Effekt */
}

/* Stil-Brücke für Typografie-Gleichheit */
.table-section-title {
    color: var(--drk-dunkelblau);
    font-size: 16px;
    font-weight: bold;
    margin: 20px 12px 10px 12px;
    text-transform: uppercase;
}

/* Universelle Badges für Einheiten und Mengen */
.unit-badge-small {
    background: var(--drk-hellgrau);
    color: var(--drk-dunkelgrau);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}



/* =========================================================================
   8. MOBILE PLATZ-OPTIMIERUNG (ERZWIINGT DIE LETZTE SPALTE INS DISPLAY)
   ========================================================================= */
@media (max-width: 768px) {
    /* Innenabstände der Zellen massiv reduzieren */
    .table-helfer th, 
    .table-helfer td {
        padding: 6px 4px !important;
        font-size: 12px !important;
    }

    /* Exakte Breiten-Verteilung erzwingen */
    .table-helfer {
        table-layout: fixed; /* Zwingt den Browser, sich an Prozentangaben zu halten */
        width: 100% !important;
    }

    /* Spalten-Prozente haarscharf zuteilen */
    .table-helfer th:nth-child(1) { width: 28%; } /* Artikel */
    .table-helfer th:nth-child(2) { width: 18%; } /* Größe/Charge */
    .table-helfer th:nth-child(3) { width: 22%; } /* Lagerort */
    .table-helfer th:nth-child(4) { width: 12%; } /* Bestand */
    .table-helfer th:nth-child(5) { width: 20%; } /* Sammel-Abzug */

    /* Die Buchungsreihe (Minus + Input) extrem stauchen */
    .booking-flex-row {
        gap: 2px !important;
    }
    .btn-minus {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }
    .input-qty {
        width: 32px !important;
        height: 24px !important;
        font-size: 12px !important;
    }
}
/* =========================================================================
   9. SCHWEBENDER WARENKORB-BALKEN (FLOATING BASKET BAR)
   ========================================================================= */
#floating-basket-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--drk-dunkelblau);
    color: var(--drk-reinweiss);
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;
    box-shadow: 0 4px 15px var(--drk-schatten);
    cursor: pointer;
    z-index: 999;
    display: none; /* Wird vom JS automatisch auf 'flex' geschaltet */
    align-items: center;
    gap: 8px;
}

#floating-basket-btn:hover {
    background-color: var(--drk-rot); /* Schlägt im Hover elegant auf DRK-Rot um */
}