/* Spanje Scout — vormgeving (Taak 14)
   ====================================================================

   Richting: een rustig, financieel/analytisch werkinstrument voor één
   gebruiker die een investeringsbeslissing voorbereidt, geen marketingsite.
   Elk scherm is een dichte gegevenstabel met formulieren erin, geen hero,
   geen bewegingsdecoratie. De kernregel van dit project — "een bedrag
   zonder herkomst is een bug" — is ook de visuele kern: elk getal draagt
   een herkomstbadge (feit / standaardwaarde / handmatig gezet / afgeleid),
   in vier vaste kleuren, overal hetzelfde. Dat is het enige terugkerende
   signatuurelement; de rest is bewust rustig.

   Typografie: "IBM Plex Sans" voor tekst, "IBM Plex Mono" met tabular-nums
   voor elk getal — zodat een kolom bedragen altijd uitlijnt en een getal
   nooit met een label te verwarren is. Geen Google Fonts-import: dit
   project vermijdt bewust elke CDN-afhankelijkheid (zelfde regel als het
   ontbreken van HTMX in spanje.js, zie de toelichting daar) zodat de app
   ook zonder internettoegang bruikbaar blijft. De namen hieronder zijn
   daarom een voorkeur binnen een robuuste systeemlettertype-stack, geen
   harde eis.

   Licht/donker: volledig op `prefers-color-scheme`, zelfde tokens,
   uitsluitend de kleurwaarden wisselen.
   ==================================================================== */

:root {
    --lettertype-tekst: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lettertype-getal: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
        Consolas, "Liberation Mono", monospace;

    --bg: #f6f7fb;
    --oppervlak: #ffffff;
    --oppervlak-gedempt: #eef1f7;
    --rand: #dde2ec;
    --tekst: #131b2e;
    --tekst-gedempt: #57607a;
    --schaduw: 0 1px 2px rgba(19, 27, 46, 0.06), 0 6px 16px rgba(19, 27, 46, 0.05);

    --primair: #1d3461;
    --primair-sterk: #142544;
    --op-primair: #ffffff;
    --accent: #b4650a;

    --feit: #1f7a4d;
    --feit-bg: #e3f3ea;
    --aanname: #57607a;
    --aanname-bg: #eaecf2;
    --overschreven: #a05a08;
    --overschreven-bg: #faedd8;
    --berekend: #3b5fc4;
    --berekend-bg: #e7ebfb;

    --positief: #1f7a4d;
    --negatief: #b3261e;
    --negatief-bg: #fbe9e7;
    --waarschuwing: #7a4a0a;
    --waarschuwing-bg: #fdf0dc;
    --ring: #3b5fc4;

    --straal: 10px;
    --straal-klein: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1420;
        --oppervlak: #161e2e;
        --oppervlak-gedempt: #1d2637;
        --rand: #2a3549;
        --tekst: #e7ecf6;
        --tekst-gedempt: #9aa6bf;
        --schaduw: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35);

        --primair: #7c9ce0;
        --primair-sterk: #a9c1ec;
        --op-primair: #0e1420;
        --accent: #e0a055;

        --feit: #4ade80;
        --feit-bg: #163524;
        --aanname: #9aa6bf;
        --aanname-bg: #212c40;
        --overschreven: #f0a93b;
        --overschreven-bg: #3a2c12;
        --berekend: #93a9f5;
        --berekend-bg: #202a4a;

        --positief: #4ade80;
        --negatief: #f87171;
        --negatief-bg: #3a1c1a;
        --waarschuwing: #f0c473;
        --waarschuwing-bg: #3a2c12;
        --ring: #93a9f5;
    }
}

/* ------------------------------------------------------------------ */
/* Basis                                                               */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
}

body {
    font-family: var(--lettertype-tekst);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    color: var(--tekst);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.6em;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 1.55rem;
}

h2 {
    font-size: 1.15rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rand);
}

h3 {
    font-size: 1rem;
}

h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tekst-gedempt);
}

p {
    margin: 0 0 0.75em;
}

a {
    color: var(--primair);
}

a:hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--primair);
    color: var(--op-primair);
    padding: 0.6rem 1rem;
    border-radius: 0 0 var(--straal-klein) 0;
    z-index: 100;
}

.skip-link:focus {
    left: 0;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ------------------------------------------------------------------ */
/* Topbalk en navigatie                                                */
/* ------------------------------------------------------------------ */

.topbalk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    padding: 0.85rem 1.5rem;
    background: var(--oppervlak);
    border-bottom: 1px solid var(--rand);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbalk .merk {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--tekst);
    white-space: nowrap;
}

