/* =====================================================================================================
   KM TimeLocal CORE — theme on Bootstrap 4.6.2 (docs/UI_STYLE_GUIDE.md)
   Loaded by _Layout AFTER the Bootstrap / DataTables / bootstrap-select CSS and before page CSS.
   1. Tokens  2. Base  3. Bootstrap 4.6 overrides (the complete list of §11.1)  4. km components  5. Utilities
   Bootstrap 4.6 components don't read CSS variables: colours are applied by overriding the compiled rules.
   ===================================================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
    /* Brand: RAL 5010 Gentian Blue (canonical screen value #0E4C92) */
    --km-primary-50: #EEF4FB;
    --km-primary-100: #D6E4F5;
    --km-primary-200: #ADC9EB;
    --km-primary-300: #7FA8DB;
    --km-primary-400: #4B82C4;
    --km-primary-500: #1F5FA8;
    --km-primary-600: #0E4C92;
    --km-primary-700: #0B3F7A;
    --km-primary-800: #093262;
    --km-primary-900: #06244A;

    /* Accent: only for work outside the station (KOV) */
    --km-accent-50: #F3EEFB;
    --km-accent-100: #E7DDF7;
    --km-accent-300: #C9B4EC;
    --km-accent-700: #5B3A9E;

    /* Neutrals (cool grey) */
    --km-gray-0: #FFFFFF;
    --km-gray-25: #FAFBFC;
    --km-gray-50: #F5F7FA;
    --km-gray-100: #EEF1F5;
    --km-gray-200: #E1E6ED;
    --km-gray-300: #CBD3DD;
    --km-gray-400: #A3AEBC;
    --km-gray-500: #7A8697;
    --km-gray-600: #5B6676;
    --km-gray-700: #434D5B;
    --km-gray-800: #2C3440;
    --km-gray-900: #1B2129;

    /* Status: 50 background, 100 strong background, 300 border, 700/800 text, solid fill */
    --km-success-50: #E6F4EA;
    --km-success-100: #C6E9D0;
    --km-success-300: #8FCFA2;
    --km-success-700: #116329;
    --km-success-solid: #116329;
    --km-warning-50: #FFF4D6;
    --km-warning-100: #FFE8A3;
    --km-warning-300: #F0C24B;
    --km-warning-500: #E3A008;
    --km-warning-800: #7A4F00;
    --km-danger-50: #FDE8EB;
    --km-danger-100: #F9C9D0;
    --km-danger-300: #EE9AA7;
    --km-danger-700: #B42335;
    --km-danger-solid: #B42335;
    --km-info-50: #E3F3F7;
    --km-info-100: #C4E6EF;
    --km-info-300: #86C7D8;
    --km-info-700: #0B6B85;
    --km-info-solid: #0B6B85;

    /* Backgrounds and text */
    --km-bg-canvas: var(--km-gray-50);
    --km-bg-surface: var(--km-gray-0);
    --km-bg-surface-subtle: var(--km-gray-25);
    --km-bg-sunken: var(--km-gray-100);
    --km-bg-appbar: var(--km-primary-600);
    --km-bg-overlay: rgba(27, 33, 41, .45);
    --km-text-primary: var(--km-gray-900);
    --km-text-secondary: var(--km-gray-600);
    --km-text-disabled: var(--km-gray-400);
    --km-text-link: var(--km-primary-600);
    --km-text-on-primary: #FFFFFF;

    /* Planning data in "Eenvoudig" colour mode */
    --km-plan-present: #FFFFFF;
    --km-plan-opening: #FFE066;
    --km-plan-leave: #D5DAE1;
    --km-plan-absent: #FFB27A;
    --km-plan-kov: var(--km-accent-50);

    /* Type (§3) */
    --km-font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --km-font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
    --km-font-h1: 20px;
    --km-font-h2: 16px;
    --km-font-h3: 14px;
    --km-font-body: 14px;
    --km-font-small: 13px;
    --km-font-caption: 12px;
    --km-font-micro: 11px;

    /* Spacing (§4.1) */
    --km-space-1: 4px;
    --km-space-2: 8px;
    --km-space-3: 12px;
    --km-space-4: 16px;
    --km-space-5: 20px;
    --km-space-6: 24px;
    --km-space-8: 32px;
    --km-space-12: 48px;

    /* Radii, borders, elevation (§4.7) */
    --km-radius-sm: 4px;
    --km-radius-md: 6px;
    --km-radius-lg: 8px;
    --km-border: 1px solid var(--km-gray-200);
    --km-border-strong: 1px solid var(--km-gray-300);
    --km-shadow-2: 0 4px 12px rgba(27, 33, 41, .12), 0 1px 3px rgba(27, 33, 41, .08);
    --km-shadow-3: 0 16px 40px rgba(27, 33, 41, .20);

    /* Controls */
    --km-control-height: 32px;
    --km-control-height-sm: 28px;
    --km-input-num-width: 96px;

    /* Bootstrap 4.6 informational variables, kept consistent with the tokens */
    --primary: #0E4C92;
    --success: #116329;
    --warning: #E3A008;
    --danger: #B42335;
    --info: #0B6B85;
    --font-family-sans-serif: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- 2. Base */
html {
    font-size: 16px;
}

body {
    font-family: var(--km-font-sans);
    font-size: var(--km-font-body);
    line-height: 20px;
    color: var(--km-text-primary);
    background: var(--km-bg-canvas);
}

/* The footer stays at the bottom of the screen on short pages (login) and follows the content on long ones:
   header, content and footer are a column of the full screen height, the content takes what is left */
@media screen {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    body > .container-fluid {
        flex: 1 0 auto;
    }
}

a {
    color: var(--km-text-link);
}

a:hover {
    color: var(--km-primary-700);
}

