/* ==========================================================================
   Planningstool – gedeelde stylesheet (bovenop Bootstrap 4)

   Eén vaste kleurenset, afgeleid van collectief-onderhoud.nl:
   - neutraal is de standaard (wit, grijs, donkere tekst);
   - paars is de merkkleur: primaire actie en actief menu-item;
   - rood / groen / geel alleen waar ze iets betekenen (gevaar, succes, waarschuwing).
   Gebruik in templates de variabelen hieronder in plaats van losse kleurcodes.
   ========================================================================== */

:root {
    /* Merk */
    --brand: #833683;
    --brand-light: #984e98;
    --brand-dark: #5f2466;
    --brand-tint: #f3ebf3;

    /* Neutraal */
    --sidebar-bg: #232226;
    --bg: #f3f2f4;
    --surface: #ffffff;
    --surface-alt: #faf9fa;
    --border: #e2dfe4;
    --text: #212529;
    --text-muted: #6f6a73;

    /* Betekenis */
    --success: #1f8a4c;
    --success-tint: #e4f3ea;
    --danger: #c8323f;
    --danger-tint: #fbe8ea;
    --warning: #e0a100;
    --warning-tint: #fdf3d3;
    --warning-text: #6b4e00;

    /* Stand van een route of afspraak (Routes: week- en maandweergave) */
    --state-accept: var(--warning);   /* voorstel van de planner, door ons te accepteren */
    --state-waiting: #b88ab8;         /* verstuurd, wacht op de klant */
    --state-ready: var(--success);    /* klant akkoord, kan worden vastgelegd */
    --state-fixed: var(--brand);      /* vastgelegd */
    --state-cobs: #a9a5ad;            /* in COBS zelf gepland: niets te doen */
    --travel: #aebcd0;                /* reistijd in een routebalk */
    --roster-edge: #c4bfc9;           /* rand van het rooster in een routebalk */
    --cobs-tint: #e4e2e7;             /* vlak voor een dag of week met alleen zulke routes */

    /* Meldingenkaart: alle meldingen samen (gepland is --success, niet gepland --danger) */
    --map-all: #2f6db5;

    --radius: 8px;
    --shadow: 0 1px 2px rgba(33, 37, 41, 0.06), 0 2px 8px rgba(33, 37, 41, 0.04);

    /* Oude namen, nog in gebruik in pagina-specifieke stijlen */
    --brand-purple: var(--brand-light);
    --brand-purple-light: #b88ab8;
    --brand-purple-dark: var(--brand);
    --brand-purple-subtle: var(--brand-tint);
    --gray-light: var(--surface-alt);
    --gray-medium: var(--text-muted);
    --gray-dark: #495057;
    --gray-border: var(--border);
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
}

/* === Basis ============================================================== */

body {
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--brand) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--brand) !important; }

code { color: var(--brand-dark); }

/* === Layout: zijbalk, kopbalk, inhoud =================================== */

.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.sidebar {
    width: 240px;
    background-color: var(--sidebar-bg);
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.sidebar-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-brand,
.sidebar-brand:hover {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.sidebar-user {
    padding: 1rem 1.5rem 0.5rem;
    color: #fff;
}

.sidebar-user .user-name {
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
}

.sidebar-user small { color: rgba(255, 255, 255, 0.6); }

.sidebar-menu {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
}

.menu-section {
    padding: 0.5rem 1.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    margin-top: 1rem;
}

.nav-link-custom {
    display: flex;
    align-items: center;
    padding: 0.65rem 1.5rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
    transition: background-color 0.15s;
}

.nav-link-custom:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}

.nav-link-custom.active {
    background-color: var(--brand);
    border-left-color: var(--brand-light);
    color: #fff;
    font-weight: 600;
}

.nav-link-custom i {
    width: 20px;
    margin-right: 0.75rem;
    font-size: 1rem;
    text-align: center;
}

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
}

.sidebar-footer a,
.sidebar-footer a:hover {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    display: block;
    margin-bottom: 0.25rem;
}

.sidebar-footer a:hover { color: #fff; }

.sidebar-footer .app-meta {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    margin-top: 0.5rem;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    min-width: 0;
    background-color: var(--bg);
}

.top-header {
    padding: 0.85rem 2rem;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 900;
}

/* Niet-productie: gele streep + label, zodat staging/development onmiskenbaar blijft */
.top-header.env-non-prod { border-top: 4px solid var(--warning); }

.env-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    background-color: var(--warning-tint);
    color: var(--warning-text);
    border: 1px solid var(--warning);
}

.page-title {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--brand-dark);
}

.page-title i {
    margin-right: 0.75rem;
    color: var(--brand);
}

.content-area {
    padding: 1.5rem 2rem 2rem;
    background-color: var(--bg);
    flex: 1;
    overflow-y: auto;
}

/* === Knoppen ============================================================ */

