/*
 * Broekhofopleidingen — basisopmaak.
 *
 * Kleuren uit Kleuren.Lettertype.docx:
 *   #f3901f  oranje, het accent
 *   #1f2a44  donkerblauw, de navigatie
 *   #0f0a0a  bijna zwart, tekst
 *   #f5f5f5  lichtgrijs, achtergrond
 *   #ffffff  wit, vlakken
 *
 * Lettertype was vrij te kiezen, mits duidelijk leesbaar: daarom de
 * systeemletter van het besturingssysteem. Die is op elk apparaat vertrouwd,
 * hoeft niet gedownload te worden en is op schermgrootte geoptimaliseerd.
 */

:root {
    --oranje:      #f3901f;
    --oranje-donker: #d97b0d;
    --navy:        #1f2a44;
    --navy-licht:  #2c3a5c;
    --zwart:       #0f0a0a;
    --grijs:       #f5f5f5;
    --wit:         #ffffff;
    --rand:        #e2e5ea;
    --gedempt:     #6b7280;
    --groen:       #1a5c31;
    --groen-vlak:  #dff3e4;
    --rood:        #8a1f1f;
    --rood-vlak:   #fbe0e0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--zwart);
    background: var(--grijs);
}

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

/* ---- Navigatielaag 1: hoofddelen ---------------------------------------- */

.balk {
    background: var(--navy);
    color: var(--wit);
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 1.25rem;
}

.merk {
    font-weight: 700;
    letter-spacing: .01em;
    padding: .85rem 0;
    white-space: nowrap;
}
.merk span { color: var(--oranje); }

.hoofddelen { display: flex; gap: .25rem; flex: 1; }

.hoofddelen a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    padding: .85rem 1rem;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.hoofddelen a:hover { color: var(--wit); background: var(--navy-licht); }
.hoofddelen a.actief {
    color: var(--wit);
    border-bottom-color: var(--oranje);
    font-weight: 600;
}

.gebruiker {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .88rem;
    color: rgba(255,255,255,.8);
    white-space: nowrap;
}
.penning {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--oranje);
    color: var(--navy);
    display: grid; place-items: center;
    font-weight: 700; font-size: .78rem;
}
.gebruiker a { color: rgba(255,255,255,.8); }

/* ---- Navigatielaag 2: pagina's van het actieve hoofddeel ---------------- */

.romp { display: flex; min-height: calc(100vh - 57px); align-items: stretch; }

.zijbalk {
    width: 15rem;
    flex: 0 0 15rem;
    background: var(--wit);
    border-right: 1px solid var(--rand);
    padding: 1rem 0;
}

.zijbalk a, .zijbalk span.nietgebouwd {
    display: block;
    padding: .45rem 1.25rem;
    text-decoration: none;
    color: var(--zwart);
    border-left: 3px solid transparent;
}
.zijbalk a:hover { background: var(--grijs); }
.zijbalk a.actief {
    border-left-color: var(--oranje);
    background: var(--grijs);
    font-weight: 600;
}
.zijbalk span.nietgebouwd { color: #aab0bb; cursor: default; }
.zijbalk span.nietgebouwd::after {
    content: " · nog niet gebouwd";
    font-size: .72rem;
}

.kopje {
    padding: 1rem 1.25rem .35rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gedempt);
    font-weight: 700;
}

/* ---- Uitklapbaar Beheer-blok -------------------------------------------- */

.inhoud { flex: 1; padding: 1.75rem 2rem; min-width: 0; }

h1 { font-size: 1.35rem; margin: 0 0 .2rem; }
.onderschrift { margin: 0 0 1.5rem; color: var(--gedempt); }

/* ---- Vlakken ------------------------------------------------------------ */

