/* =====================================================================================
   Bouwstenen voor pagina's in de stijl van het Kandidaten Log, de Talentradar en Next:
   witte kaarten met rand #e3e5e9 en afgeronde hoeken, grijze labels (#6b7280), lichtblauwe
   accenten (#e7f0fd / #0b5ed7) en paars (darkorchid) voor het actieve tabblad.
   - .record-*     : kop en tabbladen van een kaart in een popup (component RecordHeader)
   - .form-section : een blok velden (EasyEdit2) als kaart met een titel (component FormSection)
   - .kpi-*        : tegels met een getal, zoals bovenaan de Talentradar (KpiTiles + KpiTile)
   - .page-*       : lege toestand, uitleg en tussenkop (PageEmpty, PageHint, PageSectionTitle)
   De componenten staan in Components/Component/PageLayout, met bovenin elk bestand hoe je ze gebruikt.
   Lijsten gebruiken EasyFilterBar + EasyFilterToolbar + EasyQuickGrid (zie /support/UIGuidelines).
   ===================================================================================== */

/* ---- Pagina in een popup-layout (PopupLayoutPrsnnl, PopupLayoutRltn) ---------------- */

/* Lichtgrijze achtergrond zoals het dashboard, zodat de witte kaarten loskomen zonder zware randen. */
body:has(.record-page) {
    background-color: #EFF1F3;
}

.record-page {
    padding: 10px 16px 32px 16px;
    min-width: 0; /* een brede tabel maakt anders de hele pagina breder dan het scherm */
}

.record-content {
    min-width: 0;
}

/* Tabbladbalken (EasyTabBar) op de grijze achtergrond als witte strook, zoals de kop; de lijn onder de tabs valt
   dan weg, de rand van de strook neemt die rol over. */
.record-page .etm-bar {
    margin-left: 2px;
    margin-right: 2px;
    padding: 4px 8px;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 10px;
}

    .record-page .etm-bar > .etm-nav.nav-tabs,
    .record-page .etm-h.etm-style-tabs > .etm-tools {
        border-bottom: 0;
    }

/* Lijsten (EasyQuickGrid) en lege toestanden op de grijze achtergrond als witte kaart; de lijst met werkbalk,
   tabel en paginering samen. Staan ze al in een kaart of popup, dan geen tweede kaart eromheen. */
.record-page .eqg-wrap {
    margin: 0 2px 12px 2px;
    padding: 10px 12px;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 10px;
}

.record-page .page-empty {
    margin: 0 2px 12px 2px;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 10px;
}

/* Oude tabel (EasyList): witte kaart, de laatste regel zonder lijn tegen de rand. */
.record-page .easy-list {
    margin: 0 2px 12px 2px;
    padding: 4px 12px;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 10px;
}

    .record-page .easy-list > .table {
        margin-bottom: 0;
    }

        .record-page .easy-list > .table > tbody > tr:last-child > td {
            border-bottom: 0;
        }

.record-page :is(.form-section, .dash-card, .modal-content, .eqg-wrap, .crud-table-wrap) :is(.eqg-wrap, .page-empty, .easy-list) {
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

    .record-page :is(.form-section, .dash-card, .modal-content, .eqg-wrap, .crud-table-wrap) :is(.eqg-wrap, .easy-list) {
        padding: 0;
    }

/* ---- Kop van de kaart (RecordHeader) ------------------------------------------------- */

.record-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin: 0 2px 10px 2px;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.record-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: darkslategrey;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.record-main {
    flex: 1 1 auto;
    min-width: 0;
}

.record-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.record-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.record-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: #eef0f3;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

    .record-chip.chip-blue {
        background-color: #e7f0fd;
        color: #0b5ed7;
    }

    .record-chip.chip-green {
        background-color: #dcfce7;
        color: #166534;
    }

    .record-chip.chip-red {
        background-color: #fde2e1;
        color: #b42318;
    }

.record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin-top: 4px;
    font-size: 12.5px;
    color: #4b5563;
}

.record-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

    .record-meta-item > i {
        color: #9ca3af;
        width: 14px;
        text-align: center;
    }

.record-meta-label {
    color: #6b7280;
}

.record-meta-value {
    color: #1f2937;
    font-weight: 500;
}

