/* ==========================================================================
   form-2026.css — Moderne restyle van alle formulieren (EazyUitstroom)
   Overschrijft de oude "Conquer" Bootstrap 3 form-stijl met een eigentijdse
   look: zachte oppervlakken, afgeronde hoeken, subtiele schaduwen, duidelijke
   focus-states en moderne knoppen. Wordt als laatste ingeladen.
   Huisstijl 2026: eazy-groen, Inter met Source Serif 4 voor koppen.
   Tokens zijn afgestemd op app-2026 (auth + app dezelfde taal).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:wght@500;600;700&display=swap');

:root {
    /* Brand-groen — gelijk aan app-2026 */
    --f26-accent:        #2f7d41;
    --f26-accent-hover:  #205e31;
    --f26-accent-soft:   rgba(83, 185, 75, .12);
    --f26-danger:        #b9483d;
    --f26-danger-hover:  #96362f;
    --f26-success:       #2f7d41;
    /* Neutrale canvas — koel groen-grijs */
    --f26-ink:           #17231b;
    --f26-ink-soft:      #5f6f64;
    --f26-line:          #dce5df;
    --f26-line-strong:   #c6d3ca;
    --f26-surface:       #ffffff;
    --f26-surface-2:     #f7f9f8;
    --f26-radius:        14px;
    --f26-radius-sm:     9px;
    --f26-shadow:        0 1px 2px rgba(20, 42, 28, .04), 0 10px 30px rgba(20, 42, 28, .06);
    --f26-shadow-focus:  0 0 0 3px rgba(83, 185, 75, .24);
    --f26-control-height: 38px;
    --f26-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --f26-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ---- Typografie: functioneel Inter, rustige Source Serif 4-koppen ------- */
body,
.form-control, .btn, .table, .portlet, .page-title, .page-title small,
.breadcrumb, .dropdown-menu, .label, .pagination, .modal-content,
.control-label, .form-section, input, select, textarea, button {
    font-family: var(--f26-font);
}

h1, h2, h3, h4, h5, h6,
.page-title,
.panel-title,
.portlet-title .caption {
    font-family: var(--f26-font-heading);
}

.page-title small {
    font-family: var(--f26-font);
}

/* ---- Kaart / portlet ---------------------------------------------------- */
.portlet.box,
.portlet.light {
    border: 1px solid var(--f26-line);
    border-radius: var(--f26-radius);
    box-shadow: var(--f26-shadow);
    background: var(--f26-surface);
    overflow: hidden;
}

.portlet.box > .portlet-title,
.portlet.light > .portlet-title {
    border-bottom: 1px solid var(--f26-line);
    background: var(--f26-surface);
    padding: 10px 14px;
    margin-bottom: 0;
    border-radius: 0;
    min-height: 0;
}

.portlet.box > .portlet-title > .caption,
.portlet.light > .portlet-title > .caption {
    color: var(--f26-ink);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .1px;
    padding: 0;
    float: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.portlet.box > .portlet-title > .caption > i {
    color: var(--f26-accent);
    font-size: 13px;
    margin: 0;
}

.portlet.box > .portlet-body,
.portlet-body.form {
    background: var(--f26-surface);
    padding: 16px;
}

.portlet-body.form .form-body {
    padding: 2px 0;
}

/* Dichter grid: Bootstrap-rows in forms hoeven geen extra verticale lucht */
.portlet-body.form > .row,
.portlet-body.form .tab-pane > .row,
.portlet-body.form .form-body > .row {
    margin-top: 0;
    margin-bottom: 0;
}

.portlet-body.form .row > [class*="col-"] > .row,
.portlet-body.form .tab-pane .row > [class*="col-"] > .col-md-12 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ---- Sectiekoppen in formulier ----------------------------------------- */
.form-section,
h3.form-section {
    color: var(--f26-ink);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 16px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--f26-line);
}
.form-body > .row:first-child .form-section:first-child,
.form-section:first-child { margin-top: 2px; }

/* ---- Labels ------------------------------------------------------------- */
.control-label,
.form-group > label {
    color: var(--f26-ink-soft);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
    line-height: 1.35;
}
.control-label .fa,
.control-label i { color: var(--f26-ink-soft); }
.control-label a { color: var(--f26-accent); font-weight: 500; }

