/* ============================================================
   Bestand : compassflow-document.css
   Locatie : wwwroot\css
   Doel    : Styling voor document intake, documentoverzicht en detailpreview
   Context :
     - Globale feature-CSS voor CompassFlow Documenten
     - Geen scoped CSS
     - DocumentNieuw.razor (V5 Mobile Flow) & DocumentDetail.razor
   ============================================================ */

/* ============================================================
   DOCUMENT INTAKE - BASIS
   ============================================================ */
.cf-document-intake {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0 12px;
    position: relative; /* Nodig voor sticky elementen */
}

.cf-document-intake__content {
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
}

.cf-document-intake .cf-section {
    width: 100%;
    margin-bottom: 8px;
    background: #fbfcfc;
    border: 1px solid #edf2f0;
    border-radius: 10px;
    padding: 12px 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

/* ============================================================
   CAPTURE MODE
   ============================================================ */
.cf-document-intake--capture {
    min-height: 100vh;
    background: transparent;
    padding-top: 12px;
    padding-bottom: 32px;
}

    .cf-document-intake--capture .cf-document-intake__header {
        margin-bottom: 14px;
        padding: 16px 18px;
        background: linear-gradient(135deg, #21433e, #2f5e52);
        border-radius: 12px 12px 4px 4px;
        box-shadow: 0 2px 10px rgba(33, 67, 62, 0.12);
    }

    .cf-document-intake--capture .cf-document-intake__title {
        color: #ffffff;
    }

    .cf-document-intake--capture .cf-document-intake__intro {
        color: rgba(255, 255, 255, 0.88);
    }

    .cf-document-intake--capture .cf-btn-primary {
        background: linear-gradient(90deg, #165c46, #1d6a52);
        border-color: #165c46;
        color: #ffffff;
    }

        .cf-document-intake--capture .cf-btn-primary:hover {
            background: linear-gradient(90deg, #124a39, #185742);
        }

/* ============================================================
   VOORTGANGSBALK (Progress Bar)
   ============================================================ */
.cf-progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 0 16px 0;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    border-bottom: 1px solid #e2efec;
}

    .cf-progress-bar span {
        white-space: nowrap;
    }

.cf-step-active {
    color: #166534;
    font-weight: 700;
}

.cf-step-inactive {
    color: #9ca3af;
    font-weight: 400;
}

/* ============================================================
   HEADER & SECTIES
   ============================================================ */
.cf-document-intake__header {
    display: flex;
    align-items: baseline; /* Zorgt dat de tekst mooi op dezelfde onderlijn staat */
    gap: 10px; /* Ruimte tussen de titel en de tekst */
    margin-bottom: 4px;
    white-space: nowrap; /* Dwingt alles op 1 horizontale regel */
}

.cf-document-intake__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--cf-dark);
}

.cf-document-intake__intro {
    margin: 0;
    color: var(--cf-text);
    font-size: 13px;
    line-height: 1.35;
}

.cf-document-intake .cf-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Duwt de badge netjes naar de rechterkant */
    margin: -12px -14px 12px -14px;
    padding: 10px 14px;
    background: linear-gradient(90deg, #edf6f2, #f8fbfa);
    border-bottom: 1px solid #e1ece8;
}

/* Deze zorgt ervoor dat het icoon en de tekst op 1 horizontale regel blijven */
.cf-section-head__title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cf-document-intake .cf-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 7px;
    background: #bfe3d1;
    color: #1f3f39;
    font-size: 14px;
    line-height: 1;
    border: 1px solid #a9d3bf;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.cf-document-intake .cf-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cf-dark);
    letter-spacing: 0.01em;
}

/* ============================================================
   1. BRON KIEZEN (Side-by-side Layout)
   ============================================================ */
.cf-document-intake__bronkeuze {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* Desktop: netjes links uitgelijnd */
    gap: 8px;
    margin-bottom: 12px;
}

    .cf-document-intake__bronkeuze .cf-btn,
    .cf-document-intake__bronkeuze label,
    .cf-document-intake__bronknop {
        flex: 0 1 auto; /* Desktop: niet oneindig uitrekken */
        min-width: 140px; /* Vaste, nette breedte voor desktop */
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 10px 16px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
    }
/* ============================================================
   PASTE ZONE (Geconsolideerd & Compacter)
   ============================================================ */
