/*
 * Dex Development huisstijl voor Filament.
 * Lichtblauw #A9CEF4 als secundaire/decoratieve kleur,
 * roze #F72585 is de primary-kleur (via AdminPanelProvider).
 */

:root {
    --dex-pink: #F72585;
    --dex-border: #E8EAF0;
    --dex-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.04);
    --dex-card-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(16, 24, 40, 0.08);
}

/* Pagina-achtergrond */
.fi-body {
    background-color: #F4F6FB;
}

/* Topbalk in lichtblauw */
.fi-topbar nav {
    background-color: #A9CEF4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Actief sidebar-item: lichtblauwe highlight */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: rgba(169, 206, 244, 0.35);
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #000000;
}

/* Sidebar-header (logo): blauw, aansluitend op de topbalk.
   Hoogte blijft 4rem (h-16); het logo schaalt daarbinnen. */
.fi-sidebar-header {
    background-color: #A9CEF4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Login-scherm: lichtblauwe achtergrond achter de kaart */
.fi-simple-layout {
    background-color: #A9CEF4;
}

.fi-simple-main {
    background-color: #FFFFFF;
}

/* ---------- Widgets & kaarten: clean en modern ---------- */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    background-color: #FFFFFF;
    border-radius: 1rem;
    border: 1px solid var(--dex-border);
    box-shadow: var(--dex-card-shadow);
    --tw-ring-color: transparent;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-section-header-heading,
.fi-ta-header-heading,
.fi-wi-stats-overview-header-heading {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0F172A;
}

/* Statkaarten */
.fi-wi-stats-overview-stat {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Alleen een kaart die ergens heen gaat (Filament maakt daar een <a> van)
   komt omhoog bij hover. Een kaart die niets doet hoort niet te bewegen. */
a.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--dex-card-shadow-hover);
    transform: translateY(-1px);
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748B;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
}

/* Widgets in dezelfde rij even hoog.
   Niet voor een <form>: een widget met knoppen (bv. Diensten zonder
   abonnement boven de abonnementenlijst) zet Filament de vensters van die
   knoppen in lege formulieren naast de kaart. Kregen die ook 100%, dan
   stond er onder de kaart twee keer de hoogte van het widget aan lege
   ruimte, zodat de pagina eindeloos door leek te scrollen, voorbij de
   topbalk en de zijbalk (24 september 2026). De vensters zelf staan vast
   op het scherm (position: fixed) en hebben die hoogte niet nodig. */
.fi-wi-widget {
    height: 100%;
}

.fi-wi-widget > :not(form) {
    height: 100%;
}

/* Chart vult de volledige kaarthoogte (gelijk aan de widget ernaast) */
.fi-wi-chart .fi-section {
    display: flex;
    flex-direction: column;
}

.fi-wi-chart .fi-section-content-ctn {
    flex: 1 1 auto;
    min-height: 0;
}

.fi-wi-chart .fi-section-content {
    height: 100%;
}

.fi-wi-chart .fi-section-content > div {
    height: 100%;
}

.fi-wi-chart .fi-section-content > div > div {
    position: relative;
    height: 100%;
    min-height: 300px;
}

/* Tabellen in widgets */
.fi-ta-header-cell {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94A3B8;
}

/* De kop zelf staat in een eigen span met `text-sm font-semibold
   text-gray-950` (vendor/filament/tables/.../header-cell.blade.php). Die won
   van de regel hierboven, waardoor elke kolomkop groot en zwart was in plaats
   van klein en grijs. Hier dus op het label zelf, zelfde maat en kleur als de
   labels van de statkaarten. */
.fi-ta-header-cell-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: #64748B;
}

.fi-ta-header {
    border-bottom: 1px solid var(--dex-border);
}

.fi-ta-row {
    transition: background-color 0.12s ease;
}

.fi-ta-row:hover {
    background-color: #FAFBFE;
}

.fi-ta-cell {
    font-variant-numeric: tabular-nums;
}

/* ---------- "Aan de slag"-checklist ---------- */

.dex-steps-percentage {
    font-size: 0.85rem;
    font-weight: 700;
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}

.dex-progress {
    height: 6px;
    width: 100%;
    margin-bottom: 1.25rem;
    border-radius: 9999px;
    background-color: #F1F5F9;
    overflow: hidden;
}

.dex-progress-bar {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--dex-pink), #FB6FB2);
    transition: width 0.5s ease;
}

.dex-steps {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .dex-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .dex-steps {
        grid-template-columns: repeat(5, 1fr);
    }
}

.dex-step {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--dex-border);
    background-color: #FFFFFF;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dex-step:hover {
    border-color: rgba(247, 37, 133, 0.4);
    box-shadow: var(--dex-card-shadow);
    transform: translateY(-1px);
}

.dex-step.is-done {
    background-color: #FAFBFD;
    border-color: #F1F3F8;
}

.dex-step.is-done:hover {
    transform: none;
    box-shadow: none;
}

.dex-step-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dex-step-check {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    color: #10B981;
}

.dex-step-number {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(247, 37, 133, 0.08);
    box-shadow: inset 0 0 0 1px rgba(247, 37, 133, 0.25);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--dex-pink);
}

.dex-step-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    color: #0F172A;
}

.dex-step:hover .dex-step-title {
    color: var(--dex-pink);
}

.dex-step.is-done .dex-step-title {
    color: #A6B0BF;
    text-decoration: line-through;
}

.dex-step-description {
    font-size: 0.75rem;
    line-height: 1.55;
    color: #64748B;
}

.dex-step.is-done .dex-step-description {
    color: #C3CAD6;
}

/* ---------- Printweergave (o.a. BTW-aangifte afdrukken) ---------- */

@media print {
    /* Navigatie en interactie-elementen verbergen */
    .fi-sidebar,
    .fi-topbar,
    .fi-sidebar-header,
    .fi-notifications,
    .dex-no-print {
        display: none !important;
    }

    /* Content over de volle breedte, zonder gekleurde achtergrond */
    .fi-body,
    .fi-layout,
    .fi-main-ctn {
        background-color: #FFFFFF !important;
    }

    .fi-main-ctn {
        overflow: visible !important;
    }

    .fi-main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Kaarten vlak en zuinig met inkt */
    .fi-section,
    .fi-ta-ctn,
    .fi-wi-stats-overview-stat {
        box-shadow: none !important;
        border: 1px solid #D1D5DB !important;
        break-inside: avoid;
    }
}

/* ---------- Compacte factuur-/offerteregels (LineRepeater) ---------- */

/* Minder ruimte tussen en binnen de regels, zodat 20+ regels op één scherm passen */
.fi-fo-repeater.dex-compact-lines {
    row-gap: 0.5rem !important;
}

.dex-compact-lines > ul {
    gap: 0.5rem !important;
}

.dex-compact-lines .fi-fo-repeater-item-header {
    padding: 0.125rem 0.5rem;
}

.dex-compact-lines .fi-fo-repeater-item-content {
    padding: 0.5rem 0.75rem;
}

/* Kolomkoppen boven de regels (één keer, i.p.v. labels per regel) */
.dex-line-head-row {
    padding: 0 0.85rem;
    margin-bottom: -0.5rem;
}

.dex-line-head-row .fi-fo-placeholder,
.dex-line-head-row p {
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280 !important;
    font-weight: 600;
}

@media (max-width: 1023px) {
    /* Op smalle schermen stapelen de velden; koppen kloppen dan niet meer */
    .dex-line-head-row {
        display: none !important;
    }
}

