/* ============================================================================
   WUR-huisstijl. Bron: brandportal.wur.nl (logo / colour palette / typography).
   Zelf gehost lettertype i.p.v. de Google Fonts-CDN: geen bezoeker-IP's naar
   Google en het werkt ook in de dev-omgeving zonder internet.
   Commissioner is een variabel font — één bestand per subset dekt 300 t/m 600.
   ========================================================================== */

@font-face {
    font-family: 'Commissioner';
    src: url('../fonts/commissioner-latin.woff2') format('woff2');
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Commissioner';
    src: url('../fonts/commissioner-latin-ext.woff2') format('woff2');
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Primaire huisstijlkleuren — alleen deze (plus wit) op headers en covers. */
    --wur-off-white:   #FBF6E5;
    --wur-light-green: #97C600;
    --wur-middle-green:#004D00;
    --wur-dark-blue:   #002B47;
    --wur-white:       #FFFFFF;

    /* Secundaire kleuren — ondersteunend: kleurvlakken, lijnen, tabellen,
       grafieken, knoppen en iconen. */
    --wur-green:    #008A00;
    --wur-yellow:   #EECF00;
    --wur-blue-sky: #88C9E4;
    --wur-orange:   #F47C00;
    --wur-pink:     #FFAAAE;
    --wur-bordeaux: #66111B;

    /* Tinten. Staan NIET in het officiële palet, maar worden op wur.nl zelf
       gebruikt als rustige vlakken. Zie docs/wur-huisstijl.md, open punt 1. */
    --wur-sand:      #F3ECD3;
    --wur-sand-dark: #E9E1C4;

    /* --- semantische tokens ------------------------------------------------
       Zwart wordt online niet gebruikt: tekst is Dark Blue of Middle Green
       (Bordeaux mag ook).
       Wit is online evenmin toegestaan als achtergrondkleur — off-white is daar
       de voorgeschreven basis. --wur-white blijft alleen bestaan voor print- en
       Office-uitingen; gebruik het niet als vlak in deze interface. */
    --bg: var(--wur-off-white);
    --bg-secondary: var(--wur-sand);
    --bg-day-alt: color-mix(in srgb, var(--wur-off-white) 55%, var(--wur-sand));
    --text: var(--wur-dark-blue);
    --text-heading: var(--wur-middle-green);
    /* 70% en niet minder: gedempte tekst komt ook op de zandkleurige balken terecht en
       haalt daar bij 62% geen 4,5:1 meer. */
    --text-muted: color-mix(in srgb, var(--wur-dark-blue) 70%, var(--wur-off-white));
    --border: color-mix(in srgb, var(--wur-dark-blue) 22%, var(--wur-sand));
    --primary: var(--wur-middle-green);
    --primary-hover: var(--wur-green);
    --on-primary: var(--wur-off-white);
    /* De header blijft off-white en volgt dus niet --bg-secondary: alleen wit en
       off-white zijn toegestaan onder de full-colour logo. */
    --header-bg: var(--wur-off-white);
    --header-text: var(--wur-middle-green);
    --header-hover: color-mix(in srgb, var(--wur-middle-green) 12%, transparent);
    --tab-active-bg: var(--wur-middle-green);
    --tab-active-text: var(--wur-off-white);
    --tab-bg: var(--wur-sand-dark);
    --tab-text: var(--wur-middle-green);
    --modal-backdrop: rgba(0, 43, 71, 0.45);
    --danger: var(--wur-bordeaux);
    --on-danger: var(--wur-off-white);
    --warning: var(--wur-orange);
    --accent: var(--wur-light-green);
    --note-bg: color-mix(in srgb, var(--wur-yellow) 16%, var(--wur-off-white));
    --note-border: color-mix(in srgb, var(--wur-yellow) 45%, var(--wur-off-white));
    --note-label: var(--wur-bordeaux);
}

