/* ============================================================
   Toetsagenda - eigen styling bovenop Bootstrap 5.

   Het weekraster is overgenomen uit het project "planning"
   (httpdocs/css/app.css, de .cal-*-regels) met drie wijzigingen:

   1. .cal-grid had daar "overflow: hidden" om de ronde hoeken van de
      Bootstrap-card af te snijden. In combinatie met een vaste
      minimumbreedte per dagkolom betekende dat: op een smal scherm werd
      het raster AFGEKNIPT - vrijdag viel weg, zonder scrollbalk en
      zonder enige aanwijzing dat er meer was. Het afknippen verhuist
      hier naar .cal-scroll, die scrollt in plaats van te knippen.
   2. De tekstkleur in een blok is niet meer vast wit maar wordt per blok
      berekend (App\Lib\Palette::textColor), zodat een lichte vakkleur
      leesbaar blijft.
   3. Er is geen hele-dag-rij: een toets heeft altijd lesuren.
   ============================================================ */

body {
    background-color: #f5f6f8;
}

/* Kleurvierkantje, in de zijbalk en in het beheer */
.cal-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, .15);
}

/* ---- De scroll-container rond het raster -------------------- */
/* De wrapper scrollt en knipt af; het raster zelf doet geen van beide
   meer. Zo blijven de ronde hoeken van de kaart heel EN is het raster op
   een smal scherm horizontaal te schuiven in plaats van afgesneden. */
