/* Videra-huisstijl: donkere zijbalk, wit werkvlak, groene status-accenten. */

:root {
    --navy: #0e1b36;
    --navy-hover: #17284a;
    --navy-lijn: #24365c;
    --wit: #ffffff;
    --achtergrond: #f4f6f9;
    --inkt: #16202f;
    --gedempt: #64748b;
    --zacht: #94a3b8;
    --lijn: #e6e9ef;
    --lijn-sterk: #d5dae2;
    --groen: #0d9488;
    --groen-vlak: #ecfaf8;
    --oranje: #d97706;
    --oranje-vlak: #fff8ec;
    --tekort: #c0392b;
    --tekort-vlak: #fdf1ef;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    background: var(--achtergrond);
    color: var(--inkt);
    font: 14.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.layout { display: flex; min-height: 100vh; }

/* Zijbalk */
.zijbalk {
    width: 15rem;
    flex-shrink: 0;
    background: var(--navy);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
}

.merk {
    display: flex;
    align-items: center;
    padding: .3rem .4rem .9rem;
    margin-bottom: 1rem;
}

/* Logo is een vast beeldbestand (geen vector-bron beschikbaar voor het echte
   merk), dus schalen we op hoogte en laten de breedte meelopen. */
.merk-logo { height: 2.5rem; width: auto; }
.merk-logo--auth { height: 3.4rem; }

.navigatie { display: flex; flex-direction: column; gap: .15rem; flex: 1; }

.nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: 5px;
    font-size: .88rem;
    color: #a9b6cc;
    cursor: default;
}

.nav-item svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

.nav-item--actief {
    background: var(--navy-hover);
    color: #fff;
    font-weight: 600;
    border-left: 2.5px solid var(--groen);
    padding-left: calc(.7rem - 2.5px);
}

.nav-item--uit { opacity: .45; }