/* De huisstijl kent geen donkere modus, dus dit is per definitie afgeleid werk.
   Basis is Dark Blue — de donkerste kleur die het palet heeft. De vlakken erboven
   krijgen bewust maar een paar procent lift: mengt dat sterker, dan wordt het geheel
   grijzig in plaats van donker. */
[data-theme="dark"] {
    --bg: var(--wur-dark-blue);
    --bg-secondary: color-mix(in srgb, var(--wur-dark-blue) 94%, var(--wur-off-white));
    --bg-day-alt: color-mix(in srgb, var(--wur-dark-blue) 97%, var(--wur-off-white));
    --text: var(--wur-off-white);
    --text-heading: var(--wur-light-green);
    --text-muted: color-mix(in srgb, var(--wur-off-white) 60%, var(--wur-dark-blue));
    --border: color-mix(in srgb, var(--wur-off-white) 18%, var(--wur-dark-blue));
    --primary: var(--wur-light-green);
    --primary-hover: var(--wur-green);
    --on-primary: var(--wur-dark-blue);
    --header-bg: color-mix(in srgb, var(--wur-dark-blue) 94%, var(--wur-off-white));
    --header-text: var(--wur-off-white);
    --header-hover: color-mix(in srgb, var(--wur-off-white) 12%, transparent);
    --tab-active-bg: var(--wur-light-green);
    --tab-active-text: var(--wur-dark-blue);
    --tab-bg: color-mix(in srgb, var(--wur-dark-blue) 90%, var(--wur-off-white));
    --tab-text: var(--wur-off-white);
    --modal-backdrop: rgba(0, 20, 33, 0.72);
    --danger: var(--wur-pink);
    --on-danger: var(--wur-dark-blue);
    --warning: var(--wur-yellow);
    --accent: var(--wur-light-green);
    --note-bg: color-mix(in srgb, var(--wur-yellow) 10%, var(--wur-dark-blue));
    --note-border: color-mix(in srgb, var(--wur-yellow) 26%, var(--wur-dark-blue));
    --note-label: var(--wur-yellow);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Commissioner', Verdana, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    text-align: left;
}

/* Focus volgt de huisstijl: 2px streepjeslijn i.p.v. de browserstandaard. */
:focus-visible {
    outline: 2px dashed var(--primary);
    outline-offset: 2px;
}

/* Aankruisvakjes en keuzerondjes staan standaard op het blauw van de browser. De browser
   kiest zelf een licht of donker vinkje op basis van de helderheid van deze kleur, dus dit
   werkt in beide modi — Middle Green in lichte, Light Green in donkere. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
}

/* De full-colour logo mag alleen op een witte of off-white achtergrond staan,
   vandaar een off-white header i.p.v. een gekleurde balk. In donkere modus staat
   daarom de off-white logovariant in de header. */
/* Verticale padding is 9px en niet 12px: samen met een logo van 40px komt de header op
   dezelfde 58px uit als daarvoor (12 + 34 + 12), zodat het grotere logo geen extra
   hoogte kost. Pas beide samen aan. */
.app-header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 9px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 3px solid var(--wur-middle-green);
}

/* De titel staat naast het logo, niet erin: een scheidingslijn en ruime tussenruimte
   maken zichtbaar dat het geen toevoeging aan het logo is. */
.brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* Beide logobestanden staan in de HTML en de modus bepaalt welke zichtbaar is. Omkleuren
   via CSS mag niet van de huisstijl, dus het moeten twee bestanden zijn. */
.brand-logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

.brand-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark { display: block; }

.brand h1 {
    padding-left: 16px;
    border-left: 1px solid var(--border);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Koppen in online toepassingen: Commissioner Semi-Bold (600). */
.app-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--header-text);
}

@media (max-width: 640px) {
    .brand h1 { font-size: 1rem; }
    .brand-logo { height: 30px; }
    .brand { gap: 10px; }
    .brand h1 { padding-left: 10px; }
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--header-text);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0.85;
}

.btn-icon:hover { opacity: 1; background: var(--header-hover); }

