/* ============================================
   AUFTRAGSLEISTE — Import im Hintergrund (30.09.2026)
   ============================================
   Marc: "dass man nicht die ganze Zeit auf den Ladebildschirm schauen muss,
   dass man waehrenddessen in der App drin sein kann und es anzeigt, wenn es
   fertig ist."

   Deshalb KEIN Overlay mehr fuer den Import, sondern eine schmale Leiste ueber
   der unteren Navigation. Sie verschwindet nicht von selbst: ein fertiges
   Rezept muss angetippt werden, sonst ginge es unter, waehrend man woanders
   in der App ist.
   ============================================ */

.auftragsleiste {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--bottom-nav-height, 80px) + 16px);
    z-index: 260;                 /* ueber dem Kochtopf-Knopf (250) */
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 640px;
    margin: 0 auto;
}

/* Solange Auftraege laufen, rueckt der Kochtopf-Knopf hoch — sonst laegen beide
   uebereinander (beide sitzen auf `bottom-nav-height + 16px`). */
body.hat-auftraege .kochtopf-knopf {
    bottom: calc(var(--bottom-nav-height, 80px) + 96px);
}

.auftrag-zeile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 16px);
    background: var(--bg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-md);
}

.auftrag-flaeche {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Der Roboterkopf aus der Ladeanzeige, klein und ruhig. */
.auftrag-bild {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #d8dce3;
}

.auftrag-bild::before,
.auftrag-bild::after {
    content: '';
    position: absolute;
    top: 10px;
    width: 5px;
    height: 6px;
    border-radius: 3px;
    background: #1f2937;
}

.auftrag-bild::before { left: 7px; }
.auftrag-bild::after  { right: 7px; }

/* Blinzeln nur, solange etwas laeuft — ein fertiger Auftrag soll ruhig sein. */
.auftragsleiste.laeuft .auftrag-bild::before,
.auftragsleiste.laeuft .auftrag-bild::after {
    animation: auftrag-blinzeln 3.6s ease-in-out infinite;
}

@keyframes auftrag-blinzeln {
    0%, 92%, 100% { transform: scaleY(1); }
    95%, 96%      { transform: scaleY(0.15); }
}

.auftrag-txt {
    flex: 1;
    min-width: 0;
}

.auftrag-h {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auftrag-u {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted, #9aa0a6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auftrag-p {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent-primary);
}

.auftrag-knopf {
    flex: 0 0 auto;
    min-height: 40px;            /* am Daumen treffbar, wie die Baustein-Knoepfe */
    padding: 8px 13px;
    border: 0;
    border-radius: 10px;
    background: var(--accent-primary);
    color: var(--text-inverse, #231502);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.auftrag-bal {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), #ffd68a);
    transition: width 0.4s ease;
}

/* Fertig und Fehler faerben nur den Rand — der Text traegt die Aussage. */
.auftragsleiste.fertig .auftrag-zeile { border-color: rgba(245, 158, 11, 0.55); }
.auftragsleiste.fehler .auftrag-zeile { border-color: rgba(239, 68, 68, 0.6); }
.auftragsleiste.fehler .auftrag-h     { color: #fca5a5; }

/* --- Die Liste, wenn man die Leiste antippt ---------------------------- */

.auftrag-liste {
    padding: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 16px);
    background: var(--bg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    max-height: 40vh;
    overflow-y: auto;
}

.auftrag-eintrag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
}

.auftrag-eintrag + .auftrag-eintrag {
    border-top: 1px solid var(--border-subtle);
}

.auftrag-punkt {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted, #6b7280);
}

.auftrag-punkt.laeuft { background: var(--accent-primary); }
.auftrag-punkt.fertig { background: #22c55e; }
.auftrag-punkt.fehler { background: #ef4444; }

@media (prefers-reduced-motion: reduce) {
    .auftragsleiste.laeuft .auftrag-bild::before,
    .auftragsleiste.laeuft .auftrag-bild::after { animation: none; }
    .auftrag-bal { transition: none; }
}