::selection {
    background: var(--km-primary-100);
}

h1, .h1 {
    font-size: var(--km-font-h1);
    line-height: 28px;
    font-weight: 600;
}

h2, .h2 {
    font-size: var(--km-font-h2);
    line-height: 22px;
    font-weight: 600;
}

h3, .h3 {
    font-size: var(--km-font-h3);
    line-height: 20px;
    font-weight: 600;
}

h4, .h4, h5, .h5, h6, .h6 {
    font-size: var(--km-font-h3);
    line-height: 20px;
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--km-text-primary);
    margin-bottom: var(--km-space-2);
}

small, .small {
    font-size: var(--km-font-small);
}

code {
    color: var(--km-accent-700);
}

main[role="main"] {
    padding-top: var(--km-space-4);
    padding-bottom: var(--km-space-8);
}

/* Focus (§8.2): one style everywhere, only for keyboard focus */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--km-primary-600);
    outline-offset: 2px;
}

[id] {
    scroll-margin-top: 120px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------- 3. Bootstrap 4.6 overrides */

/* Buttons */
.btn {
    min-height: var(--km-control-height);
    padding: 5px 12px;
    font-size: var(--km-font-body);
    font-weight: 600;
    line-height: 20px;
    border-radius: var(--km-radius-sm);
    transition: background-color .1s ease, border-color .1s ease, color .1s ease;
}

.btn:focus,
.btn.focus {
    box-shadow: none;
}

.btn:focus-visible {
    outline: 2px solid var(--km-primary-600);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-sm,
.btn-group-sm > .btn {
    min-height: var(--km-control-height-sm);
    padding: 3px 10px;
    font-size: var(--km-font-small);
    line-height: 20px;
    border-radius: var(--km-radius-sm);
}

.btn-primary {
    color: var(--km-text-on-primary);
    background-color: var(--km-primary-600);
    border-color: var(--km-primary-600);
}

.btn-primary:hover {
    color: var(--km-text-on-primary);
    background-color: var(--km-primary-700);
    border-color: var(--km-primary-700);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--km-primary-800);
    border-color: var(--km-primary-800);
    box-shadow: none;
}

.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--km-primary-600);
    border-color: var(--km-primary-600);
    box-shadow: none;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #FFFFFF;
    background-color: var(--km-primary-200);
    border-color: var(--km-primary-200);
    opacity: 1;
}

.btn-danger {
    color: #FFFFFF;
    background-color: var(--km-danger-700);
    border-color: var(--km-danger-700);
}

.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: #951C2B;
    border-color: #951C2B;
    box-shadow: none;
}

.btn-danger:focus {
    box-shadow: none;
}

.btn-link {
    color: var(--km-text-link);
    font-weight: 400;
}

.btn-link:hover {
    color: var(--km-primary-700);
}

/* Other Bootstrap button colours used by older modules: calm them down to the palette */
.btn-success {
    background-color: var(--km-success-solid);
    border-color: var(--km-success-solid);
}

.btn-info {
    color: #FFFFFF;
    background-color: var(--km-info-solid);
    border-color: var(--km-info-solid);
}

.btn-warning {
    color: var(--km-gray-900);
    background-color: var(--km-warning-500);
    border-color: var(--km-warning-500);
}

.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark {
    color: var(--km-gray-900);
    background-color: var(--km-bg-surface);
    border-color: var(--km-gray-500);
}

.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-dark:hover {
    color: var(--km-gray-900);
    background-color: var(--km-gray-100);
    border-color: var(--km-gray-500);
}

/* Inputs */
.form-control,
.custom-select {
    height: var(--km-control-height);
    padding: 5px 8px;
    font-size: var(--km-font-body);
    line-height: 20px;
    color: var(--km-text-primary);
    border: 1px solid var(--km-gray-500);
    border-radius: var(--km-radius-sm);
}

textarea.form-control {
    height: auto;
}

/* A button that is also a form-control (full-width buttons in older forms) keeps its button colours */
.btn.form-control {
    height: auto;
    font-weight: 600;
}

.btn-primary.form-control {
    color: var(--km-text-on-primary);
    border-color: var(--km-primary-600);
}

.btn-primary.form-control:hover {
    color: var(--km-text-on-primary);
    border-color: var(--km-primary-700);
}

.btn-danger.form-control {
    color: #FFFFFF;
    border-color: var(--km-danger-700);
}

.form-control-sm,
.custom-select-sm {
    height: var(--km-control-height-sm);
    padding: 3px 8px;
    font-size: var(--km-font-small);
}

.custom-select {
    padding-right: 28px;
}

.form-control::placeholder {
    color: var(--km-gray-600);
}

.form-control:hover,
.custom-select:hover {
    border-color: var(--km-gray-700);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--km-primary-600);
    box-shadow: none;
    outline: 2px solid var(--km-primary-600);
    outline-offset: 0;
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--km-bg-sunken);
    border-color: var(--km-gray-300);
    color: var(--km-gray-700);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--km-danger-700);
}

.invalid-feedback {
    font-size: var(--km-font-caption);
    color: var(--km-danger-700);
}

label {
    font-size: var(--km-font-small);
    font-weight: 600;
    color: var(--km-gray-800);
    margin-bottom: var(--km-space-1);
}

.form-text {
    font-size: var(--km-font-caption);
    color: var(--km-text-secondary);
}

.form-group {
    margin-bottom: var(--km-space-4);
}

.custom-control-label {
    font-weight: 400;
    color: var(--km-text-primary);
}

.custom-control-label::before {
    border-color: var(--km-gray-500);
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:indeterminate ~ .custom-control-label::before {
    color: #FFFFFF;
    border-color: var(--km-primary-600);
    background-color: var(--km-primary-600);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid var(--km-primary-600);
    outline-offset: 2px;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--km-primary-600);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #FFFFFF;
}

