:root {
    --page-bg: #dfeef8;
    --card-bg: #eef7fc;
    --card-bg-strong: #e7f3fa;
    --border: #b87333; /* koper */
    --text: #17324a;
    --muted: #597487;
    --accent: #2f729e;
    --accent-hover: #235a7d;
    --white: #ffffff;
    --radius: 18px;
    --shadow: 0 7px 24px rgba(44, 88, 116, 0.10);
}

* {
    box-sizing: border-box;
}

html {
    /* Verdana is gemaakt voor schermleesbaarheid: grote x-hoogte, ruime letterafstand.
       DejaVu Sans is de gebruikelijke tegenhanger op Linux en Android. */
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    color: var(--text);
    background: var(--page-bg);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--page-bg);
}

img {
    max-width: 100%;
    height: auto;
}

.page-shell {
    width: min(1280px, calc(100% - 36px));
    margin: 24px auto;
}

.card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.site-header {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 28px;
    margin-bottom: 22px;
}

.logo-link {
    display: flex;
    justify-content: center;
}

.site-logo {
    display: block;
    width: min(380px, 42vw);
    max-height: 110px;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
}

.header-text h1 {
    margin: 0 0 5px;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    text-align: center;
}

.header-text p {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    text-align: center;
}

.site-layout {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sidebar-card,
.content-card {
    padding: 15px;
}

.sidebar-card h2,
.content-card h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
}

nav.sidebar-card a {
    display: block;
    padding: 7px 10px;
    margin: 1px 0;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}

nav.sidebar-card a:hover {
    background: #d9edf8;
    transform: translateX(2px);
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.hero-card {
    padding: 30px;
}

.lead {
    font-size: 1.25rem;
    line-height: 1.55;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.inner-card {
    background: var(--card-bg-strong);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 18px;
}

.inner-card h3 {
    margin-top: 0;
}

label {
    font-weight: 700;
    font-size: .93rem;
}

.login-form,
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

input,
textarea {
    width: 100%;
    border: 1px solid #aacbde;
    border-radius: 10px;
    padding: 11px 12px;
    font: inherit;
    color: var(--text);
    background: var(--white);
    outline: none;
}

input:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47, 114, 158, .12);
}

/* Zichtbare focus voor toetsenbordnavigatie (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.button {
    display: inline-block;
    border: 0;
    border-radius: 10px;
    padding: 11px 16px;
    margin-top: 5px;
    background: var(--accent);
    color: var(--white);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--accent-hover);
}

.button-secondary {
    width: 100%;
    text-align: center;
}

.text-link {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.message {
    background: #eef7fc;
    border: 1px solid #aacbde;
    color: var(--text);
    border-radius: 9px;
    padding: 9px 10px;
    font-size: .9rem;
}

.message.error {
    background: #fff1f1;
    border: 1px solid #f0c4c4;
    color: #8c3131;
}

.register-link {
    margin: 10px 0 0;
    font-size: .88rem;
    text-align: center;
}

.register-link a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.site-footer {
    padding: 18px 22px;
    margin-top: 22px;
    text-align: center;
    color: var(--muted);
}

.site-footer p {
    margin: 0;
}

.secondary-footer {
    min-height: 54px;
    margin-top: 22px;
    text-align: center;
    color: var(--muted);
}

@media (max-width: 820px) {
    .page-shell {
        width: min(100% - 20px, 720px);
        margin: 10px auto;
    }

    .site-header {
        min-height: 0;
        gap: 14px;
        padding: 18px;
    }

    .site-logo {
        width: min(100%, 360px);
    }

    .site-layout {
        display: flex;
        flex-direction: column;
    }

    .sidebar,
    .main-content {
        width: 100%;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        order: 1;
    }

    .main-content {
        order: 2;
    }

    .sidebar-card,
    .content-card,
    .hero-card {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .page-shell {
        width: calc(100% - 12px);
        margin: 6px auto;
    }

    .card {
        border-radius: 14px;
    }

    .site-header,
    .sidebar-card,
    .content-card,
    .hero-card {
        padding: 12px;
    }

    .header-text p {
        font-size: .96rem;
    }
}

/* --- Backend --- */
.table-wrap {
    overflow-x: auto;
}

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

.data-table th,
.data-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #cfe3ef;
    vertical-align: middle;
}

.data-table th {
    font-weight: 700;
    white-space: nowrap;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table select {
    width: auto;
    min-width: 150px;
    padding: 6px 8px;
    border: 1px solid #aacbde;
    border-radius: 8px;
    font: inherit;
    background: var(--white);
    color: var(--text);
}

.button-small {
    padding: 6px 12px;
    margin-top: 0;
    font-size: .88rem;
}

.backend-hint {
    color: var(--muted);
    font-size: .9rem;
    margin-top: 0;
}

.muted {
    color: var(--muted);
}

.tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--card-bg-strong);
    border: 1px solid var(--border);
    font-size: .75rem;
    font-weight: 700;
}

