/* ===== Readability: the app is light only =====
   Browsers may not darken it (OS dark mode, Chrome/Edge/Samsung forced dark, Android "darken websites").
   Set on every element and pseudo-element, as forced dark is decided per element and MudBlazor resets it on .mud-input.
   Pseudo-elements each have their own rule, so one unsupported selector does not drop the others. */
*, *::before, *::after {
    color-scheme: only light !important;
}

::placeholder {
    color-scheme: only light !important;
}

::selection {
    color-scheme: only light !important;
}

::backdrop {
    color-scheme: only light !important;
}

::marker {
    color-scheme: only light !important;
}

::file-selector-button {
    color-scheme: only light !important;
}

/* Elements the browser styles with system colours (Canvas, Field, ButtonFace, LinkText, Mark) get explicit colours;
   :where keeps them below every class rule. */
:where(html) {
    background-color: #fff;
    color: #111318;
}

:where(input, textarea, select, option, optgroup) {
    background-color: #fff;
    color: var(--chronos-text);
}

:where(button, input[type=button], input[type=submit], input[type=reset]) {
    color: inherit;
}

:where(dialog) {
    background-color: #fff;
    color: var(--chronos-text);
}

:where(a) {
    color: var(--env-strong);
}

:where(mark) {
    background-color: #FFF0B3;
    color: var(--chronos-text);
}

::selection {
    background-color: #CFE0FF;
    color: var(--chronos-text);
}

/* Placeholders in a muted colour that stays readable (MudBlazor fades them to 2.9:1). */
::placeholder,
.mud-input > input.mud-input-root::placeholder,
.mud-input > textarea.mud-input-root::placeholder,
div.mud-input-slot.mud-input-root::placeholder {
    color: var(--chronos-muted);
    opacity: 1;
}

/* Autofilled fields keep white with dark text instead of the browser's (possibly dark) autofill colours. */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--chronos-text);
    caret-color: var(--chronos-text);
    box-shadow: 0 0 0 1000px #fff inset;
}

input:autofill,
textarea:autofill,
select:autofill {
    background-color: #fff;
    color: var(--chronos-text);
}

/* Windows high contrast and Firefox's own colours: the browser's system colours apply everywhere.
   Selection that only shows as a fill gets a highlight outline (Highlight on HighlightText is not always readable);
   fills such as periods, chips and alerts get a border. Text keeps the system colours. */
@media (forced-colors: active) {
    .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected,
    .mud-tabs-toolbar .mud-tab.mud-tab-active {
        outline: 3px solid Highlight;
        outline-offset: -3px;
    }

    .chronos-period,
    .chronos-environment-chip,
    .mud-chip,
    .mud-alert,
    .mud-snackbar,
    .mud-tooltip {
        border: 1px solid CanvasText;
    }

    .mud-button-root.mud-button-filled {
        border: 1px solid ButtonText;
    }
}

/* Neutral base; MainLayout adds the --env-* colours of the current environment (EnvironmentStyle). */
:root {
    --chronos-radius: 16px;
    --chronos-radius-sm: 10px;
    --chronos-text: #111318;
    --chronos-on-light: #111318;
    --chronos-on-dark: #FFFFFF;
    --chronos-muted: #5F6573;
    --chronos-border: #E4E6EA;
    --chronos-border-strong: #CDD1D8;
    --chronos-sunken: #F4F5F7;
    --chronos-subtle: #F9FAFB;
    --chronos-font: "Inter Tight", "Segoe UI", Helvetica, Arial, sans-serif;
    --chronos-font-display: Fraunces, Georgia, serif;
    --chronos-logo-start: #2346B8;
    --chronos-logo: #2F5BEA;
    --chronos-logo-end: #5B8CFF;
    /* Aanpassen mode (warning hue), the same in every environment. */
    --chronos-adjust: #8A5A00;
    --chronos-adjust-strong: #6B4500;
    --chronos-adjust-tint: #FFF6E3;
    --chronos-adjust-line: #E9C77E;
    /* Bekijk als: bar during viewing as another role, unlike any environment; white text >= 4.5:1. */
    --chronos-view-as: #A3195B;
    --chronos-view-as-text: #FFFFFF;
    /* Niveau I (high) to V (low) in charts: one-hue ordinal ramp, validated for colour blindness and contrast; text on I-III white, on IV-V dark (both >= 4.5:1). */
    --chronos-level-1: #0d366b;
    --chronos-level-2: #184f95;
    --chronos-level-3: #256abf;
    --chronos-level-4: #3987e5;
    --chronos-level-5: #86b6ef;
    /* Niveau badges and DGO class results by rank (5 = I, 1 = V): green to red, with their text colour. */
    --chronos-badge-level-5: #2E7D4F;
    --chronos-badge-level-5-text: #fff;
    --chronos-badge-level-4: #7CB342;
    --chronos-badge-level-4-text: var(--chronos-on-light);
    --chronos-badge-level-3: #E0A800;
    --chronos-badge-level-3-text: var(--chronos-on-light);
    --chronos-badge-level-2: #EF7C32;
    --chronos-badge-level-2-text: var(--chronos-on-light);
    --chronos-badge-level-1: #C4402F;
    --chronos-badge-level-1-text: #fff;
    /* Light tints of the same ramp, I darkest, for niveaubanden behind a line. */
    --chronos-level-tint-1: #9ec5f4;
    --chronos-level-tint-2: #b7d3f6;
    --chronos-level-tint-3: #cde2fb;
    --chronos-level-tint-4: #e1edfc;
    --chronos-level-tint-5: #f1f6fe;
    --chronos-chart-grid: #E1E0D9;
    --chronos-chart-axis: #C3C2B7;
}

