/* CandyControl - Main Stylesheet */
/* Brand color: #ee008c (Candybox pink) */


:root {
    --cc-pink: #ee008c;
    --cc-pink-hover: #d4007d;
    --cc-pink-light: #fce4f1;
    --cc-dark: #2c2c2c;
    --cc-sidebar-bg: #1e1e2d;
    --cc-sidebar-text: #a2a3b7;
    --cc-sidebar-active: #ee008c;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* All buttons pill-shaped */
.btn,
.k-button {
    border-radius: 50px !important;
}

/* Links and buttons */
a, .btn-link {
    color: var(--cc-pink);
}

a:hover {
    color: var(--cc-pink-hover);
}

.btn-primary,
.btn-cc {
    color: #fff;
    background-color: var(--cc-pink);
    border-color: var(--cc-pink);
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
}

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

/* Blazor unhandled-error UI: nette CandyControl-restart melding i.p.v. de standaard gele balk.
   Blazor zet zelf inline display:block zodra er een onverwerkte fout optreedt. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1100;
    padding: 1.1rem 1.25rem;
    background: var(--cc-dark);
    color: #fff;
    text-align: center;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
    font-size: 1rem;
}

    #blazor-error-ui .error-ui-text {
        display: block;
        margin-bottom: 0.85rem;
        font-weight: 600;
    }

    #blazor-error-ui .reload {
        display: inline-block;
        background: var(--cc-pink);
        color: #fff;
        text-decoration: none;
        padding: 0.65rem 2rem;
        min-height: 48px;
        line-height: 1.7;
        border-radius: 50px;
        font-weight: 600;
        box-sizing: border-box;
    }

        #blazor-error-ui .reload:hover,
        #blazor-error-ui .reload:focus {
            background: var(--cc-pink-hover);
            color: #fff;
        }

    #blazor-error-ui .dismiss {
        position: absolute;
        top: 0.5rem;
        right: 0.9rem;
        cursor: pointer;
        font-size: 1.15rem;
        color: #fff;
    }

/* Rolchips bij gebruiker bewerken: ingewezen rollen met X om te verwijderen. */
.role-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 40px;
    align-items: center;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--cc-pink);
    color: #fff;
    border-radius: 50px;
    padding: 0.25rem 0.4rem 0.25rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.role-chip-remove {
    border: none;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 18px;
    font-size: 1rem;
    padding: 0;
    cursor: pointer;
}

.role-chip-remove:hover {
    background: rgba(255, 255, 255, 0.45);
}

.btn-outline-cc {
    color: var(--cc-pink);
    border-color: var(--cc-pink);
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
}

/* Compactere variant voor grid-actions, zodat de pill in de rij past. */
.btn-outline-cc.btn-sm {
    padding: 0.15rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.2;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--cc-pink);
}

/* ========== SIDEBAR LAYOUT ========== */
.page {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 230px;
    min-height: 100vh;
    background-color: var(--cc-sidebar-bg);
    color: var(--cc-sidebar-text);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 0.7rem 0.8rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-brand img {
    max-width: 150px;
    height: auto;
}

.sidebar-nav {
    flex: 1;
    padding: 0.3rem 0;
}

.sidebar-nav .nav-section {
    padding: 0.5rem 1rem 0.15rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
}

.sidebar-nav .nav-item {
    padding: 0;
}

.sidebar-nav .nav-link {
    color: var(--cc-sidebar-text);
    padding: 0.35rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.sidebar-nav .nav-link:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.05);
}

.sidebar-nav .nav-link.active {
    color: #fff;
    background-color: rgba(238,0,140,0.15);
    border-left-color: var(--cc-pink);
}

.sidebar-nav .nav-link .nav-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

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

.sidebar-footer a {
    color: var(--cc-sidebar-text);
    text-decoration: none;
}

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

/* Main content area */
.main-content {
    margin-left: 230px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.top-bar {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 0.7rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

/* Account menu dropdown */
.account-menu {
    position: relative;
}

.account-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid #e9ecef;
    border-radius: 50px;
    padding: 0.3rem 0.8rem 0.3rem 0.3rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85rem;
    color: var(--cc-dark);
}

.account-menu-toggle:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--cc-pink);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.account-name {
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-chevron {
    font-size: 0.7rem;
    color: #6c757d;
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    min-width: 240px;
    z-index: 1100;
    overflow: hidden;
}

.account-dropdown-header {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
}

.account-dropdown-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cc-dark);
}

.account-dropdown-role {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.1rem;
}

.account-dropdown-divider {
    height: 1px;
    background: #e9ecef;
}

.account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    color: var(--cc-dark);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background-color 0.1s ease;
}

.account-dropdown-item:hover {
    background-color: #f8f9fa;
    color: var(--cc-dark);
}

.account-dropdown-icon {
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
}

.account-dropdown-logout {
    color: #dc3545;
}

.account-dropdown-logout:hover {
    background-color: #fff5f5;
    color: #dc3545;
}

.content {
    padding: 1.5rem;
    flex: 1;
}

/* ========== ACCOUNT LAYOUT ========== */
.account-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cc-pink-light) 0%, #fff 100%);
}

.account-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}

.account-card .account-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.account-card .account-logo img {
    max-width: 200px;
    height: auto;
}

.account-card h1 {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--cc-dark);
}

/* ========== MOBILE LAYOUT ========== */
/* Op desktop het mobile-layout tonen als een telefoon-frame: gecentreerd,
   vaste breedte, donkere achtergrond eromheen zodat admins/managers de
   buitendienst-ervaring kunnen testen zonder emulator. */
body:has(.mobile-page) {
    background: #2a2a2a;
}

.mobile-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fff;
}

@media (min-width: 768px) {
    .mobile-page {
        max-width: 430px;
        margin: 0 auto;
        min-height: 100vh;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
        position: relative;
        /* Maak het telefoonframe zelf het containing block voor de fixed
           bottom-nav (een transform op een ancestor doet dat). Zonder dit
           wordt de nav t.o.v. de viewport geplaatst en schuift hij op desktop
           links onderuit het frame. Telerik-popups/dialogs renderen buiten
           .mobile-page (op TelerikRootComponent-niveau) en blijven onaangeroerd. */
        transform: translateZ(0);
    }

    /* Field/buitendienst dialogs blijven binnen het telefoonframe op desktop */
    .k-dialog-wrapper:has(.field-dialog) .k-dialog,
    .k-window.field-dialog,
    .k-dialog.field-dialog {
        max-width: 400px !important;
        width: 400px !important;
    }
}

/* Dialogs met meerdere pil-vormige knoppen met lange NL-tekst (bv. "Doorgaan zonder opslaan")
   passen niet naast elkaar in de standaard k-actions rij (flex-flow: row nowrap; overflow: hidden),
   waardoor de knoptekst over elkaar heen loopt. Stapel de knoppen daarom verticaal. */
.k-dialog.leave-confirm-dialog .k-actions {
    flex-flow: column nowrap;
    overflow: visible;
}

.k-dialog.leave-confirm-dialog .k-actions .k-button {
    width: 100%;
    white-space: normal;
}

.mobile-header {
    background: var(--cc-pink);
    color: #fff;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-header img {
    height: 32px;
}

.mobile-content {
    flex: 1;
    padding: 1rem;
    padding-bottom: 80px;
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 2px solid #e9ecef;
    display: flex;
    z-index: 1000;
}

.mobile-bottom-nav a {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-height: 56px;
    justify-content: center;
}

.mobile-bottom-nav a.active {
    color: var(--cc-pink);
}

/* Footer-knop (verbindingstest): zelfde look als de nav-links, maar een échte <button>
   met plain onclick zodat hij zonder Blazor-circuit blijft werken. */
.mobile-bottom-nav .mobile-nav-button {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0;
    color: #6c757d;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-height: 56px;
    justify-content: center;
}

.mobile-bottom-nav a .nav-icon {
    font-size: 1.3rem;
}

/* Desktop: het telefoonframe (.mobile-page) is nu het containing block van deze
   fixed nav (zie transform daar), dus left/right: 0 spannen exact de frame-breedte.
   Reset expliciet de eerdere 50%/translateX-hack die de nav juist links onder het
   frame uit liet schuiven. */
@media (min-width: 768px) {
    .mobile-bottom-nav {
        left: 0;
        right: 0;
        transform: none;
        width: auto;
        max-width: none;
    }
}

/* Hamburger button (hidden on desktop, visible on mobile) */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
}

.hamburger-icon {
    font-size: 1.5rem;
    color: var(--cc-dark);
}

/* Sidebar close button (hidden on desktop, visible on mobile) */
.sidebar-close-btn {
    display: none;
    background: none;
    border: none;
    color: var(--cc-sidebar-text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.3rem;
    line-height: 1;
}

.sidebar-close-btn:hover {
    color: #fff;
}

/* Menu in-/uitklappen (desktop). Zelfde patroon als VSIDirigent: een chevron-knop in de
   topbar die een class op .page zet; de zijbalk krimpt naar 0 en de inhoud schuift mee.
   Width/margin animeren i.p.v. display:none, zodat het rustig oogt én de DOM intact blijft. */
.nav-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fff;
    color: var(--cc-dark);
    cursor: pointer;
    padding: 0;
}

.nav-collapse-btn:hover {
    border-color: var(--cc-pink);
    color: var(--cc-pink);
}

.sidebar,
.main-content {
    transition: width 0.15s ease, margin-left 0.15s ease;
}

/* Alleen op echte desktopbreedte: daaronder is de zijbalk al een slide-in (zie responsive). */
@media (min-width: 1201px) {
    .page.nav-collapsed .sidebar {
        width: 0;
        overflow: hidden;
    }

    .page.nav-collapsed .main-content {
        margin-left: 0;
    }
}

@media (max-width: 1200px) {
    .nav-collapse-btn {
        display: none;
    }
}

/* Top bar spacer pushes account menu to the right */
.top-bar-spacer {
    flex: 1;
}

/* Sidebar backdrop for mobile */
.sidebar-backdrop {
    display: none;
}

/* ========== RESPONSIVE ==========
   Breekpunt op 1200px zodat iPad portrait (768px), iPad landscape (1024px)
   en iPad Pro 11" (1194px) allemaal de slide-in sidebar krijgen. Pas vanaf
   echte desktop-breedte (>1200px) blijft de zijbalk vast staan. */
@media (max-width: 1200px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1100;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Voorkom dat brede Telerik-grids het pagina-niveau uit de viewport duwen.
       De grid scrollt zelf horizontaal binnen zijn container. */
    .content {
        padding: 0.75rem;
        max-width: 100%;
        overflow-x: auto;
    }

    .content .k-grid,
    .content .grid-compact {
        max-width: 100%;
    }

    .page-header {
        margin-bottom: 1rem;
    }

    .page-header h1 {
        font-size: 1.5rem;
    }

    .hamburger-btn {
        display: flex;
    }

    .sidebar-close-btn {
        display: block;
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
    }
}