.cf-document-paste-zone {
    width: 100%;
    max-width: 640px;
    margin-top: 10px;
    padding: 16px 14px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background-color: #f8fafc;
    color: #6b7280;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s ease-in-out;
    outline: none;
    box-sizing: border-box;
}

    .cf-document-paste-zone[contenteditable="true"] {
        -webkit-user-select: text;
        user-select: text;
    }

    .cf-document-paste-zone:hover,
    .cf-document-paste-zone:focus,
    .cf-document-paste-zone:active {
        border-color: #166534;
        background-color: #f0fdf4;
        outline: 2px solid rgba(22, 101, 52, 0.18);
        outline-offset: 2px;
    }

    .cf-document-paste-zone strong {
        display: block;
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 500;
        color: var(--cf-dark);
    }

.cf-document-paste-zone__desktop,
.cf-document-paste-zone__mobile {
    font-size: 12px;
    color: #64748b;
}

.cf-document-paste-zone__mobile {
    display: none; /* Wordt via media query aangezet */
}

/* ============================================================
   2. NIEUWE COMPACTE PREVIEW & AI STATUS (V5 Flow)
   ============================================================ */
.cf-visuals {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cf-document-upload-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
}

.cf-btn-icon-danger {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container voor de actieknoppen (Zoom & Verwijderen) */
.cf-document-upload-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* De styling voor het vergrootglas */
.cf-btn-icon-action {
    background: none;
    border: none;
    color: #166534; /* CompassFlow groen */
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;
}

    .cf-btn-icon-action:hover,
    .cf-btn-icon-danger:hover {
        transform: scale(1.15); /* Subtiele vergroting als je eroverheen zweeft */
    }

.cf-ai-status-compact {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: row; /* Zorgt dat ze naast elkaar staan in plaats van onder elkaar */
    flex-wrap: wrap; /* Valt veilig naar een nieuwe regel als het scherm extreem smal is */
    align-items: center; /* Zet de tekst mooi op exact dezelfde hoogte */
    gap: 8px; /* Ruimte tussen de herlaad-knop en de oranje tekst */
    padding: 4px 0;
}

    .cf-ai-status-compact .ai-success {
        color: #166534;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cf-ai-status-compact .ai-error {
        color: #dc2626;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cf-ai-status-compact .ai-loading {
        color: #b45309;
    }

    .cf-ai-status-compact .ai-hint {
        color: #c2410c;
        font-size: 11.5px;
        font-weight: 600;
        margin-left: 0; /* CRUCIAAL: Oude marge verwijderd omdat hij nu erachter staat */
        letter-spacing: 0.02em;
    }

    .cf-ai-status-compact .ai-retry {
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        color: #475569;
        cursor: pointer;
        padding: 0; /* Gewijzigd van padding naar vaste afmetingen */
        font-size: 11px;
        transition: 0.1s;
        /* NIEUW: Zorgt voor perfecte vierkante knop en uitlijning */
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle; /* Forceert hem op dezelfde hoogte als de tekst */
    }

        .cf-ai-status-compact .ai-retry:hover {
            background: #e2e8f0;
            color: var(--cf-dark);
        }

/* ============================================================
   DOCUMENT INTAKE - FORMULIER & KOPPELING
   ============================================================ */
.cf-document-intake__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cf-document-intake__veld {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .cf-document-intake__veld label {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--cf-text);
    }

.cf-document-intake__input,
.cf-document-intake__textarea {
    width: 100%;
    max-width: 640px;
}

.cf-document-intake__input {
    min-height: 36px;
    font-size: 13px;
}

.cf-document-intake__textarea {
    min-height: 72px;
    font-size: 13px;
}

.cf-document-intake .cf-input-date,
.cf-document-intake .cf-input-num {
    height: 36px;
    padding: 6px 8px;
    font-size: 13px;
}

.cf-document-koppeling-row {
    margin: 0 0 2px 0;
    padding: 0;
}

.cf-document-koppeling-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12px;
    line-height: 1.1;
    color: var(--cf-text);
}

    .cf-document-koppeling-label input[type="radio"] {
        width: 13px;
        height: 13px;
        margin: 0;
        transform: scale(0.9);
    }

.cf-document-boeking-resultaten {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 640px;
    margin-top: 6px;
}