/* Environment colours are registered, so switching environment blends them instead of jumping. */
@property --env-accent { syntax: "<color>"; inherits: true; initial-value: #1F2430; }
@property --env-strong { syntax: "<color>"; inherits: true; initial-value: #111318; }
@property --env-tint { syntax: "<color>"; inherits: true; initial-value: #F6F7F9; }
@property --env-tint-2 { syntax: "<color>"; inherits: true; initial-value: #ECEEF2; }
@property --env-line { syntax: "<color>"; inherits: true; initial-value: #D3D7DF; }
@property --mud-palette-primary { syntax: "<color>"; inherits: true; initial-value: #1F2430; }
@property --mud-palette-primary-darken { syntax: "<color>"; inherits: true; initial-value: #111318; }
@property --mud-palette-primary-lighten { syntax: "<color>"; inherits: true; initial-value: #D3D7DF; }
/* Text drawn on the registered colours above, and on a period, always has a value, so it never falls back to the colour around it. */
@property --mud-palette-primary-text { syntax: "<color>"; inherits: true; initial-value: #FFFFFF; }
@property --period { syntax: "<color>"; inherits: true; initial-value: #4B5565; }

:root {
    transition: --env-accent .45s ease, --env-strong .45s ease, --env-tint .45s ease, --env-tint-2 .45s ease, --env-line .45s ease,
        --mud-palette-primary .45s ease, --mud-palette-primary-darken .45s ease, --mud-palette-primary-lighten .45s ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        transition: none;
    }
}

/* ===== Motion: one set of durations and easings (--motion-*, from Services/Motion.cs); enter decelerates, exit is shorter and accelerates ===== */
@keyframes motion-fade-in {
    from { opacity: 0; }
}

@keyframes motion-fade-out {
    to { opacity: 0; }
}

@keyframes motion-rise-in {
    from { opacity: 0; transform: translateY(var(--motion-shift)) scale(var(--motion-scale)); }
}

@keyframes motion-rise-out {
    to { opacity: 0; transform: translateY(var(--motion-shift)) scale(var(--motion-scale)); }
}

@keyframes motion-drop-in {
    from { opacity: 0; transform: translateY(calc(-1 * var(--motion-shift))); }
}

@keyframes motion-drop-out {
    to { opacity: 0; transform: translateY(calc(-1 * var(--motion-shift))); }
}

/* Page content fades in when the page changes. */
.chronos-page {
    animation: motion-fade-in var(--motion-enter) var(--motion-ease-out) backwards;
}

/* Content that appears in place (expanded details, new list items). */
.chronos-reveal {
    animation: motion-drop-in var(--motion-enter) var(--motion-ease-out) backwards;
}

/* Popovers (menus, selects, pickers, tooltips): MudBlazor fades them in over PopoverOptions.Duration; they also settle in place and fade out. */
.mud-popover {
    transform: scale(var(--motion-scale));
    transition-property: opacity, transform;
    transition-timing-function: var(--motion-ease-out);
}

.mud-popover.mud-popover-open {
    transform: none;
    transition-property: opacity, transform;
}

.mud-popover.mud-popover:not(.mud-popover-open) {
    transition-duration: var(--motion-exit) !important;
    transition-timing-function: var(--motion-ease-in);
}

@keyframes motion-shrink-out {
    to { opacity: 0; transform: scale(var(--motion-scale)); }
}

.mud-popover.motion-exit {
    animation: motion-shrink-out var(--motion-exit) var(--motion-ease-in) both;
}

/* Dialogs and their backdrop; js/motion.js plays the exit on a copy. */
.mud-dialog {
    animation: motion-rise-in var(--motion-enter) var(--motion-ease-out) backwards;
}

.mud-overlay .mud-overlay-scrim {
    animation: motion-fade-in var(--motion-enter) var(--motion-ease-out) both;
}

.motion-exit .mud-dialog {
    animation: motion-rise-out var(--motion-exit) var(--motion-ease-in) both;
}

.motion-exit .mud-overlay-scrim {
    animation: motion-fade-out var(--motion-exit) var(--motion-ease-in) both;
}

/* Taken drops from the app bar; the assistant rises from its button. */
.taken-panel {
    animation: motion-drop-in var(--motion-enter) var(--motion-ease-out) backwards;
}

.taken-panel.motion-exit {
    animation: motion-drop-out var(--motion-exit) var(--motion-ease-in) both;
}

.assistent-panel {
    transform-origin: bottom right;
    animation: motion-rise-in var(--motion-enter) var(--motion-ease-out) backwards;
}

.assistent-panel.motion-exit {
    animation: motion-rise-out var(--motion-exit) var(--motion-ease-in) both;
}

.assistent-fab {
    animation: motion-fade-in var(--motion-enter) var(--motion-ease-out) backwards;
}

.motion-exit {
    pointer-events: none;
}

/* MudBlazor expanders and tabs on the same timing. */
.mud-collapse-container {
    transition-duration: var(--motion-exit);
    transition-timing-function: var(--motion-ease-in);
}

.mud-collapse-container.mud-collapse-entering,
.mud-collapse-container.mud-collapse-entered {
    transition-duration: var(--motion-enter);
    transition-timing-function: var(--motion-ease-out);
}

.mud-expand-panel,
.mud-expand-panel .mud-expand-panel-header,
.mud-expand-panel .mud-expand-panel-header .mud-expand-panel-icon,
.mud-tab-slider.mud-tab-slider {
    transition-duration: var(--motion-enter);
    transition-timing-function: var(--motion-ease-out);
}

/* Reduced motion: no movement or height changes; fades stay, as they show what appears and disappears. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-shift: 0px;
        --motion-scale: 1;
    }

    .mud-collapse-container,
    .mud-collapse-container.mud-collapse-entering,
    .mud-collapse-container.mud-collapse-entered,
    .mud-expand-panel,
    .mud-expand-panel .mud-expand-panel-header,
    .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-icon,
    .mud-tab-slider.mud-tab-slider {
        transition: none;
    }
}

@media print {
    .chronos-page,
    .chronos-reveal {
        animation: none;
    }
}

html, body {
    font-family: var(--chronos-font);
    background: #fff;
    color: var(--chronos-text);
}

/* Full-width page headers reach under the scrollbar; nothing scrolls sideways. */
.chronos-main {
    overflow-x: clip;
}

/* ===== Bekijk als: bar under the app bar while viewing as another role ===== */
.chronos-view-as-banner {
    position: sticky;
    top: var(--mud-appbar-height);
    z-index: calc(var(--mud-zindex-appbar) - 1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: repeating-linear-gradient(135deg, var(--chronos-view-as) 0 24px, color-mix(in srgb, var(--chronos-view-as) 88%, #000) 24px 48px);
    color: var(--chronos-view-as-text);
    font-weight: 500;
}

.chronos-view-as-back {
    padding: 4px 12px;
    border: 1px solid var(--chronos-view-as-text);
    border-radius: 999px;
    background: var(--chronos-view-as-text);
    color: var(--chronos-view-as);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.chronos-view-as-back:hover, .chronos-view-as-back:focus-visible {
    background: transparent;
    color: var(--chronos-view-as-text);
}

/* ===== App bar: line in the environment colour, logo, environment name ===== */
.chronos-appbar.mud-appbar {
    border-top: 3px solid var(--env-accent);
    border-bottom: 1px solid var(--chronos-border);
}

.chronos-appbar .mud-toolbar {
    gap: 10px;
}

.chronos-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--chronos-font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--chronos-text);
    text-decoration: none;
}

/* Testomgeving badge (Chronos:Deployment=Dev): striped amber, visible on every page and the sign-in pages. */
.chronos-deployment-badge {
    flex-shrink: 0;
    padding: 2px 10px;
    border: 1px solid #8F3E09;
    border-radius: 999px;
    background: repeating-linear-gradient(135deg, #FDE68A 0 8px, #FCD34D 8px 16px);
    color: #5B2A06;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Logo: blue gradient that drifts slowly; the line draws itself once when it appears. Still with reduced motion. */
.chronos-logo {
    flex-shrink: 0;
    overflow: visible;
}

.chronos-logo-stop-start {
    stop-color: var(--chronos-logo-start);
    animation: chronos-logo-drift 9s ease-in-out infinite alternate;
}

.chronos-logo-stop-middle {
    stop-color: var(--chronos-logo);
}

.chronos-logo-stop-end {
    stop-color: var(--chronos-logo-end);
    animation: chronos-logo-drift 9s ease-in-out infinite alternate-reverse;
}

.chronos-logo-line {
    stroke-dasharray: 1;
    animation: chronos-logo-draw 1.4s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes chronos-logo-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes chronos-logo-drift {
    from {
        stop-color: var(--chronos-logo-start);
    }

    to {
        stop-color: var(--chronos-logo-end);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chronos-logo-stop-start,
    .chronos-logo-stop-end,
    .chronos-logo-line {
        animation: none;
    }
}

.chronos-crumb-separator {
    color: var(--chronos-border-strong);
}

.chronos-environment-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: var(--env-tint-2);
    color: var(--env-strong);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.chronos-group-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--chronos-sunken);
    font-weight: 500;
    white-space: nowrap;
}

.chronos-appbar .mud-select {
    flex: 0 0 auto;
}

.mud-input-control.chronos-group-select {
    flex: 0 0 180px;
    width: 180px;
    margin-top: 0 !important;
}

.chronos-group-select .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 999px;
    border-color: transparent;
}

.chronos-group-select .mud-input.mud-input-outlined {
    background: var(--chronos-sunken);
    border-radius: 999px;
}

.mud-avatar.chronos-avatar {
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
}

/* Brand left, search in the middle, group and avatar right. The outer columns keep their content and share the rest equally, so the
   search stays centred while there is room and shrinks first when there is not. */
.chronos-appbar-layout {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 560px) minmax(max-content, 1fr);
    align-items: center;
    column-gap: 16px;
    width: 100%;
}

.chronos-appbar-start,
.chronos-appbar-end {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chronos-appbar-end {
    justify-content: flex-end;
}

/* ===== Search (Features/Zoeken/SearchBar): field in the app bar, results below it; full screen on phones ===== */
.chronos-search {
    position: relative;
    min-width: 0;
}

.chronos-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 14px;
    border: 1px solid var(--chronos-border);
    border-radius: 999px;
    background: var(--chronos-sunken);
    color: var(--chronos-muted);
    transition: border-color var(--motion-fast) var(--motion-ease-out), background-color var(--motion-fast) var(--motion-ease-out), box-shadow var(--motion-fast) var(--motion-ease-out);
}

.chronos-search-field:hover {
    border-color: var(--env-line);
}

.chronos-search-field:focus-within {
    border-color: var(--env-accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--env-tint-2);
}

.chronos-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--chronos-text);
    font: inherit;
    font-size: .95rem;
}

.chronos-search-kbd,
.chronos-search-keys kbd {
    flex: none;
    padding: 1px 7px;
    border: 1px solid var(--chronos-border-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: #fff;
    color: var(--chronos-muted);
    font: 600 .75rem/1.4 var(--chronos-font);
}

/* The shortcut of the platform (chronos.search sets html[data-platform]); none before the script ran. */
html:not([data-platform=mac]) .chronos-search-kbd.is-mac,
html:not([data-platform=other]) .chronos-search-kbd.is-other {
    display: none;
}

.chronos-search-trigger.mud-icon-button,
.chronos-search-back {
    display: none;
}

.chronos-search-back {
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--chronos-text);
    cursor: pointer;
}

.chronos-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: min(480px, 92vw);
    max-height: min(70vh, 640px);
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--chronos-border);
    border-radius: var(--chronos-radius);
    background: #fff;
    color: var(--chronos-text);
    box-shadow: 0 18px 48px rgba(17, 19, 24, .16), 0 2px 6px rgba(17, 19, 24, .06);
    z-index: 1400;
}

.chronos-search-section + .chronos-search-section {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--chronos-border);
}

.chronos-search-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 4px;
    color: var(--chronos-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.chronos-search-section-title .mud-icon-root {
    color: var(--search-section);
    font-size: 1rem;
}

a.chronos-search-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--chronos-radius-sm);
    color: var(--chronos-text);
    text-decoration: none;
}

a.chronos-search-option:hover {
    background: var(--chronos-subtle);
}

a.chronos-search-option.is-active {
    background: var(--env-tint);
    box-shadow: inset 3px 0 0 var(--env-accent);
}

.chronos-search-option-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--search-section) 10%, #fff);
    color: var(--search-section);
}

.chronos-search-option-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.chronos-search-option-title,
.chronos-search-option-context {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chronos-search-option-title {
    font-weight: 600;
}

.chronos-search-option-context {
    color: var(--chronos-muted);
    font-size: .8rem;
}

.chronos-search-option-snippet {
    display: -webkit-box;
    overflow: hidden;
    color: var(--chronos-text);
    font-size: .82rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

mark.chronos-search-mark {
    padding: 0 1px;
    border-radius: 3px;
    background-color: #FFF0B3;
    color: var(--chronos-text);
}

.chronos-search-more {
    display: block;
    width: 100%;
    padding: 6px 10px 6px 52px;
    border: 0;
    border-radius: var(--chronos-radius-sm);
    background: transparent;
    color: var(--env-strong);
    font: 600 .85rem var(--chronos-font);
    text-align: left;
    cursor: pointer;
}

.chronos-search-more:hover,
.chronos-search-more.is-active {
    background: var(--env-tint);
}

.chronos-search-empty {
    padding: 16px 12px;
    color: var(--chronos-muted);
}

.chronos-search-keys {
    position: sticky;
    bottom: -6px;
    display: flex;
    gap: 16px;
    margin-top: 6px;
    padding: 8px 10px 6px;
    border-top: 1px solid var(--chronos-border);
    background: #fff;
    color: var(--chronos-muted);
    font-size: .75rem;
}

.chronos-search-keys kbd {
    margin-right: 3px;
    padding: 0 5px;
    font-size: .7rem;
}

/* Skeleton rows appear only when a section takes a moment, so fast sections do not flash. */
.chronos-search-skeleton {
    animation: chronos-search-appear .2s ease-out .15s both;
}

.chronos-search-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
}

@keyframes chronos-search-appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chronos-search-skeleton {
        animation: none;
    }

    .chronos-search-field {
        transition: none;
    }
}

@media (forced-colors: active) {
    .chronos-search-results {
        border: 1px solid CanvasText;
    }

    a.chronos-search-option.is-active,
    .chronos-search-more.is-active {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/* Narrow screens: the environment chip shows only its icon, leaving room for the search. */
@media (max-width: 959px) {
    .chronos-environment-chip span {
        display: none;
    }

    .chronos-environment-chip {
        padding: 7px;
    }
}

/* Phones and narrow tablets: an icon in the app bar opens the search over the whole screen. */
@media (max-width: 719px) {
    .chronos-appbar-layout {
        grid-template-columns: minmax(0, 1fr) auto auto;
        column-gap: 6px;
    }

    .chronos-search {
        position: static;
    }

    .chronos-search-skeleton-field {
        display: none;
    }

    .chronos-search-field,
    .chronos-search-keys,
    .chronos-search-kbd,
    .chronos-search-icon {
        display: none;
    }

    .chronos-search-trigger.mud-icon-button {
        display: inline-flex;
    }

    /* Logo without its name; group, background tasks and Taken shrink to fit beside it. */
    .chronos-brand-name,
    .chronos-crumb-separator {
        display: none;
    }

    .chronos-appbar-start,
    .chronos-appbar-end {
        gap: 6px;
    }

    .chronos-group-pill {
        padding: 7px 10px;
    }

    .mud-input-control.chronos-group-select {
        flex: 0 1 120px;
        width: 120px;
    }

    .chronos-environment-chip {
        min-width: 36px;
        min-height: 36px;
        justify-content: center;
    }

    .chronos-search.is-panel {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        padding: 10px 12px;
        background: #fff;
        z-index: 1500;
    }

    .chronos-search.is-panel .chronos-search-trigger.mud-icon-button {
        display: none;
    }

    .chronos-search.is-panel .chronos-search-field {
        display: flex;
        flex: none;
        padding-left: 4px;
    }

    .chronos-search.is-panel .chronos-search-back {
        display: inline-flex;
    }

    .chronos-search.is-panel .chronos-search-results {
        position: static;
        flex: 1 1 auto;
        min-width: 0;
        max-height: none;
        margin-top: 10px;
        padding: 0;
        border: 0;
        box-shadow: none;
    }
}

/* Phones: a narrower group selector. */
@media (max-width: 599px) {
    .mud-input-control.chronos-group-select {
        flex-basis: 112px;
        width: 112px;
    }

    .chronos-crumb-separator {
        display: none;
    }
}

.chronos-logout-form {
    margin: 0;
}

/* Same size as the MudMenuItems above it. */
.chronos-logout-button {
    width: 100%;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 12px;
    font: inherit;
    font-size: var(--mud-typography-body1-size);
    line-height: var(--mud-typography-body1-lineheight);
    cursor: pointer;
    text-align: left;
}

.chronos-logout-button:hover {
    background: var(--chronos-sunken);
}

/* ===== Page header: full width, soft tint of the environment with its form drawing ===== */
.chronos-page-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin: -24px calc(50% - 50vw) 24px;
    padding: 22px calc(50vw - 50%) 20px;
    border-bottom: 1px solid var(--chronos-border);
    background:
        var(--env-form) no-repeat right -20px top -14px / 640px 200px,
        linear-gradient(180deg, var(--env-tint), #fff 85%);
}

.chronos-page-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Header actions shrink to the screen width on phones. */
.chronos-page-heading,
.chronos-page-actions,
.chronos-page-header .mud-select {
    min-width: 0;
    max-width: 100%;
}

.chronos-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chronos-page-title.mud-typography {
    color: var(--chronos-text);
    font-size: 2.25rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.chronos-page-subtitle.mud-typography {
    margin-top: 4px;
    color: var(--chronos-muted);
    font-size: .95rem;
}

.chronos-back.mud-icon-button {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--chronos-border);
    background: #fff;
    color: var(--env-accent);
}

@media (max-width: 599px) {
    .chronos-page-header {
        margin-top: -16px;
        padding-block: 16px;
        background-size: 420px 132px, auto;
    }

    .chronos-page-title.mud-typography {
        font-size: 1.75rem;
    }

    .chronos-page-heading {
        gap: 10px;
    }
}

/* ===== Tiles: header in the environment tint with a round icon, title and description ===== */
.chronos-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.chronos-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--chronos-border);
    border-radius: var(--chronos-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--motion-fast) var(--motion-ease-out), box-shadow var(--motion-fast) var(--motion-ease-out);
}

.chronos-tile:hover,
.chronos-tile:focus-visible {
    border-color: var(--env-accent);
    box-shadow: 0 6px 20px -12px var(--env-accent);
}

.chronos-tile-expanded {
    border-color: var(--env-accent);
    box-shadow: 0 0 0 1px var(--env-accent);
}

.chronos-tile-head {
    position: relative;
    height: 48px;
    display: flex;
    align-items: flex-end;
    padding: 0 16px;
    background: var(--env-tint);
    border-bottom: 1px solid var(--env-tint-2);
}

.chronos-tile-large .chronos-tile-head {
    height: 64px;
    padding: 0 18px;
    background: var(--env-tile-form) no-repeat right 30px top 6px / 200px 52px, var(--env-tint);
}

.chronos-tile-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    background: var(--env-accent);
    box-shadow: 0 0 0 4px #fff;
    transform: translateY(50%);
}

.chronos-tile-large .chronos-tile-icon {
    width: 44px;
    height: 44px;
}

.chronos-tile-corner {
    position: absolute;
    top: 14px;
    right: 16px;
    color: var(--env-accent);
}

.chronos-tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 26px 16px 16px;
}

.chronos-tile-large .chronos-tile-body {
    padding: 32px 18px 18px;
}

.chronos-tile-title {
    font-size: .95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.chronos-tile-large .chronos-tile-title {
    font-size: 1rem;
}

.chronos-tile-description {
    color: var(--chronos-muted);
    font-size: .875rem;
    line-height: 1.45;
}

/* A period: solid bar in its own colour (PeriodShade) with white text, apart from the environment colour. */
.chronos-period {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--period);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chronos-card {
    background: #fff;
    border: 1px solid var(--chronos-border);
    border-radius: var(--chronos-radius);
}

.chronos-pupil-picker-label {
    display: block;
    color: var(--chronos-muted);
    margin-bottom: 2px;
}

.chronos-pupil-picker-input {
    min-width: 160px;
    max-width: 220px;
}

.chronos-secret {
    font-family: ui-monospace, Menlo, monospace;
    font-size: .85rem;
    word-break: break-all;
    background: var(--chronos-sunken);
    padding: 4px 8px;
    border-radius: 6px;
}

.chronos-attachment {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Buttons keep their label on one line and do not shrink below it; containers wrap them instead. */
.mud-button-root.mud-button:not(.mud-toggle-item) {
    flex-shrink: 0;
    white-space: nowrap;
}

.mud-button-root.mud-button-text {
    padding-inline: 8px;
}

/* Toggle items are as wide as their text, with room around it; on narrow screens the text wraps inside the item. */
.mud-toggle-group-horizontal {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    max-width: 100%;
}

.mud-toggle-group .mud-toggle-item.mud-toggle-item {
    padding-inline: 13px;
    line-height: 1.3;
}

/* ===== MudBlazor controls in the environment colour ===== */
.mud-button-root.mud-button,
.mud-chip {
    border-radius: 999px;
}

.mud-button-outlined.mud-button-outlined-default {
    border-color: var(--chronos-border-strong);
    background: #fff;
}

.mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--env-line);
    background: #fff;
}

.mud-button-outlined.mud-button-outlined-primary:hover,
.mud-button-text.mud-button-text-primary:hover {
    background: var(--env-tint);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--env-strong);
}