.plain-list {
    margin: 0 0 14px;
    padding-left: 20px;
}

.inline-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.inline-form input {
    width: auto;
    flex: 1 1 220px;
}

.inline-form label {
    align-self: center;
}

/* Zichtbaar voor schermlezers, niet in beeld */
.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;
}

/* --- Formulier met velden naast elkaar --- */
.veld-raster {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.veld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    flex: 1 1 180px;
}

.veld.breed {
    flex-basis: 100%;
}

.veld.smal {
    flex: 0 1 120px;
}

.veld.knoppen {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

/* Een vinkje met zijn tekst ernaast in plaats van eronder. Het label omsluit
   het vakje, zodat de hele regel aanklikbaar is. */
.keuzeregel {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.keuzeregel input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--accent);
}

.veld select {
    padding: 11px 12px;
    border: 1px solid #aacbde;
    border-radius: 10px;
    font: inherit;
    background: var(--white);
    color: var(--text);
}

.verplicht {
    color: var(--border);
}

/* Knop die eruitziet als een link, voor acties die een formulier nodig hebben */
.link-button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.data-table td.acties {
    white-space: nowrap;
}

.data-table td.acties form {
    display: inline;
}

.data-table td.acties > * + * {
    margin-left: 10px;
}

@media (max-width: 560px) {
    .veld,
    .veld.smal {
        flex-basis: 100%;
    }
}

/* --- Berichten en verzoeken --- */
.teller {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--white);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
}

