/* MijnFlexurance - layout.css
   Schermopbouw, app-header, action bars, record headers, tabs, detail cards,
   modals, lijsten, filters en responsive gedrag.
*/

/* ===== App shell ===== */

.app-header {
    min-height: var(--mf-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 24px;
    background: var(--mf-navy);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.app-header__left,
.app-header__right,
.app-brand,
.app-nav,
.app-userbar {
    display: flex;
    align-items: center;
}

.app-header__left { gap: 28px; min-width: 0; }
.app-header__right, .app-userbar { gap: 14px; }

.app-brand {
    gap: 10px;
    text-decoration: none;
    color: #ffffff;
    flex: 0 0 auto;
}

.app-brand__icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mf-teal);
    color: #ffffff;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.app-brand__text { line-height: 1; }
.app-brand__mini { display: block; color: #9be3d6; font-size: 11px; font-weight: 800; }
.app-brand__name { display: block; color: #ffffff; font-size: 16px; font-weight: 900; letter-spacing: 0.04em; }

.app-nav { gap: 2px; min-width: 0; overflow: hidden; }
.app-nav__item {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 9px 13px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.app-nav__item:hover { background: rgba(255, 255, 255, 0.10); color: #ffffff; }
.app-nav__item--active { background: var(--mf-teal-dark); color: #ffffff; }

.app-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    box-shadow: none;
    min-height: 34px;
    padding: 0;
}
.app-icon-button:hover { background: rgba(255, 255, 255, 0.10); color: #ffffff; }

.app-notification { position: relative; }
.app-notification__badge {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--mf-teal);
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
}

.app-avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    color: var(--mf-navy);
    font-size: 13px;
    font-weight: 900;
}

.page-shell {
    padding: 20px 20px 28px;
    background: var(--mf-page-bg);
    min-height: calc(100vh - var(--mf-header-height));
}

/* ===== General page structure / legacy aliases ===== */

.page-header { margin-bottom: 10px; }
.page-subtitle { margin: 0 0 16px; color: var(--mf-text-subtle); }
.topbar, .action-bar { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.topbar-left, .topbar-right, .action-bar-left, .action-bar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form { margin: 0; display: inline-flex; }

.page-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 13px 18px;
    margin: 0 0 0;
    background: var(--mf-navy);
    color: #ffffff;
    font-size: 14px;
    border-radius: var(--mf-radius-lg) var(--mf-radius-lg) 0 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.breadcrumb a { color: inherit; text-decoration: none; font-weight: 800; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-separator { color: rgba(255, 255, 255, 0.55); }
.breadcrumb-current { color: #ffffff; font-weight: 900; }

.page-separator { display: none; }

.page-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px;
    margin: 0 0 18px;
    background: #ffffff;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    box-shadow: var(--mf-shadow-sm);
}

.page-action-bar-left,
.page-action-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-action-bar-right { margin-left: auto; justify-content: flex-end; }
.page-content { margin-top: 16px; }

/* ===== Toolbars / filters ===== */

.filters-form,
.toolbar-form,
.list-toolbar__left,
.list-toolbar__right,
.tab-toolbar__left,
.tab-toolbar__right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.filters-form input,
.filters-form select,
.filters-form button,
.toolbar-form input,
.toolbar-form select,
.toolbar-form button {
    width: auto;
    min-width: 0;
}

.filters-form input[type="text"],
.toolbar-form input[type="text"],
.search-control input {
    min-width: 260px;
}

.search-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 280px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--mf-border-input);
    border-radius: var(--mf-radius-md);
    background: #ffffff;
    box-shadow: var(--mf-shadow-sm);
}
.search-control__icon { color: var(--mf-text-muted); font-weight: 900; }
.search-control__input,
.search-control input {
    min-height: 36px;
    border: 0;
    padding: 0;
    box-shadow: none;
    outline: 0;
}

/* ===== Record header / tabs ===== */

.record-module-shell {
    margin-bottom: 18px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    overflow: hidden;
    background: var(--mf-card-bg);
    box-shadow: var(--mf-shadow-sm);
}

.record-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    padding: 14px 18px;
    background: var(--mf-navy);
    color: #ffffff;
}

.record-module-title { font-weight: 900; font-size: 16px; }
.record-module-title .breadcrumb { color: #ffffff; }
.record-module-subtitle,
.record-module-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.record-tab-bar,
.record-tabs,
.view-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    min-height: 42px;
    background: var(--mf-teal);
}

.record-tab,
.record-tabs__item,
.view-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    font-weight: 800;
}
.record-tab:last-child { border-right: 0; }
.record-tab:hover,
.record-tabs__item:hover,
.view-tab:hover { background: rgba(255, 255, 255, 0.12); }
.record-tab.is-active,
.record-tabs__item--active,
.view-tab.is-active { background: var(--mf-teal-dark); color: #ffffff; box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.85); }

.record-tab-panel { display: none; }
.record-tab-panel.is-active { display: block; }

/* ===== Saved view tabs for index ===== */

.saved-view-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    background: var(--mf-teal);
    border-top: 1px solid rgba(255,255,255,0.18);
}
.saved-view-tab {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    border-right: 1px solid rgba(255,255,255,0.25);
}
.saved-view-tab:last-child { border-right: 0; }
.saved-view-tab.is-active { background: var(--mf-teal-dark); box-shadow: inset 0 -3px 0 rgba(255,255,255,0.85); }

/* ===== KPI / summary ===== */

.record-summary-bar,
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin: -2px 0 18px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    overflow: hidden;
    background: #ffffff;
    box-shadow: var(--mf-shadow-sm);
}
.summary-item,
.kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 14px 16px;
    border-right: 1px solid var(--mf-border-soft);
    background: #ffffff;
}
.summary-item:last-child { border-right: 0; }
.summary-icon,
.kpi-card__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #dffbf4;
    color: var(--mf-teal-dark);
    font-weight: 900;
}
.summary-content { display: grid; gap: 1px; }
.summary-value,
.kpi-card__value { color: var(--mf-text-strong); font-size: 21px; font-weight: 900; line-height: 1; }
.summary-label,
.kpi-card__label { color: var(--mf-text); font-size: 12px; font-weight: 800; }
.summary-sub-label,
.kpi-card__subline { color: var(--mf-text-muted); font-size: 11px; font-weight: 700; }

/* ===== Panels and grids ===== */

.grid,
.two-col-grid,
.detail-grid,
.content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 18px;
}
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 18px; }
.full-width { grid-column: 1 / -1; }

.panel,
.card,
.section-panel,
.detail-card {
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    padding: 16px 18px;
    background: var(--mf-card-bg);
    box-shadow: var(--mf-shadow-sm);
}
.panel h2,
.panel-title,
.card-title,
.section-title,
.detail-card__header h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--mf-text-strong);
}

.detail-card__header,
.panel-header-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.detail-card__icon,
.panel-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #edf8f6;
    color: var(--mf-teal-dark);
    font-weight: 900;
}
.panel-empty-slot { display: none; }

/* ===== Data tables / field rows ===== */

.data-table,
.field-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table td,
.data-table th,
.field-table td,
.field-table th {
    padding: 7px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--mf-border-subtle);
    text-align: left;
}
.data-table tr:last-child td,
.field-table tr:last-child td { border-bottom: 0; }
.data-table td:first-child,
.field-table td:first-child,
.field-label {
    width: 40%;
    color: var(--mf-text-muted);
    padding-right: 12px;
    font-weight: 700;
}
.data-table td:last-child,
.field-table td:last-child,
.field-value {
    color: var(--mf-text);
    text-align: right;
    font-weight: 700;
}

.field-list { display: grid; }
.field-row { display: grid; grid-template-columns: 40% 1fr; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--mf-border-subtle); }
.field-row:last-child { border-bottom: 0; }
.field-row dt { color: var(--mf-text-muted); font-weight: 700; }
.field-row dd { margin: 0; text-align: right; font-weight: 700; color: var(--mf-text); }

/* ===== Record / index table ===== */

.table-wrapper,
.data-card,
.list-card {
    overflow-x: auto;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    background: #ffffff;
    box-shadow: var(--mf-shadow-sm);
}