.mud-chip-text.mud-chip-color-primary {
    background: var(--env-tint-2);
    color: var(--env-strong);
}

/* Category of a logboek note. */
.chronos-note-category {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--env-tint-2);
    color: var(--env-strong);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Toggles: a sunken pill with the selected item raised in white. */
.mud-toggle-group.mud-toggle-group {
    gap: 2px;
    padding: 3px;
    border: none;
    border-radius: 999px;
    background: var(--chronos-sunken);
}

.mud-toggle-group.mud-toggle-group .mud-toggle-item.mud-toggle-item.mud-toggle-item {
    margin: 0 !important;
    border: none !important;
    border-left-width: 0 !important;
    border-radius: 999px !important;
    color: var(--chronos-muted);
    font-weight: 500;
}

.mud-toggle-group.mud-toggle-group .mud-toggle-item.mud-toggle-item.mud-toggle-item-selected {
    background: #fff;
    color: var(--env-strong);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(17, 19, 24, .1), 0 0 0 1px var(--env-line);
}

.mud-tabs-toolbar .mud-tab.mud-tab-active {
    color: var(--env-accent);
}

/* MudTable rows as cards on small screens: each label above its value, so long values wrap instead of running off the card. */
@media (max-width: 959.98px) {
    .mud-sm-table .mud-table-cell {
        display: block;
        padding: 6px 16px;
        overflow-wrap: anywhere;
    }

    .mud-sm-table .mud-table-cell::before {
        display: block;
        padding: 0;
        color: var(--chronos-muted);
        font-size: .75rem;
        font-weight: 600;
    }

    .mud-sm-table .mud-table-row .mud-table-cell:first-child {
        padding-top: 14px;
    }

    .mud-sm-table .mud-table-row .mud-table-cell:last-child {
        padding-bottom: 14px;
    }
}

