@charset "UTF-8";
/* AUFTRÄGE-TAB STYLING (V7-Page-Scroll, 27.04.2026)
 * ====================================================
 *
 * V7-Architektur: Page-Scroll mit position: sticky Filter-Bar.
 * - .rc-content scrollt wie immer (Page-Scroll-Verhalten)
 * - Filter-Bar-Container klebt mit position:sticky oben
 * - Scrollbar verläuft durchgehend von ganz oben bis ganz unten
 *   (am Außenrand der .rc-content)
 * - Spaltenheader-Clone via sticky-header-service.js V3 (unverändert)
 *
 * Trade-off (bewusst akzeptiert): Filter-Bar wandert beim ersten
 * Scroll-Pixel um 1-2px nach oben bevor sie an top:0 klebt.
 * Dafür: durchgehende Scrollbar von oben bis unten, sauber wie
 * Page-Scroll-Standard.
 *
 * Vorgängerversionen:
 * - V6.0-V6.2 (26.04.): Frozen-Panes mit body.tab-auftraege-frozen
 *   Body-Class-Toggle. Verworfen 27.04. weil Scrollbar nur am
 *   Wrapper-Bereich klebte (nicht durchgehend).
 * - V6.3 (27.04.): Pagination-inline-top mit Auto-Hide. Bleibt aktiv.
 *
 * UTF-8 BOM + @charset Pflicht.
 * WinSCP MUSS auf Binär-Modus stehen für Asset-Uploads.
 */


/* ═════════════════════════════════════════════════════════════════
 * 1) FILTER-BAR STICKY (V7, 27.04.2026)
 * Filter-Bar (Status-Tabs + Vorgänge + Pagination-inline-top) klebt
 * beim Page-Scroll oben fest. Greift NUR im Aufträge-Tab via
 * #auftraege-Prefix — andere Tabs unbetroffen.
 * ═════════════════════════════════════════════════════════════════ */

#auftraege .filter-bar-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: #f1f5f9 !important;
    border-bottom: 0.5px solid #e2e8f0 !important;
}


/* ═════════════════════════════════════════════════════════════════
 * 2) EMPTY-STATE
 * Wirkt im HTML aus table-display-service.js
 * (.empty-state-row > td > .empty-state-content > icon/title/hint)
 * ═════════════════════════════════════════════════════════════════ */

#auftraege .empty-state-row td {
    padding: 80px 24px;
    text-align: center;
    background: var(--color-background-primary, #ffffff);
}

#auftraege .empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

#auftraege .empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

#auftraege .empty-state-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

#auftraege .empty-state-title {
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 4px;
}

#auftraege .empty-state-hint {
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
    max-width: 360px;
    line-height: 1.5;
}


/* ═════════════════════════════════════════════════════════════════
 * 3) V6.3 PAGINATION-INLINE-TOP (27.04.2026)
 * Hover/Disabled-States für die Top-Bar-Pagination-Buttons.
 * Inline-Styles in index.html setzen Default-Look — hier nur
 * State-Übergänge die schwer inline lösbar sind.
 * ═════════════════════════════════════════════════════════════════ */

#auftraege .page-btn-top:hover:not(:disabled):not(.active) {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

#auftraege .page-btn-top:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#auftraege #perPageSelectTop:hover {
    border-color: #cbd5e1 !important;
}

#auftraege #perPageSelectTop:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}


/* ═════════════════════════════════════════════════════════════════
 * 4) PRINT — Sticky-Filter-Bar für Druck deaktivieren
 * ═════════════════════════════════════════════════════════════════ */
@media print {
    #auftraege .filter-bar-container {
        position: static !important;
        background: white !important;
        border-bottom: none !important;
    }
    #auftraege .empty-state-row {
        display: none;
    }
}

/* ═════════════════════════════════════════════════════════════════
 * 5) V8 POLISH-BUNDLE (27.04.2026)
 *
 * UI/UX-Aufräumen Richtung Linear/Stripe-Niveau:
 * - Status-Badge: Pill+Icon → Punkt + Text (kein JS-Eingriff, nur CSS-Override)
 * - DIENSTLEISTER-Badge: Field-Look-Border weg, nur Text
 * - FEIG/Ext-RMA-Sub-Badge: dezenteres Pastell-Gelb
 * - LR-Sub-Info unter Status: 11px statt 10px für Lesbarkeit
 * - DETAILS-Notification-Bubble: hellergrau für weniger Dominanz
 *
 * Status-Streifen links bleibt ERHALTEN (User-Wunsch — vertikal-Scan).
 * JS-Render-Logic in table-display-service.js unverändert.
 * ═════════════════════════════════════════════════════════════════ */