.form-group { margin-bottom: 12px; }

/* ---- Invoervelden ------------------------------------------------------- */
.form-control {
    height: var(--f26-control-height);
    border: 1px solid var(--f26-line-strong);
    border-radius: var(--f26-radius-sm);
    background: var(--f26-surface);
    color: var(--f26-ink);
    font-size: 13px;
    font-family: var(--f26-font);
    padding: 7px 11px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea.form-control { height: auto; min-height: 72px; line-height: 1.45; }
select.form-control { cursor: pointer; }

.form-control::placeholder { color: #87958c; }

.form-control:hover { border-color: var(--f26-line-strong); }

.form-control:focus,
.form-control:focus-visible {
    border-color: var(--f26-accent);
    box-shadow: var(--f26-shadow-focus);
    background: var(--f26-surface);
    outline: none;
}

.form-control[disabled],
.form-control[readonly] {
    background: var(--f26-surface-2);
    color: var(--f26-ink-soft);
    cursor: not-allowed;
}

/* Verplicht / validatie */
.form-control.required:focus { border-color: var(--f26-accent); }
.has-error .form-control,
.form-control.error {
    border-color: var(--f26-danger);
    box-shadow: 0 0 0 3px rgba(184, 80, 62, .14);
}
.help-block.help-block-error,
label.error { color: var(--f26-danger); font-size: 12px; font-weight: 500; }

/* ---- Input group met addon --------------------------------------------- */
.input-group { border-radius: var(--f26-radius-sm); }

.input-group .form-control { border-radius: 0; }
.input-group .form-control:first-child,
.input-group-addon:first-child + .form-control { border-radius: 0; }

.input-group-addon {
    background: var(--f26-surface-2);
    border: 1px solid var(--f26-line-strong);
    color: var(--f26-ink-soft);
    border-top-left-radius: var(--f26-radius-sm);
    border-bottom-left-radius: var(--f26-radius-sm);
    min-width: var(--f26-control-height);
    font-size: 12px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.input-group-addon .fa,
.input-group-addon i { color: var(--f26-ink-soft); }

.input-group .form-control:last-child {
    border-top-right-radius: var(--f26-radius-sm);
    border-bottom-right-radius: var(--f26-radius-sm);
}
/* Addon links → veld heeft geen eigen linkerrand */
.input-group-addon + .form-control,
.input-group-addon + .select2-container .select2-choice,
.input-group-addon + .select2-container .select2-choices {
    border-left: 0;
}
/* Veld + knop rechts: geen rechterrand op het veld */
.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Focus binnen de group: laat de addon meekleuren */
.input-group:focus-within .input-group-addon {
    border-color: var(--f26-accent);
    background: var(--f26-accent-soft);
    color: var(--f26-accent);
}
.input-group:focus-within .input-group-addon .fa,
.input-group:focus-within .input-group-addon i { color: var(--f26-accent); }
.input-group:focus-within .form-control {
    border-color: var(--f26-accent);
    box-shadow: var(--f26-shadow-focus);
    z-index: 3;
}

/* Meerdere velden naast elkaar in één input-group (bv. naam) */
.input-group .form-control[style*="float"] { border-left: 1px solid var(--f26-line-strong); }
.input-group .form-control[style*="float"]:first-of-type { border-left: 0; }

/* ---- Login-pagina input-icon ------------------------------------------- */
/* Het oude thema positioneert deze iconen met margin (11px 2px 4px 10px);
   die telt op bij top/left en zet het icoon scheef. Marge resetten en
   verticaal centreren, zodat het klopt bij elke veldhoogte. */
.login .input-icon,
.input-icon { position: relative; }
.input-icon > .fa,
.input-icon > i {
    color: #87958c;
    position: absolute;
    margin: 0 !important;
    left: 11px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}
.input-icon.right > .fa,
.input-icon.right > i { left: auto; right: 11px; }

.input-icon .form-control { padding-left: 34px !important; }
.input-icon.right .form-control { padding-left: 12px !important; padding-right: 34px !important; }

.input-icon:focus-within > .fa,
.input-icon:focus-within > i { color: var(--f26-accent); }

/* ---- Checkboxes & radios ----------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
    width: 15px;
    height: 15px;
    accent-color: var(--f26-accent);
    cursor: pointer;
    vertical-align: middle;
}

/* ---- Select2 (basis modernisering) -------------------------------------
   Eén rustige control: dezelfde rand, hoogte en radius als .form-control.
   Het samenvoegen met een prepend-icoon gebeurt in app-2026.css, zodat er
   maar één plek is die de "naadloze balk" regelt. */
.select2-container .select2-choice,
.select2-container-multi .select2-choices {
    min-height: var(--f26-control-height);
    border: 1px solid var(--f26-line-strong) !important;
    border-radius: var(--f26-radius-sm) !important;
    background: var(--f26-surface) !important;
    color: var(--f26-ink);
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container .select2-choice {
    height: var(--f26-control-height);
    padding: 0 26px 0 11px;
    line-height: calc(var(--f26-control-height) - 2px);
    font-size: 13px;
}
/* Multiselect groeit mee met het aantal chips in plaats van af te kappen. */
.select2-container-multi .select2-choices {
    height: auto !important;
    padding: 0 6px 4px;
    line-height: normal;
    overflow: visible;
}

.select2-container.select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices,
.select2-container.select2-dropdown-open .select2-choice,
.select2-container-multi.select2-dropdown-open .select2-choices {
    border-color: var(--f26-accent) !important;
}

/* Pijl zonder eigen kader of sprite: alleen een rustige chevron. */
.select2-container .select2-choice .select2-arrow {
    width: 22px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.select2-container .select2-choice .select2-arrow b {
    background: none !important;
    position: relative;
}
.select2-container .select2-choice .select2-arrow b::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -5px 0 0 -5px;
    border-right: 1.5px solid var(--f26-ink-soft);
    border-bottom: 1.5px solid var(--f26-ink-soft);
    transform: rotate(45deg);
}
/* De gekozen waarde houdt alleen ruimte vrij voor de chevron (en het kruisje
   bij allowClear); de padding op .select2-choice doet de rest. */
.select2-container .select2-choice > .select2-chosen { margin-right: 0; }
.select2-container.select2-allowclear .select2-choice > .select2-chosen { margin-right: 18px; }

.select2-container .select2-choice abbr,
.select2-container-multi .select2-search-choice-close { background-image: none !important; }
.select2-container .select2-choice abbr {
    top: 50%;
    right: 26px;
    margin-top: -6px;
}
.select2-container .select2-choice abbr::after {
    content: "\00d7";
    display: block;
    color: var(--f26-ink-soft);
    font-size: 14px;
    line-height: 12px;
    text-align: center;
}
.select2-container .select2-choice abbr:hover::after { color: var(--f26-ink); }

.select2-drop {
    border: 1px solid var(--f26-line) !important;
    border-radius: var(--f26-radius-sm) !important;
    box-shadow: var(--f26-shadow) !important;
    overflow: hidden;
}
.select2-results .select2-highlighted { background: var(--f26-accent) !important; color: #fff !important; }
.select2-container-multi .select2-choices .select2-search-choice {
    margin: 5px 4px 0 0;
    padding: 3px 22px 3px 9px;
    border: 1px solid rgba(47, 125, 65, .22);
    border-radius: 999px;
    background: var(--f26-accent-soft);
    color: var(--f26-accent-hover);
    box-shadow: none;
}
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close {
    top: 50%;
    right: 6px;
    left: auto;
    width: 12px;
    height: 12px;
    margin-top: -6px;
}
.select2-container-multi .select2-search-choice-close::after {
    content: "\00d7";
    display: block;
    color: var(--f26-accent-hover);
    font-size: 13px;
    line-height: 12px;
    text-align: center;
    opacity: .7;
}
.select2-container-multi .select2-search-choice-close:hover::after { opacity: 1; }
.select2-container-multi .select2-choices .select2-search-field input {
    height: 30px;
    margin: 4px 0 0;
    padding: 0 4px !important;
    font-family: var(--f26-font);
    font-size: 13px;
    color: var(--f26-ink);
}

/* Datum/tijd: date-set als geïntegreerde control, niet als losse Bootstrap-knop */
.input-group.date .input-group-btn > .btn,
.input-group.form_datetime .input-group-btn > .btn,
.input-group.date .input-group-btn > .btn.default,
.input-group.form_datetime .input-group-btn > .btn.default {
    min-height: var(--f26-control-height);
    padding: 0 12px;
    border: 1px solid var(--f26-line-strong);
    border-left: 0;
    border-radius: 0 var(--f26-radius-sm) var(--f26-radius-sm) 0;
    background: var(--f26-surface-2);
    color: var(--f26-ink-soft);
    box-shadow: none;
}
.input-group.date:focus-within .input-group-btn > .btn,
.input-group.form_datetime:focus-within .input-group-btn > .btn {
    border-color: var(--f26-accent);
    background: var(--f26-accent-soft);
    color: var(--f26-accent);
}
.input-group.date .form-control,
.input-group.form_datetime .form-control {
    border-right: 0;
}

/* Date/timepicker overlays */
.datepicker,
.datetimepicker {
    border: 1px solid var(--f26-line) !important;
    border-radius: var(--f26-radius-sm) !important;
    box-shadow: var(--f26-shadow) !important;
    padding: 6px;
    background: var(--f26-surface);
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datetimepicker table tr td span.active {
    background: var(--f26-accent) !important;
    background-image: none !important;
    color: #fff !important;
    text-shadow: none;
}
.datepicker table tr td.today,
.datetimepicker table tr td.today {
    background: var(--f26-accent-soft) !important;
    background-image: none !important;
    color: var(--f26-accent-hover) !important;
}
.datepicker table tr td.day:hover,
.datetimepicker table tr td.day:hover,
.datepicker thead tr:first-child th:hover,
.datetimepicker thead tr:first-child th:hover {
    background: var(--f26-surface-2) !important;
}

/* ---- Knoppen ------------------------------------------------------------ */
.btn {
    border-radius: var(--f26-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 13px;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: var(--f26-shadow-focus); }
.btn .fa { font-size: 12px; }

.btn-primary {
    background: var(--f26-accent);
    border-color: var(--f26-accent);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--f26-accent-hover);
    border-color: var(--f26-accent-hover);
    color: #fff;
}

.btn-default {
    background: var(--f26-surface);
    border-color: var(--f26-line-strong);
    color: var(--f26-ink);
}
.btn-default:hover,
.btn-default:focus {
    background: var(--f26-surface-2);
    border-color: var(--f26-line-strong);
    color: var(--f26-ink);
}

.btn-danger {
    background: var(--f26-danger);
    border-color: var(--f26-danger);
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus { background: var(--f26-danger-hover); border-color: var(--f26-danger-hover); color: #fff; }

.btn-success { background: var(--f26-success); border-color: var(--f26-success); color: #fff; }
.btn-success:hover, .btn-success:focus { background: #268553; border-color: #268553; color: #fff; }

/* Login-knop gebruikt btn-default als hoofdactie → geef accent-look */
.login-form .form-actions .btn-default,
.login-form .btn-default[type="submit"] {
    background: var(--f26-accent);
    border-color: var(--f26-accent);
    color: #fff;
}
.login-form .form-actions .btn-default:hover,
.login-form .btn-default[type="submit"]:hover {
    background: var(--f26-accent-hover);
    border-color: var(--f26-accent-hover);
}

/* ---- Submit-feedback + dubbelklikbeveiliging --------------------------- */
.is-submit-locked {
    pointer-events: none;
    cursor: wait;
}

.btn.is-submit-locked:not(.is-submitting),
button.is-submit-locked:not(.is-submitting),
input.is-submit-locked:not(.is-submitting),
.a-submit.is-submit-locked:not(.is-submitting) {
    opacity: .55;
}

.btn.is-submitting,
button.is-submitting {
    position: relative;
    color: transparent !important;
    text-shadow: none !important;
    transform: none !important;
    cursor: wait;
}

.btn.is-submitting > *,
button.is-submitting > * {
    opacity: 0;
}

.btn.is-submitting::after,
button.is-submitting::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(44, 42, 37, .24);
    border-top-color: var(--f26-accent);
    border-radius: 50%;
    animation: f26-submit-spin .7s linear infinite;
}

.btn-primary.is-submitting::after,
.btn-success.is-submitting::after,
.btn-danger.is-submitting::after,
.btn-warning.is-submitting::after,
.btn-info.is-submitting::after,
.login-form .btn-default.is-submitting::after {
    border-color: rgba(255, 255, 255, .38);
    border-top-color: #fff;
}

input[type="submit"].is-submitting,
input[type="image"].is-submitting,
.a-submit.is-submitting:not(.btn):not(button) {
    opacity: .58;
    animation: f26-submit-pulse .8s ease-in-out infinite alternate;
}

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

@keyframes f26-submit-pulse {
    to { opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
    .btn.is-submitting::after,
    button.is-submitting::after,
    input[type="submit"].is-submitting,
    input[type="image"].is-submitting,
    .a-submit.is-submitting:not(.btn):not(button) {
        animation: none;
    }
}

/* ---- Form actions (voettekst) ------------------------------------------ */
.form-actions {
    background: var(--f26-surface-2);
    border-top: 1px solid var(--f26-line);
    padding: 10px 14px;
    margin: 14px -14px -14px;
    border-radius: 0 0 var(--f26-radius) var(--f26-radius);
}
.form-actions:after { content: ""; display: table; clear: both; }

/* Primaire Opslaan rechts: veel legacy views gebruiken nog btn-default */
.form-actions .pull-right button[type="submit"].btn-default,
.form-actions .pull-right input[type="submit"].btn-default,
.form-actions .pull-right .btn-default.a-submit,
.panel-footer .pull-right button[type="submit"].btn-default,
.panel-footer .pull-right input[type="submit"].btn-default,
.panel-footer .pull-right .btn-default.a-submit,
.form-actions .btn-group.pull-right > button[type="submit"].btn-default,
.panel-footer .btn-group.pull-right > button[type="submit"].btn-default {
    background: var(--f26-accent);
    border-color: var(--f26-accent);
    color: #fff;
}
.form-actions .pull-right button[type="submit"].btn-default:hover,
.form-actions .pull-right button[type="submit"].btn-default:focus,
.form-actions .pull-right input[type="submit"].btn-default:hover,
.form-actions .pull-right .btn-default.a-submit:hover,
.panel-footer .pull-right button[type="submit"].btn-default:hover,
.panel-footer .pull-right button[type="submit"].btn-default:focus,
.panel-footer .pull-right .btn-default.a-submit:hover,
.form-actions .btn-group.pull-right > button[type="submit"].btn-default:hover,
.panel-footer .btn-group.pull-right > button[type="submit"].btn-default:hover {
    background: var(--f26-accent-hover);
    border-color: var(--f26-accent-hover);
    color: #fff;
}
.form-actions .pull-right button[type="submit"].btn-default.is-submitting::after,
.form-actions .pull-right .btn-default.a-submit.is-submitting::after,
.panel-footer .pull-right button[type="submit"].btn-default.is-submitting::after {
    border-color: rgba(255, 255, 255, .38);
    border-top-color: #fff;
}

/* ---- Alerts ------------------------------------------------------------- */
.alert {
    border-radius: var(--f26-radius-sm);
    border: 1px solid transparent;
    font-size: 12.5px;
    padding: 8px 12px;
}
.alert-danger  { background: #f7e9e5; border-color: #e6c6bc; color: #97402f; }
.alert-success { background: #e9f0e9; border-color: #c3d8c6; color: #35603f; }
.alert-info    { background: #eef1ea; border-color: #d5d0c1; color: #5d5647; }
.alert-warning { background: #f7efdd; border-color: #e5d5ac; color: #8a6a1f; }

/* ==========================================================================
   Login / auth-pagina's — compacte fallbackkaart
   ========================================================================== */
.login-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: linear-gradient(160deg, #eef5f0 0%, #e2ebe4 100%);
}
.login-page-container > .content,
.login .content {
    width: 100%;
    max-width: 420px;
    background: var(--f26-surface);
    border: 1px solid var(--f26-line);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(16, 24, 40, .12);
    padding: 32px 30px;
}
.login-form .form-title,
.login .form-title { color: var(--f26-ink); font-weight: 700; margin: 12px 0 4px; }
.login-form img { max-width: 200px; height: auto; }
.login-form p { color: var(--f26-ink-soft); font-size: 13.5px; }
.login-form .form-actions {
    background: transparent;
    border: 0;
    padding: 8px 0 0;
    margin: 8px 0 0;
}
.login-form .emol-gray,
.login-form a.emol-gray { color: var(--f26-ink-soft); }
.login-form .emol-gray:hover { color: var(--f26-accent); }

/* ALTCHA draait in invisible modus (auto="onsubmit"): widget niet tonen.
   Vangnet naast het display="invisible"-attribuut. De noscript-melding
   blijft wel zichtbaar voor bezoekers zonder JavaScript. */
.altcha-invisible { margin: 0 !important; }
.altcha-invisible altcha-widget,
altcha-widget[display="invisible"] { display: none !important; }

/* ==========================================================================
   Overzichtspagina's — paginakop, filters, tabellen, knopbalken, paginatie
   ========================================================================== */

/* ---- Paginakop + breadcrumb -------------------------------------------- */
h3.page-title,
.page-title {
    color: var(--f26-ink);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.2px;
    margin: 4px 0 8px;
}
.page-title > small {
    color: var(--f26-ink-soft);
    font-size: 12.5px;
    font-weight: 500;
}
.page-breadcrumb.breadcrumb,
.breadcrumb {
    background: transparent;
    padding: 0 0 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--f26-line);
    font-size: 12px;
    border-radius: 0;
}
.page-breadcrumb.breadcrumb a,
.breadcrumb a { color: var(--f26-ink-soft); }
.page-breadcrumb.breadcrumb a:hover { color: var(--f26-accent); }
.page-breadcrumb.breadcrumb .fa { color: #87958c; margin: 0 3px; }

/* ---- Knopgroepen in de paginakop --------------------------------------- */
.btn-group > .btn {
    border-radius: 0;
}
.btn-group > .btn:first-child { border-top-left-radius: var(--f26-radius-sm); border-bottom-left-radius: var(--f26-radius-sm); }
.btn-group > .btn:last-child  { border-top-right-radius: var(--f26-radius-sm); border-bottom-right-radius: var(--f26-radius-sm); }
.btn-group + .btn-group { margin-left: 4px; }

.btn-group-sm > .btn,
.btn-sm { font-size: 12px; padding: 5px 10px; }
.btn-xs { font-size: 11.5px; padding: 3px 8px; border-radius: 6px; }

/* Actieve "toggle" knop (bv. Mijn / Alle) */
.btn-default.active,
.btn-group .btn-default.active {
    background: var(--f26-accent-soft);
    border-color: var(--f26-accent);
    color: var(--f26-accent);
}
.btn.disabled, .btn[disabled] { opacity: .5; }

/* ---- Dropdown-menu's ---------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--f26-line);
    border-radius: var(--f26-radius-sm);
    box-shadow: var(--f26-shadow);
    padding: 4px;
    margin-top: 3px;
    font-size: 12.5px;
}
.dropdown-menu > li > a {
    border-radius: 6px;
    padding: 5px 10px;
    color: var(--f26-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background: var(--f26-surface-2); color: var(--f26-accent); }
.dropdown-menu > li > a .fa { color: var(--f26-ink-soft); width: 15px; }
.dropdown-menu > li > a:hover .fa { color: var(--f26-accent); }
.dropdown-menu .divider { background: var(--f26-line); margin: 6px 4px; }

/* ---- Filterpaneel (portlet tools/actions) ------------------------------ */
.portlet.box > .portlet-title > .tools > a { opacity: .5; }
.portlet.box > .portlet-title > .tools > a:hover { opacity: 1; }
.portlet.box > .portlet-title .search-form-header .form-control {
    height: var(--f26-control-height);
    border-radius: 999px;
    padding-left: 34px;
}
/* positionering erft van de generieke .input-icon-regel hierboven */

/* ---- Tabel-panel -------------------------------------------------------- */
.panel.panel-default {
    border: 1px solid var(--f26-line);
    border-radius: var(--f26-radius);
    box-shadow: var(--f26-shadow);
    overflow: hidden;
    background: var(--f26-surface);
}
.panel.panel-default > .panel-heading {
    background: var(--f26-surface);
    border-bottom: 1px solid var(--f26-line);
    color: var(--f26-ink);
    font-weight: 600;
    font-size: 13px;
    padding: 9px 14px;
}
.panel.panel-default > .panel-body { padding: 0; }
.panel.panel-default > .panel-body .table-responsive { margin: 0; border: 0; }

/* ---- Tabellen ----------------------------------------------------------- */
.table { margin-bottom: 0; color: var(--f26-ink); }
.table.table-bordered { border: 0; }
.table.table-bordered > thead > tr > th,
.table.table-bordered > tbody > tr > td { border-color: var(--f26-line); }
.table.table-bordered { border-left: 0; border-right: 0; }
.table > thead > tr > th,
.table > thead > tr.active > th {
    background: var(--f26-surface-2);
    color: var(--f26-ink-soft);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--f26-line) !important;
    padding: 7px 9px;
    vertical-align: middle;
    white-space: nowrap;
}
.table > tbody > tr > td {
    padding: 5px 9px;
    vertical-align: middle;
    font-size: 12.5px;
    border-top: 1px solid var(--f26-line);
}
.table.table-hover > tbody > tr:hover { background: var(--f26-accent-soft); }
.table td a { color: var(--f26-accent); }
.table td a:hover { color: var(--f26-accent-hover); }

/* Sorteerbare koppen */
.emol-sorter { cursor: pointer; }
.emol-sorter:hover { color: var(--f26-accent); }

/* ---- Statuslabels / badges --------------------------------------------- */
.label {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .2px;
}
.label.label-success,  .label-sm.label-success  { background: #e9f7ef; color: #1f7a48; }
.label.label-danger,   .label-sm.label-danger   { background: #fdecec; color: #cf3438; }
.label.label-primary,  .label-sm.label-primary  { background: var(--f26-accent-soft); color: var(--f26-accent); }
.label.label-warning,  .label-sm.label-warning  { background: #fff5e6; color: #9a6300; }
.label.label-info,     .label-sm.label-info     { background: #eef1ea; color: #5d5647; }
.label.label-default,  .label-sm.label-default  { background: #e8efe9; color: var(--f26-ink-soft); }

/* ---- Paginatie ---------------------------------------------------------- */
.pagination {
    margin: 0;
    padding: 9px 12px;
    gap: 3px;
    display: inline-flex;
    flex-wrap: wrap;
}
.pagination > li > a,
.pagination > li > span {
    border: 1px solid var(--f26-line);
    border-radius: 8px !important;
    color: var(--f26-ink);
    margin: 0 1px;
    padding: 4px 9px;
    font-size: 12.5px;
    min-width: 30px;
    text-align: center;
}
.pagination > li > a:hover { background: var(--f26-surface-2); border-color: var(--f26-line-strong); color: var(--f26-accent); }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--f26-accent);
    border-color: var(--f26-accent);
    color: #fff;
}

/* ---- Modals ------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(16, 24, 40, .25);
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--f26-line);
    padding: 12px 16px;
}
.modal-header .modal-title,
.modal-header h3, .modal-header h4 { color: var(--f26-ink); font-weight: 600; font-size: 16px; margin: 0; }
.modal-body { padding: 16px; color: var(--f26-ink); }
.modal-footer {
    border-top: 1px solid var(--f26-line);
    background: var(--f26-surface-2);
    padding: 10px 16px;
}
.modal-footer .btn + .btn { margin-left: 6px; }

/* Kleine schermen */
@media (max-width: 767px) {
    .portlet-body.form,
    .portlet.box > .portlet-body { padding: 16px; }
    .form-actions { margin: 16px -16px -16px; padding: 14px 16px; }
    .login-page-container > .content { padding: 24px 20px; }
    h3.page-title, .page-title { font-size: 19px; }
    .table > tbody > tr > td, .table > thead > tr > th { padding: 8px 10px; }
}