.custom-file-label {
    border-color: var(--km-gray-500);
    border-radius: var(--km-radius-sm);
}

.input-group-text {
    font-size: var(--km-font-small);
    color: var(--km-gray-600);
    background-color: var(--km-bg-sunken);
    border-color: var(--km-gray-500);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--km-primary-600);
}

/* Tables */
.table {
    font-size: var(--km-font-small);
    color: var(--km-text-primary);
    font-variant-numeric: tabular-nums;
}

.table th,
.table td {
    border-top: 1px solid var(--km-gray-200);
}

.table thead th {
    font-weight: 600;
    color: var(--km-gray-700);
    background: var(--km-bg-surface-subtle);
    border-bottom: 1px solid var(--km-gray-300);
}

.table-hover tbody tr:hover {
    background-color: var(--km-primary-50);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

/* Cards */
.card {
    border: var(--km-border);
    border-radius: var(--km-radius-md);
    box-shadow: none;
}

.card-header,
.card-footer {
    padding: var(--km-space-3) var(--km-space-4);
    background: var(--km-bg-surface-subtle);
    border-color: var(--km-gray-200);
}

.card-body {
    padding: var(--km-space-4);
}

/* Dropdowns */
.dropdown-menu {
    min-width: 220px;
    padding: var(--km-space-1);
    font-size: var(--km-font-body);
    border: var(--km-border);
    border-radius: var(--km-radius-md);
    box-shadow: var(--km-shadow-2);
}

.dropdown-item {
    padding: 6px 12px;
    border-radius: var(--km-radius-sm);
    color: var(--km-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--km-gray-100);
    color: var(--km-text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--km-primary-50);
    color: var(--km-primary-700);
}

.dropdown-header {
    font-size: var(--km-font-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--km-gray-600);
}

.dropdown-divider {
    margin: var(--km-space-1) 0;
    border-top-color: var(--km-gray-200);
}

/* Modals */
.modal-content {
    border: none;
    border-radius: var(--km-radius-lg);
    box-shadow: var(--km-shadow-3);
}

.modal-header {
    padding: var(--km-space-3) var(--km-space-6);
    border-bottom: var(--km-border);
}

.modal-title {
    font-size: var(--km-font-h2);
    font-weight: 600;
}

.modal-body {
    padding: var(--km-space-4) var(--km-space-6);
}

.modal-footer {
    padding: var(--km-space-3) var(--km-space-6);
    border-top: var(--km-border);
}

.modal-backdrop.show {
    opacity: 1;
    background: var(--km-bg-overlay);
}

.modal-dialog {
    max-width: 640px;
}

.modal-sm {
    max-width: 480px;
}

.modal-lg {
    max-width: 800px;
}

.close {
    font-size: 20px;
    font-weight: 400;
    color: var(--km-gray-700);
    text-shadow: none;
    opacity: 1;
}

.close:hover {
    color: var(--km-gray-900);
    opacity: 1;
}

/* Alerts (plain Bootstrap alerts of older pages follow the km look) */
.alert {
    padding: 10px 12px;
    font-size: var(--km-font-small);
    color: var(--km-text-primary);
    border-radius: var(--km-radius-md);
    border-width: 1px 1px 1px 3px;
}

.alert-success { background: var(--km-success-50); border-color: var(--km-success-300); border-left-color: var(--km-success-700); color: var(--km-text-primary); }
.alert-warning { background: var(--km-warning-50); border-color: var(--km-warning-300); border-left-color: var(--km-warning-800); color: var(--km-text-primary); }
.alert-danger { background: var(--km-danger-50); border-color: var(--km-danger-300); border-left-color: var(--km-danger-700); color: var(--km-text-primary); }
.alert-info,
.alert-primary { background: var(--km-info-50); border-color: var(--km-info-300); border-left-color: var(--km-info-700); color: var(--km-text-primary); }

/* Badges */
.badge {
    font-size: var(--km-font-micro);
    font-weight: 600;
    line-height: 14px;
    padding: 3px 6px;
    border-radius: var(--km-radius-sm);
}

.badge-primary { background: var(--km-primary-100); color: var(--km-primary-700); }
.badge-success { background: var(--km-success-100); color: var(--km-success-700); }
.badge-warning { background: var(--km-warning-100); color: var(--km-warning-800); }
.badge-danger { background: var(--km-danger-100); color: var(--km-danger-700); }
.badge-info { background: var(--km-info-100); color: var(--km-info-700); }
.badge-secondary,
.badge-light { background: var(--km-gray-100); color: var(--km-gray-700); }

/* Tabs (km-tabs restyles nav-tabs into underline tabs) */
.km-tabs.nav-tabs,
.km-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Only sideways (§5.7). overflow-x: auto turns overflow-y into auto as well, and the active tab's
       underline (nav-tabs margin-bottom: -1px) is 1 px taller than the bar: a vertical scrollbar under the tabs (v1.7) */
    overflow-y: hidden;
    gap: var(--km-space-1);
    border-bottom: 1px solid var(--km-gray-200);
}

.km-tabs .nav-link,
.km-tabs > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 var(--km-space-3);
    font-size: var(--km-font-body);
    color: var(--km-gray-700);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
}

.km-tabs .nav-link:hover,
.km-tabs > a:hover {
    color: var(--km-gray-900);
    background: var(--km-gray-100);
    border-color: transparent;
    border-bottom-color: transparent;
}

.km-tabs .nav-link.active,
.km-tabs > a.active,
.km-tabs > a.is-active {
    color: var(--km-primary-600);
    font-weight: 600;
    background: none;
    border-bottom-color: var(--km-primary-600);
}