/* (a) Status-Badge: Pill+Icon → Punkt + Text */
#auftraege .status-badge-cell {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
#auftraege .status-badge-cell .status-icon-new {
    display: none !important;
}
#auftraege .status-badge-cell::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
}
#auftraege .status-badge-cell.bearbeitung::before { background: #f59e0b; }
#auftraege .status-badge-cell.repariert::before { background: #16a34a; }
#auftraege .status-badge-cell.verschickt::before { background: #3b82f6; }
#auftraege .status-badge-cell.nichtreparabel::before { background: #ef4444; }
#auftraege .status-badge-cell.eingelagert::before { background: #8b5cf6; }
#auftraege .status-badge-cell.entsorgt::before { background: #6b7280; }
#auftraege .status-badge-cell.offen::before { background: #3b82f6; }
#auftraege .status-text-new {
    color: #475569 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

/* (b) DIENSTLEISTER-Badge: Field-Border weg, nur Text */
#auftraege .dienstleister-cell-new > span:first-child {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #475569 !important;
    font-weight: 400 !important;
}

/* (c) FEIG/Ext-RMA-Badge: dezenteres Pastell-Gelb */
#auftraege .ext-rma-status-badge.angefragt {
    background: #fffbeb !important;
    color: #a16207 !important;
    border: 0.5px solid #fde68a !important;
    font-weight: 500 !important;
}
#auftraege .ext-rma-status-badge.erhalten {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 0.5px solid #bbf7d0 !important;
    font-weight: 500 !important;
}

/* (d) LR-Sub-Info: 11px statt 10px */
#auftraege td .versandbereit-sub,
#auftraege td > div[style*="font-size:0.65rem"],
#auftraege td > div[style*="font-size:0.68rem"] {
    font-size: 11px !important;
}

/* (e) DETAILS-Notification-Bubble: hellergrau */
#auftraege .dok-cell span[style*="position:absolute"] {
    background: #cbd5e1 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* ═════════════════════════════════════════════════════════════════
 * 6) V8.1 FEINSCHLIFF (27.04.2026)
 * Drei Mini-Anpassungen nach V8-Review:
 * (i)   Status-Text dunkler — von #475569 auf #1f2937 (Linear-Ton)
 * (ii)  DETAILS-Notification-Bubble eine Stufe lauter — #94a3b8 statt #cbd5e1
 * (iii) FEIG-Sub-Badge Border 1px statt 0.5px — klarere Definition
 * ═════════════════════════════════════════════════════════════════ */

/* (i) Status-Text dunkler */
#auftraege .status-badge-cell,
#auftraege .status-text-new {
    color: #1f2937 !important;
}

/* (ii) DETAILS-Bubble wieder lauter */
#auftraege .dok-cell span[style*="position:absolute"] {
    background: #94a3b8 !important;
}

/* (iii) FEIG-Sub-Badge Border auf 1px für klare Definition */
#auftraege .ext-rma-status-badge.angefragt,
#auftraege .ext-rma-status-badge.erhalten {
    border-width: 1px !important;
}

/* ═════════════════════════════════════════════════════════════════
 * 7) V8.2 LR-SUB-INFO ALIGNMENT (27.04.2026)
 * Sub-Info unter Status (LR-Nummer, LS-Nummer, Versandbereit-Subtext,
 * Warten-auf-Transport-Subtext) fluchtet jetzt mit dem Status-Text
 * statt mit der entfernten Pill.
 *
 * Inline-Style padding-left:30px stammt vom alten Pill-Layout (Pill war
 * ~30px breit). Nach V8 ist nur Punkt 6px + Gap 6px = ~12-14px Versatz.
 *
 * Selektoren matchen exakt 3 Render-Stellen aus table-display-service.js:
 * - Z.776 versandbereitSubBadge ("Warten auf Transport", "Versandbereit"
 *   etc.) — bekommt 14px padding-left damit es mit Status-Text fluchtet
 * - Z.778 verschickt+lieferscheinNr ("LS: ...") — von 30px auf 14px
 * - Z.782 versandbereit+lrNummer ("LR00071") — von 30px auf 14px
 * ═════════════════════════════════════════════════════════════════ */

#auftraege td > div[style*="padding-left:30px"] {
    padding-left: 14px !important;
}

#auftraege td > div[style*="font-size:0.65rem"][style*="color:#94a3b8"] {
    padding-left: 14px !important;
}

