/*
 * LarsaSub — huisstijl over de Filament-panels.
 *
 * Waarom een statisch bestand en geen `->viteTheme()`: de productie-image
 * (Dockerfile.prod) heeft geen Node-stage en draait dus nooit `npm run build`.
 * Een Vite-thema zou daar op een ontbrekende `public/build/manifest.json`
 * stuklopen. De site zelf laadt om dezelfde reden `/css/brand.css`
 * rechtstreeks. Zodra er een Node-stage komt is dit bestand te vervangen door
 * een echt Tailwind-thema; tot die tijd doet dit precies genoeg.
 *
 * De kleuren zelf komen NIET hiervandaan: Filament genereert zijn paletten in
 * PHP uit één hexwaarde (zie App\Support\Brand). Dit bestand doet de
 * typografie en de paar plekken waar Filaments standaard-chrome afwijkt van
 * de rest van het product.
 */

@import url('/css/brand.css');

:root {
    /* Filament v5 draait op Tailwind v4 en leest deze variabelen. De fonts
       staan al zelf-gehost in /public/fonts en komen met de import hierboven
       mee; hier wijzen we alleen de families aan. */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

.fi-body {
    font-family: var(--font-body);
}

/* Koppen in het displayfont, net als op de site. Filament zet zijn
   koptypografie via utility-klassen, dus dit is de plek waar het merk
   doorkomt in plaats van in elke pagina apart. */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Monospace overal waar een sleutel, versie of commando staat. */
.fi-fo-text-input input[type='text'].font-mono,
.fi-in-text.fi-in-text-has-font-mono,
code {
    font-family: var(--font-mono);
}

/*
 * De 12-maanden-dial uit het beeldmerk, functioneel hergebruikt op de
 * licentiekaart in het klantportal. Dezelfde vorm op de plek waar de klant
 * het vaakst kijkt maakt van een logo een herkenbaar patroon in plaats van
 * een plaatje in de hoek.
 *
 * `--dial-fraction` (0..1) wordt per licentie inline gezet.
 */
.ls-dial {
    --dial-size: 7rem;
    --dial-thickness: 0.55rem;
    --dial-track: var(--edge);
    --dial-fill: var(--accent);

    position: relative;
    width: var(--dial-size);
    height: var(--dial-size);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/*
 * De ring staat op een pseudo-element met een radial mask, niet als een
 * gevulde cirkel met een tweede cirkel eroverheen. Dat scheelt het raden naar
 * de achtergrondkleur: een "gat" dat met var(--surface) is dichtgeschilderd
 * klopt alleen zolang de kaart eronder exact diezelfde kleur heeft, en dat is
 * in Filaments donkere modus net niet zo. Met een mask is het midden écht
 * doorzichtig.
 */
.ls-dial::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: conic-gradient(
        var(--dial-fill) calc(var(--dial-fraction) * 360deg),
        var(--dial-track) 0
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--dial-thickness)),
        #000 calc(100% - var(--dial-thickness))
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--dial-thickness)),
        #000 calc(100% - var(--dial-thickness))
    );
}

.ls-dial__value {
    position: relative;
    text-align: center;
    line-height: 1.15;
}

.ls-dial__number {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
}

.ls-dial__label {
    display: block;
    font-size: 0.6875rem;
    color: var(--ink-sub);
}

.ls-dial--expired {
    --dial-fill: var(--warn);
}

/* Eeuwigdurend: een volle ring in plaats van een stand. */
.ls-dial--unlimited {
    --dial-track: var(--accent);
}