.kaart {
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: .5rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

table.lijst { width: 100%; border-collapse: collapse; background: var(--wit); }
table.lijst th {
    text-align: left;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gedempt);
    padding: .6rem .8rem;
    border-bottom: 2px solid var(--rand);
}
table.lijst td { padding: .65rem .8rem; border-bottom: 1px solid var(--rand); }
table.lijst tr:hover td { background: #fafbfc; }

.melding { padding: .8rem 1rem; border-radius: .4rem; margin-bottom: 1.25rem; }
.melding.goed { background: var(--groen-vlak); color: var(--groen); }
.melding.fout { background: var(--rood-vlak); color: var(--rood); }
/*
 * Principe 13 maakt onderscheid tussen waarschuwen en blokkeren. Als een
 * waarschuwing er hetzelfde uitziet als een fout, leest een medewerker
 * "opgeslagen, let op" als "mislukt" — en dat is precies het verschil dat
 * dit principe wil overbrengen.
 */
.melding.let-op { background: #fdf1dd; color: #8a5a08; }

.speld {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 1rem;
    font-size: .74rem;
    font-weight: 600;
}
.speld.actief   { background: var(--groen-vlak); color: var(--groen); }
.speld.inactief { background: #eceef2; color: var(--gedempt); }

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

label { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .88rem; }
.veld { margin-bottom: 1rem; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], select, textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--rand);
    border-radius: .35rem;
    font: inherit;
    background: var(--wit);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--oranje);
    outline-offset: -1px;
    border-color: var(--oranje);
}

button, .knop {
    background: var(--oranje);
    color: var(--zwart);
    border: 0;
    padding: .6rem 1.1rem;
    border-radius: .35rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
button:hover, .knop:hover { background: var(--oranje-donker); }
button.stil, .knop.stil {
    background: transparent;
    border: 1px solid var(--rand);
    color: var(--zwart);
    font-weight: 500;
}
button.stil:hover, .knop.stil:hover { background: var(--grijs); }

/* ---- Maandblokken -------------------------------------------------------- */

/*
 * Lange lijsten worden per maand ingeklapt. Tachtig trainingen onder elkaar
 * zijn niet te overzien; "wat staat er in oktober" wel. De eerstvolgende maand
 * staat open, de rest dicht.
 */
details.maandblok {
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: .5rem;
    margin-bottom: .6rem;
    overflow: hidden;
}

details.maandblok > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    font-weight: 600;
    background: #fafbfc;
}
details.maandblok > summary::-webkit-details-marker { display: none; }
details.maandblok > summary:hover { background: var(--grijs); }

details.maandblok > summary::before {
    content: "";
    width: 0; height: 0;
    border-left: 5px solid var(--gedempt);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .12s ease;
}
details.maandblok[open] > summary::before { transform: rotate(90deg); }

details.maandblok .teller {
    background: var(--rand);
    color: var(--zwart);
    border-radius: 1rem;
    font-size: .75rem;
    padding: .05rem .5rem;
    font-weight: 700;
}

.maandinhoud { overflow-x: auto; }
.maandinhoud table.lijst th { background: var(--wit); }

/* ---- Actiekaarten -------------------------------------------------------- */

/*
 * Op het actiedashboard staan acht getallen naast elkaar. Alleen de kaarten met
 * werk erin mogen opvallen — anders is er geen verschil tussen "drie
 * inschrijvingen wachten" en "alles is af", en dan kijk je er overheen.
 */
.actiekaart { border-left: 3px solid transparent; }
.actiekaart:hover { border-color: var(--rand); background: #fafbfc; }
.actiekaart.vraagt-aandacht { border-left-color: var(--oranje); }
.actiekaart.vraagt-aandacht strong { color: var(--oranje-donker); }

/* ---- Filterbalk ---------------------------------------------------------- */

.filters {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: .5rem;
    padding: .75rem 1rem;
}
.filters .veld { margin-bottom: 0; min-width: 10rem; flex: 0 1 auto; }
.filters .veld label { font-size: .78rem; color: var(--gedempt); }
.filters .rechts { margin-left: auto; display: flex; gap: .4rem; }

/* ---- Paginakop met aanmaakknop ------------------------------------------ */

.paginakop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.paginakop h1 { margin-bottom: .2rem; }
.paginakop .onderschrift { margin-bottom: 0; max-width: 60ch; }

/* ---- Pop-out venster ----------------------------------------------------- */

/*
 * INS-07 vraagt dat het venster op desktop én mobiel volledig binnen beeld
 * blijft. Vandaar de begrenzing op de hoogte van het scherm en de eigen
 * schuifbalk in de romp: een lang formulier schuift binnen het venster in
 * plaats van eronderuit te lopen.
 */
dialog.venster {
    border: 0;
    border-radius: .5rem;
    padding: 0;
    width: min(46rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow: hidden;
    background: var(--wit);
    color: var(--zwart);
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
dialog.venster::backdrop { background: rgba(15,10,10,.45); }

.venster-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--rand);
}
.venster-kop h2 { margin: 0; font-size: 1.05rem; }

.venster-sluit {
    background: transparent;
    border: 0;
    color: var(--gedempt);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 .35rem;
    font-weight: 400;
}
.venster-sluit:hover { background: var(--grijs); color: var(--zwart); }

.venster-romp {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - 8rem);
}
.venster-romp .veld:last-of-type { margin-bottom: 1.25rem; }

