/* =============================================================================
   F4C BEHEERPANEEL — COMPONENTLAAG
   Vervangt de componentdelen van public/css/variables.css (regels 124-800),
   public/css/custom.css (badges, container, nagebouwde utilities) en
   public/css/dashboard.css (in zijn geheel).

   REGELS VOOR DIT BESTAND
   1. NUL hardgecodeerde kleuren. Elke kleur komt uit een token in variables.css.
      Te controleren met:  grep -nE '#[0-9a-fA-F]{3,8}|rgba?\(' components.css
      Dat hoort nul treffers te geven.
   2. NUL !important. Een !important in een LAGERE laag wint van een !important
      in een hogere laag én van normale ongelaagde regels — dat zou precies het
      probleem terugbrengen dat dark-mode.css veroorzaakte (193x !important).
   3. Alles staat in @layer f4c.components, dus dit bestand verliest van de
      <style>-blokken in de views. Dat is de bedoeling: geen regressies op dag
      één, migreren = een <style>-blok verwijderen.
   4. Geen enkele donkere-modusregel. Elke component leest tokens die zelf
      omklappen. Een `html.dark`-blok in dit bestand zou betekenen dat de
      tokens niet kloppen.

   De oude klassennamen zijn bewust behouden (.btn, .card, .table, .badge,
   .status-*, .alert-*, .modal-*, .form-*) zodat bestaande views meteen
   meeprofiteren zonder markup-wijziging.
   ============================================================================= */

@layer tw.base, tw.components, f4c.shell, f4c.components, tw.utilities;

@layer f4c.components {

/* =============================================================================
   PAGINASCHIL
   ============================================================================= */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width) solid var(--border);
}

.page-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
}

.page-subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--text-base);
    color: var(--fg-muted);
    max-width: var(--measure);
}

/* Kopregel binnen een pagina. Hiërarchie via grijs, niet via grootte. */
.section-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
}

/* Balk boven een lijst: zoeken links, telling en acties rechts. */
.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.toolbar-spacer { margin-left: auto; }

.toolbar-count {
    font-size: var(--text-2xs);
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}


/* =============================================================================
   KNOPPEN
   Eén systeem vervangt de zeven die er nu zijn (.btn, .button, .proj-btn,
   .inv-btn, .fr-btn, .settings-btn, .roles-btn en kale utility-strings).
   Geen gradients: de indigo verloop-knop is de reden dat `color: var(--white)`
   in donkere modus donkergrijze tekst op indigo geeft.
   ============================================================================= */

.btn,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-md);
    padding: 0 var(--space-3);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--fg-secondary);
    transition: background-color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

.btn:disabled,
.button:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* --- Primair ------------------------------------------------------------- */
/* Gebruikt var(--accent) als VULLING, niet de --primary-color alias: die wijst
   in donkere modus naar de lichtere tekstvariant. */
.btn-primary,
.button-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.btn-primary:hover:not(:disabled),
.button-primary:hover:not(:disabled) {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--on-accent);
}

.btn-primary:active:not(:disabled) {
    background-color: var(--accent-active);
    border-color: var(--accent-active);
}

/* --- Secundair ----------------------------------------------------------- */
.btn-secondary,
.button-secondary {
    background-color: var(--surface);
    border-color: var(--border-control);
    color: var(--fg-secondary);
}

.btn-secondary:hover:not(:disabled),
.button-secondary:hover:not(:disabled) {
    background-color: var(--surface-hover);
    color: var(--fg);
}

/* --- Ghost (tabelacties, tertiair) --------------------------------------- */
.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--fg-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--surface-hover);
    color: var(--fg);
}

/* --- Gevaar --------------------------------------------------------------- */
/* .btn-danger was tekstkleur met een hover-vlak; .btn-danger-solid is de
   gevulde bevestigingsknop. Het oude bestand gebruikte drie verschillende
   roden in één regel (--error-color, --accent-rose-light en #dc2626). */