.btn {
    border-radius: 6px;
    font-weight: 500;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:disabled {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* 'info' is geen aparte kleur: informatieve acties zijn neutraal/merk */
.btn-info,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--brand-light);
    border-color: var(--brand-light);
    color: #fff;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-outline-info { color: var(--brand); border-color: var(--brand-light); }
.btn-outline-info:hover { background-color: var(--brand-light); border-color: var(--brand-light); color: #fff; }

.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-success:hover, .btn-success:focus { background-color: #187040; border-color: #187040; }
.btn-outline-success { color: var(--success); border-color: var(--success); }
.btn-outline-success:hover { background-color: var(--success); border-color: var(--success); color: #fff; }

.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:focus { background-color: #a82833; border-color: #a82833; }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { background-color: var(--danger); border-color: var(--danger); color: #fff; }

.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #2b2100; }

.btn-secondary { background-color: #6f6a73; border-color: #6f6a73; }
.btn-outline-secondary { color: #55505a; border-color: #c9c5cc; }
.btn-outline-secondary:hover { background-color: #55505a; border-color: #55505a; color: #fff; }

.btn:focus, .btn.focus,
.form-control:focus, .custom-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(131, 54, 131, 0.2);
}

.form-control:focus, .custom-select:focus { border-color: var(--brand-light); }

/* === Kaarten ============================================================ */

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; }

/* Alleen voor echt gevaarlijke blokken (bijv. data verwijderen) */
.card-danger { border-color: var(--danger); }
.card-danger > .card-header {
    background-color: var(--danger-tint);
    color: var(--danger);
    border-bottom-color: var(--danger);
}

/* === Badges: zachte tinten, kleur = betekenis =========================== */

.badge {
    font-weight: 600;
    border-radius: 4px;
    padding: 0.3em 0.55em;
}

.badge-primary { background-color: var(--brand); color: #fff; }
.badge-info { background-color: var(--brand-tint); color: var(--brand-dark); }
.badge-secondary { background-color: #e9e7ea; color: #45414a; }
.badge-light { background-color: var(--surface-alt); color: #45414a; border: 1px solid var(--border); }
.badge-dark { background-color: #45414a; color: #fff; }
.badge-success { background-color: var(--success-tint); color: #14602f; }
.badge-danger { background-color: var(--danger-tint); color: #9a1f2b; }
.badge-warning { background-color: var(--warning-tint); color: var(--warning-text); }

/* === Meldingen (alerts) ================================================= */

.alert { border-radius: var(--radius); border-width: 1px; }
.alert-info, .alert-primary { background-color: var(--brand-tint); border-color: #e3d0e3; color: var(--brand-dark); }
.alert-success { background-color: var(--success-tint); border-color: #c3e4d0; color: #14602f; }
.alert-danger { background-color: var(--danger-tint); border-color: #f1c4c9; color: #9a1f2b; }
.alert-warning { background-color: var(--warning-tint); border-color: #f1dc9a; color: var(--warning-text); }
.alert-secondary, .alert-light { background-color: var(--surface-alt); border-color: var(--border); color: var(--text); }

/* === Tabellen =========================================================== */

table { margin-top: 20px; }
th, td { text-align: left; padding: 8px; }
tr:nth-child(even) { background-color: var(--surface-alt); }

.table thead th,
.table .thead-dark th,
.table .thead-light th {
    background-color: var(--surface-alt);
    color: var(--text-muted);
    border-color: var(--border);
    border-bottom-width: 1px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}

.table td, .table th { border-color: var(--border); }
.table-hover tbody tr:hover { background-color: var(--brand-tint); }

/* === Overige Bootstrap-onderdelen ======================================= */

.progress { border-radius: 6px; background-color: #e9e7ea; }
.progress-bar { background-color: var(--brand); }
.progress-bar.bg-danger { background-color: var(--danger) !important; }
.progress-bar.bg-success { background-color: var(--success) !important; }

.list-group-item { border-color: var(--border); }
.list-group-item.active {
    background-color: var(--brand-tint);
    border-color: var(--border);
    color: var(--brand-dark);
    font-weight: 600;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand);
    border-color: var(--brand);
}

.bg-primary { background-color: var(--brand) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-info { background-color: var(--brand-light) !important; }
.border-primary { border-color: var(--brand) !important; }
.border-info { border-color: var(--border) !important; }
.border-success { border-color: var(--success) !important; }
.border-danger { border-color: var(--danger) !important; }

.modal-content { border: none; border-radius: var(--radius); }

/* === Hulpklassen die Bootstrap 4 niet heeft ============================= */

.gap-2 { gap: 0.5rem; }
.font-weight-semibold { font-weight: 600 !important; }
.border-left-thick { border-left: 3px solid var(--border); }
.border-left-thick.border-danger { border-left-color: var(--danger); }
.border-left-thick.border-warning { border-left-color: var(--warning); }

/* === Route-weergave ===================================================== */

.route-card {
    border-left: 4px solid var(--brand-light);
    margin-bottom: 20px;
}
.route-card .card-header { background-color: var(--surface); font-weight: 600; }
.route-card .card-body h6 { color: var(--brand); }

.time-box {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
    margin: 2px 0;
    background-color: var(--surface-alt);
    color: var(--gray-dark);
    border: 1px solid var(--border);
    display: inline-block;
}
.total-time-box {
    background-color: var(--brand-tint);
    color: var(--brand-dark);
    border-color: #e3d0e3;
    font-weight: 600;
}
.roster-time-box.text-muted { background-color: var(--surface-alt); }

.route-step { padding: 5px 0; border-bottom: 1px dashed var(--border); }
.route-step:last-child { border-bottom: none; }

.client-item {
    background-color: var(--surface-alt);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 5px;
}

/* === Kalender (routes en rooster) ======================================= */

.calendar-index { z-index: 1020; }

.calendar-index .card {
    height: 500px;
    display: flex;
    flex-direction: column;
}

.calendar-index .card-header {
    background-color: var(--surface);
    color: var(--brand-dark);
    font-weight: 600;
    flex-shrink: 0;
}

.calendar-index .card-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.calendar-month { margin-bottom: 1rem; }

.calendar-month h6 {
    color: var(--brand);
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.25rem;
}

.calendar-table {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
    margin-top: 0;
}

.calendar-table th {
    background-color: var(--surface-alt);
    font-weight: 600;
    text-align: center;
    padding: 0.25rem 2px;
    border: 1px solid var(--border);
    font-size: 0.7rem;
}

.calendar-table td {
    border: 1px solid var(--border);
    width: 14.28%;
    height: 35px;
    vertical-align: top;
    text-align: center;
    padding: 2px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease;
    background-color: var(--surface);
}

.calendar-table td:hover { background-color: var(--brand-tint); }

.calendar-table td.has-routes {
    background-color: var(--brand-tint);
    border-color: #d9bfd9;
}

.calendar-table td.has-routes:hover { background-color: #e6d3e6; }

/* Alleen routes die in COBS zelf zijn gepland: grijs, er is voor ons niets te doen */
.calendar-table td.cobs-only {
    background-color: var(--cobs-tint);
    border-color: #cdc9d1;
}

.calendar-table td.cobs-only:hover { background-color: #d6d3da; }
.calendar-table td.cobs-only .route-count-text { color: var(--text-muted); }

/* Vandaag: een rand binnen de cel, ook als de dag geselecteerd is */
.calendar-table td.today { box-shadow: inset 0 0 0 2px var(--brand); }
.calendar-table td.today.active { box-shadow: inset 0 0 0 2px #fff; }

.calendar-table td.empty,
.calendar-table td.empty:hover {
    background-color: var(--surface-alt);
    cursor: default;
}

.calendar-table td.active {
    background-color: var(--brand) !important;
    border-color: var(--brand-dark) !important;
    color: #fff !important;
}

.day-number {
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1.2;
}

/* Aantal routes op de dag, klein onder het dagnummer */
.route-count-text {
    font-size: 0.6rem;
    color: var(--brand);
    font-weight: 500;
    line-height: 1;
    margin-top: 1px;
}

/* Het aantal openstaande afspraken staat in de tooltip; in de cel volstaat de stip */
.calendar-index .route-count { display: none; }

.calendar-table td.active .day-number,
.calendar-table td.active .route-count-text { color: #fff; }

/* Stip rechtsboven: openstaande afspraken */
.calendar-table td.has-pending .pending-indicator {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    background-color: var(--warning);
    border-radius: 50%;
}

/* Stip linksboven: geweigerde afspraken */
.calendar-table td.has-rejected .rejected-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    background-color: var(--danger);
    border-radius: 50%;
}

.calendar-table td.active.has-rejected .rejected-indicator { background-color: #ffb3ba; }

/* === Kleinere schermen ================================================== */

@media (max-width: 1200px) {
    .sidebar { width: 200px; }
    .content-area { padding: 1rem; }
    .top-header { padding: 0.75rem 1rem; }
}

/* Uitgeschakelde knoppen houden de eigen kleur (Bootstrap valt anders terug op blauw) */
.btn-outline-primary:disabled, .btn-outline-primary.disabled { color: var(--brand); border-color: var(--brand); }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--brand); border-color: var(--brand); }

/* === Meldingen rechtsboven (notify) en bevestigingsvenster (confirmDialog) === */

.notification-area {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(420px, calc(100vw - 2rem));
    pointer-events: none;
}

.notification {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(33, 37, 41, 0.16);
    animation: notification-in 0.18s ease-out;
}

.notification > i { font-size: 1.1rem; line-height: 1.4; color: var(--brand); }
.notification-success { border-left-color: var(--success); }
.notification-success > i { color: var(--success); }
.notification-danger { border-left-color: var(--danger); }
.notification-danger > i { color: var(--danger); }
.notification-warning { border-left-color: var(--warning); }
.notification-warning > i { color: var(--warning); }

.notification-text {
    flex: 1;
    font-size: 0.92rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.notification-close {
    border: none;
    background: none;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-muted);
}
.notification-close:hover { color: var(--text); }
.notification > .btn { flex-shrink: 0; align-self: center; }

@keyframes notification-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.confirm-dialog .modal-body { padding: 1.5rem 1.5rem 0.75rem; }
.confirm-dialog .confirm-title { font-weight: 600; margin-bottom: 0.5rem; }
.confirm-dialog .confirm-message { white-space: pre-line; color: var(--gray-dark); margin-bottom: 0.75rem; }
.confirm-dialog .modal-footer { border-top: none; padding: 0.5rem 1.5rem 1.25rem; }

/* === Meldingpaneel: afgewezen data (declinedDatesSection in app.js) ====== */
.declined-dates .mp-kv .k { white-space: nowrap; }
.declined-dates .mp-kv .v { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.declined-date {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px 1px 8px;
    background-color: var(--danger-tint);
    border-radius: 999px;
    font-size: 0.8rem;
    white-space: nowrap;
}
.declined-date button {
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--danger);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.declined-date button:disabled { opacity: 0.4; cursor: default; }
.declined-date-add { display: flex; gap: 6px; margin-top: 4px; }
.declined-date-add input { flex: 1; min-width: 0; }
.declined-date-add .btn { white-space: nowrap; }

/* === Paginering === */
.page-link { color: var(--brand); border-color: var(--border); }
.page-link:hover { color: var(--brand-dark); background-color: var(--brand-tint); border-color: var(--border); }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.page-item.disabled .page-link { color: var(--text-muted); border-color: var(--border); }

/* === Pagina's met kalender links (routes, rooster, lege dag kiezen) =====
   Kalender heeft een vaste breedte; de rest krijgt de overige ruimte. Op smallere
   schermen schuift de kaart onder de routes in plaats van alles samen te persen. */
.calendar-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.calendar-layout-map { grid-template-columns: 240px minmax(0, 1fr) minmax(280px, 30%); }
.calendar-layout > [class*="col-"] {
    max-width: none;
    width: auto;
    padding: 0;
    min-width: 0;
}
@media (max-width: 1300px) {
    .calendar-layout-map { grid-template-columns: 240px minmax(0, 1fr); }
    .calendar-layout-map > [class*="col-"]:nth-child(3) { grid-column: 1 / -1; }
}

/* Kalender en kaart blijven in beeld terwijl de routes scrollen. De kolom zelf plakt, niet een
   element erin: een kolom is hier precies zo hoog als zijn inhoud (align-items: start), dus
   daarbinnen is geen ruimte om te blijven plakken. De kolom is zo hoog als het zichtbare deel
   van de pagina (--content-height, gezet door app.js), zodat hij er altijd helemaal in past. */
.calendar-layout > .sticky-column {
    position: sticky;
    top: 0;
    /* zichtbare hoogte min de boven- en ondermarge van .content-area */
    height: calc(var(--content-height, 100vh - 4.5rem) - 3.5rem);
    min-height: 420px;
}
.sticky-column > .calendar-index,
.sticky-column > .map-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sticky-column .calendar-card,
.sticky-column .map-panel > .card {
    flex: 1;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sticky-column .map-panel .card-body { flex: 0 0 auto; }   /* de legenda: niet meegroeien */
.sticky-column .map-panel .map-body { flex: 1 1 0; min-height: 0; }
.route-map-frame { display: block; width: 100%; height: 100%; border: none; }
@media (max-width: 1300px) {
    /* De kaart staat hier onder de routes en scrolt gewoon mee */
    .calendar-layout > .sticky-column.map-column { position: static; height: 600px; }
}

.route-card-header { flex-wrap: wrap; gap: 0.5rem; }
.route-card-header .btn { white-space: nowrap; }

/* === Stappen-schermen (herplannen) ====================================== */

.flow-page { max-width: 1100px; }

.flow-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    counter-reset: flow;
    padding: 0;
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.flow-steps li { counter-increment: flow; display: flex; align-items: center; }
.flow-steps li::before {
    content: counter(flow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: var(--surface);
    font-size: 0.8rem;
    font-weight: 600;
}
.flow-steps li.active { color: var(--brand-dark); font-weight: 600; }
.flow-steps li.active::before { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.flow-steps li.done::before { content: "✓"; background-color: var(--success-tint); border-color: var(--success-tint); color: var(--success); }

.reschedule-table td { vertical-align: middle; }
.reschedule-table tbody tr:nth-child(even) { background-color: transparent; }
.card-footer { background-color: var(--surface-alt); border-top: 1px solid var(--border); }

/* Legenda bij kalenders: een blokje in de echte kleur in plaats van een kleurnaam */
.legend-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    border: 1px solid var(--border);
    vertical-align: -1px;
    margin-right: 0.35rem;
}

.btn-link { color: var(--brand); }
.btn-link:hover { color: var(--brand-dark); }

/* === Startpagina ======================================================== */

.section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.task-card {
    display: block;
    height: 100%;
    padding: 1rem 1.25rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
    transition: box-shadow 0.15s, transform 0.15s;
}
.task-card:hover { color: var(--text); text-decoration: none; box-shadow: 0 4px 16px rgba(33, 37, 41, 0.12); transform: translateY(-1px); }
.task-card-brand { border-top-color: var(--brand); }
.task-card-danger { border-top-color: var(--danger); }
.task-card-warning { border-top-color: var(--warning); }
.task-card-empty, .task-card-empty:hover { box-shadow: none; transform: none; cursor: default; }
.task-card-empty .task-count { color: var(--text-muted); }
.task-count { font-size: 2rem; font-weight: 600; line-height: 1.1; }
.task-title { font-weight: 600; margin-top: 0.25rem; }
.task-hint { font-size: 0.82rem; color: var(--text-muted); }

.change-summary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding-bottom: 1rem; }
.change-figure { color: var(--text-muted); font-size: 0.9rem; }
.change-figure span { font-size: 1.35rem; font-weight: 600; color: var(--text); margin-right: 0.25rem; }

.event-list .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.92rem;
}
.event-main { flex: 1; min-width: 0; }
.event-time, .event-melding { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background-color: #c9c5cc; }
.event-customer_accepted, .event-completed { background-color: var(--success); }
.event-customer_declined, .event-customer_cancelled, .event-customer_refused { background-color: var(--danger); }
.event-proposal_sent { background-color: var(--brand-light); }
.event-internal_reschedule, .event-cobs_change { background-color: var(--warning); }

.upcoming-day, .upcoming-day:hover { color: var(--text); text-decoration: none; }
.system-list dt { font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.system-list dd { margin-bottom: 0.75rem; }
.system-list dd:last-child { margin-bottom: 0; }

/* === Statistieken ======================================================= */

.stat-figure {
    height: 100%;
    padding: 1rem 1.25rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.stat-value { font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.stat-label { font-weight: 600; margin-top: 0.25rem; }
.stat-hint { font-size: 0.82rem; color: var(--text-muted); }

.bar-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.bar-label { width: 9.5rem; flex-shrink: 0; color: var(--gray-dark); }
.bar-track { flex: 1; display: flex; height: 1.1rem; background-color: var(--bg); border-radius: 4px; overflow: hidden; }
.bar { height: 100%; }
.bar-success { background-color: var(--success); }
.bar-danger { background-color: var(--danger); }
.bar-brand { background-color: var(--brand-light); }
.bar-value { width: 5rem; flex-shrink: 0; text-align: right; font-weight: 600; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 0.75rem; font-size: 0.82rem; color: var(--text-muted); }

.stats-table { margin-top: 0; }
.stats-table td, .stats-table th { padding: 0.5rem 1.25rem; }

/* === Meldingenkaart ===================================================== */
.melding-map {
    height: calc(100vh - 290px);
    min-height: 420px;
    isolation: isolate;   /* de lagen van de kaart blijven onder menu's en vensters */
    border-radius: 0 0 var(--radius) var(--radius);
}
/* Grijze ondergrond, zodat de stippen opvallen. Per tegel, niet op de laag eromheen: een filter op
   de laag knipt in Chrome tegels weg zodra de kaart beweegt (grijze randen, kleur die doorkomt).
   Het lichter maken doet Leaflet zelf (opacity van de tegellaag in melding_map.js). */
.melding-map .leaflet-tile { filter: grayscale(1); }
.melding-map-dot { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.35rem; border-radius: 50%; }
.melding-map-dot.all { background-color: var(--map-all); }
.melding-map-dot.planned { background-color: var(--success); }
.melding-map-dot.unplanned { background-color: var(--danger); }
.melding-map-dot.home { background-color: #212529; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #adb5bd; }

/* === COBS-data (Beheer) ================================================== */

.cobs-toolbar { gap: 0.5rem 0.75rem; }
.cobs-setup { font-size: 0.85rem; color: var(--text-muted); }
.cobs-setup dl, .cobs-headers dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 1rem; }
.cobs-setup dt, .cobs-headers dt { font-weight: 600; }
.cobs-setup dd, .cobs-headers dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.cobs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.cobs-meta-url { flex-basis: 100%; overflow-wrap: anywhere; }
.cobs-meta-item { padding: 0.1rem 0.6rem; border-radius: 999px; background-color: var(--bg); font-size: 0.85rem; font-weight: 600; }
.cobs-meta-label { margin-right: 0.35rem; font-weight: 400; color: var(--text-muted); }
.cobs-meta-ok { background-color: var(--success-tint); color: var(--success); }
.cobs-meta-bad { background-color: var(--danger-tint); color: var(--danger); }
.cobs-headers { margin-top: 0.5rem; font-size: 0.82rem; }
.cobs-headers summary { color: var(--text-muted); cursor: pointer; }
.cobs-headers dl { margin-top: 0.4rem; }

.cobs-json, .cobs-grid-wrap {
    max-height: 65vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--surface);
}
.cobs-json { margin: 0; padding: 0.75rem 1rem; font-size: 0.8rem; }

/* Een eenvoudig rekenblad: vaste koprij en vaste eerste kolom, scrollen in beide richtingen */
.cobs-grid { margin: 0; border-collapse: separate; border-spacing: 0; font-size: 0.82rem; }
.cobs-grid th, .cobs-grid td {
    max-width: 22rem;
    padding: 0.2rem 0.6rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cobs-grid th { position: sticky; background-color: var(--surface-alt); font-weight: 600; }
.cobs-grid thead th { top: 0; z-index: 2; cursor: pointer; }
.cobs-grid thead th:hover { color: var(--brand); }
.cobs-grid th:first-child { left: 0; z-index: 1; color: var(--text-muted); font-weight: 400; text-align: right; cursor: default; }
.cobs-grid thead th:first-child { z-index: 3; }
.cobs-grid tbody tr:hover td { background-color: var(--brand-tint); }
.cobs-grid .cobs-number { text-align: right; }
.cobs-grid .cobs-null { color: var(--text-muted); font-style: italic; }
.cobs-grid .cobs-missing { background-color: var(--bg); }

.cobs-bars .bar-label { width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobs-bars .bar-value { width: 8rem; }
.bar-rest { background-color: var(--state-cobs); }

/* === Voortgangsvenster (progress_dialog.js) ============================= */

.progress-dialog .progress-status { color: var(--gray-dark); margin-bottom: 0.75rem; }
.progress-dialog .progress { height: 10px; }
.progress-dialog .progress-count { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; min-height: 1.3em; }
.progress-dialog .progress-failures {
    max-height: 200px;
    overflow-y: auto;
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

/* === Routes: schakelaar Dag / Week / Maand in de kopbalk ================ */

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.view-switch .btn { min-width: 4.25rem; }

/* === Routes: week- en maandweergave ===================================== */

.ov-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.ov-period { font-size: 1.15rem; font-weight: 600; margin: 0; }
.ov-period small { font-size: 0.9rem; font-weight: 400; color: var(--text-muted); margin-left: 0.5rem; }
.ov-filter { margin-left: auto; }
.ov-filter .monteur-filter-menu { left: auto; right: 0; }

/* Monteurfilter (dag, week, maand): een knop met een menu van vinkjes; paars zodra er gefilterd wordt */
.monteur-filter { max-width: 100%; }
.monteur-filter > .monteur-filter-toggle { display: flex; align-items: center; gap: 0.4rem; min-width: 11rem; text-align: left; overflow: hidden; }
.monteur-filter > .monteur-filter-toggle.btn-outline-secondary:not(:hover) { background-color: var(--surface); }
.monteur-filter.show > .monteur-filter-toggle.btn-primary { background-color: var(--brand-dark); border-color: var(--brand-dark); }
.monteur-filter-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monteur-filter > .monteur-filter-reset { flex: 0 0 auto; }   /* het kruisje blijft smal, de naam krijgt de ruimte */
.monteur-filter-menu { min-width: max(100%, 15rem); max-height: 22rem; overflow-y: auto; padding: 0.35rem 0 0; font-size: 0.875rem; }
.monteur-filter-option { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.3rem 0.85rem; white-space: nowrap; cursor: pointer; }
.monteur-filter-option:hover { background-color: var(--brand-tint); }
.monteur-filter-option .ov-dot { margin-right: 0; }
.monteur-filter-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.35rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--surface-alt);
    border-top: 1px solid var(--border);
    white-space: nowrap;
}
.monteur-filter-slot { flex-shrink: 0; margin-bottom: 0.5rem; }
.monteur-filter-slot .monteur-filter { display: flex; }
.monteur-filter-slot .monteur-filter > .monteur-filter-toggle { flex: 1 1 auto; min-width: 0; }
.monteur-filter-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    padding: 0.45rem 0.75rem;
    background-color: var(--brand-tint);
    border: 1px solid #d9bfd9;
    border-radius: var(--radius);
    color: var(--brand-dark);
    font-size: 0.875rem;
}
.monteur-filter-note span { flex: 1; min-width: 0; }
.monteur-filter-note .btn { flex-shrink: 0; background-color: var(--surface); }

/* Instellingen per monteur (templates/_monteur_config.html): één regel per monteur met kleur, naam, postcode en stand */
.monteur-view {
    display: grid;
    grid-template-columns: 14px minmax(180px, 2fr) minmax(110px, 1fr) minmax(130px, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}
.monteur-color { width: 14px; height: 14px; border-radius: 50%; }
.monteur-name { font-weight: 600; }
.monteur-name small { font-weight: 400; margin-left: 0.25rem; }

/* Week: de strook met weeknummers. Wit is leeg, grijs alleen via COBS, paars eigen routes; de stippen zeggen wat er te doen is */
.ov-weeks { display: flex; gap: 4px; margin-bottom: 1rem; overflow-x: auto; padding: 2px; }
.ov-week {
    position: relative;
    flex: 1 0 3.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.3rem 0.25rem 0.35rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    line-height: 1.2;
}
.ov-week:hover { color: var(--brand-dark); text-decoration: none; border-color: var(--brand-light); box-shadow: var(--shadow); }
.ov-week-number { font-size: 0.95rem; font-weight: 600; }
.ov-week-date { font-size: 0.68rem; white-space: nowrap; }
.ov-week-cobs { background-color: var(--cobs-tint); border-color: #cdc9d1; color: #45414a; }
.ov-week-ours { background-color: var(--brand-tint); border-color: #d9bfd9; color: var(--brand-dark); }
.ov-week-current { box-shadow: 0 0 0 2px var(--brand); border-color: var(--brand); }
.ov-week-current .ov-week-date { font-weight: 600; }
.ov-week-selected, .ov-week-selected:hover { background-color: var(--brand); border-color: var(--brand-dark); color: #fff; }
.ov-week-current.ov-week-selected { box-shadow: 0 0 0 2px var(--brand-dark); }
.ov-week-dots { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; }
.ov-week-dots i { width: 6px; height: 6px; border-radius: 50%; }
.ov-week-selected .ov-week-dots i { box-shadow: 0 0 0 1px #fff; }

.ov-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ov-figures .stat-value small { font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.ov-figures .stat-hint { margin-top: 0.35rem; }
.ov-figures .ov-statebar { margin: 0.5rem 0 0.4rem; }
@media (max-width: 1300px) { .ov-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kleur per stand: voor een balkdeel, een legendablokje en het blokje voor een getal */
.ov-seg { height: 100%; min-width: 0; }
.ov-seg-accept, .ov-seg-draft { background-color: var(--state-accept); }
.ov-seg-waiting { background-color: var(--state-waiting); }
.ov-seg-ready, .ov-seg-agreed { background-color: var(--state-ready); }
.ov-seg-fixed { background-color: var(--state-fixed); }
.ov-seg-cobs { background-color: var(--state-cobs); }
.ov-seg-travel { background-color: var(--travel); }
/* The drive out before the roster starts; in a bar its right edge is the start of the roster */
.ov-seg-outside { background: repeating-linear-gradient(45deg, var(--travel), var(--travel) 3px, transparent 3px, transparent 6px); }
.ov-seg-danger { background-color: var(--danger); }
.ov-key { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; }
.ov-key-free { background-color: var(--surface); border: 1px solid var(--roster-edge); }
.ov-num { white-space: nowrap; }

/* Verdeling van routes over de standen: één balk, elk deel zo breed als het aantal routes */
.ov-statebar { display: flex; gap: 1px; height: 8px; border-radius: 4px; overflow: hidden; background-color: var(--bg); }

.ov-todo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.ov-todo-title { font-weight: 600; }
.ov-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8rem; color: var(--text-muted); }

/* Week: een blok per dag, daarin een regel per route */
.ov-day {
    margin-bottom: 1rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.ov-day-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    min-height: 2.9rem;
    padding: 0.5rem 1rem;
    background-color: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}
.ov-day-title { font-weight: 600; color: var(--brand-dark); }
.ov-day-figures { font-size: 0.85rem; color: var(--text-muted); }
.ov-day-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ov-day-empty { box-shadow: none; }
.ov-day-empty .ov-day-head { border-bottom: none; }
.ov-day-empty .ov-day-title { color: var(--text-muted); font-weight: 500; }
.ov-day.ov-today { border-color: var(--brand-light); }

.ov-route, .ov-axis-row {
    display: grid;
    grid-template-columns: 11rem 10.5rem minmax(8rem, 2fr) minmax(0, 1fr) 9.5rem;
    grid-template-areas: "name state bar figures action";
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 0.5rem 1rem;
}
.ov-route { border-bottom: 1px dashed var(--border); }
.ov-route:last-child { border-bottom: none; }
.ov-route:hover { background-color: var(--surface-alt); }
.ov-route-name { grid-area: name; display: flex; align-items: center; min-width: 0; font-weight: 600; color: var(--text); }
.ov-route-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-route-state { grid-area: state; }
.ov-route-figures { grid-area: figures; display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; font-size: 0.82rem; color: var(--gray-dark); }
.ov-route-action { grid-area: action; text-align: right; font-size: 0.8rem; color: var(--text-muted); }
.ov-route-action .btn { white-space: nowrap; }
.ov-state-cobs .ov-route-name { font-weight: 500; color: var(--gray-dark); }
@media (max-width: 1500px) {
    .ov-route, .ov-axis-row {
        grid-template-columns: 11rem 10.5rem minmax(0, 1fr) 9.5rem;
        grid-template-areas: "name state bar action" "name figures figures figures";
    }
    .ov-axis-row { grid-template-areas: "name state bar action"; }
}

.ov-dot {
    width: 12px;
    height: 12px;
    margin-right: 0.5rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--border);
    flex-shrink: 0;
}

.ov-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.ov-chip-accept { background-color: var(--warning-tint); color: var(--warning-text); }
.ov-chip-waiting { background-color: var(--brand-tint); color: var(--brand-dark); }
.ov-chip-ready { background-color: var(--success-tint); color: #14602f; }
.ov-chip-fixed { background-color: var(--brand); color: #fff; }
.ov-chip-cobs { background-color: #e9e7ea; color: #45414a; }

/* De dag van de monteur op de tijdsas van de week: het witte vak is het rooster, daarin reistijd
   en afspraken; wat wit blijft is vrij. De lijn loopt door over de hele as. */
.ov-bar { grid-area: bar; position: relative; height: 16px; }
.ov-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--roster-edge); }
.ov-bar-roster {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: var(--surface);
    border: 1px solid var(--roster-edge);
    border-radius: 3px;
}
.ov-bar-over .ov-bar-roster { border-color: var(--danger); }
/* Een streepje per uur, ook door het vrije deel van het rooster */
.ov-bar-hours {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    right: 0;
    background-image: linear-gradient(to right, var(--border) 1px, transparent 1px);
    background-size: calc(100% / var(--ov-hours, 1)) 100%;
    pointer-events: none;
}
.ov-bar-steps { position: absolute; top: 1px; bottom: 1px; left: 0; right: 0; display: flex; pointer-events: none; }
.ov-bar-steps .ov-seg { pointer-events: auto; }
.ov-bar-lead { flex-shrink: 0; }
.ov-bar .ov-seg:not(.ov-seg-travel) { box-shadow: inset 1px 0 0 #fff, inset -1px 0 0 #fff; }
.ov-bar .ov-seg.ov-seg-outside { box-shadow: inset -2px 0 0 var(--text); }

/* De uren boven de balken van een dag */
.ov-axis-row { padding-top: 0.3rem; padding-bottom: 0; }
.ov-axis { grid-area: bar; position: relative; height: 0.9rem; font-size: 0.68rem; line-height: 0.9rem; color: var(--text-muted); }
.ov-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ov-axis span:first-child { transform: none; }
.ov-axis span.ov-axis-end { transform: translateX(-100%); }

/* Maand: een kalender met per dag de verdeling van de routes en wat er nog moet gebeuren */
.ov-month { display: grid; grid-template-columns: 2.25rem repeat(5, minmax(0, 1fr)); gap: 6px; }
.ov-month.ov-month-weekend { grid-template-columns: 2.25rem repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, 0.65fr)); }
.ov-month-head {
    padding: 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    color: var(--text-muted);
}
.ov-wk {
    display: flex;
    justify-content: center;
    padding-top: 0.55rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}
a.ov-wk:hover { background-color: var(--brand-tint); color: var(--brand-dark); text-decoration: none; }
.ov-wk.ov-wk-current { color: var(--brand); font-weight: 700; }
.ov-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 3.5rem;   /* een week zonder routes blijft laag; een cel met routes groeit met de inhoud */
    padding: 0.5rem 0.6rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}
.ov-cell:hover { border-color: var(--brand-light); box-shadow: var(--shadow); }
.ov-cell.ov-empty { background-color: var(--surface-alt); }
.ov-cell.ov-cell-cobs { background-color: var(--cobs-tint); }
.ov-cell.ov-outside { opacity: 0.5; }
.ov-cell.ov-today, .ov-cell.ov-today:hover { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.ov-cell-top { display: flex; align-items: baseline; gap: 0.4rem; }
.ov-cell-date, .ov-cell-date:hover { font-weight: 600; color: var(--text); text-decoration: none; }
.ov-cell-date::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }   /* de hele cel opent de dag */
.ov-today .ov-cell-date { padding: 0 0.45rem; border-radius: 999px; background-color: var(--brand); color: #fff; }
.ov-cell-today { font-size: 0.72rem; font-weight: 600; color: var(--brand); }
.ov-cell-routes { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); }

/* Eén regel per route, zoals afspraken in een agenda: de monteur en een balk in de kleur van de stand */
.ov-cell-list { display: flex; flex-direction: column; gap: 2px; }
.ov-cell-route {
    position: relative;   /* boven de link van de cel */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 -0.25rem;
    padding: 1px 0.25rem;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text);
}
.ov-cell-route:hover { background-color: rgba(131, 54, 131, 0.12); color: var(--brand-dark); text-decoration: none; }
.ov-cell-route-name { flex: 0 0 42%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-mix { flex: 1; display: flex; gap: 1px; height: 10px; min-width: 0; border-radius: 3px; overflow: hidden; background-color: var(--bg); }
.ov-cell-lines { display: flex; flex-direction: column; gap: 1px; font-size: 0.78rem; }
.ov-cell-lines .ov-num { white-space: normal; }   /* de weekendkolommen zijn smal */
.ov-cell-foot { margin-top: auto; font-size: 0.72rem; color: var(--text-muted); }