/* =========================================================
   WerkstattPilot – gemeinsames Dark-Mode-Styling
   Wird über das header-Fragment auf allen Seiten geladen.
   Seiten-spezifische Styles (Kalender, Login) bleiben in
   den jeweiligen Templates und überschreiben dieses File.
   ========================================================= */

body {
    background-color: #121212;
    color: #eaeaea;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- TABELLEN --- */
.table-custom {
    --bs-table-bg: #1e1e1e;
    --bs-table-color: #eaeaea;
    --bs-table-striped-bg: #282828;
    --bs-table-hover-bg: #333333;
    border: 1px solid #3a3a3a;
}
.table-custom th {
    border-bottom-color: #3a3a3a;
    color: #ddd;
}
th i {
    color: #0d6efd;
}

/* --- FORMULARE & SUCHFELD --- */
.form-control {
    background-color: #2c2c2c;
    border: 1px solid #444444;
    color: #eaeaea;
    --bs-focus-ring-color: rgba(13, 110, 253, .25);
}
.form-control::placeholder {
    color: #888;
}
.search-container {
    position: relative;
}
#employeeSearch {
    padding-left: 35px;
}

/* --- HILFSTEXT & BADGES --- */
.text-muted {
    color: #888 !important;
}
.badge.bg-success {
    background-color: #28a745 !important;
    color: #fff;
}
.badge.bg-danger {
    background-color: #dc3545 !important;
    color: #fff;
}

/* Klickbare Filter-Badges (Kopfbereich) */
.badge-filter {
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.badge-filter:hover {
    transform: translateY(-1px);
}
.badge-filter.badge-filter-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255, 255, 255, .25);
}

/* --- MODAL --- */
.modal-header-custom-color {
    background-color: #005f4e !important;
    color: #eaeaea;
    border-bottom: 1px solid #004d3e;
}
.modal-header-custom-color .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}
.modal-content {
    background-color: #1e1e1e;
    color: #eaeaea;
    border: 1px solid #3a3a3a;
}
.modal-body .form-control {
    background-color: #2c2c2c;
    border: 1px solid #444444;
    color: #eaeaea;
}
.modal-body .form-control:focus {
    background-color: #2c2c2c;
    border-color: #005f4e;
    box-shadow: 0 0 0 0.25rem rgba(0, 95, 78, 0.4);
}
.modal-footer {
    border-top: 1px solid #3a3a3a;
    background-color: #1e1e1e;
}

/* --- FORM-SWITCH / CHECKBOXEN --- */
.form-check-input:checked {
    background-color: #005f4e;
    border-color: #005f4e;
}

/* --- FORM-SELECT (Dark Mode) --- */
.form-select {
    background-color: #2c2c2c;
    color: #eaeaea;
    border: 1px solid #444444;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option {
    background-color: #2c2c2c;
    color: #eaeaea;
}
.form-select:focus {
    border-color: #005f4e;
    box-shadow: 0 0 0 0.25rem rgba(0, 95, 78, 0.4);
}

/* --- PERSONAL-AUSWAHL (Checkbox-Liste) --- */
.personal-checkbox-list {
    max-height: 140px;
    overflow-y: auto;
    background-color: #2c2c2c;
    border: 1px solid #444444 !important;
}
.personal-checkbox-list .form-check {
    padding: .35rem .5rem .35rem 2rem;
    border-radius: .25rem;
    margin-bottom: 0;
}
.personal-checkbox-list .form-check:hover {
    background-color: #383838;
}
.personal-checkbox-list .form-check-input {
    background-color: #1e1e1e;
    border-color: #555;
    cursor: pointer;
}
.personal-checkbox-list .form-check-input:checked {
    background-color: #005f4e;
    border-color: #005f4e;
}
.personal-checkbox-list .form-check-label {
    color: #eaeaea;
    cursor: pointer;
    width: 100%;
}