.btn-danger,
.button-danger {
    background-color: transparent;
    border-color: transparent;
    color: var(--fg-danger);
}

.btn-danger:hover:not(:disabled),
.button-danger:hover:not(:disabled) {
    background-color: var(--bg-danger);
    color: var(--fg-danger);
}

.btn-danger-solid {
    background-color: var(--danger-solid);
    border-color: var(--danger-solid);
    color: var(--on-danger);
}

.btn-danger-solid:hover:not(:disabled) {
    background-color: var(--danger-solid-hover);
    border-color: var(--danger-solid-hover);
}

/* --- Tekstknop / link ----------------------------------------------------- */
.btn-link {
    height: auto;
    padding: var(--space-0-5) var(--space-1);
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--accent-text);
    text-decoration: none;
    cursor: pointer;
}

.btn-link:hover:not(:disabled) {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link.text-danger,
.btn-link-danger {
    color: var(--fg-danger);
}

.btn-link.text-danger:hover,
.btn-link-danger:hover {
    color: var(--fg-danger);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Maten ---------------------------------------------------------------- */
.btn-sm,
.button-small {
    height: var(--control-sm);
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    gap: var(--space-1);
}

.btn-lg { height: var(--control-lg); padding: 0 var(--space-4); }

.btn-block { width: 100%; }

/* Icoon schaalt mee met de knop in plaats van vast 20px te zijn.
   In forms/edit staat nu een 20px-icoon in een 12px-knop. */
.btn .icon,
.button .icon,
.btn svg,
.button svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.btn-sm .icon,
.button-small .icon,
.btn-sm svg,
.button-small svg { width: 0.9375em; height: 0.9375em; }

.btn-icon {
    width: var(--control-md);
    padding: 0;
}

.btn-icon.btn-sm { width: var(--control-sm); }

.button-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}


/* =============================================================================
   FORMULIERVELDEN
   Deze laag staat boven tw.base, dus dit verslaat eindelijk de element-selectors
   van @tailwindcss/forms. Belangrijk: padding-right blijft gereserveerd voor de
   select-chevron — die reservering wordt nu op drie pagina's gewist door een
   padding-shorthand, waardoor de optietekst onder het pijltje doorloopt.
   ============================================================================= */

.form-group { margin-bottom: var(--space-5); }

.form-label {
    display: block;
    margin-bottom: var(--space-1-5);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--fg-secondary);
}

.form-label .required,
.form-required { color: var(--fg-danger); }

.form-input,
.form-control,
.form-textarea,
.form-select,
.search-input,
.filter-select {
    display: block;
    width: 100%;
    min-height: var(--control-md);
    padding: var(--space-1-5) var(--space-3);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--fg);
    background-color: var(--surface);
    border: var(--border-width) solid var(--border-control);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}

.form-input::placeholder,
.form-control::placeholder,
.form-textarea::placeholder,
.search-input::placeholder {
    color: var(--fg-muted);
    opacity: 1;
}

.form-input:hover:not(:disabled),
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: var(--fg-muted);
}

/* Eén focusstijl voor de hele applicatie. */
.form-input:focus,
.form-control:focus,
.form-textarea:focus,
.form-select:focus,
.search-input:focus,
.filter-select:focus {
    outline: 2px solid transparent;
    outline-offset: 0;
    border-color: var(--accent);
    box-shadow: var(--focus-ring-inset);
}

.form-input:disabled,
.form-control:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: var(--surface-sunken);
    color: var(--fg-muted);
    border-color: var(--border);
    cursor: not-allowed;
}

textarea.form-input,
textarea.form-control,
.form-textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Select: NATIEVE chevron, bewust geen appearance:none.
   Reden: @tailwindcss/forms zet appearance:none plus een eigen chevron als
   background-image én reserveert daar padding-right: 2.5rem voor. Die
   reservering wordt op drie pagina's gewist door een padding-shorthand
   (forms/edit:1424, projects/edit:97 en :110, supporters/edit:140), waardoor
   de optietekst onder het pijltje doorloopt. Door de native pijl te houden
   reserveert de browser die ruimte zelf en is de hele klasse bugs weg.
   De pijl krijgt de juiste kleur via `color-scheme` op <html> (variables.css). */