.record-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- Blok velden als kaart (formulieren met EasyEdit2) ------------------------------- */

/* Blokken als kolommen (zoals een metselverband): elk blok zo hoog als zijn velden, zonder gaten ernaast. */
.form-sections {
    columns: 400px;
    column-gap: 12px;
    margin: 0 2px 4px 2px;
}

.form-section {
    min-width: 0;
    margin: 0 2px 12px 2px;
    padding: 12px 16px 10px 16px;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 10px;
}

.form-sections > .form-section {
    break-inside: avoid;
    margin: 0 0 12px 0;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: solid 1px #eef0f3;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

    .form-section-title > i {
        color: #6b7280;
    }

    .form-section-title .form-section-hint {
        margin-left: auto;
        font-size: 12px;
        font-weight: 400;
        color: #6b7280;
    }

/* EasyEdit2 binnen een blok: labels klein en grijs, velden met de rand en afronding van de filterbalk.
   Alleen-lezen velden blijven zonder rand (dat regelt EasyEdit2 zelf). */
.form-section .row {
    --bs-gutter-x: 12px;
    align-items: center;
    margin-bottom: 2px;
}

/* Label 38%, veld de rest (EasyEdit2 zet col-sm-3 + col-sm-7; in een smal blok liepen lange labels dan over twee regels). */
.form-section .row > .col-form-label {
    width: 38%;
}

    .form-section .row > .col-form-label + div {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

.form-section .col-form-label {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 13px;
    color: #6b7280;
}

.form-section input:not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled),
.form-section select:not(:disabled),
.form-section textarea:not([readonly]):not(:disabled) {
    min-height: 30px;
    padding: 3px 8px;
    font-size: 13px;
    color: #1f2937;
    background-color: #fff;
    border: solid 1px #d3d7dd;
    border-radius: 6px;
}

    .form-section input:not([type="checkbox"]):not([type="radio"]):not([readonly]):focus,
    .form-section select:focus,
    .form-section textarea:focus {
        outline: none;
        border-color: #86b7fe;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
    }

/* EasyEdit2 geeft een tekstvak een vaste breedte van 400 px; in een smalle kaart niet breder dan de kaart. */
.form-section textarea {
    max-width: 100%;
}

.form-section input[readonly]:not([type="checkbox"]):not([type="radio"]),
.form-section input:disabled:not([type="checkbox"]):not([type="radio"]),
.form-section select:disabled,
.form-section textarea[readonly] {
    min-height: 26px;
    padding: 2px 0;
    font-size: 13px;
    color: #1f2937;
    background: none;
    border: 0;
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
}

/* EasyEdit2 geeft een alleen-lezen keuzelijst max-width 100px mee; zonder rand en pijltje kan de hele naam er staan. */
.form-section select:disabled {
    max-width: 100% !important;
}

.form-section .form-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: solid 1px #eef0f3;
}

/* ---- Tegels met een getal (KPI) ------------------------------------------------------- */

.kpi-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 0 2px 10px 2px;
}