/* ========== COMPACT GRID ========== */
.grid-compact {
    max-width: 100%;
}

.grid-compact .k-grid-header th,
.grid-compact .k-grid-content td,
.grid-compact .k-table-th,
.grid-compact .k-table-td {
    font-size: 0.78rem;
    padding: 0.25rem 0.35rem !important;
}

/* Allow header text to wrap so narrow columns still show full title */
.grid-compact .k-grid-header th .k-column-title,
.grid-compact .k-grid-header th .k-cell-inner > .k-link,
.grid-compact .k-table-th .k-column-title,
.grid-compact .k-table-th .k-cell-inner > .k-link {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

.grid-compact .k-grid-toolbar,
.grid-compact .k-pager {
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
}

/* ========== TELERIK SWITCH — groen wanneer aan ========== */
.k-switch-on .k-switch-track {
    background-color: #27ae60 !important;
    border-color: #27ae60 !important;
}

/* Actief switch: rood als uit, groen als aan */
.switch-active-off .k-switch-off .k-switch-track {
    background-color: #e74c3c !important;
    border-color: #e74c3c !important;
}

/* ========== UTILITY ========== */
.text-cc-pink {
    color: var(--cc-pink) !important;
}

.bg-cc-pink {
    background-color: var(--cc-pink) !important;
}

.badge-cc {
    background-color: var(--cc-pink);
    color: #fff;
    border-radius: 50px;
    padding: 0.3em 0.7em;
    font-size: 0.75rem;
}

/* Page titles */
.page-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--cc-pink-light);
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--cc-dark);
    margin: 0;
}

/* Placeholder pages */
.placeholder-page {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.placeholder-page .placeholder-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--cc-pink);
    opacity: 0.5;
}

/* ========== HUB / TILE PAGES (Operator, Beheer, Rapportages) ========== */
.hub-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.hub-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    min-height: 150px;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    color: var(--cc-dark);
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.hub-tile:hover,
.hub-tile:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(238, 0, 140, 0.15);
    border-color: var(--cc-pink);
    color: var(--cc-dark);
    text-decoration: none;
}

.hub-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--cc-pink-light);
    font-size: 1.6rem;
    line-height: 1;
}

.hub-tile-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.hub-tile-desc {
    font-size: 0.85rem;
    line-height: 1.35;
    color: #6c757d;
    margin: 0;
}

.hub-section-title {
    margin: 0.5rem 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9a9aa8;
}

/* Form styling */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ========== COMPONENT-SPECIFIC ========== */

/* Excel import: file input width constraint */
.import-file-input {
    max-width: 400px;
}

/* ── Telerik dropdown popup ────────────────────────────────────────────────
   Alleen de POPUP-lijst die opent bij click min 100px breed maken, NIET de
   trigger zelf — anders worden grid-kolommen onnodig breed.

   Telerik (Kendo theme v6+) portal-rendert de popup buiten de grid-DOM in een
   .k-animation-container. Binnen die wrapper zit .k-popup met daarop in nieuwere
   versies .k-list-content (dropdownlist) of .k-list-container (legacy varianten).
   We targetten beide + een algemene fallback op .k-popup binnen de animation
   wrapper, gemarkeerd met !important om Telerik's eigen inline width-style
   (gebaseerd op trigger-breedte) te overstemmen. */
.k-animation-container .k-popup,
.k-animation-container .k-list-content,
.k-animation-container .k-list-container,
.k-popup.k-list-content,
.k-popup.k-list-container {
    min-width: 100px !important;
}

/* Excel import: error table scrollable container */
.import-error-list {
    max-height: 300px;
    overflow-y: auto;
}

/* Excel import: row number column */
.import-error-row-col {
    width: 80px;
}

/* Admin grids: vul de hele beschikbare hoogte van het content-paneel. Aftrek dekt
   top-bar (~50px), page-header (~70px), eventuele alerts en padding (~80px).
   Op kleine schermen (<768px) zakt de grid terug naar een vaste hoogte zodat hij
   bruikbaar blijft naast de mobile bottom-nav. */
.grid-fill {
    height: calc(100vh - 200px);
    min-height: 400px;
}

/* Variant voor pagina's met een extra info-banner boven de grid (bv. de GPS-uitleg
   op /admin/locations). Trekt ~90px extra af zodat de grid binnen de viewport blijft. */
.grid-fill-with-banner {
    height: calc(100vh - 290px);
    min-height: 360px;
}

@media (max-width: 767.98px) {
    .grid-fill,
    .grid-fill-with-banner {
        height: 70vh;
    }
}

/* Automaat-cel in de rapportage-grids: soort-automaat pill + naam netjes uitgelijnd */
.machine-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ===== Vullingsoverzicht: kolom "Ingepland" =====
   Een automaat staat vaak op meerdere data ingepland (er wordt een maand vooruit gewerkt).
   De cel moet daarom kunnen afbreken en meegroeien i.p.v. één datum af te kappen.
   Bewust met beide grid-classes (specificiteit 0,3,0): onder 1200px zet .dashboard-grid
   .k-table-td verderop white-space op nowrap, en die regel staat later in dit bestand. */
.dashboard-grid.vullingsoverzicht-grid .k-table-td {
    white-space: normal;
    vertical-align: top;
}

.planned-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.planned-date {
    background: rgba(0, 123, 255, 0.1);
    border-radius: 10px;
    padding: 0.05rem 0.4rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Alleen planning in het verleden (geen komende data meer): gedempt tonen */
.planned-date-past {
    background: rgba(0, 0, 0, 0.06);
    color: #6c757d;
}

.planned-dates-empty {
    color: #6c757d;
}

/* ===== Automaat historie rapport ===== */
.history-empty {
    text-align: center;
    color: #6c757d;
    padding: 3rem 1rem;
}

.history-empty p {
    margin-top: 0.75rem;
}

.history-machine-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.history-machine-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    border-bottom: 1px solid #f1f1f4;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.history-machine-title {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.history-machine-title strong {
    font-size: 1.1rem;
}

.history-machine-sub {
    color: #6c757d;
    font-size: 0.85rem;
}

.history-summary-badges {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.history-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #eef0f2;
    color: #495057;
    white-space: nowrap;
}