.form-select,
.filter-select {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
    background-color: var(--surface);
    padding-right: var(--space-2);
    cursor: pointer;
}

/* Foutstaat */
.form-input.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
.form-input[aria-invalid="true"],
.form-control[aria-invalid="true"] {
    border-color: var(--fg-danger);
}

.form-input.is-invalid:focus,
.form-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 2px var(--fg-danger);
}

.error-message,
.form-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--fg-danger);
}

.form-help,
.form-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--fg-muted);
    max-width: var(--measure);
}

/* Aanvinkvakken en keuzerondjes — NATIEF, gekleurd via accent-color.
   dark-mode.css noemde input[type=checkbox] nergens, dus die bleven wit met een
   grijze rand in donkere modus; op projects/edit staan bovendien drie
   verschillende maten naast elkaar (w-[18px], w-4 en de 16px van de plugin).
   accent-color + color-scheme lost dat op zonder één data-URI en zonder
   appearance:none — de browser tekent het vinkje, wij kiezen alleen de kleur.
   Dat houdt ook het native focus- en high-contrast-gedrag intact. */
input[type="checkbox"],
input[type="radio"],
.form-checkbox,
.form-radio {
    accent-color: var(--accent);
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
.form-checkbox:disabled,
.form-radio:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Voortgangsbalken en bereikschuiven volgen dezelfde accentkleur. */
progress,
input[type="range"] { accent-color: var(--accent); }

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--fg-secondary);
    cursor: pointer;
}

/* Raster. 12 kolommen in plaats van 6, zodat twee of drie .col-span-4 naast
   elkaar passen — nu is 4+4=8 > 6 en breekt de tweede naar een nieuwe rij op
   vier plekken in forms/edit en twee in forms/create. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
}

.form-grid > .form-group { margin-bottom: 0; }

.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-6  { grid-column: span 6; }
.col-span-8  { grid-column: span 8; }
.col-span-12,
.form-group.full-width { grid-column: span 12; }

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

/* Zoeken en filteren */
.search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.search-box {
    position: relative;
    flex: 0 1 20rem;
    min-width: 12rem;
}

.search-box .search-input { padding-left: var(--space-8); }

.search-icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: var(--fg-muted);
    pointer-events: none;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filter-select { width: auto; min-width: 9rem; }


/* =============================================================================
   KAARTEN — rand vóór schaduw
   Kaarten krijgen 1px rand en géén schaduw. In donkere modus draagt de rand de
   scheiding sowieso, want schaduw leest daar niet.
   ============================================================================= */

.card,
.content-card {
    background-color: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--border);
}

.card-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
}

.card-subtitle {
    margin: var(--space-0-5) 0 0;
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.card-body { padding: var(--space-5); }

.card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: var(--border-width) solid var(--border);
    background-color: var(--surface-sunken);
}

/* Een tabel in een kaart krijgt geen dubbele padding: bij 9 kolommen
   (bank/index) kost 2x24px een hele kolom. */
.card-body.is-flush { padding: 0; }


/* =============================================================================
   TABELLEN — het hart van dit paneel
   Rijhoogte van ~49px naar 36px: op 1080p gaan de lijsten van ~13 naar ~20
   zichtbare rijen. Dat telt, want 12 van de 18 lijsten pagineren niet en
   filteren client-side over de volledig gerenderde DOM.
   ============================================================================= */

.table-container,
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table,
.data-table,
.users-table,
.activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.table th,
.data-table th,
.users-table th,
.activity-table th,
.activity-table .table-header th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    color: var(--fg-muted);
    background-color: var(--surface-sunken);
    border-bottom: var(--border-width) solid var(--border);
}