.kpi-tile {
    padding: 8px 12px;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-left: solid 4px var(--kpi-color, #d3d7dd);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

a.kpi-tile:hover {
    color: inherit;
    border-color: #c4c9d0;
    border-left-color: var(--kpi-color, #d3d7dd);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.kpi-tile-title {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    /* Lange titels mogen over twee regels; daarna afgekapt (volledige titel als tooltip). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kpi-tile-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #1f2937;
}

.kpi-tile-detail {
    font-size: 12px;
    color: #6b7280;
}

/* ---- Lege toestand en uitleg ---------------------------------------------------------- */

/* Laadicoon pas na 3 seconden (EasyLoading): kort laden geeft een stil scherm in plaats van een flitsend icoon;
   alleen bij echt lang laden verschijnt het (voorkeur Niels, 12-10-2026). Pagina's tonen tijdens het laden niets. */
.easy-loading-delayed {
    opacity: 0;
    animation: loading-show .2s ease-out 3s forwards;
}

@keyframes loading-show {
    to { opacity: 1; }
}

.page-empty {
    padding: 28px 12px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

    .page-empty > i {
        display: block;
        margin-bottom: 8px;
        font-size: 30px;
        color: #c4c9d0;
    }

.page-hint {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 2px 8px 2px;
    padding: 8px 12px;
    font-size: 13px;
    color: #374151;
    background-color: #f7f8fa;
    border: solid 1px #e3e5e9;
    border-radius: 8px;
}

    .page-hint > i {
        margin-top: 2px;
        color: #6b7280;
    }

/* Knoppen onder de blokken (Opslaan voor het hele formulier), en Verwijderen apart onderaan. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 2px 12px 2px;
}

.form-actions-danger {
    margin-top: 8px;
    padding-top: 12px;
    border-top: dashed 1px #f1c4c0;
}

/* Kopje boven een lijst of blok op de pagina zelf (bijv. twee tabellen onder elkaar). */
.page-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 2px 6px 2px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

    .page-section-title:first-child {
        margin-top: 4px;
    }

    .page-section-title > i {
        color: #6b7280;
    }

    .page-section-title .page-section-count {
        padding: 0 8px;
        border-radius: 999px;
        background-color: #eef0f3;
        color: #374151;
        font-size: 12px;
        font-weight: 600;
    }

/* Aan/uit-chips voor een keuze uit een lijst (bijv. kenmerken van een relatie): grijs = uit, blauw = aan. */
.chip-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 13px;
    color: #374151;
    background-color: #fff;
    border: solid 1px #d3d7dd;
    border-radius: 999px;
    cursor: pointer;
}

    .chip-toggle > i {
        font-size: 11px;
        color: #9ca3af;
    }

    .chip-toggle:hover {
        background-color: #f6f7f9;
        border-color: #a9b0ba;
    }

    .chip-toggle.active {
        color: #0b5ed7;
        background-color: #e7f0fd;
        border-color: #9ec5fe;
        font-weight: 600;
    }

        .chip-toggle.active > i {
            color: #0b5ed7;
        }

/* Draaitabel (bijv. de prognose op de relatiekaart): witte kaart die horizontaal schuift, kleine cijfers,
   lichte lijnen en de eerste kolom vast. */
.pivot-scroll {
    max-width: 100%;
    margin: 0 2px 12px 2px;
    overflow: auto;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 10px;
}

.pivot-table {
    font-size: 12px;
    --bs-table-border-color: #eef0f3;
}

    .pivot-table td {
        padding: 3px 6px;
        white-space: nowrap;
    }

    .pivot-table tr:first-child td,
    .pivot-table tr:nth-child(2) td {
        background-color: #f6f7f9;
        color: #4b5563;
    }

    .pivot-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #f6f7f9;
        color: #374151;
    }

/* Knoppen in een tabelcel (Bewerken, Openen, PDF): compact, zodat ze de rij niet hoger maken dan nodig. */
.grid td .btn-sm {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 12px;
    line-height: 20px;
}

/* Uploadvak (bestand slepen of kiezen) binnen een kaart. */
.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 16px 14px 16px;
    text-align: center;
    background-color: #f7f8fa;
    border: dashed 2px #d3d7dd;
    border-radius: 10px;
}

    .upload-zone > i {
        margin-bottom: 4px;
        font-size: 26px;
        color: #9ca3af;
    }

    .upload-zone .form-control {
        max-width: 420px;
    }

    .upload-zone.hover {
        background-color: #e7f0fd;
        border-color: #86b7fe;
    }

/* ---- Dashboard: kop, kaarten, tabellen en waardetegels -------------------------------- */
.dash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 14px;
}

.dash-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
}

.dash-sub {
    font-size: 13px;
    color: #6b7280;
}

.dash-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .dash-actions .btn {
        --bs-btn-padding-y: 3px;
        --bs-btn-padding-x: 9px;
        background-color: #fff;
        border: solid 1px #d3d7dd;
        color: #374151;
    }

        .dash-actions .btn:hover {
            background-color: #f3f4f6;
        }

    .dash-actions .btn-outline-primary {
        color: #0b5ed7;
    }

.dash-card {
    min-width: 0;
    padding: 12px 16px;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 10px;
}

.dash-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

    .dash-card-title > i {
        color: #6b7280;
    }