/* Paging (DataTables) */
.page-link {
    color: var(--km-text-link);
    border-color: var(--km-gray-200);
}

.page-item.active .page-link {
    background-color: var(--km-primary-600);
    border-color: var(--km-primary-600);
}

.page-link:focus {
    box-shadow: none;
}

/* Toasts, tooltips */
.toast {
    max-width: 360px;
    font-size: var(--km-font-small);
    border: var(--km-border);
    border-radius: var(--km-radius-lg);
    box-shadow: var(--km-shadow-3);
}

.tooltip-inner {
    font-size: var(--km-font-caption);
    background: var(--km-gray-900);
    border-radius: var(--km-radius-sm);
}

/* Colour utilities */
.bg-primary { background-color: var(--km-primary-600) !important; }
.text-primary { color: var(--km-primary-600) !important; }
.border-primary { border-color: var(--km-primary-600) !important; }

/* bootstrap-select: the button looks like a custom-select */
.bootstrap-select > .dropdown-toggle {
    height: var(--km-control-height);
    padding: 5px 8px;
    font-size: var(--km-font-body);
    color: var(--km-text-primary);
    background: var(--km-bg-surface);
    border: 1px solid var(--km-gray-500);
    border-radius: var(--km-radius-sm);
}

.bootstrap-select > .dropdown-toggle:focus {
    outline: 2px solid var(--km-primary-600) !important;
    outline-offset: 0 !important;
}

/* Progress (guide v1.2): track gray-100; bar primary-600, because it carries a white label (primary-400 fails 4.5:1) */
.progress {
    height: 20px;
    font-size: var(--km-font-caption);
    background-color: var(--km-gray-100);
    border-radius: var(--km-radius-sm);
}

.progress-bar {
    color: #FFFFFF;
    background-color: var(--km-primary-600);
}

/* ---------------------------------------------------------------- 4. km components */

/* Skip link (§8.3) */
.km-skip-link {
    position: absolute;
    left: var(--km-space-2);
    top: -40px;
    z-index: 2000;
    padding: 6px 12px;
    color: #FFFFFF;
    background: var(--km-primary-700);
    border-radius: var(--km-radius-sm);
}

.km-skip-link:focus {
    top: var(--km-space-2);
    color: #FFFFFF;
}

/* App bar (§4.2) */
.km-appbar.navbar {
    min-height: 48px;
    padding: 0 var(--km-space-6);
    background: var(--km-bg-appbar) !important;
}

.km-appbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--km-space-2);
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
}

.km-appbar .km-appbar-badge {
    padding: 2px 6px;
    font-size: var(--km-font-micro);
    font-weight: 700;
    color: var(--km-primary-700);
    background: #FFFFFF;
    border-radius: var(--km-radius-sm);
}

.km-appbar .navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 var(--km-space-3);
    font-size: var(--km-font-body);
    color: rgba(255, 255, 255, .80);
    border-bottom: 2px solid transparent;
}

.km-appbar .navbar-nav .nav-link:hover {
    color: #FFFFFF;
}

.km-appbar .navbar-nav .nav-link.active {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

.km-appbar :focus-visible {
    outline-color: #FFFFFF;
}

.km-appbar-user {
    display: flex;
    align-items: center;
    gap: var(--km-space-3);
    margin-left: auto;
    font-size: var(--km-font-small);
    color: rgba(255, 255, 255, .80);
}

.km-appbar-user b {
    color: #FFFFFF;
    font-weight: 600;
}

.km-appbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .5);
}

/* Page header (§4.2, §4.3) */
.km-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--km-space-5);
    row-gap: var(--km-space-2);
    margin: calc(-1 * var(--km-space-4)) calc(-1 * var(--km-space-6)) var(--km-space-4);
    padding: var(--km-space-3) var(--km-space-6);
    background: var(--km-bg-surface);
    border-bottom: var(--km-border);
}

.km-page-header h1 {
    margin: 0;
    font-size: var(--km-font-h1);
    line-height: 28px;
    font-weight: 600;
    text-transform: none;
}

/* Back link and title on their own lines; the meta line flows as text (badges stay inline) */
.km-page-header-title {
    display: block;
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
}

.km-page-header-title > .km-back-link,
.km-page-header-title > h1 {
    display: block;
}

.km-page-header-meta {
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
}

.km-back-link {
    font-size: var(--km-font-small);
    color: var(--km-text-link);
    text-decoration: none;
}

.km-back-link:hover {
    color: var(--km-primary-700);
    text-decoration: underline;
}

/* Period control (§5.11) */
.km-period-nav {
    display: inline-flex;
    align-items: stretch;
    height: var(--km-control-height);
    background: var(--km-bg-surface);
    border: 1px solid var(--km-gray-500);
    border-radius: var(--km-radius-sm);
    overflow: hidden;
}

.km-period-nav a,
.km-period-nav .km-period-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--km-space-3);
    font-size: var(--km-font-body);
    color: var(--km-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.km-period-nav a:hover {
    background: var(--km-gray-100);
    color: var(--km-text-primary);
}

.km-period-nav .km-period-label {
    min-width: 110px;
    font-weight: 600;
    border-left: 1px solid var(--km-gray-300);
    border-right: 1px solid var(--km-gray-300);
}

.km-period-nav a.km-period-today {
    min-width: 90px;
    font-weight: 600;
    color: var(--km-primary-600);
    border-left: 1px solid var(--km-gray-300);
    border-right: 1px solid var(--km-gray-300);
}

/* Command bar (§4.3) */
.km-commandbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--km-space-2);
}

/* Module pages sit in the layout's container-fluid (15 px padding, the Bootstrap gutter), not in the 24 px content padding:
   the header bleeds only to the container edge, so it never sticks out past the screen */