.table td,
.data-table td,
.users-table td,
.activity-table td,
.activity-table .table-row td {
    height: var(--row-height);
    padding: var(--space-1-5) var(--space-3);
    vertical-align: middle;
    color: var(--fg);
    border-bottom: var(--border-width) solid var(--border);
}

/* Eerste en laatste cel lijnen uit met de kaartrand. */
.table th:first-child,  .data-table th:first-child,
.table td:first-child,  .data-table td:first-child { padding-left: var(--space-4); }
.table th:last-child,   .data-table th:last-child,
.table td:last-child,   .data-table td:last-child  { padding-right: var(--space-4); }

.table tbody tr:hover,
.data-table tbody tr:hover,
.users-table tbody tr:hover,
.activity-table .table-row:hover {
    background-color: var(--surface-hover);
}

.table tbody tr:last-child td,
.data-table tbody tr:last-child td,
.users-table tbody tr:last-child td { border-bottom: none; }

.table tbody tr.is-selected,
.data-table tbody tr.is-selected {
    background-color: var(--surface-selected);
    box-shadow: inset 2px 0 0 0 var(--accent);
}

/* Geldkolommen: rechts, tabulair, niet afbreken. */
.table .is-numeric,
.data-table .is-numeric,
td.is-numeric,
th.is-numeric {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Actiekolom: zo smal mogelijk, rechts uitgelijnd. Vervangt de zes
   rij-actie-idiomen die er nu zijn (waaronder vijf kleuren op één rij in
   forms/index:281-322). */
.table .is-actions,
.data-table .is-actions,
td.is-actions,
th.is-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.table .is-actions .btn:not(.btn-danger):not(.btn-danger-solid):not(.btn-primary),
.data-table .is-actions .btn:not(.btn-danger):not(.btn-danger-solid):not(.btn-primary) {
    color: var(--fg-muted);
}

.table tbody tr:hover .is-actions .btn:not(.btn-danger):not(.btn-danger-solid):not(.btn-primary),
.data-table tbody tr:hover .is-actions .btn:not(.btn-danger):not(.btn-danger-solid):not(.btn-primary) {
    color: var(--fg-secondary);
}

/* Tekstcellen breken niet af — rijen die in hoogte verschillen maken een
   dichte tabel onrustig. Zet een title-attribuut op de cel. */
.table .is-truncate,
.data-table .is-truncate {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compacte dichtheid: data-density="compact" op <html>. */
html[data-density="compact"] .table td,
html[data-density="compact"] .data-table td,
html[data-density="compact"] .users-table td {
    height: var(--row-height-compact);
    padding-top: var(--space-0-5);
    padding-bottom: var(--space-0-5);
}

/* Twee-regelige cel: bespaart een kolom in users, supporters en het dashboard. */
.cell-stack { display: flex; flex-direction: column; gap: var(--space-0-5); }
.cell-primary { font-weight: var(--fw-medium); color: var(--fg); }
.cell-secondary { font-size: var(--text-2xs); color: var(--fg-muted); }

.user-cell { display: flex; align-items: center; gap: var(--space-2); }


/* =============================================================================
   BADGES EN STATUS-CHIPS
   Dit is de grootste leesbaarheidswinst in het hele traject. De oude regels
   zetten een hardgecodeerde donkere tekstkleur op een token-achtergrond die
   wél omklapte: 1,19:1 t/m 2,32:1 in donkere modus. Elke chip hieronder
   gebruikt een drieling die in beide thema's compleet is (minimaal 5,81:1).

   Badges worden rechthoekjes van 4px in plaats van pillen — de meest zichtbare
   identiteitswijziging, en meteen de reden dat het rustiger oogt.
   ============================================================================= */

.badge,
.status-badge,
.role-badge,
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-1-5);
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    line-height: var(--leading-snug);
    white-space: nowrap;
    border-radius: var(--radius-xs);
    border: var(--border-width) solid transparent;
    /* Standaard is neutraal. De rose gradient uit custom.css:524 was bedoeld
       voor de ticketteller in de zijbalk en maakte élke status- en
       prioriteitspil op /tickets dezelfde rode pil. Die teller heet nu
       .nav-count (zie onderaan). */
    background-color: var(--bg-neutral);
    color: var(--fg-neutral);
    border-color: var(--border-neutral);
}