/* ═════════════════════════════════════════════════════════════════
 * 8) V9 BUNDLE — TYPOGRAFIE-POLISH (27.04.2026)
 *
 * Drei Polish-Stufen aus der Schrift-Killercheck-Session:
 *
 * (a) Schrift-Polish — 3-stufige Hierarchie
 *     - Spalten-Header 9px → 11px (sichtbar)
 *     - RMA-Nr 13px → 14px fett (primär)
 *     - Kunde-Name 13px → 14px (primär)
 *     - Adresse-Sub 10px → 12px (deutlich lesbarer)
 *     - Hersteller/Gerät 12px → 13px
 *     - Alter 10px → 12px
 *     - Status-Text 12px → 13px
 *     - LR-Sub 11px → 12px Mono
 *     - ext-Nr / KD-Nr in Mono mit slashed-zero
 *
 * (b) Variante C — DL/Status visuell stärker
 *     - DL-Spalte: regular grau → medium dunkel (#1f2937)
 *     - Status-Text: regular dunkel → medium dunkel
 *     - RMA bleibt fett (600), DL/Status nur medium (500) → Hierarchie bleibt
 *
 * (c) B3b — Seriennummer + Geräte-ID ins Type-System
 *     - Beide 14px Mono mit slashed-zero
 *     - Serial bleibt blau (#3b82f6) — Klick-Hint visuell erhalten
 *     - Geräte-ID dunkel (#1f2937) regular
 *
 * Globale Tabellen-Regel: font-variant-numeric: tabular-nums slashed-zero
 * (alle Zahlen mit Schrägstrich-Null + gleichmäßige Spaltenausrichtung)
 *
 * Industriestandard-Referenz: Linear, Stripe, Notion, Vercel
 * SN/Geräte-ID auf User-Wunsch ins Type-System aufgenommen (B3b).
 * ═════════════════════════════════════════════════════════════════ */

/* (a-1) Spalten-Header sichtbar */
#auftraege th {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
}

/* (a-2) Globale Tabellen-Regel — slashed-zero + tabular-nums */
#auftraege td {
    font-variant-numeric: tabular-nums slashed-zero;
}

/* (a-3) RMA-Spalte: RMA-Nr 14px fett primär, ext-Nr 12px Mono Sub */
#auftraege td:nth-child(2) > div > div:first-child,
#auftraege td:nth-child(2) > span:first-child {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}
#auftraege td:nth-child(2) > div > div:nth-child(2) {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace !important;
}

/* (a-4) Kunde-Spalte: Name 14px primär, Adresse 12px Sub, KD-Nr Mono */
#auftraege td:nth-child(3) > div > div:first-child {
    font-size: 14px !important;
    color: #0f172a !important;
}
#auftraege td:nth-child(3) > div > div:nth-child(2) {
    font-size: 12px !important;
    color: #94a3b8 !important;
}
#auftraege td:nth-child(3) > div > div:nth-child(2) > span:not([style*="background"]) {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace !important;
}

/* (a-4b) Kunde voll anzeigen: Name + Ort/KD einzeilig, Spalte richtet sich am laengsten Eintrag aus (15.06.2026) */
#auftraege td:nth-child(3) { white-space: nowrap; }

/* (a-5) Gerät-Spalte: Hersteller + Modell 13px */
#auftraege td:nth-child(4) > div > div:first-child,
#auftraege td:nth-child(4) > div > div:nth-child(2) {
    font-size: 13px !important;
}

/* (b-1) DL-Spalte: medium dunkel statt regular grau (Variante C) */
#auftraege td:nth-child(6) {
    font-size: 13px !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
}

/* (b-2) Status-Text: medium dunkel statt regular (Variante C) */
#auftraege td:nth-child(7) > div:first-child {
    font-size: 13px !important;
}
#auftraege .status-badge-cell .status-text-new,
#auftraege td:nth-child(7) > div:first-child > span:last-child {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

/* (a-7) LR-Sub-Info: 12px Mono mit slashed-zero */
#auftraege td > div[style*="padding-left:14px"] {
    font-size: 12px !important;
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace !important;
    color: #94a3b8 !important;
}

/* (c) B3b — Seriennummer + Geräte-ID ins Type-System */
#auftraege td:nth-child(5) {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace !important;
    font-size: 14px !important;
    font-variant-numeric: tabular-nums slashed-zero !important;
}
#auftraege td:nth-child(5) > div > div:first-child,
#auftraege td:nth-child(5) > div:first-child {
    font-weight: 600 !important;
}
#auftraege td:nth-child(5) > div > div:nth-child(2) {
    color: #1f2937 !important;
    font-weight: 400 !important;
}


/* ═══ ALTER in Status-Zelle (ALTER-Spalte entfernt, Alter rechts neben Status) ═══ */
#auftraege .status-badge-cell { min-width: 130px; }
#auftraege td .age-badge { margin-left: 8px; font-size: 12px !important; vertical-align: middle; }