/* Text for screen readers only. */
.chronos-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Previous / next steps of a date or month navigator. */
.mud-icon-button.chronos-step {
    width: 34px;
    height: 34px;
    border: 1px solid var(--chronos-border);
    background: #fff;
    color: var(--env-accent);
}

/* Focus ring in the environment colour; links and tiles get a visible ring (MudBlazor removes it from links). */
:focus-visible {
    outline-color: var(--env-accent);
}

a:focus-visible,
.chronos-tile:focus-visible {
    outline: 2px solid var(--env-accent);
    outline-offset: 2px;
}

/* Week numbers in the calendar in the muted text colour instead of MudBlazor's faded disabled colour. */
.mud-picker-calendar-week .mud-picker-calendar-week-text {
    color: var(--chronos-muted);
}

/* The unselected part of the clock's time (hours or minutes) stays readable on every environment colour (≥ 3.5:1). */
.mud-picker-timepicker-toolbar .mud-timepicker-button.mud-timepicker-toolbar-text {
    color: rgba(255, 255, 255, .75);
}

/* MudBlazor copies a picker's Style (e.g. width) onto its popup; the calendar keeps its own size. */
.mud-picker-popover-paper {
    width: auto !important;
}

#blazor-error-ui {
    background: #fff4e5;
    color: var(--chronos-text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Logboek (per day), groepsplannen and plannen kind print on A4 portrait. The page name goes on the body, so the
   print starts on the first page instead of after a blank default page. */
@page logboek {
    size: A4 portrait;
}

@page plan {
    size: A4 portrait;
    margin: 15mm;
}

/* Grafieken of a pupil (PupilChartGrid): six per A4 portrait. */
@page charts {
    size: A4 portrait;
    margin: 15mm;
}

@media print {
    body:has(.pr) {
        page: logboek;
    }

    body:has(.pp) {
        page: plan;
    }

    body:has(.pcg) {
        page: charts;
    }

    /* A plan print has its own header (PlanPrint). */
    body:has(.pp) .chronos-page-header {
        display: none !important;
    }
}

@media print {
    .no-print, .mud-appbar, .mud-snackbar-provider {
        display: none !important;
    }

    .mud-main-content {
        padding-top: 0 !important;
    }

    .chronos-page-header {
        margin: 0 0 16px;
        padding: 0;
        border: none;
        background: none;
    }

    html, body {
        background: #fff;
    }

    .chronos-card {
        border-color: #bbb;
        break-inside: avoid;
    }
}

/* ===== Lessen: ScheduleGrid drag elements created by chronos.js (not scoped) ===== */
.sg-source-ghost {
    position: fixed;
    z-index: 3000;
    pointer-events: none;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .86rem;
    color: var(--chronos-on-light);
    background: color-mix(in srgb, var(--sg-color) 35%, white);
    border: 1px solid var(--sg-color);
    box-shadow: 0 8px 20px rgba(17, 19, 24, .2);
}

.sg-drop-preview {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 4;
    pointer-events: none;
    border-radius: 8px;
    border: 2px dashed var(--sg-color);
    background: color-mix(in srgb, var(--sg-color) 18%, transparent);
    padding: 2px 8px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--chronos-on-light);
    overflow: hidden;
    white-space: nowrap;
}
/* Shifted, disappearing and refused items while dragging on a ScheduleGrid (chronos.js scheduleGrid). */
.sg-hidden {
    visibility: hidden;
}