/* --- Tonen ---------------------------------------------------------------- */
.badge-success, .chip-success, .status-success {
    background-color: var(--bg-success);
    color: var(--fg-success);
    border-color: var(--border-success);
}

.badge-warning, .chip-warning, .status-warning {
    background-color: var(--bg-warning);
    color: var(--fg-warning);
    border-color: var(--border-warning);
}

.badge-danger, .chip-danger, .status-danger {
    background-color: var(--bg-danger);
    color: var(--fg-danger);
    border-color: var(--border-danger);
}

.badge-info, .chip-info, .status-info {
    background-color: var(--bg-info);
    color: var(--fg-info);
    border-color: var(--border-info);
}

.badge-neutral, .chip-neutral {
    background-color: var(--bg-neutral);
    color: var(--fg-neutral);
    border-color: var(--border-neutral);
}

.badge-primary, .role-badge {
    background-color: var(--accent-subtle);
    color: var(--accent-text);
    border-color: var(--accent-border);
}

.role-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* --- Statustoewijzing -----------------------------------------------------
   LET OP — dit trekt twee tegenstrijdigheden recht en verandert dus wat
   gebruikers vandaag zien:
   1. .status-badge.open was amber (dashboard.css:279) terwijl .status-open
      groen was (variables.css:547). Beide worden nu INFO (blauw): 'open' is een
      in-behandeling-staat, geen succes.
   2. .status-geblokkeerd deelde zijn grijs met .status-closed. Geblokkeerd is
      nu GEVAAR (rood) en gesloten NEUTRAAL (grijs) — twee verschillende dingen
      horen niet dezelfde chip te zijn.
   -------------------------------------------------------------------------- */

.status-actief,
.status-active,
.status-resolved {
    background-color: var(--bg-success);
    color: var(--fg-success);
    border-color: var(--border-success);
}

.status-inactief,
.status-inactive {
    background-color: var(--bg-neutral);
    color: var(--fg-neutral);
    border-color: var(--border-neutral);
}

.status-geblokkeerd {
    background-color: var(--bg-danger);
    color: var(--fg-danger);
    border-color: var(--border-danger);
}

.status-open,
.status-badge.open {
    background-color: var(--bg-info);
    color: var(--fg-info);
    border-color: var(--border-info);
}

.status-in_progress,
.status-badge.in_progress,
.status-waiting_for_input,
.status-badge.waiting_for_input {
    background-color: var(--bg-warning);
    color: var(--fg-warning);
    border-color: var(--border-warning);
}

.status-badge.resolved {
    background-color: var(--bg-success);
    color: var(--fg-success);
    border-color: var(--border-success);
}

.status-closed,
.status-badge.closed {
    background-color: var(--bg-neutral);
    color: var(--fg-neutral);
    border-color: var(--border-neutral);
}

/* Prioriteiten */
.priority-low {
    background-color: var(--bg-neutral);
    color: var(--fg-neutral);
    border-color: var(--border-neutral);
}

.priority-medium {
    background-color: var(--bg-info);
    color: var(--fg-info);
    border-color: var(--border-info);
}

.priority-high {
    background-color: var(--bg-warning);
    color: var(--fg-warning);
    border-color: var(--border-warning);
}

.priority-urgent {
    background-color: var(--bg-danger);
    color: var(--fg-danger);
    border-color: var(--border-danger);
}

/* Statuspunt: betekenis blijft leesbaar zonder kleurwaarneming. */
.badge-dot::before,
.status-badge.has-dot::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
    flex-shrink: 0;
}

/* Teller in de navigatie — hernoemd van .badge zodat hij niet langer elke
   status- en prioriteitspil in de applicatie kaapt. */
.nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 var(--space-1);
    margin-left: auto;
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius-full);
    background-color: var(--danger-solid);
    color: var(--on-danger);
}

.nav-count-neutral {
    background-color: var(--bg-neutral);
    color: var(--fg-neutral);
}


/* =============================================================================
   MELDINGEN (ALERTS)
   .alert-success staat in 24 views en haalde in donkere modus 1,26:1.
   ============================================================================= */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--bg-neutral);
    color: var(--fg-neutral);
    border-color: var(--border-neutral);
}

.alert p:last-child { margin-bottom: 0; }

.alert-success {
    background-color: var(--bg-success);
    color: var(--fg-success);
    border-color: var(--border-success);
}

.alert-warning {
    background-color: var(--bg-warning);
    color: var(--fg-warning);
    border-color: var(--border-warning);
}

.alert-danger,
.alert-error {
    background-color: var(--bg-danger);
    color: var(--fg-danger);
    border-color: var(--border-danger);
}

.alert-info {
    background-color: var(--bg-info);
    color: var(--fg-info);
    border-color: var(--border-info);
}

.alert-icon { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; }

.alert-title { font-weight: var(--fw-semibold); }


/* =============================================================================
   MODALEN
   Eén contract. Er bestaan er nu twee (opacity/visibility + .show in
   variables.css, versus display:none/flex in users/index en orphans/index),
   en forms/submission.blade.php:347 gaat daardoor letterlijk niet open.
   ============================================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--ease),
                visibility var(--duration) var(--ease);
}

/* Beide openingscontracten werken nu: .show én een inline display. */
.modal.show,
.modal.is-open,
.modal[open] {
    opacity: 1;
    visibility: visible;
}

.modal.hidden { display: none; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background-color: var(--overlay);
}

.modal-content,
.modal-container {
    position: relative;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 34rem;
    /* max-height + overflow horen bij elkaar: zonder deze twee loopt een lange
       modaal (de veld-toevoegen-dialoog in forms/edit is ~145 regels) buiten
       beeld zonder scrollbalk. */
    max-height: min(90vh, 48rem);
    overflow: hidden;
    background-color: var(--surface-raised);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
}

.modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-sm { max-width: 24rem; }
.modal-lg { max-width: 48rem; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-shrink: 0;
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--border);
}

.modal-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
}

.modal-close,
.close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--control-sm);
    height: var(--control-sm);
    padding: 0;
    font-size: var(--text-lg);
    line-height: 1;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

.modal-close:hover,
.close-button:hover {
    background-color: var(--surface-hover);
    color: var(--fg);
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-5);
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    padding: var(--space-3) var(--space-5);
    border-top: var(--border-width) solid var(--border);
    background-color: var(--surface-sunken);
}


/* =============================================================================
   TABBLADEN
   ============================================================================= */

.tabs-nav {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    border-bottom: var(--border-width) solid var(--border);
    margin-bottom: var(--space-5);
}

.tab-button {
    position: relative;
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    color: var(--fg-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: calc(var(--border-width) * -1);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease);
}

.tab-button:hover { color: var(--fg); }

.tab-button.active-tab,
.tab-button[aria-selected="true"] {
    color: var(--accent-text);
    border-bottom-color: var(--accent);
}

.tab-button.inactive-tab { color: var(--fg-muted); }


/* =============================================================================
   LEGE STATEN
   Zes lijsten hebben er nu geen; de andere twaalf hebben tien varianten.
   ============================================================================= */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.empty-state-icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--space-1);
    color: var(--fg-disabled);
}

.empty-state-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--fg);
}

.empty-state-text {
    margin: 0;
    max-width: 34rem;
    font-size: var(--text-base);
    color: var(--fg-muted);
}

.empty-state-action { margin-top: var(--space-2); }

/* Lege staat binnen een tabel */
.empty-cell { padding: var(--space-8) var(--space-4); text-align: center; color: var(--fg-muted); }