.list-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    background: #ffffff;
}
.list-table th,
.list-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mf-border-soft);
    text-align: left;
    vertical-align: middle;
}
.list-table th {
    background: #f7fafb;
    color: var(--mf-text-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Standaard hover voor hoofdmodule-indexlijsten.
   Lege rijen en footer-/aantalregels blijven neutraal en krijgen geen hover-state. */
.list-table tbody tr:not(.list-table__empty-row):not(.list-table__footer-row):hover td,
.list-table tbody tr:not(.list-table__empty-row):not(.list-table__footer-row):focus-within td {
    background: var(--mf-teal-soft, #e8f7f4);
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}
.list-table td a { color: var(--mf-text-strong); font-weight: 900; text-decoration: none; }
.list-table td a:hover,
.list-table td a:focus,
.list-table tbody tr:not(.list-table__empty-row):not(.list-table__footer-row):hover td a,
.list-table tbody tr:not(.list-table__empty-row):not(.list-table__footer-row):focus-within td a {
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}
.status,
.archive-status { white-space: nowrap; }
.action-cell { min-width: 190px; }
.action-stack { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.row-archived td { background: #fafafa; color: #8a98a3; }

/* ===== Notes/list placeholder ===== */

.tab-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    background: #ffffff;
    box-shadow: var(--mf-shadow-sm);
}



/* Compacte toolbar voor recordtabs zoals Notities: zoekveld, sortering en volgorde naast elkaar. */
.tab-toolbar--compact {
    align-items: center;
}

.tab-toolbar--compact .tab-toolbar__left--inline {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}

.tab-toolbar--compact .search-control--notes {
    flex: 0 0 280px;
    width: 280px;
    min-width: 220px;
}

.tab-toolbar--compact .search-control--notes .search-control__input {
    width: 100%;
    min-width: 0;
}

.tab-toolbar--compact .notes-toolbar__select {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.tab-toolbar--compact .notes-toolbar__select--sort {
    width: 180px;
}

.tab-toolbar--compact .notes-toolbar__select--direction {
    width: 128px;
}

.row-action-button { border: 0; box-shadow: none; background: transparent; min-height: 32px; color: var(--mf-text-muted); }
.row-action-button:hover { background: var(--mf-surface); }
.icon-lock-minimal { color: #927c1e; font-size: 14px; }

.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-top: 1px solid var(--mf-border-soft);
    background: #ffffff;
}
.pagination-bar__summary { color: var(--mf-text-strong); font-weight: 900; }
.pagination { display: flex; align-items: center; gap: 7px; }
.pagination__button,
.page-button {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mf-border-input);
    border-radius: var(--mf-radius-md);
    background: #ffffff;
    color: var(--mf-text);
    text-decoration: none;
    font-weight: 900;
    box-shadow: var(--mf-shadow-sm);
}
.pagination__button--active,
.page-button.is-active { background: var(--mf-teal); border-color: var(--mf-teal); color: #ffffff; }
.pagination__ellipsis { color: var(--mf-text-muted); padding: 0 4px; }
.pagination__button--disabled { opacity: .45; pointer-events: none; }

/* ===== Modal ===== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(38, 61, 69, 0.72);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}
.modal-overlay.is-open { display: flex; }
.modal-dialog,
.modal-card {
    width: min(720px, calc(100vw - 48px));
    background: #ffffff;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    border-top: 5px solid var(--mf-teal);
}
.modal-header,
.modal-body,
.modal-footer { padding: 18px 22px; }
.modal-header { border-bottom: 1px solid var(--mf-border-soft); }
.modal-title { margin: 0 0 6px; font-size: 24px; line-height: 1.15; }
.modal-subtitle { color: var(--mf-text-subtle); }
.modal-body { display: flex; flex-direction: column; gap: 14px; }
.modal-section-title { margin: 0 0 8px; font-size: 18px; }
.modal-field-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--mf-border-subtle);
    align-items: center;
}
.modal-field-row:first-child { border-top: 0; }
.modal-label { color: var(--mf-text-muted); font-weight: 700; }
.modal-input, .modal-select, .modal-textarea { width: 100%; min-width: 0; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--mf-border-soft); background: #f8fafb; }
.modal-actions-right { display: flex; justify-content: flex-end; gap: 10px; }
.modal-dialog.modal-dialog-compact { width: min(760px, calc(100vw - 48px)); }
.modal-body.modal-body-compact { gap: 10px; padding-top: 18px; padding-bottom: 18px; }
.modal-field-row.modal-field-row-compact { grid-template-columns: 220px minmax(0, 1fr); gap: 14px; padding: 9px 0; }

.modal-checkbox-control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.modal-checkbox-control input[type="checkbox"] {
    margin: 0;
}

/* ===== Role / option blocks ===== */
.option-list { display: flex; flex-direction: column; gap: 10px; }
.option-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--mf-border-soft); }
.option-meta { color: var(--mf-text-subtle); font-size: 12px; margin-top: 4px; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 8px; }

/* ===== Compact edit/create variant ===== */
.panel.panel-compact,
.card.panel-compact,
.section-panel.panel-compact { padding: 14px 16px; }
.panel.panel-compact h2,
.card.panel-compact .card-title,
.section-panel.panel-compact .section-title { margin-bottom: 10px; }
.data-table.data-table-compact td,
.field-table.field-table-compact td { padding: 6px 0; vertical-align: middle; }
.data-table.data-table-compact input,
.data-table.data-table-compact select,
.field-table.field-table-compact input,
.field-table.field-table-compact select { min-height: 34px; padding: 6px 9px; }
.data-table.data-table-compact textarea,
.field-table.field-table-compact textarea { min-height: 74px; height: auto; }

/* ===== Filter page ===== */
.filter-page-title { margin-top: 0; margin-bottom: 8px; font-size: 36px; line-height: 1.1; color: var(--mf-text-strong); }
.filter-intro { max-width: 900px; margin-bottom: 24px; font-size: 15px; line-height: 1.6; color: var(--mf-text-muted); }
.filter-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.current-search { margin-bottom: 18px; color: var(--mf-text); }
.panel-header { padding: 16px 18px; border-bottom: 1px solid var(--mf-border-soft); }
.panel-header h2 { margin: 0; font-size: 18px; color: var(--mf-text-strong); }
.panel-body { padding: 18px; }
.panel-intro { margin-bottom: 18px; color: var(--mf-text-muted); line-height: 1.5; }
.select-all-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; color: var(--mf-text-muted); }
.link-button { border: 0; padding: 0; background: transparent; color: var(--mf-text-muted); text-decoration: underline; cursor: pointer; font: inherit; box-shadow: none; min-height: auto; }
.link-button:hover { color: var(--mf-text); background: transparent; }
.two-col-list { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px 28px; }
.option { display: flex; align-items: center; gap: 10px; color: var(--mf-text); }
.option-stack { display: grid; gap: 10px; margin-top: 12px; }
.helper-box { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--mf-border-soft); border-radius: var(--mf-radius-md); background: var(--mf-surface); color: var(--mf-text-muted); line-height: 1.5; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { color: var(--mf-text); font-weight: 700; }
.age-grid, .sort-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; }
.age-grid { margin-bottom: 18px; }
.summary-panel { grid-column: 1 / -1; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 12px; }
.summary-card { border: 1px solid var(--mf-border-soft); border-radius: var(--mf-radius-md); background: var(--mf-surface); padding: 12px 14px; }
.summary-card-label { display: block; font-size: 13px; color: var(--mf-text-subtle); margin-bottom: 6px; }
.summary-card-value { color: var(--mf-text); line-height: 1.5; }

/* ===== Responsive ===== */

@media (max-width: 1280px) {
    .app-nav__item { padding-left: 9px; padding-right: 9px; }
    .record-summary-bar, .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .summary-item:nth-child(3n) { border-right: 0; }
    .tab-toolbar { align-items: flex-start; }
}

@media (max-width: 980px) {
    .summary-grid, .two-col-list, .age-grid, .sort-grid { grid-template-columns: 1fr; }
    .filter-page-title { font-size: 32px; }
    .app-header { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
    .app-nav { display: none; }
}

@media (max-width: 920px) {
    .grid, .two-col-grid, .grid-3, .detail-grid, .content-grid { grid-template-columns: 1fr; }
    .full-width { grid-column: auto; }
}

@media (max-width: 900px) {
    .page-action-bar { align-items: stretch; }
    .page-action-bar-left, .page-action-bar-right { width: 100%; }
    .page-action-bar-right { justify-content: flex-start; margin-left: 0; }
    .action-stack { flex-wrap: wrap; }
    .record-tab-bar, .record-tabs, .view-tabs, .saved-view-tabs { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    .record-module-header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 720px) {
    .page-shell { padding: 14px; }
    .modal-title { font-size: 22px; }
    .modal-field-row, .modal-field-row.modal-field-row-compact { grid-template-columns: 1fr; gap: 8px; }
    .modal-footer { flex-direction: column-reverse; align-items: stretch; }
    .modal-actions-right, .modal-footer > div { width: 100%; }
    .modal-footer .button, .modal-footer button, .modal-footer .button-link { width: 100%; }
    .field-row { grid-template-columns: 1fr; gap: 3px; }
    .field-row dd { text-align: left; }
    .data-table td:first-child, .field-table td:first-child { width: auto; }
    .data-table td:last-child, .field-table td:last-child { text-align: left; }
}

@media (max-width: 560px) {
    .record-tab-bar, .record-tabs, .view-tabs, .saved-view-tabs { grid-template-columns: 1fr; }
    .record-tab, .record-tabs__item, .view-tab, .saved-view-tab { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
    .record-tab:last-child { border-bottom: 0; }
    .record-summary-bar, .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Companies-specific layout refinements without separate module CSS ===== */
.companies-view-page #tab-general > .grid > .panel-empty-slot {
    display: none;
}

.companies-view-page #tab-general > .grid > .panel:nth-of-type(5) {
    grid-column: auto;
}

/* ===== Standard view/edit action icons =====
   Deze regels zijn bewust generiek gemaakt. Voorheen stonden dezelfde iconen
   alleen onder .companies-view-page, waardoor nieuwe modules zoals StiPP PDO
   visueel gingen afwijken van het standaard detailpagina-design.
   Nieuwe modules moeten dezelfde actionbar-klassen gebruiken en niet opnieuw
   module-specifieke knopiconen definiëren. */
body[class*="-view-page"] .page-action-bar .page-action-bar-left .button-link::before,
body[class*="-edit-page"] .page-action-bar .page-action-bar-left .button-link::before,
.module-placeholder-page .page-action-bar .page-action-bar-left .button-link::before,
.reference-tables-page .page-action-bar .page-action-bar-left .button-link::before { content: "←"; }
body[class*="-view-page"] .page-action-bar .button-danger::before { content: "▱"; }
body[class*="-view-page"] .page-action-bar .button-success::before { content: "↺"; }
body[class*="-view-page"] .page-action-bar .js-preserve-tab-link::before { content: "✎"; }
body[class*="-edit-page"] .page-action-bar .button-primary::before { content: "▣"; }

.companies-page .record-module-title .breadcrumb-separator,
.companies-page .page-info-bar .breadcrumb-separator { color: rgba(255,255,255,0.55); }

.companies-page .data-table td a[target="_blank"]::after {
    content: " ↗";
    font-size: 11px;
    color: var(--mf-text-muted);
}

.companies-view-page > .page-shell > .page-info-bar,
.companies-edit-page > .page-shell > .page-info-bar {
    display: none;
}

/* ===== MijnFlexurance density: compact desktop (90%-gevoel) =====
   Deze overrides verkleinen spacing, controlhoogtes en kaartpadding zodat de
   layout op normale browserzoom ongeveer dezelfde informatiedichtheid krijgt
   als de eerdere weergave op 90% laptopzoom.
*/
.app-header {
    min-height: var(--mf-header-height);
    gap: 20px;
    padding: 0 18px;
}

.app-header__left { gap: 22px; }
.app-header__right, .app-userbar { gap: 11px; }
.app-brand { gap: 9px; }
.app-brand__icon { width: 31px; height: 31px; }
.app-brand__mini { font-size: 10px; }
.app-brand__name { font-size: 14px; }
.app-nav__item {
    min-height: 32px;
    padding: 7px 11px;
    font-size: 12px;
}
.app-icon-button { width: 31px; height: 31px; min-height: 31px; }
.app-avatar { width: 32px; height: 32px; font-size: 12px; }
.app-notification__badge { min-width: 15px; height: 15px; font-size: 9px; }

.page-shell { padding: 14px 16px 24px; }
.page-header { margin-bottom: 8px; }
.page-subtitle { margin-bottom: 12px; }
.topbar, .action-bar { gap: 10px; margin-bottom: 14px; }
.topbar-left, .topbar-right, .action-bar-left, .action-bar-right { gap: 8px; }

.page-info-bar {
    min-height: 44px;
    padding: 11px 16px;
    gap: 13px;
    font-size: 13px;
}
.breadcrumb { gap: 7px; }

.page-action-bar {
    gap: 11px;
    padding: 11px;
    margin-bottom: 14px;
}
.page-action-bar-left,
.page-action-bar-right { gap: 8px; }
.page-content { margin-top: 12px; }

.filters-form,
.toolbar-form,
.list-toolbar__left,
.list-toolbar__right,
.tab-toolbar__left,
.tab-toolbar__right { gap: 8px; }

.filters-form input[type="text"],
.toolbar-form input[type="text"],
.search-control input { min-width: 234px; }
.search-control {
    min-width: 252px;
    min-height: 34px;
    padding: 0 10px;
    gap: 7px;
}
.search-control__input,
.search-control input { min-height: 32px; }

.record-module-shell {
    margin-bottom: 14px;
}
.record-module-header {
    min-height: 47px;
    padding: 12px 16px;
    gap: 13px;
}
.record-module-title { font-size: 15px; }
.record-module-subtitle,
.record-module-label { font-size: 12px; gap: 7px; }

.record-tab-bar,
.record-tabs,
.view-tabs,
.saved-view-tabs {
    min-height: 38px;
}
.record-tab,
.record-tabs__item,
.view-tab,
.saved-view-tab {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
}
.saved-view-tabs { margin-bottom: 14px; }

.record-summary-bar,
.kpi-strip {
    margin: -2px 0 14px;
}
.summary-item,
.kpi-card {
    min-height: 66px;
    padding: 11px 13px;
    gap: 10px;
}
.summary-icon,
.kpi-card__icon { width: 31px; height: 31px; }
.summary-value,
.kpi-card__value { font-size: 19px; }
.summary-label,
.kpi-card__label { font-size: 11px; }
.summary-sub-label,
.kpi-card__subline { font-size: 10px; }

.grid,
.two-col-grid,
.detail-grid,
.content-grid { gap: 14px; }
.grid-3 { gap: 14px; }
.panel,
.card,
.section-panel,
.detail-card {
    padding: 13px 15px;
}
.panel h2,
.panel-title,
.card-title,
.section-title,
.detail-card__header h2 {
    margin-bottom: 9px;
    font-size: 14px;
}
.detail-card__header,
.panel-header-inline {
    gap: 8px;
    margin-bottom: 8px;
}
.detail-card__icon,
.panel-icon { width: 26px; height: 26px; }

.data-table td,
.data-table th,
.field-table td,
.field-table th { padding: 5px 0; }
.data-table td:first-child,
.field-table td:first-child,
.field-label { padding-right: 10px; }
.field-row {
    gap: 11px;
    padding: 5px 0;
}

.list-table th,
.list-table td {
    padding: 11px 13px;
}
.list-table th { font-size: 10px; }
.action-cell { min-width: 170px; }
.action-stack { gap: 7px; }

.tab-toolbar {
    gap: 11px;
    margin-bottom: 12px;
    padding: 11px;
}
.row-action-button { min-height: 29px; }
.icon-lock-minimal { font-size: 13px; }

.pagination-bar {
    gap: 13px;
    padding: 11px 13px;
}
.pagination { gap: 6px; }
.pagination__button,
.page-button {
    min-width: 31px;
    height: 31px;
}

.modal-overlay { padding: 20px; }
.modal-dialog,
.modal-card {
    width: min(690px, calc(100vw - 40px));
    border-top-width: 4px;
}
.modal-header,
.modal-body,
.modal-footer { padding: 16px 20px; }
.modal-title { font-size: 22px; }
.modal-section-title { font-size: 16px; }
.modal-body { gap: 12px; }
.modal-field-row {
    grid-template-columns: 162px minmax(0, 1fr);
    gap: 11px;
    padding: 8px 0;
}
.modal-actions-right { gap: 8px; }
.modal-dialog.modal-dialog-compact { width: min(690px, calc(100vw - 40px)); }
.modal-body.modal-body-compact { gap: 8px; padding-top: 16px; padding-bottom: 16px; }
.modal-field-row.modal-field-row-compact { grid-template-columns: 198px minmax(0, 1fr); gap: 12px; padding: 7px 0; }

.option-list { gap: 8px; }
.option-row { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 7px 0; }
.option-meta { font-size: 11px; }
.checkbox-inline { gap: 7px; }
.panel.panel-compact,
.card.panel-compact,
.section-panel.panel-compact { padding: 12px 14px; }
.panel.panel-compact h2,
.card.panel-compact .card-title,
.section-panel.panel-compact .section-title { margin-bottom: 8px; }
.data-table.data-table-compact td,
.field-table.field-table-compact td { padding: 5px 0; }
.data-table.data-table-compact input,
.data-table.data-table-compact select,
.field-table.field-table-compact input,
.field-table.field-table-compact select { min-height: 31px; padding: 5px 8px; }
.data-table.data-table-compact textarea,
.field-table.field-table-compact textarea { min-height: 67px; }

.filter-page-title { font-size: 32px; margin-bottom: 7px; }
.filter-intro { margin-bottom: 20px; font-size: 14px; }
.filter-actions { gap: 10px; margin-bottom: 18px; }
.current-search { margin-bottom: 14px; }
.panel-header { padding: 13px 15px; }
.panel-header h2 { font-size: 16px; }
.panel-body { padding: 15px; }
.panel-intro { margin-bottom: 15px; }
.select-all-row { gap: 13px; margin-bottom: 13px; }
.two-col-list { gap: 10px 24px; }
.option { gap: 8px; }
.option-stack { gap: 8px; margin-top: 10px; }
.helper-box { margin-top: 14px; padding: 10px 12px; }
.field { gap: 7px; }
.age-grid, .sort-grid { gap: 10px; }
.age-grid { margin-bottom: 14px; }
.summary-grid { gap: 10px; }
.summary-card { padding: 10px 12px; }
.summary-card-label { font-size: 12px; margin-bottom: 5px; }

@media (max-width: 1366px) {
    .page-shell { padding-left: 14px; padding-right: 14px; }
    .app-nav__item { padding-left: 8px; padding-right: 8px; }
}


@media (max-width: 780px) {
    .tab-toolbar--compact .tab-toolbar__left--inline {
        flex-wrap: wrap;
        width: 100%;
    }

    .tab-toolbar--compact .search-control--notes,
    .tab-toolbar--compact .notes-toolbar__select--sort,
    .tab-toolbar--compact .notes-toolbar__select--direction {
        flex: 1 1 180px;
        width: auto;
    }
}

/* Fix: div 6 op tab Algemeen is Opmerkingen en mag niet verborgen worden. */
.companies-view-page #tab-general > .grid > .panel:nth-of-type(6) { display: block; }


/* ===== Users general tab explicit grid placement ===== */
.users-general-grid {
    align-items: stretch;
}

.users-general-grid > .panel {
    height: 100%;
}

.users-general-grid__placeholder {
    display: block;
    min-height: 0;
}

@media (min-width: 981px) {
    .users-general-grid__user { grid-column: 1; grid-row: 1; }
    .users-general-grid__placeholder { grid-column: 2; grid-row: 1; }
    .users-general-grid__account { grid-column: 1; grid-row: 2; }
    .users-general-grid__contact { grid-column: 2; grid-row: 2; }
    .users-general-grid__hashtags { grid-column: 1; grid-row: 3; }
    .users-general-grid__notes { grid-column: 2; grid-row: 3; }
}

@media (max-width: 980px) {
    .users-general-grid__placeholder {
        display: none;
    }

    .users-general-grid__user,
    .users-general-grid__placeholder,
    .users-general-grid__account,
    .users-general-grid__contact,
    .users-general-grid__hashtags,
    .users-general-grid__notes {
        grid-column: auto;
        grid-row: auto;
    }
}

/* ===== Normalisatie donkere module-/contextbalk en tabbalk =====
   Doel: index- en detailpagina's visueel gelijk trekken.
   De detail-header gebruikte eerder 15px; dit wordt gelijk aan de compactere index-header: 13px / 18px. */
.page-info-bar,
.record-module-header {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 13px;
    line-height: 18px;
}

.page-info-bar .breadcrumb,
.record-module-title .breadcrumb {
    font-size: 13px;
    line-height: 18px;
    font-weight: 900;
}

.record-module-title {
    font-size: 13px;
    line-height: 18px;
    font-weight: 900;
}

.record-module-subtitle,
.record-module-label {
    font-size: 12px;
    line-height: 18px;
}

.record-tab-bar,
.record-tabs,
.view-tabs,
.saved-view-tabs {
    min-height: 38px;
}

.record-tab,
.record-tabs__item,
.view-tab,
.saved-view-tab {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 800;
}

/* ===== Index-tabbar afgeronde onderhoeken =====
   Op indexpagina's staat .saved-view-tabs los onder .page-info-bar.
   Detailpagina's krijgen afgeronde hoeken via .record-module-shell.
   Deze normalisatie geeft indexpagina's dezelfde afgeronde rechter- en linkeronderhoek. */
.saved-view-tabs {
    border-radius: 0 0 var(--mf-radius-lg) var(--mf-radius-lg);
    overflow: hidden;
}

/* Zorg dat de donkere contextbalk en de groene viewtab-balk visueel één blok vormen. */
.page-info-bar:has(+ .saved-view-tabs) {
    border-radius: var(--mf-radius-lg) var(--mf-radius-lg) 0 0;
}


/* ===== Apps overview / modules/apps ===== */
.apps-shell { max-width: 1500px; margin: 0 auto; padding-top: 16px; }
.apps-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px; background: #ffffff; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); box-shadow: var(--mf-shadow-sm); }
.apps-filter-bar__categories { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.apps-category-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 14px; border: 1px solid var(--mf-border-input); border-radius: var(--mf-radius-md); background: #ffffff; color: var(--mf-text-strong); text-decoration: none; font-weight: 800; line-height: 1.2; box-shadow: var(--mf-shadow-sm); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.apps-category-button:hover { border-color: var(--mf-teal); background: var(--mf-surface); color: var(--mf-navy); }
.apps-category-button.is-active { border-color: var(--mf-teal); background: var(--mf-teal); color: #ffffff; }
.apps-search-form { margin: 0; display: flex; align-items: center; }
.apps-search-control { min-width: 320px; min-height: 38px; }
.apps-section { margin-bottom: 28px; }
.apps-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--mf-border); }
.apps-section__header h1 { margin: 0; color: var(--mf-text-strong); font-size: 16px; font-weight: 900; }
.apps-section__header p { margin: 5px 0 0; color: var(--mf-text-muted); font-size: 13px; }
.apps-section__header > span { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: var(--mf-radius-sm); background: var(--mf-surface-2); color: var(--mf-text-muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.app-card { position: relative; display: flex; min-height: 126px; flex-direction: column; padding: 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); background: #ffffff; color: var(--mf-text); text-decoration: none; box-shadow: var(--mf-shadow-sm); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.app-card:hover { transform: translateY(-1px); border-color: var(--mf-teal); box-shadow: var(--mf-shadow-md); }
.app-card__menu { position: absolute; top: 9px; right: 12px; color: var(--mf-text-subtle); font-size: 18px; line-height: 1; }
.app-card__head { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 13px; padding-right: 22px; }
.app-card__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; border-radius: var(--mf-radius-md); background: var(--mf-navy); color: #ffffff; font-size: 13px; font-weight: 900; letter-spacing: 0.01em; transition: background 0.15s ease; }
.app-card:hover .app-card__icon { background: var(--mf-teal); }
.app-card__title-block { min-width: 0; display: flex; flex-direction: column; }
.app-card__title { display: block; color: var(--mf-text-strong); font-size: 15px; font-weight: 900; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card__code { display: block; margin-top: 2px; color: var(--mf-text-subtle); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card__description { display: -webkit-box; overflow: hidden; color: var(--mf-text-muted); font-size: 13px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.app-card--compact { min-height: 112px; }
.apps-empty-state { padding: 42px 20px; border: 1px dashed var(--mf-border-input); border-radius: var(--mf-radius-lg); background: #ffffff; color: var(--mf-text-muted); text-align: center; box-shadow: var(--mf-shadow-sm); }
.module-placeholder-panel { margin-top: 16px; }
@media (max-width: 900px) { .apps-filter-bar { align-items: stretch; } .apps-search-form, .apps-search-control { width: 100%; min-width: 0; } .apps-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }


/* Apps icon badges - dark block with calm white local SVG icons */
.app-card__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mf-radius-md);
    background: var(--mf-navy, #082f3f);
    border: 1px solid rgba(8, 47, 63, 0.18);
    box-shadow: 0 2px 6px rgba(8, 47, 63, 0.18);
    color: #ffffff;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-card:hover .app-card__icon {
    background: var(--mf-teal, #159c8a);
    border-color: var(--mf-teal, #159c8a);
    box-shadow: 0 3px 9px rgba(21, 156, 138, 0.22);
}
.app-card__icon-image {
    display: block;
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
}

/* ===== People filter page redesign ===== */
.people-filter-page .page-shell {
    padding: 14px 20px 28px;
}

.people-filter-page .page-action-bar--filter {
    margin-bottom: 14px;
}

.people-filter-page .page-info-bar--standalone {
    border-radius: var(--mf-radius-lg);
    margin-bottom: 14px;
}

.people-filter-page .filter-page-content {
    margin-top: 0;
}

.people-filter-page .filter-grid {
    gap: 14px;
    align-items: stretch;
}

.people-filter-page .filter-card {
    overflow: hidden;
    min-height: 0;
}

.people-filter-page .filter-card .panel-header {
    padding: 17px 18px 0;
    border-bottom: 0;
}

.people-filter-page .filter-card .panel-header h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
}

.people-filter-page .filter-card .panel-body {
    padding: 13px 18px 18px;
}

.people-filter-page .panel-intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mf-text-muted);
}

.people-filter-page .select-all-row {
    align-items: flex-start;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
}

.people-filter-page .link-button {
    color: var(--mf-text-muted);
    font-size: 13px;
}

.people-filter-page .option {
    min-height: 22px;
    font-size: 13px;
}

.people-filter-page .option input[type="checkbox"],
.people-filter-page .option input[type="radio"] {
    flex: 0 0 auto;
}

.people-filter-page .helper-box {
    background: var(--mf-surface);
    border-color: var(--mf-border);
    color: var(--mf-text-muted);
    font-size: 13px;
}

.people-filter-page .age-grid,
.people-filter-page .sort-grid {
    margin-top: 0;
}

.people-filter-page .summary-panel {
    grid-column: 1 / -1;
}

.people-filter-page .summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.people-filter-page .summary-card {
    background: var(--mf-surface);
    border-color: var(--mf-border);
}

@media (max-width: 900px) {
    .people-filter-page .page-shell {
        padding: 12px 12px 22px;
    }

    .people-filter-page .filter-grid,
    .people-filter-page .two-col-list,
    .people-filter-page .age-grid,
    .people-filter-page .sort-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MijnFlexurance - standaard filterpagina layout
   Te gebruiken voor People, Companies en toekomstige modules.
   ========================================================= */

.filter-page-shell {
    padding: 16px 20px 32px;
}

.filter-page-form {
    margin: 0;
}

.filter-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--mf-color-border, #d6e2ea);
    border-radius: var(--mf-radius-lg, 10px);
    box-shadow: 0 1px 4px rgba(8, 47, 63, 0.08);
}

.filter-action-bar__left,
.filter-action-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-context-bar {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-bottom: 14px;
    padding: 0 16px;
    background: var(--mf-color-header, #082f3f);
    color: #ffffff;
    border-radius: var(--mf-radius-lg, 10px);
    box-shadow: 0 1px 4px rgba(8, 47, 63, 0.12);
}

.filter-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.filter-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.filter-breadcrumb a:hover {
    text-decoration: underline;
}

.filter-breadcrumb span {
    color: rgba(255, 255, 255, 0.65);
}

.filter-breadcrumb strong {
    color: #ffffff;
    font-weight: 800;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.filter-card {
    min-width: 0;
    padding: 22px 26px;
    background: #ffffff;
    border: 1px solid var(--mf-color-border, #d6e2ea);
    border-radius: var(--mf-radius-lg, 10px);
    box-shadow: 0 1px 4px rgba(8, 47, 63, 0.08);
}

.filter-card--full {
    grid-column: 1 / -1;
}

.filter-card--span-2 {
    grid-column: auto;
}

.filter-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3edf3;
}

.filter-card__header h2 {
    margin: 0;
    color: #082f3f;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}

.filter-card__header p {
    margin: 8px 0 0;
    color: #52677b;
    font-size: 14px;
    line-height: 1.45;
}

.filter-card__links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: #6d8194;
    font-size: 13px;
}

.filter-text-link {
    appearance: none;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: #52677b;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.filter-text-link:hover {
    color: var(--mf-color-primary, #159c8a);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.filter-field label {
    color: #082f3f;
    font-size: 13px;
    font-weight: 800;
}

.filter-field input,
.filter-field select {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    background: #ffffff;
    border: 1px solid #c8d8e3;
    border-radius: 8px;
    color: #0f2d3a;
    font-size: 14px;
    line-height: 1.3;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.filter-field input:focus,
.filter-field select:focus {
    border-color: var(--mf-color-primary, #159c8a);
    box-shadow: 0 0 0 3px rgba(21, 156, 138, 0.12);
}

.filter-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.filter-input-grid .filter-field:last-child {
    grid-column: 1 / -1;
}

.filter-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.filter-radio-group {
    margin: 0;
    padding: 0;
    border: 0;
}

.filter-radio-group legend {
    margin-bottom: 10px;
    color: #082f3f;
    font-size: 13px;
    font-weight: 800;
}

.filter-radio,
.filter-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 27px;
    color: #183345;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}

.filter-radio input,
.filter-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--mf-color-primary, #159c8a);
}

.filter-checkbox-grid {
    display: grid;
    gap: 8px 22px;
}

.filter-checkbox-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filter-note {
    margin-top: 18px;
    padding: 12px 14px;
    background: #f7fafc;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    color: #52677b;
    font-size: 13px;
    line-height: 1.45;
}

.filter-summary-box {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 14px;
    background: #f7fafc;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    color: #52677b;
}

.filter-summary-box strong {
    display: block;
    margin-bottom: 4px;
    color: #082f3f;
    font-size: 14px;
    font-weight: 800;
}

.filter-summary-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.filter-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: #52677b;
    background: #ffffff;
    border: 1px solid #d4e2ec;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-card--span-2,
    .filter-card--full {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .filter-page-shell {
        padding: 12px;
    }

    .filter-action-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-action-bar__left,
    .filter-action-bar__right {
        justify-content: flex-start;
    }

    .filter-two-columns,
    .filter-input-grid,
    .filter-checkbox-grid--two {
        grid-template-columns: 1fr;
    }

    .filter-card {
        padding: 18px;
    }

    .filter-card__header {
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   MijnFlexurance - standaard filterpagina + typografie
   Geldt voor Companies, People, Users en toekomstige modules.
   Doel: één fontgrootte, één kaartstijl en één paginavolgorde.
   ========================================================= */
.companies-filter-page .filter-page-shell,
.people-filter-page .filter-page-shell,
.people-filter-page .page-shell,
.users-filter-page .filter-page-shell,
.users-filter-page .page-shell {
    padding: 16px 20px 32px;
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-normal, 1.45);
}

.filter-page-form {
    margin: 0;
}

.filter-action-bar,
.people-filter-page .page-action-bar--filter,
.users-filter-page .page-action-bar--filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--mf-border, #d8e2e7);
    border-radius: var(--mf-radius-lg, 12px);
    box-shadow: var(--mf-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
}

.filter-action-bar__left,
.filter-action-bar__right,
.people-filter-page .page-action-bar-left,
.people-filter-page .page-action-bar-right,
.users-filter-page .page-action-bar-left,
.users-filter-page .page-action-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-action-bar__right,
.people-filter-page .page-action-bar-right,
.users-filter-page .page-action-bar-right {
    margin-left: auto;
    justify-content: flex-end;
}

.filter-context-bar,
.people-filter-page .page-info-bar--standalone,
.users-filter-page .page-info-bar--standalone {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 14px;
    padding: 11px 16px;
    background: var(--mf-navy, #082d3f);
    color: #ffffff;
    border-radius: var(--mf-radius-lg, 12px);
    box-shadow: var(--mf-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
}

.filter-breadcrumb,
.people-filter-page .page-info-bar--standalone .breadcrumb,
.users-filter-page .page-info-bar--standalone .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #ffffff;
    font-size: var(--mf-font-size-md, 13px);
    line-height: 18px;
    font-weight: 900;
}

.filter-breadcrumb a,
.people-filter-page .page-info-bar--standalone .breadcrumb a,
.users-filter-page .page-info-bar--standalone .breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
}

.filter-breadcrumb a:hover,
.people-filter-page .page-info-bar--standalone .breadcrumb a:hover,
.users-filter-page .page-info-bar--standalone .breadcrumb a:hover {
    text-decoration: underline;
}

.filter-breadcrumb span,
.people-filter-page .page-info-bar--standalone .breadcrumb-separator,
.users-filter-page .page-info-bar--standalone .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.62);
}

.filter-breadcrumb strong,
.people-filter-page .page-info-bar--standalone .breadcrumb-current,
.users-filter-page .page-info-bar--standalone .breadcrumb-current {
    color: #ffffff;
    font-weight: 900;
}

.filter-page-content,
.people-filter-page .filter-page-content,
.users-filter-page .filter-page-content {
    margin-top: 0;
}

.filter-grid,
.people-filter-page .filter-grid,
.users-filter-page .filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.filter-card,
.people-filter-page .filter-card,
.users-filter-page .filter-card {
    min-width: 0;
    min-height: 0;
    padding: 22px 26px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--mf-border, #d8e2e7);
    border-radius: var(--mf-radius-lg, 12px);
    box-shadow: var(--mf-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
    font-size: var(--mf-font-size-md, 13px);
}

.filter-card--full,
.summary-panel.filter-card,
.people-filter-page .summary-panel,
.users-filter-page .summary-panel {
    grid-column: 1 / -1;
}

.filter-card--span-2 {
    grid-column: auto;
}

.filter-card__header,
.filter-card .panel-header,
.people-filter-page .filter-card .panel-header,
.users-filter-page .filter-card .panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--mf-border-soft, #e8eef2);
}

.filter-card__header h2,
.filter-card .panel-header h2,
.people-filter-page .filter-card .panel-header h2,
.users-filter-page .filter-card .panel-header h2 {
    margin: 0;
    color: var(--mf-text-strong, #173447);
    font-size: var(--mf-font-size-lg, 16px);
    line-height: var(--mf-line-height-tight, 1.25);
    font-weight: 800;
}

.filter-card__header p,
.filter-card .panel-intro,
.panel-intro {
    margin: 8px 0 0;
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-normal, 1.45);
    font-weight: 400;
}

.filter-card .panel-body,
.people-filter-page .filter-card .panel-body,
.users-filter-page .filter-card .panel-body {
    padding: 0;
    font-size: var(--mf-font-size-md, 13px);
}

.filter-card__links,
.select-all-row,
.people-filter-page .select-all-row,
.users-filter-page .select-all-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-normal, 1.45);
}

.filter-card__links {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-top: 2px;
}

.filter-text-link,
.link-button,
.people-filter-page .link-button,
.users-filter-page .link-button {
    appearance: none;
    min-height: auto;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--mf-text-muted, #64748b);
    font: inherit;
    font-size: var(--mf-font-size-md, 13px);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.filter-text-link:hover,
.link-button:hover,
.people-filter-page .link-button:hover,
.users-filter-page .link-button:hover {
    background: transparent;
    border-color: transparent;
    color: var(--mf-primary, #149988);
}

.filter-field,
.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.filter-field label,
.field label,
.filter-radio-group legend,
.filter-section-label {
    margin: 0 0 10px;
    color: var(--mf-text-strong, #173447);
    font-size: var(--mf-font-size-md, 13px);
    font-weight: 800;
}

.filter-field input,
.filter-field select,
.field input,
.field select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid var(--mf-border-input, #cbd7df);
    border-radius: var(--mf-radius-md, 8px);
    color: var(--mf-text, #263d45);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 1.3;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.filter-field input:focus,
.filter-field select:focus,
.field input:focus,
.field select:focus {
    border-color: var(--mf-primary, #149988);
    box-shadow: 0 0 0 3px rgba(20, 153, 136, 0.12);
}

.filter-input-grid,
.sort-grid,
.age-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.filter-input-grid .filter-field:last-child {
    grid-column: 1 / -1;
}

.filter-two-columns,
.two-col-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.filter-radio-group {
    margin: 0;
    padding: 0;
    border: 0;
}

.option-stack {
    display: grid;
    gap: 9px;
    margin-top: 0;
}

.filter-radio,
.filter-check,
.option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 27px;
    color: var(--mf-text, #263d45);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 1.35;
    font-weight: 600;
    cursor: pointer;
}

.filter-radio input,
.filter-check input,
.option input[type="checkbox"],
.option input[type="radio"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--mf-primary, #149988);
}

.filter-checkbox-grid {
    display: grid;
    gap: 8px 22px;
}

.filter-checkbox-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filter-note,
.helper-box {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--mf-surface, #f8fafc);
    border: 1px solid var(--mf-border-soft, #e8eef2);
    border-radius: var(--mf-radius-md, 8px);
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-normal, 1.45);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.summary-card {
    border: 1px solid var(--mf-border-soft, #e8eef2);
    border-radius: var(--mf-radius-md, 8px);
    background: var(--mf-surface, #f8fafc);
    padding: 12px 14px;
}

.summary-card-label {
    display: block;
    margin-bottom: 6px;
    color: var(--mf-text-subtle, #8a9aa5);
    font-size: var(--mf-font-size-sm, 12px);
    font-weight: 700;
}

.summary-card-value {
    color: var(--mf-text, #263d45);
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-normal, 1.45);
    font-weight: 700;
}

.filter-summary-box {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 14px;
    background: var(--mf-surface, #f8fafc);
    border: 1px solid var(--mf-border-soft, #e8eef2);
    border-radius: var(--mf-radius-md, 8px);
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-md, 13px);
}

.filter-summary-box strong {
    display: block;
    margin-bottom: 4px;
    color: var(--mf-text-strong, #173447);
    font-size: var(--mf-font-size-md, 13px);
    font-weight: 800;
}

.filter-summary-box p {
    margin: 0;
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-normal, 1.45);
}

.filter-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: var(--mf-text-muted, #64748b);
    background: #ffffff;
    border: 1px solid var(--mf-border, #d8e2e7);
    border-radius: 999px;
    font-size: var(--mf-font-size-lg, 16px);
    font-weight: 800;
}

.filter-action-bar .button,
.filter-action-bar .button-link,
.filter-action-bar button,
.people-filter-page .page-action-bar--filter .button,
.people-filter-page .page-action-bar--filter .button-link,
.people-filter-page .page-action-bar--filter button,
.users-filter-page .page-action-bar--filter .button,
.users-filter-page .page-action-bar--filter .button-link,
.users-filter-page .page-action-bar--filter button {
    font-size: var(--mf-font-size-md, 13px);
}

@media (max-width: 1180px) {
    .filter-grid,
    .people-filter-page .filter-grid,
    .users-filter-page .filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-card--span-2,
    .filter-card--full,
    .summary-panel.filter-card {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .companies-filter-page .filter-page-shell,
    .people-filter-page .filter-page-shell,
    .people-filter-page .page-shell,
    .users-filter-page .filter-page-shell,
    .users-filter-page .page-shell {
        padding: 12px;
    }

    .filter-action-bar,
    .people-filter-page .page-action-bar--filter,
    .users-filter-page .page-action-bar--filter {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-action-bar__left,
    .filter-action-bar__right,
    .people-filter-page .page-action-bar-left,
    .people-filter-page .page-action-bar-right,
    .users-filter-page .page-action-bar-left,
    .users-filter-page .page-action-bar-right {
        justify-content: flex-start;
        width: 100%;
    }

    .filter-two-columns,
    .filter-input-grid,
    .filter-checkbox-grid--two,
    .two-col-list,
    .sort-grid,
    .age-grid {
        grid-template-columns: 1fr;
    }

    .filter-card,
    .people-filter-page .filter-card,
    .users-filter-page .filter-card {
        padding: 18px;
    }

    .filter-card__header,
    .filter-card .panel-header {
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   MijnFlexurance - definitieve uniforme filter checkbox/radio spacing
   Doel: dezelfde verticale afstand en fontweergave in Companies, People, Users
   en toekomstige filterpagina's. Dit blok staat bewust onderaan en overschrijft
   oudere module-specifieke filterregels.
   ========================================================= */

.companies-filter-page .filter-checkbox-grid,
.people-filter-page .filter-checkbox-grid,
.users-filter-page .filter-checkbox-grid,
.companies-filter-page .two-col-list,
.people-filter-page .two-col-list,
.users-filter-page .two-col-list {
    display: grid;
    row-gap: 12px;
    column-gap: 28px;
}

.companies-filter-page .filter-checkbox-grid--two,
.people-filter-page .filter-checkbox-grid--two,
.users-filter-page .filter-checkbox-grid--two,
.companies-filter-page .two-col-list,
.people-filter-page .two-col-list,
.users-filter-page .two-col-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.companies-filter-page .option-stack,
.people-filter-page .option-stack,
.users-filter-page .option-stack {
    display: grid;
    row-gap: 12px;
    margin-top: 10px;
}

.companies-filter-page .filter-check,
.people-filter-page .filter-check,
.users-filter-page .filter-check,
.companies-filter-page .filter-radio,
.people-filter-page .filter-radio,
.users-filter-page .filter-radio,
.companies-filter-page .option,
.people-filter-page .option,
.users-filter-page .option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    margin: 0;
    color: var(--mf-text, #263d45);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 1.35;
    font-weight: 700;
    cursor: pointer;
}

.companies-filter-page .filter-check input,
.people-filter-page .filter-check input,
.users-filter-page .filter-check input,
.companies-filter-page .filter-radio input,
.people-filter-page .filter-radio input,
.users-filter-page .filter-radio input,
.companies-filter-page .option input[type="checkbox"],
.people-filter-page .option input[type="checkbox"],
.users-filter-page .option input[type="checkbox"],
.companies-filter-page .option input[type="radio"],
.people-filter-page .option input[type="radio"],
.users-filter-page .option input[type="radio"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--mf-primary, var(--mf-teal, #159c8a));
}

@media (max-width: 760px) {
    .companies-filter-page .filter-checkbox-grid--two,
    .people-filter-page .filter-checkbox-grid--two,
    .users-filter-page .filter-checkbox-grid--two,
    .companies-filter-page .two-col-list,
    .people-filter-page .two-col-list,
    .users-filter-page .two-col-list {
        grid-template-columns: 1fr;
    }
}

/* ===== Roles module standard tabs/general grid ===== */
.roles-general-grid {
    align-items: stretch;
}

.roles-general-grid > .panel {
    height: 100%;
}

.roles-general-grid__placeholder {
    visibility: hidden;
    display: block;
    min-height: 0;
}

@media (min-width: 981px) {
    .roles-general-grid__role { grid-column: 1; grid-row: 1; }
    .roles-general-grid__placeholder { grid-column: 2; grid-row: 1; }
    .roles-general-grid__hashtags { grid-column: 1; grid-row: 2; }
    .roles-general-grid__notes { grid-column: 2; grid-row: 2; }
}

@media (max-width: 980px) {
    .roles-general-grid__placeholder {
        display: none;
    }

    .roles-general-grid__role,
    .roles-general-grid__placeholder,
    .roles-general-grid__hashtags,
    .roles-general-grid__notes {
        grid-column: auto;
        grid-row: auto;
    }
}


/* ===== Contacts module ===== */
.tab-toolbar__title {
    margin: 0;
    color: var(--mf-text-strong);
    font-size: var(--mf-font-size-lg, 16px);
    font-weight: 900;
}

.contacts-general-grid {
    align-items: stretch;
}

.contacts-general-grid > .panel {
    height: 100%;
}

@media (min-width: 981px) {
    .contacts-general-grid__contact { grid-column: 1; grid-row: 1; }
    .contacts-general-grid__placeholder { grid-column: 2; grid-row: 1; }
    .contacts-general-grid__function { grid-column: 1; grid-row: 2; }
    .contacts-general-grid__contactinfo { grid-column: 2; grid-row: 2; }
    .contacts-general-grid__hashtags { grid-column: 1; grid-row: 3; }
    .contacts-general-grid__notes { grid-column: 2; grid-row: 3; }
}

@media (max-width: 980px) {
    .contacts-general-grid__placeholder { display: none; }
    .contacts-general-grid__contact,
    .contacts-general-grid__placeholder,
    .contacts-general-grid__function,
    .contacts-general-grid__contactinfo,
    .contacts-general-grid__hashtags,
    .contacts-general-grid__notes {
        grid-column: auto;
        grid-row: auto;
    }
}

/* =========================================================
   MijnFlexurance - definitieve module typografie normalisatie
   Doel: view/edit/index/filter/modals gebruiken dezelfde fontschaal.
   Dit blok staat bewust onderaan en overschrijft oudere density- en
   module-specifieke regels.
   ========================================================= */

.page-shell,
.page-content,
.record-module-shell,
.panel,
.card,
.section-panel,
.detail-card,
.table-wrapper,
.data-card,
.list-card,
.modal-dialog,
.modal-card {
    font-family: var(--mf-font-family, Arial, Helvetica, sans-serif);
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-normal, 1.45);
}

/* Koppen in kaarten/divs */
.panel h2,
.panel-title,
.card-title,
.section-title,
.detail-card__header h2,
.filter-card__header h2,
.filter-card .panel-header h2,
.tab-toolbar__title {
    margin-top: 0;
    color: var(--mf-text-strong, #082f3f);
    font-size: var(--mf-font-size-lg, 16px);
    line-height: var(--mf-line-height-tight, 1.25);
    font-weight: 800;
}

/* Detailregels in view/edit: labels en waarden blijven compact en gelijk. */
.data-table,
.field-table,
.field-list {
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-compact, 1.35);
}

.data-table td,
.data-table th,
.field-table td,
.field-table th {
    font-size: var(--mf-font-size-md, 13px);
    line-height: 18px;
}

.data-table td:first-child,
.field-table td:first-child,
.field-label,
.field-row dt,
.modal-label,
.field label,
.filter-field label,
.filter-radio-group legend {
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 18px;
    font-weight: 700;
}

.data-table td:last-child,
.field-table td:last-child,
.field-value,
.field-row dd {
    color: var(--mf-text, #263d45);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 18px;
    font-weight: 700;
}

/* Forms binnen edit/create/modals: nooit terugvallen op browserdefaults. */
.data-table input,
.data-table select,
.data-table textarea,
.field-table input,
.field-table select,
.field-table textarea,
.modal-input,
.modal-select,
.modal-textarea,
.filter-field input,
.filter-field select,
.search-control input,
.search-control__input {
    font-family: var(--mf-font-family, Arial, Helvetica, sans-serif);
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-compact, 1.35);
    font-weight: 700;
}

/* Lijsten/tabellen */
.list-table,
.pagination-bar {
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-compact, 1.35);
}

.list-table td {
    color: var(--mf-text, #263d45);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 18px;
    font-weight: 700;
}

.list-table th {
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-xs, 11px);
    line-height: 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Header, breadcrumbs, tabbar en knoppen */
.app-nav__item,
.page-info-bar,
.page-info-bar .breadcrumb,
.record-module-title,
.record-module-title .breadcrumb,
.record-module-subtitle,
.record-module-label,
.record-tab,
.record-tabs__item,
.view-tab,
.saved-view-tab,
.button,
.button-link,
.filter-text-link,
.link-button {
    font-family: var(--mf-font-family, Arial, Helvetica, sans-serif);
}

.page-info-bar,
.page-info-bar .breadcrumb,
.record-module-title,
.record-module-title .breadcrumb {
    font-size: var(--mf-font-size-md, 13px);
    line-height: 18px;
    font-weight: 900;
}

.record-tab,
.record-tabs__item,
.view-tab,
.saved-view-tab {
    font-size: var(--mf-font-size-sm, 12px);
    line-height: 18px;
    font-weight: 800;
}

.button,
.button-link,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-family: var(--mf-font-family, Arial, Helvetica, sans-serif);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 1.2;
    font-weight: 800;
}

/* Filterpagina's: alle modules exact dezelfde schaal en spacing. */
.filter-page-shell,
.filter-page-content,
.filter-card,
.filter-card .panel-body {
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-normal, 1.45);
}

.filter-card__header p,
.filter-card .panel-intro,
.panel-intro,
.filter-note,
.helper-box,
.filter-summary-box,
.summary-card,
.summary-card-label,
.summary-card-value {
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-normal, 1.45);
}

.filter-check,
.filter-radio,
.option {
    font-size: var(--mf-font-size-md, 13px);
    line-height: 18px;
    font-weight: 700;
}


/* ===== Settings module layout refinements =====
   Settings gebruikt geen indexlijst maar een directe view/edit met tabs.
   De lege positie op tab Algemeen moet bewust ruimte reserveren zodat
   Bezoekadres/Contact en Hashtags/Opmerkingen exact in twee kolommen blijven.
*/
.settings-page .settings-general-grid > .panel-empty-slot {
    display: block;
    visibility: hidden;
    min-height: 0;
    box-shadow: none;
}

.settings-page .settings-mail-grid,
.settings-page .settings-other-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.settings-page .settings-mail-grid > .panel,
.settings-page .settings-other-grid > .panel {
    grid-column: auto;
}

@media (max-width: 920px) {
    .settings-page .settings-general-grid > .panel-empty-slot {
        display: none;
    }

    .settings-page .settings-mail-grid,
    .settings-page .settings-other-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MijnFlexurance - generieke bestandenlijst
   ========================================================= */
.files-toolbar .search-control--files {
    min-width: 260px;
}

.row-action-link {
    color: var(--mf-color-header, #082f3f);
    font-weight: 800;
    text-decoration: none;
}

.row-action-link:hover {
    text-decoration: underline;
}

.row-action-button-danger {
    color: var(--mf-color-danger, #d33f3f);
}


.file-detail-hint {
    margin-top: 6px;
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-sm, 12px);
    font-weight: 700;
}

.modal-actions-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#file-detail-modal .file-detail-readonly-row div {
    color: var(--mf-text, #183345);
    font-weight: 800;
}



/* =========================================================
   MijnFlexurance - bestandenmodal: dynamische knoppen en file picker
   ========================================================= */

[hidden],
.is-hidden {
    display: none !important;
}

.mf-file-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mf-file-picker__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mf-file-picker__button {
    flex: 0 0 auto;
    cursor: pointer;
}

.mf-file-picker__input:focus + .mf-file-picker__button,
.mf-file-picker__button:focus {
    outline: 2px solid var(--mf-color-primary, #159c8a);
    outline-offset: 2px;
}

.mf-file-picker__name {
    min-width: 0;
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-md, 13px);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#file-detail-modal.is-editing .file-detail-readonly-row {
    display: none !important;
}

#file-detail-modal.is-editing #file-detail-edit-button,
#file-detail-modal.is-editing #file-detail-archive-button,
#file-detail-modal.is-editing #close-file-detail-modal {
    display: none !important;
}

#file-detail-modal:not(.is-editing) #file-detail-cancel-edit-button,
#file-detail-modal:not(.is-editing) #file-detail-save-button,
#file-detail-modal:not(.is-editing) .file-detail-upload-row {
    display: none !important;
}

/* =========================================================
   MijnFlexurance - Companies tabbar met vijf tabs op één rij
   Bedrijven heeft nu vijf recordtabs: Algemeen, Notities,
   Bestanden, Contactpersonen en Overige. Op desktop moeten
   deze naast elkaar blijven staan; op small screens blijft de
   bestaande responsive wrapping actief.
   ========================================================= */
@media (min-width: 901px) {
    .companies-view-page .record-tab-bar,
    .companies-edit-page .record-tab-bar {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .companies-view-page .record-tab,
    .companies-edit-page .record-tab {
        min-width: 0;
        white-space: nowrap;
    }
}

/* =========================================================
   MijnFlexurance - Referentietabellen
   ========================================================= */
.reference-table-catalog {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 14px;
}
.reference-table-card {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 16px;
    color: var(--mf-text, #183345);
    text-decoration: none;
    background: #ffffff;
    border: 1px solid var(--mf-color-border, #d6e2ea);
    border-radius: var(--mf-radius-lg, 10px);
    box-shadow: 0 1px 4px rgba(8, 47, 63, 0.08);
}
.reference-table-card:hover {
    border-color: var(--mf-color-primary, #159c8a);
    box-shadow: 0 3px 10px rgba(8, 47, 63, 0.12);
}
.reference-table-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.reference-table-card__header h2 {
    margin: 0 0 3px;
    color: var(--mf-text-strong, #082f3f);
    font-size: 16px;
    font-weight: 900;
}
.reference-table-card__header span,
.reference-table-card p,
.reference-table-card__footer {
    color: var(--mf-text-muted, #64748b);
    font-size: 13px;
    line-height: 1.45;
}
.reference-table-card__header strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: #edf8f6;
    color: var(--mf-color-primary, #159c8a);
    font-weight: 900;
}
.reference-table-card p { margin: 0 0 14px; }
.reference-table-card__footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e3edf3;
    font-weight: 800;
}
.reference-tabs--two { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
.reference-tabs--three { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
.form-field-table input[type="text"],
.form-field-table input[type="number"],
.form-field-table textarea,
.form-field-table select {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--mf-border-input, #c8d8e3);
    border-radius: 8px;
    background: #ffffff;
    color: var(--mf-text, #183345);
    font: inherit;
    font-weight: 700;
}
.form-field-table textarea {
    resize: vertical;
    min-height: 96px;
}
.check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}
.rt-module-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 10px 18px;
}
.rt-module-checkbox-grid--one { grid-template-columns: 1fr; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: #f7fafc; }
@media (max-width: 1180px) {
    .reference-table-catalog { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 760px) {
    .reference-table-catalog,
    .rt-module-checkbox-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   Reference tables - action buttons and form controls
   ========================================================= */
.reference-tables-page .page-action-bar .btn,
.reference-tables-page .page-action-bar a.btn,
.reference-tables-page .page-action-bar button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.reference-tables-page .page-action-bar .btn:hover,
.reference-tables-page .page-action-bar a.btn:hover {
    text-decoration: none;
}

.reference-tables-page .form-field-table select {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    background: #ffffff;
    border: 1px solid #c8d8e3;
    border-radius: 8px;
    color: #0f2d3a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    outline: none;
}

.reference-tables-page .form-field-table select:focus {
    border-color: var(--mf-color-primary, #159c8a);
    box-shadow: 0 0 0 3px rgba(21, 156, 138, 0.12);
}


/* =========================================================
   MijnFlexurance - gridcorrectie Bedrijven en Contactpersonen
   Doel: postadres naar tab Algemeen en lege gridposities zonder zichtbare kaart.
   ========================================================= */
.companies-general-grid,
.contacts-general-grid {
    align-items: stretch;
}

.companies-general-grid > .panel,
.contacts-general-grid > .panel {
    height: 100%;
}

@media (min-width: 981px) {
    .companies-general-grid__company { grid-column: 1; grid-row: 1; }
    .companies-general-grid__contact { grid-column: 2; grid-row: 1; }
    .companies-general-grid__relation { grid-column: 1; grid-row: 2; }
    .companies-general-grid__placeholder {
        display: block;
        visibility: hidden;
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .companies-general-grid__visit-address { grid-column: 1; grid-row: 3; }
    .companies-general-grid__postal-address { grid-column: 2; grid-row: 3; }
    .companies-general-grid__hashtags { grid-column: 1; grid-row: 4; }
    .companies-general-grid__notes { grid-column: 2; grid-row: 4; }

    .contacts-general-grid__contact { grid-column: 1; grid-row: 1; }
    .contacts-general-grid__contactinfo { grid-column: 2; grid-row: 1; }
    .contacts-general-grid__function { grid-column: 1; grid-row: 2; }
    .contacts-general-grid__placeholder {
        display: none;
        grid-column: 2;
        grid-row: 2;
    }
    .contacts-general-grid__hashtags { grid-column: 1; grid-row: 3; }
    .contacts-general-grid__notes { grid-column: 2; grid-row: 3; }
}

@media (max-width: 980px) {
    .companies-general-grid__placeholder,
    .contacts-general-grid__placeholder {
        display: none;
    }

    .companies-general-grid__company,
    .companies-general-grid__contact,
    .companies-general-grid__relation,
    .companies-general-grid__placeholder,
    .companies-general-grid__visit-address,
    .companies-general-grid__postal-address,
    .companies-general-grid__hashtags,
    .companies-general-grid__notes,
    .contacts-general-grid__contact,
    .contacts-general-grid__contactinfo,
    .contacts-general-grid__function,
    .contacts-general-grid__placeholder,
    .contacts-general-grid__hashtags,
    .contacts-general-grid__notes {
        grid-column: auto;
        grid-row: auto;
    }
}

/* =========================================================
   MijnFlexurance - gridcorrectie Personen tab Algemeen
   Doel: vaste gridposities behouden na algemene layoutwijzigingen.
   Rij 1: Persoon / Contact
   Rij 2: Beschikbaarheid / lege positie zonder zichtbare kaart
   Rij 3: Woonadres / Identiteit
   Rij 4: Hashtags / Opmerkingen
   ========================================================= */
.people-general-grid {
    align-items: stretch;
}

.people-general-grid > .panel {
    height: 100%;
}

@media (min-width: 981px) {
    .people-general-grid__person { grid-column: 1; grid-row: 1; }
    .people-general-grid__contact { grid-column: 2; grid-row: 1; }
    .people-general-grid__availability { grid-column: 1; grid-row: 2; }
    .people-general-grid__placeholder {
        display: block;
        visibility: hidden;
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .people-general-grid__address { grid-column: 1; grid-row: 3; }
    .people-general-grid__identity { grid-column: 2; grid-row: 3; }
    .people-general-grid__hashtags { grid-column: 1; grid-row: 4; }
    .people-general-grid__remarks { grid-column: 2; grid-row: 4; }
}

@media (max-width: 980px) {
    .people-general-grid__placeholder { display: none; }
    .people-general-grid__person,
    .people-general-grid__contact,
    .people-general-grid__availability,
    .people-general-grid__placeholder,
    .people-general-grid__address,
    .people-general-grid__identity,
    .people-general-grid__hashtags,
    .people-general-grid__remarks {
        grid-column: auto;
        grid-row: auto;
    }
}


/* =========================================================
   MijnFlexurance - Module Administraties
   Grid tab Algemeen + Financieel/Fiscaal.
   ========================================================= */
.administrations-general-grid,
.administrations-financial-grid {
    align-items: stretch;
}

.administrations-general-grid > .panel,
.administrations-financial-grid > .panel {
    height: 100%;
}

@media (min-width: 981px) {
    .administrations-general-grid__administration { grid-column: 1; grid-row: 1; }
    .administrations-general-grid__contact { grid-column: 2; grid-row: 1; }
    .administrations-general-grid__visit-address { grid-column: 1; grid-row: 2; }
    .administrations-general-grid__postal-address { grid-column: 2; grid-row: 2; }
    .administrations-general-grid__hashtags { grid-column: 1; grid-row: 3; }
    .administrations-general-grid__notes { grid-column: 2; grid-row: 3; }

    .administrations-financial-grid__bank-rc { grid-column: 1; grid-row: 1; }
    .administrations-financial-grid__bank-g { grid-column: 2; grid-row: 1; }
    .administrations-financial-grid__fiscal { grid-column: 1; grid-row: 2; }
    .administrations-financial-grid__pension { grid-column: 2; grid-row: 2; }
    .administrations-financial-grid__placeholder {
        display: block;
        visibility: hidden;
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}

@media (min-width: 1100px) {
    .administrations-view-page .record-tab-bar {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .administrations-edit-page .record-tab-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .administrations-financial-grid__placeholder { display: none; }
    .administrations-general-grid__administration,
    .administrations-general-grid__contact,
    .administrations-general-grid__visit-address,
    .administrations-general-grid__postal-address,
    .administrations-general-grid__hashtags,
    .administrations-general-grid__notes,
    .administrations-financial-grid__bank-rc,
    .administrations-financial-grid__bank-g,
    .administrations-financial-grid__fiscal,
    .administrations-financial-grid__pension,
    .administrations-financial-grid__placeholder {
        grid-column: auto;
        grid-row: auto;
    }
}

/* =========================================================
   MijnFlexurance - Module Administraties index fix v5
   Doel: indexpagina exact laten aansluiten op standaardmoduleflow
   zoals Bedrijven/Personen: toolbar bovenaan, daarna contextbalk,
   saved-view-tabs en een list-table in table-wrapper.
   ========================================================= */
.administrations-index-page .page-action-bar-left input[type="text"] {
    width: 240px;
    max-width: 240px;
    flex: 0 0 240px;
}

.administrations-index-page .page-action-bar-left select {
    width: auto;
    min-width: 140px;
    max-width: 240px;
    flex: 0 0 auto;
}

.administrations-index-page .page-action-bar-left button,
.administrations-index-page .page-action-bar-left .button-link,
.administrations-index-page .page-action-bar-right button,
.administrations-index-page .page-action-bar-right .button-link {
    width: auto;
    flex: 0 0 auto;
}


@media (max-width: 900px) {
    .administrations-index-page .page-action-bar-left input[type="text"],
    .administrations-index-page .page-action-bar-left select {
        width: 100%;
        max-width: none;
        flex: 1 1 100%;
    }
}

/* =========================================================
   MijnFlexurance - structurele formuliernormalisatie v9
   Doel: invoervelden in standaard modulekaarten mogen nooit
   terugvallen op browserdefaults, ook niet wanneer een nieuwe
   module per ongeluk <input> zonder expliciet type gebruikt.

   Toepassing:
   - detail/edit-tabellen: .data-table en .field-table
   - beheerformulieren: .form-field-table
   - modals: .modal-card / .modal-dialog
   - filterkaarten: .filter-field

   Niet bedoeld voor submit/buttons/checkbox/radio/file/hidden.
   ========================================================= */
.data-table input:not([type]),
.data-table input[type="text"],
.data-table input[type="email"],
.data-table input[type="password"],
.data-table input[type="search"],
.data-table input[type="number"],
.data-table input[type="date"],
.data-table input[type="url"],
.data-table input[type="tel"],
.data-table select,
.data-table textarea,
.field-table input:not([type]),
.field-table input[type="text"],
.field-table input[type="email"],
.field-table input[type="password"],
.field-table input[type="search"],
.field-table input[type="number"],
.field-table input[type="date"],
.field-table input[type="url"],
.field-table input[type="tel"],
.field-table select,
.field-table textarea,
.form-field-table input:not([type]),
.form-field-table input[type="text"],
.form-field-table input[type="email"],
.form-field-table input[type="password"],
.form-field-table input[type="search"],
.form-field-table input[type="number"],
.form-field-table input[type="date"],
.form-field-table input[type="url"],
.form-field-table input[type="tel"],
.form-field-table select,
.form-field-table textarea,
.modal-card input:not([type]),
.modal-card input[type="text"],
.modal-card input[type="email"],
.modal-card input[type="password"],
.modal-card input[type="search"],
.modal-card input[type="number"],
.modal-card input[type="date"],
.modal-card input[type="url"],
.modal-card input[type="tel"],
.modal-card select,
.modal-card textarea,
.modal-dialog input:not([type]),
.modal-dialog input[type="text"],
.modal-dialog input[type="email"],
.modal-dialog input[type="password"],
.modal-dialog input[type="search"],
.modal-dialog input[type="number"],
.modal-dialog input[type="date"],
.modal-dialog input[type="url"],
.modal-dialog input[type="tel"],
.modal-dialog select,
.modal-dialog textarea,
.filter-field input:not([type]),
.filter-field input[type="text"],
.filter-field input[type="email"],
.filter-field input[type="password"],
.filter-field input[type="search"],
.filter-field input[type="number"],
.filter-field input[type="date"],
.filter-field input[type="url"],
.filter-field input[type="tel"],
.filter-field select,
.filter-field textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--mf-border-input, #cbd7df);
    border-radius: var(--mf-radius-md, 8px);
    background: #ffffff;
    color: var(--mf-text, #263d45);
    font-family: var(--mf-font-family, Arial, Helvetica, sans-serif);
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-compact, 1.35);
    font-weight: 700;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
    appearance: auto;
}

.data-table textarea,
.field-table textarea,
.form-field-table textarea,
.modal-card textarea,
.modal-dialog textarea,
.filter-field textarea {
    min-height: 86px;
    resize: vertical;
}

.data-table input:not([type]):focus,
.data-table input[type="text"]:focus,
.data-table input[type="email"]:focus,
.data-table input[type="password"]:focus,
.data-table input[type="search"]:focus,
.data-table input[type="number"]:focus,
.data-table input[type="date"]:focus,
.data-table input[type="url"]:focus,
.data-table input[type="tel"]:focus,
.data-table select:focus,
.data-table textarea:focus,
.field-table input:not([type]):focus,
.field-table input[type="text"]:focus,
.field-table input[type="email"]:focus,
.field-table input[type="password"]:focus,
.field-table input[type="search"]:focus,
.field-table input[type="number"]:focus,
.field-table input[type="date"]:focus,
.field-table input[type="url"]:focus,
.field-table input[type="tel"]:focus,
.field-table select:focus,
.field-table textarea:focus,
.form-field-table input:not([type]):focus,
.form-field-table input[type="text"]:focus,
.form-field-table input[type="email"]:focus,
.form-field-table input[type="password"]:focus,
.form-field-table input[type="search"]:focus,
.form-field-table input[type="number"]:focus,
.form-field-table input[type="date"]:focus,
.form-field-table input[type="url"]:focus,
.form-field-table input[type="tel"]:focus,
.form-field-table select:focus,
.form-field-table textarea:focus,
.modal-card input:not([type]):focus,
.modal-card input[type="text"]:focus,
.modal-card input[type="email"]:focus,
.modal-card input[type="password"]:focus,
.modal-card input[type="search"]:focus,
.modal-card input[type="number"]:focus,
.modal-card input[type="date"]:focus,
.modal-card input[type="url"]:focus,
.modal-card input[type="tel"]:focus,
.modal-card select:focus,
.modal-card textarea:focus,
.modal-dialog input:not([type]):focus,
.modal-dialog input[type="text"]:focus,
.modal-dialog input[type="email"]:focus,
.modal-dialog input[type="password"]:focus,
.modal-dialog input[type="search"]:focus,
.modal-dialog input[type="number"]:focus,
.modal-dialog input[type="date"]:focus,
.modal-dialog input[type="url"]:focus,
.modal-dialog input[type="tel"]:focus,
.modal-dialog select:focus,
.modal-dialog textarea:focus,
.filter-field input:not([type]):focus,
.filter-field input[type="text"]:focus,
.filter-field input[type="email"]:focus,
.filter-field input[type="password"]:focus,
.filter-field input[type="search"]:focus,
.filter-field input[type="number"]:focus,
.filter-field input[type="date"]:focus,
.filter-field input[type="url"]:focus,
.filter-field input[type="tel"]:focus,
.filter-field select:focus,
.filter-field textarea:focus {
    outline: 2px solid rgba(20, 153, 136, 0.18);
    border-color: var(--mf-teal, #159c8a);
}

.data-table input[type="checkbox"],
.data-table input[type="radio"],
.field-table input[type="checkbox"],
.field-table input[type="radio"],
.form-field-table input[type="checkbox"],
.form-field-table input[type="radio"],
.modal-card input[type="checkbox"],
.modal-card input[type="radio"],
.modal-dialog input[type="checkbox"],
.modal-dialog input[type="radio"],
.filter-field input[type="checkbox"],
.filter-field input[type="radio"] {
    display: inline-block;
    width: auto;
    min-height: 0;
    padding: 0;
    box-shadow: none;
}


/* Functionarissen: rij openen als detailmodal, zoals bestanden. */
.list-table tbody tr[data-functionary-row="1"] {
  cursor: pointer;
}
.list-table tbody tr[data-functionary-row="1"]:hover {
  background: rgba(15, 118, 110, 0.06);
}


/* Functionarissen-tab: toolbar op één regel, gelijk aan Bestanden/Notities. */
.functionaries-toolbar {
    align-items: center;
}

.functionaries-toolbar .tab-toolbar__left--inline {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}

.functionaries-toolbar .search-control--functionaries {
    flex: 0 0 280px;
    width: 280px;
    min-width: 220px;
}

.functionaries-toolbar .search-control--functionaries .search-control__input {
    width: 100%;
    min-width: 0;
}

.functionaries-toolbar .functionaries-toolbar__select {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.functionaries-toolbar .functionaries-toolbar__select--signatory {
    width: 180px;
}

.functionaries-toolbar .functionaries-toolbar__select--active {
    width: 150px;
}

@media (max-width: 980px) {
    .functionaries-toolbar .tab-toolbar__left--inline {
        flex-wrap: wrap;
    }

    .functionaries-toolbar .search-control--functionaries,
    .functionaries-toolbar .functionaries-toolbar__select--signatory,
    .functionaries-toolbar .functionaries-toolbar__select--active {
        width: 100%;
        flex-basis: 100%;
    }
}

/* ===== Administration year settings child module ===== */
.administration-year-settings-page .record-tab-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.year-settings-general-grid,
.year-settings-other-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 18px;
}

.year-settings-general-grid .panel-empty-slot,
.year-settings-other-grid .panel-empty-slot {
    display: block;
    min-height: 1px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.year-settings-general-grid textarea,
.administration-year-settings-page textarea {
    min-height: 92px;
}

.administrations-view-page #tab-year_settings .tab-toolbar {
    margin-bottom: 12px;
}

@media (max-width: 1280px) {
    .year-settings-general-grid,
    .year-settings-other-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MijnFlexurance - standaard grote tekstkaarten
   Doel: Hashtags en Opmerkingen niet terug laten vallen op
   label-links / textarea-rechts formulierlayout.
   ========================================================= */
.panel-text-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-text-card .panel-textarea,
.panel-text-card textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 92px;
    padding: 9px 10px;
    border: 1px solid var(--mf-border-input, #cbd7df);
    border-radius: var(--mf-radius-md, 8px);
    background: #ffffff;
    color: var(--mf-text, #263d45);
    font-family: var(--mf-font-family, Arial, Helvetica, sans-serif);
    font-size: var(--mf-font-size-md, 13px);
    line-height: var(--mf-line-height-compact, 1.35);
    font-weight: 700;
    resize: vertical;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.panel-text-card .panel-textarea:focus,
.panel-text-card textarea:focus {
    outline: 2px solid rgba(20, 153, 136, 0.18);
    border-color: var(--mf-teal, #159c8a);
}

.panel-text-card .panel-text-body {
    margin: 0;
    min-height: 18px;
    color: var(--mf-text, #263d45);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 1.45;
    font-weight: 700;
    word-break: break-word;
}


/* =========================================================
   Reference tables - standaard actiebar v25
   Doel: referentietabellen gebruikt dezelfde page-action-bar
   en buttonklassen als de overige modules. Dit voorkomt dat
   links als gewone tekst worden weergegeven.
   ========================================================= */
.reference-tables-page .page-action-bar {
    /* V26: geen afwijkende vaste hoogte; gelijk aan standaard action bar zoals Administraties/Bedrijven. */
    min-height: 0;
}

.reference-tables-page .page-action-bar-left,
.reference-tables-page .page-action-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.reference-tables-page .page-action-bar-right {
    margin-left: auto;
    justify-content: flex-end;
}

.reference-tables-page .page-action-bar .button,
.reference-tables-page .page-action-bar .button-link,
.reference-tables-page .page-action-bar button {
    width: auto;
    flex: 0 0 auto;
}

/* Administraties > Jaarinstellingen: standaard toolbar op één regel. */
.year-settings-toolbar {
    align-items: center;
}

.year-settings-toolbar .tab-toolbar__left--inline {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}

.year-settings-toolbar .search-control--year-settings {
    flex: 0 0 280px;
    width: 280px;
    min-width: 220px;
}

.year-settings-toolbar .search-control--year-settings .search-control__input {
    width: 100%;
    min-width: 0;
}

.year-settings-toolbar .year-settings-toolbar__select {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.year-settings-toolbar .year-settings-toolbar__select--sort {
    width: 190px;
}

.year-settings-toolbar .year-settings-toolbar__select--direction {
    width: 130px;
}

@media (max-width: 980px) {
    .year-settings-toolbar .tab-toolbar__left--inline {
        flex-wrap: wrap;
    }

    .year-settings-toolbar .search-control--year-settings,
    .year-settings-toolbar .year-settings-toolbar__select--sort,
    .year-settings-toolbar .year-settings-toolbar__select--direction {
        width: 100%;
        flex-basis: 100%;
    }
}

/* =========================================================
   MijnFlexurance - lege sublijsten standaardiseren v35
   Bestanden is de referentie: tabelkop zichtbaar, neutrale lege melding,
   footer met aantal en geen actie-iconen in lege toestand.
   ========================================================= */
.list-table__empty-row td {
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-md, 13px);
    font-weight: 700;
    background: #ffffff;
}

.list-table__empty-row:hover td {
    background: #ffffff;
}


/* =========================================================
   MijnFlexurance - lijststandaard v56
   Hoofdmodule-indexen gebruiken technisch .list-table.
   Recordtab-/childlijsten gebruiken technisch .mf-sublist.
   Visueel volgen beide dezelfde indexstandaard: 11px kopregel,
   13px inhoud, 1px var(--mf-border-soft), hover/focus mintgroen
   + teal tekst en geen rijverspringing.
   ========================================================= */
.mf-sublist {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    border: 1px solid var(--mf-border, #d6e2ea);
    border-radius: var(--mf-radius-lg, 10px);
    box-shadow: var(--mf-shadow-sm, 0 1px 4px rgba(8, 47, 63, 0.08));
    color: var(--mf-text, #263d45);
    font-family: var(--mf-font-family, Arial, Helvetica, sans-serif);
}

.mf-sublist > .mf-sublist__header,
.mf-sublist > .mf-sublist__row {
    display: grid;
    align-items: center;
    gap: 0;
    min-width: 1080px;
}

.mf-sublist > .mf-sublist__header {
    min-height: 46px;
    background: #f7fafb;
    color: var(--mf-text-muted, #64748b);
    font-size: 11px;
    line-height: 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mf-sublist > .mf-sublist__row {
    min-height: 46px;
    border-top: 1px solid var(--mf-border-soft, #e5edf2);
    background: #ffffff;
    color: var(--mf-text, #263d45);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.mf-sublist > .mf-sublist__row:hover,
.mf-sublist > .mf-sublist__row:focus {
    background: var(--mf-teal-soft, #e8f7f4);
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}

.mf-sublist > .mf-sublist__row:hover > *,
.mf-sublist > .mf-sublist__row:focus > *,
.mf-sublist > .mf-sublist__row:hover .mf-sublist__strong,
.mf-sublist > .mf-sublist__row:focus .mf-sublist__strong {
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}

.mf-sublist > .mf-sublist__row--active,
.mf-sublist > .mf-sublist__row--selected {
    background: var(--mf-teal-soft, #e8f7f4);
    color: var(--mf-teal-dark, #0f766e);
}

.mf-sublist > .mf-sublist__row--active > *,
.mf-sublist > .mf-sublist__row--selected > *,
.mf-sublist > .mf-sublist__row--active .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--selected .mf-sublist__strong {
    color: var(--mf-teal-dark, #0f766e);
}

.mf-sublist > .mf-sublist__header > *,
.mf-sublist > .mf-sublist__row > * {
    min-width: 0;
    padding: 0 16px;
}

.mf-sublist > .mf-sublist__empty {
    min-width: 1080px;
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-top: 1px solid var(--mf-border-soft, #e5edf2);
    background: #ffffff;
    color: var(--mf-text-muted, #64748b);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.mf-sublist__strong {
    color: var(--mf-text-strong, #0f2d3a);
    font-weight: 900;
}

.mf-sublist__truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mf-sublist__date {
    white-space: nowrap;
}

.mf-sublist__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mf-sublist__action {
    justify-self: center;
}

.mf-sublist .pagination-bar {
    min-width: 1080px;
    padding: 13px 16px;
    font-size: 13px;
    line-height: 18px;
}

.mf-sublist .pagination-bar__summary,
.mf-sublist .pagination,
.mf-sublist .pagination__button {
    font-size: 13px;
    line-height: 18px;
}

.mf-sublist .row-action-link {
    color: var(--mf-text-strong, #0f2d3a);
    font-size: 13px;
    line-height: 18px;
    font-weight: 900;
    text-decoration: none;
}

.mf-sublist .row-action-link:hover {
    color: var(--mf-teal-dark, #128273);
    text-decoration: underline;
}

.mf-sublist .row-action-button {
    min-height: 30px;
    width: 30px;
    padding: 0;
    font-size: 16px;
}

.mf-sublist--notes > .mf-sublist__header,
.mf-sublist--notes > .mf-sublist__row {
    grid-template-columns: 150px 90px 120px minmax(260px, 1fr) 76px 86px 118px 44px;
}

.mf-sublist--files > .mf-sublist__header,
.mf-sublist--files > .mf-sublist__row {
    grid-template-columns: 150px 90px 150px minmax(180px, 1.1fr) minmax(260px, 1.7fr) 90px 110px;
}

/* Opdrachten > Bestanden: meer ruimte voor type, geen omschrijving, wel bestandsformaat. */
.mf-sublist--files-assignments > .mf-sublist__header,
.mf-sublist--files-assignments > .mf-sublist__row {
    grid-template-columns: 150px 90px minmax(240px, 1.35fr) minmax(280px, 1.65fr) 90px 90px 110px;
}

.mf-sublist--company-contacts > .mf-sublist__header,
.mf-sublist--company-contacts > .mf-sublist__row {
    grid-template-columns: minmax(190px, 1.25fr) minmax(160px, 1fr) minmax(160px, 1fr) 125px 150px minmax(220px, 1.25fr);
}

@media (max-width: 920px) {
    .mf-sublist > .mf-sublist__header,
    .mf-sublist > .mf-sublist__row,
    .mf-sublist > .mf-sublist__empty,
    .mf-sublist .pagination-bar {
        min-width: 1080px;
    }
}

.mf-sublist__row--clickable {
    cursor: pointer;
}

.mf-sublist__row--clickable:focus,
.mf-sublist .js-open-note-view-modal:focus {
    outline: 2px solid var(--mf-teal, #159c8a);
    outline-offset: -2px;
}

/* Visuele gelijktrekking met hoofdmodule-indexlijsten (.list-table).
   Technisch blijft mf-sublist het component voor recordtabs, maar rijhoogte,
   scheidingslijn, hoverkleur en tekstkleur volgen de module-indexstandaard. */
.mf-sublist > .mf-sublist__row,
.mf-sublist > .mf-sublist__empty {
    min-height: 46px;
    border-color: var(--mf-border-soft, #e5edf2);
}

.mf-sublist > .mf-sublist__row:hover,
.mf-sublist > .mf-sublist__row:focus,
.mf-sublist > .mf-sublist__row--clickable:hover,
.mf-sublist > .mf-sublist__row--clickable:focus {
    background: var(--mf-teal-soft, #e8f7f4);
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}

.mf-sublist > .mf-sublist__row:hover > *,
.mf-sublist > .mf-sublist__row:focus > *,
.mf-sublist > .mf-sublist__row--clickable:hover > *,
.mf-sublist > .mf-sublist__row--clickable:focus > *,
.mf-sublist > .mf-sublist__row:hover .mf-sublist__strong,
.mf-sublist > .mf-sublist__row:focus .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:hover .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:focus .mf-sublist__strong {
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}

/* Gewone index-/lijsttabellen volgen dezelfde typografische standaard. */
.list-table th {
    font-size: 11px;
    line-height: 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.list-table td {
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.list-table__empty-row td {
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}


/* =========================================================
   MijnFlexurance V42 - standaard module-indexpagina
   Doel: alle module-indexpagina's dezelfde verticale opbouw,
   hoogtes en afstanden. HTML-volgorde is leidend:
   page-action-bar > page-info-bar > saved-view-tabs > page-content.
   ========================================================= */
body[class*="-index-page"] > .page-shell > .page-action-bar {
    gap: 11px;
    padding: 11px;
    margin: 0 0 16px;
    min-height: 0;
}

body[class*="-index-page"] > .page-shell > .page-info-bar {
    min-height: 44px;
    padding: 11px 16px;
    margin: 0;
    gap: 13px;
    font-size: 13px;
    background: var(--mf-navy, #082d3f);
    color: #ffffff;
    border-radius: var(--mf-radius-lg, 12px) var(--mf-radius-lg, 12px) 0 0;
}

body[class*="-index-page"] > .page-shell > .page-info-bar .breadcrumb {
    gap: 7px;
}

body[class*="-index-page"] > .page-shell > .saved-view-tabs {
    min-height: 38px;
    margin: 0 0 18px;
    border-radius: 0 0 var(--mf-radius-lg, 12px) var(--mf-radius-lg, 12px);
}

body[class*="-index-page"] > .page-shell > .saved-view-tabs .saved-view-tab {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 800;
}

body[class*="-index-page"] > .page-shell > .page-content {
    margin-top: 0;
}

body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form {
    gap: 8px;
}

body[class*="-index-page"] > .page-shell > .page-action-bar input[type="text"],
body[class*="-index-page"] > .page-shell > .page-action-bar select,
body[class*="-index-page"] > .page-shell > .page-action-bar button,
body[class*="-index-page"] > .page-shell > .page-action-bar .button,
body[class*="-index-page"] > .page-shell > .page-action-bar .button-link {
    min-height: 34px;
}

/* ===== Administration contracts / contractsoorten - Dag 011 ===== */
@media (min-width: 1100px) {
    .administrations-view-page .record-tab-bar {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

.administration-contracts-toolbar {
    align-items: center;
    margin-bottom: 12px;
}

.administration-contracts-toolbar .tab-toolbar__left--inline {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}

.administration-contracts-toolbar .search-control--administration-contracts {
    flex: 0 0 280px;
    width: 280px;
    min-width: 220px;
}

.administration-contracts-toolbar .search-control--administration-contracts .search-control__input {
    width: 100%;
    min-width: 0;
}

.administration-contracts-toolbar .administration-contracts-toolbar__select {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.administration-contracts-toolbar .administration-contracts-toolbar__select--sort {
    width: 190px;
}

.administration-contracts-toolbar .administration-contracts-toolbar__select--direction {
    width: 130px;
}

.mf-sublist--administration-contracts > .mf-sublist__header,
.mf-sublist--administration-contracts > .mf-sublist__row {
    grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 1fr) 100px 100px;
    min-width: 580px;
}

.administration-contracts-detail-grid,
.administration-contracts-other-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.administration-contracts-detail-grid__contract { grid-column: 1; grid-row: 1; }
.administration-contracts-detail-grid__nbbu-abu { grid-column: 2; grid-row: 1; }
.administration-contracts-detail-grid__work-leave { grid-column: 1; grid-row: 2; }
.administration-contracts-detail-grid__improductivity { grid-column: 2; grid-row: 2; }
.administration-contracts-detail-grid__allowance { grid-column: 1; grid-row: 3; }
.administration-contracts-detail-grid__placeholder-1 { grid-column: 2; grid-row: 3; }
.administration-contracts-detail-grid__hashtags { grid-column: 1; grid-row: 4; }
.administration-contracts-detail-grid__notes { grid-column: 2; grid-row: 4; }

.administration-contracts-detail-grid .panel-empty-slot,
.administration-contracts-other-grid .panel-empty-slot {
    display: block;
    min-height: 1px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.administration-contracts-detail-grid textarea,
.administration-contracts-page textarea {
    min-height: 92px;
}

@media (max-width: 1280px) {
    .administration-contracts-detail-grid,
    .administration-contracts-other-grid {
        grid-template-columns: 1fr;
    }
    .administration-contracts-detail-grid__contract,
    .administration-contracts-detail-grid__nbbu-abu,
    .administration-contracts-detail-grid__work-leave,
    .administration-contracts-detail-grid__improductivity,
    .administration-contracts-detail-grid__allowance,
    .administration-contracts-detail-grid__hashtags,
    .administration-contracts-detail-grid__notes,
    .administration-contracts-other-grid > .panel {
        grid-column: 1;
        grid-row: auto;
    }
    .administration-contracts-detail-grid__placeholder-1,
    .administration-contracts-other-grid .panel-empty-slot {
        display: none;
    }
}

@media (max-width: 980px) {
    .administration-contracts-toolbar .tab-toolbar__left--inline {
        flex-wrap: wrap;
    }

    .administration-contracts-toolbar .search-control--administration-contracts,
    .administration-contracts-toolbar__select {
        width: 100%;
        flex-basis: 100%;
    }
}

/* ===== Module index list hardening - Bedrijven index reference - Dag 011 ===== */
.list-table__row--clickable {
    cursor: pointer;
}

.list-table__row--clickable:focus {
    outline: 2px solid var(--mf-teal);
    outline-offset: -2px;
}

.list-table__row--clickable:hover td,
.list-table__row--clickable:focus td {
    background: var(--mf-teal-soft, #e8f7f4);
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}

.list-table__primary {
    font-weight: 900;
    color: var(--mf-text-strong);
}

.list-table__row--clickable:hover .list-table__primary,
.list-table__row--clickable:focus .list-table__primary {
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}

.list-table__row--clickable a,
.list-table__row--clickable a:hover,
.list-table__row--clickable a:focus {
    text-decoration: none;
}

/* ===== Module index list rollout - Hoofdmodule-indexlijsten - Dag 011 ===== */
.list-table__row--clickable:hover a,
.list-table__row--clickable:focus a,
.list-table__row--clickable:hover .muted,
.list-table__row--clickable:focus .muted,
.list-table__row--clickable:hover .status,
.list-table__row--clickable:focus .status {
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}


/* =========================================================
   MijnFlexurance Dag 011 - mf-sublist rijhoogte gelijk aan list-table
   Referentie: hoofdmodule-indexlijst (Bedrijven index) voor visuele compactheid.
   Toepassing: recordtab-/sublijsten zoals Bedrijven > Notities.
   ========================================================= */
.mf-sublist > .mf-sublist__header {
    min-height: 38px;
}

.mf-sublist > .mf-sublist__row {
    min-height: 41px;
}

.mf-sublist > .mf-sublist__empty {
    min-height: 41px;
}

.mf-sublist > .mf-sublist__header > *,
.mf-sublist > .mf-sublist__row > * {
    padding: 0 13px;
}

.mf-sublist .pagination-bar {
    min-height: 41px;
    padding: 11px 13px;
}

.mf-sublist > .mf-sublist__row--clickable {
    cursor: pointer;
}

.mf-sublist > .mf-sublist__row--clickable:hover,
.mf-sublist > .mf-sublist__row--clickable:focus {
    background: #f0fbf8;
    color: var(--mf-teal-dark, #128273);
    text-decoration: none;
}

.mf-sublist > .mf-sublist__row--clickable:hover > *,
.mf-sublist > .mf-sublist__row--clickable:focus > *,
.mf-sublist > .mf-sublist__row--clickable:hover .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:focus .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:hover .status-check,
.mf-sublist > .mf-sublist__row--clickable:focus .status-check {
    color: var(--mf-teal-dark, #128273);
    text-decoration: none;
}

.mf-sublist--notes > .mf-sublist__header,
.mf-sublist--notes > .mf-sublist__row {
    grid-template-columns: 150px 90px 120px minmax(260px, 1fr) 76px 86px 118px;
}


/* ===== Administraties > Jaarinstellingen - mf-sublist standaard - Dag 011 ===== */
.administration-year-settings-toolbar {
    align-items: center;
    margin-bottom: 12px;
}

.administration-year-settings-toolbar .tab-toolbar__left--inline {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}

.administration-year-settings-toolbar .search-control--year-settings {
    flex: 0 0 280px;
    width: 280px;
    min-width: 220px;
}

.administration-year-settings-toolbar .search-control--year-settings .search-control__input {
    width: 100%;
    min-width: 0;
}

.administration-year-settings-toolbar .year-settings-toolbar__select {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.administration-year-settings-toolbar .year-settings-toolbar__select--sort {
    width: 190px;
}

.administration-year-settings-toolbar .year-settings-toolbar__select--direction {
    width: 130px;
}

.mf-sublist--administration-year-settings > .mf-sublist__header,
.mf-sublist--administration-year-settings > .mf-sublist__row {
    grid-template-columns: 90px 130px 90px 175px minmax(150px, 1fr) 110px 100px minmax(170px, 1fr);
    min-width: 1080px;
}

@media (max-width: 980px) {
    .administration-year-settings-toolbar .tab-toolbar__left--inline {
        flex-wrap: wrap;
    }

    .administration-year-settings-toolbar .search-control--year-settings,
    .administration-year-settings-toolbar .year-settings-toolbar__select--sort,
    .administration-year-settings-toolbar .year-settings-toolbar__select--direction {
        width: 100%;
        flex-basis: 100%;
    }
}

/* ===== Dag 011 - Contractenoverzicht compact: alleen identificatiekolommen ===== */
.mf-sublist--administration-contracts > .mf-sublist__header,
.mf-sublist--administration-contracts > .mf-sublist__row {
    grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 1fr) 100px 100px;
    min-width: 580px;
}

/* ===== Dag 011 - Sublijsthoogte gelijk aan compacte lijststandaard ===== */
.mf-sublist > .mf-sublist__header {
    min-height: 40px;
}

.mf-sublist > .mf-sublist__row,
.mf-sublist > .mf-sublist__empty {
    min-height: 48px;
}

/* =========================================================
   MijnFlexurance Dag 011 - design-hardening recordtab-sublijsten
   Doel: sublijsten technisch gelijk trekken met Bedrijven > Notities.
   - list-table blijft voor hoofdmodule-indexen.
   - mf-sublist is verplicht voor recordtab-/childlijsten.
   - Rijen openen via data-href of een expliciete modal-handler.
   ========================================================= */
.mf-sublist > .mf-sublist__header,
.mf-sublist > .mf-sublist__row {
    align-items: center;
    border-bottom: 1px solid #dfe7ee;
}

.mf-sublist > .mf-sublist__header {
    min-height: 40px;
}

.mf-sublist > .mf-sublist__row,
.mf-sublist > .mf-sublist__empty {
    min-height: 48px;
}

.mf-sublist > .mf-sublist__row--clickable {
    cursor: pointer;
}

.mf-sublist > .mf-sublist__row--clickable:hover,
.mf-sublist > .mf-sublist__row--clickable:focus {
    background: #f0fbf8;
    color: var(--mf-teal-dark, #128273);
    text-decoration: none;
    outline: none;
}

.mf-sublist > .mf-sublist__row--clickable:hover > *,
.mf-sublist > .mf-sublist__row--clickable:focus > *,
.mf-sublist > .mf-sublist__row--clickable:hover .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:focus .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:hover .status-check,
.mf-sublist > .mf-sublist__row--clickable:focus .status-check {
    color: var(--mf-teal-dark, #128273);
    text-decoration: none;
}

.mf-sublist--administration-functionaries > .mf-sublist__header,
.mf-sublist--administration-functionaries > .mf-sublist__row {
    grid-template-columns: minmax(180px, 1.25fr) minmax(150px, 1fr) minmax(200px, 1.2fr) 130px 130px 115px 95px 80px 150px;
    min-width: 1280px;
}

@media (max-width: 980px) {
    .mf-sublist--administration-functionaries > .mf-sublist__header,
    .mf-sublist--administration-functionaries > .mf-sublist__row {
        min-width: 1180px;
    }
}


/* =========================================================
   Dag 012 - toolbarstandaard indexen en recordtabs
   Doel: gelijke breedtes, focusstate en geen browser-native zoek-wisicoon.
   ========================================================= */
body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form > input[type="text"] {
    flex: 0 0 250px;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
}

body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form > select:first-of-type {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
}

body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form > select:nth-of-type(2) {
    flex: 0 0 140px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}

body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form > button,
body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form > .button,
body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form > .button-link {
    flex: 0 0 auto;
    width: auto;
}

.search-control:focus-within {
    border-color: var(--mf-teal, #159c8a);
    outline: 2px solid rgba(20, 153, 136, 0.18);
    outline-offset: 0;
}

.search-control__input[type="search"]::-webkit-search-cancel-button,
.search-control__input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.tab-toolbar--compact .tab-toolbar__left--inline {
    gap: 8px;
}

.tab-toolbar--compact .search-control,
.tab-toolbar--compact .search-control--notes,
.tab-toolbar--compact .search-control--functionaries,
.tab-toolbar--compact .search-control--year-settings,
.tab-toolbar--compact .search-control--administration-contracts {
    flex: 0 0 280px;
    width: 280px;
    min-width: 220px;
}

.tab-toolbar--compact .notes-toolbar__select--sort,
.tab-toolbar--compact .year-settings-toolbar__select--sort,
.tab-toolbar--compact .administration-contracts-toolbar__select--sort {
    flex: 0 0 190px;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
}

.tab-toolbar--compact .notes-toolbar__select--direction,
.tab-toolbar--compact .year-settings-toolbar__select--direction,
.tab-toolbar--compact .administration-contracts-toolbar__select--direction {
    flex: 0 0 130px;
    width: 130px;
    min-width: 130px;
    max-width: 130px;
}

@media (max-width: 900px) {
    body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form > input[type="text"],
    body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form > select:first-of-type,
    body[class*="-index-page"] > .page-shell > .page-action-bar .filters-form > select:nth-of-type(2) {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}


/* =========================================================
   MijnFlexurance - detailkaarten, formulieren en modals hardening v1
   Doel: tweede designlaag borgen na lijst-/sublijststandaard.
   - Detailkaarten gebruiken .panel/.detail-card met .data-table, .field-table of .field-list.
   - Add/create-formulieren gebruiken geen hardcoded numerieke voorbeeldwaarden.
   - Lege gridposities gebruiken .panel-empty-slot met aria-hidden en tonen geen witte kaart.
   - Permission-denied pagina gebruikt centrale CSS; geen inline <style> in sys/permissions.php.
   ========================================================= */
.detail-grid,
.grid,
.two-col-grid,
.content-grid {
    align-items: stretch;
}

.grid > .panel,
.grid > .detail-card,
.detail-grid > .panel,
.detail-grid > .detail-card,
.two-col-grid > .panel,
.two-col-grid > .detail-card,
.content-grid > .panel,
.content-grid > .detail-card {
    min-width: 0;
}

.panel-empty-slot,
.panel.panel-empty-slot,
.detail-card.panel-empty-slot {
    display: none !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.data-table td,
.data-table th,
.field-table td,
.field-table th,
.field-row {
    min-height: 34px;
}

.data-table td:first-child,
.field-table td:first-child,
.field-row dt {
    color: var(--mf-text-muted, #64748b);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 18px;
    font-weight: 700;
}

.data-table td:last-child,
.field-table td:last-child,
.field-row dd {
    color: var(--mf-text, #263d45);
    font-size: var(--mf-font-size-md, 13px);
    line-height: 18px;
    font-weight: 700;
}

.data-table td:last-child,
.field-table td:last-child,
.field-row dd,
.field-value--number,
.field-value--amount,
.field-value--percentage {
    text-align: right;
}

.textarea-card,
.panel--textarea {
    display: flex;
    flex-direction: column;
}

.textarea-card textarea,
.panel--textarea textarea,
.panel > textarea {
    width: 100%;
    min-height: 96px;
    margin-top: 4px;
}

.modal-footer {
    min-height: 62px;
}

.modal-footer .modal-actions-left,
.modal-footer .modal-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.permission-denied-page {
    min-height: 100vh;
    margin: 0;
    background: var(--mf-page-bg, #f3f6f7);
    color: var(--mf-text, #263d45);
    font-family: var(--mf-font-family, Arial, Helvetica, sans-serif);
}

.permission-denied-shell {
    max-width: 760px;
    margin: 48px auto;
    padding: 0 18px;
}

.permission-denied-card {
    padding: 20px 22px;
}

.permission-denied-card h1 {
    margin: 0 0 10px;
    color: var(--mf-text-strong, #082f3f);
    font-size: 22px;
    line-height: 28px;
    font-weight: 900;
}

.permission-denied-card p {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    font-weight: 700;
}

.permission-denied-actions {
    margin-top: 18px;
}

/* =========================================================
   MijnFlexurance - Tabbar hardening Dag 012
   ---------------------------------------------------------
   Recordtabs en saved-view-tabs verdelen de beschikbare breedte
   op basis van het aantal zichtbare tabs. De laatste rij mag geen
   lege visuele kolommen tonen. Gebruik record-tabs--count-N.
   ========================================================= */
.record-tab-bar,
.record-tabs,
.view-tabs,
.saved-view-tabs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    grid-template-columns: none !important;
    min-height: 38px;
    width: 100%;
}

.record-tab,
.record-tabs__item,
.view-tab,
.saved-view-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 800;
    white-space: normal;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.record-tab:hover,
.record-tabs__item:hover,
.view-tab:hover,
.saved-view-tab:hover,
.record-tab:focus-visible,
.record-tabs__item:focus-visible,
.view-tab:focus-visible,
.saved-view-tab:focus-visible {
    text-decoration: none;
}

@media (min-width: 1100px) {
    .record-tabs--count-1 > .record-tab,
    .record-tabs--count-1 > .record-tabs__item,
    .record-tabs--count-1 > .view-tab,
    .record-tabs--count-1 > .saved-view-tab { flex: 0 0 100%; max-width: 100%; }

    .record-tabs--count-2 > .record-tab,
    .record-tabs--count-2 > .record-tabs__item,
    .record-tabs--count-2 > .view-tab,
    .record-tabs--count-2 > .saved-view-tab { flex: 0 0 50%; max-width: 50%; }

    .record-tabs--count-3 > .record-tab,
    .record-tabs--count-3 > .record-tabs__item,
    .record-tabs--count-3 > .view-tab,
    .record-tabs--count-3 > .saved-view-tab { flex: 0 0 33.333333%; max-width: 33.333333%; }

    .record-tabs--count-4 > .record-tab,
    .record-tabs--count-4 > .record-tabs__item,
    .record-tabs--count-4 > .view-tab,
    .record-tabs--count-4 > .saved-view-tab { flex: 0 0 25%; max-width: 25%; }

    .record-tabs--count-5 > .record-tab,
    .record-tabs--count-5 > .record-tabs__item,
    .record-tabs--count-5 > .view-tab,
    .record-tabs--count-5 > .saved-view-tab { flex: 0 0 20%; max-width: 20%; }

    .record-tabs--count-6 > .record-tab,
    .record-tabs--count-6 > .record-tabs__item,
    .record-tabs--count-6 > .view-tab,
    .record-tabs--count-6 > .saved-view-tab { flex: 0 0 16.666667%; max-width: 16.666667%; }

    .record-tabs--count-7 > .record-tab,
    .record-tabs--count-7 > .record-tabs__item,
    .record-tabs--count-7 > .view-tab,
    .record-tabs--count-7 > .saved-view-tab { flex: 0 0 14.285714%; max-width: 14.285714%; }

    .record-tabs--count-8 > .record-tab,
    .record-tabs--count-8 > .record-tabs__item,
    .record-tabs--count-8 > .view-tab,
    .record-tabs--count-8 > .saved-view-tab { flex: 0 0 12.5%; max-width: 12.5%; }
}

@media (max-width: 1099px) and (min-width: 701px) {
    .record-tabs--count-1 > .record-tab,
    .record-tabs--count-1 > .record-tabs__item,
    .record-tabs--count-1 > .view-tab,
    .record-tabs--count-1 > .saved-view-tab { flex: 0 0 100%; max-width: 100%; }

    .record-tabs--count-2 > .record-tab,
    .record-tabs--count-2 > .record-tabs__item,
    .record-tabs--count-2 > .view-tab,
    .record-tabs--count-2 > .saved-view-tab { flex: 0 0 50%; max-width: 50%; }

    .record-tabs--count-3 > .record-tab,
    .record-tabs--count-3 > .record-tabs__item,
    .record-tabs--count-3 > .view-tab,
    .record-tabs--count-3 > .saved-view-tab { flex: 0 0 33.333333%; max-width: 33.333333%; }

    .record-tabs--count-4 > .record-tab,
    .record-tabs--count-4 > .record-tabs__item,
    .record-tabs--count-4 > .view-tab,
    .record-tabs--count-4 > .saved-view-tab { flex: 0 0 25%; max-width: 25%; }

    /* 5 tabs: 3 + 2, waarbij de laatste rij 100% vult. */
    .record-tabs--count-5 > .record-tab,
    .record-tabs--count-5 > .record-tabs__item,
    .record-tabs--count-5 > .view-tab,
    .record-tabs--count-5 > .saved-view-tab { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .record-tabs--count-5 > .record-tab:nth-last-child(-n+2),
    .record-tabs--count-5 > .record-tabs__item:nth-last-child(-n+2),
    .record-tabs--count-5 > .view-tab:nth-last-child(-n+2),
    .record-tabs--count-5 > .saved-view-tab:nth-last-child(-n+2) { flex-basis: 50%; max-width: 50%; }

    /* 6 tabs: 3 + 3. */
    .record-tabs--count-6 > .record-tab,
    .record-tabs--count-6 > .record-tabs__item,
    .record-tabs--count-6 > .view-tab,
    .record-tabs--count-6 > .saved-view-tab { flex: 0 0 33.333333%; max-width: 33.333333%; }

    /* 7 tabs: 4 + 3, waarbij de laatste rij 100% vult. */
    .record-tabs--count-7 > .record-tab,
    .record-tabs--count-7 > .record-tabs__item,
    .record-tabs--count-7 > .view-tab,
    .record-tabs--count-7 > .saved-view-tab { flex: 0 0 25%; max-width: 25%; }
    .record-tabs--count-7 > .record-tab:nth-last-child(-n+3),
    .record-tabs--count-7 > .record-tabs__item:nth-last-child(-n+3),
    .record-tabs--count-7 > .view-tab:nth-last-child(-n+3),
    .record-tabs--count-7 > .saved-view-tab:nth-last-child(-n+3) { flex-basis: 33.333333%; max-width: 33.333333%; }

    /* 8 tabs: 4 + 4. */
    .record-tabs--count-8 > .record-tab,
    .record-tabs--count-8 > .record-tabs__item,
    .record-tabs--count-8 > .view-tab,
    .record-tabs--count-8 > .saved-view-tab { flex: 0 0 25%; max-width: 25%; }
}

@media (max-width: 700px) {
    .record-tab,
    .record-tabs__item,
    .view-tab,
    .saved-view-tab {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    .record-tab:last-child,
    .record-tabs__item:last-child,
    .view-tab:last-child,
    .saved-view-tab:last-child {
        border-bottom: 0;
    }
}

/* Dag 012 - Kostprijs testpagina */
.cost-price-test-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.cost-price-test-form .data-table input,
.cost-price-test-form .data-table select {
    width: 100%;
}
.cost-price-test-actions {
    margin-top: 16px;
}
@media (max-width: 1100px) {
    .cost-price-test-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MijnFlexurance - StiPP PDO tijdelijke toolmodule
   Scope: detailgrid en deelnemerssubtabel.
   ========================================================= */
.stipp-pdo-general-grid,
.stipp-pdo-other-grid {
    align-items: stretch;
}

.stipp-pdo-general-grid > .panel,
.stipp-pdo-other-grid > .panel {
    height: 100%;
}

@media (min-width: 981px) {
    .stipp-pdo-general-grid__main { grid-column: 1; grid-row: 1; }
    .stipp-pdo-general-grid__placeholder {
        display: block;
        visibility: hidden;
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .stipp-pdo-general-grid__hashtags { grid-column: 1; grid-row: 2; }
    .stipp-pdo-general-grid__notes { grid-column: 2; grid-row: 2; }
}

@media (max-width: 980px) {
    .stipp-pdo-general-grid__placeholder { display: none; }
    .stipp-pdo-general-grid__main,
    .stipp-pdo-general-grid__placeholder,
    .stipp-pdo-general-grid__hashtags,
    .stipp-pdo-general-grid__notes {
        grid-column: auto;
        grid-row: auto;
    }
}

.mf-sublist--stipp-pdo-participants > .mf-sublist__header,
.mf-sublist--stipp-pdo-participants > .mf-sublist__row {
    grid-template-columns: minmax(210px, 1.6fr) 110px 120px 90px 145px 110px;
}

.mf-sublist--stipp-pdo-participants .mf-sublist__row {
    cursor: pointer;
}
/* Patch 2026-06-03 - Opdrachten basislayout */
.assignments-general-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}
.assignments-general-grid > .panel {
    min-width: 0;
    height: 100%;
}
@media (min-width: 901px) {
    .assignments-general-grid__assignment { grid-column: 1; grid-row: 1; }
    .assignments-general-grid__professional { grid-column: 2; grid-row: 1; }
    .assignments-general-grid__planning { grid-column: 1; grid-row: 2; }
    .assignments-general-grid__version { grid-column: 2; grid-row: 2; }
    .assignments-general-grid__administration { grid-column: 1; grid-row: 3; }
    .assignments-general-grid__customer { grid-column: 2; grid-row: 3; }
    .assignments-general-grid__purchase { grid-column: 1; grid-row: 4; }
    .assignments-general-grid__sales { grid-column: 2; grid-row: 4; }
    .assignments-general-grid__hashtags { grid-column: 1; grid-row: 5; }
    .assignments-general-grid__notes { grid-column: 2; grid-row: 5; }
}
@media (max-width: 900px) {
    .assignments-general-grid {
        grid-template-columns: 1fr;
    }
}
.assignments-index-page .saved-view-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.assignments-view-page .record-tab-bar,
.assignments-edit-page .record-tab-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =========================================================
   Patch 2026-06-03 - definitieve visuele gelijkstelling list-table en mf-sublist
   Referentie: hoofdmodule-index (.list-table), bijvoorbeeld Bedrijven > index.
   Doel: recordtab-/childlijsten (.mf-sublist) exact dezelfde rijmaatvoering,
   scheidingslijn, hoverkleur en typografie geven als hoofdmodule-indexlijsten.

   Belangrijk: gebruik geen apart min-height-model voor mf-sublist-rijen.
   De effectieve rijhoogte wordt bepaald door line-height + verticale padding,
   net zoals bij .list-table.
   ========================================================= */
.mf-sublist > .mf-sublist__header,
.mf-sublist > .mf-sublist__row {
    align-items: center;
    min-height: 0;
    border-top: 0;
    border-bottom: 1px solid var(--mf-border-soft, #e5edf2);
}

.mf-sublist > .mf-sublist__header > * {
    padding: 14px 16px;
    color: var(--mf-text-muted, #64748b);
    font-size: 11px;
    line-height: 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mf-sublist > .mf-sublist__row > * {
    padding: 14px 16px;
    color: var(--mf-text, #263d45);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.mf-sublist > .mf-sublist__empty {
    min-height: 0;
    padding: 14px 16px;
    border-top: 0;
    border-bottom: 1px solid var(--mf-border-soft, #e5edf2);
    color: var(--mf-text, #263d45);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.mf-sublist .pagination-bar {
    min-height: 0;
    padding: 14px 16px;
    border-top: 0;
    color: var(--mf-text-strong, #15313c);
    font-size: 13px;
    line-height: 18px;
    font-weight: 900;
}

.mf-sublist > .mf-sublist__row:hover,
.mf-sublist > .mf-sublist__row:focus,
.mf-sublist > .mf-sublist__row--clickable:hover,
.mf-sublist > .mf-sublist__row--clickable:focus {
    background: var(--mf-teal-soft, #e8f7f4);
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
    outline: none;
}

.mf-sublist > .mf-sublist__row:hover > *,
.mf-sublist > .mf-sublist__row:focus > *,
.mf-sublist > .mf-sublist__row--clickable:hover > *,
.mf-sublist > .mf-sublist__row--clickable:focus > *,
.mf-sublist > .mf-sublist__row:hover .mf-sublist__strong,
.mf-sublist > .mf-sublist__row:focus .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:hover .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:focus .mf-sublist__strong,
.mf-sublist > .mf-sublist__row:hover .status-check,
.mf-sublist > .mf-sublist__row:focus .status-check,
.mf-sublist > .mf-sublist__row--clickable:hover .status-check,
.mf-sublist > .mf-sublist__row--clickable:focus .status-check {
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}

/* =========================================================
   Patch 2026-06-03 v3 - definitieve rijmaatvoering lijstcomponenten
   Referentie: actuele hoofdmodule-index (.list-table), bijvoorbeeld Bedrijven > index.
   Meting/uitgangspunt: kopregel = 16px line-height + 2x 11px padding = 38px;
   inhoudsregel = 18px line-height + 2x 11px padding = 40px.
   Sublijsten (.mf-sublist) gebruiken technisch een grid, maar volgen exact dezelfde
   verticale maatvoering, typografie, border en hover als .list-table.
   ========================================================= */
.list-table th,
.list-table td {
    padding: 11px 13px;
    border-bottom: 1px solid var(--mf-border-soft, #e5edf2);
    vertical-align: middle;
}

.list-table th {
    color: var(--mf-text-muted, #64748b);
    font-size: 11px;
    line-height: 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #f7fafb;
}

.list-table td {
    color: var(--mf-text, #263d45);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.mf-sublist > .mf-sublist__header,
.mf-sublist > .mf-sublist__row {
    align-items: stretch;
    min-height: 0;
    border-top: 0;
    border-bottom: 1px solid var(--mf-border-soft, #e5edf2);
}

.mf-sublist > .mf-sublist__header {
    background: #f7fafb;
}

.mf-sublist > .mf-sublist__header > * {
    box-sizing: border-box;
    min-width: 0;
    padding: 11px 13px;
    color: var(--mf-text-muted, #64748b);
    font-size: 11px;
    line-height: 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mf-sublist > .mf-sublist__row > * {
    box-sizing: border-box;
    min-width: 0;
    padding: 11px 13px;
    color: var(--mf-text, #263d45);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.mf-sublist > .mf-sublist__empty,
.mf-sublist .pagination-bar {
    min-height: 0;
    padding: 11px 13px;
    border-top: 0;
    border-bottom: 1px solid var(--mf-border-soft, #e5edf2);
    color: var(--mf-text, #263d45);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.mf-sublist .pagination-bar__summary {
    font-size: 13px;
    line-height: 18px;
    font-weight: 900;
}

.list-table tbody tr:not(.list-table__empty-row):not(.list-table__footer-row):hover td,
.list-table tbody tr:not(.list-table__empty-row):not(.list-table__footer-row):focus-within td,
.list-table__row--clickable:hover td,
.list-table__row--clickable:focus td,
.mf-sublist > .mf-sublist__row:hover,
.mf-sublist > .mf-sublist__row:focus,
.mf-sublist > .mf-sublist__row--clickable:hover,
.mf-sublist > .mf-sublist__row--clickable:focus {
    background: var(--mf-teal-soft, #e8f7f4);
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
    outline: none;
}

.list-table tbody tr:not(.list-table__empty-row):not(.list-table__footer-row):hover td *,
.list-table tbody tr:not(.list-table__empty-row):not(.list-table__footer-row):focus-within td *,
.list-table__row--clickable:hover td *,
.list-table__row--clickable:focus td *,
.mf-sublist > .mf-sublist__row:hover > *,
.mf-sublist > .mf-sublist__row:focus > *,
.mf-sublist > .mf-sublist__row--clickable:hover > *,
.mf-sublist > .mf-sublist__row--clickable:focus > *,
.mf-sublist > .mf-sublist__row:hover .mf-sublist__strong,
.mf-sublist > .mf-sublist__row:focus .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:hover .mf-sublist__strong,
.mf-sublist > .mf-sublist__row--clickable:focus .mf-sublist__strong,
.mf-sublist > .mf-sublist__row:hover .status-check,
.mf-sublist > .mf-sublist__row:focus .status-check,
.mf-sublist > .mf-sublist__row--clickable:hover .status-check,
.mf-sublist > .mf-sublist__row--clickable:focus .status-check {
    color: var(--mf-teal-dark, #0f766e);
    text-decoration: none;
}

/* =========================================================
   Patch 2026-06-07 - standaard verticale uitlijning edit-velden
   Referentie: Bedrijven > Bewerken.
   Doel: labels en invoervelden in edit/create-detailkaarten gebruiken dezelfde
   rijuitlijning. Labels staan verticaal gecentreerd naast input/select/date/number,
   zodat nieuwe modules zoals Opdrachten niet afwijken door een oudere
   vertical-align: top op .data-table/.field-table.
   ========================================================= */
body[class*="-edit-page"] .data-table td,
body[class*="-edit-page"] .data-table th,
body[class*="-edit-page"] .field-table td,
body[class*="-edit-page"] .field-table th,
body[class*="-edit-page"] .form-field-table td,
body[class*="-edit-page"] .form-field-table th {
    vertical-align: middle;
}

body[class*="-edit-page"] .data-table input,
body[class*="-edit-page"] .data-table select,
body[class*="-edit-page"] .field-table input,
body[class*="-edit-page"] .field-table select,
body[class*="-edit-page"] .form-field-table input,
body[class*="-edit-page"] .form-field-table select {
    min-height: 34px;
}

body[class*="-edit-page"] .data-table td:first-child,
body[class*="-edit-page"] .field-table td:first-child,
body[class*="-edit-page"] .form-field-table td:first-child,
body[class*="-edit-page"] .field-label {
    vertical-align: middle;
}

/* =========================================================
   MijnFlexurance - View/edit actionbar spacing normalisatie
   ---------------------------------------------------------
   Doel: de afstand tussen de witte actionbar en de donkere
   recordcontextbalk is applicatiebreed gelijk. .page-content
   mag boven de recordmodule geen extra top-margin toevoegen
   wanneer deze direct na de actionbar of page-separator komt.
   ========================================================= */
body[class*="-view-page"] .page-action-bar + .page-content,
body[class*="-edit-page"] .page-action-bar + .page-content,
body[class*="-view-page"] .page-action-bar + .page-separator + .page-content,
body[class*="-edit-page"] .page-action-bar + .page-separator + .page-content {
    margin-top: 0;
}

body[class*="-view-page"] .page-action-bar + .page-content > .record-module-shell:first-child,
body[class*="-edit-page"] .page-action-bar + .page-content > .record-module-shell:first-child,
body[class*="-view-page"] .page-action-bar + .page-separator + .page-content > .record-module-shell:first-child,
body[class*="-edit-page"] .page-action-bar + .page-separator + .page-content > .record-module-shell:first-child {
    margin-top: 0;
}



/* MijnFlexurance 2026-06-12 - Opdrachten / Tariefregels */
.mf-sublist--assignment-tariffs > .mf-sublist__header,
.mf-sublist--assignment-tariffs > .mf-sublist__row {
    grid-template-columns: 82px minmax(145px, .9fr) minmax(150px, 1fr) minmax(260px, 1.9fr) 110px 120px;
}
.assignment-version-context { margin: 0 0 12px; padding: 10px 14px; background: #f7fafb; border: 1px solid var(--mf-border-soft, #e5edf2); border-radius: 6px; font-size: 13px; line-height: 18px; font-weight: 700; }