.topbalk .merk .merk-teken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--straal-klein);
    background: var(--primair);
    color: var(--op-primair);
    font-family: var(--lettertype-getal);
    font-size: 0.85rem;
    font-weight: 600;
}

.topbalk nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.topbalk nav a {
    padding: 0.4rem 0.65rem;
    border-radius: var(--straal-klein);
    color: var(--tekst-gedempt);
    text-decoration: none;
    font-size: 0.9rem;
}

.topbalk nav a:hover {
    background: var(--oppervlak-gedempt);
    color: var(--tekst);
}

.topbalk nav a[aria-current="page"] {
    background: var(--primair);
    color: var(--op-primair);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

main {
    padding: 1.5rem;
    max-width: 76rem;
    margin: 0 auto;
    width: 100%;
}

section,
.paneel {
    background: var(--oppervlak);
    border: 1px solid var(--rand);
    border-radius: var(--straal);
    box-shadow: var(--schaduw);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

section > h2:first-child,
section > h3:first-child {
    margin-top: 0;
}

.pand-kop {
    color: var(--tekst-gedempt);
}

/* ------------------------------------------------------------------ */
/* Tabellen                                                             */
/* ------------------------------------------------------------------ */

.tabel-wrap {
    overflow-x: auto;
    border-radius: var(--straal-klein);
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}

th,
td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
    white-space: nowrap;
}

td.toelichting,
td.uitleg {
    white-space: normal;
    min-width: 14rem;
    color: var(--tekst-gedempt);
}

th {
    position: sticky;
    top: 0;
    background: var(--oppervlak-gedempt);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tekst-gedempt);
}

tbody tr:hover {
    background: var(--oppervlak-gedempt);
}

tbody tr.aangepast {
    background: var(--overschreven-bg);
}

/* Elk bedrag in de doorrekening staat in de cijferletter, rechts
   uitgelijnd binnen zijn kolom, met vaste breedte-cijfers zodat een
   kolom bedragen als kolom leesbaar blijft.

   `.bedrag` is voorbehouden aan een postregel die altijd een
   `.herkomst` naast zich heeft (de kernregel van dit project, zie
   `toon_blok` in `pand.html`); `.geld` is dezelfde opmaak voor een
   geldbedrag dat geen doorrekenpost is (bijvoorbeeld een kale
   vraagprijs) en dus ook geen herkomstbadge belooft. */
.bedrag,
.geld {
    font-family: var(--lettertype-getal);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Herkomstbadge — het signatuurelement                                 */
/* ------------------------------------------------------------------ */

.herkomst {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: var(--lettertype-tekst);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--aanname);
    background: var(--aanname-bg);
}