.berichtenlijst,
.verzoeklijst {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.bericht,
.verzoek {
    padding: 12px 14px;
    border: 1px solid #cfe3ef;
    border-radius: 12px;
    margin-bottom: 10px;
    background: var(--white);
}

.bericht.ongelezen {
    border-color: var(--border);
    background: var(--card-bg-strong);
}

.bericht-kop,
.verzoek-kop {
    margin: 0 0 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bericht-datum {
    margin-left: auto;
    font-size: .82rem;
}

.bericht-tekst,
.verzoek-toelichting {
    margin: 0;
    font-size: .93rem;
}

.verzoek-toelichting {
    padding: 8px 12px;
    background: var(--card-bg);
    border-radius: 8px;
    margin-bottom: 10px;
}

.besluit-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.besluit-form input[type="text"] {
    flex: 1 1 200px;
    width: auto;
    padding: 7px 10px;
}

.button-afwijzen {
    background: #8c3131;
}

.button-afwijzen:hover {
    background: #6f2626;
}

.status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-wacht_op_gettech,
.status-wacht_op_klant {
    background: #fdf3e3;
    border: 1px solid #e0b878;
    color: #7a5316;
}

.status-goedgekeurd {
    background: #e8f6ec;
    border: 1px solid #9ccfae;
    color: #235c36;
}

.status-afgewezen {
    background: #fff1f1;
    border: 1px solid #f0c4c4;
    color: #8c3131;
}

.klantgegevens {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin: 0 0 10px;
    font-size: .9rem;
}

.klantgegevens dt {
    font-weight: 700;
    color: var(--muted);
}

.klantgegevens dd {
    margin: 0;
}

.status-klant-actief {
    background: #e8f6ec;
    border: 1px solid #9ccfae;
    color: #235c36;
}

.status-klant-aangemeld {
    background: #fdf3e3;
    border: 1px solid #e0b878;
    color: #7a5316;
}

.status-opdracht {
    background: var(--card-bg-strong);
    border: 1px solid var(--border);
    color: var(--text);
}

.factuurblok {
    margin-bottom: 16px;
}

.factuurblok h3 {
    margin-top: 0;
}

.factuur-status {
    margin: 10px 0 0;
    font-size: .88rem;
}

/* --- Voorpagina --- */
.intro .lead {
    margin-bottom: 10px;
}

.inner-card h3 a {
    color: var(--text);
    text-decoration: none;
}

.inner-card h3 a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.inner-card.nadruk {
    background: var(--white);
    border-color: var(--accent);
}

.aanzet {
    margin-bottom: 0;
    padding-top: 12px;
    border-top: 1px solid #cfe3ef;
    font-size: .95rem;
}

/* Drie kolommen voor korte kaarten, bijvoorbeeld de sectoren op de
   informatiepagina. Onder de 820px valt de raster al terug op één kolom. */
.content-grid-drie {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Opsomming van werkzaamheden: twee kolommen met rustige vlakjes in plaats
   van opsommingstekens. */
.kenmerken {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 18px;
}

.kenmerken li {
    background: var(--card-bg-strong);
    border-radius: 10px;
    padding: 9px 13px;
}

@media (max-width: 700px) {
    .kenmerken {
        grid-template-columns: 1fr;
    }
}

/* Deze staat bewust helemaal onderaan. De mediaquery voor smalle schermen
   staat eerder in dit bestand, en bij gelijke specificiteit wint de laatste
   regel. Zonder dit blok zou de driekoloms raster op een telefoon blijven
   staan. */
@media (max-width: 820px) {
    .content-grid-drie {
        grid-template-columns: 1fr;
    }
}

/* Lokaasveld van het contactformulier: onzichtbaar voor mensen, wel aanwezig
   in de pagina zodat een robot erin trapt. */
.vulveld {
    display: none;
}

/* --- Agenda ---------------------------------------------------------------
   Een week van maandag tot en met zondag, elke dag van 06:00 tot 23:00 in
   stappen van een kwartier. Op een smal scherm schuift het rooster opzij in
   plaats van dat het onleesbaar wordt ingedrukt. */

.weekkeuze {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.weekknop {
    padding: 6px 11px;
    border-radius: 9px;
    background: var(--card-bg-strong);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
}

.weekknop:hover { background: #d9edf8; }
.weekknop.huidig { background: var(--accent); color: var(--white); }
.weekknop.huidig .muted { color: #d7e9f4; }

.agenda-schuif { overflow-x: auto; }

.agenda-kop,
.agenda-rooster {
    display: grid;
    grid-template-columns: 3rem repeat(7, minmax(96px, 1fr));
    min-width: 760px;
}

.agenda-kop {
    gap: 4px;
    margin-bottom: 6px;
}

.agenda-kop span {
    font-size: .84rem;
    font-weight: 700;
}

.agenda-kop .vandaag { color: var(--accent); }
.agenda-kop .muted { font-weight: 400; }

.agenda-rooster { gap: 4px; }

.tijdas,
.dagkolom {
    display: grid;
    grid-template-rows: repeat(68, 11px);
}

.tijdas span {
    font-size: .72rem;
    color: var(--muted);
    text-align: right;
    padding-right: 6px;
    line-height: 1;
}

.dagkolom {
    border-radius: 8px;
    /* Een streep per uur, zodat de tijd afleesbaar blijft zonder extra elementen. */
    background:
        repeating-linear-gradient(
            to bottom,
            var(--card-bg-strong) 0 43px,
            #d3e6f2 43px 44px
        );
}

.dagkolom.vandaag { outline: 2px solid var(--accent); outline-offset: 1px; }

.venster {
    border-radius: 7px;
    padding: 5px 7px;
    font-size: .76rem;
    line-height: 1.3;
    overflow: auto;
    background: var(--white);
    border: 1px solid var(--border);
}

.venster-vrij { background: #e7f6ea; border-color: #6fae7d; }
.venster-voorlopig { background: #fdf3e0; border-color: var(--border); }
.venster-vast { background: #e2eff8; border-color: var(--accent); }
.venster-geblokkeerd { background: #ececec; border-color: #a8a8a8; }
.venster-eigen { box-shadow: inset 0 0 0 2px var(--accent); }

.venster p { margin: 0 0 2px; }
.venster-tijd { font-weight: 700; }
.venster-wie { font-weight: 700; }
.venster-status { color: var(--muted); font-size: .72rem; }
.venster-beperkt { color: var(--border); font-size: .7rem; }
.venster summary { cursor: pointer; font-size: .74rem; }
.venster select { max-width: 100%; font-size: .74rem; }

/* Een leeg uur in het rooster is voor GetTech een link die het formulier
   hieronder voorinvult. Geen JavaScript nodig; het is gewoon een verwijzing. */
.vrij-uur {
    display: block;
    margin: 1px;
    border-radius: 6px;
}

.vrij-uur:hover,
.vrij-uur:focus-visible {
    background: rgba(184, 115, 51, .20);
    box-shadow: inset 0 0 0 1px var(--border);
}

/* Dagen van de week als vinkjes naast elkaar, bij het herhalen van een venster. */
.dagkeuze {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dagvinkje {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--card-bg-strong);
    font-weight: 400;
    cursor: pointer;
}

.dagvinkje:hover { background: #d9edf8; }

/* Uren die tijdens het slepen geselecteerd zijn. */
.vrij-uur.gekozen {
    background: rgba(184, 115, 51, .34);
    box-shadow: inset 0 0 0 1px var(--border);
}

/* De uitnodigingslink, die maar één keer te zien is. Vaste tekenbreedte en
   afbreken op elk teken, zodat een lang token niet buiten de kaart valt, en in
   één klik te selecteren. */
.uitnodiglink {
    font-family: Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9rem;
    word-break: break-all;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    user-select: all;
}

/* Formulieren die alleen in de weg staan tot je ze nodig hebt. Het is gewoon
   <details>, dus het klapt open zonder JavaScript. */
.invoegblok > summary {
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 3px 0;
    color: var(--accent);
}

.invoegblok > summary:hover {
    color: var(--accent-hover);
}

.invoegblok[open] > summary {
    margin-bottom: 14px;
    color: var(--text);
}