/* ===========================================================================
   Cold Candy — Filament-backoffice accenten
   Bovenop de merkkleur (primary = candy-lavendel, via Color::hex in de
   PanelProvider) en Poppins (via ->font). Dit bestand doet de dingen die niet
   uit de kleurinstelling volgen: Anton op de merknaam en pagina-titels, de
   kenmerkende platte sticker-schaduw op knoppen en kaarten, en pill-vormige
   primaire knoppen. Zwaar-gehand: een backoffice moet werkbaar blijven, dus
   we herstijlen accenten, niet de hele Filament-machinerie.

   Consumeert de tokens uit tokens.css (ook in het panel geladen).
   =========================================================================== */

/* Merknaam en pagina-titels in het display-font (Anton, kapitalen). Filament
   zet zijn eigen font-stack met !important op sommige plekken; daarom hier ook. */
.fi-topbar .fi-logo,
.fi-sidebar-header .fi-logo {
    font-family: var(--font-display), "Anton", sans-serif !important;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* Paginatitel (h1) en modaal-kop blijven de zware Anton-poster. */
.fi-header-heading,
.fi-modal-heading {
    font-family: var(--font-display), "Anton", sans-serif !important;
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--cc-ink);
}

/* Sectie-koppen in formulieren (h2, fi-section-header-heading) blijven Poppins maar
   op semibold: Anton is te zwaar en te schreeuwerig direct boven een groep velden, een
   standaardgewicht valt weg. Semibold geeft de sectie gewicht zonder de poster-toon. */
.fi-section-header-heading {
    font-weight: var(--fw-semibold);
    color: var(--cc-ink);
}

/* Primaire knoppen: pill-vorm en de platte sticker-schaduw op hover, precies
   het poster-gevoel van het merk. Alleen de primary-variant, zodat secundaire
   en gevaar-knoppen hun eigen betekenis houden. */
.fi-btn.fi-color-primary {
    border-radius: var(--radius-pill);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-button);
    transition: box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.fi-btn.fi-color-primary:hover {
    box-shadow: var(--shadow-sticker-purple);
    transform: translate(-1px, -1px);
}

/* Verplicht-sterretje: Filaments default is een klein, hooggeplaatst rood sup'je dat
   makkelijk over het hoofd te zien is. Groter, op de tekstlijn en in de merk-danger-kleur,
   met wat lucht ervoor, zodat "dit moet ik invullen" in één oogopslag klopt. */
.fi-fo-field-label-required-mark {
    color: var(--cc-danger);
    font-size: 1em;
    font-weight: var(--fw-bold);
    vertical-align: baseline;
    margin-inline-start: 0.15em;
}

/* Aandachtspunten-lijst (reviewblok op de boeking én de statusbevestiging): een
   ingesprongen opsomming met een merk-paars streepje, zodat het als "even checken"
   leest en niet als foutmelding. */
.cc-readiness-list {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.1rem;
    list-style: none;
}
.cc-readiness-list li {
    position: relative;
    padding-inline-start: 0.9rem;
    margin-block: 0.35rem;
}
.cc-readiness-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.55em;
    width: 0.5rem;
    height: 0.15rem;
    border-radius: 1px;
    background: var(--cc-purple);
}

/* De standaard uit Lesson Standards.xlsx, één regel boven de dienstkeuze. Bewust rustig:
   het is een mededeling en geen waarschuwing, dus geen kleurvlak en geen icoon — dat
   soort nadruk hoort bij de aandachtspunten hierboven en verliest zijn betekenis als
   elke hint hem ook krijgt. */
.cc-hint {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--cc-ink);
    border-inline-start: var(--bw-bold, 3px) solid var(--cc-purple);
    padding-inline-start: 0.6rem;
}
.cc-hint-muted {
    opacity: 0.65;
}

/* Focus-ring in het merkpaars — consistent met het gastenportaal. */
.fi-input:focus,
.fi-select-input:focus,
.fi-btn:focus-visible {
    outline-color: var(--cc-purple-600);
}

/* Actieve navigatie-item krijgt de merkkleur wat nadrukkelijker mee dan de
   standaard-tint, zodat "waar ben ik" in één oogopslag klopt. */
.fi-sidebar-item-active .fi-sidebar-item-button {
    border-left: var(--bw-bold) solid var(--cc-purple);
}

/* Het inlogscherm staat op een lege pagina; een vleugje merk-wash eronder
   maakt het minder klinisch zonder de leesbaarheid van het formulier te raken. */
.fi-simple-layout {
    background:
        radial-gradient(120% 80% at 50% -10%, var(--cc-purple-100) 0%, transparent 60%),
        var(--cc-gray-50);
}