/* --- BESCHREIBUNGS-PANEL (rechte Modal-Spalte) --- */
.description-panel {
    background-color: #242424;
    border: 1px solid #3a3a3a;
    border-radius: .6rem;
    padding: .85rem 1rem;
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}
.description-panel__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: #eaeaea;
    margin-bottom: .75rem;
}
.description-panel__header i {
    color: #2bb89a;
}
.modal-body .description-panel textarea.form-control {
    flex-grow: 1;
    background-color: #1b1b1b;
    border: 1px solid #333;
    border-radius: .4rem;
    resize: none;
    color: #eaeaea;
}
.modal-body .description-panel textarea.form-control:focus {
    border-color: #005f4e;
    box-shadow: 0 0 0 0.2rem rgba(0, 95, 78, 0.35);
}

/* --- SUCHFELD-ICON --- */
.search-container .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
}

/* --- STICKY TABLE-HEADER --- */
/* Eigener Scroll-Bereich, damit sticky zuverlässig funktioniert
   (in .table-responsive würde overflow-x das sticky aushebeln). */
.table-sticky {
    max-height: calc(100vh - 250px);
    overflow: auto;
}
.table-custom thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #232323;
}

/* --- TABELLEN-HILFSKLASSEN (statt Inline-Styles) --- */
.created-meta {
    font-size: .72rem;
}
.col-arista {
    min-width: 150px;
    white-space: nowrap;
}
.col-deadline {
    min-width: 170px;
    white-space: nowrap;
}
.col-tools {
    min-width: 140px;
    white-space: nowrap;
}

/* Überfällige Deadline hervorheben */
.deadline-overdue {
    color: #ff6b6b !important;
    font-weight: 600;
}

/* Deaktivierte Filter-Badge (Zähler = 0) */
.badge-filter:disabled {
    cursor: default;
    opacity: .5;
}
.badge-filter:disabled:hover {
    transform: none;
}

/* =========================================================
   MOBILE-ANSICHT (< 768px) – nur Auftragsverwaltung
   Die Tabelle (.table-cards-mobile) wird zu gestapelten Karten.
   Greift ausschließlich unter dem md-Breakpoint, daher bleibt
   die Desktop-Ansicht unverändert. Andere Tabellen (Archiv,
   Mitarbeiter) sind nicht betroffen, da sie diese Klasse nicht haben.
   ========================================================= */
@media (max-width: 767.98px) {

    /* Höhenbegrenzung/Sticky aufheben – auf dem Handy natürlich scrollen */
    .table-sticky {
        max-height: none;
        overflow: visible;
    }

    /* Tabelle in Karten umwandeln */
    .table-cards-mobile {
        border: 0;
    }
    .table-cards-mobile thead {
        display: none; /* Spaltenköpfe ausblenden – Labels kommen per ::before */
    }
    .table-cards-mobile,
    .table-cards-mobile tbody,
    .table-cards-mobile tr,
    .table-cards-mobile td {
        display: block;
        width: 100%;
    }

    /* Jede Zeile = eine Karte */
    .table-cards-mobile tbody tr {
        background-color: #1e1e1e;
        border: 1px solid #3a3a3a;
        border-radius: .6rem;
        margin-bottom: 1rem;
        padding: .25rem .25rem;
        overflow: hidden;
    }
    /* Striping in der Kartenansicht deaktivieren (einheitlicher Look) */
    .table-cards-mobile.table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-accent-bg: transparent;
        background-color: transparent;
    }

    /* Jede Zelle: Label oben, Wert darunter */
    .table-cards-mobile td {
        text-align: left;
        padding: .5rem .85rem;
        border: 0;
        border-bottom: 1px solid #2b2b2b;
        white-space: normal;
    }
    .table-cards-mobile tbody tr td:last-child {
        border-bottom: 0;
    }
    .table-cards-mobile td::before {
        content: attr(data-label);
        display: block;
        font-size: .68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #9aa0a6;
        margin-bottom: .2rem;
    }

    /* Tools-Zelle: Buttons etwas größer für Touch-Bedienung */
    .table-cards-mobile td.col-tools-cell .btn {
        padding: .4rem .7rem;
        font-size: 1rem;
    }
    .table-cards-mobile td.col-tools-cell .btn,
    .table-cards-mobile td.col-tools-cell form {
        margin-bottom: .15rem;
    }

    /* Beschreibungs-Panel im Modal nicht unnötig hoch auf kleinen Schirmen */
    .description-panel {
        min-height: 180px;
    }
}