/* =============================================================================
   DASHBOARD
   Vervangt public/css/dashboard.css. De :nth-child()-kleurtoewijzing vervalt:
   de kaarten worden conditioneel gerenderd op rechten, dus dezelfde kaart
   kreeg per rol een andere kleur. Kleur die per gebruiker verschuift, draagt
   geen betekenis.
   ============================================================================= */

.dashboard-welcome { margin-bottom: var(--space-6); }

.dashboard-welcome h1 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
}

.dashboard-welcome p { margin: 0; color: var(--fg-muted); }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.stats-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background-color: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease);
}

.stats-card:hover { border-color: var(--border-strong); }

.stats-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.stats-card-title {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
}

.stats-card-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--fg-muted);
}

.stats-card-value {
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}

.stats-card-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-0-5) var(--space-1-5);
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-xs);
    background-color: var(--bg-neutral);
    color: var(--fg-neutral);
}

.stats-card-badge.is-up   { background-color: var(--bg-success); color: var(--fg-success); }
.stats-card-badge.is-down { background-color: var(--bg-danger);  color: var(--fg-danger); }

/* .activity-card was een letterlijke kopie van .card; het is er nu een alias van. */
.activity-card {
    background-color: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--border);
}

.activity-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
}

.activity-content { padding: 0; }

/* Avatar. --white als TEKST was de bug: in donkere modus is dat #1f2937,
   dus donkergrijze initialen op een gekleurd vlak. */
.user-avatar,
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    line-height: 1;
    border-radius: var(--radius-full);
    background-color: var(--accent);
    color: var(--on-accent);
    overflow: hidden;
}

.user-avatar img,
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-lg { width: 2.5rem; height: 2.5rem; font-size: var(--text-sm); }

.profile-photo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-photo {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--border);
}


/* =============================================================================
   PAGINERING
   ============================================================================= */

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-sm);
    height: var(--control-sm);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--fg-secondary);
    text-decoration: none;
}

.pagination a:hover { background-color: var(--surface-hover); color: var(--fg); }

.pagination [aria-current="page"] {
    background-color: var(--accent-subtle);
    color: var(--accent-text);
    font-weight: var(--fw-medium);
}


/* =============================================================================
   OVERIGE PATRONEN
   ============================================================================= */

/* Definitielijst voor detailweergaven. Vervangt de zes label/waarde-patronen
   die nu naast elkaar bestaan. */
.detail-list { margin: 0; }

.detail-item {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--border);
}

.detail-item:last-child { border-bottom: none; }

.detail-label { font-size: var(--text-sm); color: var(--fg-muted); }
.detail-value { font-size: var(--text-base); color: var(--fg); margin: 0; }

@media (max-width: 640px) {
    .detail-item { grid-template-columns: 1fr; gap: var(--space-0-5); }
}

/* Dropdownmenu — zweeft, dus schaduw én rand (in donker draagt schaduw niets). */
.dropdown-menu {
    position: absolute;
    z-index: var(--z-dropdown);
    min-width: 11rem;
    padding: var(--space-1);
    background-color: var(--surface-raised);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-1-5) var(--space-2);
    font-size: var(--text-sm);
    text-align: left;
    color: var(--fg-secondary);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.dropdown-item:hover { background-color: var(--surface-hover); color: var(--fg); }
.dropdown-item.is-danger { color: var(--fg-danger); }
.dropdown-item.is-danger:hover { background-color: var(--bg-danger); }

.dropdown-divider {
    height: var(--border-width);
    margin: var(--space-1) 0;
    background-color: var(--border);
    border: none;
}

/* Voortgangsbalk (projecten, inzamelingen) */
.progress {
    height: 0.375rem;
    overflow: hidden;
    background-color: var(--surface-sunken);
    border-radius: var(--radius-full);
}

.progress-bar {
    height: 100%;
    background-color: var(--accent);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease);
}