.dash-table {
    font-size: 12.5px;
}

    .dash-table thead th {
        padding-top: 4px;
        padding-bottom: 4px;
        border-bottom: solid 1px #e3e5e9;
        font-size: 11px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .02em;
        white-space: nowrap;
    }

    .dash-table tbody td {
        border-color: #f0f1f3;
    }

    .dash-table tbody tr:last-child td {
        border-bottom: 0;
    }

/* Waardetegel (DashboardValue): getal groot, titel klein en grijs, gekleurde streep links. */
.dash-value {
    height: 100%;
    padding: 10px 14px;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-left: solid 4px var(--dash-value-color, #0b5ed7);
    border-radius: 10px;
}

.dash-value-title {
    font-size: 13px;
    color: #6b7280;
}

.dash-value-number {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    color: #1f2937;
}

/* Titelregel van een dashboard-item: aantal regels en "Alles bekijken" rechts. */
.dash-card-count {
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    color: #374151;
    background-color: #f3f4f6;
    border-radius: 9px;
}

.dash-card-link {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: #0b5ed7;
    text-decoration: none;
    white-space: nowrap;
}

    .dash-card-link:hover {
        text-decoration: underline;
    }

/* Tabel van een dashboard-item: lange teksten afgekapt (volledige tekst als tooltip), klikbare regels. */
.dash-table-wrap {
    overflow-x: auto;
}

.dash-table td {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-table tr.dash-row-link {
    cursor: pointer;
}

.dash-more {
    margin-top: 6px;
    font-size: 12px;
}

.dash-empty {
    padding: 14px 0 6px 0;
    font-size: 13px;
    color: #6b7280;
}

/* Item met twee kolommen als lijstje "label … waarde". */
.dash-stats {
    display: flex;
    flex-direction: column;
}

.dash-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: inherit;
    text-decoration: none;
    border-bottom: solid 1px #f0f1f3;
}

    .dash-stat:last-child {
        border-bottom: 0;
    }

a.dash-stat:hover .dash-stat-label {
    color: #0b5ed7;
}

.dash-stat-label {
    color: #6b7280;
}

.dash-stat-value {
    font-weight: 600;
    color: #1f2937;
    text-align: right;
    white-space: nowrap;
}

/* Status als gekleurd label (kolommen met "status" in de naam). */
.dash-chip {
    display: inline-block;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    border-radius: 9px;
}

.dash-chip-ok { color: #146c43; background-color: #d1e7dd; }
.dash-chip-bad { color: #b02a37; background-color: #f8d7da; }
.dash-chip-warn { color: #995400; background-color: #ffe5cc; }
.dash-chip-info { color: #0b5ed7; background-color: #e7f0fd; }

/* ---- EasyCRUD: kleine lijst met toevoegen/bewerken (contracttypes, kenmerken, adressen) ---------- */
.crud {
    max-width: 1100px;
}

.crud-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 2px 8px 2px;
}

.crud-count {
    font-size: 12px;
    color: #6b7280;
}

.crud-table-wrap {
    overflow-x: auto;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 10px;
}

.crud-table {
    font-size: 13px;
}

    .crud-table thead th {
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .02em;
        white-space: nowrap;
        background-color: #f7f8fa;
        border-bottom: solid 1px #e3e5e9;
    }

    .crud-table tbody td {
        max-width: 320px;
        padding: 6px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        border-color: #f0f1f3;
    }

    .crud-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .crud-table tr.crud-row-link {
        cursor: pointer;
    }

/* ---- Keuzetegels (component ChoiceTile) -------------------------------------------------- */
.choice-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-width: 980px;
    margin: 0 2px 12px 2px;
}

.choice-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    color: #1f2937;
    text-decoration: none;
    background-color: #fff;
    border: solid 1px #e3e5e9;
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}

    .choice-tile:hover:not(:disabled) {
        color: #1f2937;
        border-color: #86b7fe;
        box-shadow: 0 2px 6px rgba(13, 110, 253, .12);
    }

    .choice-tile:disabled {
        opacity: .55;
    }

    .choice-tile > i {
        flex: 0 0 auto;
        width: 26px;
        font-size: 20px;
        color: #0b5ed7;
        text-align: center;
    }

.choice-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.choice-tile-title {
    font-size: 14px;
    font-weight: 600;
}

.choice-tile-sub {
    font-size: 12px;
    color: #6b7280;
}