/* ═══════════════════════════════════════════════════════════════════════════
   Auftrag: linke Seitenleiste mit der Auftragsliste (AuftragSeitenleiste.razor).
   Unabhängig von der rechten Seitenleiste (Radzen-Splitter): eigene Breite (Griff rechts, appSplitter in app.js),
   eigener Auf-/Zu-Zustand. Farben nur aus Radzen-Variablen – die Stile (data-app-stil) und Hell/Dunkel setzen diese.
   Telefon (≤ 767.98 px, Klasse asl-schmal): Schublade über dem Inhalt statt den Auftrag zu quetschen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Zeile: Auftragsliste | Hauptbereich mit rechter Seitenleiste. Die Höhe gibt der Splitter-Rahmen vor (appFuellHoehe). */
.auftrag-mit-links {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.auftrag-mit-links > .auftrag-splitter-rahmen {
    flex: 1 1 auto;
    min-width: 0;
}

/* ───────────── Offene Leiste (Desktop) ───────────── */
/* Inhalt absolut positioniert: die Leiste trägt nichts zur Zeilenhöhe bei und wird genau so hoch wie der Auftrag. */
.asl {
    position: relative;
    flex: 0 0 auto;
    width: 280px;          /* Standardbreite; gezogene Breite setzt appSplitter als Inline-Stil */
    min-width: 200px;
    max-width: 600px;
    margin-right: 8px;
    border-right: 1px solid var(--rz-border-color, var(--rz-base-300, rgba(127, 127, 127, .3)));
}

.asl-inhalt {
    position: absolute;
    inset: 0 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    padding: 0 4px 6px 0;
}

/* Griff am rechten Rand zum Ziehen der Breite */
.asl-griff {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -4px;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
    z-index: 2;
}

.asl-griff:hover,
.asl-griff.aktiv {
    background: color-mix(in srgb, var(--rz-primary) 25%, transparent);
}

/* ───────────── Kopf, Filter ───────────── */
.asl-kopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
}

.asl-titel {
    font-weight: 600;
    white-space: nowrap;
}

.asl-kopf-knoepfe {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
}

.asl-filter {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asl-statusleiste {
    display: flex;
    width: 100%;
}

.asl-statusleiste .rz-button {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
}

.asl-datum {
    display: flex;
    align-items: center;
    gap: 4px;
}

.asl-datum > .rz-datepicker {
    flex: 1 1 0;
    min-width: 0;
}

.asl-datum > span {
    color: var(--rz-text-secondary-color);
}

/* ───────────── Liste ───────────── */
.asl-liste {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--rz-border-color, var(--rz-base-300, rgba(127, 127, 127, .3)));
    padding-top: 4px;
}

.asl-eintrag {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: var(--rz-border-radius, 4px);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.3;
    cursor: pointer;
}

.asl-eintrag:hover {
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.asl-eintrag:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: -2px;
}

.asl-eintrag.aktiv {
    background: color-mix(in srgb, var(--rz-primary) 18%, transparent);
    border-left-color: var(--rz-primary);
}

.asl-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.asl-nummer {
    font-weight: 600;
    white-space: nowrap;
}