.auth-user {
    font-size: 0.85rem;
    opacity: 0.9;
    white-space: nowrap;
}

.btn-text {
    background: none;
    border: none;
    color: var(--header-text);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0.75;
    text-decoration: none;
}

.btn-text:hover { opacity: 1; background: var(--header-hover); }

.sync-status {
    font-size: 0.75rem;
    opacity: 0.8;
    white-space: nowrap;
}

.sync-status.updated {
    opacity: 1;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 20;
}

.tabs {
    display: flex;
    gap: 2px;
    padding: 8px 24px 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.tab {
    padding: 8px 20px;
    border: none;
    background: var(--tab-bg);
    color: var(--tab-text);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.tab.active {
    background: var(--tab-active-bg);
    color: var(--tab-active-text);
}

.toolbar {
    padding: 12px 24px;
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.toolbar select,
#toolbar-exams select {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    background: var(--bg);
    color: var(--text);
    min-width: 200px;
}

.toolbar label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.toolbar .hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 16px;
    font-style: italic;
}


#bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 8px 20px 8px 24px;
}

.legenda {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.legenda-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legenda-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.legenda.legenda-round .legenda-swatch {
    border-radius: 50%;
}

/* FullCalendar overrides */
.fc {
    --fc-border-color: var(--border);
    --fc-page-bg-color: var(--bg);
    --fc-neutral-bg-color: var(--bg-secondary);
    --fc-today-bg-color: color-mix(in srgb, var(--wur-light-green) 14%, var(--bg));
    font-size: 0.85rem;
}

[data-theme="dark"] .fc {
    --fc-today-bg-color: color-mix(in srgb, var(--wur-light-green) 12%, var(--bg));
}

.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number,
.fc .fc-timegrid-axis-cushion {
    color: var(--text);
}

.fc .fc-button-primary,
.fc .fc-button-primary:disabled {
    background: var(--primary);
    border-color: var(--primary);
}

.fc .fc-button-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.fc .fc-event {
    border: none;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.8rem;
    cursor: default;
}

.fc .fc-timegrid-event .fc-event-title {
    font-weight: 500;
}

/* Tippy tooltip */
.tippy-box[data-theme~='rooster'] {
    background: var(--bg-secondary);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tippy-box[data-theme~='rooster'] .tippy-arrow {
    color: var(--bg-secondary);
}

.tooltip-content { padding: 4px 0; }
.tooltip-content strong { display: block; margin-bottom: 4px; }
.tooltip-content .detail { color: var(--text-muted); }

/* Modal */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-backdrop.open { display: flex; }

.modal {
    background: var(--bg);
    border-radius: 8px;
    padding: 24px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.modal h3 {
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.modal .form-group {
    margin-bottom: 12px;
}

.modal label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.modal input,
.modal select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    background: var(--bg);
    color: var(--text);
}

.modal .checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal .checkbox-group input[type="checkbox"] {
    width: auto;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
}

.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled:hover { background: var(--primary); }

.btn-secondary {
    background: var(--tab-bg);
    color: var(--tab-text);
}

.btn-danger {
    background: var(--danger);
    color: var(--on-danger);
}

.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, var(--wur-off-white)); }

.week-wrapper {
    position: relative;
}

.week-status-badge,
.week-status-pill {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wur-off-white);
    background: var(--wur-orange);
    padding: 2px 8px;
    border-radius: 9999px;
}

/* Kalenderweergave: zwevende badge boven de weektitel. */
.week-status-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    pointer-events: none;
    z-index: 1;
}

/* Lijstweergaven: pill uiterst rechts in de week-header, verticaal gecentreerd. */
.week-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.week-status-pill {
    flex-shrink: 0;
}

.week-status-badge:empty,
.week-status-pill:empty {
    display: none;
}

/* Exams tab */
#exams-container,
#calendar-container,
#course-list-container,
#rooster-list-container { padding: 16px 24px 56px; }