.zijbalk-voet {
    border-top: 1px solid var(--navy-lijn);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.gebruiker { display: flex; flex-direction: column; gap: .1rem; }
.gebruiker-naam { font-size: .84rem; font-weight: 600; color: #fff; }
.gebruiker-mail { font-size: .72rem; color: #8b98b3; }

.versie-badge {
    align-self: flex-start;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    color: #6b7896;
    letter-spacing: .02em;
}

/* Hoofdvlak */
.hoofd { flex: 1; padding: 1.75rem 2rem 3rem; max-width: 78rem; }

.paginakop {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.1rem;
}

.paginakop h1 { margin: 0 0 .2rem; font-size: 1.4rem; letter-spacing: -.01em; }
.subtitel { margin: 0; color: var(--gedempt); font-size: .88rem; }

.waarschuwing {
    margin: 0 0 1rem;
    padding: .65rem .9rem;
    background: var(--oranje-vlak);
    border: 1px solid #f0dcae;
    border-radius: 6px;
    font-size: .85rem;
    color: #7a5a17;
}

.attentiebalk {
    margin: 0 0 1.25rem;
    padding: .1rem 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.attentie-item {
    display: block;
    padding: .55rem .9rem;
    background: var(--tekort-vlak);
    border: 1px solid #f2c9c2;
    border-radius: 6px;
    font-size: .84rem;
    color: #8a2e21;
}

/* Kerncijferkaarten */
.kaartrij {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.kaart {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.kaart-kop { display: flex; align-items: center; justify-content: space-between; }

.kaart-label {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zacht);
}

.kaart-icoon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

.kaart-icoon--neutraal { background: #eef1f6; color: var(--gedempt); }
.kaart-icoon--ok { background: var(--groen-vlak); color: var(--groen); }
.kaart-icoon--tekort { background: var(--tekort-vlak); color: var(--tekort); }

.kaart-waarde {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.kaart-waarde.is-negatief { color: var(--tekort); }
.kaart-bij { font-size: .78rem; color: var(--zacht); }

/* Panelen */
.paneel {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.paneel-kop {
    padding: 1.1rem 1.3rem .9rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.paneel-kop h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.paneel-toelichting { font-size: .8rem; color: var(--zacht); }

.tabelhouder { overflow-x: auto; }

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

thead th {
    text-align: left;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zacht);
    padding: 0 1.3rem .55rem;
    border-bottom: 1px solid var(--lijn-sterk);
    white-space: nowrap;
}

tbody th {
    text-align: left;
    font-weight: 600;
    padding: .5rem 1.3rem;
    border-bottom: 1px solid var(--lijn);
    white-space: nowrap;
    color: var(--inkt);
}

tbody td {
    padding: .5rem 1.3rem;
    border-bottom: 1px solid var(--lijn);
    font-variant-numeric: tabular-nums;
}

.getal { text-align: right; white-space: nowrap; }
thead .getal { text-align: right; }

.is-positief { color: var(--groen); }
.is-uitgave { color: #b45309; }
.is-btw { color: #7c3aed; font-weight: 500; }
.is-nul { color: var(--zacht); }
.is-eind { font-weight: 700; }

.deelmaand {
    display: block;
    font-size: .68rem;
    font-weight: 400;
    color: var(--zacht);
}

tr.is-tekort { background: var(--tekort-vlak); }
tr.is-tekort .is-eind { color: var(--tekort); }

/* Toelichtingspaneel */
.paneel--toelichting .paneel-kop { padding-bottom: .3rem; }

.toelichting-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
    padding: .8rem 1.3rem 1.3rem;
}

.toelichting-grid h3 { margin: 0 0 .3rem; font-size: .85rem; font-weight: 600; }
.toelichting-grid p { margin: 0; font-size: .8rem; color: var(--gedempt); line-height: 1.45; }

@media (max-width: 60rem) {
    .kaartrij, .toelichting-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
    .layout { flex-direction: column; }
    .zijbalk { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: .9rem 1rem; }
    .navigatie, .zijbalk-voet { display: none; }
    .hoofd { padding: 1.25rem 1rem 3rem; }
    .kaartrij, .toelichting-grid { grid-template-columns: 1fr; }
}

/* Auth-schermen (login, eerste account) */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--navy);
}

.auth-kaart {
    width: 22rem;
    max-width: 90vw;
    background: var(--wit);
    border-radius: 10px;
    padding: 2.2rem 2rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.merk--auth { margin-bottom: 1.75rem; justify-content: center; }

.auth-kaart h1 { margin: 0 0 .2rem; font-size: 1.25rem; text-align: center; }
.auth-sub { margin: 0 0 1.5rem; text-align: center; color: var(--gedempt); font-size: .85rem; }

.auth-fout {
    margin: 0 0 1rem;
    padding: .6rem .8rem;
    background: var(--tekort-vlak);
    border: 1px solid #f2c9c2;
    border-radius: 6px;
    color: #8a2e21;
    font-size: .85rem;
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-form label, .formulier label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gedempt);
}

.auth-form input, .formulier input, .formulier select {
    font: inherit;
    padding: .55rem .7rem;
    border: 1px solid var(--lijn-sterk);
    border-radius: 6px;
    color: var(--inkt);
}

.auth-form input:focus, .formulier input:focus, .formulier select:focus {
    outline: 2px solid var(--groen);
    outline-offset: 1px;
    border-color: var(--groen);
}

.auth-form button, .formulier button {
    font: inherit;
    font-weight: 600;
    padding: .65rem 1rem;
    border: none;
    border-radius: 6px;
    background: var(--navy);
    color: #fff;
    cursor: pointer;
}

.auth-form button:hover, .formulier button:hover { background: var(--navy-hover); }

.auth-note { margin: 1.25rem 0 0; font-size: .78rem; color: var(--zacht); text-align: center; }
.auth-versie { position: fixed; left: 1rem; bottom: .75rem; }
.auth-versie .versie { color: #7889a8; }

/* Formulierpagina's binnen de app-layout */
.formulier-paneel { padding: 1.5rem; }
.formulier { display: flex; flex-direction: column; gap: 1.1rem; max-width: 28rem; }
.form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-fout {
    margin: 0 0 1rem;
    padding: .65rem .9rem;
    background: var(--tekort-vlak);
    border: 1px solid #f2c9c2;
    border-radius: 6px;
    font-size: .85rem;
    color: #8a2e21;
}

.nav-item--uitloggen { margin-top: .5rem; border-top: 1px solid var(--navy-lijn); padding-top: .8rem; }

a.nav-item { text-decoration: none; }

/* Facturenoverzicht: koppagina met een actieknop, en een tekstknop per rij */
.paginakop .knop-primair {
    align-self: flex-start;
    font-weight: 600;
    font-size: .85rem;
    padding: .5rem .9rem;
    border-radius: 6px;
    background: var(--navy);
    color: #fff;
    text-decoration: none;
}

.paginakop .knop-primair:hover { background: var(--navy-hover); }

.inline-form { margin: 0; }

.knop-tekst {
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--groen);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.knop-tekst:hover { color: var(--navy); }

/* Attentie-items als link, zodat ze naar de bijbehorende pagina leiden */
a.attentie-item { display: block; text-decoration: none; }
a.attentie-item:hover { text-decoration: underline; }

/* Administratie- en beheerschermen */
.paneel-titel {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.formulier--compact { max-width: 22rem; }

.lege-sectie { padding: 1rem 1.3rem; margin: 0; }

tr.is-inactief { opacity: .55; }
tr.is-inactief th { text-decoration: line-through; }

.herstelcodes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem .8rem;
    max-width: 24rem;
    padding: 0;
    margin: 1rem 0;
    list-style: none;
}
.herstelcodes li {
    padding: .4rem .6rem;
    background: var(--paneel-alt, #f5f5f5);
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: .85rem;
    text-align: center;
}

.melding-ok {
    margin: 0 0 1rem;
    padding: .6rem .8rem;
    background: var(--groen-vlak);
    border: 1px solid #a8e0d4;
    border-radius: 6px;
    color: #0d5c52;
    font-size: .85rem;
}