/* =============================================================================
   Atemschutz-Verwaltung - nur modulspezifische Ergaenzungen.
   Grundlayout, Buttons, Formulare und Farben kommen aus shared/css.
   ========================================================================== */

/* Hintergrundbild hinter dem Inhalt. Im dunklen Design zurueckhaltender,
   damit der Text lesbar bleibt. */
.background {
    position: fixed;
    inset: 0;
    background: url('../media/background.jpg') no-repeat center center;
    background-size: cover;
    opacity: .3;
    z-index: -1;
}

@media (prefers-color-scheme: dark) {
    .background {
        opacity: .12;
    }
}

/* --- Statuslegende -------------------------------------------------------- */

.status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
}

.legend-item {
    display: inline-flex;
    align-items: center;
}

/* --- Fahrzeugliste auf der Startseite ------------------------------------- */

.vehicle-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0;
}

.vehicle-item {
    margin-bottom: var(--space-3);
}

.vehicle-box {
    display: block;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-card);
    color: var(--c-text);
    box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s;
}

/* Die Kurzschrift "border" oben setzt auch die linke Kante zurueck, und
   "background" ueberschreibt die Statusfarbe aus base.css. Deshalb hier noch
   einmal ausdruecklich, sonst sieht die Karte in jedem Zustand gleich aus. */
.vehicle-box.status-expired,
.vehicle-box.status-soon,
.vehicle-box.status-ok {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.vehicle-box.status-expired {
    border-left: 5px solid var(--status-expired);
    background: var(--status-expired-bg);
}

.vehicle-box.status-soon {
    border-left: 5px solid var(--status-soon);
    background: var(--status-soon-bg);
}

.vehicle-box.status-ok {
    border-left: 5px solid var(--status-ok);
    background: var(--status-ok-bg);
}

.vehicle-box:active {
    transform: scale(0.99);
}

.vehicle-name {
    font-size: 1.05rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.vehicle-expiry {
    margin-top: var(--space-1);
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
    line-height: 1.6;
}

/* --- Ablaufende Masken und Geraete ---------------------------------------- */

.expiry-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0;
}

.expiry-item {
    margin-bottom: var(--space-3);
}

.expiry-link {
    display: block;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-card);
    color: var(--c-text);
    box-shadow: var(--shadow);
}

.expiry-link h3 {
    margin: 0 0 var(--space-3);
}

.expiry-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.expiry-sublist li {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border: 1px solid var(--c-border);
    font-size: var(--font-size-small);
    overflow-wrap: anywhere;
}

.expiry-sublist li:last-child {
    margin-bottom: 0;
}

/* Gleiche Ursache wie bei .vehicle-box: die Kurzschrift oben nimmt die
   Statuskante wieder weg. */
.expiry-sublist li.status-expired {
    border-left: 5px solid var(--status-expired);
}

.expiry-sublist li.status-soon {
    border-left: 5px solid var(--status-soon);
}

.expiry-sublist li.status-ok {
    border-left: 5px solid var(--status-ok);
}

@media (hover: hover) {

    .vehicle-box:hover,
    .expiry-link:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
}

/* --- Masken- und Geraeteliste im Fahrzeug --------------------------------- */

.item-list .list-row.clickable {
    cursor: pointer;
}

.item-list .list-row.clickable:active {
    transform: scale(0.995);
}

/* Loeschen-Formular soll die Zeile nicht auseinanderziehen. */
.btnDel {
    margin: 0;
    flex: none;
}

/* --- Barcode-Scanner ------------------------------------------------------ */

.icon-button {
    flex: none;
    width: 52px;
    height: 52px;
    min-height: 0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-card);
    cursor: pointer;
}

.icon-button img {
    width: 40px;
    height: auto;
    display: block;
}

#barcode-scanner {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Auf flachen Displays (Querformat) nicht die Hoehe sprengen */
    max-height: 55vh;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    /* Feste helle Schrift: die Flaeche bleibt in beiden Designs dunkel. */
    color: #f2f4f6;
}

#barcode-scanner video,
#barcode-scanner canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* --- Adminbereich --------------------------------------------------------- */

.settings-group {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-card);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.settings-group h3 {
    margin: 0 0 var(--space-3);
}