.km-page-header.km-page-header--module {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Module pages: the actions go right of the title (planning pages order their toolbar in planning.css) */
.km-page-header:not(.planning-toolbar) > .km-commandbar:last-child {
    margin-left: auto;
}

.km-commandbar-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--km-space-2);
}

.km-commandbar-divider {
    width: 1px;
    align-self: stretch;
    min-height: 20px;
    margin: 0 var(--km-space-1);
    background: var(--km-gray-300);
}

/* Station picker */
.km-station-picker {
    display: inline-flex;
    align-items: center;
    gap: var(--km-space-2);
    margin: 0;
}

.km-station-picker label {
    margin: 0;
    font-weight: 400;
    color: var(--km-text-secondary);
}

/* Buttons that Bootstrap 4.6 doesn't have (§5.1) */
.btn-km-secondary {
    color: var(--km-gray-900);
    background: var(--km-bg-surface);
    border: 1px solid var(--km-gray-500);
}

.btn-km-secondary:hover,
.btn-km-secondary:focus {
    color: var(--km-gray-900);
    background: var(--km-gray-100);
}

.btn-km-secondary:not(:disabled):not(.disabled):active,
.btn-km-secondary.active,
.show > .btn-km-secondary.dropdown-toggle,
details[open] > summary.btn-km-secondary {
    color: var(--km-primary-700);
    background: var(--km-primary-50);
    border-color: var(--km-primary-600);
}

.btn-km-secondary:disabled,
.btn-km-secondary.disabled {
    color: var(--km-gray-400);
    background: var(--km-gray-100);
    border-color: var(--km-gray-300);
    opacity: 1;
}

.btn-km-subtle {
    color: var(--km-gray-700);
    background: transparent;
    border: 1px solid transparent;
}

.btn-km-subtle:hover,
.btn-km-subtle:focus {
    color: var(--km-gray-900);
    background: var(--km-gray-100);
}

.btn-km-subtle.active {
    color: var(--km-primary-700);
    background: var(--km-primary-50);
}

.btn-km-danger-subtle {
    color: var(--km-danger-700);
    background: transparent;
    border: 1px solid transparent;
}

.btn-km-danger-subtle:hover,
.btn-km-danger-subtle:focus {
    color: var(--km-danger-700);
    background: var(--km-danger-50);
}

.btn-km-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--km-control-height);
    padding-left: 0;
    padding-right: 0;
}

.btn-km-icon.btn-sm {
    min-width: var(--km-control-height-sm);
}

.btn svg.svg-inline--fa {
    margin-right: 6px;
}

.btn-km-icon svg.svg-inline--fa {
    margin-right: 0;
}

summary.btn {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

summary.btn::-webkit-details-marker {
    display: none;
}

/* Segmented control (§11.2) */
.km-segmented {
    display: inline-flex;
    border: 1px solid var(--km-gray-500);
    border-radius: var(--km-radius-sm);
    overflow: hidden;
}

.km-segmented > button,
.km-segmented > label {
    flex: 1;
    min-height: var(--km-control-height-sm);
    margin: 0;
    padding: 3px 10px;
    font-size: var(--km-font-small);
    font-weight: 600;
    color: var(--km-gray-700);
    background: var(--km-bg-surface);
    border: none;
    border-left: 1px solid var(--km-gray-300);
}

.km-segmented > :first-child {
    border-left: none;
}

.km-segmented > .active,
.km-segmented > .selected-action {
    color: var(--km-primary-700);
    background: var(--km-primary-50);
    box-shadow: inset 0 0 0 1px var(--km-primary-600);
}

/* Alerts (§5.8) */
.km-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--km-space-2);
    margin-bottom: var(--km-space-2);
    padding: 10px 12px;
    font-size: var(--km-font-small);
    color: var(--km-text-primary);
    background: var(--km-info-50);
    border: 1px solid var(--km-info-300);
    border-left: 3px solid var(--km-info-700);
    border-radius: var(--km-radius-md);
}

.km-alert::before {
    flex: none;
    width: 16px;
    font-weight: 700;
    text-align: center;
}

.km-alert-info {
    background: var(--km-info-50);
    border-color: var(--km-info-300);
    border-left-color: var(--km-info-700);
}

.km-alert-info::before { content: "i"; color: var(--km-info-700); font-family: Georgia, serif; font-style: italic; }

.km-alert-success {
    background: var(--km-success-50);
    border-color: var(--km-success-300);
    border-left-color: var(--km-success-700);
}

.km-alert-success::before { content: "✓"; color: var(--km-success-700); }

.km-alert-warning {
    background: var(--km-warning-50);
    border-color: var(--km-warning-300);
    border-left-color: var(--km-warning-800);
}

.km-alert-warning::before { content: "!"; color: var(--km-warning-800); }

.km-alert-danger {
    background: var(--km-danger-50);
    border-color: var(--km-danger-300);
    border-left-color: var(--km-danger-700);
}

.km-alert-danger::before { content: "✕"; color: var(--km-danger-700); }

.km-alert[hidden] {
    display: none !important;
}

/* Badges (§5.9) */
.km-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--km-font-micro);
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    border-radius: var(--km-radius-sm);
    background: var(--km-gray-100);
    color: var(--km-gray-700);
}

.km-badge-neutral { background: var(--km-gray-100); color: var(--km-gray-700); }
.km-badge-primary { background: var(--km-primary-100); color: var(--km-primary-700); }
.km-badge-success { background: var(--km-success-100); color: var(--km-success-700); }
.km-badge-warning { background: var(--km-warning-100); color: var(--km-warning-800); }
.km-badge-danger { background: var(--km-danger-100); color: var(--km-danger-700); }
.km-badge-info { background: var(--km-info-100); color: var(--km-info-700); }
.km-badge-accent { background: var(--km-accent-100); color: var(--km-accent-700); }