.herkomst::before {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.herkomst[data-waarde="feit"] {
    color: var(--feit);
    background: var(--feit-bg);
}

.herkomst[data-waarde="aanname"] {
    color: var(--aanname);
    background: var(--aanname-bg);
}

.herkomst[data-waarde="overschreven"] {
    color: var(--overschreven);
    background: var(--overschreven-bg);
}

.herkomst[data-waarde="berekend"] {
    color: var(--berekend);
    background: var(--berekend-bg);
}

/* Statusbadge — hergebruikt hetzelfde pilvormige patroon voor
   vergunningsstatus, bronstatus en pandstatus, telkens via een
   `data-waarde`-attribuut zodat de kleur de betekenis volgt in plaats
   van andersom. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--aanname);
    background: var(--aanname-bg);
}

.badge[data-waarde="geschikt"],
.badge[data-waarde="open"],
.badge[data-waarde="geslaagd"],
.badge[data-waarde="shortlist"] {
    color: var(--feit);
    background: var(--feit-bg);
}

.badge[data-waarde="afgewezen"],
.badge[data-waarde="bevroren"],
.badge[data-waarde="mislukt"] {
    color: var(--negatief);
    background: var(--negatief-bg);
}

.badge[data-waarde="te verifieren"],
.badge[data-waarde="onbekend"],
.badge[data-waarde="beperkt"],
.badge[data-waarde="bezig"],
.badge[data-waarde="nieuw"] {
    color: var(--waarschuwing);
    background: var(--waarschuwing-bg);
}

.badge[data-waarde="met waarschuwing"],
.badge[data-waarde="bezichtigd"] {
    color: var(--overschreven);
    background: var(--overschreven-bg);
}

/* Dynamische statusklassen (`status-{{ waarde }}`) op tabelrijen —
   vastgelegd in taak 9 en 11, hier alleen van kleur voorzien. */
tr.status-geslaagd,
tr.status-open {
    box-shadow: inset 3px 0 0 var(--feit);
}

tr.status-mislukt,
tr.status-bevroren {
    box-shadow: inset 3px 0 0 var(--negatief);
}

tr.status-bezig,
tr.status-beperkt,
tr.status-onbekend {
    box-shadow: inset 3px 0 0 var(--waarschuwing);
}

tr.status-onbekend.verlopen,
tr.status-open.verlopen,
tr.status-beperkt.verlopen {
    box-shadow: inset 3px 0 0 var(--negatief);
}

.verlopen-waarschuwing,
.afwijking-waarschuwing,
.nooit-geslaagd {
    display: inline-block;
    margin-left: 0.4em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--waarschuwing);
    background: var(--waarschuwing-bg);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.fout-tekst {
    color: var(--negatief);
}

/* ------------------------------------------------------------------ */
/* Lege staten en meldingen                                            */
/* ------------------------------------------------------------------ */

.lege-staat {
    color: var(--tekst-gedempt);
    font-style: italic;
}

.waarschuwing {
    background: var(--waarschuwing-bg);
    color: var(--waarschuwing);
    border: 1px solid transparent;
    border-radius: var(--straal-klein);
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
}

p.fout {
    background: var(--negatief-bg);
    color: var(--negatief);
    border-radius: var(--straal-klein);
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
}

.scenario-actief {
    color: var(--tekst-gedempt);
    font-size: 0.9rem;
}

.uitkomst {
    font-weight: 600;
}

.herkomstregel {
    color: var(--tekst-gedempt);
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Formulieren                                                         */
/* ------------------------------------------------------------------ */

label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tekst-gedempt);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

input,
select,
button,
textarea {
    font: inherit;
    color: var(--tekst);
}

input,
select,
textarea {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--rand);
    border-radius: var(--straal-klein);
    background: var(--oppervlak);
    min-height: 2.25rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

button {
    cursor: pointer;
    background: var(--primair);
    color: var(--op-primair);
    border: 1px solid transparent;
    border-radius: var(--straal-klein);
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    min-height: 2.25rem;
    transition: background-color 150ms ease;
}

button:hover {
    background: var(--primair-sterk);
}

form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.filters {
    align-items: flex-end;
}

.beleid-formulier {
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.beleid-formulier input[type="text"],
.beleid-formulier input[type="date"] {
    min-width: 8rem;
}

/* ------------------------------------------------------------------ */
/* Ranglijst                                                           */
/* ------------------------------------------------------------------ */

.pandstatus-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.pandstatus-filter a {
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--rand);
    color: var(--tekst-gedempt);
}

.pandstatus-filter a.actief {
    background: var(--primair);
    border-color: var(--primair);
    color: var(--op-primair);
}

.zoekprofielen ul {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.zoekprofielen li {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.zoekprofielen a {
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--rand);
}

.zoekprofielen a.actief {
    background: var(--berekend-bg);
    border-color: var(--berekend);
    color: var(--berekend);
}

.profiel-filters {
    color: var(--tekst-gedempt);
    font-size: 0.8rem;
}

.ranglijst-blok h2 {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
}

/* ------------------------------------------------------------------ */
/* Pandportret                                                         */
/* ------------------------------------------------------------------ */

.doorrekening-blok {
    margin: 0.75rem 0 1.25rem;
}

.doorrekening-blok h4 {
    margin-bottom: 0.4rem;
}

.scenario-blok {
    border-top: 1px solid var(--rand);
    padding-top: 1rem;
    margin-top: 1rem;
}

.scenario-blok:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.overschreven-velden {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.overschreven-velden li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    padding: 0.5rem 0.7rem;
    background: var(--oppervlak-gedempt);
    border-radius: var(--straal-klein);
}

.overschreven-velden .veld {
    font-weight: 600;
}

.overschreven-velden .waarde {
    font-family: var(--lettertype-getal);
    font-variant-numeric: tabular-nums;
}

.overschreven-velden form {
    margin-left: auto;
}

.gevoeligheid ul {
    margin: 0;
    padding-left: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* Responsief                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
    .topbalk {
        padding: 0.75rem 1rem;
    }

    main {
        padding: 1rem;
    }

    section,
    .paneel {
        padding: 0.9rem 1rem;
    }

    form {
        flex-direction: column;
        align-items: stretch;
    }

    .overschreven-velden form {
        margin-left: 0;
    }
}