.history-badge.vulling  { background: #d1e7dd; color: #0f5132; }
.history-badge.storing  { background: #f8d7da; color: #842029; }
.history-badge.gemist   { background: #fff3cd; color: #664d03; }
.history-badge.gepland  { background: #cfe9ff; color: #084298; }
.history-badge.inactief { background: #e2e3e5; color: #41464b; }
.history-badge.ok       { background: #d1e7dd; color: #0f5132; }
.history-badge.info     { background: #cff4fc; color: #055160; }

.history-no-events {
    margin: 0.25rem 0 0;
}

/* Verticale tijdlijn */
.history-timeline {
    position: relative;
    margin-left: 0.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid #e9ecef;
}

.history-event {
    position: relative;
    padding: 0.5rem 0 0.75rem;
}

.history-event-marker {
    position: absolute;
    left: -2.4rem;
    top: 0.4rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.history-event.vulling .history-event-marker { border-color: #198754; }
.history-event.storing .history-event-marker { border-color: #dc3545; }
.history-event.gemist  .history-event-marker { border-color: #ffc107; }
.history-event.gepland .history-event-marker { border-color: #0d6efd; }

.history-event-body {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.history-event-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.history-event-clickable {
    cursor: pointer;
}

.history-event-clickable:hover {
    color: #ee008c;
}

.history-event-date {
    font-weight: 600;
    color: #495057;
    min-width: 5.5rem;
}

.history-event-title {
    font-weight: 600;
}

.history-event-emp {
    color: #6c757d;
    font-size: 0.85rem;
}

.history-event-incident {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.history-flags {
    font-weight: 600;
    color: #842029;
}

.history-remarks {
    font-style: italic;
    color: #495057;
}

.history-notes {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

.history-note-meta {
    color: #6c757d;
}

.history-fill-detail {
    margin-top: 0.6rem;
}

.history-fill-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.history-fill-table th,
.history-fill-table td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid #eef0f2;
    text-align: left;
}

.history-fill-table th {
    background: #ee008c;
    color: #fff;
    font-size: 0.82rem;
}

.history-fill-table td.num,
.history-fill-table th.num {
    text-align: right;
}

.history-sales {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #495057;
    display: flex;
    gap: 1rem;
}

@media (max-width: 767.98px) {
    .history-summary-badges { margin-left: 0; }
    .history-event-date { min-width: auto; }
}

/* ProductGroups: color swatch preview */
.color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 6px;
}

/* Account pages: narrow card constraint */
.card-narrow {
    max-width: 500px;
}

/* Mobile layout: logout link size */
.mobile-logout-link {
    font-size: 0.85rem;
}

/* ========== ROUTE PLANNING ========== */

/* Medewerker kaartjes in linkerkolom */
.planning-employee-card {
    padding: 0.3rem 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.planning-employee-card:hover {
    background-color: #f8f9fa;
    border-color: var(--cc-pink);
}

.planning-employee-card.selected {
    background-color: var(--cc-pink-light);
    border-color: var(--cc-pink);
}

.planning-employee-card.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

/* Automaten grid row kleuren */
.planning-row-warning {
    background-color: rgba(255, 165, 0, 0.12) !important;
}

.planning-row-overdue {
    background-color: rgba(220, 53, 69, 0.12) !important;
}

.planning-row-planned {
    background-color: rgba(25, 135, 84, 0.08) !important;
}

/* Legenda bolletjes */
.planning-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.planning-legend-warning {
    background-color: #FFA500;
}

.planning-legend-overdue {
    background-color: #DC3545;
}

.planning-legend-planned {
    background-color: #198754;
}

/* Assignment paneel rechts */
.planning-assignments-panel {
    max-height: 550px;
    overflow-y: auto;
}

.planning-assignment-block {
    border: 1px solid #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.planning-assignment-block.planning-assignment-selected {
    border-color: var(--cc-pink);
}

.planning-assignment-header {
    background-color: #f8f9fa;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    user-select: none;
}

.planning-assignment-header:hover {
    background-color: #e9ecef;
}

/* Titel + badge nemen beschikbare ruimte; lange namen worden afgekapt */
.planning-assignment-title {
    min-width: 0;
    flex: 1 1 auto;
}

.planning-assignment-title .text-truncate {
    max-width: 100%;
}

/* Compacte iconenknoppen passen ook in een smalle col-md-2 op iPad */
.planning-assignment-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.planning-assignment-icon-btn {
    padding: 0 0.35rem;
    line-height: 1.4;
    font-size: 0.85rem;
    min-width: 1.75rem;
}

.planning-stop-item {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.82rem;
}

.planning-stop-item:last-child {
    border-bottom: none;
}

.planning-stop-draggable {
    cursor: grab;
    user-select: none;
}

.planning-stop-draggable:active {
    cursor: grabbing;
}

.planning-stop-dragover {
    background-color: #fff3cd;
    border-top: 2px solid #e83e8c;
}

.planning-stop-order {
    display: inline-block;
    min-width: 1.4rem;
    font-weight: 600;
    color: #e83e8c;
}

/* Employee map: Curacao kaart met live GPS-posities */
.employee-map-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #e9f3fb;
}

.employee-map-image {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

.employee-map-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    z-index: 2;
}

.employee-map-flag {
    font-size: 1.6rem;
    line-height: 1;
    text-shadow: 0 0 3px white, 0 0 3px white;
}

.employee-map-label {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid #e83e8c;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    margin-top: -2px;
}

.employee-map-list-item {
    padding: 0.4rem 0.25rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.82rem;
}

.employee-map-list-item:last-child {
    border-bottom: none;
}

/* GPS info box op locaties pagina */
.gps-info-box {
    background-color: #f0f7ff;
    border: 1px solid #b6d4fe;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

/* ========== FIELD / BUITENDIENST SCREENS ========== */

/* Mimic bar — shown when Admin/Manager acts as a buitendienst employee */
.field-mimic-bar {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-mimic-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #856404;
    white-space: nowrap;
}

.field-mimic-indicator {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Loading & empty states */
.field-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.field-loading p {
    margin-top: 1rem;
    font-size: 1rem;
}

.field-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.field-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--cc-pink);
    opacity: 0.5;
}

.field-empty h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

/* Back button — pill style (legacy alias) */
.field-btn-back,
.field-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--cc-pink);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    min-height: 48px;
    transition: background-color 0.15s ease;
}

.field-btn-back {
    margin-bottom: 0.75rem;
}

.field-btn-back:hover,
.field-btn-back:focus,
.field-btn-pill:hover,
.field-btn-pill:focus {
    background-color: var(--cc-pink-hover);
    color: #fff;
}

/* Top action row: Terug, Machine Info, Inspectie */
.field-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.field-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.field-top-date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.field-help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f0f7ff;
    color: #0d6efd;
    border: 1px solid #0d6efd;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.field-help-link:hover {
    background: #0d6efd;
    color: #fff;
}

.field-greeting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Greeting header */
.field-greeting h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cc-dark);
    margin: 0;
}

.field-date {
    color: #6c757d;
    font-size: 1rem;
    margin: 0.2rem 0 0;
    text-transform: capitalize;
}

/* Full route Google Maps button */
.field-route-map-btn {
    margin: 0.75rem 0;
}

.field-btn-route-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    background: #4285f4;
    color: #fff;
    border: none;
    border-radius: 10px;
    min-height: 48px;
    text-decoration: none;
}

.field-btn-route-map:hover {
    background: #3367d6;
    color: #fff;
    text-decoration: none;
}

/* Progress bar */
.field-progress {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.field-progress-text {
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.field-progress-bar {
    height: 10px;
    background: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
}

.field-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cc-pink), #ff6bb5);
    border-radius: 5px;
    transition: width 0.4s ease;
}

.field-progress-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: #495057;
    font-weight: 500;
}

/* Kantoor-meldingen op het locatiescherm.
   Bewust rood/opvallend: dit is een bericht dat de operator NIET mag missen. Was eerder
   ongestyled (= wit) waardoor het wegviel tussen de automaatkaarten. */
.field-office-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.field-office-messages-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #b02a37;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.field-office-card {
    background: #fdeced;
    border: 2px solid #dc3545;
    border-left-width: 6px;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    color: #842029;
}

/* Severity-accent: storing (danger) is standaard, vuil/leeg (warning) en aandacht (info)
   krijgen een iets zachtere randkleur maar blijven binnen het rode alarm-idioom. */
.field-office-warning {
    border-color: #e35d6a;
}

.field-office-info {
    border-color: #ea868f;
}

.field-office-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.field-office-type {
    background: #dc3545;
    color: #fff;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.field-office-machine {
    font-size: 0.85rem;
    font-weight: 600;
    color: #842029;
}

.field-office-text {
    margin: 0 0 0.75rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: #842029;
    white-space: pre-wrap;
}

.field-office-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.field-office-btn-solved {
    background: #dc3545;
    color: #fff;
}

.field-office-btn-close {
    background: #fff;
    color: #842029;
    border: 2px solid #dc3545;
}

/* Leesbevestiging-popup: zelfde rode taal als de kaart, maar dwingender. */
.field-office-dialog .k-dialog-titlebar {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.field-office-dialog .k-dialog-content {
    background: #fdeced;
}

.field-office-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field-office-dialog-msg {
    border-left: 6px solid #dc3545;
    padding-left: 0.75rem;
}

.field-office-dialog-msg-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.field-office-dialog-text {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.45;
    color: #842029;
    white-space: pre-wrap;
}

/* Shared button styles */
.field-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    min-height: 48px;
    padding: 0.6rem 1.2rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

/* Location cards */
.field-locations {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field-location-card {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    padding: 1rem;
    transition: border-color 0.2s ease;
}

.field-location-card.field-location-done {
    border-color: #198754;
    background: #f0fdf4;
}

.field-location-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.field-location-info {
    flex: 1;
}

.field-location-customer {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.field-location-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cc-dark);
    margin: 0.15rem 0;
}

.field-location-address {
    font-size: 0.9rem;
    color: #495057;
    margin: 0;
}

/* Locatie-titelrij: naam links, sleutelnummer rechts uitgelijnd op één regel. */
.field-location-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Sleutelnummer prominent in roze — operator vindt zo snel de juiste sleutel. */
.field-location-keynumber-inline {
    font-size: 0.95rem;
    color: var(--cc-pink);
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.field-location-time {
    font-size: 0.8rem;
    color: var(--cc-pink);
    font-weight: 500;
}

/* Status badges */
.field-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.field-status-done {
    background: #198754;
    color: #fff;
}

.field-status-todo {
    background: #fff3cd;
    color: #856404;
}

/* Location action buttons */
.field-location-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.field-btn-nav {
    flex: 0 0 auto;
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.field-btn-nav:hover {
    background: #e9ecef;
    color: #212529;
}

.field-btn-go {
    flex: 1;
    background: var(--cc-pink);
    color: #fff;
}

.field-btn-go:hover {
    background: var(--cc-pink-hover);
    color: #fff;
}

/* Location detail header */
.field-location-detail-header {
    margin-bottom: 0.75rem;
}

.field-location-detail-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cc-dark);
    margin: 0;
}

/* Machine cards */
.field-machines {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field-machine-card {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    padding: 1rem;
}

.field-machine-card.field-machine-done {
    border-color: #198754;
    background: #f0fdf4;
}

.field-machine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.field-machine-info {
    display: flex;
    flex-direction: column;
}

.field-machine-wil {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cc-dark);
}

.field-machine-type {
    font-size: 0.8rem;
    color: var(--cc-pink);
    font-weight: 600;
    text-transform: uppercase;
}

.field-machine-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cc-dark);
}

/* Compacte titelrij: machinenaam links, sleutel/WIL rechts uitgelijnd. */
.field-machine-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.field-machine-wil-inline {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cc-pink);
    white-space: nowrap;
    text-align: right;
}

/* Info button */
.field-btn-info {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #e8f4fd;
    color: #0d6efd;
    border: 1px solid #b6d4fe;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 40px;
    margin-bottom: 0.5rem;
}

.field-btn-info:hover {
    background: #d0e8fa;
}

/* Machine action buttons */
.field-machine-actions {
    display: flex;
    gap: 0.5rem;
}

.field-btn-fill {
    flex: 1;
    background: var(--cc-pink);
    color: #fff;
    font-size: 1.1rem;
}

.field-btn-fill:hover {
    background: var(--cc-pink-hover);
    color: #fff;
}

.field-btn-view {
    flex: 1;
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.field-btn-view:hover {
    background: #e9ecef;
    color: #212529;
}

/* Info dialog content */
.field-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field-info-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.field-info-row strong {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
}

.field-info-row span {
    font-size: 1rem;
    color: var(--cc-dark);
}

.field-info-key span {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cc-pink);
}

/* ========== FILL MACHINE SCREEN ========== */

/* Fill header */
.field-fill-header {
    background: var(--cc-pink);
    color: #fff;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.field-fill-wil {
    font-size: 1.3rem;
    font-weight: 700;
}

.field-fill-id {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.field-fill-name {
    font-size: 0.95rem;
    opacity: 0.9;
    flex: 1;
}

.field-fill-location {
    font-size: 0.95rem;
    opacity: 0.9;
    flex: 1;
}

.field-fill-date {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Inline compacte inspectie sectie boven de productenlijst.
   Status chips, 4 tellers (aantal/bedrag/cash/vaste teller), opmerkingen, foto's. */
.field-inspection-inline {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.field-inspection-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.field-flag-chip {
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    border-radius: 50px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 32px;
    cursor: pointer;
    transition: all 0.15s;
}

.field-flag-chip:hover:not(:disabled) {
    border-color: var(--cc-pink);
}

.field-flag-chip.field-flag-active {
    background: #d1e7dd;
    border-color: #0f5132;
    color: #0f5132;
}

.field-flag-chip.field-flag-active.field-flag-warning {
    background: #fff3cd;
    border-color: #997404;
    color: #664d03;
}

.field-flag-chip.field-flag-active.field-flag-danger {
    background: #f8d7da;
    border-color: #842029;
    color: #842029;
}

.field-flag-chip:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Kopje boven de tellerstanden-blok — duidelijke visuele scheiding. */
.field-counters-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    margin: 0.4rem 0 0.2rem 0;
    letter-spacing: 0.04em;
}

.field-inspection-counters {
    display: grid;
    /* Kolommen: # Stuks | Omzet XCG | Cash XCG | NSW.
       Geen 4x 1fr: '# Stuks' is een klein geheel getal, terwijl NSW een niet-resetbare
       totaalteller is die veel meer cijfers kan bevatten. Ruimte van # Stuks naar NSW
       verschoven zodat het NSW-getal niet meer wordt afgekapt. De som blijft bewust 4,
       zodat Omzet XCG en Cash XCG exact hun kwart houden. */
    grid-template-columns: 0.75fr 1fr 1fr 1.25fr;
    gap: 0.3rem;
}

.field-counter {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.field-counter label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-counter-input {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0.4rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
    min-height: 36px;
}

.field-counter-input:focus {
    outline: none;
    border-color: var(--cc-pink);
    box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.15);
}

.field-counter-input:disabled {
    background: #f8f9fa;
    color: #6c757d;
}

.field-inspection-extras {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.field-inspection-remarks {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    resize: vertical;
    min-height: 38px;
}

.field-inspection-remarks:focus {
    outline: none;
    border-color: var(--cc-pink);
    box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.15);
}

.field-inspection-photos-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.field-inspection-photo-thumbs {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.field-inspection-photo {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.field-inspection-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.field-photo-delete-mini {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    padding: 0;
    cursor: pointer;
}

.field-inspection-photo-actions .field-btn-pill-mini {
    min-height: 36px;
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
}

/* Completed banner */
.field-fill-completed-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #d1e7dd;
    color: #0f5132;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
}

/* Start section */
.field-fill-start-section {
    text-align: center;
    padding: 2rem 0;
}

.field-btn-start {
    background: var(--cc-pink);
    color: #fff;
    font-size: 1.3rem;
    padding: 1rem 2.5rem;
    border-radius: 16px;
    min-height: 64px;
}

.field-btn-start:hover {
    background: var(--cc-pink-hover);
    color: #fff;
}

/* Timer */
.field-fill-timer {
    background: #e8f4fd;
    color: #0d6efd;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/* Product group header */
/* Type filter toggles */
.field-type-filter {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}

.field-type-btn {
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    border: 2px solid #dee2e6;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    min-height: 40px;
    cursor: pointer;
    transition: all 0.15s;
}

.field-type-btn.active {
    background: var(--cc-primary, #e91e8c);
    border-color: var(--cc-primary, #e91e8c);
    color: #fff;
}

/* Products container met alfabet sidebar */
.field-products-container {
    display: flex;
    position: relative;
}

.field-products-list {
    flex: 1;
    min-width: 0;
    padding-right: 28px;
}

/* Alfabet snelzoek sidebar — kleine ronde roze knopjes met witte letters,
   ruimere verticale tussenruimte zodat ze beter aan te tikken zijn. */
.field-alpha-sidebar {
    position: sticky;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28px;
    padding: 0.25rem 0;
    gap: 6px;
    z-index: 10;
    align-self: flex-start;
}

.field-alpha-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: var(--cc-pink);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    touch-action: manipulation;
    box-shadow: 0 1px 2px rgba(238, 0, 140, 0.25);
}

.field-alpha-btn:hover,
.field-alpha-btn:active {
    background: var(--cc-pink-hover);
    color: #fff;
}

/* Klein zwevend knopje rechtsonder om direct naar de Afronden-knop te springen
   zonder de hele productenlijst door te scrollen. */
.field-scroll-bottom-btn {
    position: fixed;
    right: 16px;
    bottom: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--cc-pink);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.field-scroll-bottom-btn:hover,
.field-scroll-bottom-btn:active {
    background: var(--cc-pink-hover);
    color: #fff;
}

/* Desktop: het knopje is position:fixed en zou anders tegen de rechter
   viewport-rand plakken i.p.v. binnen het gecentreerde telefoonframe (430px).
   Frame-rechterrand ligt op 50% + 215px; 16px daarbinnen = calc(50% - 199px). */
@media (min-width: 768px) {
    .field-scroll-bottom-btn {
        right: calc(50% - 199px);
    }
}

.field-product-group-header {
    background: #f8f9fa;
    border-left: 4px solid #6c757d;
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cc-dark);
    margin: 1rem 0 0.25rem;
    border-radius: 0 8px 8px 0;
}

/* Product row */
.field-product-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

/* Productnaam + Totaal in één regel; Totaal rechts uitgelijnd, padding-right
   aan de products-list voorkomt overlap met de alpha-sidebar. */
.field-product-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.field-product-name {
    font-size: 1.075rem;
    font-weight: 600;
    color: var(--cc-dark);
    flex: 1 1 auto;
    min-width: 0;
}

.field-product-abbr {
    font-weight: 400;
    color: #6c757d;
    font-size: 0.95rem;
    margin-left: 0.4rem;
}

.field-product-total-inline {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
}

.field-product-total-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 600;
}

.field-product-total-value {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.1rem 0.55rem;
    min-width: 38px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cc-dark);
}

.field-product-inputs {
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
    flex-wrap: nowrap;
}

/* Aangetroffen en Bijgevuld altijd op één regel — ook op iPhone 12 (390px) */
.field-input-group {
    flex: 1 1 0;
    min-width: 0;
}

/* Totaal compact houden zodat het naast label/waarde blijft, ook op mobile */
.field-input-group.field-input-total {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-input-group.field-input-total label {
    margin: 0;
}

.field-input-group label {
    display: block;
    font-size: 0.7rem;
    color: #6c757d;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    font-weight: 600;
}

/* Larger touch targets for numeric inputs */
.field-numeric .k-input-inner {
    font-size: 1.3rem !important;
    text-align: center;
    min-height: 48px;
    font-weight: 600;
}

.field-numeric .k-input {
    border-radius: 10px;
}

/* Total display */
.field-input-total {
    flex: 0 0 60px;
}

.field-total-value {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cc-dark);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Status flags */
.field-flags-section {
    margin-top: 1.5rem;
}

.field-flags-section h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--cc-dark);
}

.field-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.field-flag {
    padding: 0.6rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 48px;
    background: #f8f9fa;
    color: #495057;
    border: 2px solid #dee2e6;
    transition: all 0.15s ease;
}

.field-flag:hover:not(:disabled) {
    border-color: #adb5bd;
}

.field-flag.field-flag-active {
    background: #198754;
    color: #fff;
    border-color: #198754;
}

.field-flag.field-flag-active.field-flag-warning {
    background: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

.field-flag.field-flag-active.field-flag-danger {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.field-flag:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Native modal overlay voor inspectie — TelerikDialog cache't ChildContent
   waardoor flag-kleuren en foto's pas bij heropening updaten. */
.field-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.field-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin: auto;
}

.field-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.field-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #212529;
}

.field-modal-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: #6c757d;
    padding: 0 0.25rem;
}

.field-modal-close:hover {
    color: var(--cc-pink);
}

.field-modal-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.field-modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
}

.field-btn-pill-primary {
    background: var(--cc-pink);
    color: #fff;
    border-color: var(--cc-pink);
}

.field-btn-pill-primary:hover {
    background: var(--cc-pink-hover);
    border-color: var(--cc-pink-hover);
    color: #fff;
}

.field-textarea-native {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 2px solid #ced4da;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

.field-textarea-native:focus {
    outline: none;
    border-color: var(--cc-pink);
}

/* Remarks */
.field-remarks-section {
    margin-top: 1.5rem;
}

.field-remarks-section h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--cc-dark);
}

.field-textarea .k-input-inner {
    font-size: 1rem;
    border-radius: 10px;
}

/* Photos */
.field-photos-section {
    margin-top: 1.5rem;
}

.field-photos-section h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--cc-dark);
}

