/* ═══════════════════════════════════════════════════════════════════════════
   Auftrag auf dem Telefon (≤ 767.98 px, per RadzenMediaQuery – der Desktop rendert weiter Tabelle/Filter wie bisher):
   • „Aufträge finden“ (AuftragFindenDialog.razor, Präfix asm-): Suchleiste, aufklappbare Filter, aktive Filter als Chips,
     Treffer als Karten.
   • Positionen (AuftragPositionenKarten.razor, Präfix apk-): Karten statt Tabelle, Summen unten.
   Farben nur aus Radzen-/Bootstrap-Variablen – die Stile (data-app-stil) und Hell/Dunkel setzen diese.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────── Aufträge finden: Suchleiste ───────────── */
.asm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.asm-suchleiste {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.asm-suchfeld {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 10px;
    min-height: 44px;
    border: 1px solid var(--rz-input-border-color, var(--rz-border-color, var(--bs-border-color)));
    border-radius: var(--rz-input-border-radius, var(--rz-border-radius, 6px));
    background: var(--rz-input-background-color, var(--bs-body-bg));
    color: var(--rz-input-value-color, var(--rz-text-color, var(--bs-body-color)));
}

.asm-suchfeld:focus-within {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 1px var(--rz-primary);
}

.asm-suchfeld > .rzi {
    color: var(--rz-text-secondary-color, var(--bs-secondary-color));
}

/* Eingabefelder: 16px (kein iOS-Zoom), volle Breite, Theme-Farben */
.asm-eingabe {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 42px;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 16px;
}

.asm-eingabe.asm-rahmen {
    padding: 0 10px;
    min-height: 44px;
    border: 1px solid var(--rz-input-border-color, var(--rz-border-color, var(--bs-border-color)));
    border-radius: var(--rz-input-border-radius, var(--rz-border-radius, 6px));
    background: var(--rz-input-background-color, var(--bs-body-bg));
    color: var(--rz-input-value-color, var(--rz-text-color, var(--bs-body-color)));
}

.asm-eingabe.asm-rahmen:focus {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 1px var(--rz-primary);
}

/* Knöpfe neben der Suche (Suchen, Filter, Kunde wählen) – mind. 44 px Touch-Fläche */
.asm-knopf {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--rz-border-color, var(--bs-border-color));
    border-radius: var(--rz-border-radius, 6px);
    background: var(--rz-base-background-color, var(--bs-body-bg));
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.asm-knopf:hover,
.asm-knopf:focus-visible {
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    outline: none;
}

.asm-knopf.aktiv,
.asm-knopf-suchen {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
}

.asm-zahl {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 20px;
    text-align: center;
    color: var(--rz-on-primary, var(--bs-body-bg));
    background: var(--rz-primary);
}

/* ───────────── Aufträge finden: Filterbereich (aufgeklappt) ───────────── */
.asm-filter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--rz-border-color, var(--bs-border-color));
    border-radius: var(--rz-border-radius, 8px);
    background: color-mix(in srgb, var(--rz-primary) 4%, var(--rz-base-background-color, var(--bs-body-bg)));
}

.asm-feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.asm-feld-titel {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color, var(--bs-secondary-color));
}

.asm-reihe {
    display: flex;
    gap: 6px;
    min-width: 0;
}

/* von – bis: zwei Datumsfelder nebeneinander, auf sehr schmalen Geräten untereinander */
.asm-datum {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

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

@media (max-width: 360px) {
    .asm-datum {
        grid-template-columns: 1fr;
    }
}

.asm-kunde {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--rz-primary);
    border-radius: var(--rz-border-radius, 6px);
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.asm-kunde > span {
    flex: 1 1 auto;
    min-width: 0;
}

.asm-filter-knoepfe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.asm-filter-knoepfe .rz-button {
    min-height: 44px;
}

/* ───────────── Chips (Status-Auswahl und aktive Filter) ───────────── */
.asm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.asm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--rz-border-color, var(--bs-border-color));
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.asm-chip .rzi {
    font-size: 1rem;
}

.asm-chip.aktiv {
    border-color: color-mix(in srgb, var(--rz-primary) 60%, transparent);
    background: color-mix(in srgb, var(--rz-primary) 16%, transparent);
}

/* Aktive Filter: kleiner, mit ✕ */
.asm-aktiv .asm-chip {
    min-height: 30px;
    padding: 0 2px 0 10px;
    cursor: default;
}

.asm-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.asm-x:hover,
.asm-x:focus-visible {
    background: color-mix(in srgb, currentColor 14%, transparent);
    outline: none;
}

.asm-x .rzi {
    font-size: 1.05rem;
}

/* ───────────── Aufträge finden: Treffer als Karten ───────────── */
.asm-summe {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color, var(--bs-secondary-color));
}