/* Monospace voor IBAN, referenties, formuliercodes en audit-log-ID's */
.code,
.field-code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: var(--space-0-5) var(--space-1);
    background-color: var(--surface-sunken);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--fg-secondary);
}

/* Scheidingslijn */
.divider {
    height: var(--border-width);
    margin: var(--space-6) 0;
    background-color: var(--border);
    border: none;
}


/* =============================================================================
   UTILITIES
   Overgenomen uit het oude variables.css, maar ZONDER !important: dat zou
   binnen een laag de cascade omkeren en Tailwind-utilities verslaan.
   ============================================================================= */

.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-muted   { color: var(--fg-muted); }
.text-danger  { color: var(--fg-danger); }
.text-success { color: var(--fg-success); }
.text-numeric { font-variant-numeric: tabular-nums; }
.inline-form  { display: inline; }
.hidden-row   { display: none; }
.prose        { max-width: var(--measure); line-height: var(--leading-relaxed); }

.row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

@media (min-width: 768px) {
    .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-md-3 { flex: 0 0 25%;      max-width: 25%; }
    .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}


/* =============================================================================
   RESPONSIEF — één breedte, en touch-doelen van 44px
   ============================================================================= */

.content,
.container,
.page-container,
.orphans-container,
.supporters-container,
.users-container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--content-pad);
}

@media (max-width: 640px) {
    :root { --content-pad: 16px; }

    /* Bedieningselementen naar 44px voor aanraakbediening. */
    .btn, .button { height: 44px; padding-inline: var(--space-4); }
    .btn-sm, .button-small { height: 36px; }
    .btn-icon { width: 44px; }

    /* 16px voorkomt dat iOS bij focus inzoomt. */
    .form-input, .form-control, .form-select,
    .form-textarea, .search-input, .filter-select {
        min-height: 44px;
        font-size: var(--text-md);
    }

    .page-header { flex-direction: column; align-items: flex-start; }
    .button-group { width: 100%; }
    .button-group > .btn { flex: 1 1 auto; }
    .card-body, .modal-body { padding: var(--space-4); }
    .table th, .data-table th { position: static; }
    .row { flex-direction: column; }
    .col-md-2, .col-md-3, .col-md-4 { flex: 1 1 auto; max-width: 100%; }
}


/* =============================================================================
   AFDRUKKEN
   ============================================================================= */

@media print {
    .card, .content-card, .activity-card, .stats-card {
        border: var(--border-width) solid var(--border);
        box-shadow: none;
    }
    .table th, .data-table th { position: static; }
    .modal, .toolbar { display: none; }
}

/* =============================================================================
   DASHBOARD-RESTEN
   Zes klassen die alleen in de verwijderde dashboard.css bestonden en nog
   gebruikt worden door dashboard.blade.php. Getokeniseerd overgenomen.
   ============================================================================= */

.stats-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Tekst OP de gekleurde avatar: --on-accent, niet --white. Die laatste wijst
   naar --surface en zou in donkere modus donker-op-donker worden. */
.user-cell .user-avatar-text {
    color: var(--on-accent);
    font-weight: var(--fw-semibold);
    font-size: var(--text-xs);
}

.date-cell,
.unassigned,
.role-assignment {
    color: var(--fg-muted);
    font-size: var(--text-sm);
}

.ticket-link {
    color: var(--accent-text);
    text-decoration: none;
    font-weight: var(--fw-medium);
    transition: color var(--duration-fast) var(--ease);
}

.ticket-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

} /* einde @layer f4c.components */

/* =============================================================================
   BEWUST ONGELAAGD
   Tailwind levert col-span-* zelf en zet die utilities ongelaagd in de bundel.
   Ongelaagd wint van elke @layer, ongeacht specificiteit, dus een gelaagde
   terugval is dode code. Alleen binnen .form-grid, zodat een opzettelijke
   Tailwind-span buiten formulieren ongemoeid blijft.
   ============================================================================= */
@media (max-width: 640px) {
    .form-grid > * { grid-column: 1 / -1; }
}