.km-badge-count {
    min-width: 20px;
    justify-content: center;
    border-radius: 10px;
    color: #FFFFFF;
    background: var(--km-primary-600);
}

/* Cards (§5.5) */
.km-card {
    background: var(--km-bg-surface);
    border: var(--km-border);
    border-radius: var(--km-radius-md);
    padding: var(--km-space-4);
}

.km-card > h2:first-child,
.km-card-title {
    margin: 0 0 var(--km-space-1);
    font-size: var(--km-font-h2);
    font-weight: 600;
}

.km-form-card {
    max-width: 960px;
}

.km-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--km-space-4);
}

/* Sticky save bar (§4.3) */
.km-savebar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--km-space-2);
    margin-top: var(--km-space-4);
    padding: var(--km-space-3) var(--km-space-4);
    background: var(--km-bg-surface);
    border: var(--km-border);
    border-radius: var(--km-radius-md);
    box-shadow: 0 -2px 8px rgba(27, 33, 41, .06);
}

.km-savebar > .km-savebar-spacer {
    flex: 1;
}

/* Tables (§5.4) */
.km-table-wrap {
    position: relative;
    overflow: auto;
    background: var(--km-bg-surface);
    border: var(--km-border);
    border-radius: var(--km-radius-md);
}

.km-table {
    width: 100%;
    margin: 0;
    font-size: var(--km-font-small);
    font-variant-numeric: tabular-nums;
    background: var(--km-bg-surface);
    border-collapse: separate;
    border-spacing: 0;
}

.km-table th,
.km-table td {
    padding: 8px 12px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid var(--km-gray-200);
}

.km-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-weight: 600;
    color: var(--km-gray-700);
    text-align: left;
    white-space: nowrap;
    background: var(--km-bg-surface-subtle);
    border-bottom: 1px solid var(--km-gray-300);
}

.km-table tbody tr:hover > td {
    background: var(--km-primary-50);
}

.km-table-compact th,
.km-table-compact td {
    padding: 4px 8px;
    font-size: var(--km-font-caption);
}

.km-table .km-col-num {
    text-align: right;
}

.km-table .km-row-group > td,
.km-table .km-row-group > th {
    font-weight: 600;
    background: var(--km-bg-sunken);
    border-top: 1px solid var(--km-gray-300);
}

.km-table .km-row-total > td {
    font-weight: 600;
    border-top: 2px solid var(--km-gray-300);
}

.km-table .km-row-readonly > td {
    color: var(--km-gray-700);
    background: var(--km-bg-surface-subtle);
}

.km-negative {
    color: var(--km-danger-700);
    font-weight: 600;
}

/* Filter bar and chips (§5.12) */
.km-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--km-space-3);
    margin-bottom: var(--km-space-3);
    padding: var(--km-space-2) var(--km-space-3);
    background: var(--km-bg-surface);
    border: var(--km-border);
    border-radius: var(--km-radius-md);
}

/* Search field in the filter bar (§5.12, guide v1.2): 240 px */
.km-filter-bar .km-search {
    width: 240px;
}

.km-filter-bar .km-filter-count {
    margin-left: auto;
    font-size: var(--km-font-caption);
    color: var(--km-text-secondary);
}

.km-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    font-size: var(--km-font-caption);
    background: var(--km-gray-100);
    border-radius: 12px;
}

/* Empty state */
.km-empty {
    padding: var(--km-space-6);
    text-align: center;
    color: var(--km-text-secondary);
    background: var(--km-bg-sunken);
    border-radius: var(--km-radius-md);
}

/* Legend */
.km-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--km-space-3);
    font-size: var(--km-font-caption);
}

.km-legend > span {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--km-gray-300);
    border-radius: var(--km-radius-sm);
}

/* Toasts (§5.13) */
.km-toast-stack {
    position: fixed;
    right: var(--km-space-6);
    bottom: var(--km-space-6);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--km-space-2);
    width: 360px;
    max-width: calc(100vw - 32px);
}

.km-toast {
    display: flex;
    gap: var(--km-space-2);
    padding: var(--km-space-3);
    font-size: var(--km-font-small);
    background: var(--km-bg-surface);
    border: var(--km-border);
    border-left: 3px solid var(--km-info-700);
    border-radius: var(--km-radius-lg);
    box-shadow: var(--km-shadow-3);
}

.km-toast-success { border-left-color: var(--km-success-700); }
.km-toast-danger { border-left-color: var(--km-danger-700); }
.km-toast-info { border-left-color: var(--km-info-700); }

.km-toast-body {
    flex: 1;
}

.km-toast-title {
    display: block;
    font-weight: 600;
}

/* Loading slot / spinner */
.km-loading-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--km-space-2);
    min-height: 64px;
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
    background: var(--km-bg-sunken);
    border-radius: var(--km-radius-md);
}

/* Overline (§3.3) */
.km-overline {
    font-size: var(--km-font-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--km-gray-600);
}

/* The first heading of module pages (Werkkledij, Personeel, Export, …): one title size whatever h-level they use */
.km-page-title {
    margin: var(--km-space-2) 0;
    font-size: var(--km-font-h1);
    font-weight: 600;
    line-height: 1.3;
    color: var(--km-text-primary);
}

.km-page-title .fas,
.km-page-title .far,
.km-page-title svg {
    margin-right: var(--km-space-2);
    color: var(--km-primary-600);
}