/* ---- Kalender (AGD-01) --------------------------------------------------- */

/*
 * Een raster en geen lijst. Het verschil is niet cosmetisch: bij het plannen
 * is de vraag "wat staat er die week al en waar zit nog ruimte?", en een lege
 * dinsdag is in een raster zichtbaar terwijl hij in een lijst niet bestaat.
 */

.kalenderkop {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.kalenderkop h2 {
    margin: 0;
    font-size: 1.05rem;
    min-width: 10rem;
    text-align: center;
}

table.kalender {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
table.kalender th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gedempt);
    padding: .3rem .4rem;
}

table.kalender td.dag {
    border: 1px solid var(--rand);
    vertical-align: top;
    height: 6.5rem;
    padding: .25rem;
    width: 13.5%;
}

/* De weeknummerkolom is smal en gedempt: hij helpt bij het plannen, maar mag
   niet met de dagen zelf concurreren. */
table.kalender th.weekkop,
table.kalender td.weeknummer {
    width: 2.2rem;
    text-align: center;
    color: var(--gedempt);
    font-size: .78rem;
    background: #fafbfc;
    border: 1px solid var(--rand);
    vertical-align: top;
    padding: .3rem .2rem;
}
table.kalender td.weeknummer { font-variant-numeric: tabular-nums; }
/* Dagen uit de vorige of volgende maand blijven staan zodat elke rij zeven
   dagen heeft, maar ze mogen de aandacht niet trekken. */
