/* ============================================================
   Bestand : CompassFlow-overzichten.css
   Locatie : wwwroot/css
   Doel    : Gedeelde SaaS-stijl voor Boekingen, Geplande Posten en Verwerkt.

   NOTITIE:
   - !important wordt hier bewust gebruikt om 'ghost-CSS' van oude
     scoped-bestanden te overschrijven.
   - Dit garandeert een consistente look voor alle overzichten.
   - Pas opschonen/verwijderen zodra de architectuur volledig stabiel is
     en caches zijn geschoond.
   ============================================================ */

/* --- 1. HET FILTER PANEEL --- */
.cf-filter-panel {
    background-color: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px;
}

/* --- 2. DE TOOLBAR --- */
.cf-filter-toolbar {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.cf-filter-toolbar-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

/* --- 3. INPUTS & LAYOUT --- */
.cf-filter-inputs-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 16px !important;
}

.cf-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
}

.cf-label-inline {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.cf-input {
    height: 32px !important;
    border: 1px solid #d1dbd9 !important;
    border-radius: 6px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
}

/* Specifieke veldbreedtes */
.cf-filter-group--search {
    flex: 0 0 240px !important;
}

.cf-filter-group--bron {
    flex: 0 0 100px !important;
}

.cf-filter-group--dropdown {
    flex: 0 0 160px !important;
}

/* Datum velden styling */
.cf-input-date {
    width: 135px !important;
}

.cf-date-range {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.cf-date-sep {
    font-size: 11px !important;
    color: #94a3b8 !important;
    line-height: 32px !important;
}

/* --- 4. STATUS CHECKBOXES (Onderste rij Boekingen) --- */
.cf-filter-status-row {
    display: flex !important;
    gap: 16px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.cf-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #334155 !important;
    cursor: pointer !important;
}

/* --- 5. TABELLEN --- */
.cf-table-wrap {
    background: white !important;
    border: 1px solid #eef2f1 !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
}

.cf-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

    .cf-table thead th {
        background-color: #f8fafc !important;
        border-bottom: 2px solid #e2e8f0 !important;
        padding: 0 !important;
        height: 40px !important;
    }

        .cf-table thead th.cf-num {
            text-align: right !important;
        }

        .cf-table thead th:not(.cf-num) {
            text-align: left !important;
        }

.cf-sort-btn {
    justify-content: flex-start !important;
}
/* Sorteerknoppen */
.cf-sort-btn,
.cf-sort-btn-num {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.cf-sort-btn-num {
    justify-content: flex-end !important;
}

.cf-sort-btn:hover {
    background-color: #f1f5f9 !important;
}

.cf-table tbody tr {
    height: 38px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.cf-table td {
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #334155 !important;
}

.cf-row-clickable {
    cursor: pointer !important;
}

    .cf-row-clickable:hover {
        background-color: #f8fafc !important;
        box-shadow: inset 4px 0 0 #21433E !important;
    }

/* Getallen */
.cf-num {
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 600 !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

.cf-neg {
    color: #dc2626 !important;
}

/* --- 6. STATUS BADGES --- */
.cf-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.cf-badge-status-prospect {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
}

.cf-badge-status-geboekt {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

.cf-badge-status-reis-bezig {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.cf-badge-status-reis-afgerond,
.cf-badge-status-done {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.cf-badge-status-geannuleerd {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

/* --- 7. FOOTER & PAGINERING --- */
.cf-result-bar {
    display: flex !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
}

.cf-section-actions {
    display: flex !important;
    gap: 16px !important;
    margin-top: 16px !important;
    justify-content: center !important;
}

/* ============================================================
   BOEKINGEN OVERZICHT - CARD WEERGAVE
   Context:
   - Desktop gebruikt de bestaande tabel
   - Mobiel gebruikt cards per boeking
   - Sluit exact aan op de huidige Razor-markup
   ============================================================ */

.cf-booking-cards {
    display: none;
}

.cf-booking-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

    .cf-booking-card:hover {
        background-color: #f8fafc !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    }

.cf-mobile-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.cf-mobile-bookingnummer {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    line-height: 1.2 !important;
}

.cf-mobile-status {
    flex-shrink: 0 !important;
}

.cf-mobile-naam {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    word-break: break-word !important;
}

.cf-mobile-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.cf-mobile-row {
    display: grid !important;
    grid-template-columns: 88px 1fr !important;
    gap: 10px !important;
    align-items: start !important;
}

.cf-mobile-label {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.cf-mobile-value {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    color: #334155 !important;
    word-break: break-word !important;
}


/* ============================================================
   DOCUMENTEN OVERZICHT
   Doel:
   - Rustige documenttabel
   - Bedrag rechts uitlijnen
   - Geen geforceerde kolommen
   ============================================================ */

/* ============================================================
   DOCUMENTEN OVERZICHT - DEFINITIEF
   ============================================================ */

.cf-document-table {
    width: 100% !important;
    table-layout: auto !important;
}

    .cf-document-table th,
    .cf-document-table td {
        padding: 10px 14px !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    .cf-document-table th {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
    }

    /* ============================================================
   KOLOMBREEDTES
   ============================================================ */

    .cf-document-table .cf-col-datum {
        width: 170px !important;
    }

    .cf-document-table .cf-col-bedrag {
        width: 130px !important;
    }

    .cf-document-table .cf-document-categorie {
        width: 220px !important;
    }

    .cf-document-table .cf-col-bron {
        width: 220px !important;
    }

    .cf-document-table .cf-col-koppeling {
        width: 190px !important;
    }

    .cf-document-table .cf-col-status {
        width: 150px !important;
    }

    /* ============================================================
   ALIGNMENT
   ============================================================ */

    .cf-document-table th.cf-col-bedrag,
    .cf-document-table td.cf-col-bedrag {
        text-align: right !important;
    }


    /* ============================================================
   VISUELE FINETUNING
   ============================================================ */


    /* Categorie iets los trekken van bedrag */
    .cf-document-table .cf-document-categorie {
        padding-left: 20px !important;
    }

    .cf-document-table td.cf-col-bedrag {
        text-align: right !important;
        padding-right: 14px !important;
    }

    .cf-document-table th.cf-col-bedrag {
        text-align: right !important;
        padding-right: 14px !important;
    }

/* Mobiele sortering wordt alleen bij card-weergave getoond */
.cf-mobile-sort {
    display: none !important;
}

/* ============================================================
   MOBIEL - BOEKINGEN OVERZICHT
   Doel:
   - Filterzone verticaal en bruikbaar maken
   - Actieknoppen mobiel laten wrappen
   - Statuscheckboxes netjes laten doorlopen
   - Desktop-tabel vervangen door cards
   ============================================================ */
@media (max-width: 768px) {
    /* FILTER PANEEL */
    .cf-filter-panel {
        padding: 12px !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    /* TOOLBAR */
    .cf-filter-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding-bottom: 10px !important;
    }

    .cf-filter-toolbar-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

        .cf-filter-toolbar-actions .cf-btn {
            width: 100% !important;
            justify-content: center !important;
        }

    /* INPUTS ONDER ELKAAR */
    .cf-filter-inputs-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .cf-filter-group,
    .cf-filter-group--search,
    .cf-filter-group--bron,
    .cf-filter-group--dropdown {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    .cf-search-wrapper {
        width: 100% !important;
    }

    .cf-filter-group .cf-input,
    .cf-filter-group .cf-input-date,
    .cf-filter-group select.cf-input {
        width: 100% !important;
        max-width: none !important;
    }

    /* DATUMRANGES ONDER ELKAAR */
    .cf-date-range {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    .cf-date-sep {
        line-height: 1 !important;
        font-size: 11px !important;
        color: #94a3b8 !important;
    }

    /* STATUSSEN */
    .cf-filter-status-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px 14px !important;
        padding-top: 10px !important;
    }

    .cf-checkbox-label {
        font-size: 12px !important;
    }

    /* RESULTAATBALK */
    .cf-result-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px 0 12px 0 !important;
    }

    .cf-result-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* Mobiele sortering voor boeking-cards */
    .cf-mobile-sort {
        display: block !important;
        margin: 8px 0 12px 0 !important;
    }

    .cf-mobile-sort-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .cf-mobile-sort-direction {
        white-space: nowrap !important;
    }





    /* DESKTOP TABEL UIT */
    .cf-booking-results-scroll {
        display: none !important;
    }

    .cf-table-wrap-bookingen {
        display: none !important;
    }

    .cf-mobile-row {
        grid-template-columns: 88px 1fr !important;
        gap: 10px !important;
    }

    /* MOBILE CARDS AAN */
    .cf-booking-cards {
        display: block !important;
        margin-top: 8px !important;
    }

    .cf-booking-card {
        display: block !important;
    }



    /* PAGINERING */
    .cf-section-actions {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 14px !important;
        flex-wrap: wrap !important;
    }

    /* 
        ============================================================
        OVERZICHTEN - GENERIEKE VERFIJNING o.a. tvv DocumentOverzict
        ============================================================ */

    .cf-overview .cf-table th,
    .cf-overview .cf-table td {
        padding: 10px 14px !important;
    }

    .cf-overview .cf-table th {
        white-space: nowrap !important;
    }

    .cf-overview .cf-table td {
        vertical-align: middle !important;
    }





}