.cal-scroll {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: var(--bs-border-radius);
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

/* ---- Het weekraster ---------------------------------------- */
.cal-grid {
    display: grid;
    /* grid-template-columns en min-width worden inline gezet: het aantal
       dagkolommen hangt van de instelling "weekend tonen" af. */
    background: #fff;
}

/* Kopregel */
.cal-corner {
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    background: #f8f9fa;
}

.cal-dayhead {
    text-align: center;
    padding: 6px 4px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #f1f3f5;
    background: #f8f9fa;
}

.cal-dayhead .cal-dayname {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
}

.cal-dayhead .cal-daynum {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
}

.cal-dayhead .cal-daymonth {
    font-size: .7rem;
    color: #868e96;
}

.cal-dayhead.is-today { background: #e7f1ff; }
.cal-dayhead.is-today .cal-daynum { color: #0d6efd; }
.cal-dayhead.is-weekend { background: #f1f3f5; }

/* De kopregel blijft staan bij verticaal scrollen van de pagina, en de
   tijdkolom bij horizontaal schuiven - anders weet je niet meer welk uur
   je bekijkt zodra je naar vrijdag schuift. De hoekcel doet allebei en
   moet daarom bovenop liggen. */
.cal-dayhead { position: sticky; top: 0; z-index: 10; }
.cal-gutter  { position: sticky; left: 0; z-index: 11; }
.cal-corner  { position: sticky; top: 0; left: 0; z-index: 12; }

/* Tijdkolom (uurlabels) */
.cal-gutter {
    position: relative;
    border-right: 1px solid #dee2e6;
    background: #f8f9fa;
}

.cal-hour {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: .72rem;
    color: #868e96;
}

/* Dagkolommen.

   De uur- en halfuurlijnen zijn twee gestapelde gradients en geen
   DOM-elementen. Dat scheelt bij een raster van 8:00 tot 18:00 zo'n
   honderd nodes per dag, en bij een wijziging van de slothoogte hoeft er
   niets herberekend te worden: --slot doet het werk. */
.cal-day {
    position: relative;
    border-right: 1px solid #f1f3f5;
    /* Een leeg vak doet niets: de tijden komen uit de geplakte export en
       horen daar gewijzigd te worden. Wat je hier wel doet is een toets naar
       een andere KOLOM slepen, en dat is de cursor op .cal-exam. */
    cursor: default;
    background-image:
        repeating-linear-gradient(to bottom, #dee2e6 0, #dee2e6 1px, transparent 1px, transparent calc(var(--slot) * 2)),
        repeating-linear-gradient(to bottom, #eef0f2 0, #eef0f2 1px, transparent 1px, transparent var(--slot));
}

.cal-day.is-today { background-color: #f4f9ff; }
.cal-day.is-weekend { background-color: #fcfcfd; }

/* ---- Een toetsblok ----------------------------------------- */
.cal-exam {
    position: absolute;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: .74rem;
    line-height: 1.15;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
    transition: filter .12s ease;
    /* color en border-color worden inline gezet: ze hangen van de
       achtergrondkleur af (zie App\Lib\Palette). */
    border: 1px solid transparent;
}

/* Geen "color: #fff" zoals in planning: de tekstkleur staat inline en
   moet die van het blok blijven, ook bij hover. */
.cal-exam:hover {
    filter: brightness(.92);
    z-index: 20;
}

.cal-exam-time    { font-size: .68rem; opacity: .9; }
.cal-exam-subject { font-weight: 600; }
.cal-exam-groups  { font-size: .7rem; opacity: .95; }
.cal-exam-loc     { font-size: .68rem; opacity: .85; }

/* Een afgelaste toets blijft staan - "deze gaat niet door" is informatie
   die je wilt zien - maar mag niet voor een gewone toets worden
   aangezien. Vandaar doorgestreept, doorzichtig en met een diagonale
   arcering eroverheen. */
.cal-exam.is-cancelled {
    opacity: .55;
    text-decoration: line-through;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, .25) 0, rgba(255, 255, 255, .25) 4px,
        transparent 4px, transparent 8px
    );
}

.cal-exam .bi { font-size: .7rem; }

.cal-exam-meta    { font-size: .7rem; opacity: .95; }
.cal-exam-teacher { font-size: .68rem; opacity: .85; }

/* ---- De dagweergave: docentkolommen ------------------------ */

/* De kop van een kolom. Zelfde rol als .cal-dayhead in de weekweergave, dus
   dezelfde sticky-behandeling - anders weet je na het scrollen niet meer
   welke surveillant je bekijkt. */
.cal-colhead {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 6px 8px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #f1f3f5;
    background: #f8f9fa;
}

.cal-colhead.is-unassigned { background: #fff4e5; }
.cal-colhead.has-conflict  { background: #fff0f1; }

/* De waarschuwing dat een surveillant twee toetsen tegelijk heeft. Het
   icoon staat altijd in de HTML en wordt hier getoond of verborgen, zodat
   app.js na een verplaatsing alleen has-conflict hoeft om te zetten - geen
   DOM bouwen, geen paginalading. */
.cal-conflict { display: none; }
.cal-colhead.has-conflict .cal-conflict { display: inline; }

.cal-colname  { font-weight: 600; font-size: .85rem; }
.cal-colcount { font-size: .7rem; color: #6c757d; }

/* Het knopje in de kolomkop. Absoluut, zodat een lange docentnaam er
   gewoon onderdoor loopt in plaats van de kop hoger te maken. */
.cal-colmenu {
    position: absolute;
    top: 4px;
    right: 4px;
    border: 0;
    background: transparent;
    color: #6c757d;
    padding: 0 2px;
    line-height: 1;
}

.cal-colhead { position: sticky; }

.cal-col.is-unassigned { background-color: #fffaf3; }

/* Waar je op dit moment loslaat. Een rand aan de binnenkant en geen border,
   want een border zou de kolom een pixel breder maken en alle blokken erin
   laten verspringen. */
.cal-col.is-dragover {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
    background-color: #eef4ff;
}

/* Het blok is een div met role="button", dus de cursor moet zelf gezet
   worden - een div erft niet de pointer van een anker. */
.cal-exam                   { cursor: pointer; }
.cal-exam[draggable="true"] { cursor: grab; }
.cal-exam.is-dragging       { opacity: .4; cursor: grabbing; }

/* Toetsenbordfocus moet zichtbaar zijn: dit is nu het enige wat verraadt
   welk blok je met Enter zou openen. */
.cal-exam:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
    z-index: 21;
}

/* Een gedupliceerd deel, ook zonder de tekst te lezen herkenbaar. */
.cal-exam.is-split { border-left-width: 3px; border-left-style: dashed; }

/* Nog niet toegewezen: een streepjesrand rondom. */
.cal-exam.is-open { border-style: dashed; }

/* Het menuknopje op een blok. Klein en rechtsboven; het blok zelf is de
   klikbare kop, dit is de tweede route voor touch en toetsenbord. */
.cal-exam-menu {
    position: absolute;
    top: 1px;
    right: 1px;
    border: 0;
    background: rgba(0, 0, 0, .15);
    color: inherit;
    border-radius: 3px;
    padding: 0 3px;
    font-size: .7rem;
    line-height: 1.2;
    opacity: 0;
    transition: opacity .12s ease;
}

.cal-exam:hover .cal-exam-menu,
.cal-exam-menu:focus { opacity: 1; }

/* Op touch is er geen hover, en dan is het menu de enige route. Daar staat
   hij dus altijd aan en wat groter. */
@media (hover: none) {
    .cal-exam-menu { opacity: 1; padding: 2px 6px; font-size: .8rem; }
}

/* Het uitklapmenu van een blok.

   LET OP: dit is GEEN z-order-probleem, ook al lijkt het erop. Een menu
   binnen .cal-exam wordt AFGEKNIPT door de overflow:hidden daarboven, en
   daar ontsnapt geen enkele z-index aan - overflow knipt, stacking stapelt.
   Hetzelfde geldt voor .cal-scroll met zijn overflow-x:auto.

   Daarom hangt app.js dit menu aan de BODY en zet het met position:fixed op
   de plek van de knop. Buiten beide overflow-containers, dus niets knipt het
   meer af. De keerzijde: een fixed menu schuift niet mee met het raster, dus
   app.js sluit hem bij scrollen en bij het verslepen van het venster.

   1040 ligt boven alles in het raster (hoogste is 20) en onder een
   Bootstrap-modal (1055) en een SweetAlert2-venster (1060). */
.cal-partmenu {
    position: fixed;
    z-index: 1040;
    max-height: 60vh;
    overflow-y: auto;
}

/* ---- De zijbalk met filters -------------------------------- */
.filter-group + .filter-group {
    border-top: 1px solid #e9ecef;
    margin-top: .5rem;
    padding-top: .5rem;
}

/* Een lange lijst docenten of vakken moet scrollen binnen zijn eigen
   blok; anders duwt hij de andere filters van het scherm. */
.filter-options {
    max-height: 210px;
    overflow-y: auto;
}

.filter-options .form-check {
    margin-bottom: .1rem;
}

.filter-options .form-check-label {
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Wat het zoekveldje wegfiltert. Een eigen klasse en niet [hidden],
   zodat Bootstrap-regels op .form-check er niet mee in de knoop komen. */
.filter-hidden { display: none !important; }

.filter-empty {
    font-size: .85rem;
    color: #6c757d;
}

/* ---- De detailmodal ---------------------------------------- */
/* Zolang de gegevens nog onderweg zijn blijft de inhoud zichtbaar maar
   gedempt. Helemaal leeg maken zou de modal laten springen zodra het
   antwoord binnen is. */
#exam-modal.is-loading .modal-body {
    opacity: .45;
    pointer-events: none;
}

#exam-modal dt {
    font-weight: 600;
    color: #6c757d;
    font-size: .85rem;
}

#exam-modal dd {
    margin-bottom: .6rem;
}

/* ---- Beheer ------------------------------------------------- */
.admin-point {
    border-left: 4px solid var(--bs-warning);
}

.admin-point.is-info {
    border-left-color: var(--bs-info);
}

@media print {
    .navbar, .cal-sidebar, .cal-toolbar { display: none !important; }
    .cal-scroll { overflow: visible; }
}