/* Immosentis-themalaag bovenop Tabler (docs/ui-conventions.md, sectie Thema).
   Alle eigen keuzes voor kleur, lettertype en afronding staan hier als tokens.
   Templates, app.css en scripts (grafieken) gebruiken de tokens, nooit een
   hard gecodeerde kleur. Laadvolgorde: tabler.min.css, tabler-icons, dit
   bestand, app.css. */

/* Inter: het lettertype dat Tabler verwacht maar zelf niet laadt (lokaal,
   geen CDN; licentie in static/vendor/inter/LICENSE). */
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../vendor/inter/InterVariable-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../vendor/inter/InterVariable-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens: de enige plek om ze te wijzigen ---- */
:root {
    /* Hoofdkleur: knoppen, links, actieve navigatie. Nu gelijk aan Tabler-blauw;
       -rgb moet dezelfde kleur zijn (Tabler gebruikt die voor transparanties). */
    --is-primary: #066fd1;
    --is-primary-rgb: 6, 111, 209;

    /* Betekenis van bedragen en toestanden. */
    --is-positive: var(--tblr-green);
    /* Negatief: een rustig, donker rood (Tabler-rood valt te fel op in een tabel vol cijfers). */
    --is-negative: #b84a4a;
    --is-warning: var(--tblr-orange);

    /* Grafieken: reeksen in deze volgorde, plus raster en astekst. */
    --is-chart-1: var(--is-primary);
    --is-chart-2: var(--tblr-cyan);
    --is-chart-3: var(--tblr-orange);
    --is-chart-4: var(--tblr-purple);
    --is-chart-muted: var(--tblr-secondary);
    --is-chart-grid: var(--tblr-border-color);

    /* Rand van invoervelden en van keuzerondjes/vinkjes: donkerder dan Tabler's
       standaardrand, die op een gsm of een fel scherm amper te zien is. */
    --is-border-input: #c5cbd3;
    --is-border-check: #9ea6b1;

    --tblr-font-sans-serif: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Tabler leidt hover-, lichte en randtinten af van --tblr-primary; die volgen
   hier het token, ook voor een later donker thema ([data-bs-theme]). */
:root,
[data-bs-theme] {
    --tblr-primary: var(--is-primary);
    --tblr-primary-rgb: var(--is-primary-rgb);
    --tblr-brand: var(--is-primary);
    --tblr-primary-darken: color-mix(in srgb, var(--is-primary), #000 10%);
    --tblr-primary-lt: color-mix(in srgb, var(--is-primary) 10%, var(--tblr-bg-surface, #fff));
    --tblr-link-color: var(--is-primary);
    --tblr-link-color-rgb: var(--is-primary-rgb);
    --tblr-link-hover-color: color-mix(in srgb, var(--is-primary), #000 20%);
}

/* Invoervelden en keuzerondjes/vinkjes met een duidelijk zichtbare rand. Focus,
   aangevinkt en fout (Tabler, specifiekere selectors) behouden hun eigen kleur. */
.form-control,
.form-select,
.input-group-text {
    border-color: var(--is-border-input);
}
.form-check-input {
    border-color: var(--is-border-check);
}

/* Bedragen: cijfers even breed, zodat kolommen netjes onder elkaar staan. */
.is-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* In een tabel kleurt Tabler elke cel met `.table > :not(caption) > * > *`, wat een losse klasse overschrijft;
   daarom ook die selector, anders bleven negatieve bedragen in een tabel zwart. */
.is-positive,
.table > :not(caption) > * > .is-positive {
    color: var(--is-positive);
}
.is-negative,
.table > :not(caption) > * > .is-negative {
    color: var(--is-negative);
}
/* Een datagrid-item met mogelijk lange tekst over de volle breedte, niet in een kolom. */
.datagrid-item-wide {
    grid-column: 1 / -1;
}