/* assets/css/style.css */

/* ---------------------------------------------------- */
/* 1. GLOBALE REGELN (Für Desktop UND Mobile relevant) */
/* ---------------------------------------------------- */

/* Definiert die Farben und den Rand für alle Status-Zeilen */
.order-row.table-light, 
.order-row.table-warning, 
.order-row.table-danger, 
.order-row.table-success {
    /* Setzt die Hintergrundfarbe der TR selbst (wichtig für Desktop) */
    background-color: var(--bs-table-bg); 
    
    /* Fügt einen klaren, farbigen linken Rand hinzu */
    border-left: 5px solid;
}

/* WICHTIG: Stellt sicher, dass die TD-Zellen die Hintergrundfarbe der TR erben */
.order-row td {
    background-color: inherit !important;
}

/* Definiert die Farben für den linken Rand im Desktop-Modus */
.order-row.table-light { border-left-color: #cccccc; }
.order-row.table-warning { border-left-color: #ffc107; }
.order-row.table-danger { border-left-color: #dc3545; }
.order-row.table-success { border-left-color: #198754; }


/* ---------------------------------------------------- */
/* 2. MOBILE REGELN (NUR für kleine Bildschirme) */
/* ---------------------------------------------------- */
/*
.table-info	Neu
.table-warning 🟡 In Bearbeitung
.table-danger 🔴 Überfällig oder Problem aufgetreten
.table-success🟢 Abgeschlossen oder Versandt

.table-primary	Primäre Aktion	#0d6efd (Dunkelblau)	Wichtig, Hauptaktion
.table-secondary	Sekundäre Information	#6c757d (Grau)	Unwichtig, Zusatzinfo
.table-success	Erfolg, Positiv	#198754 (Grün)	Abgeschlossen, OK
.table-danger	Gefahr, Fehler	#dc3545 (Rot)	Abbruch, Fehler, Kritisch
.table-warning	Warnung, Achtung	#ffc107 (Gelb/Orange)	In Bearbeitung, Warten
.table-info	Information	#0dcaf0 (Hellblau/Türkis)	Neutrale Info, Notiz
.table-light	Hell, Neutral	#f8f9fa (Sehr helles Grau)	Standard, wenig Kontrast
.table-dark	Dunkel	#212529 (Schwarz/Dunkelgrau)
*/
@media screen and (max-width: 768px) {
    
    /* 1. Generelle Struktur und Trennung (Card-Ansicht) */
    .table tbody tr {
        display: block; 
        margin-bottom: 1rem; 
        border: 1px solid #dee2e6; 
        border-radius: 0.25rem; 
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 
        padding: 0; 
        background-color: transparent; 
    }
    
    /* WICHTIG: Setzt die farbige Border UND Hintergrund für die Mobile Cards */
    .table tbody .order-row.table-light, 
    .table tbody .order-row.table-warning, 
    .table tbody .order-row.table-danger, 
    .table tbody .order-row.table-success {
        background-color: var(--bs-table-bg) !important; 
        border: 2px solid; 
    }

    /* NEU: Stellt sicher, dass die TD-Zellen die TR-Farbe erben */
    .table tbody td {
        display: block; 
        text-align: left !important;
        position: relative;
        border: none;
        background-color: inherit !important; 
        padding: 0; 
        width: auto !important; 
    }

    /* Definiert die Randfarben für die mobilen Cards (Bleibt gleich) */
    .table tbody .order-row.table-light { border-color: #cccccc !important; }
    .table tbody .order-row.table-warning { border-color: #ffc107 !important; }
    .table tbody .order-row.table-danger { border-color: #dc3545 !important; }
    .table tbody .order-row.table-success { border-color: #198754 !important; }

    /* Die hover-Farbe entfernen */
    .table-hover > tbody > tr:hover > * {
        background-color: transparent !important;
    }

    /* Header verstecken */
    .table thead {
        display: none;
    }

    /* Labels vor die Daten setzen */
    .table tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        text-align: left;
        font-weight: bold;
        color: #6c757d;
    }
    
    /* BLENDE LABELS FÜR KOMPAKTE ANSICHT AUS */
    .table tbody td[data-label="Auftragsnummer"]:before,
    .table tbody td[data-label="Beschriftung"]:before,
    .table tbody td[data-label="IST / SOLL"]:before,
    .table tbody td[data-label="Aktionen"]:before,
    .table tbody td[data-label="Erstellt am"]:before {
        display: none;
    }
    
    /* BLENDE ZELLE "Erstellt am" KOMPLETT AUS */
    .table tbody td[data-label="Erstellt am"] {
        display: none !important;
    }

    /* ---------------------------------------------------- */
    /* FLEX LAYOUT FÜR OBERE REIHE (Auftragsnummer/Aktionen) */
    /* ---------------------------------------------------- */

    /* Die TR selbst wird zum Flex-Container für das Custom Layout */
    .table tbody .order-row {
        display: flex;
        flex-wrap: wrap; 
        align-items: flex-start;
        padding: 0.5rem; /* Padding für die gesamte Card */
    }

    /* Auftragsnummer (Zelle 1) - 70% Breite, links oben */
    .table tbody td:nth-child(1) {
        width: 70% !important;
        order: 1; /* Kommt zuerst in der Flex-Reihe (links) */
        
        /* display: block sorgt dafür, dass die Bezeichnung drunter rutscht */
        display: block !important; 
        
        font-size: 1.8rem !important; 
        font-weight: bold !important;
        padding-top: 0.5rem !important; 
        padding-bottom: 0 !important;
        padding-left: 0; /* Links bündig zur Card-Kante */
        padding-right: 0;
    }
    
    /* Aktionen (Rechte Spalte) - 30% Breite, rechts oben */
    .table tbody td[data-label="Aktionen"] {
        width: 30% !important;
        order: 2; /* Kommt an zweiter Stelle in der Flex-Reihe (rechts) */
        display: flex !important;
        justify-content: flex-end; /* Symbole rechtsbündig ausrichten */
        align-items: flex-start; 
        padding-top: 0.5rem !important; 
        padding-right: 0; 
        padding-left: 0.5rem; /* Abstand zwischen Auftragsnummer und Symbolen */
    }

    /* Bezeichnung (Zelle 2) - Muss in die nächste Zeile rutschen (100% Breite) */
    .table tbody td:nth-child(2) {
        width: 100% !important; /* Nimmt die volle Breite ein */
        order: 3; /* Rutscht unter die erste Zeile */
        
        /* Muss display: block sein, um 100% Breite zu erzwingen */
        display: block !important; 
        
        font-size: 1rem !important;
        color: #6c757d !important;
        padding-top: 0 !important;
        padding-bottom: 0.5rem !important; 
        padding-left: 0; /* Links bündig zur Card-Kante */
        padding-right: 0;
    }

    /* Soll / Ist (Muss volle Breite unter der Bezeichnung einnehmen) */
	.table tbody td[data-label="IST / SOLL"] {
		width: 100% !important; 
		order: 4; 
		
		/* NEU: Größere Schrift und mittige Ausrichtung */
		font-size: 1.5rem !important; 
		text-align: center !important; 
		font-weight: bold; /* Optional: Um den Wert hervorzuheben */
		
		padding-top: 0.5rem !important; /* Etwas Puffer nach oben */
		padding-bottom: 0.5rem !important;
		padding-left: 0 !important; 
	}

    /* Aufräumen des alten td:last-child Selektors (falls vorhanden) */
    .table tbody .order-row td:last-child {
        padding-top: 0.5rem !important;
    }
}