table.kalender td.dag.buiten { background: #fbfbfc; }
table.kalender td.dag.buiten .dagnummer { color: #c3c7ce; }
table.kalender td.dag.vandaag { background: #fff8ee; }
table.kalender td.dag.vandaag .dagnummer {
    background: var(--oranje);
    color: var(--zwart);
    border-radius: 50%;
    width: 1.35rem; height: 1.35rem;
    display: inline-grid; place-items: center;
}

.dagnummer {
    font-size: .78rem;
    color: var(--gedempt);
    display: block;
    margin-bottom: .2rem;
}

/*
 * De cursuskleur zit in de linkerrand; incompany krijgt een gestreepte rand.
 * Twee betekenissen op één kenmerk (kleur) leest niemand goed, dus het
 * onderscheid open/incompany zit bewust in de vorm en niet in de kleur.
 */
.blokje {
    display: block;
    font-size: .74rem;
    line-height: 1.25;
    text-decoration: none;
    color: var(--zwart);
    background: var(--wit);
    border: 1px solid var(--rand);
    border-left: 4px solid var(--cursuskleur, var(--navy));
    border-radius: .2rem;
    padding: .15rem .3rem;
    margin-bottom: .18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blokje:hover { background: var(--grijs); }
.blokje.incompany { border-left-style: dashed; }
.blokje.vol { opacity: .55; }
.blokje .tijd { color: var(--gedempt); }
.blokje .aantal { color: var(--gedempt); float: right; padding-left: .3rem; }

.legenda {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-top: .85rem;
    font-size: .8rem;
    color: var(--gedempt);
}
.legenda .staal {
    display: inline-block;
    width: .8rem; height: .8rem;
    border: 1px solid var(--rand);
    border-left: 4px solid var(--navy);
    border-radius: .2rem;
    vertical-align: -1px;
}
.legenda .staal.incompany { border-left-style: dashed; }
.legenda .staal.vol { opacity: .55; }

/* Op een smal scherm wordt het raster een kolom per dag: zeven kolommen van
   een paar centimeter is onleesbaar. */
@media (max-width: 700px) {
    table.kalender, table.kalender tbody, table.kalender tr, table.kalender td { display: block; width: auto; }
    table.kalender thead { display: none; }
    table.kalender td.dag { height: auto; min-height: 0; }
    table.kalender td.dag.buiten { display: none; }
    table.kalender td.dag:not(:has(.blokje)) { display: none; }
    .blokje { white-space: normal; }

    /* Op een telefoon staat elke dag onder elkaar; een losse weeknummercel
       ertussen is dan alleen maar ruis. */
    table.kalender td.weeknummer { display: none; }
}

/* ---- Inlogscherm -------------------------------------------------------- */

.inlogpagina {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--navy);
    padding: 1.25rem;
}
.inlogvak {
    background: var(--wit);
    border-radius: .6rem;
    padding: 2rem;
    width: 100%;
    max-width: 22rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.inlogvak h1 { margin-bottom: 1.25rem; }


/* ---- Tabbladen ----------------------------------------------------------- */

/*
 * Een rij tabbladen boven een lijst, met de teller erin. Was overal een rijtje
 * losse .knop-links, en dan is "welk tabblad sta ik op" een kwestie van goed
 * kijken naar welke knop niet grijs is. Nu is het actieve tabblad de enige met
 * een oranje streep eronder, zoals de hoofdnavigatie bovenin ook doet.
 */
.tabbladen {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 1.25rem;
}

.tabbladen a {
    padding: .6rem 1rem;
    text-decoration: none;
    color: var(--gedempt);
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.tabbladen a:hover { color: var(--zwart); background: var(--wit); }

.tabbladen a.actief {
    color: var(--zwart);
    border-bottom-color: var(--oranje);
    background: var(--wit);
}

.tabbladen .teller {
    background: var(--rand);
    color: var(--zwart);
    border-radius: 1rem;
    font-size: .75rem;
    padding: .05rem .5rem;
    font-weight: 700;
}

.tabbladen a.actief .teller { background: var(--oranje); }

/* Een teller op nul hoort niet te roepen: dat is geen werk maar rust. */
.tabbladen .teller.leeg { background: transparent; color: var(--gedempt); font-weight: 500; }

/* ---- Menu achter de drie puntjes ----------------------------------------- */

/*
 * Drie actieknoppen naast elkaar op elke regel maakt een lijst onrustig en
 * duwt de tabel breed. Wat je negen van de tien keer wilt staat er als knop
 * (Dossier); de rest zit hierachter.
 *
 * Een <details> en geen javascript-menu: dan werkt hij ook zonder script, en
 * sluit hij vanzelf bij het openen van een volgende (dat laatste doet het
 * scriptje in Weergave::voet()).
 */
details.menu { position: relative; display: inline-block; }

details.menu > summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--rand);
    border-radius: .35rem;
    padding: .6rem .8rem;
    line-height: 1;
    font-weight: 700;
    color: var(--gedempt);
    background: transparent;
    user-select: none;
}
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover { background: var(--grijs); color: var(--zwart); }

details.menu .menu-inhoud {
    position: absolute;
    right: 0;
    top: calc(100% + .25rem);
    z-index: 20;
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: .4rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    min-width: 11rem;
    padding: .25rem;
    text-align: left;
}

details.menu .menu-inhoud a,
details.menu .menu-inhoud button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--zwart);
    font-weight: 500;
    padding: .5rem .6rem;
    border-radius: .3rem;
    text-decoration: none;
    cursor: pointer;
}

details.menu .menu-inhoud a:hover,
details.menu .menu-inhoud button:hover { background: var(--grijs); }

details.menu .menu-inhoud button.gevaar { color: var(--rood); }
details.menu .menu-inhoud button.gevaar:hover { background: var(--rood-vlak); }

/* ---- Paginering ---------------------------------------------------------- */

.paginering {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    color: var(--gedempt);
    font-size: .88rem;
}

.paginering .paginas { margin-left: auto; display: flex; gap: .25rem; align-items: center; }

.paginering .paginas a,
.paginering .paginas span {
    min-width: 2rem;
    text-align: center;
    padding: .35rem .5rem;
    border-radius: .3rem;
    text-decoration: none;
    color: var(--zwart);
    border: 1px solid transparent;
}

.paginering .paginas a:hover { background: var(--wit); border-color: var(--rand); }
.paginering .paginas a.actief { background: var(--oranje); font-weight: 700; }
.paginering .paginas span.tussenruimte { color: var(--gedempt); border: 0; min-width: 1rem; }
.paginering .paginas span.uit { color: #c3c8d0; }

/* ---- Klein scherm ------------------------------------------------------- */


@media (max-width: 800px) {
    .romp { display: block; }
    .zijbalk { width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--rand); }
    .inhoud { padding: 1.25rem; }
    .balk { flex-wrap: wrap; gap: .75rem; }
    .hoofddelen { order: 3; width: 100%; overflow-x: auto; }
}