.sg-preview-shifted {
    pointer-events: none;
    z-index: 3;
    transition: top var(--motion-fast) var(--motion-ease-out), height var(--motion-fast) var(--motion-ease-out);
}

.sg-preview-shifted .sg-item-content {
    box-shadow: 0 0 0 1px var(--sg-color);
}

.sg-preview-removed {
    opacity: .5;
}

.sg-preview-removed .sg-item-content {
    background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--mud-palette-error) 18%, transparent) 6px 12px);
    outline: 2px dashed var(--mud-palette-error);
    text-decoration: line-through;
}

.sg-drop-preview {
    transition: top var(--motion-fast) var(--motion-ease-out), height var(--motion-fast) var(--motion-ease-out);
}

.sg-preview-error {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 5;
    pointer-events: none;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--mud-palette-error-darken);
    background: #FFF4F2;
    border: 2px solid var(--mud-palette-error);
    box-shadow: 0 6px 16px rgba(17, 19, 24, .18);
}

.planner-tips {
    margin: 0;
    padding-left: 18px;
    color: var(--chronos-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.planner-tips li + li {
    margin-top: 6px;
}
/* ===== End lessen ===== */

/* Platform */
.platform-number { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.platform-scroll { overflow-x: auto; }
.platform-filter { min-width: 220px; max-width: 320px; }
.platform-selected { background: var(--env-tint); }
.platform-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.platform-stat { background: #fff; border: 1px solid var(--env-line); border-radius: 12px; padding: 14px 16px; }
.platform-stat-value { font-size: 1.75rem; font-weight: 600; color: var(--env-accent); font-variant-numeric: tabular-nums; }
.platform-stat-label { color: var(--chronos-muted); font-size: 0.875rem; }
.platform-trend { margin: 0; }
.platform-trend svg { width: 100%; height: 160px; display: block; }
.platform-trend-axis { stroke: var(--env-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.platform-trend-hit { fill: transparent; }
.platform-trend-bar { fill: var(--env-accent); }
.platform-trend-day:hover .platform-trend-hit { fill: var(--env-tint); }
.platform-trend-day:hover .platform-trend-bar { fill: var(--env-strong); }
.platform-trend-caption { display: flex; justify-content: space-between; color: var(--chronos-muted); font-size: 0.8125rem; margin-top: 4px; }

/* Open Taken panel (Features/Taken/TakenPanel): on wide screens the page makes room for it instead of lying under it. */
@media (min-width: 1100px) {
    .chronos-main.taken-open {
        padding-right: 424px;
    }
}

/* ===== Registratieblad (Features/Registratieblad): crosses per pupil and column (totaalblad: tallies), sheets side by side on screen, one per A4 landscape page in print ===== */
:root {
    --rb-lesson: #FFE27A;
    --rb-lesson-line: #9A6B00;
    --rb-option: #FFF4CC;
    --rb-later: #ECEEF1;
    --rb-later-text: #6B7280;
    --rb-cell: 32px;
    --rb-name: 150px;
    --rb-font: .75rem;
    --rb-head-padding: 4px 6px;
    --rb-col-padding: 4px 1px;
    --rb-vertical-height: 130px;
    --rb-cross-size: 16px;
    --rb-total-height: 24px;
    --rb-cross: color-mix(in srgb, var(--env-accent) 14%, transparent);
    --rb-blad-line: #6B7280;
}

.rb-instruction {
    flex-basis: 100%;
    font-weight: 600;
}

.rb-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-bottom: 8px;
}

.rb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: .82rem;
    color: var(--chronos-text);
}

.rb-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rb-key.rb-lesson::before, .rb-key.rb-option::before, .rb-key.rb-later::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--chronos-border);
}

.rb-key.rb-lesson::before { background: var(--rb-lesson); border: 2px solid var(--rb-lesson-line); }
.rb-key.rb-option::before { background: var(--rb-option); border: 1px dashed var(--rb-lesson-line); }
.rb-key.rb-later::before { background: var(--rb-later); }

.rb-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.rb-sheet {
    margin-bottom: 24px;
}

.rb-sheet-title {
    font-family: var(--chronos-font-display, inherit);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.rb-scroll {
    overflow: auto;
    max-height: calc(100dvh - 96px);
    border: 1px solid var(--chronos-border);
    border-radius: 8px;
}

.rb-paper {
    display: none;
}

.rb-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.rb-table thead .rb-name {
    z-index: 4;
}

.rb-table .rb-start {
    border-left: 2px solid var(--rb-blad-line);
}

.rb-blad {
    font-weight: 700;
    padding: var(--rb-head-padding) !important;
    text-align: left;
    background: var(--chronos-sunken) !important;
}

.rb-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--rb-font);
}

.rb-table th, .rb-table td {
    border-right: 1px solid var(--chronos-border);
    border-bottom: 1px solid var(--chronos-border);
    padding: 0;
    background: #fff;
    color: var(--chronos-text);
}

.rb-name {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--rb-name);
    min-width: var(--rb-name);
    max-width: var(--rb-name);
    padding: 2px 8px !important;
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-name-head {
    vertical-align: bottom;
}

.rb-blad > span, .rb-part > span {
    position: sticky;
    left: calc(var(--rb-name) + 8px);
    right: 8px;
}

.rb-name-head, .rb-part, .rb-group {
    font-weight: 600;
    padding: var(--rb-head-padding) !important;
    text-align: center;
}

.rb-col {
    width: var(--rb-cell);
    min-width: var(--rb-cell);
    vertical-align: bottom;
    padding: var(--rb-col-padding) !important;
    font-weight: 500;
}

.rb-vertical {
    display: block;
    margin: 0 auto;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: var(--rb-vertical-height);
    line-height: 1.15;
}

.rb-from {
    display: block;
    margin-top: 4px;
    text-align: center;
    font-size: .7rem;
    color: var(--chronos-muted);
}

.rb-table .rb-lesson {
    background: var(--rb-lesson);
    border-left: 2px solid var(--rb-lesson-line);
    border-right: 2px solid var(--rb-lesson-line);
    font-weight: 700;
}

.rb-table .rb-option {
    background: var(--rb-option);
}

.rb-table .rb-later {
    background: repeating-linear-gradient(135deg, var(--rb-later) 0 6px, #F6F7F9 6px 12px);
    color: var(--rb-later-text);
}

.rb-cell-wrap {
    height: var(--rb-cell);
}

.rb-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--rb-cell);
    min-width: var(--rb-cell);
    border: 0;
    background: transparent;
    color: var(--chronos-text);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.rb-cell:hover:not(:disabled) {
    background: color-mix(in srgb, var(--env-accent) 12%, transparent);
}

.rb-cell:focus-visible {
    outline: 2px solid var(--env-accent);
    outline-offset: -2px;
}

.rb-cell:disabled {
    cursor: default;
}

.rb-vi {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    color: #fff;
    background: #1D4ED8;
}

.rb-key .rb-vi {
    position: static;
}

.rb-cross {
    position: relative;
    width: var(--rb-cross-size);
    height: var(--rb-cross-size);
}

.rb-cross::before, .rb-cross::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 100%;
    margin-left: -1.5px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
}