.field-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.field-photo-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #e9ecef;
}

.field-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.field-photo-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.field-photo-upload {
    margin-top: 0.5rem;
}

.field-file-input {
    display: none;
}

.field-btn-photo {
    background: #f8f9fa;
    color: #495057;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    width: 100%;
}

.field-btn-photo:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
}

/* Submit section */
.field-submit-section {
    margin-top: 2rem;
    padding-bottom: 1rem;
    /* Reserveer ruimte voor de vaste .mobile-bottom-nav (~58px) zodat candyScroll.toBottom
       (scrollIntoView block:'end') de Afronden-knop bóven de footer uitlijnt i.p.v. erachter. */
    scroll-margin-bottom: 96px;
}

.field-error {
    background: #f8d7da;
    color: #842029;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.field-success {
    background: #d1e7dd;
    color: #0f5132;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.field-btn-submit {
    background: #198754;
    color: #fff;
    font-size: 1.2rem;
    padding: 0.8rem 2rem;
    border-radius: 16px;
    min-height: 56px;
    width: 100%;
}

.field-btn-submit:hover {
    background: #146c43;
    color: #fff;
}

.field-btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== FIELD MONITOR ========== */

/* Filter row */
.monitor-filter-row {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* 'Vandaag' (Bootstrap-knop, padding .375rem) en 'Vernieuwen' (.btn-cc, padding .5rem + svg-icoon)
   kwamen op verschillende hoogtes uit. Vaste hoogte + gecentreerde inhoud maakt beide knoppen
   even hoog, en gelijk aan de Telerik datepicker/dropdown ernaast. */
.monitor-filter-row .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

/* Small logo in header */
.monitor-logo {
    height: 28px;
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* Employee overview cards */
.monitor-employee-card {
    transition: all 0.15s ease;
    border-width: 2px;
}

.monitor-employee-card:hover {
    border-color: var(--cc-pink);
    box-shadow: 0 2px 12px rgba(238, 0, 140, 0.12);
}

.progress-bar.bg-cc-pink {
    background-color: var(--cc-pink) !important;
}

/* Status badges */
.monitor-badge-todo {
    background-color: #e67e22 !important;
    color: #fff !important;
}

.monitor-badge-done {
    background-color: #27ae60 !important;
    color: #fff !important;
}

/* Gemiste automaat die inmiddels een nieuwe servicedatum heeft gekregen. */
.monitor-badge-replanned {
    background-color: #3498db !important;
    color: #fff !important;
    font-weight: 500;
}

/* Pink pill button */
.btn-pill-pink {
    background-color: var(--cc-pink);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0.3rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.btn-pill-pink:hover,
.btn-pill-pink:focus {
    background-color: var(--cc-pink-hover);
    color: #fff;
}

/* Uitgeschakeld: o.a. 'Laat alle medewerkers zien' zolang het overzicht al getoond wordt */
.btn-pill-pink:disabled,
.btn-pill-pink.disabled {
    background-color: #d9d9d9;
    color: #6c757d;
    cursor: default;
}

/* Location cards in detail view — more contrast */
.monitor-location-card {
    border: 2px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.monitor-location-card.monitor-location-done {
    border-color: #27ae60;
}

.monitor-location-header {
    background: #f1f3f5;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

.monitor-location-card.monitor-location-done .monitor-location-header {
    background: rgba(39, 174, 96, 0.08);
}

/* Vaste kolombreedtes zodat alle automaat-tabellen over de locatie-kaarten heen uitlijnen */
.monitor-location-card .table {
    table-layout: fixed;
}

.monitor-location-card .table th:nth-child(1),
.monitor-location-card .table td:nth-child(1) {
    width: 140px;
}

.monitor-location-card .table th:nth-child(2),
.monitor-location-card .table td:nth-child(2) {
    width: 140px;
}

.monitor-location-card .table th:nth-child(4),
.monitor-location-card .table td:nth-child(4) {
    width: 140px;
}

/* Filter pills (Alle / Afgerond / Te doen) */
.monitor-pill-filter {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Zet de herplan-knop los van de filter-pills — het is een actie, geen filter. */
.monitor-plan-button {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .monitor-plan-button {
        margin-left: 0;
    }
}

.btn-pill-filter {
    background-color: #fff;
    color: var(--cc-pink);
    border: 1px solid var(--cc-pink);
    border-radius: 50px;
    padding: 0.35rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn-pill-filter:hover,
.btn-pill-filter:focus {
    background-color: rgba(238, 0, 140, 0.08);
}

.btn-pill-filter.active {
    background-color: var(--cc-pink);
    color: #fff;
    border-color: var(--cc-pink);
}

/* Clickable machine rows */
.monitor-machine-row {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.monitor-machine-row:hover {
    background-color: rgba(238, 0, 140, 0.06);
}

/* Location info dialog */
.monitor-location-info .info-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.monitor-location-info .info-row:last-child {
    border-bottom: none;
}

.monitor-location-info .info-label {
    font-weight: 600;
    color: #495057;
}

.monitor-location-info .info-value {
    color: #212529;
}

/* Responsive monitor page */
@media (max-width: 768px) {
    .monitor-filter-row {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .monitor-filter-row .col-auto {
        width: 100%;
    }

    .monitor-filter-row .k-datepicker,
    .monitor-filter-row .k-dropdownlist {
        width: 100% !important;
    }

    .monitor-location-card .table th,
    .monitor-location-card .table td {
        font-size: 0.85rem;
        padding: 0.4rem 0.5rem;
    }
}

/* ========== Machine Photo Thumbnails (field info dialog) ========== */
.machine-photo-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.machine-photo-thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #dee2e6;
    transition: border-color 0.15s ease, transform 0.15s ease;
    position: relative;
}

.machine-photo-thumb:hover {
    border-color: var(--cc-pink);
    transform: scale(1.05);
}

.machine-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.machine-photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ========== Lightbox Overlay ========== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 20001;
    line-height: 1;
    padding: 0.5rem;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.lightbox-close:hover {
    opacity: 1;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-content img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-caption {
    color: #fff;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    text-align: center;
    opacity: 0.85;
}

/* ========== Machine Photo Admin (manage photos dialog) ========== */
.machine-photo-grid-admin {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.machine-photo-admin-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

.machine-photo-admin-item img {
    width: 160px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.machine-photo-admin-actions {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.machine-photo-admin-desc {
    font-size: 0.82rem;
    color: #495057;
}

.machine-photo-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.machine-photo-clickable:hover {
    opacity: 0.8;
}

/* ===== Dashboard ===== */

.dashboard-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* center i.p.v. flex-end: de groepen bevatten controls met verschillende hoogtes
       (pill-knoppen vs. Telerik multiselect/datepicker). Met flex-end viel de multiselect
       een paar pixels naast de 'Periode:'-rij; met center + gelijke min-hoogte staan
       labels én controls van alle filtergroepen op dezelfde lijn. */
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.dashboard-filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Gelijke rijhoogte voor elke filtergroep, ongeacht de control erin. */
    min-height: 38px;
    /* Wrap standaard zodat een filterrij met veel selecties niet buiten een normale monitor loopt. */
    flex-wrap: wrap;
}

.dashboard-filter-group label {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Houdt een label en zijn control als één geheel bij elkaar bij het wrappen (geen losse labels). */
.filter-field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dashboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
}

/* Laadindicator voor een pagina die alleen maar doorstuurt (Home). Vult het hele
   venster, zodat de gebruiker nooit tegen een leeg wit scherm aankijkt terwijl de
   applicatie nog aan het bepalen is waar hij naartoe moet. */
.cc-page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: #6f7089;
}

/* KPI kaarten */
.dashboard-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: transform 0.15s ease;
}

.dashboard-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dashboard-kpi-card.kpi-alert {
    border-left: 4px solid #dc3545;
}

.kpi-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon-machines { background: rgba(238, 0, 140, 0.1); color: #ee008c; }
.kpi-icon-products { background: rgba(40, 167, 69, 0.1); color: #28a745; }
.kpi-icon-locations { background: rgba(255, 152, 0, 0.1); color: #ff9800; }
.kpi-icon-employees { background: rgba(0, 123, 255, 0.1); color: #007bff; }
.kpi-icon-overdue { background: rgba(220, 53, 69, 0.1); color: #dc3545; }
.kpi-icon-customers { background: rgba(111, 66, 193, 0.1); color: #6f42c1; }

/* Machine-type icoontjes in ritplanning + andere grids. Ronde pill met emoji als
   icoon en een kleur per type — zo herken je een rij in één oogopslag. */
.machine-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: #fff;
    line-height: 1;
    cursor: help;
    color: #6c757d; /* default glyph-kleur; per type overschreven */
}

/* Gestileerd SVG-icon; neemt de kleur van de .machine-type-<type> class over (currentColor) */
.machine-type-glyph {
    width: 20px;
    height: 20px;
    display: block;
}

/* Elke soort automaat zijn eigen kleur: glyph (currentColor) + rand + lichte tint-achtergrond */
.machine-type-sigaretten { color: #495057; border-color: #495057; background: #eceef0; }      /* donkergrijs */
.machine-type-snoep      { color: #ee008c; border-color: #ee008c; background: #fce4f1; }      /* roze (brand) */
.machine-type-fris       { color: #0d6efd; border-color: #0d6efd; background: #e6f0ff; }      /* blauw */
.machine-type-koffie     { color: #8b4513; border-color: #8b4513; background: #f1e6d6; }      /* koffiebruin */
.machine-type-combi      { color: #6f42c1; border-color: #6f42c1; background: #ece3fb; }      /* paars */
.machine-type-unknown    { color: #6c757d; border-color: #adb5bd; background: #f1f3f5; }      /* lichtgrijs */

/* Snelfilter op machinetype boven het ritplanning-grid. Kleine ronde pill-knoppen
   met hetzelfde grid-icoon; hover (title) toont het type. Radio-gedrag: precies één
   actief. Onafhankelijk van de grid-filterrij. */
.planning-type-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.planning-type-filter-sep {
    align-self: stretch;
    width: 1px;
    margin: 2px 4px;
    background: #dee2e6;
}

.planning-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: #f1f3f5;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.12s ease, box-shadow 0.12s ease;
}

.planning-type-pill .machine-type-glyph {
    width: 18px;
    height: 18px;
}

.planning-type-pill:hover {
    opacity: 1;
}

.planning-type-pill.active {
    opacity: 1;
    box-shadow: 0 0 0 2px #ee008c;
}

/* De selectie-checkboxkolom heeft geen filter; verberg de standaard filter-UI
   (twee kleine puntjes/iconen) die Telerik anders in die filtercel toont. */
.planning-machine-grid .k-filter-row > td:first-child > * {
    display: none;
}

.kpi-content {
    display: flex;
    flex-direction: column;
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #222;
}

.kpi-label {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

.kpi-sub {
    font-size: 0.75rem;
    color: #999;
}

/* Dashboard tabbladen - duidelijk zichtbare knoppen */
.dashboard-tabs {
    margin-bottom: 1rem;
}

.dashboard-tabs .k-tabstrip-items-wrapper {
    border: none;
    background: transparent;
    margin-bottom: 1rem;
}

.dashboard-tabs .k-tabstrip-items {
    gap: 0.5rem;
    flex-wrap: wrap;
    border: none;
}

/* Tab-headers als CandyControl pink pills. Telerik v13 rendert <li class="k-tabstrip-item">
   met binnenin <span class="k-link"><span class="k-link-text">. Style zowel de li
   als de span.k-link. */
.dashboard-tabs .k-tabstrip-item,
li.k-tabstrip-item {
    background: #fff !important;
    background-color: #fff !important;
    border: 2px solid #e9ecef !important;
    border-radius: 50px !important;
    padding: 0 !important;
    margin: 0 0.25rem 0.5rem 0 !important;
    font-weight: 600;
    color: #555 !important;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    list-style: none;
}

.dashboard-tabs .k-tabstrip-item .k-link,
li.k-tabstrip-item > .k-link {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 0.55rem 1.25rem !important;
    border-radius: 50px !important;
    display: inline-flex;
    align-items: center;
}

.dashboard-tabs .k-tabstrip-item .k-link .k-link-text,
li.k-tabstrip-item .k-link-text {
    color: inherit !important;
}

.dashboard-tabs .k-tabstrip-item:hover,
li.k-tabstrip-item:hover {
    border-color: var(--cc-pink) !important;
    color: var(--cc-pink) !important;
    box-shadow: 0 2px 6px rgba(238,0,140,0.15);
}

.dashboard-tabs .k-tabstrip-item.k-active,
.dashboard-tabs .k-tabstrip-item[aria-selected="true"],
li.k-tabstrip-item.k-active,
li.k-tabstrip-item[aria-selected="true"] {
    background: var(--cc-pink) !important;
    background-color: var(--cc-pink) !important;
    border-color: var(--cc-pink) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(238,0,140,0.3);
}

.dashboard-tabs .k-tabstrip-item.k-active .k-link,
.dashboard-tabs .k-tabstrip-item[aria-selected="true"] .k-link,
.dashboard-tabs .k-tabstrip-item.k-active .k-link-text,
.dashboard-tabs .k-tabstrip-item[aria-selected="true"] .k-link-text,
li.k-tabstrip-item.k-active .k-link,
li.k-tabstrip-item[aria-selected="true"] .k-link,
li.k-tabstrip-item.k-active .k-link-text,
li.k-tabstrip-item[aria-selected="true"] .k-link-text {
    color: #fff !important;
    background: transparent !important;
}

.dashboard-tabs .k-content,
.dashboard-tabs .k-tabstrip-content {
    border: none;
    background: transparent;
    padding: 0;
}

/* Globale Telerik primary button override: oranje default → CandyControl roze.
   Telerik v13 gebruikt .k-button-primary (niet -solid-). Dekt alle TelerikButton
   ThemeColor=Primary in het hele systeem. */
.k-button.k-button-primary,
.k-button-primary,
.k-button-solid-primary,
button.telerik-blazor.k-button-primary {
    background-color: var(--cc-pink) !important;
    background-image: none !important;
    border-color: var(--cc-pink) !important;
    color: #fff !important;
}

.k-button.k-button-primary:hover,
.k-button-primary:hover,
.k-button-primary.k-hover,
.k-button-solid-primary:hover,
button.telerik-blazor.k-button-primary:hover {
    background-color: var(--cc-pink-hover) !important;
    border-color: var(--cc-pink-hover) !important;
    color: #fff !important;
}

/* CandyControl pill buttons — gebruikt voor periode, service-overzicht quick filter */
.cc-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cc-pill {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 50px;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.cc-pill:hover:not(:disabled) {
    border-color: var(--cc-pink);
    color: var(--cc-pink);
}

.cc-pill.cc-pill-active {
    background: var(--cc-pink);
    border-color: var(--cc-pink);
    color: #fff;
    box-shadow: 0 3px 10px rgba(238, 0, 140, 0.3);
}

.cc-pill.cc-pill-active:hover {
    background: var(--cc-pink-hover);
    border-color: var(--cc-pink-hover);
    color: #fff;
}

.dashboard-svc-filter {
    margin-bottom: 1rem;
}

/* Empty state voor lege tabs */
.dashboard-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
}

/* Tablet + mobiel: dashboard filters + tabs compacter; geldt ook voor iPad. */
@media (max-width: 1200px) {
    .dashboard-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .dashboard-filters {
        gap: 0.5rem !important;
        margin-bottom: 0.5rem;
    }

    .dashboard-filter-group {
        flex-wrap: wrap;
        gap: 0.35rem !important;
    }

    .dashboard-filter-group label {
        flex-basis: 100%;
        font-weight: 600;
        font-size: 0.78rem;
        margin: 0;
    }

    .cc-pill-group {
        gap: 0.3rem;
    }

    .cc-pill {
        font-size: 0.72rem;
        padding: 0.3rem 0.7rem;
        border-width: 1px;
    }

    .dashboard-svc-filter {
        margin-bottom: 0.5rem;
    }

    .dashboard-kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem !important;
    }

    .dashboard-kpi-card {
        padding: 0.5rem 0.6rem;
        gap: 0.5rem;
    }

    .kpi-icon {
        width: 36px;
        height: 36px;
    }

    .kpi-value {
        font-size: 1.15rem;
    }

    .kpi-label {
        font-size: 0.7rem;
    }

    .kpi-sub {
        font-size: 0.65rem;
    }

    .dashboard-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .dashboard-panel-half {
        flex: 1 1 100%;
    }

    .dashboard-tab-header {
        margin-bottom: 0.5rem;
    }

    .dashboard-tab-header h3 {
        font-size: 0.95rem;
        margin: 0;
    }

    .dashboard-panel h3 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .dashboard-tabs {
        margin-bottom: 0.5rem;
    }

    .dashboard-tabs .k-tabstrip-items-wrapper {
        margin-bottom: 0.5rem;
    }

    .dashboard-tabs .k-tabstrip-item {
        margin: 0 0.2rem 0.3rem 0 !important;
        font-size: 0.72rem;
    }

    .dashboard-tabs .k-tabstrip-item .k-link,
    li.k-tabstrip-item .k-link {
        padding: 0.32rem 0.75rem !important;
        font-size: 0.72rem !important;
    }

    .dashboard-empty {
        padding: 1rem 0.75rem;
        font-size: 0.8rem;
    }

    /* Voorkom dat het dashboard horizontaal de viewport uitloopt. Alle
       ancestors zijn harde containers; alleen het panel scrollt. */
    .content,
    .main-content {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .dashboard-panel {
        padding: 0.5rem;
        margin-bottom: 0.75rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .dashboard-panel-full {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Telerik grid root MOET binnen het panel passen; daarna mag de
       interne tabel breder zijn via de interne scroll van de grid. */
    .dashboard-grid.k-grid,
    .dashboard-panel-full .k-grid {
        max-width: 100%;
        width: 100%;
        font-size: 0.8rem;
    }

    .dashboard-grid .k-grid-header th,
    .dashboard-grid .k-grid-content td,
    .dashboard-grid .k-table-th,
    .dashboard-grid .k-table-td {
        padding: 0.35rem 0.4rem !important;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* Forceer de grid's interne tabel-wrapper om horizontaal te scrollen
       zodat de grid nooit zijn parent uit duwt. */
    .dashboard-grid .k-grid-header-wrap,
    .dashboard-grid .k-grid-content {
        overflow-x: auto !important;
    }
}

/* Dashboard tabblad header met titel + info knop */
.dashboard-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.25rem 0;
}

.dashboard-tab-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.dashboard-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: #f0f7ff;
    border: 1px solid #b6daff;
    border-radius: 6px;
    color: #0d6efd;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.dashboard-info-btn:hover {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
    text-decoration: none;
}

/* Info knop binnen de incidents header (naast titel) */
.incidents-header h3 .dashboard-info-btn {
    margin-left: 0.75rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
}

/* Dashboard rijen en panelen */
.dashboard-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.dashboard-panel h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.dashboard-panel-full {
    width: 100%;
}

.dashboard-panel-half {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.dashboard-panel-ok {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #28a745;
}

.dashboard-panel-ok p {
    margin: 0.5rem 0 0 0;
    font-size: 1rem;
    font-weight: 500;
}

.dashboard-grid {
    font-size: 0.9rem;
}

/* Vakantie-overzicht */
.dashboard-vacation-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vacation-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.vacation-active {
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
}

.vacation-upcoming {
    background: rgba(0, 123, 255, 0.05);
    border-left: 3px solid #007bff;
}

.vacation-name {
    font-weight: 600;
    min-width: 150px;
}

.vacation-dates {
    color: #555;
}

.vacation-desc {
    color: #888;
    font-style: italic;
}

.vacation-badge {
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

.vacation-badge-now {
    background: #ffc107;
    color: #333;
}

.vacation-badge-upcoming {
    background: #e0e7ff;
    color: #3b5998;
}

/* Progress bar in klantoverzicht */
.dashboard-progress-bar {
    position: relative;
    height: 22px;
    background: #f0f0f0;
    border-radius: 50px;
    overflow: hidden;
}

.dashboard-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #ee008c, #ff4da6);
    border-radius: 50px;
    transition: width 0.3s ease;
}

.dashboard-progress-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
}

/* Responsive: tablet */
@media (max-width: 1024px) {
    .dashboard-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-row {
        flex-direction: column;
    }

    .dashboard-panel-half {
        width: 100%;
    }

    .dashboard-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-filter-group {
        flex-wrap: wrap;
    }
}

/* Responsive: mobiel */
@media (max-width: 576px) {
    .dashboard-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .vacation-item {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .vacation-name {
        min-width: auto;
        width: 100%;
    }

    .vacation-badge {
        margin-left: 0;
    }
}

/* ===== Auditlog ===== */

.audit-summary {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #666;
}

.audit-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 0;
}

.audit-pager-info {
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}

/* Actie badges */
.audit-action-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.audit-action-create { background: rgba(40, 167, 69, 0.12); color: #1b7a36; }
.audit-action-update { background: rgba(0, 123, 255, 0.12); color: #0056b3; }
.audit-action-delete { background: rgba(220, 53, 69, 0.12); color: #b02a37; }
.audit-action-login { background: rgba(238, 0, 140, 0.10); color: #ee008c; }
.audit-action-loginfailed { background: rgba(220, 53, 69, 0.12); color: #b02a37; }
.audit-action-logout { background: rgba(108, 117, 125, 0.12); color: #495057; }
.audit-action-rolechange { background: rgba(255, 152, 0, 0.12); color: #e65100; }
.audit-action-passwordreset { background: rgba(156, 39, 176, 0.12); color: #7b1fa2; }
.audit-action-mfatoggle { background: rgba(0, 150, 136, 0.12); color: #00695c; }
.audit-action-dataaccess { background: rgba(63, 81, 181, 0.12); color: #283593; }

/* Detail dialog */
.audit-detail {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.audit-detail-row {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}

.audit-detail-row strong {
    min-width: 100px;
    flex-shrink: 0;
    color: #555;
}

.audit-detail-full {
    flex-direction: column;
    gap: 0.25rem;
}

.audit-detail-pre {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
}

/* ============================================================
   Foutenlog niveau-badges
   ============================================================ */
.log-level {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.log-level-warning {
    background: #fff3cd;
    color: #856404;
}

.log-level-error {
    background: #f8d7da;
    color: #842029;
}

.log-level-critical {
    background: #842029;
    color: #fff;
}

/* Storingsanalyse-regels (categorie "Analyse"): eigen paarse badge zodat ze direct
   opvallen tussen de warnings/errors in de foutenlog. */
.log-level-analyse {
    background: #e2d9f3;
    color: #4a2b8c;
}

/* De "Analyse"-filterknop in dezelfde kleur als de badge, zodat filter en regels
   visueel bij elkaar horen. */
.log-filter-analyse.k-selected,
.log-filter-analyse.k-selected:hover {
    background-color: #4a2b8c;
    border-color: #4a2b8c;
    color: #fff;
}

/* ============================================================
   Verbindingstest-overlay (candySpeedTest.js) — pure JS/CSS,
   werkt dus ook als het Blazor-circuit dood is.
   ============================================================ */
.candy-speedtest-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(30, 30, 45, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.candy-speedtest-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.candy-speedtest-card h2 {
    font-size: 1.2rem;
    margin: 0 0 0.75rem;
}

.candy-speedtest-busy {
    font-size: 1rem;
    margin: 0.5rem 0;
}

.candy-speedtest-verdict {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.6rem;
}

.candy-speedtest-ok {
    background: #d1e7dd;
    color: #0f5132;
}

.candy-speedtest-warn {
    background: #fff3cd;
    color: #856404;
}

.candy-speedtest-bad {
    background: #f8d7da;
    color: #842029;
}

.candy-speedtest-advice {
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
}

.candy-speedtest-lines {
    font-size: 0.85rem;
    color: #495057;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
}

.candy-speedtest-lines div {
    padding: 0.15rem 0;
}

/* Offline-banner (candyOffline.js): dringende, altijd-zichtbare melding bovenaan zodra
   de telefoon geen netwerk heeft. Boven alles behalve de speedtest-overlay. */
.candy-offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 19000;
    background: #842029;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.candy-offline-banner button {
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid #fff;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

/* Touch target ≥48px */
.candy-speedtest-close {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 999px;
    background: var(--cc-pink);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   Machine incidenten panel
   ============================================================ */
.incidents-panel {
    margin-bottom: 1.25rem;
}

.incidents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.incidents-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.incidents-count {
    background: #dc3545;
    color: #fff;
    border-radius: 50px;
    padding: 0.15rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.incidents-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.incidents-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: #495057;
    margin: 0;
    cursor: pointer;
}

.incidents-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem;
    color: #198754;
    font-weight: 500;
}

.incidents-empty-small {
    padding: 0.75rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.incidents-subheader {
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
    color: #6c757d;
    border-top: 1px dashed #dee2e6;
    padding-top: 0.75rem;
}

.incidents-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ServiceDashboard (Technische Dienst) — mobile-first kpi/filter/grid */
.service-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.service-kpi {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.service-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.service-kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
    margin-top: 0.25rem;
}
.service-kpi-danger { border-top: 4px solid #dc3545; }
.service-kpi-danger .service-kpi-value { color: #dc3545; }
.service-kpi-warning { border-top: 4px solid #f0ad4e; }
.service-kpi-warning .service-kpi-value { color: #b56616; }
.service-kpi-info { border-top: 4px solid #17a2b8; }
.service-kpi-info .service-kpi-value { color: #117a8b; }

.service-filter-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Duwt de export/weergave-knoppen naar rechts binnen de zoekbalk-rij. */
.service-toolbar-spacer {
    flex: 1 1 auto;
}

.service-result-count {
    align-self: center;
    margin-left: auto;
    font-size: 0.85rem;
    color: #6c757d;
}

/* Tabelweergave van het serviceoverzicht: de filterkop is hier hoger dan op een
   standaard gridpagina, vandaar een eigen hoogte i.p.v. .grid-fill. */
.grid-fill-service {
    height: calc(100vh - 430px);
    min-height: 320px;
}

@media (max-width: 767.98px) {
    .grid-fill-service {
        height: 60vh;
    }
    .service-result-count {
        margin-left: 0;
    }
}

/* Zelfde zwaarte-codering als de kaartranden, nu als linkerrand op de gridrij. */
.incident-row-danger td:first-child {
    box-shadow: inset 4px 0 0 0 #dc3545;
}

.incident-row-warning td:first-child {
    box-shadow: inset 4px 0 0 0 #f39c12;
}

.incident-row-info td:first-child {
    box-shadow: inset 4px 0 0 0 #3498db;
}

.service-incident-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 900px) {
    .service-incident-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.incident-card-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #dee2e6;
}

.incident-card {
    border: 1px solid #dee2e6;
    border-left: 5px solid #6c757d;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.incident-severity-danger {
    border-left-color: #dc3545;
    background: #fff5f6;
}

.incident-severity-warning {
    border-left-color: #ffc107;
    background: #fffaf0;
}

.incident-severity-info {
    border-left-color: #0dcaf0;
}

.incident-resolved {
    opacity: 0.75;
    background: #f8f9fa;
    border-left-color: #198754;
}

.incident-card-head {
    margin-bottom: 0.5rem;
}

.incident-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cc-dark);
}

.incident-wil {
    background: var(--cc-pink);
    color: #fff;
    border-radius: 6px;
    padding: 0.1rem 0.5rem;
    font-size: 0.85rem;
}

.incident-machine {
    font-weight: 600;
}

.incident-flag {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.incident-flag-danger {
    background: #dc3545;
    color: #fff;
}

.incident-flag-warning {
    background: #ffc107;
    color: #212529;
}

.incident-flag-info {
    background: #0dcaf0;
    color: #212529;
}

.incident-card-meta {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.15rem;
}

.incident-card-reported {
    font-size: 0.8rem;
}

.incident-remarks {
    margin: 0.6rem 0;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.9rem;
}

.incident-remarks p {
    margin: 0.2rem 0 0;
    white-space: pre-wrap;
}

.incident-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0;
}

.incident-photo-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dee2e6;
    cursor: pointer;
}

.incident-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.incident-notes {
    margin: 0.6rem 0;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    font-size: 0.85rem;
}

.incident-note {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dotted #e9ecef;
}

.incident-note:first-of-type {
    border-top: none;
    padding-top: 0.2rem;
}

.incident-note-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #6c757d;
}

.incident-note-user {
    font-weight: 600;
    color: var(--cc-dark);
}

.incident-note-text {
    margin-top: 0.15rem;
    white-space: pre-wrap;
}

.incident-resolved-block {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #d1e7dd;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #0f5132;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.incident-resolved-remarks {
    flex-basis: 100%;
    margin-top: 0.25rem;
    font-style: italic;
}

.incident-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.incident-dialog-sub {
    margin: 0 0 0.75rem;
    color: #6c757d;
}

.incident-dialog-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.3rem;
}

.incident-dialog-error {
    margin-top: 0.5rem;
    color: #dc3545;
    font-size: 0.85rem;
}

/* Service-overzicht badges */
.svc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.svc-badge-ok {
    background: #d1e7dd;
    color: #0f5132;
}

.svc-badge-danger {
    background: #dc3545;
    color: #fff;
}

.svc-badge-warning {
    background: #ffc107;
    color: #212529;
}

.svc-badge-info {
    background: #0dcaf0;
    color: #212529;
}

.svc-badge-resolved {
    background: #e2e3e5;
    color: #41464b;
}

/* Klikbare opmerking-link in service-overzicht (opent opmerking-dialog) */
.svc-remark-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 8px;
    border: 1px solid #ee008c;
    border-radius: 12px;
    background: transparent;
    color: #ee008c;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.svc-remark-link:hover {
    background: #ee008c;
    color: #fff;
}

/* ============================================================ */
/* CandyNumberTextbox - TelerikNumericTextBox herschikt/gestyled als */
/* de originele ronde roze +/- knoppen. Puur CSS: de DOM-volgorde     */
/* van de Telerik-spinnerknoppen (increase, decrease) wordt via       */
/* flex `order` omgedraaid naar [min][input][plus], geen eigen         */
/* HTML/JS. Gedrag/interactie blijft volledig standaard Telerik.       */
/* ============================================================ */
.candy-number.k-numerictextbox {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
}

.candy-number .k-input-inner {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cc-dark);
    padding: 0 4px;
}

.candy-number.k-focus .k-input-inner {
    border-color: var(--cc-pink);
    box-shadow: 0 0 0 3px var(--cc-pink-light);
}

.candy-number .k-input-inner:disabled {
    background: #f1f3f5;
    color: #868e96;
    border-color: #e9ecef;
}

/* Tilt de increase/decrease-knoppen uit hun stacked wrapper zodat ze
   losse flex-items worden van de root en met `order` te herschikken zijn. */
.candy-number .k-input-spinner {
    display: contents;
}

.candy-number .k-spinner-increase,
.candy-number .k-spinner-decrease {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50% !important;
    border: none;
    background: var(--cc-pink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(238, 0, 140, 0.35);
    transition: transform 0.1s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.candy-number .k-spinner-decrease {
    order: 1;
}

.candy-number .k-spinner-increase {
    order: 3;
}

.candy-number .k-spinner-increase .k-svg-icon,
.candy-number .k-spinner-decrease .k-svg-icon {
    width: 22px;
    height: 22px;
}

.candy-number .k-spinner-increase:hover:not(:disabled),
.candy-number .k-spinner-decrease:hover:not(:disabled) {
    background: var(--cc-pink-hover);
}

.candy-number .k-spinner-increase:active:not(:disabled),
.candy-number .k-spinner-decrease:active:not(:disabled) {
    transform: scale(0.92);
    box-shadow: 0 1px 3px rgba(238, 0, 140, 0.3);
}

.candy-number .k-spinner-increase:disabled,
.candy-number .k-spinner-decrease:disabled {
    background: #e9ecef;
    color: #adb5bd;
    box-shadow: none;
    cursor: not-allowed;
}

/* iOS tekent zijn numerieke toetsenbord met een doorschijnende ('frosted')
   achtergrond die de pagina-inhoud erachter oppikt. De felroze spinner-knoppen
   van de vulregistratie schemerden daardoor als roze vlekken door het toetsenbord
   heen, waardoor het toetsenbord semi-transparant oogde. Zodra een veld focus
   heeft (toetsenbord open) op een touch-device tonen we de spinner-knoppen
   neutraal grijs, zodat er niets roze door het toetsenbord bloedt en het als een
   egale, dekkende laag oogt. Beperkt tot touch-devices (hover:none + pointer:coarse)
   zodat de desktop/backoffice-weergave — waar geen schermtoetsenbord verschijnt —
   ongemoeid blijft. */
@media (hover: none) and (pointer: coarse) {
    .mobile-content:focus-within .candy-number .k-spinner-increase:not(:disabled),
    .mobile-content:focus-within .candy-number .k-spinner-decrease:not(:disabled) {
        background: #e9ecef;
        color: #adb5bd;
        box-shadow: none;
    }
}

/* Iets compacter op smalle mobielen zodat twee knoppen + input passen */
@media (max-width: 480px) {
    .content {
        padding: 0.5rem;
    }

    .page-header h1 {
        font-size: 1.25rem;
    }

    .candy-number.k-numerictextbox {
        gap: 6px;
    }

    .candy-number .k-spinner-increase,
    .candy-number .k-spinner-decrease {
        width: 48px;
        height: 48px;
    }

    .candy-number .k-input-inner {
        height: 48px;
        font-size: 1.25rem;
    }
}

/* ============================================================ */
/* Pink pill buttons binnen Telerik dialogs                      */
/* ============================================================ */
.k-dialog .k-actions .k-button,
.k-window .k-actions .k-button {
    border-radius: 50px !important;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    min-width: 110px;
    background: var(--cc-pink);
    border-color: var(--cc-pink);
    color: #fff;
}

.k-dialog .k-actions .k-button:hover,
.k-window .k-actions .k-button:hover {
    background: var(--cc-pink-hover);
    border-color: var(--cc-pink-hover);
    color: #fff;
}

/* Secondaire / cancel dialog knoppen - outlined pink pill */
.k-dialog .k-actions .k-button.k-button-solid-base,
.k-window .k-actions .k-button.k-button-solid-base,
.k-dialog .k-actions .k-button[data-role="cancel"],
.k-window .k-actions .k-button[data-role="cancel"] {
    background: #fff;
    color: var(--cc-pink);
    border: 2px solid var(--cc-pink);
}

.k-dialog .k-actions .k-button.k-button-solid-base:hover,
.k-window .k-actions .k-button.k-button-solid-base:hover {
    background: var(--cc-pink-light);
    color: var(--cc-pink-hover);
    border-color: var(--cc-pink-hover);
}

/* ============================================================ */
/* Machine info popup - nieuwe card layout                       */
/* ============================================================ */
.machine-info-card {
    padding: 4px 0;
}

.machine-info-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cc-pink) 0%, var(--cc-pink-hover) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(238, 0, 140, 0.25);
}

.machine-info-hero-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.machine-info-hero-text {
    flex: 1 1 auto;
    min-width: 0;
}

.machine-info-hero-wil {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.machine-info-hero-type {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-top: 2px;
}

.machine-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

@media (min-width: 600px) {
    .machine-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .machine-info-item-full {
        grid-column: 1 / -1;
    }
}

.machine-info-item {
    padding: 12px 14px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid var(--cc-pink-light);
}

.machine-info-item-key {
    background: var(--cc-pink-light);
    border-left-color: var(--cc-pink);
}

.machine-info-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 4px;
}

.machine-info-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cc-dark);
    word-break: break-word;
}

.machine-info-item-key .machine-info-value {
    color: var(--cc-pink-hover);
    font-size: 1.15rem;
    letter-spacing: 1px;
}

.machine-info-photos-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin: 8px 0 10px 0;
}

/* ============================================================ */
/* Dashboard - filled products overview                          */
/* ============================================================ */
.dashboard-filled-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.dashboard-filled-product {
    padding: 14px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--cc-pink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-filled-product-name {
    font-weight: 600;
    color: var(--cc-dark);
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-filled-product-qty {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cc-pink);
    flex: 0 0 auto;
}

/* Recent remarks - card list */
.remarks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.remark-card {
    padding: 14px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--cc-pink);
}

.remark-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.remark-wil {
    font-weight: 700;
    color: var(--cc-pink);
    font-size: 1rem;
}

.remark-machine {
    font-weight: 600;
    color: var(--cc-dark);
    flex: 1 1 auto;
}

.remark-date {
    font-size: 0.85rem;
    color: #6c757d;
}

.remark-card-meta {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 8px;
}

.remark-text {
    margin: 0 0 10px 0;
    padding: 10px 12px;
    background: var(--cc-pink-light);
    border-radius: 8px;
    color: var(--cc-dark);
    white-space: pre-wrap;
}

.remark-card-actions {
    display: flex;
    justify-content: flex-end;
}

/* ============================================================ */
/* VoorraadMutatie grid - mobile responsive tweaks               */
/* ============================================================ */
.voorraadmutatie-grid {
    width: 100%;
}

@media (max-width: 768px) {
    .voorraadmutatie-grid .k-grid-header,
    .voorraadmutatie-grid .k-grid-content {
        font-size: 0.85rem;
    }

    .voorraadmutatie-grid .k-grid td,
    .voorraadmutatie-grid .k-grid th {
        padding: 6px 4px;
    }
}

/* Version/build-date footer in sidebar en mobile layout */
.sidebar-version {
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.mobile-version {
    text-align: center;
    padding: 0.25rem 0;
    font-size: 0.65rem;
    color: #888;
    background: #f5f5f5;
}

/* Wachtwoord 'oog'-knop naast login/register velden — toont/verbergt het wachtwoord. */
.candy-password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ruime touch-target voor mobiel (min. 48px hoog via form-control) */
    min-width: 48px;
    color: #555;
}

.candy-password-toggle:hover,
.candy-password-toggle:focus {
    color: #000;
}

/* ─────────────────────────────────────────────────────────────
   Berichten aan operator — invoerwizard (klant → locatie → automaat → melding)
   ───────────────────────────────────────────────────────────── */
.office-wizard {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.75rem;
}

/* Genummerde stap-tracker met verbindingslijnen */
.office-steps {
    display: flex;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.office-step {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #adb5bd;
    text-align: center;
}

/* Verbindingslijn tussen de cirkels (loopt achter de cirkel langs) */
.office-step::before,
.office-step::after {
    content: "";
    position: absolute;
    top: 15px;
    height: 3px;
    background: #e9ecef;
    width: 50%;
    z-index: 0;
}

.office-step::before {
    left: 0;
}

.office-step::after {
    right: 0;
}

.office-step:first-child::before,
.office-step:last-child::after {
    display: none;
}

/* Afgeronde stappen kleuren hun lijnen roze */
.office-step.done::before,
.office-step.done::after,
.office-step.active::before {
    background: var(--cc-pink);
}

.office-step-num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid #e9ecef;
    color: #adb5bd;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.15s ease;
}

.office-step-label {
    white-space: nowrap;
}

.office-step.active .office-step-num {
    border-color: var(--cc-pink);
    background: var(--cc-pink);
    color: #fff;
    box-shadow: 0 0 0 4px var(--cc-pink-light);
}

.office-step.active .office-step-label {
    color: var(--cc-pink);
}

.office-step.done {
    color: var(--cc-dark);
    cursor: pointer;
}

.office-step.done .office-step-num {
    border-color: var(--cc-pink);
    background: var(--cc-pink-light);
    color: var(--cc-pink);
}

.office-step.done:hover .office-step-num {
    background: var(--cc-pink);
    color: #fff;
}

/* Breadcrumb met gekozen klant › locatie › automaat */
.office-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    padding: 0.6rem 0.85rem;
    background: var(--cc-pink-light);
    border-radius: 10px;
}

.office-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--cc-dark);
    font-size: 0.88rem;
    font-weight: 600;
}

.office-crumb-ico {
    font-size: 0.95rem;
    line-height: 1;
}

.office-crumb-sep {
    color: var(--cc-pink);
    font-weight: 700;
}

.office-wizard-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.office-wizard-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cc-dark);
    margin: 0 0 0.75rem;
}

.office-wizard-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0;
    color: #6c757d;
}

/* Kies-de-automaat sectie: één grid met snelfilters i.p.v. de oude klik-cascade */
.office-section {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.office-section-hint {
    font-size: 0.85rem;
    margin-bottom: 0.85rem;
}

/* Vaste, compacte hoogte: de kiesgrid is een hulpmiddel, niet het hoofdscherm */
.office-machine-grid {
    height: 460px;
}

.office-machine-grid .k-grid-content tr {
    cursor: pointer;
}

/* Rij-acties (bekijken / archiveren / verwijderen) in het meldingen-grid */
.office-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Melding-bekijken dialoog: label/waarde-lijst */
.office-view-list {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.4rem 0.75rem;
    margin: 0 0 1rem;
}

.office-view-list dt {
    font-weight: 600;
    color: #6c757d;
}

.office-view-list dd {
    margin: 0;
}

.office-view-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.office-dialog-sub {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
}

/* Zoekbalk boven de kiezer */
.office-search {
    margin-bottom: 0.5rem;
    max-width: 480px;
}

.office-search-count {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.85rem;
}

/* Roze pill-knoppen voor klant / locatie / automaat */
.office-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
    max-height: 52vh;
    overflow-y: auto;
    padding: 0.25rem;
}

.office-pick-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    text-align: left;
    padding: 0.55rem 1.1rem;
    min-height: 48px;
    justify-content: center;
    border: 1.5px solid var(--cc-pink-light);
    border-radius: 50px;
    background: #fff;
    color: var(--cc-dark);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.office-pick-item:hover,
.office-pick-item:focus {
    border-color: var(--cc-pink);
    background: var(--cc-pink-light);
    box-shadow: 0 2px 6px rgba(238, 0, 140, 0.15);
    outline: none;
}

.office-pick-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}

.office-pick-sub {
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.1;
}

/* Type-keuze (stap 4) */
.office-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.office-type-btn {
    padding: 0.5rem 1.1rem;
    min-height: 48px;
    border-radius: 50px;
    border: 1.5px solid #dee2e6;
    background: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.office-type-btn:hover {
    border-color: var(--cc-pink);
}

.office-type-btn.selected {
    border-color: var(--cc-pink);
    background: var(--cc-pink);
    color: #fff;
}

.office-message-label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.35rem;
}

.office-message-input {
    margin-bottom: 1rem;
}

.office-wizard-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Overzicht-sectie */
.office-overview {
    margin-top: 0.5rem;
}

.office-overview h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cc-dark);
    margin-bottom: 0.75rem;
}

.office-status-badge {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.office-status-open {
    background: #fff3cd;
    color: #664d03;
}

.office-status-resolved {
    background: #d1e7dd;
    color: #0f5132;
}

.office-card-resolved {
    opacity: 0.85;
}

.office-resolution {
    background: #f0fbf4 !important;
    border-color: #b7e4c7 !important;
}

/* Berichtenpaneel op het Service overzicht — zonder deze regels plakten de kaarten
   tegen de kop en tegen de eronder liggende filterbalk aan (geen marges). */
.office-service-panel {
    margin-bottom: 1rem;
}

.office-service-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--cc-dark);
}

/* Tabbladen op het Service overzicht (Meldingen / Berichten). */
.service-tabs .k-tabstrip-content,
.service-tabs .k-content {
    padding-top: 0.25rem;
}

/* ── Kopieer-dialoog (CopyTreeDialog) ────────────────────────────────
   Twee bomen naast elkaar in een TelerikWindow. De hoogte wordt hier geregeld
   i.p.v. via een Height op het venster, zodat het venster zich aan de inhoud
   aanpast op kleinere schermen. */
.copy-tree-scroll {
    height: 52vh;
    min-height: 260px;
    overflow-y: auto;
}

.copy-tree-feedback {
    font-size: .85rem;
}

.copy-tree-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 4px;
    border-bottom: 1px solid #f2f2f2;
    font-size: .85rem;
    line-height: 1.35;
    user-select: none;
}

.copy-tree-row:hover {
    background-color: #fdf1f6;
}

.copy-tree-branch {
    font-weight: 600;
}

.copy-tree-leaf {
    font-weight: 400;
}

.copy-tree-toggle {
    width: 14px;
    flex: 0 0 14px;
    font-size: .6rem;
    color: #888;
    cursor: pointer;
}

.copy-tree-toggle-empty {
    cursor: default;
}

.copy-tree-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-tree-sub {
    color: #999;
    font-size: .75rem;
    font-weight: 400;
    white-space: nowrap;
}

.copy-tree-spacer {
    flex: 1 1 auto;
}

.copy-tree-count {
    font-size: .65rem;
}

.copy-tree-check {
    color: #198754;
    font-size: .75rem;
}

/* Al aanwezig aan de doelkant — dubbelklikken levert dan niets nieuws op. */
.copy-tree-present > .copy-tree-label,
.copy-tree-present > .copy-tree-sub {
    color: #adb5bd;
}

/* Zojuist gekopieerd: visueel spoor zodat de gebruiker ziet waar het landde. */
.copy-tree-highlight {
    background-color: #e8f6ec;
}

.copy-tree-remove {
    padding: 0 .3rem;
    line-height: 1.1;
    font-size: .7rem;
}

/* Kleine icoonknoppen in de kaartkoppen (uit-/inklappen, ongedaan maken, terugzetten). */
.copy-tree-toolbtn {
    padding: 0 .35rem;
    line-height: 1.2;
    font-size: .7rem;
}

/* Slepen aan de doelkant: alleen daar is de muisaanwijzer een 'verplaats'-cursor. */
.copy-tree-draggable {
    cursor: grab;
}

.copy-tree-draggable:active {
    cursor: grabbing;
}

/* Rij waarop losgelaten kan worden tijdens het slepen. */
.copy-tree-drop-hover {
    background-color: #fde3ef;
    outline: 2px dashed #d63384;
    outline-offset: -2px;
}

/* Overlay binnen het kopieervenster (uitleg + 'stoppen zonder opslaan?').
   Bewust géén aparte Telerik-dialoog: die zou achter dit modale venster kunnen vallen. */
.copy-tree-window .k-window-content {
    position: relative;
}

.copy-tree-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 5;
}

.copy-tree-overlay-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    padding: 1.25rem;
    max-width: 620px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.copy-tree-help ul {
    padding-left: 1.1rem;
    font-size: .875rem;
}

.copy-tree-help li {
    margin-bottom: .35rem;
}

/* ===== Geen toegang (403) ===== */
.access-denied {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
}

.access-denied-card {
    max-width: 560px;
    width: 100%;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.access-denied-icon {
    font-size: 2.75rem;
    line-height: 1;
    margin-bottom: .75rem;
}

.access-denied-card h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.access-denied-lead {
    font-size: 1.05rem;
    margin-bottom: .75rem;
}

.access-denied-roles {
    background: #fdf3f7;
    border: 1px solid #f3d6e3;
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

.access-denied-current {
    color: #6c757d;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.access-denied-actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
}