.cf-document-boeking-resultaat {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    border: 1px solid #e2efec;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

    .cf-document-boeking-resultaat:hover {
        background: #f8fafc;
    }

/* ============================================================
   MELDINGEN & OUDE ACTIES
   ============================================================ */
.cf-document-intake__melding {
    font-size: 0.85rem;
    color: var(--cf-dark);
    background: #f8fafc;
    border: 1px solid var(--cf-border);
    border-radius: 6px;
    padding: 7px 10px;
}

/* ============================================================
   DE STICKY BOTTOM BAR (V5 Flow - Strak tegen onderkant)
   ============================================================ */
.cf-sticky-bottom-bar {
    position: sticky;
    bottom: 0; /* Strak tegen de onderkant van het scherm */
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border: 1px solid #e2efec;
    border-radius: 16px; /* Alle 4 de hoeken rond, zoals je vroeg */
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
    margin-top: 16px;
    /* Schaduw is aangepast: deze valt nu mooi zacht naar BOVEN in plaats van naar onderen */
    box-shadow: 0 -4px 15px rgba(15, 23, 42, 0.05);
}

    .cf-sticky-bottom-bar .cf-btn {
        min-width: 110px;
    }

    .cf-sticky-bottom-bar .cf-btn-primary {
        min-width: 140px;
        font-weight: 700;
    }
    
    /* ============================================================
   DOCUMENT PREVIEW (Desktop / Algemeen)
   ============================================================ */
.cf-document-preview {
    margin-top: 8px;
    max-width: 640px;
    width: 100%;
}

.cf-document-preview__image {
    display: block;
    max-width: 100%;
    max-height: 300px;
    border: 1px solid #e2efec;
    border-radius: 6px;
    object-fit: contain;
    background: #f8fafc;
}

.cf-document-preview__pdf {
    max-width: 640px;
    min-height: 140px; /* NIEUW: Zorgt altijd voor genoeg hoogte voor de overlay */
    display: flex; /* NIEUW: Activeert flexbox voor centreren */
    align-items: center; /* NIEUW: Centreert de tekst verticaal */
    justify-content: center; /* NIEUW: Centreert de tekst horizontaal */
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2efec;
    border-radius: 6px;
    padding: 8px 10px;
}


/* ============================================================
   SCANNING OVERLAY (Tijdens AI Analyse)
   ============================================================ */
.cf-document-preview-container {
    position: relative;
    max-width: 640px;
    width: 100%;
    overflow: hidden; /* Zorgt dat de overlay netjes de afgeronde hoeken volgt */
    border-radius: 6px;
}

/* Maakt de foto/PDF wazig en onklikbaar tijdens de analyse */
.cf-is-scanning {
    filter: blur(3px) brightness(0.9);
    pointer-events: none;
}

/* De overlay die over de foto heen valt */
.cf-scanning-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.65);
    color: #166534; /* CompassFlow groen */
    font-size: 14px;
    font-weight: 700;
    z-index: 2;
    gap: 12px;
}

/* Voeg deze toe onder .cf-scanning-overlay */
.cf-btn-link {
    background: none;
    border: none;
    color: #64748b;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 4px; /* Kleine afstand van de tekst */
    padding: 4px;
    transition: color 0.2s ease;
    position: relative;
    z-index: 10; /* Zorg dat deze boven de spinner ligt */
}

    .cf-btn-link:hover {
        color: #166534; /* CompassFlow groen bij hover */
    }

/* Een CSS-only spinner */
.cf-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #bfe3d1; /* Lichte rand */
    border-top-color: #166534; /* Donkere actieve rand */
    border-radius: 50%;
    animation: cf-spin 0.85s linear infinite;
}

@keyframes cf-spin {
    to {
        transform: rotate(360deg);
    }
}


/* Klikbaar & Modal Zoom */
.cf-clickable {
    cursor: zoom-in;
    transition: transform 0.2s ease;
}

    .cf-clickable:hover {
        transform: scale(1.01);
        border-color: #165c46;
    }

.cf-document-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(33, 67, 62, 0.92);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
    cursor: zoom-out;
}