#toolbar-exams input[type="checkbox"] { margin-right: 4px; }

#rooster-view-toggle,
#course-view-toggle {
    display: flex;
    gap: 0;
    flex-shrink: 0;
}
.btn-view-toggle {
    padding: 6px 14px;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}
.btn-view-toggle:first-child { border-radius: 4px 0 0 4px; }
.btn-view-toggle:last-child  { border-radius: 0 4px 4px 0; border-left: none; }
.btn-view-toggle.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

#exams-loading,
#course-list-loading,
#rooster-list-loading,
#timewriting-loading,
#exams-empty,
#course-list-empty,
#rooster-list-empty,
#timewriting-empty,
#course-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
}

/* Timewriting tab (2026-08-10). Geen legenda en dus ook geen #bottom-bar op dit tabblad, vandaar een
   kleinere ondermarge dan de andere containers hierboven. */
#timewriting-container { padding: 16px 24px 24px; }

/* De jaarkiezer vult de hele toolbar (`flex: 1`), zodat de exportknop met `margin-left: auto` aan de
   rechterkant uitkomt — dezelfde plek als de "Download ICS"-knop op de roostertabbladen. */
#toolbar-timewriting {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
}

#btn-tw-export { margin-left: auto; }

/* De kolomfilters staan ónder de kop, zoals het rapport aan admin-kant. `display:block` zet ze op een
   eigen regel; de kopstijl (uppercase, letter-spacing) hoort niet op de keuzelijst zelf. */
#timewriting-table .tw-filter {
    display: block;
    margin-top: 4px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

#timewriting-table .tw-filter select {
    max-width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    background: var(--bg);
    color: var(--text);
}

/* De inspringing van de eerste kolom hoort bij de weekkoppen van de andere tabellen; die heeft deze
   tabel niet. */
#timewriting-table thead th:first-child,
#timewriting-table tbody td:first-child,
#timewriting-table tfoot td:first-child { padding-left: 12px; }

#timewriting-table .tw-hours { text-align: right; white-space: nowrap; }
#timewriting-table .tw-slot { white-space: nowrap; }
#timewriting-table .tw-no-match { text-align: center; color: var(--text-muted); }

/* Totaalrij blijft onderaan in beeld tijdens het scrollen — met 600+ rijen is een totaal dat je pas
   onderaan ziet weinig waard. `bottom: -1px` i.p.v. 0 dekt de subpixelnaad die anders onder de rij
   doorschemert. Spiegel van de sticky totaalrij aan admin-kant. */
#timewriting-table tfoot td {
    position: sticky;
    bottom: -1px;
    background: var(--bg-secondary);
    font-weight: 600;
    border-top: 2px solid var(--border);
    border-bottom: none;
}

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

.exams-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.exams-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.exams-table tr:hover td { background: var(--bg-secondary); }

.exams-table .staff-list { list-style: none; padding: 0; margin: 0; }
.exams-table .staff-list li { font-size: 0.85rem; line-height: 1.4; }
.exams-table .staff-role { color: var(--text-muted); font-size: 0.8rem; }
.exams-table .staff-highlight .staff-role { color: color-mix(in srgb, var(--on-primary) 75%, transparent); }
.exams-table .staff-highlight {
    font-weight: 600;
    background: var(--primary);
    color: var(--on-primary);
    padding: 1px 6px;
    border-radius: 4px;
}
.exams-table tr.exam-dimmed { opacity: 0.35; }
.exams-table tr.row-replaced td:not(:last-child) { text-decoration: line-through; color: var(--text-muted); }

