:root {
    --kleur-primair: #2f6f4f;
    --kleur-primair-donker: #234f38;
    --kleur-achtergrond: #f4f6f5;
    --kleur-kaart: #ffffff;
    --kleur-rand: #e0e4e2;
    --kleur-tekst: #1f2a24;
    --kleur-subtiel: #6b7a72;
    --kleur-rood: #b3261e;
    --kleur-oranje: #b56a00;
    --grafiek-in: #1e8e5a;
    --grafiek-uit: #b56a00;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font-size: 15px;
}

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

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

.zijbalk {
    width: 220px;
    height: 100vh;
    position: sticky;
    top: 0;
    background: var(--kleur-primair-donker);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    flex-shrink: 0;
}
.zijbalk .logo { font-weight: 700; font-size: 18px; padding: 0 20px 20px; flex-shrink: 0; }
.zijbalk ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    /* Als de lijst ooit niet meer past (kleiner scherm, meer menu-items):
       zelf scrollen, zodat het gebruikers-/uitlogblokje onderaan altijd
       zichtbaar blijft i.p.v. van de pagina af te schuiven. */
    overflow-y: auto;
    min-height: 0;
}
.zijbalk-groep-label {
    padding: 16px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.45);
}
.zijbalk ul li:first-child .zijbalk-groep-label { padding-top: 4px; }
.zijbalk li a {
    display: block;
    padding: 11px 20px;
    color: #dce8e1;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.zijbalk li a:hover { background: rgba(255,255,255,0.08); }
.zijbalk li a.actief { background: rgba(255,255,255,0.12); border-left-color: #fff; color: #fff; font-weight: 600; }
.zijbalk-onder { padding: 15px 20px 0; border-top: 1px solid rgba(255,255,255,0.15); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.zijbalk-onder a { color: #dce8e1; }
.uitloggen-knop { appearance: none; background: transparent; border: 0; color: #dce8e1; cursor: pointer; font: inherit; padding: 0; text-align: left; text-decoration: underline; }

.inhoud { flex: 1; padding: 30px 40px; max-width: 1100px; }

h1 { margin-top: 0; font-size: 24px; }
h2 { font-size: 18px; }

.kaart {
    background: var(--kleur-kaart);
    border: 1px solid var(--kleur-rand);
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 20px;
}

.kaarten-rij { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.kaarten-rij .kaart { flex: 1; min-width: 190px; margin-bottom: 0; }
.kaarten-rij .kaart .label { color: var(--kleur-subtiel); font-size: 13px; margin-bottom: 6px; }
.kaarten-rij .kaart .waarde { font-size: 24px; font-weight: 700; }

.voortgangsbalk { background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand); border-radius: 6px; height: 10px; margin: 8px 0; overflow: hidden; }
.voortgangsbalk-vulling { background: var(--kleur-primair); height: 100%; border-radius: 6px; }

.snelkoppelingen { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.snelkoppelingen .knop { font-size: 15px; padding: 12px 20px; }

.grafiek-kaart svg { width: 100%; height: auto; display: block; }
.grafiek-legenda { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; color: var(--kleur-subtiel); }
.grafiek-legenda .stip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--kleur-rand); font-size: 14px; }
th { color: var(--kleur-subtiel); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }
td.rechts, th.rechts { text-align: right; }

/* Lange, vrije tekst (omschrijvingen e.d.) in een tabelcel: afkappen met
   "…" i.p.v. laten wrappen, anders wordt de rij hoger dan de rest en oogt
   de tabel ongelijk. Volledige tekst blijft zichtbaar via het title-attribuut
   (hover) -- zet dat er dus altijd bij in de PHP-template. */
.tekst-afgekapt { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.knop {
    display: inline-block;
    background: var(--kleur-primair);
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}
.knop:hover { background: var(--kleur-primair-donker); }
.knop.secundair { background: #fff; color: var(--kleur-tekst); border: 1px solid var(--kleur-rand); }
.knop.secundair:hover { background: #f0f2f1; }
.knop.gevaar { background: var(--kleur-rood); }
.knop.klein { padding: 5px 10px; font-size: 12px; }

/* Actieknoppen in een tabelcel (bv. Bewerken/Factureren/Verwijderen): met
   losse inline links/formulieren wrappen ze slordig en ongelijk uit. Deze
   flex-wrapper zorgt voor consistente uitlijning en tussenruimte, ook als ze
   over meerdere regels moeten wrappen. */
.tabel-acties { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tabel-acties form { display: inline-flex; margin: 0; }

form.form-vak { max-width: 640px; }
.veld { margin-bottom: 14px; }
.veld label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--kleur-subtiel); }
.veld input[type=text], .veld input[type=email], .veld input[type=password], .veld input[type=number],
.veld input[type=date], .veld input[type=time], .veld select, .veld textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--kleur-rand);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}
.veld-rij { display: flex; gap: 14px; }
.veld-rij .veld { flex: 1; }
.checkbox-veld { display: flex; align-items: center; gap: 8px; }
.checkbox-veld input { width: auto; }

.melding { padding: 11px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.melding-succes { background: #e3f3e8; color: #1e6b3a; border: 1px solid #bfe4cb; }
.melding-fout { background: #fbe7e6; color: var(--kleur-rood); border: 1px solid #f2c6c3; }
.melding-info { background: #eaf1f8; color: #29527a; border: 1px solid #cfe0f0; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-concept { background: #eceff1; color: #546069; }
.badge-verzonden { background: #eaf1f8; color: #29527a; }
.badge-betaald { background: #e3f3e8; color: #1e6b3a; }
.badge-vervallen { background: #fbe7e6; color: var(--kleur-rood); }
.badge-open { background: #eceff1; color: #546069; }

.subtiel { color: var(--kleur-subtiel); }

/* Uren-lijst: kaartenoverzicht voor mobiel (zie media query onderaan) i.p.v.
   een horizontaal scrollende tabel -- dit scherm is de belangrijkste
   mobiele flow (urenregistratie), dus die krijgt een eigen, compactere
   weergave in plaats van de generieke tabel-fallback. */
.uren-lijst-mobiel { display: none; }
.uren-kaart { border: 1px solid var(--kleur-rand); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.uren-kaart-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.uren-kaart-datum { font-weight: 600; }
.uren-kaart-klant { margin: 2px 0 4px; }
.uren-kaart-details { color: var(--kleur-subtiel); font-size: 13px; margin-bottom: 10px; }
.uren-kaart-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.uren-kaart-acties form { display: inline; }
.top-rij { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.login-pagina { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-pagina .kaart { width: 340px; max-width: 100%; }

/* ---------- Nechi landing en MFA ---------- */
.nechi-landing {
    --nechi-diep: #123d38;
    --nechi-groen: #1e6b5d;
    --nechi-goud: #e5a84a;
    --nechi-zand: #f7f1e5;
    background: var(--nechi-zand);
    color: #14322e;
    min-height: 100vh;
}
.nechi-hero {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
    align-items: center;
    gap: clamp(24px, 6vw, 96px);
    max-width: 1240px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 48px clamp(24px, 7vw, 92px);
}
.nechi-woordmerk {
    display: inline-block;
    color: var(--nechi-diep);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1.8px;
    text-decoration: none;
}
.nechi-woordmerk span { color: var(--nechi-goud); }
.nechi-bovenregel {
    margin: 36px 0 10px;
    color: var(--nechi-groen);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.nechi-hero h1 {
    max-width: 520px;
    margin: 0;
    color: var(--nechi-diep);
    font-size: clamp(42px, 5.6vw, 72px);
    letter-spacing: -3px;
    line-height: 1.03;
}
.nechi-intro {
    max-width: 510px;
    margin: 24px 0 28px;
    font-size: 19px;
    line-height: 1.65;
}
.nechi-inlogknop {
    padding: 14px 24px;
    border-radius: 8px;
    background: var(--nechi-diep);
    font-size: 16px;
}
.nechi-inlogknop:hover { background: var(--nechi-groen); }
.nechi-veilig, .nechi-betekenis { font-size: 14px; line-height: 1.5; }
.nechi-veilig { margin: 14px 0 32px; color: #47625d; }
.nechi-betekenis { max-width: 420px; margin: 0; color: #47625d; }
.nechi-illustratie { align-self: stretch; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nechi-illustratie img {
    display: block;
    width: min(100%, 610px);
    height: auto;
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(18, 61, 56, .18);
    animation: nechi-zweef 6s ease-in-out infinite;
}
@keyframes nechi-zweef { 50% { transform: translateY(-9px); } }
.mfa-kaart { width: 430px !important; }
.mfa-geheim { padding: 12px; border-radius: 6px; background: #f1f4f3; font-family: monospace; font-size: 16px; letter-spacing: 1px; overflow-wrap: anywhere; }
.mfa-qr { display: flex; justify-content: center; margin: 18px 0 12px; }
.mfa-qr-code { width: 210px; height: 210px; padding: 10px; border: 1px solid #dce4e2; border-radius: 8px; background: #fff; }
.mfa-handmatig { margin: 14px 0; color: var(--kleur-subtiel); font-size: 14px; }
.mfa-handmatig summary { cursor: pointer; }
.mfa-handmatig .mfa-geheim { margin-top: 10px; color: var(--kleur-tekst); }

@media (prefers-reduced-motion: reduce) { .nechi-illustratie img { animation: none; } }

/* ---------- Mobiel (telefoon/tablet) ---------- */
@media (max-width: 860px) {
    body { font-size: 16px; } /* voorkomt auto-zoom op iOS bij focus in inputs */

    .layout { flex-direction: column; }

    .zijbalk {
        width: 100%;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 4px 10px;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .zijbalk .logo { padding: 0; margin-right: auto; font-size: 16px; }
    .zijbalk ul {
        flex: 1 1 100%;
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
        order: 3;
        margin-top: 6px;
        padding-bottom: 2px;
    }
    .zijbalk li { flex-shrink: 0; }
    .zijbalk li a {
        padding: 9px 13px;
        white-space: nowrap;
        border-left: none;
        border-radius: 6px;
    }
    .zijbalk li a.actief { border-left: none; }
    .zijbalk-onder {
        border-top: none;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 0;
        margin-left: 8px;
        font-size: 13px;
    }

    .inhoud { padding: 18px 14px; max-width: 100%; }

    h1 { font-size: 20px; }

    .kaart { padding: 16px; }
    .kaarten-rij { flex-direction: column; }

    .snelkoppelingen { flex-direction: column; }
    .snelkoppelingen .knop { text-align: center; }

    .veld-rij { flex-direction: column; gap: 0; }

    .top-rij { flex-direction: column; align-items: stretch; }
    .top-rij form { flex-direction: column; }
    .top-rij form .knop { width: 100%; text-align: center; }

    /* Tabellen: horizontaal laten scrollen i.p.v. layout breken */
    table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    td, th { white-space: nowrap; }

    /* Uren-lijst: kaartenoverzicht i.p.v. de (scrollende) tabel. */
    .uren-tabel-bureaublad { display: none; }
    .uren-lijst-mobiel { display: block; }

    .login-pagina .kaart { width: 100%; }

    .nechi-hero { grid-template-columns: 1fr; min-height: auto; padding: 32px 24px 48px; }
    .nechi-bovenregel { margin-top: 28px; }
    .nechi-hero h1 { letter-spacing: -2px; }
    .nechi-illustratie { order: -1; }
    .nechi-illustratie img { max-width: 520px; }
}