/* ============================================================
   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 gebruikt deze styling voor intake
   Auteur  : Raymond Falck
   Datum   : 2026-05
   ============================================================ */


/* ============================================================
   DOCUMENT INTAKE - BASIS
   ============================================================ */

.cf-document-intake {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0 12px;
}

.cf-document-intake__content {
    width: 100%;
    max-width: 760px;
}

.cf-document-intake .cf-section {
    width: 100%;
    margin-bottom: 8px;
    background: #fbfcfc;
    border: 1px solid #edf2f0;
    border-radius: 8px;
    padding: 12px 14px;
}

.cf-document-intake .cf-section-head {
    margin: 0 0 10px 0;
    padding: 0;
    background: transparent;
    border: 0;
}

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

.cf-document-intake__header {
    margin-bottom: 4px;
}

.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__statusregel {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #475569;
}

    .cf-document-intake__statusregel strong {
        color: var(--cf-dark);
    }


/* ============================================================
   DOCUMENT INTAKE - BRONKEUZE
   ============================================================ */

.cf-document-intake__bronkeuze {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cf-document-intake__bronknop {
    min-width: 170px;
    justify-content: center;
    padding: 6px 10px;
    font-size: 13px;
}


/* ============================================================
   DOCUMENT INTAKE - INLINE ANALYSE
   ============================================================ */

.cf-document-analyse-inline {
    margin-top: 10px;
    padding: 8px 10px;
    border-top: 1px solid #e3ebe7;
    border-radius: 6px;
    background: #f8fafc;
}

.cf-document-analyse-inline__button {
    margin-top: 6px;
}

.cf-document-analyse-inline__melding {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #53635f;
    line-height: 1.3;
}


/* ============================================================
   DOCUMENT INTAKE - FORMULIER
   ============================================================ */

.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;
}


/* ============================================================
   DOCUMENT INTAKE - KOPPELING
   ============================================================ */

.cf-document-intake__koppeling-wrapper {
    max-width: 420px;
}

.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);
        transform-origin: center;
    }



.cf-document-koppeling-status {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #475569;
}

    .cf-document-koppeling-status strong {
        color: var(--cf-dark);
    }


/* ============================================================
   DOCUMENT INTAKE - MELDINGEN EN 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;
}

.cf-document-intake__acties {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 640px;
    padding-top: 8px;
    margin-top: 4px;
}

    .cf-document-intake__acties .cf-btn-primary {
        min-width: 140px;
        font-weight: 700;
    }

    .cf-document-intake__acties .cf-btn-outline {
        min-width: 110px;
    }


/* ============================================================
   DOCUMENT INTAKE - FOTO / BESTAND KIEZEN
   ============================================================ */

.cf-document-upload {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.cf-document-upload-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .cf-document-upload-actions .cf-btn {
        min-width: 160px;
        justify-content: center;
        cursor: pointer;
    }

.cf-document-upload-info {
    font-size: 12px;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 6px 8px;
}

.cf-document-upload-empty {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}


/* ============================================================
   DOCUMENT INTAKE - PREVIEW
   ============================================================ */

.cf-document-preview {
    margin-top: 8px;
    max-width: 640px;
}

.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;
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2efec;
    border-radius: 6px;
    padding: 8px 10px;
}


/* ============================================================
   DOCUMENT INTAKE - BOEKING KOPPELEN
   ============================================================ */

.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;
    }


/* ============================================================
   DOCUMENT - BADGES
   ============================================================ */

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

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

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

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

.cf-badge--koppeling {
    background: #f1f5f9;
    color: #334155;
}


/* ============================================================
   DOCUMENT OVERZICHT - KOLOMMEN
   ============================================================ */

.cf-document-results .cf-table {
    table-layout: fixed;
    width: 100%;
}

.cf-document-col-datum {
    width: 180px;
}

.cf-document-col-bedrag {
    width: 110px;
}

.cf-document-col-categorie {
    width: 160px;
}

.cf-document-col-bron {
    width: 120px;
}

.cf-document-col-koppeling {
    width: 180px;
}

.cf-document-col-status {
    width: 120px;
}

.cf-document-results th,
.cf-document-results td {
    padding-left: 12px;
    padding-right: 12px;
}

    .cf-document-results th.cf-num,
    .cf-document-results td.cf-num {
        text-align: right;
    }


/* ============================================================
   DOCUMENT DETAIL - PREVIEW
   ============================================================ */

.cf-document-detail-preview {
    margin-top: 20px;
}

.cf-document-preview__pdf-frame {
    width: 100%;
    height: 500px;
    border: 1px solid #e2efec;
    border-radius: 6px;
}

.cf-document-preview__text {
    white-space: pre-wrap;
    background: #f8fafc;
    border: 1px solid #e2efec;
    border-radius: 6px;
    padding: 10px;
    font-size: 13px;
}


/* ============================================================
   MOBIEL
   ============================================================ */

@media (max-width: 768px) {

    .cf-document-intake {
        align-items: stretch;
        gap: 0.75rem;
        padding: 0;
    }

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

    .cf-document-intake .cf-section {
        padding: 12px;
        margin-bottom: 12px;
    }

    .cf-document-intake .cf-section-head {
        margin-bottom: 8px;
    }

    .cf-document-intake__bronkeuze {
        flex-direction: column;
        align-items: stretch;
    }

    .cf-document-intake__bronknop {
        width: 100%;
    }

    .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;
    }

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

    .cf-document-koppeling-row {
        margin-bottom: 1px;
    }

    .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);
            transform-origin: center;
        }

    .cf-document-intake__acties {
        flex-direction: column-reverse;
        align-items: stretch;
        max-width: 100%;
    }

        .cf-document-intake__acties .cf-btn {
            width: 100%;
        }

    .cf-document-preview__image {
        max-height: 240px;
    }
}