/*
 * Zandbezorgen-huisstijl voor het Filament-beheer, in lijn met de site-POC en de e-mails:
 * zand-achtergrond #F7F5EF, donkerblauw #223746, accent #F9A914, secundair #66727D,
 * randen #E5E0D6, radius 8-12px, weinig schaduw. Poppins via de panel-config.
 *
 * Alleen kleur, vorm en ritme; geen layoutwijzigingen zodat Filament-updates veilig zijn.
 */
:root {
    --zb-sand: #F7F5EF;
    --zb-sand-2: #FBFAF6;
    --zb-navy: #223746;
    --zb-navy-2: #1B2B3A;
    --zb-navy-3: #3A4E5F;
    --zb-amber: #F9A914;
    --zb-amber-soft: #FFF7E6;
    --zb-gray: #66727D;
    --zb-line: #E5E0D6;
    --zb-mist: #C9D1D8;
}

/* Achtergrond en basis */
.fi-body { background-color: var(--zb-sand); color: var(--zb-navy); }
.fi-topbar { background-color: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--zb-line); box-shadow: none; }
.fi-topbar nav { box-shadow: none; }

/* Sidebar: donkerblauw zoals de site-header en de mailfooter */
.fi-sidebar { background-color: var(--zb-navy); border-inline-end: 1px solid var(--zb-navy-3); }
.fi-sidebar-header { background-color: var(--zb-navy); border-bottom: 1px solid var(--zb-navy-3); box-shadow: none; }
.fi-sidebar-nav { background-color: var(--zb-navy); }
.fi-sidebar-group-label { color: var(--zb-mist); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn .fi-icon { color: var(--zb-mist); }
.fi-sidebar-item-label { color: #FFFFFF; }
.fi-sidebar-item-btn > .fi-icon { color: var(--zb-mist); }
.fi-sidebar-item-btn:hover { background-color: rgba(255, 255, 255, 0.07); }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn { background-color: rgba(249, 169, 20, 0.16); }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: var(--zb-amber); }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part { background-color: var(--zb-amber); }
.fi-sidebar-item-grouped-border-part { background-color: var(--zb-navy-3); }
/* Tellers in het menu (nieuwe orders, aanvragen, te beoordelen reviews): amber, direct opvallend */
.fi-sidebar-item-badge-ctn .fi-badge { background-color: var(--zb-amber); color: var(--zb-navy); box-shadow: none; --tw-ring-color: transparent; }
.fi-sidebar-item-badge-ctn .fi-badge-label { color: var(--zb-navy); }
.fi-sidebar-open-collapse-sidebar-btn, .fi-sidebar-close-collapse-sidebar-btn,
.fi-sidebar-close-sidebar-btn { color: var(--zb-mist); }

/* Compacter menu: minder lucht tussen groepen en tussen items, iets kleinere letters */
.fi-sidebar-nav { padding-block: calc(var(--spacing) * 4); padding-inline: calc(var(--spacing) * 4); row-gap: calc(var(--spacing) * 3); }
.fi-sidebar-nav-groups { row-gap: calc(var(--spacing) * 3); }
.fi-sidebar-group { row-gap: 0; }
.fi-sidebar-group-items { row-gap: 0; }
.fi-sidebar-group-btn { padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2); }
.fi-sidebar-item-btn { padding-block: calc(var(--spacing) * 1.5); padding-inline: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2.5); }
.fi-sidebar-item-btn > .fi-icon { width: 1.15rem; height: 1.15rem; }
.fi-sidebar-item-label { font-size: 0.875rem; line-height: 1.25rem; }
.fi-sidebar-group-label { font-size: 0.66rem; }
.fi-sidebar-item-badge-ctn { display: flex; align-items: center; margin-inline-start: auto; line-height: 1; }
.fi-sidebar-item-badge-ctn .fi-badge { font-size: 0.68rem; font-weight: 600; padding-block: 0; padding-inline: 0.45rem; min-height: 1.25rem; height: 1.25rem; line-height: 1.25rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; }
.fi-sidebar-item-badge-ctn .fi-badge-label { line-height: 1.25rem; display: block; }

/* Merk in de sidebar */
.zb-brand { display: inline-flex; align-items: center; gap: 0.55rem; color: #FFFFFF; }
.zb-brand-text { font-size: 1.1rem; letter-spacing: -0.2px; }
.fi-topbar .zb-brand { color: var(--zb-navy); }

/* Kaarten, secties, tabellen: wit op zand, zachte rand, geen zware schaduw */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-fo-field-wrp .fi-input-wrp,
.fi-modal-window, .fi-dropdown-panel, .fi-tabs {
    border-color: var(--zb-line);
    box-shadow: 0 1px 2px rgba(34, 55, 70, 0.04);
}
.fi-section-header-heading, .fi-header-heading, .fi-ta-header-heading, .fi-wi-stats-overview-stat-label { color: var(--zb-navy); }
.fi-section-header-description, .fi-header-subheading, .fi-wi-stats-overview-stat-description { color: var(--zb-gray); }
.fi-ta-header-cell { background-color: var(--zb-sand-2); }
.fi-ta-row:hover { background-color: var(--zb-sand-2); }
.fi-ta-row:nth-child(even) { background-color: rgba(247, 245, 239, 0.45); }

/* Primaire knoppen: amber met donkerblauwe tekst, zoals de mail-CTA */
.fi-btn.fi-color-primary { background-color: var(--zb-amber); color: var(--zb-navy); box-shadow: none; }
.fi-btn.fi-color-primary:hover { background-color: #E89A0F; color: var(--zb-navy); }
.fi-btn.fi-color-primary .fi-icon { color: var(--zb-navy); }
.fi-link.fi-color-primary { color: var(--zb-navy); }

/* Paginakop: acties mogen afbreken naar een volgende regel in plaats van buiten beeld lopen */
.fi-header { flex-wrap: wrap; row-gap: calc(var(--spacing) * 3); }
.fi-header-actions-ctn { flex-wrap: wrap; row-gap: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2); flex-shrink: 1; }
.fi-header-has-breadcrumbs .fi-header-actions-ctn { margin-top: 0; }
.fi-header-heading { font-size: 1.5rem; line-height: 2rem; }

/* Breadcrumbs en tabbladen rustig houden */
.fi-breadcrumbs-item-label { color: var(--zb-gray); }
.fi-tabs-item.fi-active { background-color: var(--zb-amber-soft); }

/* Focus zichtbaar in het accent, geen blauwe ring */
.fi-input:focus-within, .fi-input-wrp:focus-within { --tw-ring-color: rgba(249, 169, 20, 0.55); border-color: var(--zb-amber); }