.rb-cross::after {
    transform: rotate(-45deg);
}

.tally {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    height: 18px;
}

.tally-mark, .tally-bundle > span {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: currentColor;
}

.tally-bundle {
    position: relative;
    display: inline-flex;
    gap: 2px;
}

.tally-bundle::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 7px;
    height: 2px;
    background: currentColor;
    transform: rotate(-30deg);
}

.tally-number {
    font-weight: 700;
}

.rb-total {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: var(--rb-total-height);
    font-weight: 600;
}

.rb-shade-1 { background: #FDECEC; }
.rb-shade-2 { background: #F9C9C9; }
.rb-shade-3 { background: #F29A9A; }
.rb-shade-4 { background: #E56B6B; color: #111318; }

.rb-foot {
    font-weight: 700;
    background: var(--chronos-sunken) !important;
}

.rb-print-head {
    display: none;
}

@page registratieblad {
    size: A4 landscape;
    margin: 8mm;
}

@media print {
    :root {
        --rb-font: .8rem;
        --rb-head-padding: 6px 8px;
        --rb-col-padding: 6px 2px;
        --rb-cross-size: 22px;
        --rb-total-height: 17px;
    }

    .rb-screen {
        display: none;
    }

    .rb-paper {
        display: block;
    }

    .rb-table thead {
        position: static;
    }

    body:has(.rb-print) {
        page: registratieblad;
    }

    .rb-print * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rb-print .chronos-page-header {
        display: none !important;
    }

    .rb-print-head {
        display: block;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .rb-sheet {
        margin: 0;
    }

    .rb-paper + .rb-paper {
        break-before: page;
    }

    .rb-scroll {
        overflow: visible;
        max-height: none;
        border: 0;
    }

    .rb-table {
        width: 100%;
        font-size: 7pt;
    }

    .rb-table th, .rb-table td {
        border-color: #999;
    }

    .rb-name {
        position: static;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 1px 4px !important;
    }

    .rb-col {
        width: auto;
        min-width: 0;
    }

    .rb-vertical {
        max-height: 120px;
    }

    .rb-cell-wrap, .rb-cell {
        height: 19px;
        min-width: 0;
    }

    .rb-table .rb-lesson {
        border-left: 2px solid #000;
        border-right: 2px solid #000;
    }

    .tally {
        height: 10px;
        gap: 2px;
    }

    .tally-mark, .tally-bundle > span {
        height: 9px;
        width: 1px;
    }

    .tally-bundle::after {
        top: 4px;
        height: 1px;
    }

    .rb-cross {
        width: 11px;
        height: 11px;
    }

    .rb-cross::before, .rb-cross::after {
        width: 1.5px;
        margin-left: -.75px;
    }
}