/* DataTables (Opleidingen, Werkkledij, Personeel): length, search and paging in the theme */
.dataTables_wrapper {
    font-size: var(--km-font-body);
    /* a wide table scrolls inside its frame instead of making the page wider than the screen (v1.5);
       positioned, so absolute children (sr-only labels, sort icons) stay inside the frame too */
    position: relative;
    overflow-x: auto;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    margin-bottom: var(--km-space-2);
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: var(--km-control-height-sm);
    padding: 0 var(--km-space-2);
    margin: 0 var(--km-space-1);
    font-size: var(--km-font-small);
    color: var(--km-text-primary);
    background-color: var(--km-bg-surface);
    border: 1px solid var(--km-gray-500);
    border-radius: var(--km-radius-sm);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: 2px solid var(--km-primary-600);
    outline-offset: 0;
    border-color: var(--km-primary-600);
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    gap: var(--km-space-1);
    margin-top: var(--km-space-2);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    min-width: var(--km-control-height-sm);
    height: var(--km-control-height-sm);
    padding: 0 var(--km-space-2);
    font-size: var(--km-font-small);
    color: var(--km-primary-700);
    background: var(--km-bg-surface);
    border: 1px solid var(--km-gray-300);
    border-radius: var(--km-radius-sm);
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    text-decoration: none;
    background: var(--km-gray-100);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    font-weight: 600;
    color: var(--km-text-on-primary, #fff);
    background: var(--km-primary-600);
    border-color: var(--km-primary-600);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--km-gray-500);
    background: var(--km-gray-50);
    cursor: default;
}

/* Login and change password: a centred card of 400 px (§7.1) */
.km-login {
    display: flex;
    justify-content: center;
    padding: var(--km-space-12) var(--km-space-4);
}

.km-login-card {
    width: 100%;
    max-width: 400px;
    padding: var(--km-space-8);
    box-shadow: var(--km-shadow-2);
}

.km-login-card h1 {
    margin-bottom: var(--km-space-6);
    font-size: var(--km-font-h1);
}

/* Module navigation (Opleidingen, Werkkledij): tabs on top, or a side list */
.km-module-nav.km-tabs {
    flex-wrap: wrap;
}

.km-sidenav .nav-link,
.km-sidenav > li > a,
.km-sidenav a {
    display: flex;
    align-items: center;
    gap: var(--km-space-2);
    padding: 6px var(--km-space-3);
    color: var(--km-text-primary);
    border-left: 3px solid transparent;
    border-radius: 0 var(--km-radius-sm) var(--km-radius-sm) 0;
}

.km-sidenav a:hover {
    text-decoration: none;
    background: var(--km-gray-100);
}

.km-sidenav a.active {
    font-weight: 600;
    color: var(--km-primary-700);
    background: var(--km-primary-50);
    border-left-color: var(--km-primary-600);
}

.km-sidenav .badge {
    margin-left: auto;
}

/* The side navigation as its own column next to the content (Werkkledij): fixed width, never wider */
.km-module-side {
    flex: 0 0 240px;
    max-width: 240px;
    padding-top: var(--km-space-2);
}

.km-module-side .km-sidenav a {
    white-space: normal;
}

.km-module-side .km-sidenav svg.svg-inline--fa {
    flex: 0 0 16px;
    color: var(--km-gray-600);
}

.km-module-side .km-sidenav a.active svg.svg-inline--fa {
    color: var(--km-primary-600);
}

/* A group label inside a side navigation ("NIEUW") */
.km-sidenav-group {
    margin-top: var(--km-space-4);
    padding: var(--km-space-1) var(--km-space-3);
}

/* Title row of a module page (§4.3): the title left, the site picker and page actions right */
.km-module-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-space-2) var(--km-space-4);
    margin: var(--km-space-2) 0 var(--km-space-4);
}

.km-module-title .km-page-title {
    margin: 0;
}

/* A section title inside the content (h2 16 px, §3.2) */
.km-section-title {
    margin: var(--km-space-4) 0 var(--km-space-2);
    font-size: var(--km-font-h2);
    font-weight: 600;
    line-height: 22px;
    color: var(--km-text-primary);
}

/* A sub-section title (h3 14 px, §3.2) */
.km-section-title.km-h3 {
    font-size: var(--km-font-h3);
    line-height: 20px;
}

/* A product line in an order form: checkbox and name left, size and amount right */
.km-check-row {
    padding: var(--km-space-1) 0;
    border-bottom: var(--km-border);
}

/* A label/value table inside a card: the label column as a row header, secondary text, no wrap */
.km-table th.km-th-row {
    width: 40%;
    font-weight: 400;
    color: var(--km-text-secondary);
    background: transparent;
    border-bottom: var(--km-border);
}

/* A group header cell spanning a table (§2.8 group row): gray-100, 600 */
.km-table thead th.km-th-group {
    font-weight: 600;
    color: var(--km-text-primary);
    background: var(--km-gray-100);
    border-top: var(--km-border-strong);
}

/* A label/value list (dialogs, summaries): two columns, label secondary */
.km-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--km-space-1) var(--km-space-4);
    font-size: var(--km-font-small);
}

.km-dl dt {
    font-weight: 400;
    color: var(--km-text-secondary);
}

.km-dl dd {
    margin: 0;
}

/* Two label/value pairs per line on wide screens (person summary) */
@media (min-width: 992px) {
    .km-dl.km-dl-2col {
        grid-template-columns: max-content 1fr max-content 1fr;
    }
}

/* A person's photo next to their summary: 100 px high */
.km-person-photo img {
    height: 100px;
    border-radius: var(--km-radius-md);
}

/* Input widths of §4.6: long text 100% up to 480 px, dates 160 px */
.km-input-long {
    width: 100%;
    max-width: 480px;
}

.km-input-date {
    width: 160px;
}

.km-input-num {
    width: var(--km-input-num-width);
}

/* An amount in euro: the "€" prefix plus room for 0000,00 */
.km-input-money {
    width: 140px;
    flex-wrap: nowrap;
}