.cf-document-modal__content {
    position: relative;
    max-width: 95%;
    max-height: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .cf-document-modal__content img {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 4px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        background: white;
        cursor: default;
    }

.cf-document-modal__close {
    margin-top: 10px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.cf-document-modal__content--pdf {
    width: 90%;
    height: 90%;
}

    .cf-document-modal__content--pdf iframe {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 4px;
        background: white;
    }

/* ============================================================
   BADGES & OUDE ONDERDELEN VOOR DOCUMENT DETAIL
   ============================================================ */
.cf-document-status-badge {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.cf-document-status-badge--empty {
    background: #f1f5f9;
    color: #64748b;
}

.cf-document-status-badge--selected {
    background: #ecfdf5;
    color: #166534;
}

.cf-document-status-badge--success {
    background: #ecfdf5;
    color: #166534;
}

.cf-document-status-badge--warning {
    background: #fff7ed;
    color: #c2410c;
}

.cf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.cf-badge--nieuw {
    background: #eef2ff;
    color: #3730a3;
}

.cf-badge--teverwerken {
    background: #fff7ed;
    color: #c2410c;
}

.cf-badge--afgehandeld {
    background: #ecfdf5;
    color: #065f46;
}

/* ============================================================
   DOCUMENT DETAIL - LAYOUT (Behoud regressie)
   ============================================================ */
.cf-document-detail-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cf-document-detail-layout__main {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cf-document-detail-layout__sidebar .cf-section {
    margin-bottom: 12px;
}

.cf-sticky-preview {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cf-document-detail__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.cf-document-detail__veld {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .cf-document-detail__veld label {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--cf-text);
    }

.cf-document-detail__input {
    min-height: 36px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.cf-document-detail__textarea {
    min-height: 120px;
    font-size: 13px;
    width: 100%;
    resize: vertical;
    box-sizing: border-box;
}

.cf-document-detail-audit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2efec;
}

.cf-document-detail-audit__item {
    background: #f8fafc;
    border: 1px solid #e2efec;
    border-radius: 8px;
    padding: 10px 12px;
}

.cf-document-detail-audit__label {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}

.cf-document-detail-audit__waarde {
    font-size: 13px;
    font-weight: 600;
    color: var(--cf-dark);
}

.cf-document-detail-audit__subwaarde {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
}

.cf-document-detail-meta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e2efec;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cf-document-detail-meta__row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    font-size: 12px;
    line-height: 1.35;
}

    .cf-document-detail-meta__row span {
        color: #64748b;
    }

    .cf-document-detail-meta__row strong {
        font-weight: 600;
        color: var(--cf-dark);
        word-break: break-word;
    }

/* ============================================================
   TOAST NOTIFICATION (Succesmelding)
   ============================================================ */
.cf-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #166534; /* CompassFlow groen */
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 999px; /* Mooi pil-vormig */
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(22, 101, 52, 0.25);
    z-index: 10000; /* Altijd helemaal bovenop */
    animation: cf-toast-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes cf-toast-in {
    from {
        top: -50px;
        opacity: 0;
    }

    to {
        top: 20px;
        opacity: 1;
    }
}

@media (min-width: 1024px) {
    .cf-document-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        align-items: start;
        gap: 24px;
    }

    .cf-document-detail-layout__sidebar {
        position: sticky;
        top: 24px;
        z-index: 10;
    }

    .cf-sticky-preview {
        max-height: calc(100vh - 48px);
        overflow-y: auto;
    }

    .cf-document-detail__veld {
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        align-items: center;
        gap: 16px;
    }

        .cf-document-detail__veld label {
            margin: 0;
            text-align: left;
        }

        .cf-document-detail__veld:has(textarea) {
            align-items: start;
        }
}

/* ============================================================
   MOBIEL (RESPONSIVE)
   ============================================================ */
@media (max-width: 380px) {
    .cf-progress-bar {
        font-size: 11.5px;
        gap: 3px;
    }
}

@media (max-width: 768px) {
    .cf-document-intake {
        align-items: stretch;
        gap: 0.75rem;
        width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }

        /* NIEUWE CODE: Voorkom dat de sticky bar over het toetsenbord blijft zweven, maar ALLEEN bij echte invoervelden */
        .cf-document-intake:has(input[type="text"]:focus, input[type="number"]:focus, input[type="datetime-local"]:focus, textarea:focus) .cf-sticky-bottom-bar {
            position: relative;
            bottom: auto; /* Zet het zweven uit tijdens typen */
            box-shadow: none; /* Verwijder de zware schaduw voor rust tijdens typen */
            margin-top: 8px;
            margin-bottom: 8px;
        }

    .cf-document-intake__content {
        max-width: none;
        box-sizing: border-box;
    }

    .cf-document-intake--capture {
        width: 100%;
        max-width: none;
        padding-left: 2px;
        padding-right: 2px;
    }

    .cf-document-intake__title {
        font-size: 16px; /* Ietsje kleiner gemaakt zodat beide teksten passen */
        line-height: 1.15;
    }

    .cf-document-intake__intro {
        margin-top: 0; /* Oude top-margin weggehaald */
        font-size: 12px; /* Ietsje kleiner voor smalle telefoons */
        overflow: hidden;
        text-overflow: ellipsis; /* Plakt er '...' achter als het scherm écht te smal is */
    }


    .cf-document-intake__header {
        margin-top: 4px;
        padding-top: 0;
    }

    /* Minder witruimte tussen de blokken én smallere binnenranden */
    .cf-document-intake .cf-section {
        padding: 8px 10px;
        margin-bottom: 8px;
    }


    /* Koptitels (Basisgegevens/Koppeling) platter maken en marges laten aansluiten op het blok */
    .cf-document-intake .cf-section-head {
        margin: -8px -10px 8px -10px;
        padding: 8px 10px;
    }

    /* Voortgangsbalk compacter maken op mobiel */
    .cf-progress-bar {
        padding: 4px 0 8px 0;
        margin-bottom: 8px;
    }

    /* 1. Bronkeuze knoppen: iets platter maken en marge eronder verkleinen */
    .cf-document-intake__bronkeuze {
        margin-bottom: 8px; /* Was 12px */
    }

        .cf-document-intake__bronkeuze .cf-btn,
        .cf-document-intake__bronkeuze label,
        .cf-document-intake__bronknop {
            padding: 7px 4px; /* Boven/onderkant iets strakker (was 10px) */
        }

    /* 2. Ruimte tussen de Foto, de bestandsnaam en het AI-balkje strakker trekken */
    .cf-visuals {
        gap: 6px; /* Was 12px op desktop */
    }

    /* 3. Afbeelding preview minder hoog maken (we hebben immers nu een zoom-knop!) */
    .cf-document-preview__image {
        max-height: 180px; /* Was 240px. Scheelt enorm veel ruimte bij staande bonnen! */
    }

    /* 4. Formulier velden net een tikkeltje dichter op elkaar */
    .cf-document-intake__form {
        gap: 4px; /* Was 6px */
    }




    /* Stippellijn-plakzone minder hoog maken */
    .cf-document-paste-zone {
        margin-top: 6px;
        padding: 10px 10px;
    }

    .cf-document-intake__veld {
        gap: 2px;
    }

    .cf-document-intake__form {
        gap: 6px;
    }

    .cf-document-intake__input,
    .cf-document-intake__textarea,
    .cf-document-preview,
    .cf-document-preview__pdf,
    .cf-document-boeking-resultaten {
        max-width: 100%;
    }

    .cf-document-intake__input,
    .cf-document-intake .cf-input-date,
    .cf-document-intake .cf-input-num {
        min-height: 32px !important;
        height: 32px !important;
    }

    /* Bronkeuze: op mobiel eerlijk de 100% breedte verdelen (33% per knop) */
    .cf-document-intake__bronkeuze .cf-btn,
    .cf-document-intake__bronkeuze label,
    .cf-document-intake__bronknop {
        flex: 1;
        min-width: 0; /* Voorkomt overflow op extreem kleine schermen */
        padding: 10px 4px;
    }



    .cf-document-intake__textarea {
        min-height: 64px !important;
    }

    .cf-document-koppeling-label {
        font-size: 11px !important;
        line-height: 1.05 !important;
    }

        .cf-document-koppeling-label input[type="radio"] {
            width: 12px;
            height: 12px;
            transform: scale(0.82);
        }

    /* Beperkt de afbeeldingshoogte op mobiel om scrollen te beperken */
    .cf-document-preview__image {
        max-height: 240px;
    }

    /* Switch paste-zone instructies */
    .cf-document-paste-zone__desktop {
        display: none;
    }

    .cf-document-paste-zone__mobile {
        display: block;
    }

    .cf-document-detail-audit {
        grid-template-columns: 1fr;
    }
}