.exams-table .clickable-cell {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.exams-table tr.row-dimmed { opacity: 0.25; }
.exams-table tr.row-highlight td { background: var(--bg-secondary); }
.exams-table tr.day-alt td { background: var(--bg-day-alt); }
.exams-table tr.day-alt.row-highlight td { background: var(--bg-secondary); }
/* Own planning in de kalender. Dezelfde opmaak als de legenda en de lijstweergave
   (chipStyle in rooster.js): 25% Pink met een oranje streepjesrand voor "geen vaste dag".
   Houd die drie gelijk — wijkt er één af, dan klopt de legenda niet meer. */
.ev-education {
    background-color: color-mix(in srgb, var(--wur-pink) 25%, transparent) !important;
    border-color: transparent !important;
    outline: 2px dashed var(--wur-orange);
    outline-offset: -2px;
}
.ev-education .fc-event-title,
.ev-education .fc-event-time {
    color: var(--text) !important;
}

/* Niet-tijdgebonden rollen (Rolcategorie "Ondersteunend - vrij") en vervangen lessen: minder
   prominent, en de tijd doorgehaald omdat die geen harde tijdsverplichting (meer) is. Vervangen
   lessen behouden hun normale lestype-kleur en tonen "[Replaced] " vóór de titel i.p.v. een
   doorgestreepte titel — zie shortTitle in src/rooster_events.php. */
.ev-not-time-bound,
.ev-replaced {
    opacity: 0.65;
}
.ev-not-time-bound .fc-event-time,
.ev-replaced .fc-event-time {
    text-decoration: line-through;
}

.ep-badge {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--warning);
    border: 1px dashed var(--warning);
    border-radius: 4px;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

.type-chip {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.exams-table tr.week-header td {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 5px 12px 5px 8px;
    border-top: 2px solid var(--border);
}
.exams-table tr.week-header:first-child td { border-top: none; }
.exams-table tr.week-empty td {
    color: var(--text-muted);
    font-style: italic;
    padding: 6px 12px 6px 32px;
    font-size: 0.85rem;
}
.exams-table tr:not(.week-header) td:first-child,
.exams-table thead th:first-child { padding-left: 40px; }

#course-list-table tr.day-alt,
#rooster-list-table tr.day-alt {
    background: linear-gradient(to right, var(--bg) 32px, var(--bg-secondary) 32px);
}
#course-list-table tr.day-alt td,
#rooster-list-table tr.day-alt td { background: transparent; }
#course-list-table tr.day-alt.row-highlight td,
#course-list-table tr:hover td,
#rooster-list-table tr.day-alt.row-highlight td,
#rooster-list-table tr:hover td { background: var(--bg-secondary); }

/* Niet-tijdgebonden rollen (Rolcategorie "Ondersteunend - vrij") en vervangen lessen in de
   My Timetable-lijstweergave: minder prominent, en de tijd doorgehaald omdat die geen harde
   tijdsverplichting (meer) is. Vervangen lessen tonen hun "REPLACED"-markering al in de
   Role-kolom (withReplacedSuffix() in src/rooster_events.php), dus geen aparte tekst hier nodig. */
#rooster-list-table tr.row-not-time-bound,
#rooster-list-table tr.row-replaced { opacity: 0.7; }
#rooster-list-table td.time-strikethrough { text-decoration: line-through; }

.note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    font-size: 0.8rem;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 50%;
    font-weight: bold;
    cursor: help;
    vertical-align: middle;
    flex-shrink: 0;
    text-decoration: none;
}

.note-icon-cal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    margin-right: 5px;
    font-size: 0.75em;
    vertical-align: middle;
    background: var(--wur-off-white);
    border-radius: 50%;
    font-weight: bold;
    flex-shrink: 0;
}

.tooltip-content .notes {
    margin-top: 4px;
    font-style: italic;
    color: var(--note-label);
}

#note-course-offerings-panel {
    padding: 10px 24px;
    background: var(--note-bg);
    border-bottom: 1px solid var(--note-border);
}

.note-course-offering-inner {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 8px;
    row-gap: 8px;
    align-items: baseline;
}

.note-course-offering-group {
    display: contents;
}

.note-course-offering-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--note-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.note-course-offering-text {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

.fc .holiday-label {
    opacity: 0.85;
    font-size: 0.75rem;
    pointer-events: none;
}