.asm-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asm-karte {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--rz-border-color, var(--bs-border-color));
    border-left: 4px solid var(--asm-status-farbe, var(--rz-border-color, var(--bs-border-color)));
    border-radius: var(--rz-border-radius, 8px);
    background: var(--rz-base-background-color, var(--bs-body-bg));
    box-shadow: var(--rz-shadow-1, none);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.asm-karte:hover,
.asm-karte:active {
    background: color-mix(in srgb, var(--rz-primary) 8%, var(--rz-base-background-color, var(--bs-body-bg)));
}

.asm-karte:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 1px;
}

/* Randfarbe der Karte nach Status (wie die Plakette) */
.asm-karte:has(.asm-status.offen) { --asm-status-farbe: var(--rz-info); }
.asm-karte:has(.asm-status.abgerechnet) { --asm-status-farbe: var(--rz-warning); }
.asm-karte:has(.asm-status.bezahlt) { --asm-status-farbe: var(--rz-success); }

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

.asm-unten {
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2px;
}

.asm-nummer {
    font-weight: 700;
    white-space: nowrap;
}

.asm-name {
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

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

.asm-klein {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color, var(--bs-secondary-color));
}

.asm-betrag {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.asm-plaketten {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Status-Plakette wie in der Auftragsliste links (.asl-status) */
.asm-status {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.5;
    border: 1px solid color-mix(in srgb, var(--asm-plakette) 45%, transparent);
    background: color-mix(in srgb, var(--asm-plakette) 16%, transparent);
    --asm-plakette: var(--rz-text-secondary-color, var(--bs-secondary-color));
}

.asm-status.offen { --asm-plakette: var(--rz-info); }
.asm-status.abgerechnet { --asm-plakette: var(--rz-warning); }
.asm-status.bezahlt { --asm-plakette: var(--rz-success); }
.asm-status.ueberfaellig { --asm-plakette: var(--rz-danger); }

.asm-rechnung {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.asm-leer {
    padding: 16px 4px;
    text-align: center;
    color: var(--rz-text-secondary-color, var(--bs-secondary-color));
}

.asm-mehr {
    min-height: 44px;
    border: 1px dashed var(--rz-border-color, var(--bs-border-color));
    border-radius: var(--rz-border-radius, 8px);
    background: transparent;
    color: var(--rz-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.asm-mehr:hover {
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
}

/* ───────────── Positionen als Karten ───────────── */
.apk {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    min-width: 0;
}

.apk-karte {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 10px 12px;
    border: 1px solid var(--rz-border-color, var(--bs-border-color));
    border-radius: var(--rz-border-radius, 8px);
    background: var(--rz-base-background-color, var(--bs-body-bg));
    box-shadow: var(--rz-shadow-1, none);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.apk-karte:hover,
.apk-karte:active {
    background: color-mix(in srgb, var(--rz-primary) 6%, var(--rz-base-background-color, var(--bs-body-bg)));
}

.apk-karte:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 1px;
}

.apk-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.apk-nr {
    flex: 0 0 auto;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
}

.apk-datum {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color, var(--bs-secondary-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apk-knoepfe {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: -4px -6px -4px 0;
    cursor: default;
}

.apk-druck {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    min-height: 36px;
    font-size: 0.8rem;
}

.apk-druck .rz-label {
    margin: 0;
    cursor: pointer;
}

/* Beschreibung vollständig und umbrochen (die Tabelle schneidet nach ~5 Zeilen ab) */
.apk-text {
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.apk-klein {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color, var(--bs-secondary-color));
}

.apk-intern {
    font-style: italic;
}

.apk-zahlen {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px dashed var(--rz-border-color, var(--bs-border-color));
    font-variant-numeric: tabular-nums;
}

.apk-rechnung {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.apk-mal {
    color: var(--rz-text-secondary-color, var(--bs-secondary-color));
}

.apk-gesamt {
    font-size: 1.05rem;
    white-space: nowrap;
}

/* Wie PositionZelle in der Tabelle: Anzahl ≤ 0 bzw. EP < 1 rot */
.apk-warnung {
    padding: 0 4px;
    border-radius: 4px;
    color: var(--rz-on-danger);
    background: var(--rz-danger);
}

.apk-kosten {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.apk-summe {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--rz-primary) 40%, transparent);
    border-radius: var(--rz-border-radius, 8px);
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    font-variant-numeric: tabular-nums;
}

.apk-summe > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.apk-leer {
    padding: 16px 4px;
    text-align: center;
    color: var(--rz-text-secondary-color, var(--bs-secondary-color));
}

.apk-neu.rz-button {
    width: 100%;
    min-height: 44px;
}