/* A table row that was just saved (e.g. a delivery booked): success-50 */
.km-table tr.km-row-success > td {
    background: var(--km-success-50);
}

/* A table or block next to form cards keeps the form width (960 px, §4.4); reading pages too */
.km-form-width,
.km-reading {
    max-width: 960px;
}

/* A small form card with a single choice (pick a person): 480 px */
.km-card-narrow {
    max-width: 480px;
}

/* A table frame whose rows have "⋯" menus: no overflow clipping, so the menu can open past the frame (only for tables that fit the width) */
.km-table-wrap.km-table-wrap--menus {
    overflow: visible;
}

/* A table inside a card that scrolls sideways instead of pushing the card wider than the screen */
.km-table-scroll {
    position: relative;
    overflow-x: auto;
}

/* The 200 px select of a station/site picker (§5.11) */
.km-select-200 {
    width: 200px;
}

/* An alert as a full-width band inside a card (no frame of its own besides the status border) */
.km-alert-flush {
    margin: 0;
    border-width: 1px 0;
    border-left-width: 3px;
    border-radius: 0;
}

/* Werkkledij legacy: a button or link that looks like a link (was an inline <style> in every view, with #4060aa) */
.hyperlinklook {
    padding: 0 !important;
    color: var(--km-text-link);
    text-decoration: underline;
    background: none !important;
    border: none;
    cursor: pointer;
}

.hyperlinklook:hover {
    color: var(--km-primary-700);
}

/* Werkkledij legacy: a modal as wide as its table, but never wider than the screen (the table scrolls inside) */
.modal-dialog.modal-fullscreen {
    width: fit-content;
    max-width: calc(100vw - 2 * var(--km-space-4));
    margin-left: auto;
    margin-right: auto;
}

.modal-dialog.modal-fullscreen .modal-body {
    overflow-x: auto;
}

/* Flexible Bootstrap 4.6 columns may shrink below their content (v1.5): without this a wide table inside a
   scrolling frame still widens its .col and with it the page */
.col,
.col-sm,
.col-md,
.col-lg,
.col-xl {
    min-width: 0;
}

/* The content column next to .km-module-side takes the rest and may shrink (wide tables scroll inside it) */
.km-module-side + [class*="col"] {
    flex: 1 1 0;
    max-width: 100%;
    min-width: 0;
}

/* The hidden attribute always wins (v1.7): Bootstrap's display utilities (.d-flex, .d-inline-flex, …) are !important
   and come after [hidden] in bootstrap.css, so without this an element with both stays visible. Scripts toggle .hidden. */
.d-none[hidden],
.d-inline[hidden],
.d-inline-block[hidden],
.d-block[hidden],
.d-flex[hidden],
.d-inline-flex[hidden],
.d-table[hidden],
.d-table-cell[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------- 5. Utilities */
.km-tabular { font-variant-numeric: tabular-nums; }
.km-text-secondary { color: var(--km-text-secondary) !important; }
.km-gap-1 { gap: var(--km-space-1); }
.km-gap-2 { gap: var(--km-space-2); }
.km-gap-3 { gap: var(--km-space-3); }
.km-gap-4 { gap: var(--km-space-4); }
.km-gap-6 { gap: var(--km-space-6); }

/* Footer (Footer view component) */
footer,
.footer {
    font-size: var(--km-font-caption);
    color: var(--km-text-secondary);
}

/* ---------------------------------------------------------------- Responsive (§7) */
/* Wide overviews say on a phone that they are made for a large screen (km-ui.js inserts the alert) */
.km-wide-hint {
    display: none;
}

/* Laptop: the app bar stays on one line (links do not wrap, the "ingelogd als" label goes) */
@media (min-width: 992px) {
    .km-appbar .nav-link,
    .km-appbar-user {
        white-space: nowrap;
    }
}

@media (min-width: 992px) and (max-width: 1299.98px) {
    .km-appbar-user-label {
        display: none;
    }

    .km-appbar .navbar-nav .nav-link {
        padding-left: var(--km-space-2);
        padding-right: var(--km-space-2);
    }
}

/* Tablet and smaller: the planning cell menu is a bottom sheet instead of a popover next to the cell */
@media (max-width: 991.98px) {
    #planningMenu {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto;
        max-height: 70vh;
        border-radius: var(--km-radius-lg) var(--km-radius-lg) 0 0;
        box-shadow: var(--km-shadow-3);
    }

    #planningMenu .menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Phone: read-only first. Larger touch targets, no print buttons, only the page header stays sticky */
@media (max-width: 767.98px) {
    .km-wide-hint {
        display: flex;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn,
    .form-control,
    .custom-select,
    .km-period-nav a,
    .km-period-nav .km-period-label {
        min-height: 40px;
    }

    .km-period-nav a,
    .km-period-nav .km-period-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .km-print-btn {
        display: none !important;
    }

    .km-page-header {
        margin-left: calc(-1 * var(--km-space-4));
        margin-right: calc(-1 * var(--km-space-4));
        padding-left: var(--km-space-4);
        padding-right: var(--km-space-4);
    }

    .km-page-header:not(.planning-toolbar) > .km-commandbar:last-child {
        margin-left: 0;
    }

    .km-login {
        padding-top: var(--km-space-6);
    }

    .km-login-card {
        padding: var(--km-space-6) var(--km-space-4);
    }

    #planningMenu .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #planningMenu .planning-option {
        min-height: 40px;
    }
}

/* ---------------------------------------------------------------- Print: no app chrome */
@media print {
    .km-appbar,
    .km-skip-link,
    .km-toast-stack,
    .km-savebar,
    .km-filter-bar,
    footer,
    .footer {
        display: none !important;
    }

    body {
        background: #FFFFFF;
    }

    main[role="main"] {
        padding: 0;
    }
}