.asl-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asl-kunde {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asl-klein {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
}

.asl-betrag {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Status-Plakette: Farbe aus den Radzen-Statusfarben (passt in allen Stilen und im Dunkelmodus). */
.asl-status {
    align-self: flex-start;
    margin-top: 2px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.5;
    border: 1px solid color-mix(in srgb, var(--asl-status-farbe) 45%, transparent);
    background: color-mix(in srgb, var(--asl-status-farbe) 16%, transparent);
    --asl-status-farbe: var(--rz-text-secondary-color);
}

.asl-status.offen { --asl-status-farbe: var(--rz-info); }
.asl-status.abgerechnet { --asl-status-farbe: var(--rz-warning); }
.asl-status.bezahlt { --asl-status-farbe: var(--rz-success); }

.asl-hinweis,
.asl-laedt {
    padding: 6px 4px;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.asl-laedt {
    display: flex;
    align-items: center;
    gap: 6px;
}

.asl-fehler {
    color: var(--rz-danger);
}

.asl-fuss {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    border-top: 1px solid var(--rz-border-color, var(--rz-base-300, rgba(127, 127, 127, .3)));
    padding-top: 4px;
}

/* ───────────── Zugeklappt: Fahne am linken Rand ───────────── */
.asl-zu {
    flex: 0 0 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 4px;
    margin-right: 6px;
    border-right: 1px solid var(--rz-border-color, var(--rz-base-300, rgba(127, 127, 127, .3)));
}

/* Gespiegelte Variante der rechten Fahnen (.auftrag-fahne aus Auftrag.razor) – doppelte Klasse, damit sie gewinnt. */
.asl-zu .asl-fahne {
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid var(--rz-border-color, var(--rz-base-300, rgba(127, 127, 127, .3)));
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: var(--rz-base-background-color, transparent);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.asl-zu .asl-fahne .rzi {
    writing-mode: horizontal-tb;
    font-size: 1.1rem;
}

.asl-zu .asl-fahne:hover {
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
}

/* ───────────── Telefon: Schublade über dem Inhalt ───────────── */
.asl.asl-schmal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(340px, 88vw) !important;   /* gezogene Desktop-Breite gilt hier nicht */
    min-width: 0;
    max-width: none;
    margin: 0;
    z-index: 950;                          /* über der Tab-Leiste (900), unter Radzen-Popups/Dialogen */
    background: var(--rz-base-background-color, var(--rz-body-background-color));
    box-shadow: var(--rz-shadow-3, 0 6px 24px rgba(0, 0, 0, .35));
}

/* Notch/Home-Balken (iPhone-App) freihalten */
.asl.asl-schmal .asl-inhalt {
    inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0;
    padding: 8px 10px;
}

.asl-hintergrund {
    position: fixed;
    inset: 0;
    z-index: 949;
    background: var(--st-maske, rgba(0, 0, 0, .4));
}

/* Zugeklappt auf dem Telefon: kleine Fahne schwebt am linken Bildschirmrand, der Auftrag behält die volle Breite. */
.asl-zu.asl-schmal {
    position: fixed;
    left: 0;
    top: 45%;
    z-index: 940;
    margin: 0;
    padding: 0;
    border: none;
    flex: none;
}

.asl-zu.asl-schmal .asl-fahne {
    border-left: none;
    border-right: 1px solid var(--rz-border-color, var(--rz-base-300, rgba(127, 127, 127, .3)));
    border-radius: 0 6px 6px 0;
    padding: 8px 4px;
    box-shadow: var(--rz-shadow-2, 0 2px 6px rgba(0, 0, 0, .25));
}

@media (max-width: 767.98px) {
    /* Platzhalter vor dem ersten Rendern nimmt auf dem Telefon keinen Platz weg. */
    .asl-platzhalter {
        display: none;
    }
}

/* Status-Badge rechts in der Zeile mit dem Auftragsnamen */
.asl-zeile-name {
    align-items: center;
}

.asl-zeile-name .asl-name {
    flex: 1 1 auto;
    min-width: 0;
}

.asl-zeile-name .asl-status {
    flex: 0 0 auto;
    align-self: center;
    margin-top: 0;
}

/* Sortierung unter den Filtern */
.asl-sortierung {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Filter ausgeblendet: eine Kurzzeile */
.asl-filter-kurz {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 4px;
    padding: 4px 6px;
    border: 1px dashed var(--rz-border-color, #ccc);
    border-radius: 6px;
    background: transparent;
    color: var(--rz-text-secondary-color, inherit);
    font: inherit;
    font-size: .78rem;
    text-align: left;
    cursor: pointer;
}

.asl-filter-kurz span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asl-filter-kurz:hover {
    border-color: var(--rz-primary, #1976d2);
    color: inherit;
}

.asl-filter-kurz .rzi {
    font-size: 1rem;
}

/* Kundenfilter (im Auftrag gewählter Kunde) */
.asl-kundefilter { display: flex; align-items: center; gap: 6px; margin: 4px 6px; padding: 4px 8px; border-radius: 6px; font-size: .8rem;
                   background: color-mix(in srgb, var(--rz-primary, #1976d2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rz-primary, #1976d2) 35%, transparent); }
.asl-kundefilter span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asl-kundefilter button { border: none; background: none; color: inherit; cursor: pointer; font-size: .9rem; padding: 0 2px; opacity: .7; }
.asl-kundefilter button:hover { opacity: 1; }