/* Regeltotaal rechts uitlijnen, in tabelcijfers */
.dex-line-total,
.dex-line-total p,
.dex-line-total .fi-fo-placeholder {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Factuurregels: het productveld toont ook de diensten van de klant, met
   prijs, verloopdatum en abonnement. Die keuzes zijn langer dan de smalle
   kolom breed is, dus de uitklaplijst mag breder zijn dan het veld. Op een
   telefoon niet breder dan het scherm min de marges (het veld begint daar
   zo'n 3rem van de rand), zodat er niets zijwaarts gaat schuiven. */
.dex-regel-keuze .choices__list--dropdown {
    min-width: min(30rem, calc(100vw - 6rem));
}

/* Een dienst heeft als keuze twee regels (DienstOpFactuur::label()): de
   naam, en daaronder grijs prijs, verloopdatum en abonnement. */
.dex-regel-keuze .choices__list--dropdown .choices__item--choice {
    white-space: pre-line;
    color: #6B7280;
}

.dex-regel-keuze .choices__list--dropdown .choices__item--choice::first-line {
    color: #111827;
    font-weight: 500;
}

/* In het veld zelf alleen de eerste regel, de naam, binnen het vak en met
   puntjes als hij niet past. De omschrijving ernaast zegt al wat er op de
   factuur komt. Zonder dit liep een dienst over vijf regels en buiten het
   veld. De placeholder breekt wel. */
.dex-regel-keuze .choices__list--single {
    max-width: 100%;
}

.dex-regel-keuze .choices__list--single .choices__item:not(.choices__placeholder) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* De oranje regel onder een factuurregel als de gekozen dienst al in een
   abonnement zit */
.dex-line-waarschuwing,
.dex-line-waarschuwing p,
.dex-line-waarschuwing .fi-fo-placeholder {
    font-size: 0.8rem;
    line-height: 1.25rem;
}

/* ---------- Tabellen passen ALTIJD binnen hun kaart (geen zijwaarts scrollen) ---------- */

/* 1. Compactere celpadding: px-3 → 0.5rem scheelt per kolom een kwart rem
      aan beide kanten — bij 7-8 kolommen al gauw 4 rem totaal. */
.fi-ta-table td > .px-3,
.fi-ta-table td .px-3.py-4,
.fi-ta-table th.fi-ta-header-cell {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* 2. Eén regel per cel, afgekapt met …; de cap schaalt mee met het scherm
      zodat de som van de kolommen binnen de kaart blijft. */
.fi-ta-table {
    width: 100%;
}

.fi-ta-text-item {
    max-width: 100%;
    min-width: 0;
}

.fi-ta-text-item-label {
    display: block;
    max-width: min(12rem, 16vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-ta-cell .text-sm.text-gray-500 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(12rem, 16vw);
}

.fi-ta-header-cell-label {
    white-space: nowrap;
}

/* 3. Dashboardwidgets: vaste kolomverdeling — de tabel is per definitie
      precies zo breed als de kaart, wat er ook in staat. */
.fi-wi-table .fi-ta-table {
    table-layout: fixed;
}

.fi-wi-table .fi-ta-cell {
    overflow: hidden;
}

.fi-wi-table .fi-ta-text-item-label,
.fi-wi-table .fi-ta-cell .text-sm.text-gray-500 {
    max-width: 100%;
}

/* Actiekolom in widgets: vaste breedte voor de icoontjes (anders krijgt
   die bij table-layout: fixed een gelijk-verdeeld, te smal deel). */
.fi-wi-table th.fi-ta-actions-header-cell {
    width: 7.5rem;
}

/* Tekstkolommen in widgettabellen kappen af met een beletselteken en lopen
   nooit door over de kolom ernaast.
   Let op de tussenlaag: Filament zet de tekst in een wrapper met
   max-width: max-content, dus die is per definitie zo breed als de tekst.
   Een max-width van 100% op het label alléén werkt dan niet — dat rekent
   tegen die wrapper en niet tegen de cel. Vandaar dat de hele keten hier
   op de celbreedte wordt teruggebracht. */
.fi-wi-table .fi-ta-text > div,
.fi-wi-table .fi-ta-text > div > div,
.fi-wi-table .fi-ta-text-item {
    min-width: 0;
    max-width: 100%;
}

.fi-wi-table .fi-ta-text-item-label,
.fi-wi-table .fi-ta-cell .text-sm.text-gray-500 {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Uitzondering: de afboeklijsten op "Openstaande posten" zijn wél widgets,
   maar staan op een volledige pagina. Daar past een actieknop
   gewoon — met de smalle dashboardbreedte hierboven werd het label
   afgesneden. */
.dex-afboeklijst .fi-wi-table th.fi-ta-actions-header-cell {
    width: 13rem;
}

/* Alléén de actiecel mag uitsteken. Zet je dat op álle cellen, dan houdt een
   lange klantnaam op met afkappen en loopt hij over de kolom ernaast heen. */
.dex-afboeklijst .fi-wi-table .fi-ta-actions-cell {
    overflow: visible;
}

/* Een actielabel breekt nooit midden in een woord af: liever een iets
   bredere kolom dan "Markeer beta…" of een knop van twee regels. */
.fi-ta-actions .fi-btn,
.fi-ta-actions .fi-link,
.fi-ta-actions .fi-link-label,
.fi-ta-actions .fi-btn-label {
    white-space: nowrap;
}

/* ---------- Tabelstandaard (zie App\Support\TableStandard) ---------- */

/* Bedragen en aantallen: rechts uitgelijnd met cijfers onder elkaar.
   TableStandard::money()/number() zetten deze klasse; alignEnd() doet de
   uitlijning al, dit houdt het expliciet en overleeft een Filament-update. */
.dex-num,
.dex-num .fi-ta-text-item-label,
.dex-num .text-sm.text-gray-500 {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Een tweede regel onder een bedrag (bv. "BTW € 12,34") hoort mee naar rechts,
   anders staat de kolom scheef. */
.dex-num .fi-ta-text-item {
    align-items: flex-end;
}

/* Eén rijhoogte voor álle tabellen: lijstweergaven, relatietabs en widgets.
   Filament varieert hier per context (py-4 vs py-3); dat gaf zichtbaar
   verschillende dichtheid tussen schermen. */
.fi-ta-table td > .px-3,
.fi-ta-table td .px-3.py-4 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

.fi-ta-table th.fi-ta-header-cell {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Actiekolom: vaste, krappe breedte. Eén ActionGroup (drie puntjes) heeft
   niet meer nodig, en zo blijft de ruimte naar de datakolommen gaan. */
th.fi-ta-actions-header-cell {
    width: 4rem;
}

.fi-ta-actions {
    justify-content: flex-end;
}

/* Filtertabs slaan om naar een tweede regel in plaats van zijwaarts te
   scrollen. Filament zet hier standaard overflow-x-auto op; bij de facturen
   (11 tabs) en inkoopfacturen (kwartalen) liep de balk daardoor buiten beeld
   en waren de laatste tabs onvindbaar. Omslaan houdt álle tabs zichtbaar —
   beter dan tabs schrappen om de breedte te halen. */
.fi-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 0.25rem;
}

/* Tabbalk boven een lijst of pagina: dezelfde kaart als de tabel eronder
   (Filament gebruikt hier een kleinere ronding met een ring). */
.fi-tabs:not(.fi-contained) {
    border-radius: 1rem;
    border: 1px solid var(--dex-border);
    box-shadow: var(--dex-card-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

/* Tabs binnen een formulier (bv. Instellingen → Algemeen) zijn onderstreept,
   zodat ze niet lijken op de tabbalk van de pagina erboven. */
.fi-fo-tabs.fi-contained {
    border-radius: 1rem;
    border: 1px solid var(--dex-border);
    box-shadow: var(--dex-card-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-tabs.fi-contained {
    padding: 0 1.5rem;
    column-gap: 1.75rem;
}

.fi-tabs.fi-contained .fi-tabs-item {
    border-radius: 0;
    padding: 0.875rem 0 0.75rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    background-color: transparent;
}

.fi-tabs.fi-contained .fi-tabs-item.fi-active {
    background-color: transparent;
    border-bottom-color: rgb(var(--primary-600));
}

/* ---------- Pakketten: onderdelen horen zichtbaar bij hun pakket ----------
 *
 * Een pakket (bv. "Online aanwezigheid") is één factuurregel; de diensten
 * eronder — domein, hosting, mailbox — houden wel hun eigen verloopdatum en
 * leverancier, maar hebben geen eigen prijs en komen niet apart op de
 * factuur. In de tabel stonden ze als gelijke rijen naast het pakket, dus dat
 * verband was alleen te zien door de grijze tweede regel te lezen.
 *
 * De klassen komen uit CustomerServiceResource::bundleRowClass(); hieronder
 * staat alleen de opmaak. Roze blijft accent (het pakket-icoon zelf, via de
 * primary-kleur); de lijn en de tint zijn neutraal grijs, anders wordt een
 * klant met vijf pakketten één streepjespatroon.
 */

/* Kop en onderdelen delen dezelfde tint, zodat het pakket als één blok
   oplicht tegen de witte rijen eromheen. */
.fi-ta-row.dex-pakket-kop,
.fi-ta-row.dex-pakket-onderdeel {
    background-color: #FBFCFE;
}

.fi-ta-row.dex-pakket-kop:hover,
.fi-ta-row.dex-pakket-onderdeel:hover {
    background-color: #F3F6FC;
}

/* Een aangevinkte rij houdt zijn eigen markering: Filament zet daar
   `bg-gray-50` op, en dat verliest het zonder deze regel van de tint
   hierboven (beide één klasse zwaar, deze staat later in het bestand). */
.fi-ta-row.dex-pakket-kop.bg-gray-50,
.fi-ta-row.dex-pakket-onderdeel.bg-gray-50 {
    background-color: #F9FAFB;
}

/* Het onderdeel springt in, met een verbindingslijn die over de rijen heen
   doorloopt tot één spoor onder de pakketkop. De celpadding is verderop in
   dit bestand met !important vastgezet, dus die moet hier ook mee. */
.fi-ta-row.dex-pakket-onderdeel .fi-table-cell-name .fi-ta-text {
    margin-left: 0.5rem;
    padding-left: 0.75rem !important;
    border-left: 2px solid var(--dex-border);
}

/* ---------- Bankboek: de kleur van een bankregel ----------
 *
 * In het bankboek (Boekhouding → Boeken → een afschrift) krijgt elke regel
 * een kleur naar de zekerheid van de match: groen kan blind door, geel moet je
 * nakijken, rood heeft nog geen voorstel en grijs is genegeerd. De klasse komt
 * van MatchQuality::rowClass() via ->recordClasses() op de tabel.
 *
 * De kleur is nooit de énige aanwijzing: de kolom Status draagt hetzelfde in
 * tekst (het label uit MatchQuality) en onder de tabel staat een legenda. Dat
 * is geen overdaad maar een voorwaarde — een op de twaalf mannen ziet rood en
 * groen niet als twee verschillende kleuren.
 *
 * Opmaak: een zachte linkerrand plus een lichte achtergrond. De rand staat als
 * inset box-shadow op de eerste cel en niet als border, want een border
 * verschuift de hele rij een paar pixels. De kleuren zijn die van de rest van
 * de app: groen = klaar, geel = nakijken, rood = probleem. Roze is nooit een
 * status (zie de UI-standaard in CLAUDE.md), dus rood is hier écht rood. */

:root {
    --dex-bank-groen: #22C55E;
    --dex-bank-groen-vlak: #F4FBF7;
    --dex-bank-geel: #F59E0B;
    --dex-bank-geel-vlak: #FFFAEB;
    --dex-bank-rood: #EF4444;
    --dex-bank-rood-vlak: #FEF3F3;
    --dex-bank-grijs: #CBD5E1;
    --dex-bank-grijs-vlak: #F8FAFC;
}

.fi-ta-row.dex-bankregel-groen > td,
.fi-ta-row.dex-bankregel-groen > th {
    background-color: var(--dex-bank-groen-vlak);
}

.fi-ta-row.dex-bankregel-geel > td,
.fi-ta-row.dex-bankregel-geel > th {
    background-color: var(--dex-bank-geel-vlak);
}

.fi-ta-row.dex-bankregel-rood > td,
.fi-ta-row.dex-bankregel-rood > th {
    background-color: var(--dex-bank-rood-vlak);
}

.fi-ta-row.dex-bankregel-grijs > td,
.fi-ta-row.dex-bankregel-grijs > th {
    background-color: var(--dex-bank-grijs-vlak);
}

.fi-ta-row.dex-bankregel-groen > *:first-child {
    box-shadow: inset 0.25rem 0 0 0 var(--dex-bank-groen);
}

.fi-ta-row.dex-bankregel-geel > *:first-child {
    box-shadow: inset 0.25rem 0 0 0 var(--dex-bank-geel);
}

.fi-ta-row.dex-bankregel-rood > *:first-child {
    box-shadow: inset 0.25rem 0 0 0 var(--dex-bank-rood);
}

.fi-ta-row.dex-bankregel-grijs > *:first-child {
    box-shadow: inset 0.25rem 0 0 0 var(--dex-bank-grijs);
}

/* Een genegeerde regel is afgehandeld en hoeft niet meer te roepen. */
.fi-ta-row.dex-bankregel-grijs {
    opacity: 0.75;
}

/* Het bolletje in de legenda onder de tabel. Zelfde klasse als de rij, dus de
   legenda kan niet uit de pas lopen met de kleuren erboven. */
.dex-bankregel-stip {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
}

.dex-bankregel-stip.dex-bankregel-groen {
    background-color: var(--dex-bank-groen);
}

.dex-bankregel-stip.dex-bankregel-geel {
    background-color: var(--dex-bank-geel);
}

.dex-bankregel-stip.dex-bankregel-rood {
    background-color: var(--dex-bank-rood);
}

.dex-bankregel-stip.dex-bankregel-grijs {
    background-color: var(--dex-bank-grijs);
}

/* ---------- Uitklapmenu's en keuzelijsten blijven altijd bereikbaar ----------
 *
 * Het beeld waar dit over gaat: een menu of keuzelijst die onderin het scherm
 * opengaat loopt buiten beeld en heeft geen eigen scrollbalk, terwijl de
 * pagina al helemaal is uitgescrold. De onderste optie is dan niet aan te
 * klikken. Dat kwam niet van één scherm maar van drie structurele oorzaken,
 * die hieronder alle drie worden weggenomen.
 *
 * Bewust op de Filament-klassen geschreven (fi-dropdown-panel, choices,
 * fi-ta-ctn) en niet per pagina: elk nieuw formulier en elke nieuwe lijst valt
 * er daardoor automatisch onder. `tests/Feature/DropdownScrollTest.php` legt
 * vast dat deze regels blijven staan.
 */

/* Oorzaak 1 — een paneel zonder maximumhoogte.
 * Filament zet `overflow-y: auto` op een uitklappaneel alléén als de code er
 * een maxHeight bij geeft (zie de @class in
 * vendor/filament/support/resources/views/components/dropdown/index.blade.php).
 * Het rij-actiemenu, het gebruikersmenu, de tabs-overloop en de blokkiezer
 * geven die niet mee, dus die panelen zijn precies zo hoog als hun inhoud
 * lang is. Een maximum ten opzichte van de vensterhoogte houdt het paneel
 * binnen beeld en geeft het een eigen scrollbalk. De tweede regel met `dvh`
 * is een verfijning voor mobiel Safari, waar `vh` de adresbalk meerekent;
 * browsers die `dvh` niet kennen negeren hem en houden de `vh`-regel. */
.fi-dropdown-panel {
    max-height: min(24rem, calc(100vh - 4rem));
    max-height: min(24rem, calc(100dvh - 4rem));
    overflow-y: auto;
    /* Aan het einde van de lijst niet doorschuiven naar de pagina eronder:
       op een touchscreen scrolde daardoor de pagina weg onder een open menu. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* De blokkiezer bevat een formulier in plaats van een rijtje knoppen. Daar
   is 24rem te krap en zou het hele ding onnodig gaan scrollen; die mag
   bijna het volledige venster vullen. Voor het filtermenu en de kolomkiezer
   geldt de regel hieronder. Een expliciete filtersFormMaxHeight() in de code
   blijft voorgaan: die zet Filament als inline stijl, en inline wint van dit
   bestand. */
.fi-fo-builder-block-picker .fi-dropdown-panel {
    max-height: min(36rem, calc(100vh - 5rem));
    max-height: min(36rem, calc(100dvh - 5rem));
}

/* Het filtermenu en de kolomkiezer staan in de werkbalk van een tabel en
   klappen onder de knop open, of erboven als er onder te weinig plek is.
   Mag het paneel bijna het hele venster vullen, dan past het vaak aan géén
   van beide kanten: erboven schoof het onder de vaste topbalk (4rem) en
   eronder liep het buiten beeld, en omdat de float-plugin bij elke scroll
   opnieuw kiest, bleef het bij scrollen weglopen (gezien bij Diensten, met
   tien filters). Hooguit de helft van het venster min de topbalk, de knop
   (1,25rem) en de afstand tot de knop past áltijd aan één van beide kanten,
   dus dan is het menu op elke scrollpositie helemaal te zien. Wat er niet
   in past, scrolt in het menu zelf. */
.fi-ta-filters-dropdown .fi-dropdown-panel,
.fi-ta-col-toggle .fi-dropdown-panel {
    max-height: max(12rem, min(36rem, calc(50vh - 3.5rem)));
    max-height: max(12rem, min(36rem, calc(50dvh - 3.5rem)));
}

/* De datum- en kleurkiezer zijn geen dropdown-panel maar hebben hetzelfde
   probleem: absoluut gepositioneerd, zonder maximum. Een kalender met
   tijdkolom is ruim 26rem hoog en viel op een laag venster (of een liggende
   iPad) onderaan weg. */
.fi-fo-date-time-picker-panel,
.fi-fo-color-picker-panel {
    max-height: min(26rem, calc(100vh - 3rem));
    max-height: min(26rem, calc(100dvh - 3rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Oorzaak 2 — de zoekbare keuzelijst klapte niet om.
 * Een Select met ->searchable() of ->multiple() is een Choices.js-veld
 * (`.choices` met de lijst in `.choices__list--dropdown`). Choices meet zelf
 * of de lijst nog onder het veld past en zet anders de klasse `is-flipped` op
 * de wrapper — zie `flippedState:"is-flipped"` en `shouldFlip()` in
 * vendor/filament/forms/dist/components/select.js. Alleen: Filament heeft voor
 * die klasse géén opmaak (grep `is-flipped` in forms/dist/index.css levert
 * niets op). De lijst bleef dus met `top: 100%` onder het veld hangen en liep
 * buiten beeld, terwijl het veld dénkt dat hij omgeklapt is. Dit is de
 * ontbrekende helft: daadwerkelijk omhoog uitklappen. */
.choices.is-flipped .choices__list--dropdown,
.choices.is-flipped .choices__list[aria-expanded] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* De lijst met opties staat in Filament vast op 15rem. Op een laag venster is
   dat meer dan het halve scherm, waardoor de lijst ook ná het omklappen niet
   paste. Hij mag nooit meer dan de helft van het venster innemen, en nooit
   minder dan ongeveer drie regels — met honderden opties blijft het een
   scrollbare lijst van dezelfde hoogte. */
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
    max-height: max(7.5rem, min(15rem, 50vh));
    max-height: max(7.5rem, min(15rem, 50dvh));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Oorzaak 3 — een voorouder kapte het paneel af.
 * De tabelkaart heeft `overflow: hidden` om de vierkante hoeken van de tabel
 * binnen de ronde kaart te houden (zie
 * vendor/filament/tables/resources/views/components/container.blade.php). Het
 * filtermenu, de kolomkiezer en de groeperingskeuze staan ín die kaart en
 * worden niet naar de body geteleporteerd: bij een tabel met weinig rijen
 * werd zo'n menu op de onderrand van de kaart afgekapt. Een scrollbalk in het
 * menu helpt daar niet, want het afkappen zit búiten het menu. Hetzelfde geldt
 * voor de keuzelijst van een zoekbaar filter.
 *
 * Het afkappen wordt alleen opgeheven zolang er echt iets open staat. Dat is
 * te zien aan de inline stijl die de float-plugin van Filament op een open
 * paneel zet (`display: block`, zie support/dist/index.js) en aan de klasse
 * `is-open` van Choices. Buiten dat moment blijft `overflow: hidden` gewoon
 * staan, dus de ronde hoeken en het horizontale gedrag van de tabel
 * veranderen niet. De kaart zelf scrolt nooit, dus deze wissel kan geen
 * scrollpositie kwijtmaken. */
.fi-ta-ctn:has(.fi-dropdown-panel[style*='display: block']),
.fi-ta-ctn:has(.fi-fo-date-time-picker-panel[style*='display: block']),
.fi-ta-ctn:has(.choices.is-open),
.fi-ta-content:has(.choices.is-open) {
    overflow: visible;
}

/* En één laag dieper hetzelfde: een keuzelijst ín het filtermenu mag buiten
   dat menu uitkomen. Zodra het menu zelf scrolt (veel filters op een laag
   venster) zou de lijst er anders tegen de onderrand van het menu doodlopen.
   Het maximum gaat daarbij mee eraf, anders staat de rest van het formulier
   zonder witte achtergrond over de pagina heen. Het menu verliest daarmee
   kortstondig zijn eigen scrollpositie; dat is het minst erge van de twee,
   want de onderste optie is anders helemaal niet aan te klikken. */
.fi-dropdown-panel:has(.choices.is-open) {
    max-height: none;
    overflow: visible;
}

/* ---------- Hulpklassen die Filament niet meelevert ---------- */

/*
 * Dit project heeft bewust geen Vite/npm-buildstap: de CSS is de kant-en-klare
 * stylesheet van Filament plus dit bestand. Filament levert alleen de Tailwind-
 * klassen mee die het zélf gebruikt, en een klasse die daar niet in zit doet in
 * een eigen Blade dus helemaal niets — zonder waarschuwing, want een onbekende
 * klasse is geen fout.
 *
 * Dat is een tijd onopgemerkt gebleven. De acht getallen boven het bankboek
 * stonden door `xl:grid-cols-8` niet naast maar ónder elkaar, en de gekleurde
 * meldingsblokken (BTW-aangifte, RGS, auditfile, bankboek) verloren hun
 * achtergrond, rand en tekstkleur: precies de kleur die zegt of iets een
 * waarschuwing of een bevestiging is.
 *
 * Hieronder staan exact de klassen die de Blades gebruiken en Filament niet
 * meelevert, met de waarden van Tailwind zelf. tests/Feature/BladeHulpklassenTest
 * bewaakt dat er geen nieuwe bijkomen.
 */

/* Raster — Tailwind-breekpunten sm 640 / md 768 / xl 1280 */
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:inline {
        display: inline;
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* Ruimte */
.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.375rem;
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2rem;
}

.first\:mt-0:first-child {
    margin-top: 0;
}

/* Afmetingen */
.h-2\.5 {
    height: 0.625rem;
}

.w-2\.5 {
    width: 0.625rem;
}

.w-12 {
    width: 3rem;
}

/* Randen */
.border-t-2 {
    border-top-width: 2px;
}

.rounded-sm {
    border-radius: 0.125rem;
}

.border-danger-200 {
    border-color: rgb(var(--danger-200));
}

.border-success-200 {
    border-color: rgb(var(--success-200));
}

.border-warning-200 {
    border-color: rgb(var(--warning-200));
}

/* Vlakken en tekstkleuren: de statuskleuren van Filament zelf, zodat een
   waarschuwing overal dezelfde kleur heeft als een waarschuwingsbadge. */
.bg-danger-50 {
    background-color: rgb(var(--danger-50));
}

.bg-success-50 {
    background-color: rgb(var(--success-50));
}

.bg-warning-50 {
    background-color: rgb(var(--warning-50));
}

.text-danger-700 {
    color: rgb(var(--danger-700));
}

.text-success-600 {
    color: rgb(var(--success-600));
}

.text-success-700 {
    color: rgb(var(--success-700));
}

.text-warning-500 {
    color: rgb(var(--warning-500));
}

.text-warning-600 {
    color: rgb(var(--warning-600));
}

.text-warning-700 {
    color: rgb(var(--warning-700));
}

.text-gray-900 {
    color: rgb(var(--gray-900));
}

/* Tekst */
.uppercase {
    text-transform: uppercase;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.leading-relaxed {
    line-height: 1.625;
}

.list-decimal {
    list-style-type: decimal;
}

.items-baseline {
    align-items: baseline;
}

.cursor-help {
    cursor: help;
}

.hover\:underline:hover {
    text-decoration-line: underline;
}

.hover\:opacity-80:hover {
    opacity: 0.8;
}

/* ---------- De acht getallen boven het bankboek ---------- */

/*
 * Eigen regel in plaats van losse rasterklassen, omdat het breekpunt hier niet
 * aan de vensterbreedte hangt maar aan wat er ná de zijbalk overblijft: op een
 * venster van 1280 is dat ruim duizend pixels, en dan brak "€ 2.816,47" over
 * twee regels. Acht kolommen dus pas als ze echt passen; daaronder vier, en op
 * een smal scherm twee.
 */
.dex-kopcijfers {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .dex-kopcijfers {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1600px) {
    .dex-kopcijfers {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* Een bedrag hoort nooit midden in het getal af te breken. */
.dex-kopcijfer-waarde {
    white-space: nowrap;
}

/* ==========================================================================
 * UI-standaard: bouwstenen die overal hetzelfde zijn
 *
 * Eén manier per onderdeel (zie "UI-standaard" in CLAUDE.md). Eigen Blades en
 * teksten die in PHP worden opgebouwd gebruiken deze klassen in plaats van
 * losse kleuren of inline styles, zodat een melding, een kerncijfer of een
 * tabel op elk scherm hetzelfde is.
 * ========================================================================== */

/* ---------- Meldingsblok: <x-dex.callout type="info|success|warning|danger"> ---------- */

.dex-callout {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dex-callout-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.dex-callout-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.dex-callout-title {
    font-weight: 600;
}

.dex-callout ul {
    margin-top: 0.25rem;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.dex-callout a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.dex-callout-info {
    background-color: rgb(var(--info-50));
    border-color: rgb(var(--info-200));
    color: rgb(var(--info-700));
}

.dex-callout-info .dex-callout-icon {
    color: rgb(var(--info-500));
}

.dex-callout-success {
    background-color: rgb(var(--success-50));
    border-color: rgb(var(--success-200));
    color: rgb(var(--success-700));
}

.dex-callout-success .dex-callout-icon {
    color: rgb(var(--success-500));
}

.dex-callout-warning {
    background-color: rgb(var(--warning-50));
    border-color: rgb(var(--warning-200));
    color: rgb(var(--warning-700));
}

.dex-callout-warning .dex-callout-icon {
    color: rgb(var(--warning-500));
}

.dex-callout-danger {
    background-color: rgb(var(--danger-50));
    border-color: rgb(var(--danger-200));
    color: rgb(var(--danger-700));
}

.dex-callout-danger .dex-callout-icon {
    color: rgb(var(--danger-500));
}

/* ---------- Accentblok: het onderwerpblok bovenaan een rapport ----------
 *
 * Lichtgrijs vlak met een roze randje links als opening. Bewust spaarzaam:
 * alleen voor het blok dat zegt waar een rapport over gaat (klant, leverancier,
 * product). Niet als melding en niet als versiering elders — dan verliest het
 * zijn functie. */

.dex-accent-block {
    border-radius: 0.5rem;
    background-color: #F8FAFC;
    border-left: 3px solid var(--dex-pink);
    padding: 1rem;
}

/* ---------- Kerncijfers op een pagina: <x-dex.kpi> ----------
 * Dezelfde kaart als de statkaarten op het dashboard, alleen compacter. */

.dex-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--dex-border);
    background-color: #FFFFFF;
    box-shadow: var(--dex-card-shadow);
}

.dex-kpi-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748B;
}

.dex-kpi-label svg {
    width: 1rem;
    height: 1rem;
    color: #94A3B8;
}

.dex-kpi-value {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dex-kpi-value.dex-kpi-danger {
    color: rgb(var(--danger-600));
}

.dex-kpi-value.dex-kpi-success {
    color: rgb(var(--success-600));
}

.dex-kpi-value.dex-kpi-warning {
    color: rgb(var(--warning-600));
}

.dex-kpi-desc {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #64748B;
}

.dex-kpis {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .dex-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Eigen tabellen: <table class="dex-table"> ----------
 * Zelfde kolomkoppen, regellijnen en cijferuitlijning als de Filament-tabellen. */

.dex-table-wrap {
    overflow-x: auto;
}

.dex-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dex-table thead th {
    padding: 0.625rem 0.75rem;
    background-color: #F8FAFC;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748B;
    white-space: nowrap;
}

.dex-table thead th:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.dex-table thead th:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.dex-table tbody td {
    padding: 0.625rem 0.75rem;
    border-top: 1px solid #E2E8F0;
    color: #020617;
    vertical-align: top;
}

.dex-table tbody tr:first-child td {
    border-top: 0;
}

.dex-table tbody tr:hover td {
    background-color: #FAFBFE;
}

.dex-table tfoot td {
    padding: 0.625rem 0.75rem;
    border-top: 1px solid #CBD5E1;
    font-weight: 600;
    color: #0F172A;
}

.dex-table .dex-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dex-table .dex-sub {
    display: block;
    color: #64748B;
}

/* Een groepskop binnen een eigen tabel (bv. per dagboek in een rapport). */
.dex-table tbody tr.dex-table-group td {
    background-color: #F8FAFC;
    font-weight: 600;
}

/* ---------- Links in lopende tekst ---------- */

.dex-link {
    color: rgb(var(--primary-600));
    font-weight: 600;
}

.dex-link:hover {
    text-decoration: underline;
}

/* ---------- Lege staat in een eigen widget: <x-dex.empty> ---------- */

.dex-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #64748B;
}

.dex-empty svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #94A3B8;
}

/* ---------- Agenda-widget: tijd, stip en tekst op één regel ---------- */

.dex-agenda-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.5rem 0;
    border-top: 1px solid #F1F5F9;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dex-agenda-row:first-child {
    border-top: 0;
}

.dex-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
}

.dex-agenda-time {
    width: 4.25rem;
    flex-shrink: 0;
    color: #64748B;
    font-variant-numeric: tabular-nums;
}

.dex-agenda-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Proefmodus-balk (Nivello) ----------
 * Een waarschuwing, dus oranje — roze is geen alarmkleur. */

.dex-proefmodus-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: rgb(var(--warning-100));
    border-bottom: 1px solid rgb(var(--warning-200));
    color: rgb(var(--warning-800));
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
}

.dex-proefmodus-bar svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: rgb(var(--warning-600));
}

.dex-proefmodus-bar a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Hulpklassen die de agenda-Blade gebruikt ---------- */

.line-through {
    text-decoration-line: line-through;
}

.opacity-40 {
    opacity: 0.4;
}

.p-1\.5 {
    padding: 0.375rem;
}

/* ---------- Kaart in een eigen Blade (agenda, voorbeeldweergaven) ----------
 * Dezelfde kaart als secties en tabellen, voor blokken die geen
 * x-filament::section zijn. */

.dex-card {
    border-radius: 1rem;
    border: 1px solid var(--dex-border);
    background-color: #FFFFFF;
    box-shadow: var(--dex-card-shadow);
}

/* ---------- Datumvelden: typen én kiezen uit de kalender ----------
 * Elk datumveld (DatePicker/DateTimePicker) gebruikt de eigen weergave
 * resources/views/filament/forms/components/date-time-picker.blade.php: een
 * typbaar veld met rechts een grijs kalendericoon, de lezer staat in
 * public/js/dex/datum.js. Hier alleen wat Filaments CSS niet meelevert: het
 * icoon, de rode rand bij een onleesbare datum en een kalender die in een
 * filtermenu niet wordt afgekapt. */

/* Het kalendericoon: grijs, want het is een hulpmiddel en geen actie. */
.dex-datum-knop {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0 0.75rem 0 0.25rem;
    border: 0;
    background: transparent;
    color: rgb(var(--gray-400));
    cursor: pointer;
    transition: color 75ms ease-in-out;
}

.dex-datum-knop:hover {
    color: rgb(var(--gray-600));
}

.dex-datum-knop:focus-visible {
    outline: 2px solid rgb(var(--primary-600));
    outline-offset: -2px;
    border-radius: 0.375rem;
}

.dex-datum-knop:disabled {
    color: rgb(var(--gray-300));
    cursor: default;
}

/* Onleesbare of niet toegestane datum: dezelfde rode rand als een
 * validatiefout van de server. De melding zelf staat onder het veld. Het
 * !important is nodig tegen Filaments focusrand, die met een
 * :not(:has(...))-selector specifieker is dan deze regel. */
.dex-datum-ongeldig > .fi-input-wrp {
    --tw-ring-color: rgb(var(--danger-600)) !important;
}

/* Een datumveld in een filtermenu: het menu heeft een maximumhoogte met een
 * eigen scrollbalk, en de kalender (absoluut gepositioneerd) liep daar
 * onderaan tegen dood. Zolang de kalender open staat mag hij buiten het menu
 * uitkomen — hetzelfde als bij een keuzelijst in dat menu. */
.fi-dropdown-panel:has(.fi-fo-date-time-picker-panel[style*='display: block']) {
    max-height: none;
    overflow: visible;
}

/* ---------- Tweede tabrij binnen Instellingen (Boekhouding, Gebruikers) ----------
 * Op de pagina's van de tabs Boekhouding en Gebruikers staat onder de tabbalk
 * van Instellingen een tweede rij met de pagina's van die tab: Dagboeken ·
 * Rekeningschema · Kostenplaatsen, of Medewerkers · Rollen & rechten. Blade:
 * resources/views/filament/hooks/instellingen-subtabs.blade.php (renderHook in
 * AdminPanelProvider, inhoud uit InstellingenCluster::subTabs()).
 *
 * Bewust dezelfde opmaak als de onderwerpstabs onder Algemeen: een kaart met
 * onderstreepte tabs (zie "Tabs binnen een formulier" hierboven). Het enige
 * verschil is dat onder Algemeen de inhoud ín de kaart staat en hier de tabel
 * of het formulier eronder. Daarom:
 * - de afstand tot de bovenste rij blijft die van Algemeen, zodat de tabs niet
 *   verspringen als je van Algemeen naar Boekhouding klikt;
 * - de kaart schuift dichter op de inhoud die hij wisselt (1rem in plaats van
 *   Filaments 2rem), zodat hij daarbij hoort en niet als losse balk tussen
 *   twee dingen in zweeft. */
.dex-subtabs {
    display: none;
    margin-bottom: -1rem;
    border-radius: 1rem;
    border: 1px solid var(--dex-border);
    background-color: #FFFFFF;
    box-shadow: var(--dex-card-shadow);
}

/* Pas vanaf md, net als Filaments eigen tabbalk. Daaronder toont Filament een
   keuzelijst waarin de pagina's al ingesprongen onder hun tab staan. */
@media (min-width: 768px) {
    .dex-subtabs {
        display: block;
    }
}

/* Onderstreepte tabs krijgen van Filament een scheidingslijn naar de inhoud
   eronder. Die inhoud zit hier niet in de kaart, dus zonder deze regel stond
   die lijn dubbel op de rand van de kaart. De streep onder de actieve tab
   komt nu precies op die rand te liggen, zoals onder Algemeen op de lijn. */
.dex-subtabs .fi-tabs.fi-contained {
    border-bottom-width: 0;
}

.dex-subtabs .fi-tabs.fi-contained .fi-tabs-item {
    margin-bottom: 0;
}

/* ---------- Tabelkop en werkbalk op één regel ----------
 * Een tabel mét kop — een relatietab (Contactpersonen, Producten & diensten
 * en Facturen op de klantpagina), de tabelwidgets op Openstaande posten, de
 * tabellen op Soorten — kreeg van Filament twee regels onder elkaar: eerst de
 * kop, met eventueel een knop "Nieuwe …", daaronder de werkbalk met zoekveld,
 * filters en kolomkiezer. Naast een korte titel gaf dat een lege band van
 * zo'n 50 px (klacht van de eigenaar, september 2026). Hier staan ze op één
 * regel: de kop links, kopknoppen en werkbalk rechts.
 *
 * De opbouw (vendor/filament/tables/resources/views/index.blade.php en
 * components/header.blade.php):
 *
 *   .fi-ta-header-ctn          divide-y: de twee regels hieronder
 *     .fi-ta-header            titel (.fi-ta-header-heading), beschrijving
 *                              (.fi-ta-header-description) en kopknoppen
 *     .fi-ta-header-toolbar    werkbalk: links bulkacties (.fi-ta-actions),
 *                              herschikken en groeperen; rechts het zoekveld
 *                              (.fi-ta-search-field), filters en kolommen
 *
 * Alleen als:
 * - er een echte kop is, met een titel of beschrijving. De gewone
 *   lijstpagina's hebben die niet (hooguit een kopknop zonder titel, zoals op
 *   Bank — afletteren) en blijven precies zoals ze waren;
 * - de werkbalk zichtbaar is. Filament rendert hem altijd, maar verbergt hem
 *   met x-cloak (vóór Alpine start) en daarna met x-show, dus met
 *   style="display: none;". Een dashboardwidget met alleen een titel en
 *   "Alle … →" valt daarbuiten en houdt zijn eigen opmaak;
 * - er geen filters bóven de tabel staan (FiltersLayout::AboveContent): dat
 *   blok zit tussen kop en werkbalk en hoort over de volle breedte;
 * - de tabel geen bulkacties heeft. Die verschijnen pas in de werkbalk als je
 *   een rij aanvinkt; op Abonnementen nakijken (Goedkeuren, Goedkeuren en
 *   verzenden) paste de werkbalk dan niet meer naast de beschrijving en
 *   schoot hij naar regel 2, zodat de tabel onder je muis 97 px omlaag sprong
 *   in plaats van de 37 px van Filaments selectiebalk. Filament rendert de
 *   bulkacties altijd (verborgen tot er iets geselecteerd is), dus de
 *   uitsluiting geldt vast en de tabel houdt zijn oude, stabiele opbouw;
 * - het scherm minstens 768 px breed is. Smaller blijven ze onder elkaar.
 *
 * Past het samen niet op één regel (lange beschrijving, veel knoppen), dan
 * loopt de werkbalk door naar een tweede regel, rechts uitgelijnd — zoals
 * voorheen, alleen zonder de lijn ertussen.
 *
 * tests/Feature/TabelKopTest.php controleert dat deze klassen in een
 * gerenderde relatietab voorkomen: hernoemt een Filament-update ze, dan valt
 * dat daar op in plaats van ongemerkt in de browser. */
@media (min-width: 768px) {
    /* De ruimte aan de zijkanten zit op de container, niet op de kop of de
       werkbalk: zo blijft allebei 1.5rem (Filaments sm:px-6) van de rand, ook
       als de werkbalk naar een tweede regel doorloopt en zo breed is als de
       kaart. De ruimte tussen kop en werkbalk is de column-gap. */
    .fi-ta-header-ctn:has(> .fi-ta-header :is(.fi-ta-header-heading, .fi-ta-header-description)):has(> .fi-ta-header-toolbar:not([x-cloak]):not([style*='display: none'])):not(:has(> .fi-ta-filters-above-content-ctn)):not(:has(> .fi-ta-header-toolbar .fi-ta-actions)) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 1.5rem;
        padding-inline: 1.5rem;
    }

    /* De kop neemt de ruimte die over is, zodat een kopknop rechts tegen de
       werkbalk aan staat — waar hij eerst rechts op zijn eigen regel stond.
       Verticaal dezelfde ruimte als de werkbalk (py-3), zodat de regel niet
       hoger wordt dan het zoekveld nodig heeft. De onderlijn uit "Widgets &
       kaarten" hierboven vervalt: de lijn onder de regel komt al van de
       tabel zelf (divide-y op .fi-ta-ctn). */
    .fi-ta-header-ctn:has(> .fi-ta-header :is(.fi-ta-header-heading, .fi-ta-header-description)):has(> .fi-ta-header-toolbar:not([x-cloak]):not([style*='display: none'])):not(:has(> .fi-ta-filters-above-content-ctn)):not(:has(> .fi-ta-header-toolbar .fi-ta-actions)) > .fi-ta-header {
        flex: 1 1 auto;
        padding-inline: 0;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom-width: 0;
    }

    /* De werkbalk is zo breed als zijn inhoud en staat rechts, ook als hij
       naar een tweede regel doorloopt (margin-inline-start: auto). Geen lijn
       erboven (divide-y). */
    .fi-ta-header-ctn:has(> .fi-ta-header :is(.fi-ta-header-heading, .fi-ta-header-description)):has(> .fi-ta-header-toolbar:not([x-cloak]):not([style*='display: none'])):not(:has(> .fi-ta-filters-above-content-ctn)):not(:has(> .fi-ta-header-toolbar .fi-ta-actions)) > .fi-ta-header-toolbar {
        flex: 0 1 auto;
        margin-inline-start: auto;
        padding-inline: 0;
        border-top-width: 0;
    }

    /* Het linkerdeel van de werkbalk (herschikken, groeperen) is vaak leeg,
       maar telt dan nog als flex-item en zette 1rem extra ruimte vóór het
       zoekveld. Leeg = geen elementen, alleen witruimte en
       Livewire-commentaar. */
    .fi-ta-header-ctn:has(> .fi-ta-header :is(.fi-ta-header-heading, .fi-ta-header-description)):has(> .fi-ta-header-toolbar:not([x-cloak]):not([style*='display: none'])):not(:has(> .fi-ta-filters-above-content-ctn)):not(:has(> .fi-ta-header-toolbar .fi-ta-actions)) > .fi-ta-header-toolbar > div:first-child:not(:has(*)) {
        display: none;
    }
}

/* ---------- Klantpagina (ViewCustomer): voorstel A ----------
 *
 * De bedrijfsnaam is de titel met een rustige subregel eronder; bovenaan de
 * tab Gegevens staan vier kerncijfers in één strook, daaronder de gegevens in
 * twee gelijke kaarten en onderaan de uitklapsecties met hun aantal in de kop.
 * Opbouw: CustomerResource::infolist() en resources/views/filament/customer/. */

/* Vier kerncijfers naast elkaar: twee per rij tot een breed scherm, vier
   vanaf xl. Gewoon .dex-kpis blijft drie breed (BTW-aangifte, RGS). */
@media (min-width: 640px) {
    .dex-kpis.dex-kpis-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .dex-kpis.dex-kpis-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* De subregel ("Klant sinds 2023") is een bijzin bij de titel, geen tweede
   kop: Filament zet hem op text-lg met een ruime marge erboven. */
.fi-resource-customers.fi-resource-view-record-page .fi-header-subheading {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #64748B;
}

/* De twee gegevenskaarten: even hoog naast elkaar (ook als de ene een rij
   minder heeft) en de rijen dichter op elkaar dan Filaments gap-6. */
.dex-klantkaart {
    height: 100%;
}

.dex-klantkaart .fi-fo-component-ctn {
    row-gap: 1rem;
}

/* Kop van een uitklapsectie met het aantal erachter als grijs telbadge,
   hetzelfde badge als op de tabs erboven. */
.dex-sectie-kop {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Zoekbalk in de topbalk: resultaten per categorie ----------
 *
 * De resultaten staan per categorie in een vaste volgorde, met hooguit vijf
 * per categorie (App\Filament\GlobalSearch\DexGlobalSearchProvider). Filaments
 * paneel was daar te klein voor: 24rem hoog en 24rem breed, zodat je na twee
 * klanten al moest scrollen en de toelichting (plaats · e-mailadres) over twee
 * regels brak. */
.fi-global-search .fi-global-search-results-ctn {
    max-height: min(40rem, calc(100vh - 6rem));
}

@media (min-width: 640px) {
    .fi-global-search .fi-global-search-results-ctn {
        max-width: 28rem;
    }
}

/* De kop draagt een telling ("Klanten · 5 van 14"); Filaments `capitalize`
   maakte daar "5 Van 14" van. De provider zet zelf de hoofdletter. */
.fi-global-search-result-group h3 {
    text-transform: none;
}

/* Titel plus één regel toelichting: minder lucht per resultaat, zodat er
   meer categorieën tegelijk in beeld staan. Een te lange toelichting (een
   omschrijving van een journaalpost) loopt af met een beletselteken in plaats
   van een tweede regel te beginnen. */
.fi-global-search-result-link.p-4 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.fi-global-search-result-link dl > div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- Geheime velden: Wissen vóór het ⓘ-icoon ----------
 *
 * Een geheim veld (App\Filament\Forms\SecretInput) heeft naast het ⓘ-icoon de
 * actie Wissen. Filament zet het icoon vóór de acties, waardoor het ⓘ niet
 * meer rechts uitlijnt met dat van de andere velden. Alleen de volgorde
 * verandert, en alleen waar een veld een hint-actie heeft. */
.fi-fo-field-wrp-hint:has(> .fi-fo-field-wrp-hint-action) > .fi-fo-field-wrp-hint-icon {
    order: 1;
}

/* ---------- Mailpopup: de vraag vóór elke mail ----------
 *
 * Elke mail die je zelf verstuurt, krijgt eerst deze popup
 * (App\Filament\Actions\MailBevestiging): "Weet je zeker dat je … naar …
 * wilt sturen?", een kader met Aan, Onderwerp en Bijlage, en de knoppen
 * Annuleren en Versturen (bij een gevolg ook Zonder mail). Op verzoek van de
 * eigenaar ruimer dan Filaments eigen bevestiging: meer witruimte, grotere
 * tekst en hogere knoppen. De klasse staat op .fi-modal-window. */
.fi-modal-window.dex-mailpopup .fi-modal-header {
    padding: 2.25rem 2rem 0;
}

.fi-modal-window.dex-mailpopup .fi-modal-header div:has(> .fi-modal-icon) {
    padding: 1rem;
}

.fi-modal-window.dex-mailpopup .fi-modal-header .mb-5:has(.fi-modal-icon) {
    margin-bottom: 1rem;
}

.fi-modal-window.dex-mailpopup .fi-modal-heading {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.fi-modal-window.dex-mailpopup .fi-modal-description {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.fi-modal-window.dex-mailpopup .fi-modal-description strong,
.dex-mailpopup-vraag strong {
    font-weight: 500;
    color: rgb(var(--gray-950));
}

.dex-mailpopup-toelichting {
    display: block;
    margin-bottom: 0.5rem;
}

.fi-modal-window.dex-mailpopup .fi-modal-content {
    padding: 1.5rem 2rem 0;
    row-gap: 1.5rem;
}

.fi-modal-window.dex-mailpopup .fi-modal-footer {
    margin-top: 1.75rem;
    padding: 0 2rem 2rem;
}

.fi-modal-window.dex-mailpopup .fi-modal-footer-actions {
    gap: 0.75rem;
}

.fi-modal-window.dex-mailpopup .fi-modal-footer-actions .fi-btn {
    min-height: 2.75rem;
}

/* De vraag in een popup met velden (herinnering, reactie, SMTP-test). */
.dex-mailpopup-vraag {
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgb(var(--gray-500));
    text-align: center;
}

/* Het kader: Aan, Onderwerp, Bijlage. */
.dex-mailpopup-kader {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    row-gap: 0.875rem;
    column-gap: 1rem;
    margin: 0;
    padding: 1.125rem 1.25rem;
    border: 1px solid rgb(var(--gray-200));
    border-radius: 0.625rem;
    background: rgb(var(--gray-50));
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: start;
}

.dex-mailpopup-kader dt {
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
}

.dex-mailpopup-kader dd {
    margin: 0;
    color: rgb(var(--gray-950));
    overflow-wrap: anywhere;
}

.dex-mailpopup-adres {
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
}

.dex-mailpopup-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.dex-mailpopup-lijst .dex-mailpopup-adres {
    display: block;
}

.dex-mailpopup-clip {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-inline-end: 0.375rem;
    vertical-align: -0.1875rem;
    color: rgb(var(--gray-400));
}

/* ---------- Agenda: week- en dagweergave ----------
 * resources/views/filament/pages/agenda/tijdraster.blade.php. Links de uren,
 * per dag een kolom, bovenaan een strook voor wat de hele dag duurt. De
 * pagina (App\Filament\Pages\Agenda::tijdraster()) rekent de plaats van elk
 * blok en elke balk uit en zet die inline (top, hoogte, links, breedte); hier
 * staat alleen de vaste opmaak. Een uur is 3rem hoog en de kolommen zijn zo
 * hoog als het aantal getoonde uren (--dex-agenda-uren). Een lege plek is een
 * link per half uur (.dex-agenda-slot) naar een nieuwe afspraak op die tijd.
 * Ook de werkbalk boven de agenda (.dex-agenda-kop), de schakelaar
 * Maand · Week · Dag en het dagnummer in de maand staan hier. */

/* Werkbalk: pijltjes links, titel in het midden, schakelaar rechts. De
   knoppen staan in elke weergave op dezelfde plek; een lange weektitel loopt
   in zijn eigen kolom door naar een tweede regel in plaats van de knoppen
   weg te duwen. Bovenaan uitgelijnd, zodat de knoppen dan ook niet zakken. */
.dex-agenda-kop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "nav titel schakelaar";
    align-items: start;
    column-gap: 1rem;
    row-gap: 0.75rem;
}

.dex-agenda-kop-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Bewust niet .dex-agenda-titel: die klasse is van de afspraaktitels in de
   Agenda-widget op het dashboard, en deze regel maakte ze daar 20px groot. */
.dex-agenda-kop-titel {
    grid-area: titel;
    min-width: 0;
    padding-top: 0.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: rgb(var(--gray-950));
    overflow-wrap: anywhere;
}

.dex-agenda-kop .dex-agenda-schakelaar {
    grid-area: schakelaar;
}

/* Smal: de titel op een eigen regel, pijltjes en schakelaar eronder. */
@media (max-width: 767px) {
    .dex-agenda-kop {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "titel titel"
            "nav schakelaar";
    }

    .dex-agenda-kop-titel {
        padding-top: 0;
    }
}

.dex-agenda-schakelaar {
    display: inline-flex;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(var(--gray-950), 0.1);
}

.dex-agenda-schakelaar button {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(var(--gray-950));
    transition: background-color 75ms, color 75ms;
}

.dex-agenda-schakelaar button + button {
    border-inline-start: 1px solid rgba(var(--gray-950), 0.1);
}

.dex-agenda-schakelaar button:hover {
    background-color: rgb(var(--gray-50));
}

/* De actieve weergave zoals een actieve tab in Filament (tabs/item): grijs
   vlak met de tekst in primary-600. */
.dex-agenda-schakelaar button[aria-pressed="true"] {
    background-color: rgb(var(--gray-50));
    color: rgb(var(--primary-600));
}

.dex-agenda-schakelaar button:focus-visible {
    outline: 2px solid rgb(var(--primary-600));
    outline-offset: -2px;
}

/* Onder 768px past de week niet (de pagina schakelt dan naar de dag). Tot
   die wissel binnen is, blijven de knop Week (dan nog de actieve) en het
   raster van de week staan, maar het raster onzichtbaar: zo flitst er geen
   onleesbare week voorbij. */
@media (max-width: 767px) {
    .dex-agenda-schakelaar button[data-weergave="week"]:not([aria-pressed="true"]) {
        display: none;
    }

    .dex-agenda-raster:not(.is-dag) {
        visibility: hidden;
    }
}

/* Het dagnummer in de maand opent de dagweergave. */
.dex-agenda-maanddag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: rgb(var(--gray-500));
    font-variant-numeric: tabular-nums;
}

.dex-agenda-maanddag:hover {
    background-color: rgb(var(--gray-100));
    color: rgb(var(--gray-950));
}

.dex-agenda-maanddag.is-vandaag,
.dex-agenda-maanddag.is-vandaag:hover {
    background-color: rgb(var(--primary-600));
    color: #FFFFFF;
    font-weight: 700;
}

.dex-agenda-raster {
    --dex-agenda-uur: 3rem;
    --dex-agenda-baan: 1.5rem;
    --dex-agenda-as: 3.5rem;
    overflow: hidden;
}

.dex-agenda-rij {
    display: grid;
    grid-template-columns: var(--dex-agenda-as) repeat(var(--dex-agenda-dagen, 7), minmax(0, 1fr));
}

/* Dagkoppen: "ma 21", vandaag met het nummer in een roze bolletje. Bewust
   niet .dex-agenda-dagkop: dat zijn de dagkoppen in de Agenda-widget op het
   dashboard, die door deze regel gecentreerd en met een randje verschenen. */
.dex-agenda-koppen {
    border-bottom: 1px solid var(--dex-border);
}

.dex-agenda-kolomkop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.5rem 0.25rem;
    border-inline-start: 1px solid var(--dex-border);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

a.dex-agenda-kolomkop:hover {
    background-color: rgb(var(--gray-100));
}

.dex-agenda-dagnaam {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(var(--gray-500));
}

.dex-agenda-dagnummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    font-weight: 600;
    color: rgb(var(--gray-950));
    font-variant-numeric: tabular-nums;
}

.dex-agenda-kolomkop.is-vandaag .dex-agenda-dagnaam {
    color: rgb(var(--primary-600));
}

.dex-agenda-kolomkop.is-vandaag .dex-agenda-dagnummer {
    background-color: rgb(var(--primary-600));
    color: #FFFFFF;
}

/* Weekend licht grijs, vandaag een zweem roze: in kop, strook en kolom. */
.dex-agenda-kolomkop.is-weekend,
.dex-agenda-heledag-cel.is-weekend,
.dex-agenda-kolom.is-weekend {
    background-color: rgb(var(--gray-50));
}

.dex-agenda-heledag-cel.is-vandaag,
.dex-agenda-kolom.is-vandaag {
    background-color: rgba(var(--primary-500), 0.04);
}

/* Strook voor de hele dag. */
.dex-agenda-heledag {
    border-bottom: 1px solid var(--dex-border);
}

.dex-agenda-as-label {
    padding: 0.4375rem 0.5rem 0 0;
    font-size: 0.6875rem;
    line-height: 1rem;
    text-align: right;
    color: rgb(var(--gray-500));
}

.dex-agenda-heledag-vak {
    position: relative;
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(var(--dex-agenda-dagen, 7), minmax(0, 1fr));
    min-height: calc(var(--dex-agenda-banen, 1) * var(--dex-agenda-baan) + 0.5rem);
}

.dex-agenda-heledag-cel {
    display: block;
    border-inline-start: 1px solid var(--dex-border);
}

.dex-agenda-heledag-cel:hover {
    background-color: rgba(var(--primary-500), 0.06);
}

.dex-agenda-balk,
.dex-agenda-meer {
    position: absolute;
    z-index: 1;
    height: calc(var(--dex-agenda-baan) - 0.25rem);
    margin-top: 0.25rem;
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dex-agenda-balk {
    color: #FFFFFF;
}

/* Een balk die in de vorige of volgende week doorloopt, heeft daar een
   rechte kant. */
.dex-agenda-balk.loopt-door-voor {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.dex-agenda-balk.loopt-door-na {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.dex-agenda-meer {
    color: rgb(var(--gray-500));
}

.dex-agenda-meer:hover {
    color: rgb(var(--gray-700));
    text-decoration: underline;
}

/* Uren links, met het uur net onder de lijn van dat uur. */
.dex-agenda-as {
    display: flex;
    flex-direction: column;
}

.dex-agenda-uur {
    flex: 0 0 var(--dex-agenda-uur);
    padding: 0.25rem 0.5rem 0 0;
    font-size: 0.6875rem;
    line-height: 1rem;
    text-align: right;
    color: rgb(var(--gray-500));
    font-variant-numeric: tabular-nums;
}

/* Een dagkolom: een lijn per uur en een lichtere per half uur. */
.dex-agenda-kolom {
    position: relative;
    height: calc(var(--dex-agenda-uren, 12) * var(--dex-agenda-uur));
    border-inline-start: 1px solid var(--dex-border);
    background-image:
        linear-gradient(to bottom, var(--dex-border) 1px, transparent 1px),
        linear-gradient(to bottom, #F1F5F9 1px, transparent 1px);
    background-size: 100% var(--dex-agenda-uur), 100% var(--dex-agenda-uur);
    background-position: 0 -1px, 0 calc(var(--dex-agenda-uur) / 2 - 1px);
}

.dex-agenda-slots {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.dex-agenda-slot {
    display: block;
    flex: 1 1 0;
    min-height: 0;
    padding: 0.125rem 0.375rem 0;
    font-size: 0.6875rem;
    line-height: 1rem;
    color: rgb(var(--gray-500));
    font-variant-numeric: tabular-nums;
}

.dex-agenda-slot:hover {
    background-color: rgba(var(--primary-500), 0.06);
}

.dex-agenda-slot:hover::after {
    content: attr(data-tijd);
}

/* Een afspraak: de kleur van de soort, witte tekst. Overlappende blokken
   staan naast elkaar; het witte randje houdt ze uit elkaar. */
.dex-agenda-blok {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 1px #FFFFFF;
    color: #FFFFFF;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}

.dex-agenda-balk:hover,
.dex-agenda-blok:hover {
    opacity: 0.85;
}

.dex-agenda-blok-regel {
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* In de week loopt de titel door over zoveel regels als het blok hoog is
   (--dex-agenda-regels, uitgerekend door de pagina). Een woord dat niet past
   wordt afgekapt in plaats van gebroken, en de tijd breekt nooit ("09:0 0"). */
.dex-agenda-blok-regel.is-meerregelig {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--dex-agenda-regels, 1);
    white-space: normal;
}

.dex-agenda-blok-regel .dex-agenda-blok-tijd {
    font-weight: 600;
    white-space: nowrap;
}

/* In de week: is de tekstruimte van een blok smaller dan 6rem (twee of drie
   afspraken naast elkaar, een tablet), dan valt de begintijd weg en krijgt
   de titel de ruimte. De tijd volgt uit de plek en staat in de tooltip. */
.dex-agenda-raster:not(.is-dag) .dex-agenda-blok {
    container-type: inline-size;
}

@container (max-width: 5.99rem) {
    .dex-agenda-raster:not(.is-dag) .dex-agenda-blok-tijd {
        display: none;
    }
}

/* In de dag: eerst de titel, dan het tijdbereik. */
.dex-agenda-blok-titel {
    font-weight: 600;
}

.dex-agenda-blok-bereik {
    font-weight: 400;
}

.dex-agenda-blok-onder {
    font-weight: 400;
    opacity: 0.9;
}

/* De lijn van nu, met een bolletje aan het begin. Een wit randje erlangs,
   anders valt hij weg over een (roze) afspraak die nu loopt. */
.dex-agenda-nu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: 0;
    border-top: 2px solid rgb(var(--primary-600));
    box-shadow: 0 -1px 0 #FFFFFF, 0 1px 0 #FFFFFF;
    pointer-events: none;
}

.dex-agenda-nu::before {
    content: "";
    position: absolute;
    left: -0.3125rem;
    top: -0.375rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: rgb(var(--primary-600));
    box-shadow: 0 0 0 2px #FFFFFF;
}

@media (max-width: 767px) {
    .dex-agenda-raster {
        --dex-agenda-as: 3rem;
    }

    /* "hele dag" past zo nog op één regel in de smallere as. */
    .dex-agenda-as-label {
        padding-inline-end: 0.25rem;
        white-space: nowrap;
    }
}

/* ---------- Mailwachtrij: de volledige foutmelding ----------
   Op het tabblad Mislukt opent "Volledige foutmelding" de tekst die Laravel
   bij een mislukte taak bewaart: de melding plus een stacktrace van tientallen
   regels. Die lange regels breken hier af in plaats van het venster breder
   te maken, en het blok scrollt zelf. */
.dex-wachtrij-fout {
    max-height: 28rem;
    overflow: auto;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: rgb(var(--gray-50));
    border: 1px solid rgb(var(--gray-200));
    color: rgb(var(--gray-700));
    font-size: 0.75rem;
    line-height: 1.125rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- Facturenlijst: de vervaldatum op een smaller scherm ----------
   Op een laptop (vanaf 1440 px breed) staat de vervaldatum in een eigen
   kolom, zoals altijd. Op een smaller scherm past de lijst daarmee niet
   (de oranje status "Wacht op goedkeuring" is breed; op 1280 px kwam hij
   96 px tekort), dus staat de vervaldatum daar als tweede regel onder de
   status: InvoiceResource::statusOnderschrift(), klasse dex-alleen-smal.

   De kolom gaat op een smal scherm niet met display: none weg, maar wordt
   nul breed. De totaalregel onderaan rekent hem mee in de colspan van zijn
   kop ("Deze pagina"); zonder cel in de andere regels zouden de totalen
   een kolom opschuiven. Filaments eigen visibleFrom() heeft daar last van,
   en kent bovendien geen breekpunt tussen 1280 (xl) en 1536 (2xl). */
@media (max-width: 1439.98px) {
    /* Specifieker dan de padding met !important op th.fi-ta-header-cell
       (sectie over de dichtheid van tabellen, hierboven). De td's zijn de
       gewone cellen én de kopregel "Samenvatting" boven de totalen, die
       Filament bij meer dan één pagina toont (fi-ta-summary-header-cell,
       met de kopattributen van de kolom). */
    .fi-ta-table th.fi-ta-header-cell.dex-alleen-breed,
    .fi-ta-table td.dex-alleen-breed {
        width: 0;
        padding: 0 !important;
        border: 0;
    }

    .fi-ta-table th.dex-alleen-breed > *,
    .fi-ta-table td.dex-alleen-breed > * {
        display: none;
    }
}

/* Op een laptop is de regel onder de status er niet, ook zijn ruimte niet:
   de hele omschrijving verdwijnt als hij alleen de vervaldatum bevat, zodat
   de regels even hoog blijven als zonder. */
@media (min-width: 1440px) {
    .fi-ta-text > p:has(> .dex-alleen-smal:only-child) {
        display: none;
    }
}