@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Account/Signup.razor.rz.scp.css */
/* ── Two-column name row ───────────────────────── */

.su-name-row[b-3lylan7s04] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ── Terms checkbox row ────────────────────────── */

.su-terms[b-3lylan7s04] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

    .su-terms a[b-3lylan7s04] {
        color: var(--color-primary);
        text-decoration: underline;
    }

    .su-terms input[type="checkbox"][b-3lylan7s04] {
        width: 1rem;
        height: 1rem;
        accent-color: var(--color-primary);
        flex-shrink: 0;
        cursor: pointer;
    }

/* ── Inline notice ─────────────────────────────── */

.su-notice[b-3lylan7s04] {
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.su-notice--error[b-3lylan7s04] {
    background: var(--color-danger-bg-1);
    color: var(--color-danger-bright);
    border: 1px solid var(--color-danger-tint);
}

/* ── Success state ─────────────────────────────── */

.su-success[b-3lylan7s04] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-strong);
}

.su-success-icon[b-3lylan7s04] {
    font-size: 2.5rem;
}

    .su-success p[b-3lylan7s04] {
        margin: 0;
        font-size: 0.95rem;
        color: var(--color-text-muted);
    }
/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
/* All mobile login styles live in wwwroot/css/login-mobile.css (global/unscoped)
   because they apply to elements rendered inside @Body (Signin.razor), which
   Blazor's scoped CSS cannot reach from here. Do NOT add .mobile-login-root
   or .ml-* rules here � they will be scoped by Blazor and never match. */

#blazor-error-ui[b-3nqje07ldh] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-3nqje07ldh] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/KioskLayout.razor.rz.scp.css */
/* Layout-level kiosk shell styles (must live here, not in page-scoped css) */
.kiosk-root[b-e6j9qukjjg] {
    background: var(--color-surface-alt, #f9fafb);
    background-image: url('https://www.liffinassen.nl/wp-content/uploads/2025/02/Tineke-Oving-Fotografie-25-37-1.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100dvh;
    width: 100%;
    color: var(--color-text, #101828);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding: 1.5rem;
    box-sizing: border-box;
    overflow-y: auto;
}

#blazor-error-ui[b-e6j9qukjjg] {
    display: none !important;
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* All mobile login styles live in wwwroot/css/login-mobile.css (global/unscoped)
   because they apply to elements rendered inside @Body (Signin.razor), which
   Blazor's scoped CSS cannot reach from here. Do NOT add .mobile-login-root
   or .ml-* rules here � they will be scoped by Blazor and never match. */

#blazor-error-ui[b-4jini4wdg1] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-4jini4wdg1] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-3zjjz3nmdq] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-3zjjz3nmdq] {
    flex: 1;
}

.sidebar[b-3zjjz3nmdq] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-3zjjz3nmdq] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-3zjjz3nmdq]  a, .top-row[b-3zjjz3nmdq]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-3zjjz3nmdq]  a:hover, .top-row[b-3zjjz3nmdq]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-3zjjz3nmdq]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-3zjjz3nmdq] {
        justify-content: space-between;
    }

    .top-row[b-3zjjz3nmdq]  a, .top-row[b-3zjjz3nmdq]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-3zjjz3nmdq] {
        flex-direction: row;
    }

    .sidebar[b-3zjjz3nmdq] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-3zjjz3nmdq] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-3zjjz3nmdq]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-3zjjz3nmdq], article[b-3zjjz3nmdq] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-3zjjz3nmdq] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-3zjjz3nmdq] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MobileBottomNav.razor.rz.scp.css */
.sm-mobile-nav[b-1gcd5zrfkg] {
    display: none;
}

/* Show only on phone-sized viewports */
@media (max-width: 767.98px) {
    .sm-mobile-nav[b-1gcd5zrfkg] {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background: var(--color-white);
        border-top: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
        padding-bottom: env(safe-area-inset-bottom, 0);
        /* Prevent pull-to-refresh / browser gestures from stealing taps in the nav. */
        touch-action: manipulation;
        overscroll-behavior: contain;
    }

    .sm-mobile-nav__list[b-1gcd5zrfkg] {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        margin: 0;
        padding: 6px 4px 8px;
        list-style: none;
    }

    .sm-mobile-nav__item[b-1gcd5zrfkg],
    .sm-mobile-nav__home[b-1gcd5zrfkg],
    .sm-mobile-nav__sheet-item[b-1gcd5zrfkg] {
        /* Removes the 300ms tap delay on iOS/Android and prevents double-tap zoom. */
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .sm-mobile-nav__item[b-1gcd5zrfkg] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px;
        font-size: 11px;
        line-height: 1.1;
        color: #5b6273;
        text-decoration: none;
        border-radius: 10px;
        transition: color .15s ease, background .15s ease;
    }

        .sm-mobile-nav__item:hover[b-1gcd5zrfkg] {
            color: var(--color-primary-darkest);
        }

        .sm-mobile-nav__item.is-active[b-1gcd5zrfkg] {
            color: var(--color-primary-darkest);
            background: rgba(5,39,103,0.08);
        }

    /* Larger center "home" button */
    .sm-mobile-nav__center[b-1gcd5zrfkg] {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .sm-mobile-nav__home[b-1gcd5zrfkg] {
        position: relative;
        top: -22px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--color-primary-darkest);
        color: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(5,39,103,0.3);
        text-decoration: none;
        transition: transform .15s ease, box-shadow .15s ease;
    }

        .sm-mobile-nav__home:hover[b-1gcd5zrfkg],
        .sm-mobile-nav__home.is-active[b-1gcd5zrfkg] {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(5,39,103,0.4);
        }

    /* "More" button is rendered as a <button>; reset native styles */
    .sm-mobile-nav__more-btn[b-1gcd5zrfkg] {
        background: transparent;
        border: 0;
        width: 100%;
        cursor: pointer;
        font: inherit;
    }

    /* ---- "More" bottom sheet ---- */
    .sm-mobile-nav__backdrop[b-1gcd5zrfkg] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1050;
        animation: sm-fade-in-b-1gcd5zrfkg .15s ease-out;
    }

    .sm-mobile-nav__sheet[b-1gcd5zrfkg] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1051;
        background: var(--color-white);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
        padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0));
        animation: sm-slide-up-b-1gcd5zrfkg .2s ease-out;
        max-height: 70vh;
        overflow-y: auto;
    }

    .sm-mobile-nav__sheet-handle[b-1gcd5zrfkg] {
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 0 auto 10px;
    }

    .sm-mobile-nav__sheet-title[b-1gcd5zrfkg] {
        text-align: center;
        font-size: 14px;
        color: #5b6273;
        margin: 0 0 14px;
    }

    .sm-mobile-nav__sheet-grid[b-1gcd5zrfkg] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .sm-mobile-nav__sheet-item[b-1gcd5zrfkg] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 6px;
        font-size: 12px;
        line-height: 1.15;
        color: var(--color-primary-darkest);
        text-align: center;
        text-decoration: none;
        background: #f5f6fa;
        border-radius: 12px;
        transition: background .15s ease, transform .1s ease;
    }

        .sm-mobile-nav__sheet-item:hover[b-1gcd5zrfkg],
        .sm-mobile-nav__sheet-item:active[b-1gcd5zrfkg] {
            background: #e9ecf5;
            transform: scale(0.98);
            color: var(--color-primary-darkest);
        }

    .sm-mobile-nav__sheet-signout[b-1gcd5zrfkg] {
        color: #b00020;
    }

        .sm-mobile-nav__sheet-signout:hover[b-1gcd5zrfkg],
        .sm-mobile-nav__sheet-signout:active[b-1gcd5zrfkg] {
            color: #b00020;
            background: #fce8eb;
        }

    @keyframes sm-fade-in-b-1gcd5zrfkg {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes sm-slide-up-b-1gcd5zrfkg {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* ── Dark mode ──────────────────────────────── */

    [data-theme="dark"] .sm-mobile-nav[b-1gcd5zrfkg] {
        background: var(--color-surface);
        border-top-color: var(--color-border);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
    }

    [data-theme="dark"] .sm-mobile-nav__item[b-1gcd5zrfkg] {
        color: var(--color-text-muted);
    }

        [data-theme="dark"] .sm-mobile-nav__item:hover[b-1gcd5zrfkg] {
            color: var(--color-text-strong);
        }

        [data-theme="dark"] .sm-mobile-nav__item.is-active[b-1gcd5zrfkg] {
            color: var(--color-primary);
            background: rgba(46,144,250,0.12);
        }

        [data-theme="dark"] .sm-mobile-nav__home[b-1gcd5zrfkg] {
            background: var(--color-primary);
            box-shadow: 0 4px 12px rgba(46,144,250,0.3);
        }

            [data-theme="dark"] .sm-mobile-nav__home:hover[b-1gcd5zrfkg],
            [data-theme="dark"] .sm-mobile-nav__home.is-active[b-1gcd5zrfkg] {
                box-shadow: 0 8px 18px rgba(46,144,250,0.45);
            }

        [data-theme="dark"] .sm-mobile-nav__sheet[b-1gcd5zrfkg] {
        background: var(--color-surface);
        box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
    }

    [data-theme="dark"] .sm-mobile-nav__sheet-handle[b-1gcd5zrfkg] {
        background: var(--color-border);
    }

    [data-theme="dark"] .sm-mobile-nav__sheet-title[b-1gcd5zrfkg] {
        color: var(--color-text-muted);
    }

    [data-theme="dark"] .sm-mobile-nav__sheet-item[b-1gcd5zrfkg] {
        background: var(--color-surface-alt);
        color: var(--color-text-strong);
    }

        [data-theme="dark"] .sm-mobile-nav__sheet-item:hover[b-1gcd5zrfkg],
        [data-theme="dark"] .sm-mobile-nav__sheet-item:active[b-1gcd5zrfkg] {
            background: var(--color-surface-hover);
            color: var(--color-text-strong);
        }

    [data-theme="dark"] .sm-mobile-nav__sheet-signout[b-1gcd5zrfkg] {
        color: #fca5a5;
    }

        [data-theme="dark"] .sm-mobile-nav__sheet-signout:hover[b-1gcd5zrfkg],
        [data-theme="dark"] .sm-mobile-nav__sheet-signout:active[b-1gcd5zrfkg] {
            color: #fca5a5;
            background: rgba(239,68,68,0.18);
        }
}
/* /Components/Layout/PwaInstallPrompt.razor.rz.scp.css */
.pwa-install-banner[b-n1zkes7hgi] {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); /* sits above MobileBottomNav */
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
    animation: pwa-slide-in-b-n1zkes7hgi .25s ease-out;
}

.pwa-install-banner__icon[b-n1zkes7hgi] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.pwa-install-banner__body[b-n1zkes7hgi] {
    flex: 1 1 auto;
    min-width: 0;
}

.pwa-install-banner__title[b-n1zkes7hgi] {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 2px;
}

.pwa-install-banner__text[b-n1zkes7hgi] {
    font-size: .8rem;
    opacity: .85;
    line-height: 1.35;
}

.pwa-install-banner__text strong[b-n1zkes7hgi] {
    color: #fff;
    opacity: 1;
}

.pwa-install-banner__actions[b-n1zkes7hgi] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.pwa-install-banner__close[b-n1zkes7hgi] {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .7);
    padding: 4px 6px;
    cursor: pointer;
    align-self: flex-start;
}

    .pwa-install-banner__close:hover[b-n1zkes7hgi] {
        color: #fff;
    }

@keyframes pwa-slide-in-b-n1zkes7hgi {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hide entirely on non-mobile widths — it is only registered/used in mobile UA, but defend just in case. */
@media (min-width: 992px) {
    .pwa-install-banner[b-n1zkes7hgi] {
        display: none;
    }
}
/* /Components/Pages/AccessDenied.razor.rz.scp.css */
.ad-wrap[b-ywuyattumj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.ad-card[b-ywuyattumj] {
    max-width: 480px;
    text-align: center;
    background: var(--neutral-layer-1, var(--color-white));
    border: 1px solid var(--neutral-stroke-rest, #e5e5e5);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ad-icon[b-ywuyattumj] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.ad-card h1[b-ywuyattumj] {
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

.ad-card p[b-ywuyattumj] {
    color: var(--neutral-foreground-hint, #555);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.ad-actions[b-ywuyattumj] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* /Components/Pages/Admin/AdminSidebar.razor.rz.scp.css */
/* ── Admin sidebar ────────────────────────────── */

.admin-sidebar[b-9ej3pcmb83] {
    width: 240px;
    flex-shrink: 0;
    background: var(--color-surface-alt);
    border-right: 1px solid var(--color-border-light);
    padding: 1.25rem 0;
}

.admin-title[b-9ej3pcmb83] {
    margin: 0 0 1rem;
    padding: 0 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-strong);
}

.admin-nav[b-9ej3pcmb83] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .admin-nav .nav-section[b-9ej3pcmb83] {
        padding: 0.5rem 0 0;
    }

    .admin-nav .nav-heading[b-9ej3pcmb83] {
        display: block;
        padding: 0.25rem 1.25rem 0.35rem;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-text-subtle);
    }

    .admin-nav .nav-item[b-9ej3pcmb83] {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.45rem 1.25rem;
        font-size: 0.84rem;
        font-weight: 500;
        color: var(--color-text-muted);
        text-decoration: none;
        border-left: 3px solid transparent;
        transition: background 0.12s, color 0.12s;
    }

        .admin-nav .nav-item:hover[b-9ej3pcmb83] {
            background: var(--color-surface-hover);
            color: var(--color-text-strong);
        }

        .admin-nav .nav-item.active[b-9ej3pcmb83] {
            background: var(--color-primary-soft);
            color: var(--color-primary-strong);
            border-left-color: var(--color-primary);
            font-weight: 600;
        }

    .admin-nav .nav-icon[b-9ej3pcmb83] {
        font-size: 1rem;
        width: 1.2rem;
        text-align: center;
        flex-shrink: 0;
    }
/* /Components/Pages/Admin/BookingBlackouts.razor.rz.scp.css */
.admin-shell[b-1ipy14qin1] { display: flex; min-height: calc(100vh - 56px); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.admin-content[b-1ipy14qin1] { flex: 1; padding: 1.75rem 2rem; max-width: 820px; }
.content-header[b-1ipy14qin1] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.content-title h3[b-1ipy14qin1] { margin: 0 0 0.25rem; font-size: 1.15rem; }
.content-description[b-1ipy14qin1] { margin: 0; color: var(--color-text-subtle); font-size: 0.85rem; max-width: 60ch; }

.btn-add[b-1ipy14qin1] { background: var(--color-primary, #2563eb); color: #fff; border: none; border-radius: 8px; padding: 0.5rem 0.9rem; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.btn-add:hover[b-1ipy14qin1] { filter: brightness(0.95); }

.blackout-form[b-1ipy14qin1] { border: 1px solid var(--color-border-light, #e5e7eb); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; background: var(--color-surface, #fff); }
.form-row[b-1ipy14qin1] { display: flex; flex-wrap: wrap; gap: 1rem; }
.form-group[b-1ipy14qin1] { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; flex: 1; min-width: 160px; }
.form-label[b-1ipy14qin1] { font-size: 0.78rem; font-weight: 600; color: var(--color-text-subtle, #6b7280); }
.form-input[b-1ipy14qin1], .form-select[b-1ipy14qin1] { padding: 0.45rem 0.6rem; border: 1px solid var(--color-border-light, #d1d5db); border-radius: 8px; font-size: 0.88rem; }

.kind-toggles[b-1ipy14qin1] { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.kind-toggle[b-1ipy14qin1] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; cursor: pointer; }

.form-actions[b-1ipy14qin1] { display: flex; gap: 0.6rem; margin-top: 0.4rem; justify-content: flex-end; }
.btn-save[b-1ipy14qin1] { background: var(--color-primary, #2563eb); color: #fff; border: none; border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.85rem; cursor: pointer; }
.btn-cancel-edit[b-1ipy14qin1] { background: transparent; color: var(--color-text-subtle, #6b7280); border: 1px solid var(--color-border-light, #d1d5db); border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.85rem; cursor: pointer; }
.btn-delete-inline[b-1ipy14qin1] { background: transparent; color: #dc2626; border: 1px solid #fca5a5; border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.85rem; cursor: pointer; margin-right: auto; }
.btn-delete-inline:hover[b-1ipy14qin1] { background: #fef2f2; }

.empty-state[b-1ipy14qin1] { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 2.5rem 1rem; color: var(--color-text-subtle, #6b7280); font-size: 0.88rem; border: 1px dashed var(--color-border-light, #e5e7eb); border-radius: 10px; }
.empty-icon[b-1ipy14qin1] { font-size: 1.6rem; }
.btn-link[b-1ipy14qin1] { background: none; border: none; color: var(--color-primary, #2563eb); cursor: pointer; font-size: 0.85rem; text-decoration: underline; }

.blackout-list[b-1ipy14qin1] { display: flex; flex-direction: column; gap: 0.65rem; }
.blackout-card[b-1ipy14qin1] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border: 1px solid var(--color-border-light, #e5e7eb); border-radius: 12px; padding: 0.85rem 1rem; background: var(--color-surface, #fff); }
.blackout-dates[b-1ipy14qin1] { font-weight: 600; font-size: 0.92rem; }
.blackout-meta[b-1ipy14qin1] { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.25rem; font-size: 0.82rem; color: var(--color-text-subtle, #6b7280); }
.blackout-reason[b-1ipy14qin1] { margin-top: 0.3rem; font-size: 0.82rem; color: var(--color-text-subtle, #6b7280); }
.blackout-actions[b-1ipy14qin1] { display: flex; gap: 0.4rem; flex-shrink: 0; }
.btn-edit[b-1ipy14qin1], .blackout-actions .btn-delete[b-1ipy14qin1] { background: transparent; border: 1px solid var(--color-border-light, #d1d5db); border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 0.8rem; cursor: pointer; }
.blackout-actions .btn-delete[b-1ipy14qin1] { color: #dc2626; border-color: #fca5a5; }
/* /Components/Pages/Admin/BreakOptions.razor.rz.scp.css */
/* ── Admin shell ───────────────────────────────── */

.admin-shell[b-ks9677a9ul] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Content area ─────────────────────────────── */

.admin-content[b-ks9677a9ul] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 720px;
}

.content-header[b-ks9677a9ul] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.content-title h3[b-ks9677a9ul] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-ks9677a9ul] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ── Settings card ────────────────────────────── */

.settings-card[b-ks9677a9ul] {
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    background: var(--color-white);
    overflow: hidden;
    margin-bottom: 2rem;
}

.setting-row[b-ks9677a9ul] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    gap: 1.5rem;
}

.setting-divider[b-ks9677a9ul] {
    height: 1px;
    background: var(--color-border-faint);
    margin: 0 1.25rem;
}

.setting-info[b-ks9677a9ul] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.setting-label[b-ks9677a9ul] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.setting-hint[b-ks9677a9ul] {
    font-size: 0.78rem;
    color: var(--color-text-subtle);
}

.setting-control[b-ks9677a9ul] {
    flex-shrink: 0;
}

.setting-select[b-ks9677a9ul] {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    min-width: 150px;
}

    .setting-select:focus[b-ks9677a9ul] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

.max-input-wrapper[b-ks9677a9ul] {
    position: relative;
    display: flex;
    align-items: center;
}

.setting-input[b-ks9677a9ul] {
    padding: 0.4rem 0.65rem;
    padding-right: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    width: 150px;
    box-sizing: border-box;
}

    .setting-input:focus[b-ks9677a9ul] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

.max-suffix[b-ks9677a9ul] {
    position: absolute;
    right: 0.65rem;
    font-size: 0.78rem;
    color: var(--color-text-subtle);
    pointer-events: none;
}

/* ── Preview ──────────────────────────────────── */

.preview-section[b-ks9677a9ul] {
    border-top: 1px solid var(--color-border-light);
    padding-top: 1.25rem;
}

    .preview-section h4[b-ks9677a9ul] {
        margin: 0 0 0.25rem;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.preview-hint[b-ks9677a9ul] {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
}

.preview-dropdown-wrapper[b-ks9677a9ul] {
    max-width: 220px;
    margin-bottom: 0.75rem;
}

.preview-select[b-ks9677a9ul] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
}

.preview-chips[b-ks9677a9ul] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.preview-chip[b-ks9677a9ul] {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-surface-alt);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-strong);
}

.preview-count[b-ks9677a9ul] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}
/* /Components/Pages/Admin/CompanySettings.razor.rz.scp.css */
/* ── Admin shell (shared layout) ───────────────── */

.admin-shell[b-codrewucl4] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Content area ─────────────────────────────── */

.admin-content[b-codrewucl4] {
    flex: 1;
    max-width: 1100px;
    padding: 1.75rem 2rem;
    position: relative;
}

.content-header[b-codrewucl4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.content-title h3[b-codrewucl4] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-codrewucl4] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.loading-state[b-codrewucl4] {
    padding: 3rem 0;
    text-align: center;
    color: var(--color-text-subtle);
    font-size: 0.9rem;
}

/* ── Category tabs ────────────────────────────── */

.settings-tabs[b-codrewucl4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--color-border-light);
    margin-bottom: 1.5rem;
}

.settings-tab[b-codrewucl4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border: none;
    background: none;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

    .settings-tab:hover[b-codrewucl4] {
        color: var(--color-text-strong);
    }

    .settings-tab.active[b-codrewucl4] {
        color: var(--color-primary-strong);
        border-bottom-color: var(--color-primary);
        font-weight: 600;
    }

.tab-icon[b-codrewucl4] {
    font-size: 1rem;
}

/* ── Settings panel ───────────────────────────── */

.settings-panel[b-codrewucl4] {
    animation: fadeIn-b-codrewucl4 0.15s ease;
}

@keyframes fadeIn-b-codrewucl4 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Section ──────────────────────────────────── */

.settings-section[b-codrewucl4] {
    margin-bottom: 2rem;
}

.section-header[b-codrewucl4] {
    margin-bottom: 1rem;
}

    .section-header h4[b-codrewucl4] {
        margin: 0 0 0.2rem;
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text);
    }

    .section-header p[b-codrewucl4] {
        margin: 0;
        font-size: 0.82rem;
        color: var(--color-text-muted);
    }

/* ── Settings grid ────────────────────────────── */

.settings-grid[b-codrewucl4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Setting card ─────────────────────────────── */

.setting-card[b-codrewucl4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .setting-card:hover[b-codrewucl4] {
        border-color: var(--color-border);
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    }

    .setting-card.indented[b-codrewucl4] {
        margin-left: 1.5rem;
        border-left: 3px solid var(--color-primary);
    }

.setting-info[b-codrewucl4] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.setting-label[b-codrewucl4] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.setting-hint[b-codrewucl4] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    line-height: 1.3;
}

.setting-control[b-codrewucl4] {
    flex-shrink: 0;
    min-width: 140px;
    display: flex;
    justify-content: flex-end;
}

/* ── Form inputs ──────────────────────────────── */

.form-input[b-codrewucl4] {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.84rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    max-width: 200px;
}

    .form-input:focus[b-codrewucl4] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

.form-input.invalid[b-codrewucl4] {
    border-color: var(--color-danger, #e53e3e);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12);
}

.field-error[b-codrewucl4] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--color-danger, #e53e3e);
}

select.form-input[b-codrewucl4] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 1.5rem;
}

/* ── Input with suffix / prefix ───────────────── */

.input-suffix-wrapper[b-codrewucl4],
.input-prefix-wrapper[b-codrewucl4] {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 200px;
}

    .input-suffix-wrapper .form-input[b-codrewucl4] {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
        max-width: none;
        flex: 1;
    }

    .input-prefix-wrapper .form-input[b-codrewucl4] {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
        max-width: none;
        flex: 1;
    }

.input-suffix[b-codrewucl4],
.input-prefix[b-codrewucl4] {
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.input-suffix[b-codrewucl4] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: none;
}

.input-prefix[b-codrewucl4] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: none;
}

/* ── Toggle switch ────────────────────────────── */

.toggle[b-codrewucl4] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

    .toggle input[b-codrewucl4] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.toggle-slider[b-codrewucl4] {
    position: absolute;
    inset: 0;
    background: var(--color-border);
    border-radius: 24px;
    transition: background 0.2s;
}

    .toggle-slider[b-codrewucl4]::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: var(--color-white);
        border-radius: 50%;
        transition: transform 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

.toggle input:checked + .toggle-slider[b-codrewucl4] {
    background: var(--color-primary);
}

.toggle input:checked + .toggle-slider[b-codrewucl4]::before {
    transform: translateX(20px);
}

.toggle input:focus + .toggle-slider[b-codrewucl4] {
    box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
}

/* ── Radio group (card style) ─────────────────── */

.radio-group[b-codrewucl4] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    max-width: 320px;
}

.radio-option[b-codrewucl4] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    .radio-option:hover[b-codrewucl4] {
        border-color: var(--color-border);
        background: var(--color-surface-alt);
    }

    .radio-option.selected[b-codrewucl4] {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
    }

    .radio-option input[type="radio"][b-codrewucl4] {
        margin-top: 0.15rem;
        accent-color: var(--color-primary);
    }

.radio-icon[b-codrewucl4] {
    font-size: 1rem;
    margin-top: 0.05rem;
}

.radio-text[b-codrewucl4] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.radio-label[b-codrewucl4] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.radio-hint[b-codrewucl4] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

/* ── Wide setting control ─────────────────────── */

.setting-control.wide[b-codrewucl4] {
    min-width: 240px;
}

    .setting-control.wide .form-input[b-codrewucl4] {
        max-width: 280px;
    }

/* ── Logo preview ─────────────────────────────── */

.logo-preview[b-codrewucl4] {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--color-border-light);
    padding: 4px;
    background: var(--color-surface-alt);
}

.preview-card .setting-info[b-codrewucl4] {
    flex: 0;
}

/* ── Quick links ──────────────────────────────── */

.quick-links[b-codrewucl4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.quick-link[b-codrewucl4] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .quick-link:hover[b-codrewucl4] {
        border-color: var(--color-primary);
        background: #f8fbff;
        box-shadow: 0 1px 4px rgba(46, 144, 250, 0.08);
    }

[data-theme="dark"] .quick-link:hover[b-codrewucl4] {
    background: var(--color-primary-bg-1);
    box-shadow: 0 1px 4px rgba(24, 160, 111, 0.15);
}

.quick-link-icon[b-codrewucl4] {
    font-size: 1.3rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-hover);
    border-radius: 8px;
    flex-shrink: 0;
}

    .quick-link:hover .quick-link-icon[b-codrewucl4] {
        background: var(--color-primary-soft);
    }

.quick-link-text[b-codrewucl4] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
    min-width: 0;
}

.quick-link-label[b-codrewucl4] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.quick-link-hint[b-codrewucl4] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.quick-link-arrow[b-codrewucl4] {
    font-size: 1rem;
    color: var(--color-border);
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}

    .quick-link:hover .quick-link-arrow[b-codrewucl4] {
        color: var(--color-primary);
        transform: translateX(2px);
    }

/* ── Disabled inputs ──────────────────────────── */

.form-input:disabled[b-codrewucl4] {
    background: var(--color-surface-alt);
    color: var(--color-text-subtle);
    cursor: not-allowed;
    border-style: dashed;
}
/* /Components/Pages/Admin/Departments.razor.rz.scp.css */
/* ── Admin shell ───────────────────────────────── */

.admin-shell[b-zqp2bcc389] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Content area ─────────────────────────────── */

.admin-content[b-zqp2bcc389] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 860px;
}

.content-header[b-zqp2bcc389] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.content-title h3[b-zqp2bcc389] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-zqp2bcc389] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.btn-add[b-zqp2bcc389] {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

    .btn-add:hover[b-zqp2bcc389] {
        background: var(--color-primary-hover);
    }

/* ── Department list ──────────────────────────── */

.dept-list[b-zqp2bcc389] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.dept-card[b-zqp2bcc389] {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-white);
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.15s;
    cursor: grab;
}

    .dept-card:hover[b-zqp2bcc389] {
        border-color: var(--color-border);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    .dept-card.dragging[b-zqp2bcc389] {
        opacity: 0.4;
        transform: scale(0.98);
    }

    .dept-card.drag-over-above[b-zqp2bcc389] {
        border-top: 2px solid var(--color-primary);
        margin-top: -1px;
    }

    .dept-card.drag-over-below[b-zqp2bcc389] {
        border-bottom: 2px solid var(--color-primary);
        margin-bottom: -1px;
    }

    .dept-card.editing[b-zqp2bcc389] {
        border-color: var(--color-primary-tint);
        background: var(--color-primary-bg-1);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.1);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        cursor: default;
    }

/* ── Drag handle ─────────────────────────────── */

.drag-handle[b-zqp2bcc389] {
    font-size: 1rem;
    color: var(--color-text-subtle);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    letter-spacing: 0.05em;
    transition: color 0.12s;
}

    .drag-handle:hover[b-zqp2bcc389] {
        color: var(--color-text-strong);
    }

/* ── Display mode ─────────────────────────────── */

.dept-info[b-zqp2bcc389] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.dept-color-bar[b-zqp2bcc389] {
    width: 4px;
    height: 28px;
    border-radius: 2px;
    flex-shrink: 0;
}

.dept-icon[b-zqp2bcc389] {
    font-size: 1.35rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    flex-shrink: 0;
}

.dept-name[b-zqp2bcc389] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.dept-color-badge[b-zqp2bcc389] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-white);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-family: "SF Mono", "Cascadia Code", monospace;
    letter-spacing: 0.02em;
}

/* ── Action buttons ───────────────────────────── */

.dept-actions[b-zqp2bcc389] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.order-buttons[b-zqp2bcc389] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.btn-order[b-zqp2bcc389] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.55rem;
    color: var(--color-text-muted);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1;
}

    .btn-order:first-child[b-zqp2bcc389] {
        border-radius: 4px 4px 0 0;
    }

    .btn-order:last-child[b-zqp2bcc389] {
        border-radius: 0 0 4px 4px;
        border-top: none;
    }

    .btn-order:hover:not(:disabled)[b-zqp2bcc389] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
        color: var(--color-primary-strong);
    }

    .btn-order:disabled[b-zqp2bcc389] {
        opacity: 0.3;
        cursor: default;
    }

.btn-dept[b-zqp2bcc389] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.12s, border-color 0.12s;
}

    .btn-dept.edit:hover[b-zqp2bcc389] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
    }

    .btn-dept.delete:hover[b-zqp2bcc389] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-tint);
    }

/* ── Inline edit form ─────────────────────────── */

.dept-edit-form[b-zqp2bcc389] {
    width: 100%;
}

.edit-row[b-zqp2bcc389] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.form-group[b-zqp2bcc389] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.icon-group[b-zqp2bcc389] {
    flex-shrink: 0;
}

.name-group[b-zqp2bcc389] {
    flex: 1;
    min-width: 160px;
}

.color-group[b-zqp2bcc389] {
    flex-shrink: 0;
}

.form-label[b-zqp2bcc389] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input[b-zqp2bcc389] {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-white);
    width: 100%;
    box-sizing: border-box;
}

    .form-input:focus[b-zqp2bcc389] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

/* ── Icon picker ──────────────────────────────── */

.icon-picker[b-zqp2bcc389] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    max-width: 175px;
}

.icon-choice[b-zqp2bcc389] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .icon-choice:hover[b-zqp2bcc389] {
        border-color: var(--color-primary-tint);
    }

    .icon-choice.selected[b-zqp2bcc389] {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.2);
    }

/* ── Color picker ─────────────────────────────── */

.color-picker[b-zqp2bcc389] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    max-width: 200px;
}

.color-choice[b-zqp2bcc389] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.1s;
}

    .color-choice:hover[b-zqp2bcc389] {
        transform: scale(1.15);
    }

    .color-choice.selected[b-zqp2bcc389] {
        border-color: var(--color-text-strong);
        box-shadow: 0 0 0 2px rgba(52, 64, 84, 0.2);
    }

.color-custom[b-zqp2bcc389] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.color-input-native[b-zqp2bcc389] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1px;
    cursor: pointer;
    background: var(--color-white);
}

    .color-input-native[b-zqp2bcc389]::-webkit-color-swatch-wrapper {
        padding: 2px;
    }

    .color-input-native[b-zqp2bcc389]::-webkit-color-swatch {
        border: none;
        border-radius: 4px;
    }

.color-hex[b-zqp2bcc389] {
    font-size: 0.75rem;
    font-family: "SF Mono", "Cascadia Code", monospace;
    color: var(--color-text-muted);
}

/* ── Edit actions ─────────────────────────────── */

.edit-actions[b-zqp2bcc389] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

.btn-save[b-zqp2bcc389] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-success-bright);
    border-radius: 6px;
    background: var(--color-success-bright);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-save:hover[b-zqp2bcc389] {
        background: var(--color-success-mid);
    }

.btn-cancel-edit[b-zqp2bcc389] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-cancel-edit:hover[b-zqp2bcc389] {
        background: var(--color-surface-alt);
    }

.btn-delete-dept[b-zqp2bcc389] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-danger-tint);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-danger-bright);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    margin-right: auto;
}

    .btn-delete-dept:hover[b-zqp2bcc389] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-light);
    }

.btn-add-dept[b-zqp2bcc389] {
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-primary-tint);
    border-radius: 8px;
    background: var(--color-primary-bg-5);
    color: var(--color-primary-deep);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-add-dept:hover[b-zqp2bcc389] {
        background: var(--color-drop-target);
    }

.new-dept-card[b-zqp2bcc389] {
    border: 2px dashed var(--color-primary-tint);
    background: var(--color-primary-bg-1);
}

.name-group .form-input[b-zqp2bcc389] {
    width: 100%;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
}

/* ── Empty state ──────────────────────────────── */

.empty-state[b-zqp2bcc389] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-subtle);
    font-size: 0.88rem;
    border: 1px dashed var(--color-border-light);
    border-radius: 10px;
}

.empty-icon[b-zqp2bcc389] {
    font-size: 2rem;
    opacity: 0.5;
}

.btn-link[b-zqp2bcc389] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

    .btn-link:hover[b-zqp2bcc389] {
        color: var(--color-primary-hover);
    }

/* ── Summary row ─────────────────────────────── */

.summary-row[b-zqp2bcc389] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.summary-card[b-zqp2bcc389] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-white);
}

.summary-value[b-zqp2bcc389] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.summary-label[b-zqp2bcc389] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* ── Department card (display mode) ──────────── */

.dept-display[b-zqp2bcc389] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.dept-details[b-zqp2bcc389] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dept-employee-count[b-zqp2bcc389] {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

/* ── Contract stat chips inside department card ── */

.dept-stats[b-zqp2bcc389] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border-faint);
    margin-top: 0.6rem;
    width: 100%;
}

.stat-chip[b-zqp2bcc389] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    font-size: 0.78rem;
}

.stat-count[b-zqp2bcc389] {
    font-weight: 700;
}

.stat-label[b-zqp2bcc389] {
    font-weight: 400;
    color: var(--color-text-muted);
}

.stat-chip.fixed[b-zqp2bcc389] {
    background: var(--color-success-soft);
    color: var(--color-success-deep);
}

.stat-chip.zero[b-zqp2bcc389] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.stat-chip.none[b-zqp2bcc389] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* ── Unassigned card ─────────────────────────── */

.unassigned-card[b-zqp2bcc389] {
    border-style: dashed;
    background: var(--color-surface-subtle);
}

.empty-hint[b-zqp2bcc389] {
    font-size: 0.78rem;
    color: var(--color-text-subtle);
}

/* ── Preview section ──────────────────────────── */

.preview-section[b-zqp2bcc389] {
    border-top: 1px solid var(--color-border-light);
    padding-top: 1.25rem;
}

    .preview-section h4[b-zqp2bcc389] {
        margin: 0 0 0.25rem;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.preview-hint[b-zqp2bcc389] {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
}

.preview-roster[b-zqp2bcc389] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    overflow: hidden;
}

.preview-dept-row[b-zqp2bcc389] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-faint);
}

    .preview-dept-row:last-child[b-zqp2bcc389] {
        border-bottom: none;
    }

.preview-dept-bar[b-zqp2bcc389] {
    width: 3px;
    height: 22px;
    border-radius: 2px;
    flex-shrink: 0;
}

.preview-dept-icon[b-zqp2bcc389] {
    font-size: 0.95rem;
}

.preview-dept-name[b-zqp2bcc389] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-strong);
    min-width: 80px;
}

.preview-dept-slots[b-zqp2bcc389] {
    display: flex;
    gap: 0.3rem;
    flex: 1;
}

.preview-slot[b-zqp2bcc389] {
    height: 18px;
    flex: 1;
    border-radius: 4px;
    max-width: 60px;
}

/* ── Employee list ────────────────────────────── */

.emp-toggle[b-zqp2bcc389] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
    border-top: 1px solid var(--color-surface-hover);
}

    .emp-toggle:hover[b-zqp2bcc389] {
        color: var(--color-text-strong);
    }

.emp-chevron[b-zqp2bcc389] {
    display: inline-block;
    transition: transform 0.15s;
    font-size: 0.7rem;
}

    .emp-chevron.open[b-zqp2bcc389] {
        transform: rotate(90deg);
    }

.emp-list[b-zqp2bcc389] {
    padding: 0 0.75rem 0.5rem;
}

.emp-row[b-zqp2bcc389] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-surface-hover);
    gap: 0.75rem;
}

    .emp-row:last-child[b-zqp2bcc389] {
        border-bottom: none;
    }

.emp-info[b-zqp2bcc389] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.emp-name[b-zqp2bcc389] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-contract[b-zqp2bcc389] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.emp-move-select[b-zqp2bcc389] {
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    cursor: pointer;
    min-width: 140px;
}

    .emp-move-select:hover[b-zqp2bcc389] {
        border-color: var(--color-primary-tint);
    }
/* /Components/Pages/Admin/FileManager.razor.rz.scp.css */
/* ══════════════════════════════════════════════════
   File Manager — Admin
   ══════════════════════════════════════════════════ */

/* ── Admin shell ───────────────────────────────── */

.admin-shell[b-1hzhy0iisa] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Content area ─────────────────────────────── */

.admin-content[b-1hzhy0iisa] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 1100px;
}

.content-header[b-1hzhy0iisa] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.content-title h3[b-1hzhy0iisa] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-1hzhy0iisa] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ── Scope tabs ──────────────────────────────── */

.scope-tabs[b-1hzhy0iisa] {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-border-light);
}

.scope-tab[b-1hzhy0iisa] {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

    .scope-tab:hover[b-1hzhy0iisa] {
        color: var(--color-text-strong);
    }

    .scope-tab.active[b-1hzhy0iisa] {
        color: #1570ef;
        border-bottom-color: #1570ef;
    }

/* ── Scope hint ─────────────────────────────── */

.scope-hint[b-1hzhy0iisa] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    margin-bottom: 1rem;
}

.scope-prompt[b-1hzhy0iisa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-warning-bg-1);
    border: 1px solid var(--color-warning-tint);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--color-warning-strong);
    margin-bottom: 1rem;
}

/* ── Scope filter ────────────────────────────── */

.scope-filter[b-1hzhy0iisa] {
    margin-bottom: 1rem;
}

    .scope-filter .form-select[b-1hzhy0iisa] {
        padding: 0.35rem 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        font-size: 0.82rem;
        min-width: 260px;
    }

/* ── Upload area ─────────────────────────────── */

.upload-area[b-1hzhy0iisa] {
    margin-bottom: 1.25rem;
}

.upload-dropzone[b-1hzhy0iisa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.25rem 1.5rem;
    border: 2px dashed var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-alt);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    .upload-dropzone:hover[b-1hzhy0iisa] {
        border-color: var(--color-text-subtle);
        background: var(--color-surface-hover);
    }

    .upload-dropzone input[type="file"][b-1hzhy0iisa] {
        display: none;
    }

.upload-icon[b-1hzhy0iisa] {
    font-size: 1.5rem;
}

.upload-text[b-1hzhy0iisa] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.upload-hint[b-1hzhy0iisa] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.upload-progress[b-1hzhy0iisa] {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ── Tag filter ──────────────────────────────── */

.tag-filter[b-1hzhy0iisa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.tag-chip[b-1hzhy0iisa] {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-border-light);
    border-radius: 20px;
    background: var(--color-white);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .tag-chip:hover[b-1hzhy0iisa] {
        background: var(--color-surface-hover);
    }

    .tag-chip.active[b-1hzhy0iisa] {
        background: #e0e7ff;
        border-color: #a4bcfd;
        color: var(--color-info);
    }

/* ── Document list ───────────────────────────── */

.doc-list[b-1hzhy0iisa] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.doc-card[b-1hzhy0iisa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-white);
    transition: box-shadow 0.12s;
}

    .doc-card:hover[b-1hzhy0iisa] {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

.doc-icon[b-1hzhy0iisa] {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.doc-info[b-1hzhy0iisa] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.doc-name[b-1hzhy0iisa] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-meta[b-1hzhy0iisa] {
    font-size: 0.7rem;
    color: var(--color-text-subtle);
}

.doc-description[b-1hzhy0iisa] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.doc-group-badge[b-1hzhy0iisa] {
    font-size: 0.7rem;
    color: var(--color-primary-strong);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-tint-2);
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    width: fit-content;
}

.doc-tag[b-1hzhy0iisa] {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 12px;
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
}

.doc-actions[b-1hzhy0iisa] {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* ── Action buttons ──────────────────────────── */

.btn-option[b-1hzhy0iisa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.12s, border-color 0.12s;
}

    .btn-option.edit:hover[b-1hzhy0iisa] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
    }

    .btn-option.delete:hover[b-1hzhy0iisa] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-tint);
    }

/* ── Empty state ─────────────────────────────── */

.empty-state[b-1hzhy0iisa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2rem 1rem;
    color: var(--color-text-subtle);
    font-size: 0.85rem;
}

.empty-icon[b-1hzhy0iisa] {
    font-size: 2rem;
}

/* ── Tag editor popover ─────────────────────── */

.tag-editor-wrapper[b-1hzhy0iisa] {
    position: relative;
}

.tag-popover[b-1hzhy0iisa] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 240px;
    padding: 0.6rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.tag-popover-header[b-1hzhy0iisa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tag-popover-title[b-1hzhy0iisa] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-strong);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tag-clear-btn[b-1hzhy0iisa] {
    border: none;
    background: none;
    color: var(--color-danger-mid);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    transition: background 0.12s;
}

    .tag-clear-btn:hover[b-1hzhy0iisa] {
        background: var(--color-danger-bg-1);
    }

.tag-input[b-1hzhy0iisa] {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .tag-input:focus[b-1hzhy0iisa] {
        border-color: var(--color-primary-tint);
        box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.1);
    }

.tag-suggestions[b-1hzhy0iisa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-height: 120px;
    overflow-y: auto;
}

.tag-suggestion[b-1hzhy0iisa] {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    background: var(--color-surface-alt);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}

    .tag-suggestion:hover[b-1hzhy0iisa] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
        color: #1570ef;
    }

    .tag-suggestion.current[b-1hzhy0iisa] {
        background: #e0e7ff;
        border-color: #a4bcfd;
        color: var(--color-info);
        font-weight: 600;
    }

.tag-popover-footer[b-1hzhy0iisa] {
    display: flex;
    gap: 0.3rem;
    justify-content: flex-end;
    padding-top: 0.2rem;
    border-top: 1px solid var(--color-surface-hover);
}

.tag-save-btn[b-1hzhy0iisa] {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

    .tag-save-btn:hover[b-1hzhy0iisa] {
        background: var(--color-primary-hover);
    }

.tag-cancel-btn[b-1hzhy0iisa] {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

    .tag-cancel-btn:hover[b-1hzhy0iisa] {
        background: var(--color-surface-hover);
    }
/* /Components/Pages/Admin/KioskSettings.razor.rz.scp.css */
/* ── Admin shell alignment (same pattern as other admin pages) ──────────── */
.admin-shell[b-yiz71vt8rr] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.admin-content[b-yiz71vt8rr] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 820px;
}

.content-header[b-yiz71vt8rr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.content-title h3[b-yiz71vt8rr] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-yiz71vt8rr] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ── Shared card/setting styles (mirrors BreakOptions page) ─────────────── */
.admin-section[b-yiz71vt8rr] {
    margin-bottom: 1rem;
}

.settings-card[b-yiz71vt8rr] {
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    background: var(--color-white);
    overflow: hidden;
}

.section-header[b-yiz71vt8rr] {
    padding: 1rem 1.25rem;
}

.section-header h4[b-yiz71vt8rr] {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.setting-row[b-yiz71vt8rr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.setting-divider[b-yiz71vt8rr] {
    height: 1px;
    background: var(--color-border-faint);
    margin: 0 1.25rem;
}

.setting-info[b-yiz71vt8rr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 260px;
    flex: 1;
}

.setting-label[b-yiz71vt8rr] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.setting-hint[b-yiz71vt8rr] {
    font-size: 0.78rem;
    color: var(--color-text-subtle);
}

.setting-control[b-yiz71vt8rr] {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Button set consistent with existing admin pages ─────────────────────── */
.btn-primary[b-yiz71vt8rr], .btn-secondary[b-yiz71vt8rr], .btn-danger[b-yiz71vt8rr], .btn-link[b-yiz71vt8rr] {
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all .15s;
    border: 1px solid transparent;
}

.btn-primary[b-yiz71vt8rr] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.btn-primary:hover[b-yiz71vt8rr] { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-secondary[b-yiz71vt8rr] {
    background: var(--color-white);
    border-color: var(--color-border);
    color: var(--color-text-strong);
}
.btn-secondary:hover[b-yiz71vt8rr] { background: var(--color-surface-alt); }

.btn-danger[b-yiz71vt8rr] {
    background: var(--color-danger-bg-1, #fef2f2);
    border-color: var(--color-danger-tint, #fecaca);
    color: var(--color-danger, #b91c1c);
}
.btn-danger:hover[b-yiz71vt8rr] { background: var(--color-danger-bg-2, #fee2e2); }

.btn-link[b-yiz71vt8rr] {
    background: transparent;
    border: none;
    color: var(--color-primary);
    text-decoration: underline;
    padding: 0.2rem 0.35rem;
}
.btn-link:hover[b-yiz71vt8rr] { color: var(--color-primary-hover); }

.btn-sm[b-yiz71vt8rr] {
    padding: 0.3rem 0.7rem;
    font-size: 0.76rem;
}

/* ── Kiosk status row ────────────────────────────────────────────────────── */
.kiosk-url-setting-row[b-yiz71vt8rr] {
    align-items: flex-start;
}

.kiosk-url[b-yiz71vt8rr] {
    margin-top: 0.25rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    padding: .35rem .55rem;
    font-size: .8rem;
    color: var(--color-text-muted);
    word-break: break-all;
}

.kiosk-actions-row[b-yiz71vt8rr] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.kiosk-status-msg[b-yiz71vt8rr] {
    font-size: .85rem;
    color: var(--color-primary);
    font-weight: 500;
}

/* ── PIN table ───────────────────────────────────────────────────────────── */
.kiosk-pin-table[b-yiz71vt8rr] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0 1.25rem 1.1rem;
}

.kiosk-pin-row[b-yiz71vt8rr] {
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    padding: .75rem .9rem;
    background: var(--color-surface-alt);
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.kiosk-pin-main[b-yiz71vt8rr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.kiosk-pin-name[b-yiz71vt8rr] {
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.kiosk-pin-status[b-yiz71vt8rr] {
    font-size: .78rem;
    font-weight: 500;
}
.kiosk-pin-status.has-pin[b-yiz71vt8rr]  { color: #16a34a; }
.kiosk-pin-status.no-pin[b-yiz71vt8rr]   { color: var(--color-text-subtle); }

.kiosk-pin-edit[b-yiz71vt8rr],
.kiosk-pin-actions[b-yiz71vt8rr] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.kiosk-pin-input[b-yiz71vt8rr] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: .35rem .6rem;
    font-size: .85rem;
    width: 110px;
    letter-spacing: .12em;
    background: var(--color-white);
}

.kiosk-pin-input:focus[b-yiz71vt8rr] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
}

.kiosk-pin-error[b-yiz71vt8rr] {
    color: var(--color-danger, #b91c1c);
    font-size: .78rem;
}
/* /Components/Pages/Admin/LeaveBudgets.razor.rz.scp.css */
.admin-shell[b-kd3326iw4n] { display: flex; min-height: calc(100vh - 56px); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.admin-content[b-kd3326iw4n] { flex: 1; padding: 1.75rem 2rem; max-width: 720px; }
.admin-content.wide[b-kd3326iw4n] { max-width: 1060px; }
.content-header[b-kd3326iw4n] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.content-title h3[b-kd3326iw4n] { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--color-text); }
.header-actions[b-kd3326iw4n] { display: flex; align-items: center; gap: 0.65rem; }
.year-nav[b-kd3326iw4n] { display: flex; align-items: center; gap: 0.35rem; }
.year-label[b-kd3326iw4n] { font-weight: 700; font-size: 0.9rem; min-width: 50px; text-align: center; color: var(--color-text-strong); }

/* Toolbar */
.toolbar[b-kd3326iw4n] { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.65rem 0; margin-bottom: 0.75rem; border-bottom: 1px solid var(--color-border-faint); flex-wrap: wrap; }
.toolbar-left[b-kd3326iw4n] { display: flex; align-items: center; gap: 0.5rem; }
.toolbar-right[b-kd3326iw4n] { display: flex; align-items: center; gap: 0.75rem; }
.search-wrapper[b-kd3326iw4n] { position: relative; display: flex; align-items: center; }
.search-icon[b-kd3326iw4n] { position: absolute; left: 0.5rem; font-size: 0.8rem; pointer-events: none; opacity: 0.5; }
.search-input[b-kd3326iw4n] { padding: 0.35rem 0.5rem 0.35rem 1.8rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.82rem; width: 200px; color: var(--color-text-strong); background: var(--color-white); }
.search-input:focus[b-kd3326iw4n] { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(46,144,250,0.12); }
.search-input[b-kd3326iw4n]::placeholder { color: var(--color-text-subtle); }
.search-clear[b-kd3326iw4n] { position: absolute; right: 0.4rem; background: none; border: none; color: var(--color-text-subtle); font-size: 1rem; cursor: pointer; padding: 0; line-height: 1; }
.search-clear:hover[b-kd3326iw4n] { color: var(--color-text-strong); }
.filter-select[b-kd3326iw4n] { padding: 0.35rem 0.55rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.82rem; color: var(--color-text-strong); background: var(--color-white); cursor: pointer; }
.filter-select:focus[b-kd3326iw4n] { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(46,144,250,0.12); }
.toolbar-count[b-kd3326iw4n] { font-size: 0.75rem; color: var(--color-text-subtle); white-space: nowrap; }

/* Budget table */
.budget-table-wrapper[b-kd3326iw4n] { overflow-x: auto; margin-bottom: 1.5rem; }
.budget-table[b-kd3326iw4n] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.budget-table th[b-kd3326iw4n] { padding: 0.5rem 0.6rem; text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); background: var(--color-surface-alt); white-space: nowrap; }
.budget-table td[b-kd3326iw4n] { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--color-border-faint); vertical-align: middle; }
.col-emp[b-kd3326iw4n] { width: 170px; }
.emp-name[b-kd3326iw4n] { display: block; font-weight: 600; color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-leave[b-kd3326iw4n] { min-width: 100px; }
.col-total[b-kd3326iw4n] { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.total-used[b-kd3326iw4n] { font-weight: 600; color: var(--color-text-strong); }

/* Department/group header row */
.dept-header-row[b-kd3326iw4n] { cursor: pointer; }
.dept-header-row td[b-kd3326iw4n] { background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border-light); padding: 0.5rem 0.6rem; }
.dept-header[b-kd3326iw4n] { display: flex; align-items: center; gap: 0.45rem; }
.dept-chevron[b-kd3326iw4n] { font-size: 0.65rem; color: var(--color-text-subtle); width: 14px; flex-shrink: 0; }
.dept-icon[b-kd3326iw4n] { font-size: 1rem; }
.dept-name[b-kd3326iw4n] { font-size: 0.85rem; font-weight: 700; color: var(--color-text-strong); }
.dept-count[b-kd3326iw4n] { font-size: 0.72rem; color: var(--color-text-subtle); font-weight: 400; }
.dept-header-row:hover td[b-kd3326iw4n] { background: var(--color-surface-hover); }

/* Department/group subtotal row */
.dept-subtotal-row td[b-kd3326iw4n] { background: var(--color-surface-alt); border-bottom: 2px solid var(--color-border-light); }
.subtotal-label[b-kd3326iw4n] { font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); font-style: italic; }
.subtotal-cell[b-kd3326iw4n] { font-variant-numeric: tabular-nums; }
.subtotal-used[b-kd3326iw4n] { font-weight: 600; color: var(--color-text-strong); font-size: 0.78rem; }

/* Budget cell */
.budget-cell[b-kd3326iw4n] { display: flex; align-items: baseline; gap: 0.15rem; font-variant-numeric: tabular-nums; }
.budget-used[b-kd3326iw4n] { font-weight: 600; color: var(--color-text-strong); }
.budget-unit[b-kd3326iw4n] { color: var(--color-text-subtle); font-size: 0.72rem; }

/* Empty state */
.empty-state[b-kd3326iw4n] { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 2.5rem 1rem; color: var(--color-text-subtle); font-size: 0.88rem; border: 1px dashed var(--color-border-light); border-radius: 10px; margin-bottom: 1.5rem; }
.empty-icon[b-kd3326iw4n] { font-size: 2rem; opacity: 0.5; }
.btn-link[b-kd3326iw4n] { background: none; border: none; color: var(--color-primary); font-weight: 600; font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 0; }
.btn-link:hover[b-kd3326iw4n] { color: var(--color-primary-hover); }

/* Unlimited types section */
.unlimited-section[b-kd3326iw4n] { border-top: 1px solid var(--color-border-light); padding-top: 1.25rem; }
.unlimited-section h4[b-kd3326iw4n] { margin: 0 0 0.25rem; font-size: 0.88rem; font-weight: 600; color: var(--color-text-strong); }
.unlimited-hint[b-kd3326iw4n] { margin: 0 0 0.65rem; font-size: 0.8rem; color: var(--color-text-subtle); }
.unlimited-list[b-kd3326iw4n] { display: flex; flex-direction: column; gap: 0.35rem; }
.unlimited-item[b-kd3326iw4n] { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem; background: var(--color-surface-alt); border-radius: 8px; }
.unlimited-icon[b-kd3326iw4n] { font-size: 0.95rem; }
.unlimited-name[b-kd3326iw4n] { font-size: 0.82rem; font-weight: 600; color: var(--color-text-strong); }
.unlimited-used[b-kd3326iw4n] { font-size: 0.78rem; color: var(--color-text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
/* /Components/Pages/Admin/LeaveGrants.razor.rz.scp.css */
.admin-shell[b-erhcxo789m] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.admin-content[b-erhcxo789m] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 720px;
}

    .admin-content.wide[b-erhcxo789m] {
        max-width: 1200px;
    }

.content-header[b-erhcxo789m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.content-title h3[b-erhcxo789m] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-erhcxo789m] {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--color-text-subtle);
}

.header-actions[b-erhcxo789m] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.year-nav[b-erhcxo789m] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.year-label[b-erhcxo789m] {
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 50px;
    text-align: center;
    color: var(--color-text-strong);
}

.toolbar[b-erhcxo789m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border-faint);
    flex-wrap: wrap;
}

.toolbar-left[b-erhcxo789m] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.toolbar-right[b-erhcxo789m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-label[b-erhcxo789m] {
    font-size: 0.78rem;
    color: var(--color-text-subtle);
    margin-right: 0.2rem;
}

.toolbar-count[b-erhcxo789m] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    white-space: nowrap;
}

.chip[b-erhcxo789m] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-size: 0.76rem;
    background: var(--color-white);
    color: var(--color-text-strong);
}

    .chip.selected[b-erhcxo789m] {
        border-color: var(--color-primary);
        background: rgba(46,144,250,0.08);
    }

    .chip input[b-erhcxo789m] {
        margin: 0;
    }

.budget-table-wrapper[b-erhcxo789m] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.budget-table[b-erhcxo789m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

    .budget-table th[b-erhcxo789m] {
        padding: 0.5rem 0.6rem;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-muted);
        background: var(--color-surface-alt);
        white-space: nowrap;
    }

    .budget-table td[b-erhcxo789m] {
        padding: 0.55rem 0.6rem;
        border-bottom: 1px solid var(--color-border-faint);
        vertical-align: middle;
    }

.col-check[b-erhcxo789m] {
    width: 36px;
}

.col-emp[b-erhcxo789m] {
    min-width: 180px;
}

.col-meta[b-erhcxo789m] {
    min-width: 110px;
}

.col-leave[b-erhcxo789m] {
    min-width: 100px;
}

.col-total[b-erhcxo789m] {
    min-width: 95px;
    white-space: nowrap;
}

.emp-name[b-erhcxo789m] {
    display: block;
    font-weight: 600;
    color: var(--color-text-strong);
}

.emp-link[b-erhcxo789m] {
    display: inline-block;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.emp-link:hover[b-erhcxo789m] {
    text-decoration: underline;
}

.emp-sub[b-erhcxo789m] {
    display: block;
    font-size: 0.74rem;
    color: var(--color-text-subtle);
}

.meta-sub[b-erhcxo789m] {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.proration-warning[b-erhcxo789m] {
    color: #f59e0b;
    margin-left: 0.2rem;
    font-weight: 700;
    cursor: help;
}

.grant-hours[b-erhcxo789m] {
    display: block;
    font-variant-numeric: tabular-nums;
}

.existing-hint[b-erhcxo789m] {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}

    .existing-hint.existing-warn[b-erhcxo789m] {
        color: #b45309;
    }

.existing-saldo[b-erhcxo789m] {
    opacity: 0.75;
}

.badge[b-erhcxo789m] {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

    .badge.warn[b-erhcxo789m] {
        background: rgba(245,158,11,0.15);
        color: #b45309;
    }

.actions-panel[b-erhcxo789m] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-surface-alt);
}

.form-label[b-erhcxo789m] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.form-input[b-erhcxo789m] {
    flex: 1;
    min-width: 220px;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--color-text-strong);
    background: var(--color-white);
}

    .form-input:focus[b-erhcxo789m] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46,144,250,0.12);
    }

.btn-primary[b-erhcxo789m], .btn-secondary[b-erhcxo789m], .btn-nav[b-erhcxo789m] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}

.btn-primary[b-erhcxo789m] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

    .btn-primary:disabled[b-erhcxo789m] {
        opacity: 0.6;
        cursor: default;
    }

.empty-state[b-erhcxo789m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2rem 1rem;
    color: var(--color-text-subtle);
    font-size: 0.88rem;
    border: 1px dashed var(--color-border-light);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.empty-icon[b-erhcxo789m] {
    font-size: 1.7rem;
    opacity: 0.6;
}
/* /Components/Pages/Admin/LeaveTypes.razor.rz.scp.css */
.admin-shell[b-rar4xq92k9] { display: flex; min-height: calc(100vh - 56px); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.admin-content[b-rar4xq92k9] { flex: 1; padding: 1.75rem 2rem; max-width: 720px; }
.content-header[b-rar4xq92k9] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.content-title h3[b-rar4xq92k9] { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 700; color: var(--color-text); }
.content-description[b-rar4xq92k9] { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.btn-add[b-rar4xq92k9] { padding: 0.45rem 1rem; border: 1px solid var(--color-primary); border-radius: 8px; background: var(--color-primary); color: var(--color-white); font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.btn-add:hover[b-rar4xq92k9] { background: var(--color-primary-hover); }
.type-list[b-rar4xq92k9] { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.type-card[b-rar4xq92k9] { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; border: 1px solid var(--color-border-light); border-radius: 10px; background: var(--color-white); transition: border-color 0.15s, box-shadow 0.15s; }
.type-card:hover[b-rar4xq92k9] { border-color: var(--color-border); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.type-card.editing[b-rar4xq92k9] { border-color: var(--color-primary-tint); background: var(--color-primary-bg-1); box-shadow: 0 0 0 3px rgba(46,144,250,0.1); flex-direction: column; align-items: stretch; padding: 1rem; }
.type-card.inactive[b-rar4xq92k9] { opacity: 0.55; }
.type-info[b-rar4xq92k9] { display: flex; align-items: center; gap: 0.65rem; flex: 1; }
.type-icon[b-rar4xq92k9] { font-size: 1.35rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: 8px; flex-shrink: 0; }
.type-details[b-rar4xq92k9] { display: flex; flex-direction: column; gap: 0.05rem; }
.type-name[b-rar4xq92k9] { font-size: 0.92rem; font-weight: 600; color: var(--color-text-strong); display: flex; align-items: center; gap: 0.4rem; }
.system-badge[b-rar4xq92k9] { font-size: 0.65rem; font-weight: 600; color: #6366f1; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 4px; padding: 0.05rem 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.inactive-badge[b-rar4xq92k9] { font-size: 0.65rem; font-weight: 600; color: var(--color-danger-mid); background: var(--color-danger-bg-1); border: 1px solid var(--color-danger-tint); border-radius: 4px; padding: 0.05rem 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.type-meta[b-rar4xq92k9] { display: flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--color-text-muted); }
.meta-tag[b-rar4xq92k9] { font-size: 0.72rem; color: var(--color-text-secondary); background: var(--color-surface-hover); border-radius: 4px; padding: 0.1rem 0.35rem; }
.meta-unlimited[b-rar4xq92k9] { color: var(--color-text-subtle); font-style: italic; }
.type-actions[b-rar4xq92k9] { display: flex; gap: 0.3rem; }
.btn-type[b-rar4xq92k9] { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border-light); border-radius: 6px; background: var(--color-white); cursor: pointer; font-size: 0.85rem; transition: background 0.12s, border-color 0.12s; }
.btn-type.edit:hover[b-rar4xq92k9] { background: var(--color-primary-soft); border-color: var(--color-primary-tint); }
.btn-type.delete:hover[b-rar4xq92k9] { background: var(--color-danger-bg-1); border-color: var(--color-danger-tint); }
.type-edit-form[b-rar4xq92k9] { width: 100%; }
.edit-row[b-rar4xq92k9] { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.65rem; }
.form-group[b-rar4xq92k9] { display: flex; flex-direction: column; gap: 0.25rem; }
.icon-group[b-rar4xq92k9] { flex-shrink: 0; }
.name-group[b-rar4xq92k9] { flex: 1; min-width: 160px; }
.toggle-group[b-rar4xq92k9] { flex-shrink: 0; }
.form-label[b-rar4xq92k9] { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.form-input[b-rar4xq92k9] { padding: 0.4rem 0.55rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.85rem; color: var(--color-text); background: var(--color-white); width: 100%; box-sizing: border-box; }
.form-input:focus[b-rar4xq92k9] { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(46,144,250,0.12); }
.icon-picker[b-rar4xq92k9] { display: flex; gap: 0.25rem; flex-wrap: wrap; max-width: 200px; }
.icon-choice[b-rar4xq92k9] { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-light); border-radius: 6px; background: var(--color-white); cursor: pointer; font-size: 1rem; transition: border-color 0.12s; }
.icon-choice:hover[b-rar4xq92k9] { border-color: var(--color-primary-tint); }
.icon-choice.selected[b-rar4xq92k9] { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 2px rgba(46,144,250,0.2); }
.toggle-label[b-rar4xq92k9] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--color-text-strong); cursor: pointer; padding: 0.3rem 0; }
.edit-actions[b-rar4xq92k9] { display: flex; gap: 0.4rem; margin-top: 0.75rem; justify-content: flex-end; }
.btn-save[b-rar4xq92k9] { padding: 0.35rem 0.85rem; border: 1px solid var(--color-success-bright); border-radius: 6px; background: var(--color-success-bright); color: var(--color-white); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.btn-save:hover[b-rar4xq92k9] { background: var(--color-success-mid); }
.btn-cancel-edit[b-rar4xq92k9] { padding: 0.35rem 0.85rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-white); color: var(--color-text-strong); font-size: 0.8rem; font-weight: 500; cursor: pointer; }
.btn-cancel-edit:hover[b-rar4xq92k9] { background: var(--color-surface-alt); }
.empty-state[b-rar4xq92k9] { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 2.5rem 1rem; color: var(--color-text-subtle); font-size: 0.88rem; border: 1px dashed var(--color-border-light); border-radius: 10px; }
.empty-icon[b-rar4xq92k9] { font-size: 2rem; opacity: 0.5; }
.btn-link[b-rar4xq92k9] { background: none; border: none; color: var(--color-primary); font-weight: 600; font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 0; }
.btn-link:hover[b-rar4xq92k9] { color: var(--color-primary-hover); }
.info-box[b-rar4xq92k9] { display: flex; gap: 0.65rem; padding: 0.85rem 1rem; background: var(--color-warning-bg-1); border: 1px solid var(--color-warning-tint); border-radius: 10px; }
.info-icon[b-rar4xq92k9] { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; }
.info-text[b-rar4xq92k9] { font-size: 0.8rem; color: var(--color-warning-strong); line-height: 1.45; }
.info-text strong[b-rar4xq92k9] { display: block; margin-bottom: 0.2rem; font-size: 0.82rem; }
.info-text p[b-rar4xq92k9] { margin: 0 0 0.25rem; }
.info-text p:last-child[b-rar4xq92k9] { margin-bottom: 0; }

[data-theme="dark"] .info-box[b-rar4xq92k9] { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.3); }
[data-theme="dark"] .info-text[b-rar4xq92k9] { color: #fde68a; }
/* /Components/Pages/Admin/MealOptions.razor.rz.scp.css */
/* ── Admin shell ───────────────────────────────── */

.admin-shell[b-7wftos7zfj] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Content area ─────────────────────────────── */

.admin-content[b-7wftos7zfj] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 720px;
}

.content-header[b-7wftos7zfj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.content-title h3[b-7wftos7zfj] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-7wftos7zfj] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.btn-add[b-7wftos7zfj] {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

    .btn-add:hover[b-7wftos7zfj] {
        background: var(--color-primary-hover);
    }

/* ── Options list ─────────────────────────────── */

.options-list[b-7wftos7zfj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.option-card[b-7wftos7zfj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .option-card:hover[b-7wftos7zfj] {
        border-color: var(--color-border);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    .option-card.editing[b-7wftos7zfj] {
        border-color: var(--color-primary-tint);
        background: var(--color-primary-bg-1);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.1);
        flex-direction: column;
        align-items: stretch;
    }

/* ── Option display ───────────────────────────── */

.option-info[b-7wftos7zfj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.option-icon[b-7wftos7zfj] {
    font-size: 1.5rem;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    flex-shrink: 0;
}

.option-name[b-7wftos7zfj] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.option-price[b-7wftos7zfj] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 0.15rem 0.55rem;
    background: var(--color-surface-hover);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

/* ── Option action buttons ────────────────────── */

.option-actions[b-7wftos7zfj] {
    display: flex;
    gap: 0.3rem;
}

.btn-option[b-7wftos7zfj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.12s, border-color 0.12s;
}

    .btn-option.edit:hover[b-7wftos7zfj] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
    }

    .btn-option.delete:hover[b-7wftos7zfj] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-tint);
    }

/* ── Inline edit form ─────────────────────────── */

.option-edit-form[b-7wftos7zfj] {
    width: 100%;
}

.edit-row[b-7wftos7zfj] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.form-group[b-7wftos7zfj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.icon-group[b-7wftos7zfj] {
    flex-shrink: 0;
}

.name-group[b-7wftos7zfj] {
    flex: 1;
}

.price-group[b-7wftos7zfj] {
    width: 110px;
    flex-shrink: 0;
}

.form-label[b-7wftos7zfj] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input[b-7wftos7zfj] {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-white);
    width: 100%;
    box-sizing: border-box;
}

    .form-input:focus[b-7wftos7zfj] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

/* ── Icon picker ──────────────────────────────── */

.icon-picker[b-7wftos7zfj] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.icon-choice[b-7wftos7zfj] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .icon-choice:hover[b-7wftos7zfj] {
        border-color: var(--color-primary-tint);
    }

    .icon-choice.selected[b-7wftos7zfj] {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.2);
    }

/* ── Price input ──────────────────────────────── */

.price-input-wrapper[b-7wftos7zfj] {
    position: relative;
    display: flex;
    align-items: center;
}

.price-prefix[b-7wftos7zfj] {
    position: absolute;
    left: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.price-input[b-7wftos7zfj] {
    padding-left: 1.4rem !important;
}

/* ── Edit actions ─────────────────────────────── */

.edit-actions[b-7wftos7zfj] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

.btn-save[b-7wftos7zfj] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-success-bright);
    border-radius: 6px;
    background: var(--color-success-bright);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-save:hover[b-7wftos7zfj] {
        background: var(--color-success-mid);
    }

.btn-cancel-edit[b-7wftos7zfj] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-cancel-edit:hover[b-7wftos7zfj] {
        background: var(--color-surface-alt);
    }

/* ── Empty state ──────────────────────────────── */

.empty-state[b-7wftos7zfj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-subtle);
    font-size: 0.88rem;
    border: 1px dashed var(--color-border-light);
    border-radius: 10px;
}

.empty-icon[b-7wftos7zfj] {
    font-size: 2rem;
    opacity: 0.5;
}

.btn-link[b-7wftos7zfj] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

    .btn-link:hover[b-7wftos7zfj] {
        color: var(--color-primary-hover);
    }

/* ── Preview section ──────────────────────────── */

.preview-section[b-7wftos7zfj] {
    border-top: 1px solid var(--color-border-light);
    padding-top: 1.25rem;
}

    .preview-section h4[b-7wftos7zfj] {
        margin: 0 0 0.25rem;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.preview-hint[b-7wftos7zfj] {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
}

.preview-select-wrapper[b-7wftos7zfj] {
    max-width: 280px;
}

.preview-select[b-7wftos7zfj] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
}
/* /Components/Pages/Admin/SendNotification.razor.rz.scp.css */
/* ── Admin shell ───────────────────────────────────────── */

.admin-shell[b-5hhgyzt1rs] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.admin-content[b-5hhgyzt1rs] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 760px;
}

.content-header[b-5hhgyzt1rs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.content-title h3[b-5hhgyzt1rs] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-5hhgyzt1rs] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ── Settings card (mirrors BreakOptions) ─────────────── */

.settings-card[b-5hhgyzt1rs] {
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    background: var(--color-white);
    overflow: hidden;
    margin-bottom: 2rem;
}

.setting-row[b-5hhgyzt1rs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    gap: 1.5rem;
}

.setting-divider[b-5hhgyzt1rs] {
    height: 1px;
    background: var(--color-border-faint);
    margin: 0 1.25rem;
}

.setting-info[b-5hhgyzt1rs] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.setting-label[b-5hhgyzt1rs] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.setting-hint[b-5hhgyzt1rs] {
    font-size: 0.78rem;
    color: var(--color-text-subtle);
}

.setting-control[b-5hhgyzt1rs] {
    flex-shrink: 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.setting-select[b-5hhgyzt1rs],
.setting-input[b-5hhgyzt1rs] {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

    .setting-select:focus[b-5hhgyzt1rs],
    .setting-input:focus[b-5hhgyzt1rs] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

textarea.setting-input[b-5hhgyzt1rs] {
    resize: vertical;
    min-height: 100px;
}

/* ── Scope radios ─────────────────────────────────────── */

.scope-radios[b-5hhgyzt1rs] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .scope-radios label[b-5hhgyzt1rs] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.88rem;
        color: var(--color-text-strong);
        cursor: pointer;
    }

/* ── Channel checkboxes ──────────────────────────────── */

.channel-check[b-5hhgyzt1rs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-text-strong);
    cursor: pointer;
}

/* ── Send button ─────────────────────────────────────── */

.btn-primary[b-5hhgyzt1rs] {
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 8px;
    background: var(--color-primary, #2e90fa);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

    .btn-primary:hover:not(:disabled)[b-5hhgyzt1rs] {
        background: var(--color-primary-strong, #1d7be0);
    }

    .btn-primary:disabled[b-5hhgyzt1rs] {
        opacity: 0.5;
        cursor: not-allowed;
    }
/* /Components/Pages/Admin/ShiftTemplates.razor.rz.scp.css */
/* ── Admin shell ───────────────────────────────── */

.admin-shell[b-y8kwnz87ls] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Content area ─────────────────────────────── */

.admin-content[b-y8kwnz87ls] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 780px;
}

.content-header[b-y8kwnz87ls] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.content-title h3[b-y8kwnz87ls] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-y8kwnz87ls] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.btn-add[b-y8kwnz87ls] {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

    .btn-add:hover[b-y8kwnz87ls] {
        background: var(--color-primary-hover);
    }

/* ── Template list ────────────────────────────── */

.template-list[b-y8kwnz87ls] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.template-card[b-y8kwnz87ls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .template-card:hover[b-y8kwnz87ls] {
        border-color: var(--color-border);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    .template-card.editing[b-y8kwnz87ls] {
        border-color: var(--color-primary-tint);
        background: var(--color-primary-bg-1);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.1);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }

/* ── Display mode ─────────────────────────────── */

.template-info[b-y8kwnz87ls] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.template-icon[b-y8kwnz87ls] {
    font-size: 1.4rem;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    flex-shrink: 0;
}

.template-details[b-y8kwnz87ls] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.template-name[b-y8kwnz87ls] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-meta[b-y8kwnz87ls] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.meta-sep[b-y8kwnz87ls] {
    color: var(--color-border);
}

.meta-type[b-y8kwnz87ls] {
    font-weight: 500;
    color: var(--color-text-subtle);
}

.template-dept[b-y8kwnz87ls] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.12rem 0.5rem;
    border-radius: 5px;
    border-left: 3px solid;
    background: var(--color-surface-alt);
    color: var(--color-text-strong);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

    .template-dept.all[b-y8kwnz87ls] {
        border-color: var(--color-border);
        color: var(--color-text-subtle);
        font-style: italic;
    }

/* ── Action buttons ───────────────────────────── */

.template-actions[b-y8kwnz87ls] {
    display: flex;
    gap: 0.3rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.btn-tmpl[b-y8kwnz87ls] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.12s, border-color 0.12s;
}

    .btn-tmpl.edit:hover[b-y8kwnz87ls] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
    }

    .btn-tmpl.duplicate:hover[b-y8kwnz87ls] {
        background: var(--color-success-bg-4);
        border-color: var(--color-success-tint-2);
    }

    .btn-tmpl.delete:hover[b-y8kwnz87ls] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-tint);
    }

/* ── Inline edit form ─────────────────────────── */

.template-edit-form[b-y8kwnz87ls] {
    width: 100%;
}

.edit-row[b-y8kwnz87ls] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

    .edit-row:last-of-type[b-y8kwnz87ls] {
        margin-bottom: 0;
    }

.form-group[b-y8kwnz87ls] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.icon-group[b-y8kwnz87ls] {
    flex-shrink: 0;
}

.name-group[b-y8kwnz87ls] {
    flex: 1;
    min-width: 160px;
}

.time-group[b-y8kwnz87ls] {
    width: 100px;
    flex-shrink: 0;
}

.break-group[b-y8kwnz87ls] {
    width: 100px;
    flex-shrink: 0;
}

.type-group[b-y8kwnz87ls] {
    flex: 1;
    min-width: 130px;
}

.form-check[b-y8kwnz87ls] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
}

.day-options-row[b-y8kwnz87ls] {
    align-items: center;
    gap: 1rem;
}

.form-label[b-y8kwnz87ls] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input[b-y8kwnz87ls],
.form-select[b-y8kwnz87ls] {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-white);
    width: 100%;
    box-sizing: border-box;
}

    .form-input:focus[b-y8kwnz87ls],
    .form-select:focus[b-y8kwnz87ls] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

/* ── Icon picker ──────────────────────────────── */

.icon-picker[b-y8kwnz87ls] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    max-width: 175px;
}

.icon-choice[b-y8kwnz87ls] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .icon-choice:hover[b-y8kwnz87ls] {
        border-color: var(--color-primary-tint);
    }

    .icon-choice.selected[b-y8kwnz87ls] {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.2);
    }

/* ── Edit actions ─────────────────────────────── */

.edit-actions[b-y8kwnz87ls] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

.btn-save[b-y8kwnz87ls] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-success-bright);
    border-radius: 6px;
    background: var(--color-success-bright);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-save:hover[b-y8kwnz87ls] {
        background: var(--color-success-mid);
    }

.btn-cancel-edit[b-y8kwnz87ls] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-cancel-edit:hover[b-y8kwnz87ls] {
        background: var(--color-surface-alt);
    }

/* ── Empty state ──────────────────────────────── */

.empty-state[b-y8kwnz87ls] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-subtle);
    font-size: 0.88rem;
    border: 1px dashed var(--color-border-light);
    border-radius: 10px;
}

.empty-icon[b-y8kwnz87ls] {
    font-size: 2rem;
    opacity: 0.5;
}

.btn-link[b-y8kwnz87ls] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

    .btn-link:hover[b-y8kwnz87ls] {
        color: var(--color-primary-hover);
    }

/* ── Preview section ──────────────────────────── */

.preview-section[b-y8kwnz87ls] {
    border-top: 1px solid var(--color-border-light);
    padding-top: 1.25rem;
}

    .preview-section h4[b-y8kwnz87ls] {
        margin: 0 0 0.25rem;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.preview-hint[b-y8kwnz87ls] {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
}

.preview-select-wrapper[b-y8kwnz87ls] {
    max-width: 320px;
    margin-bottom: 1.25rem;
}

.preview-select[b-y8kwnz87ls] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
}

/* ── Timeline preview ─────────────────────────── */

.preview-timeline[b-y8kwnz87ls] {
    position: relative;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 1.75rem 0.75rem 0.5rem;
    background: var(--color-surface-subtle);
    overflow: hidden;
}

.timeline-axis[b-y8kwnz87ls] {
    position: absolute;
    top: 0;
    left: 110px;
    right: 0.75rem;
    height: 1.5rem;
    display: flex;
}

.timeline-tick[b-y8kwnz87ls] {
    position: absolute;
    font-size: 0.62rem;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
    white-space: nowrap;
}

    .timeline-tick[b-y8kwnz87ls]::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 50%;
        width: 1px;
        height: 4px;
        background: var(--color-border);
    }

.timeline-row[b-y8kwnz87ls] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.timeline-label[b-y8kwnz87ls] {
    width: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.timeline-track[b-y8kwnz87ls] {
    flex: 1;
    position: relative;
    height: 22px;
    background: var(--color-border-faint);
    border-radius: 4px;
    overflow: hidden;
}

.timeline-bar[b-y8kwnz87ls] {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 3px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    transition: width 0.2s, left 0.2s;
}

.bar-label[b-y8kwnz87ls] {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--color-white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.3rem;
}
/* /Components/Pages/Admin/SpecialDays.razor.rz.scp.css */
/* ── Admin shell ───────────────────────────────── */

.admin-shell[b-g248u5l2ax] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Content area ─────────────────────────────── */

.admin-content[b-g248u5l2ax] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 760px;
}

.content-header[b-g248u5l2ax] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.content-title h3[b-g248u5l2ax] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.content-description[b-g248u5l2ax] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.btn-add[b-g248u5l2ax] {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

    .btn-add:hover[b-g248u5l2ax] {
        background: var(--color-primary-hover);
    }

/* ── Year bar ────────────────────────────────── */

.year-bar[b-g248u5l2ax] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.year-nav[b-g248u5l2ax] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text-strong);
    transition: background 0.12s, border-color 0.12s;
}

    .year-nav:hover[b-g248u5l2ax] {
        background: var(--color-surface-alt);
        border-color: var(--color-primary-tint);
    }

.year-label[b-g248u5l2ax] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    min-width: 3.5rem;
    text-align: center;
}

.btn-copy[b-g248u5l2ax] {
    margin-left: 0.75rem;
    padding: 0.3rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-alt);
    color: var(--color-text-strong);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .btn-copy:hover[b-g248u5l2ax] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
        color: var(--color-primary-strong);
    }

/* ── Days list ───────────────────────────────── */

.days-list[b-g248u5l2ax] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.day-card[b-g248u5l2ax] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .day-card:hover[b-g248u5l2ax] {
        border-color: var(--color-border);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    .day-card.editing[b-g248u5l2ax] {
        border-color: var(--color-primary-tint);
        background: var(--color-primary-bg-1);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.1);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }

/* ── Display mode ────────────────────────────── */

.day-info[b-g248u5l2ax] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
}

.day-icon[b-g248u5l2ax] {
    font-size: 1.35rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    flex-shrink: 0;
}

.day-details[b-g248u5l2ax] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
}

.day-name[b-g248u5l2ax] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.day-date[b-g248u5l2ax] {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.day-surcharge[b-g248u5l2ax] {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    white-space: nowrap;
}

/* ── Action buttons ──────────────────────────── */

.day-actions[b-g248u5l2ax] {
    display: flex;
    gap: 0.3rem;
    margin-left: 0.5rem;
}

.btn-day[b-g248u5l2ax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.12s, border-color 0.12s;
}

    .btn-day.edit:hover[b-g248u5l2ax] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
    }

    .btn-day.delete:hover[b-g248u5l2ax] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-tint);
    }

/* ── Inline edit form ────────────────────────── */

.day-edit-form[b-g248u5l2ax] {
    width: 100%;
}

.edit-row[b-g248u5l2ax] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.form-group[b-g248u5l2ax] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.icon-group[b-g248u5l2ax] {
    flex-shrink: 0;
}

.name-group[b-g248u5l2ax] {
    flex: 1;
    min-width: 140px;
}

.date-group[b-g248u5l2ax] {
    flex-shrink: 0;
    min-width: 150px;
}

.surcharge-group[b-g248u5l2ax] {
    flex-shrink: 0;
}

.form-label[b-g248u5l2ax] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input[b-g248u5l2ax] {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-white);
    width: 100%;
    box-sizing: border-box;
}

    .form-input:focus[b-g248u5l2ax] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

/* ── Icon picker ─────────────────────────────── */

.icon-picker[b-g248u5l2ax] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    max-width: 200px;
}

.icon-choice[b-g248u5l2ax] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .icon-choice:hover[b-g248u5l2ax] {
        border-color: var(--color-primary-tint);
    }

    .icon-choice.selected[b-g248u5l2ax] {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.2);
    }

/* ── Surcharge picker ────────────────────────── */

.surcharge-picker[b-g248u5l2ax] {
    display: flex;
    gap: 0.25rem;
}

.surcharge-choice[b-g248u5l2ax] {
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-strong);
    transition: border-color 0.12s, background 0.12s;
}

    .surcharge-choice:hover[b-g248u5l2ax] {
        border-color: var(--color-primary-tint);
    }

    .surcharge-choice.selected[b-g248u5l2ax] {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        color: var(--color-primary-strong);
        box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.2);
    }

.surcharge-custom[b-g248u5l2ax] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.surcharge-input[b-g248u5l2ax] {
    width: 75px !important;
}

.surcharge-suffix[b-g248u5l2ax] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ── Edit actions ────────────────────────────── */

.edit-actions[b-g248u5l2ax] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

.btn-save[b-g248u5l2ax] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-success-bright);
    border-radius: 6px;
    background: var(--color-success-bright);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-save:hover[b-g248u5l2ax] {
        background: var(--color-success-mid);
    }

.btn-cancel-edit[b-g248u5l2ax] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-cancel-edit:hover[b-g248u5l2ax] {
        background: var(--color-surface-alt);
    }

/* ── Empty state ─────────────────────────────── */

.empty-state[b-g248u5l2ax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-subtle);
    font-size: 0.88rem;
    border: 1px dashed var(--color-border-light);
    border-radius: 10px;
}

.empty-icon[b-g248u5l2ax] {
    font-size: 2rem;
    opacity: 0.5;
}

.btn-link[b-g248u5l2ax] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

    .btn-link:hover[b-g248u5l2ax] {
        color: var(--color-primary-hover);
    }
/* /Components/Pages/Employee/EmployeeAbsenceContainerDetail.razor.rz.scp.css */
/* ── Container ─────────────────────────────────── */

.container-detail[b-zwq2gwjpsu] {
    padding: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 900px;
}

/* ── Header ───────────────────────────────────── */

.detail-header[b-zwq2gwjpsu] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

    .detail-header h2[b-zwq2gwjpsu] {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.btn-back[b-zwq2gwjpsu] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
}

    .btn-back:hover[b-zwq2gwjpsu] {
        background: var(--color-surface-alt);
    }

.total-badge[b-zwq2gwjpsu] {
    font-size: 0.82rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ── Year summary ─────────────────────────────── */

.year-summary[b-zwq2gwjpsu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.year-chip[b-zwq2gwjpsu] {
    font-size: 0.76rem;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
}

    .year-chip.current[b-zwq2gwjpsu] {
        background: var(--color-primary-bg-5);
        color: var(--color-primary-deep);
        font-weight: 500;
    }

.year-count[b-zwq2gwjpsu] {
    opacity: 0.6;
    font-size: 0.7rem;
}

/* ── Actions bar ──────────────────────────────── */

.detail-actions-bar[b-zwq2gwjpsu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.action-buttons[b-zwq2gwjpsu] {
    justify-content: flex-end;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.year-filter[b-zwq2gwjpsu] {
    justify-content: flex-start;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.year-filter-btn[b-zwq2gwjpsu] {
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-muted);
    font-size: 0.76rem;
    cursor: pointer;
}

    .year-filter-btn:hover[b-zwq2gwjpsu] {
        background: var(--color-surface-hover);
    }

    .year-filter-btn.active[b-zwq2gwjpsu] {
        background: var(--color-primary-bg-5);
        border-color: var(--color-primary-tint);
        color: var(--color-primary-deep);
        font-weight: 600;
    }

.btn-add[b-zwq2gwjpsu] {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-success-tint-2);
    border-radius: 8px;
    background: var(--color-success-bg-3);
    color: var(--color-success-darkest);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-add:hover[b-zwq2gwjpsu] {
        background: var(--color-success-tint-3);
    }

.btn-book[b-zwq2gwjpsu] {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-primary-tint);
    border-radius: 8px;
    background: var(--color-primary-bg-5);
    color: var(--color-primary-deep);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-book:hover[b-zwq2gwjpsu] {
        background: var(--color-drop-target);
    }

/* ── Empty state ──────────────────────────────── */

.empty-state[b-zwq2gwjpsu] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* ── Mutation table ───────────────────────────── */

.mutation-table[b-zwq2gwjpsu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
}

    .mutation-table th[b-zwq2gwjpsu] {
        background: var(--color-surface-alt);
        padding: 0.45rem 0.6rem;
        text-align: left;
        font-weight: 600;
        color: var(--color-text-muted);
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--color-border-light);
    }

    .mutation-table td[b-zwq2gwjpsu] {
        padding: 0.4rem 0.6rem;
        border-bottom: 1px solid var(--color-surface-hover);
        color: var(--color-text-strong);
    }

    .mutation-table tbody tr:hover[b-zwq2gwjpsu] {
        background: var(--color-surface-alt);
    }

    .mutation-table tfoot td[b-zwq2gwjpsu] {
        border-top: 2px solid var(--color-border-light);
        background: var(--color-surface-alt);
        padding: 0.45rem 0.6rem;
        font-weight: 600;
    }

.col-hours[b-zwq2gwjpsu] {
    width: 90px;
    text-align: left;
    white-space: nowrap;
}

.col-actions[b-zwq2gwjpsu] {
    width: 170px;
    text-align: right;
    white-space: nowrap;
}

.col-comment[b-zwq2gwjpsu] {
    color: var(--color-text-muted);
}

.col-meta[b-zwq2gwjpsu] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    width:160px;
}

/* ── Collection rows ──────────────────────────── */

.collection-row[b-zwq2gwjpsu] {
    cursor: pointer;
    font-weight: 600;
}

    .collection-row:hover td[b-zwq2gwjpsu] {
        background: #f0f4ff;
    }

    .collection-row.open td[b-zwq2gwjpsu] {
        background: #f0f4ff;
        border-bottom-color: var(--color-primary-tint);
    }

.collection-chevron[b-zwq2gwjpsu] {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    transition: transform 0.2s;
    margin-right: 0.2rem;
}

    .collection-chevron.chevron-open[b-zwq2gwjpsu] {
        transform: rotate(90deg);
    }

.hours-sub[b-zwq2gwjpsu] {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--color-text-subtle);
}

.roster-badge[b-zwq2gwjpsu] {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    background: var(--color-primary-bg-5);
    color: var(--color-primary-deep);
    margin-left: 0.25rem;
    vertical-align: middle;
}

.btn-edit[b-zwq2gwjpsu],
.btn-collection-edit[b-zwq2gwjpsu] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

    .btn-edit:hover[b-zwq2gwjpsu],
    .btn-collection-edit:hover[b-zwq2gwjpsu] {
        background: var(--color-primary-bg-5);
        border-color: var(--color-primary-tint);
        color: var(--color-primary-deep);
    }

.btn-delete[b-zwq2gwjpsu] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-danger-tint);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-danger-bright);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    margin-left: 0.3rem;
}

    .btn-delete:hover[b-zwq2gwjpsu] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-light);
    }

/* ── Detail rows (expanded collection) ────────── */

.detail-row td[b-zwq2gwjpsu] {
    font-weight: 400;
}

.indent-cell[b-zwq2gwjpsu] {
    padding-left: 2rem !important;
}

.container-tag[b-zwq2gwjpsu] {
    display: inline-block;
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}

    .container-tag.current[b-zwq2gwjpsu] {
        background: var(--color-success-bg-3);
        color: var(--color-success-darkest);
    }

    .container-tag.other[b-zwq2gwjpsu] {
        background: var(--color-surface-hover);
        color: var(--color-text-muted);
    }

.other-container-row td[b-zwq2gwjpsu] {
    opacity: 0.6;
}

/* ── Standalone rows ──────────────────────────── */

.standalone-row td[b-zwq2gwjpsu] {
    font-weight: 400;
}

/* ── Shared ───────────────────────────────────── */

.future-row td[b-zwq2gwjpsu] {
    opacity: 0.7;
}

.future-badge[b-zwq2gwjpsu] {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    background: var(--color-warning-amber);
    color: var(--color-warning-strong);
    margin-left: 0.3rem;
    vertical-align: middle;
}

.unmeasured-row td[b-zwq2gwjpsu] {
    font-style: italic;
    color: var(--color-text-subtle);
}

.negative[b-zwq2gwjpsu] {
    color: var(--color-danger-bright);
}
    color: var(--color-danger-bright);[b-zwq2gwjpsu]
}

/* ── Dialog ───────────────────────────────────── */

.dialog-overlay[b-zwq2gwjpsu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog-panel[b-zwq2gwjpsu] {
    background: var(--color-white);
    border-radius: 14px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.dialog-header[b-zwq2gwjpsu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.1rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
}

    .dialog-header h3[b-zwq2gwjpsu] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.btn-close-dialog[b-zwq2gwjpsu] {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--color-text-subtle);
    cursor: pointer;
    line-height: 1;
}

.dialog-body[b-zwq2gwjpsu] {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.form-group[b-zwq2gwjpsu] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.form-label[b-zwq2gwjpsu] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.form-input[b-zwq2gwjpsu] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    font-size: 0.85rem;
}

.form-hint[b-zwq2gwjpsu] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.dialog-footer[b-zwq2gwjpsu] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--color-border-light);
}

.btn-cancel[b-zwq2gwjpsu] {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.82rem;
    cursor: pointer;
}

    .btn-cancel:hover[b-zwq2gwjpsu] {
        background: var(--color-surface-alt);
    }

.btn-save[b-zwq2gwjpsu] {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-primary-tint);
    border-radius: 8px;
    background: var(--color-primary-bg-5);
    color: var(--color-primary-deep);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-save:hover[b-zwq2gwjpsu] {
        background: var(--color-drop-target);
    }

    .btn-save:disabled[b-zwq2gwjpsu] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── End ──────────────────────────────────────── */
/* /Components/Pages/Employee/EmployeeDetail.razor.rz.scp.css */
/* ── Shell layout ─────────────────────────────── */

.detail-shell[b-66ijpuy1d7] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ══════════════════ SIDEBAR ══════════════════ */

.detail-sidebar[b-66ijpuy1d7] {
    width: 240px;
    flex-shrink: 0;
    background: var(--color-surface-alt);
    border-right: 1px solid var(--color-border-light);
    padding: 1.25rem 0;
}

.back-link[b-66ijpuy1d7] {
    display: block;
    padding: 0 1.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.12s;
}

    .back-link:hover[b-66ijpuy1d7] {
        color: var(--color-primary);
    }

/* ── Identity card ───────────────────────────── */

.sidebar-identity[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 0.75rem;
}

.sidebar-avatar[b-66ijpuy1d7] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-name-block[b-66ijpuy1d7] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.sidebar-name[b-66ijpuy1d7] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-meta[b-66ijpuy1d7] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.sidebar-dept[b-66ijpuy1d7] {
    display: inline-block;
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-white);
    margin-top: 0.1rem;
    width: fit-content;
}

/* ── Navigation ──────────────────────────────── */

.sidebar-nav[b-66ijpuy1d7] {
    display: flex;
    flex-direction: column;
}

.nav-item[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.84rem;
    color: var(--color-text-strong);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.1s, border-color 0.15s, color 0.12s;
}

    .nav-item:hover[b-66ijpuy1d7] {
        background: var(--color-border-faint);
    }

    .nav-item.active[b-66ijpuy1d7] {
        background: var(--color-primary-soft);
        border-left-color: var(--color-primary);
        color: var(--color-primary-strong);
        font-weight: 600;
    }

.nav-icon[b-66ijpuy1d7] {
    font-size: 1rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* ══════════════════ CONTENT ══════════════════ */

.detail-content[b-66ijpuy1d7] {
    flex: 1;
    padding: 1.75rem 2rem;
    overflow-y: auto;
    max-width: 720px;
}

.content-heading[b-66ijpuy1d7] {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

.empty-text[b-66ijpuy1d7] {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.btn-back[b-66ijpuy1d7] {
    font-size: 0.82rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

    .btn-back:hover[b-66ijpuy1d7] {
        text-decoration: underline;
    }

/* ── Form sections ───────────────────────────── */

.form-section[b-66ijpuy1d7] {
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
}

.section-label[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 10px 10px 0 0;
}

.section-icon[b-66ijpuy1d7] {
    font-size: 1rem;
}

.section-title[b-66ijpuy1d7] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text-strong);
}

.section-body[b-66ijpuy1d7] {
    padding: 0.85rem;
}

.form-row[b-66ijpuy1d7] {
    margin-bottom: 0.65rem;
}

    .form-row:last-child[b-66ijpuy1d7] {
        margin-bottom: 0;
    }

    .form-row.two-col[b-66ijpuy1d7] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }

.form-group[b-66ijpuy1d7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.form-label[b-66ijpuy1d7] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input[b-66ijpuy1d7] {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.84rem;
    color: var(--color-text);
    background: var(--color-white);
    width: 100%;
    box-sizing: border-box;
}

    .form-input:focus[b-66ijpuy1d7] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.12);
    }

.toggle-group[b-66ijpuy1d7] {
    display: flex;
    gap: 1.25rem;
}

.toggle-item[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.toggle-check[b-66ijpuy1d7] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

.toggle-text[b-66ijpuy1d7] {
    font-size: 0.82rem;
    color: var(--color-text-strong);
}

/* ── Role multi-select picker ────────────────── */

.role-picker[b-66ijpuy1d7] {
    position: relative;
}

.role-picker-display[b-66ijpuy1d7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    min-height: 34px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .role-picker-display:hover[b-66ijpuy1d7] {
        border-color: var(--color-text-subtle);
    }

.role-picker-arrow[b-66ijpuy1d7] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--color-text-subtle);
}

.role-placeholder[b-66ijpuy1d7] {
    font-size: 0.82rem;
    color: var(--color-text-subtle);
}

.role-pill[b-66ijpuy1d7] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    white-space: nowrap;
}

    .role-pill.admin[b-66ijpuy1d7] {
        background: var(--color-danger-soft);
        color: var(--color-danger);
    }

.role-picker-menu[b-66ijpuy1d7] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 50;
    padding: 0.25rem 0;
}

.role-picker-option[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.84rem;
    color: var(--color-text-strong);
    cursor: pointer;
    transition: background 0.1s;
}

    .role-picker-option:hover[b-66ijpuy1d7] {
        background: var(--color-primary-bg-2);
    }

    .role-picker-option.selected[b-66ijpuy1d7] {
        background: var(--color-primary-soft);
        font-weight: 600;
    }

    .role-picker-option input[type="checkbox"][b-66ijpuy1d7] {
        width: 15px;
        height: 15px;
        accent-color: var(--color-primary);
    }

.form-actions[b-66ijpuy1d7] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.btn-save[b-66ijpuy1d7] {
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--color-success-bright);
    border-radius: 8px;
    background: var(--color-success-bright);
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-save:hover:not(:disabled)[b-66ijpuy1d7] {
        background: var(--color-success-mid);
    }

    .btn-save:disabled[b-66ijpuy1d7] {
        opacity: 0.6;
        cursor: default;
    }

[b-66ijpuy1d7] .validation-message {
    font-size: 0.72rem;
    color: var(--color-danger);
    margin-top: 0.1rem;
}

/* ── Contract cards ──────────────────────────── */

.contracts-back-link[b-66ijpuy1d7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

    .contracts-back-link:hover[b-66ijpuy1d7] {
        text-decoration: underline;
    }

.contract-expiry-notice[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

    .contract-expiry-notice.agr-info[b-66ijpuy1d7] {
        background: var(--color-primary-soft);
        color: var(--color-primary-strong);
        border: 1px solid var(--color-primary-tint);
    }

    .contract-expiry-notice.agr-warning[b-66ijpuy1d7] {
        background: var(--color-warning-soft);
        color: var(--color-warning);
        border: 1px solid var(--color-warning-tint);
    }

    .contract-expiry-notice.agr-critical[b-66ijpuy1d7] {
        background: var(--color-danger-soft);
        color: var(--color-danger-strong);
        border: 1px solid var(--color-danger-border);
    }

.contract-days-left[b-66ijpuy1d7] {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

    .contract-days-left.agr-info[b-66ijpuy1d7] {
        color: var(--color-primary-strong);
    }

    .contract-days-left.agr-warning[b-66ijpuy1d7] {
        color: var(--color-warning);
    }

    .contract-days-left.agr-critical[b-66ijpuy1d7] {
        color: var(--color-danger-strong);
        font-weight: 700;
    }

.contract-card[b-66ijpuy1d7] {
    display: block;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.65rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .contract-card:hover[b-66ijpuy1d7] {
        border-color: var(--color-primary-tint);
        box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }

    .contract-card.active[b-66ijpuy1d7] {
        border-color: var(--color-success-tint);
        background: var(--color-success-bg-2);
    }

.contract-header[b-66ijpuy1d7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.contract-name[b-66ijpuy1d7] {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
}

.contract-status[b-66ijpuy1d7] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

    .contract-status.active[b-66ijpuy1d7] {
        background: var(--color-success-bg-1);
        color: var(--color-success-darker);
    }

[data-theme="dark"] .contract-status.active[b-66ijpuy1d7] {
    background: rgba(18, 183, 106, 0.18);
    color: #6ee7b7;
}

.contract-details[b-66ijpuy1d7] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.zzp-badge[b-66ijpuy1d7] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    background: #f79009;
    color: #fff;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* ── Notices ──────────────────────────────────── */

.notice[b-66ijpuy1d7] {
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
}

    .notice.warning[b-66ijpuy1d7] {
        background: var(--color-warning-bg-1);
        border: 1px solid var(--color-warning-tint);
        color: var(--color-warning-strong);
    }

.coming-soon[b-66ijpuy1d7] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-subtle);
    font-size: 0.85rem;
    border: 1px dashed var(--color-border-light);
    border-radius: 8px;
}

/* ── Employee files ──────────────────────────── */

.file-upload-area[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.file-upload-label[b-66ijpuy1d7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-alt);
    font-size: 0.8rem;
    color: var(--color-text-strong);
    cursor: pointer;
    transition: background 0.12s;
}

    .file-upload-label:hover[b-66ijpuy1d7] {
        background: var(--color-surface-hover);
    }

    .file-upload-label input[type="file"][b-66ijpuy1d7] {
        display: none;
    }

.file-uploading[b-66ijpuy1d7] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.file-list[b-66ijpuy1d7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.file-card[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
}

.file-icon[b-66ijpuy1d7] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.file-info[b-66ijpuy1d7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.file-name[b-66ijpuy1d7] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta[b-66ijpuy1d7] {
    font-size: 0.68rem;
    color: var(--color-text-subtle);
}

.file-tag[b-66ijpuy1d7] {
    flex-shrink: 0;
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
}

.file-actions[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    margin-left: auto;
}

    .file-actions .btn-cancel[b-66ijpuy1d7] {
        background: var(--color-primary-bright);
        color: #fff;
        border-color: var(--color-primary-bright);
    }

    .file-actions .btn-cancel:hover[b-66ijpuy1d7] {
        background: var(--color-primary-strong);
        border-color: var(--color-primary-strong);
        color: #fff;
    }

    .file-actions .btn-delete-contract[b-66ijpuy1d7] {
        align-self: auto;
        padding: 0.4rem 0.85rem;
        font-size: 0.8rem;
    }

/* ── Action cards (messages / settings) ─────── */

.action-cards[b-66ijpuy1d7] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.action-card[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-white);
}

    .action-card.danger[b-66ijpuy1d7] {
        border-color: var(--color-danger-tint);
        background: var(--color-danger-bg-1);
    }

.action-card-info[b-66ijpuy1d7] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.action-card-title[b-66ijpuy1d7] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.action-card-desc[b-66ijpuy1d7] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.btn-icon[b-66ijpuy1d7] {
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Contracts section ───────────────────────── */

.contracts-header[b-66ijpuy1d7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .contracts-header .content-heading[b-66ijpuy1d7] {
        margin: 0;
    }

.btn-add[b-66ijpuy1d7] {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-success-bright);
    border-radius: 7px;
    background: var(--color-success-bright);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-add:hover[b-66ijpuy1d7] {
        background: var(--color-success-mid);
    }

/* ── Agreement form ──────────────────────────── */

.agreement-form[b-66ijpuy1d7] {
    margin-bottom: 1.25rem;
}

.form-actions-row[b-66ijpuy1d7] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.btn-cancel[b-66ijpuy1d7] {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-cancel:hover[b-66ijpuy1d7] {
        background: var(--color-surface-alt);
    }

/* ── Contract cards ──────────────────────────── */

.contract-card.past[b-66ijpuy1d7] {
    opacity: 0.6;
}

.contract-card.future[b-66ijpuy1d7] {
    border-color: var(--color-primary-tint);
    background: var(--color-primary-bg-5);
}

.contract-header-right[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.contract-status.future[b-66ijpuy1d7] {
    background: var(--color-drop-target);
    color: #1e40af;
}

[data-theme="dark"] .contract-status.future[b-66ijpuy1d7] {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}

.btn-edit-sm[b-66ijpuy1d7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--color-border, #d0d5dd);
    border-radius: 5px;
    background: var(--color-white);
    color: var(--color-text, #344054);
    font-size: 0.75rem;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}

[data-theme="dark"] .btn-edit-sm[b-66ijpuy1d7] {
    background: var(--color-surface);
    border-color: var(--color-border, #374151);
    color: var(--color-text, #f9fafb);
}

    .btn-edit-sm:hover[b-66ijpuy1d7] {
        background: var(--color-surface-alt, #f9fafb);
    }

/* ── Danger zone ─────────────────────────────── */

.danger-zone[b-66ijpuy1d7] {
    border: 1px solid var(--color-danger-tint);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 1.5rem;
}

.danger-zone-label[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--color-danger-bg-1);
    border-bottom: 1px solid var(--color-danger-tint);
}

.danger-zone-body[b-66ijpuy1d7] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.danger-zone-warning[b-66ijpuy1d7] {
    font-size: 0.88rem;
    color: var(--color-text-muted, #344054);
    margin: 0;
    line-height: 1.5;
}

.danger-zone-tips[b-66ijpuy1d7] {
    background: var(--color-warning-bg-1);
    border: 1px solid var(--color-warning-tint);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    font-size: 0.83rem;
    color: var(--color-warning-strong);
    line-height: 1.55;
}

    .danger-zone-tips-title[b-66ijpuy1d7] {
        font-weight: 600;
        margin: 0 0 0.4rem 0;
    }

    .danger-zone-tips ul[b-66ijpuy1d7] {
        margin: 0;
        padding-left: 1.25rem;
    }

    .danger-zone-tips li[b-66ijpuy1d7] {
        margin-bottom: 0.25rem;
    }

    .danger-zone-tips li:last-child[b-66ijpuy1d7] {
        margin-bottom: 0;
    }

[data-theme="dark"] .danger-zone-tips[b-66ijpuy1d7] {
    background: rgba(180, 93, 8, 0.12);
    border-color: rgba(247, 144, 9, 0.3);
    color: #fbbf24;
}

.btn-delete-contract[b-66ijpuy1d7] {
    align-self: flex-start;
    padding: 0.5rem 1.25rem;
    background: var(--color-danger-bright);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-delete-contract:hover:not(:disabled)[b-66ijpuy1d7] {
        background: var(--color-danger-mid);
    }

    .btn-delete-contract:disabled[b-66ijpuy1d7] {
        opacity: 0.6;
        cursor: not-allowed;
    }

[data-theme="dark"] .danger-zone[b-66ijpuy1d7] {
    border-color: #7a271a;
}

[data-theme="dark"] .danger-zone-label[b-66ijpuy1d7] {
    background: #3b1a18;
    border-color: #7a271a;
}

[data-theme="dark"] .danger-zone-warning[b-66ijpuy1d7] {
    color: var(--color-text-muted, #9ca3af);
}

.form-textarea[b-66ijpuy1d7] {
    resize: vertical;
    min-height: 70px;
}

/* ── Error notice ────────────────────────────── */

.notice.error[b-66ijpuy1d7] {
    background: var(--color-danger-bg-1);
    border: 1px solid var(--color-danger-tint);
    color: var(--color-danger);
}

/* ══════════════════ ABSENCE OVERVIEW ══════════════════ */

.absence-summary-grid[b-66ijpuy1d7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Summary card ─────────────────────────────── */

.absence-card[b-66ijpuy1d7] {
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    padding: 0.75rem 1rem;
    text-decoration: none;
    display: block;
    color: inherit;
}

    .absence-card:hover[b-66ijpuy1d7] {
        border-color: var(--color-primary-tint);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08);
    }

.absence-card-header[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.absence-icon[b-66ijpuy1d7] {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.absence-card-info[b-66ijpuy1d7] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.absence-card-name[b-66ijpuy1d7] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-strong);
}

.absence-card-total[b-66ijpuy1d7] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.absence-card-chevron[b-66ijpuy1d7] {
    font-size: 1.1rem;
    color: var(--color-text-subtle);
}

.absence-card-years[b-66ijpuy1d7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-border-light);
}

.year-chip[b-66ijpuy1d7] {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
}

    .year-chip.current[b-66ijpuy1d7] {
        background: var(--color-primary-bg-5);
        color: var(--color-primary-deep);
        font-weight: 500;
    }

.year-count[b-66ijpuy1d7] {
    opacity: 0.6;
    font-size: 0.68rem;
}

/* ── Push registration list ─────────────────────────────────────── */

.btn-push-action[b-66ijpuy1d7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}

    .btn-push-action:hover[b-66ijpuy1d7] {
        background: var(--color-surface-alt);
        border-color: var(--color-primary-tint);
    }

    .btn-push-action:disabled[b-66ijpuy1d7] {
        opacity: 0.5;
        cursor: default;
    }

.btn-push-action--danger[b-66ijpuy1d7] {
    color: #b42318;
    border-color: #fecdca;
}

    .btn-push-action--danger:hover[b-66ijpuy1d7] {
        background: #fee4e2;
        border-color: #f97066;
    }

.push-reg-list[b-66ijpuy1d7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 560px;
}

.push-reg-row[b-66ijpuy1d7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: var(--neutral-layer-2, #f9fafb);
    border: 1px solid var(--neutral-stroke-rest, #e4e7ec);
    border-radius: 8px;
}

.push-reg-icon[b-66ijpuy1d7] {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.push-reg-info[b-66ijpuy1d7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.push-reg-label[b-66ijpuy1d7] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.push-reg-meta[b-66ijpuy1d7] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-rest, #6b7280);
}

.push-reg-actions[b-66ijpuy1d7] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Dark mode */
[data-theme="dark"] .push-reg-row[b-66ijpuy1d7] {
    background: #1f2937;
    border-color: #334155;
}

[data-theme="dark"] .push-reg-label[b-66ijpuy1d7] {
    color: #f1f5f9;
}

[data-theme="dark"] .push-reg-meta[b-66ijpuy1d7] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-push-action--danger[b-66ijpuy1d7] {
    color: #fca5a5;
    border-color: #7f1d1d;
}

    [data-theme="dark"] .btn-push-action--danger:hover[b-66ijpuy1d7] {
        background: #450a0a;
        border-color: #ef4444;
    }
/* /Components/Pages/Employee/EmployeeList.razor.rz.scp.css */
/* ── Page layout ──────────────────────────────── */

.emp-page[b-udzm3p6skn] {
    padding: 1.75rem 2rem;
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.page-header[b-udzm3p6skn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* ── Export bar ──────────────────────────────────── */

.export-bar[b-udzm3p6skn] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.export-icon[b-udzm3p6skn] {
    font-size: 0.85rem;
}

.page-title h3[b-udzm3p6skn] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.page-description[b-udzm3p6skn] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.btn-create[b-udzm3p6skn] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-create:hover[b-udzm3p6skn] {
        background: var(--color-primary-hover);
    }

/* ── Filter bar ──────────────────────────────── */

.filter-bar[b-udzm3p6skn] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}

.filter-search[b-udzm3p6skn] {
    flex: 1;
    min-width: 200px;
}

.filter-input[b-udzm3p6skn] {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.84rem;
    color: var(--color-text);
    background: var(--color-white);
    box-sizing: border-box;
}

    .filter-input:focus[b-udzm3p6skn] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

.filter-select[b-udzm3p6skn] {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    cursor: pointer;
}

    .filter-select:focus[b-udzm3p6skn] {
        outline: none;
        border-color: var(--color-primary);
    }

.btn-clear-filters[b-udzm3p6skn] {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-danger-tint);
    border-radius: 8px;
    background: var(--color-danger-bg-1);
    color: var(--color-danger);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-clear-filters:hover[b-udzm3p6skn] {
        background: var(--color-danger-bg-2);
    }

.filter-toggle[b-udzm3p6skn] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--color-text-strong);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

    .filter-toggle input[type="checkbox"][b-udzm3p6skn] {
        width: 15px;
        height: 15px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

/* ── Result count ────────────────────────────── */

.result-count[b-udzm3p6skn] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

/* ── Table ────────────────────────────────────── */

.emp-table[b-udzm3p6skn] {
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
}

.emp-header-row[b-udzm3p6skn] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    gap: 0.5rem;
}

.emp-row[b-udzm3p6skn] {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border-faint);
    font-size: 0.84rem;
    color: var(--color-text-strong);
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s, opacity 0.15s, border-color 0.15s;
}

    .emp-row:last-child[b-udzm3p6skn] {
        border-bottom: none;
    }

    .emp-row:hover[b-udzm3p6skn] {
        background: var(--color-primary-bg-2);
    }

    .emp-row.dragging[b-udzm3p6skn] {
        opacity: 0.4;
    }

    .emp-row.drag-over-above[b-udzm3p6skn] {
        border-top: 2px solid var(--color-primary);
    }

    .emp-row.drag-over-below[b-udzm3p6skn] {
        border-bottom: 2px solid var(--color-primary);
    }

/* ── Columns ─────────────────────────────────── */

.col-handle[b-udzm3p6skn] {
    width: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.col-name[b-udzm3p6skn] {
    flex: 2;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.col-pnr[b-udzm3p6skn] {
    flex: 0.8;
    min-width: 80px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.col-dept[b-udzm3p6skn] {
    flex: 1.2;
    min-width: 90px;
}

.col-type[b-udzm3p6skn] {
    flex: 1;
    min-width: 80px;
}

.col-roles[b-udzm3p6skn] {
    flex: 1.2;
    min-width: 90px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.col-contract[b-udzm3p6skn] {
    flex: 1;
    min-width: 80px;
}

.col-phone[b-udzm3p6skn] {
    flex: 1;
    min-width: 90px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.col-email[b-udzm3p6skn] {
    flex: 1.5;
    min-width: 120px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Cell content ────────────────────────────── */


.emp-fullname[b-udzm3p6skn] {
    font-weight: 600;
    color: var(--color-text);
}

.emp-name-block[b-udzm3p6skn] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* ── Hidden employee ──────────────────────────────── */

.emp-row.hidden[b-udzm3p6skn] {
    opacity: 0.5;
}

    .emp-row.hidden:hover[b-udzm3p6skn] {
        opacity: 0.7;
    }

.badge-hidden[b-udzm3p6skn] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-light);
    align-self: flex-start;
}

.dept-badge[b-udzm3p6skn] {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-white);
}

    .dept-badge.none[b-udzm3p6skn] {
        background: transparent;
        color: var(--color-text-subtle);
    }

.type-badge[b-udzm3p6skn] {
    font-size: 0.78rem;
    color: var(--color-text-strong);
}

.contract-badge[b-udzm3p6skn] {
    font-size: 0.78rem;
    font-weight: 600;
}

.zzp-badge[b-udzm3p6skn] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    background: #f79009;
    color: #fff;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.role-badge[b-udzm3p6skn] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

    .role-badge.none[b-udzm3p6skn] {
        background: transparent;
        color: var(--color-text-subtle);
    }

/* ── Drag handle ─────────────────────────────── */

.drag-handle[b-udzm3p6skn] {
    font-size: 0.9rem;
    color: var(--color-border);
    cursor: grab;
    user-select: none;
    transition: color 0.12s;
}

    .drag-handle:hover[b-udzm3p6skn] {
        color: var(--color-text-muted);
    }

/* ── Empty state ─────────────────────────────── */

.empty-state[b-udzm3p6skn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-subtle);
    font-size: 0.88rem;
}

.empty-icon[b-udzm3p6skn] {
    font-size: 2rem;
    opacity: 0.5;
}
/* /Components/Pages/Employee/NewEmployee.razor.rz.scp.css */
/* ── Page layout ───────────────────────────────── */

.emp-page[b-f2ibk1coy1] {
    padding: 1.75rem 2rem;
    max-width: 620px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.page-header[b-f2ibk1coy1] {
    margin-bottom: 1.5rem;
}

.page-header h3[b-f2ibk1coy1] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.page-description[b-f2ibk1coy1] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ── Form sections ────────────────────────────── */

.form-section[b-f2ibk1coy1] {
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-white);
}

.section-label[b-f2ibk1coy1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 10px 10px 0 0;
}

.section-icon[b-f2ibk1coy1] {
    font-size: 0.95rem;
}

.section-title[b-f2ibk1coy1] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-strong);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.section-body[b-f2ibk1coy1] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Form layout ──────────────────────────────── */

.form-row[b-f2ibk1coy1] {
    display: flex;
    gap: 0.75rem;
}

    .form-row.two-col > .form-group[b-f2ibk1coy1] {
        flex: 1;
    }

    .form-row:not(.two-col) > .form-group[b-f2ibk1coy1] {
        flex: 1;
    }

.form-group[b-f2ibk1coy1] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.form-label[b-f2ibk1coy1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input[b-f2ibk1coy1] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--color-text);
    background: var(--color-white);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .form-input:focus[b-f2ibk1coy1] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

    .form-input[b-f2ibk1coy1]::placeholder {
        color: var(--color-text-subtle);
    }

/* ── Validation ───────────────────────────────── */

[b-f2ibk1coy1] .validation-message {
    font-size: 0.72rem;
    color: var(--color-danger-mid);
    margin-top: 0.15rem;
}

/* ── Actions ──────────────────────────────────── */

.form-actions[b-f2ibk1coy1] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-save[b-f2ibk1coy1] {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-save:hover[b-f2ibk1coy1] {
        background: var(--color-primary-hover);
    }

/* ── Toggle switch ────────────────────────────── */

.toggle-row[b-f2ibk1coy1] {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.toggle-text[b-f2ibk1coy1] {
    display: flex;
    flex-direction: column;
}

.toggle[b-f2ibk1coy1] {
    position: relative;
    display: inline-block;
    width: 44px;
    min-width: 44px;
    height: 24px;
    cursor: pointer;
}

    .toggle input[b-f2ibk1coy1] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.toggle-slider[b-f2ibk1coy1] {
    position: absolute;
    inset: 0;
    background: var(--color-border);
    border-radius: 24px;
    transition: background 0.2s;
}

    .toggle-slider[b-f2ibk1coy1]::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: var(--color-white);
        border-radius: 50%;
        transition: transform 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

.toggle input:checked + .toggle-slider[b-f2ibk1coy1] {
    background: var(--color-primary);
}

.toggle input:checked + .toggle-slider[b-f2ibk1coy1]::before {
    transform: translateX(20px);
}

.toggle input:focus + .toggle-slider[b-f2ibk1coy1] {
    box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
}

/* ── Role multi-select picker ────────────────── */

.role-picker[b-f2ibk1coy1] {
    position: relative;
}

.role-picker-display[b-f2ibk1coy1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    min-height: 36px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .role-picker-display:hover[b-f2ibk1coy1] {
        border-color: var(--color-text-subtle);
    }

.role-picker-arrow[b-f2ibk1coy1] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--color-text-subtle);
}

.role-placeholder[b-f2ibk1coy1] {
    font-size: 0.84rem;
    color: var(--color-text-subtle);
}

.role-pill[b-f2ibk1coy1] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    white-space: nowrap;
}

.role-picker-menu[b-f2ibk1coy1] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 50;
    padding: 0.25rem 0;
}

.role-picker-option[b-f2ibk1coy1] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.84rem;
    color: var(--color-text-strong);
    cursor: pointer;
    transition: background 0.1s;
}

    .role-picker-option:hover[b-f2ibk1coy1] {
        background: var(--color-primary-bg-2);
    }

    .role-picker-option.selected[b-f2ibk1coy1] {
        background: var(--color-primary-soft);
        font-weight: 600;
    }

    .role-picker-option input[type="checkbox"][b-f2ibk1coy1] {
        width: 15px;
        height: 15px;
        accent-color: var(--color-primary);
    }
/* /Components/Pages/Employee/Profile.razor.rz.scp.css */
/* ── Shell layout ─────────────────────────────── */

.detail-shell[b-e9xuj2iw3q] {
    display: flex;
    min-height: calc(100vh - 56px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ══════════════════ SIDEBAR ══════════════════ */

.detail-sidebar[b-e9xuj2iw3q] {
    width: 240px;
    flex-shrink: 0;
    background: var(--color-surface-alt);
    border-right: 1px solid var(--color-border-light);
    padding: 1.25rem 0;
}

/* ── Identity card ───────────────────────────── */

.sidebar-avatar-img[b-e9xuj2iw3q] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-identity[b-e9xuj2iw3q] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 0.75rem;
}

/* Hidden on desktop; shown on mobile via the media query */
.sidebar-photo-actions[b-e9xuj2iw3q] {
    display: none;
}

.sidebar-avatar[b-e9xuj2iw3q] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-name-block[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.sidebar-name[b-e9xuj2iw3q] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-dept[b-e9xuj2iw3q] {
    display: inline-block;
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-white);
    margin-top: 0.1rem;
    width: fit-content;
}

/* ── Navigation ──────────────────────────────── */

.sidebar-nav[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
}

.nav-item[b-e9xuj2iw3q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-strong);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

    .nav-item:hover[b-e9xuj2iw3q] {
        background: var(--color-border-faint);
        color: var(--color-text);
    }

    .nav-item.active[b-e9xuj2iw3q] {
        background: var(--color-primary-soft);
        color: var(--color-primary);
        font-weight: 600;
    }

.nav-icon[b-e9xuj2iw3q] {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* ══════════════════ CONTENT ══════════════════ */

.detail-content[b-e9xuj2iw3q] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 680px;
}

.content-heading[b-e9xuj2iw3q] {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
}

.empty-text[b-e9xuj2iw3q] {
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.coming-soon[b-e9xuj2iw3q] {
    padding: 1.5rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* ── Form sections ────────────────────────────── */

.form-section[b-e9xuj2iw3q] {
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-white);
    overflow: hidden;
}

.section-label[b-e9xuj2iw3q] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
}

.section-icon[b-e9xuj2iw3q] {
    font-size: 0.95rem;
}

.section-title[b-e9xuj2iw3q] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-strong);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.section-body[b-e9xuj2iw3q] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Form layout ──────────────────────────────── */

.form-row[b-e9xuj2iw3q] {
    display: flex;
    gap: 0.75rem;
}

    .form-row.two-col > .form-group[b-e9xuj2iw3q] {
        flex: 1;
    }

    .form-row:not(.two-col) > .form-group[b-e9xuj2iw3q] {
        flex: 1;
    }

.form-group[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.form-label[b-e9xuj2iw3q] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input[b-e9xuj2iw3q] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--color-text);
    background: var(--color-white);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .form-input:focus[b-e9xuj2iw3q] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

    .form-input[b-e9xuj2iw3q]::placeholder {
        color: var(--color-text-subtle);
    }

/* ── Toggle group ─────────────────────────────── */

.toggle-group[b-e9xuj2iw3q] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.toggle-item[b-e9xuj2iw3q] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.toggle-check[b-e9xuj2iw3q] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.toggle-text[b-e9xuj2iw3q] {
    font-size: 0.85rem;
    color: var(--color-text-strong);
}

/* -- Per-type notification preference table ------------------------------- */

.notif-prefs-table[b-e9xuj2iw3q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .notif-prefs-table thead th[b-e9xuj2iw3q] {
        text-align: left;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-muted);
        padding: 0 0 0.5rem 0;
        border-bottom: 1px solid var(--color-border);
    }

        .notif-prefs-table thead th.col-toggle[b-e9xuj2iw3q] {
            text-align: center;
            width: 72px;
        }

    .notif-prefs-table tbody tr[b-e9xuj2iw3q] {
        border-bottom: 1px solid var(--color-border-subtle, #f0f0f0);
    }

        .notif-prefs-table tbody tr:last-child[b-e9xuj2iw3q] {
            border-bottom: none;
        }

    .notif-prefs-table tbody td[b-e9xuj2iw3q] {
        padding: 0.55rem 0;
        color: var(--color-text-strong);
        vertical-align: middle;
    }

        .notif-prefs-table tbody td.col-toggle[b-e9xuj2iw3q] {
            text-align: center;
            width: 72px;
        }

    .notif-prefs-table .toggle-item[b-e9xuj2iw3q] {
        justify-content: center;
        margin: 0;
    }

    .notif-prefs-table .toggle-all-row td[b-e9xuj2iw3q] {
        padding: 0.4rem 0;
        background: var(--color-surface-subtle, #f7f7f7);
        border-bottom: 1px solid var(--color-border);
    }

    .notif-prefs-table .toggle-all-label[b-e9xuj2iw3q] {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-muted);
        padding-left: 0.25rem;
    }




/* ── Validation ───────────────────────────────── */

[b-e9xuj2iw3q] .validation-message {
    font-size: 0.72rem;
    color: var(--color-danger-mid);
    margin-top: 0.15rem;
}

/* ── Actions ──────────────────────────────────── */

.form-actions[b-e9xuj2iw3q] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-save[b-e9xuj2iw3q] {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-save:hover[b-e9xuj2iw3q] {
        background: var(--color-primary-hover);
    }

    .btn-save:disabled[b-e9xuj2iw3q] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ── File list ────────────────────────────────── */

.file-list[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-card[b-e9xuj2iw3q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    transition: box-shadow 0.12s;
}

    .file-card:hover[b-e9xuj2iw3q] {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

.file-icon[b-e9xuj2iw3q] {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.file-info[b-e9xuj2iw3q] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.file-name[b-e9xuj2iw3q] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta[b-e9xuj2iw3q] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.file-tag[b-e9xuj2iw3q] {
    padding: 0.15rem 0.45rem;
    background: var(--color-border-faint);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-strong);
    flex-shrink: 0;
}

.btn-action[b-e9xuj2iw3q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    min-height: 38px;
    line-height: 1;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

    .btn-action__icon[b-e9xuj2iw3q] {
        font-size: 0.95rem;
        line-height: 1;
    }

    .btn-action:hover[b-e9xuj2iw3q] {
        background: var(--color-surface-alt);
        border-color: var(--color-primary-tint);
    }

    .btn-action:disabled[b-e9xuj2iw3q] {
        opacity: 0.5;
        cursor: default;
    }

.btn-action--danger[b-e9xuj2iw3q] {
    color: var(--color-danger);
    border-color: var(--color-danger-tint);
}

    .btn-action--danger:hover[b-e9xuj2iw3q] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-light);
    }

/* ── Avatar upload ────────────────────────────── */

.avatar-upload-row[b-e9xuj2iw3q] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.avatar-preview-wrap[b-e9xuj2iw3q] {
    flex-shrink: 0;
}

.avatar-preview[b-e9xuj2iw3q] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-white);
    box-shadow: 0 0 0 4px var(--color-surface-alt);
}

.avatar-placeholder[b-e9xuj2iw3q] {
    box-shadow: 0 0 0 4px var(--color-surface-alt), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.avatar-upload-content[b-e9xuj2iw3q] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.avatar-upload-actions[b-e9xuj2iw3q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.avatar-status[b-e9xuj2iw3q] {
    min-height: 1rem;
}

.avatar-hint[b-e9xuj2iw3q] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.avatar-uploading[b-e9xuj2iw3q] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ── Notices ──────────────────────────────────── */

.notice[b-e9xuj2iw3q] {
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

    .notice.success[b-e9xuj2iw3q] {
        background: var(--color-success-bg-2);
        border: 1px solid var(--color-success-tint);
        color: var(--color-success-darker);
    }

    .notice.error[b-e9xuj2iw3q] {
        background: var(--color-danger-bg-1);
        border: 1px solid var(--color-danger-tint);
        color: var(--color-danger);
        margin-bottom: 0.75rem;
    }

/* ── Section description ─────────────────────── */

.section-description[b-e9xuj2iw3q] {
    font-size: 0.84rem;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

/* ── Notification list ───────────────────────── */

.notification-list[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notification-card[b-e9xuj2iw3q] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-white);
}

.notification-card--unread[b-e9xuj2iw3q] {
    background: var(--color-primary-bg-4);
    border-color: var(--color-primary-bg-7);
}

.notification-icon[b-e9xuj2iw3q] {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.notification-info[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.notification-text[b-e9xuj2iw3q] {
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.4;
    word-break: break-word;
}

.notification-time[b-e9xuj2iw3q] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

/* ── Toggle group (reused for notification prefs) */

.toggle-group[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.toggle-item[b-e9xuj2iw3q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.toggle-check[b-e9xuj2iw3q] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.toggle-text[b-e9xuj2iw3q] {
    font-size: 0.85rem;
    color: var(--color-text-strong);
}

/* ------------------ MOBILE MASTER/DETAIL ------------------ */

.mobile-back[b-e9xuj2iw3q] {
    display: none;
}

@media (max-width: 767.98px) {
    .detail-shell[b-e9xuj2iw3q] {
        flex-direction: column;
        min-height: auto;
    }

    .detail-sidebar[b-e9xuj2iw3q] {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--color-border-light);
        padding: 1rem 0;
    }

    .nav-item[b-e9xuj2iw3q] {
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--color-border-faint);
    }

    .nav-icon[b-e9xuj2iw3q] {
        font-size: 1.15rem;
        width: 24px;
    }

    .detail-content[b-e9xuj2iw3q] {
        padding: 1rem;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .detail-shell.has-section .detail-sidebar[b-e9xuj2iw3q] {
        display: none;
    }

    .detail-shell.no-section .detail-content[b-e9xuj2iw3q] {
        display: none;
    }

    .mobile-back[b-e9xuj2iw3q] {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0 0 0.75rem;
        padding: 0.4rem 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--color-primary);
        text-decoration: none;
    }

    /* Photo upload row: keep preview beside actions; buttons wrap naturally */
    .avatar-upload-row[b-e9xuj2iw3q] {
        gap: 0.85rem;
    }

    .avatar-upload-actions[b-e9xuj2iw3q] {
        justify-content: flex-start;
    }

        .avatar-upload-actions .btn-action[b-e9xuj2iw3q] {
            flex: 1 1 auto;
        }

    .avatar-hint[b-e9xuj2iw3q] {
        white-space: normal;
    }

    /* Show sidebar photo buttons on mobile landing (no-section) */
    .sidebar-photo-actions[b-e9xuj2iw3q] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0 1.25rem 0.75rem;
    }

        .sidebar-photo-actions .btn-action[b-e9xuj2iw3q] {
            flex: 1 1 auto;
        }
}


/* Save button: align to the right */
.form-actions[b-e9xuj2iw3q] {
    justify-content: flex-end;
}

/* ── Push notifications section ───────────────────────────── */
.push-status-grid[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-width: 480px;
    align-self: stretch;
}

.push-status-row[b-e9xuj2iw3q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--neutral-layer-2, #f9fafb);
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest, #e4e7ec);
}

.push-status-label[b-e9xuj2iw3q] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest, #475467);
}

.push-status-value[b-e9xuj2iw3q] {
    font-size: 0.875rem;
    font-weight: 500;
}

.push-status-badge[b-e9xuj2iw3q] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

    .push-status-badge.ok[b-e9xuj2iw3q] {
        background: #d1fadf;
        color: #027a48;
    }

    .push-status-badge.warn[b-e9xuj2iw3q] {
        background: #fef0c7;
        color: #93370d;
    }

    .push-status-badge.error[b-e9xuj2iw3q] {
        background: #fee4e2;
        color: #b42318;
    }

.push-actions[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.btn-push-action[b-e9xuj2iw3q] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}

    .btn-push-action:hover[b-e9xuj2iw3q] {
        background: var(--color-surface-alt);
        border-color: var(--color-primary-tint);
    }

    .btn-push-action:disabled[b-e9xuj2iw3q] {
        opacity: 0.5;
        cursor: default;
    }

/* ── Push registration list ────────────────────────────────────── */
.push-reg-list[b-e9xuj2iw3q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 560px;
}

.push-reg-row[b-e9xuj2iw3q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: var(--neutral-layer-2, #f9fafb);
    border: 1px solid var(--neutral-stroke-rest, #e4e7ec);
    border-radius: 8px;
}

.push-reg-icon[b-e9xuj2iw3q] {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.push-reg-info[b-e9xuj2iw3q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.push-reg-label[b-e9xuj2iw3q] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.push-reg-meta[b-e9xuj2iw3q] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-rest, #6b7280);
}

.push-reg-actions[b-e9xuj2iw3q] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.btn-push-action--danger[b-e9xuj2iw3q] {
    color: #b42318;
    border-color: #fecdca;
}

    .btn-push-action--danger:hover[b-e9xuj2iw3q] {
        background: #fee4e2;
        border-color: #f97066;
    }

/* Dark mode */
[data-theme="dark"] .push-status-row[b-e9xuj2iw3q] {
    background: #1f2937;
    border-color: #334155;
}

[data-theme="dark"] .push-status-label[b-e9xuj2iw3q] {
    color: #cbd5e1;
}

[data-theme="dark"] .push-status-badge.ok[b-e9xuj2iw3q] {
    background: #064e3b;
    color: #6ee7b7;
}

[data-theme="dark"] .push-status-badge.warn[b-e9xuj2iw3q] {
    background: #78350f;
    color: #fcd34d;
}

[data-theme="dark"] .push-status-badge.error[b-e9xuj2iw3q] {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .push-reg-row[b-e9xuj2iw3q] {
    background: #1f2937;
    border-color: #334155;
}

[data-theme="dark"] .push-reg-label[b-e9xuj2iw3q] {
    color: #f1f5f9;
}

[data-theme="dark"] .push-reg-meta[b-e9xuj2iw3q] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-push-action--danger[b-e9xuj2iw3q] {
    color: #fca5a5;
    border-color: #7f1d1d;
}

    [data-theme="dark"] .btn-push-action--danger:hover[b-e9xuj2iw3q] {
        background: #450a0a;
        border-color: #ef4444;
    }

/* iOS push permission steps inside denied notice */
.ios-perm-steps[b-e9xuj2iw3q] {
    margin: 0.5rem 0 0.5rem 1.25rem;
    padding: 0;
}

    .ios-perm-steps li[b-e9xuj2iw3q] {
        margin: 0.1rem 0;
    }
/* /Components/Pages/Home.razor.rz.scp.css */
/* ── Base ──────────────────────────────────────────── */

.dash[b-nfxuazwv5c] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Loading ──────────────────────────────────────── */

.dash-loading[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.dash-spinner[b-nfxuazwv5c] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-nfxuazwv5c 0.7s linear infinite;
}

@keyframes spin-b-nfxuazwv5c {
    to { transform: rotate(360deg); }
}

/* ── Greeting ─────────────────────────────────────── */

.dash-greeting[b-nfxuazwv5c] {
    margin-bottom: 1.5rem;
}

    .dash-greeting h1[b-nfxuazwv5c] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-text);
    }

.dash-date[b-nfxuazwv5c] {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    text-transform: capitalize;
}

/* ── Section ──────────────────────────────────────── */

.dash-section[b-nfxuazwv5c] {
    margin-bottom: 1.75rem;
}

.dash-section-title[b-nfxuazwv5c] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-strong);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.dash-empty[b-nfxuazwv5c] {
    padding: 1.25rem;
    text-align: center;
    color: var(--color-text-subtle);
    font-size: 0.88rem;
    background: var(--color-surface-alt);
    border-radius: 10px;
    border: 1px dashed var(--color-border-light);
}

/* ── Manager cards ────────────────────────────────── */

.dash-cards[b-nfxuazwv5c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.dash-card[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
    background: var(--color-white);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

    .dash-card:hover[b-nfxuazwv5c] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        text-decoration: none;
    }

.dash-card-icon[b-nfxuazwv5c] {
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
}

.dash-card-value[b-nfxuazwv5c] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.dash-card-label[b-nfxuazwv5c] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

/* Card colour accents */
.card-amber[b-nfxuazwv5c] {
    border-color: var(--color-warning-tint);
    background: var(--color-white);
    border-top: 3px solid #f59e0b;
}

    .card-amber .dash-card-icon[b-nfxuazwv5c] { color: #f59e0b; }
    .card-amber .dash-card-value[b-nfxuazwv5c] { color: #b45309; }

.card-violet[b-nfxuazwv5c] {
    border-color: #c4b5fd;
    background: var(--color-white);
    border-top: 3px solid #8b5cf6;
}

    .card-violet .dash-card-icon[b-nfxuazwv5c] { color: #8b5cf6; }
    .card-violet .dash-card-value[b-nfxuazwv5c] { color: #6d28d9; }

.card-sky[b-nfxuazwv5c] {
    border-color: var(--color-primary-tint);
    background: var(--color-white);
    border-top: 3px solid var(--color-primary);
}

    .card-sky .dash-card-icon[b-nfxuazwv5c] { color: var(--color-primary); }
    .card-sky .dash-card-value[b-nfxuazwv5c] { color: var(--color-primary-deep); }

/* ── Next shift card ─────────────────────────────── */

.dash-next-shift[b-nfxuazwv5c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    border: 1px solid var(--color-border-light);
    border-left: 4px solid #16a34a;
    background: var(--color-white);
}

.dash-next-shift-icon[b-nfxuazwv5c] {
    font-size: 2rem;
    flex-shrink: 0;
}

.dash-next-shift-body[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.dash-next-shift-label[b-nfxuazwv5c] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #15803d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-next-shift-datetime[b-nfxuazwv5c] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: capitalize;
}

.dash-next-shift-notes[b-nfxuazwv5c] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-next-shift-countdown[b-nfxuazwv5c] {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #15803d;
    background: var(--color-success-bg-3);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── My week grid ─────────────────────────────────── */

.dash-week-label[b-nfxuazwv5c] {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--color-text-subtle);
}

.dash-week-grid[b-nfxuazwv5c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
}

.dash-day[b-nfxuazwv5c] {
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    padding: 0.75rem;
    background: var(--color-surface-alt);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.15s;
}

    .dash-day--today[b-nfxuazwv5c] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(46,144,250,0.12);
    }

.dash-day-header[b-nfxuazwv5c] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.dash-day-name[b-nfxuazwv5c] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text-strong);
    text-transform: capitalize;
}

.dash-day-date[b-nfxuazwv5c] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

.dash-day-times[b-nfxuazwv5c] {
    font-size: 0.85rem;
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
}

.dash-day-footer[b-nfxuazwv5c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.dash-day-hours[b-nfxuazwv5c] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text);
}

.dash-status[b-nfxuazwv5c] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

.status-approved[b-nfxuazwv5c] {
    background: var(--color-success-bg-2);
    color: var(--color-success-strong);
}

.status-declined[b-nfxuazwv5c] {
    background: var(--color-danger-bg-1);
    color: var(--color-danger-bright);
}

.status-pending[b-nfxuazwv5c] {
    background: var(--color-warning-bg-1);
    color: var(--color-warning-bright);
}

.dash-week-total[b-nfxuazwv5c] {
    margin-top: 0.6rem;
    text-align: right;
    font-size: 0.88rem;
    color: var(--color-text-strong);
}

/* ── Two-column layout ────────────────────────────── */

.dash-columns[b-nfxuazwv5c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .dash-columns[b-nfxuazwv5c] {
        grid-template-columns: 1fr;
    }
}

/* ── Pinned messages ──────────────────────────────── */

.dash-pinned-list[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dash-pinned[b-nfxuazwv5c] {
    padding: 0.75rem 1rem;
    background: var(--color-warning-bg-2);
    border: 1px solid var(--color-warning-tint);
    border-left: 3px solid var(--color-warning-accent);
    border-radius: 8px;
    transition: box-shadow 0.15s;
}

    .dash-pinned:hover[b-nfxuazwv5c] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

.dash-pinned-text[b-nfxuazwv5c] {
    font-size: 0.88rem;
    color: var(--color-text-strong);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.dash-pinned-meta[b-nfxuazwv5c] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.dash-pinned-author[b-nfxuazwv5c] {
    font-weight: 600;
    color: var(--color-text-muted);
}

.dash-pinned-link[b-nfxuazwv5c] {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}

    .dash-pinned-link:hover[b-nfxuazwv5c] {
        text-decoration: underline;
    }

/* ── Birthdays ────────────────────────────────────── */

.dash-birthday-list[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dash-birthday[b-nfxuazwv5c] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    transition: background 0.12s;
}

    .dash-birthday:hover[b-nfxuazwv5c] {
        background: var(--color-surface-alt);
    }

    .dash-birthday--today[b-nfxuazwv5c] {
        border-color: var(--color-warning-tint);
        background: var(--color-warning-bg-1);
    }

.dash-birthday-avatar[b-nfxuazwv5c] {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--color-surface-hover);
        position: relative;
}

    .dash-birthday-avatar img[b-nfxuazwv5c] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dash-birthday-initials[b-nfxuazwv5c] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.dash-birthday-info[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-birthday-name[b-nfxuazwv5c] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-birthday-detail[b-nfxuazwv5c] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

/* ── Company files ────────────────────────────────── */

.dash-file-list[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dash-file[b-nfxuazwv5c] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
}

    .dash-file:hover[b-nfxuazwv5c] {
        background: var(--color-primary-bg-4);
        border-color: var(--color-primary-tint);
    }

.dash-file-icon[b-nfxuazwv5c] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.dash-file-info[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.dash-file-name[b-nfxuazwv5c] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-file-meta[b-nfxuazwv5c] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.dash-file-dl[b-nfxuazwv5c] {
    font-size: 1rem;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.dash-file:hover .dash-file-dl[b-nfxuazwv5c] {
    opacity: 1;
}

/* ── Notifications ───────────────────────────── */

.dash-notification-list[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dash-notification[b-nfxuazwv5c] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
}

.dash-notification--unread[b-nfxuazwv5c] {
    background: var(--color-primary-bg-4);
    border-color: var(--color-primary-bg-7);
}

.dash-notification-icon[b-nfxuazwv5c] {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.dash-notification-body[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.dash-notification-text[b-nfxuazwv5c] {
    font-size: 0.84rem;
    color: var(--color-text);
    line-height: 1.4;
    word-break:break-word;
}

.dash-notification-time[b-nfxuazwv5c] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

/* ── Dark mode ──────────────────────────────────── */

[data-theme="dark"] .dash-card[b-nfxuazwv5c] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .card-amber[b-nfxuazwv5c] { border-top-color: #f59e0b; border-color: var(--color-border); }
[data-theme="dark"] .card-violet[b-nfxuazwv5c] { border-top-color: #8b5cf6; border-color: var(--color-border); }
[data-theme="dark"] .card-sky[b-nfxuazwv5c]    { border-top-color: var(--color-primary); border-color: var(--color-border); }

[data-theme="dark"] .card-amber .dash-card-value[b-nfxuazwv5c]  { color: #fbbf24; }
[data-theme="dark"] .card-violet .dash-card-value[b-nfxuazwv5c] { color: #a78bfa; }
[data-theme="dark"] .card-sky .dash-card-value[b-nfxuazwv5c]    { color: #60a5fa; }

[data-theme="dark"] .dash-card-label[b-nfxuazwv5c] { color: var(--color-text-muted); }

[data-theme="dark"] .dash-next-shift[b-nfxuazwv5c] {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-left-color: #4ade80;
}

[data-theme="dark"] .dash-next-shift-label[b-nfxuazwv5c] { color: #4ade80; }
[data-theme="dark"] .dash-next-shift-countdown[b-nfxuazwv5c] {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

[data-theme="dark"] .dash-day[b-nfxuazwv5c] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .dash-birthday[b-nfxuazwv5c],
[data-theme="dark"] .dash-file[b-nfxuazwv5c],
[data-theme="dark"] .dash-notification[b-nfxuazwv5c] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .dash-birthday--today[b-nfxuazwv5c] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .dash-birthday:hover[b-nfxuazwv5c] {
    background: var(--color-surface-hover);
}

[data-theme="dark"] .dash-file:hover[b-nfxuazwv5c] {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
}

[data-theme="dark"] .dash-notification--unread[b-nfxuazwv5c] {
    background: rgba(46, 144, 250, 0.1);
    border-color: rgba(46, 144, 250, 0.25);
}

[data-theme="dark"] .dash-pinned[b-nfxuazwv5c] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
    border-left-color: var(--color-warning-accent);
}

[data-theme="dark"] .dash-empty[b-nfxuazwv5c] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

/* == Expiring agreements widget ================================ */

.dash-agreement-list[b-nfxuazwv5c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dash-agreement[b-nfxuazwv5c] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-lg, 10px);
    border: 1px solid var(--color-border-light);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.dash-agreement:hover[b-nfxuazwv5c] {
    background: var(--color-surface-hover);
}

/* urgency left-border accent */
.dash-agreement.agr-info[b-nfxuazwv5c]     { border-left: 3px solid var(--color-primary); }
.dash-agreement.agr-warning[b-nfxuazwv5c]  { border-left: 3px solid var(--color-warning-accent); }
.dash-agreement.agr-critical[b-nfxuazwv5c] { border-left: 3px solid var(--color-danger-strong); }

.dash-agreement-avatar[b-nfxuazwv5c] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-agreement-avatar img[b-nfxuazwv5c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-agreement-initials[b-nfxuazwv5c] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    align-items: center;
    justify-content: center;
}

.dash-agreement-info[b-nfxuazwv5c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow: hidden;
}

.dash-agreement-name[b-nfxuazwv5c] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-agreement-detail[b-nfxuazwv5c] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-agreement-badge[b-nfxuazwv5c] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-agreement-badge.agr-info[b-nfxuazwv5c] {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.dash-agreement-badge.agr-warning[b-nfxuazwv5c] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.dash-agreement-badge.agr-critical[b-nfxuazwv5c] {
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

/* ── Push blocked banner ─────────────────────────────────────────── */

.dash-push-blocked[b-nfxuazwv5c] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    color: #78350f;
    font-size: 0.9rem;
    line-height: 1.35;
}

.dash-push-blocked-icon[b-nfxuazwv5c] {
    font-size: 1.25rem;
    line-height: 1;
    flex: 0 0 auto;
}

.dash-push-blocked-body[b-nfxuazwv5c] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dash-push-blocked-body em[b-nfxuazwv5c] { font-style: normal; font-weight: 600; }

.dash-push-blocked-close[b-nfxuazwv5c] {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
}

.dash-push-blocked-close:hover[b-nfxuazwv5c] { opacity: 1; }

[data-theme="dark"] .dash-push-blocked[b-nfxuazwv5c] {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fde68a;
}

/* ── Push enable prompt ─────────────────────────────────────────── */

.dash-push-enable[b-nfxuazwv5c] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: #dbeafe;
    border: 1px solid #60a5fa;
    color: #1e3a8a;
    font-size: 0.9rem;
    line-height: 1.35;
}

.dash-push-enable-icon[b-nfxuazwv5c] {
    font-size: 1.25rem;
    line-height: 1;
    flex: 0 0 auto;
}

.dash-push-enable-body[b-nfxuazwv5c] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dash-push-enable-body strong[b-nfxuazwv5c] { font-weight: 700; }

.dash-push-enable-actions[b-nfxuazwv5c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
    justify-content:flex-end;
}

.dash-push-enable-close[b-nfxuazwv5c] {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
}

.dash-push-enable-close:hover[b-nfxuazwv5c] { opacity: 1; }

[data-theme="dark"] .dash-push-enable[b-nfxuazwv5c] {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(96, 165, 250, 0.45);
    color: #bfdbfe;
}
/* /Components/Pages/Kiosk/KioskPage.razor.rz.scp.css */
.kiosk-screen[b-ll8mvzyqp2] {
    width: 80%;
    max-width: 500px;
}

.kiosk-dashboard-screen[b-ll8mvzyqp2] {
    width: min(96vw, 500px);
    max-width: 500px;
}

.kiosk-dashboard-tabs[b-ll8mvzyqp2] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: .55rem;
}

.kiosk-tab-button[b-ll8mvzyqp2] {
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #f8fafc;
    color: #334155;
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    transition: all .15s ease;
}

.kiosk-tab-button:hover[b-ll8mvzyqp2] {
    border-color: rgba(59, 130, 246, .45);
    background: #eff6ff;
}

.kiosk-tab-button.active[b-ll8mvzyqp2] {
    border-color: var(--color-primary, #2563eb);
    background: var(--color-primary, #2563eb);
    color: #fff;
}

.kiosk-tab-button:disabled[b-ll8mvzyqp2] {
    opacity: .6;
    cursor: not-allowed;
}

.kiosk-roster-card[b-ll8mvzyqp2] {
    overflow: hidden;
}

.kiosk-roster-content[b-ll8mvzyqp2] {
    overflow-x: auto;
}

.kiosk-container[b-ll8mvzyqp2] {
    display: flex;
    align-items: flex-start; /* boven uitlijnen */
    justify-content: flex-start; /* links beginnen */
    gap: 20px; /* ruimte tussen links en rechts */
}

.kiosk-left[b-ll8mvzyqp2] {
    flex: 1;
}

.kiosk-right[b-ll8mvzyqp2] {
    flex: 1;
}

.kiosk-action-buttons[b-ll8mvzyqp2] {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items:stretch;
}

/* ─── Loading ────────────────────────────────────────────────────────────── */
.kiosk-loading[b-ll8mvzyqp2] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100dvh;
}

.kiosk-spinner[b-ll8mvzyqp2] {
    width: 56px;
    height: 56px;
    border: 5px solid #334155;
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: kiosk-spin-b-ll8mvzyqp2 0.8s linear infinite;
}

@keyframes kiosk-spin-b-ll8mvzyqp2 {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Error / invalid token ──────────────────────────────────────────────── */
.kiosk-error-screen[b-ll8mvzyqp2] {
    text-align: center;
    max-width: 440px;
}

.kiosk-error-icon[b-ll8mvzyqp2] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.kiosk-error-screen h1[b-ll8mvzyqp2] {
    font-size: 1.75rem;
    margin-bottom: .5rem;
}

.kiosk-error-screen p[b-ll8mvzyqp2] {
    color: #94a3b8;
    font-size: 1rem;
}

/* ─── PIN entry screen ───────────────────────────────────────────────────── */
.kiosk-pin-screen[b-ll8mvzyqp2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: min(92vw, 560px);
    min-height: min(92dvh, 900px);
}

.kiosk-logo[b-ll8mvzyqp2] {
    max-height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

.kiosk-company-name[b-ll8mvzyqp2] {
    font-size: clamp(1.8rem, 4vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    text-align: center;
}

.kiosk-pin-card[b-ll8mvzyqp2] {
    background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.94));
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 1.25rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 16px 42px rgba(0,0,0,.38);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

    .kiosk-pin-card h2[b-ll8mvzyqp2] {
        margin: 0;
        font-size: clamp(1.2rem, 2.4vw, 1.45rem);
        font-weight: 700;
        color: #e2e8f0;
        text-align: center;
    }

.kiosk-subtitle[b-ll8mvzyqp2] {
    margin: -.35rem 0 .2rem;
    font-size: .88rem;
    color: #94a3b8;
    text-align: center;
}

.kiosk-employee-search[b-ll8mvzyqp2] {
    width: 100%;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #f1f5f9;
    font-size: 1rem;
    padding: .7rem .9rem;
}

    .kiosk-employee-search:focus[b-ll8mvzyqp2] {
        outline: none;
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96,165,250,.2);
    }

.kiosk-employee-list[b-ll8mvzyqp2] {
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding-right: .2rem;
}

.kiosk-employee-option[b-ll8mvzyqp2] {
    width: 100%;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 12px;
    background: #1e293b;
    color: #f1f5f9;
    padding: .65rem .8rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    transition: border-color .12s, background .12s, transform .1s;
}

    .kiosk-employee-option:hover[b-ll8mvzyqp2] {
        border-color: rgba(96,165,250,.65);
        background: #273449;
    }

    .kiosk-employee-option:active[b-ll8mvzyqp2] {
        transform: scale(.99);
    }

.kiosk-employee-option-avatar[b-ll8mvzyqp2] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.kiosk-employee-option-name[b-ll8mvzyqp2] {
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
}

.kiosk-employee-empty[b-ll8mvzyqp2] {
    color: #94a3b8;
    text-align: center;
    background: rgba(30,41,59,.6);
    border: 1px dashed rgba(148,163,184,.35);
    border-radius: 10px;
    padding: .9rem;
}

.kiosk-pin-error[b-ll8mvzyqp2] {
    color: #f87171;
    font-size: 0.9rem;
    background: rgba(239,68,68,.1);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
}

.kiosk-pin-display[b-ll8mvzyqp2] {
    display: flex;
    gap: 0.65rem;
    margin: .1rem 0 .25rem;
    justify-content: center;
}

.kiosk-pin-dot[b-ll8mvzyqp2] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid #475569;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

    .kiosk-pin-dot.filled[b-ll8mvzyqp2] {
        background: #60a5fa;
        border-color: #60a5fa;
        transform: scale(1.03);
    }

/* ─── Numpad ─────────────────────────────────────────────────────────────── */
.kiosk-numpad[b-ll8mvzyqp2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    gap: 0.7rem;
    width: 100%;
}

.kiosk-numpad-btn[b-ll8mvzyqp2] {
    background: #334155;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    color: #f1f5f9;
    font-size: clamp(1.25rem, 2.8vw, 1.6rem);
    font-weight: 700;
    padding: .95rem .8rem;
    min-height: 68px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.12s, transform 0.1s, border-color 0.12s;
    user-select: none;
}

    .kiosk-numpad-btn:hover[b-ll8mvzyqp2] {
        border-color: rgba(148, 163, 184, 0.46);
    }

    .kiosk-numpad-btn:active[b-ll8mvzyqp2] {
        background: #475569;
        transform: scale(0.96);
    }

    .kiosk-numpad-btn.confirm[b-ll8mvzyqp2] {
        background: #1d4ed8;
    }

        .kiosk-numpad-btn.confirm:active[b-ll8mvzyqp2] {
            background: #1e40af;
        }

    .kiosk-numpad-btn.backspace[b-ll8mvzyqp2] {
        background: #374151;
        color: #f87171;
    }

/* ─── Clocked-in screen ──────────────────────────────────────────────────── */
.kiosk-clocked-in-screen[b-ll8mvzyqp2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.kiosk-employee-greeting h1[b-ll8mvzyqp2] {
    font-size: 2rem;
    margin: .5rem 0 0;
}

.kiosk-employee-avatar[b-ll8mvzyqp2] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #1d4ed8;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .5rem;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.kiosk-started-at[b-ll8mvzyqp2] {
    color: #94a3b8;
    font-size: 1rem;
    margin: 0;
}

/* ─── Shared buttons ─────────────────────────────────────────────────────── */
.kiosk-btn[b-ll8mvzyqp2] {
    width: 100%;
    max-width: 360px;
    border: none;
    border-radius: 14px;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity 0.15s, transform 0.1s;
}

    .kiosk-btn:active[b-ll8mvzyqp2] {
        transform: scale(0.97);
    }

    .kiosk-btn:disabled[b-ll8mvzyqp2] {
        opacity: .45;
        cursor: not-allowed;
    }

.kiosk-btn-end[b-ll8mvzyqp2] {
    background: #dc2626;
    color: #fff;
}

    .kiosk-btn-end:hover[b-ll8mvzyqp2] {
        background: #b91c1c;
    }

.kiosk-btn-start[b-ll8mvzyqp2] {
    background: #16a34a;
    color: #fff;
}

    .kiosk-btn-start:hover[b-ll8mvzyqp2] {
        background: #15803d;
    }

.kiosk-btn-cancel[b-ll8mvzyqp2] {
    background: #1e293b;
    color: #94a3b8;
    font-size: 1rem;
    padding: .7rem;
}

/* ─── Summary / form screen ──────────────────────────────────────────────── */
.kiosk-summary-screen[b-ll8mvzyqp2] {
    width: min(92vw, 560px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .kiosk-summary-screen h2[b-ll8mvzyqp2] {
        font-size: 1.25rem;
        margin: 0;
        text-align: center;
    }

.kiosk-form[b-ll8mvzyqp2] {
    background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.94));
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 1rem;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    box-shadow: 0 12px 34px rgba(0,0,0,.30);
}

.kiosk-form-row[b-ll8mvzyqp2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.kiosk-form-group[b-ll8mvzyqp2] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .kiosk-form-group label[b-ll8mvzyqp2] {
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #94a3b8;
        font-weight: 600;
    }

.kiosk-select[b-ll8mvzyqp2] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 1rem;
    padding: .6rem .8rem;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
}

.kiosk-net-hours[b-ll8mvzyqp2] {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1rem;
    color: #94a3b8;
    flex-wrap: wrap;
}

    .kiosk-net-hours strong[b-ll8mvzyqp2] {
        color: #60a5fa;
    }

.kiosk-error[b-ll8mvzyqp2] {
    color: #f87171;
    font-size: .9rem;
}

.kiosk-summary-actions[b-ll8mvzyqp2] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

@media (max-width: 640px) {
    .kiosk-root[b-ll8mvzyqp2] {
        padding: 1rem;
    }

    .kiosk-dashboard-screen[b-ll8mvzyqp2] {
        width: 100%;
    }

    .kiosk-dashboard-tabs[b-ll8mvzyqp2] {
        flex-wrap: wrap;
    }

    .kiosk-tab-button[b-ll8mvzyqp2] {
        flex: 1 1 auto;
        text-align: center;
    }

    .kiosk-pin-screen[b-ll8mvzyqp2] {
        width: 100%;
        min-height: auto;
        gap: 1rem;
    }

    .kiosk-pin-card[b-ll8mvzyqp2] {
        padding: 1rem;
        border-radius: 1rem;
    }

    .kiosk-numpad[b-ll8mvzyqp2] {
        gap: .55rem;
        grid-template-columns: repeat(3, 1fr);
    }

    .kiosk-numpad-btn[b-ll8mvzyqp2] {
        min-height: 60px;
        padding: .7rem .6rem;
        border-radius: 12px;
    }

    .kiosk-dashboard-clock .value[b-ll8mvzyqp2] {
        font-size: 1.8rem;
    }
}

/* ─── Done screen ────────────────────────────────────────────────────────── */
.kiosk-done-screen[b-ll8mvzyqp2] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.kiosk-done-icon[b-ll8mvzyqp2] {
    font-size: 5rem;
    animation: kiosk-pop-b-ll8mvzyqp2 .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes kiosk-pop-b-ll8mvzyqp2 {
    from {
        transform: scale(.3);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.kiosk-done-screen h1[b-ll8mvzyqp2] {
    font-size: 2.25rem;
    margin: 0;
}

.kiosk-done-screen p[b-ll8mvzyqp2] {
    color: #94a3b8;
    margin: 0;
}

.kiosk-done-detail[b-ll8mvzyqp2] {
    font-size: 1.1rem;
    color: #60a5fa !important;
}


.btn-kiosk-primary[b-ll8mvzyqp2], .btn-kiosk-secondary[b-ll8mvzyqp2], .btn-kiosk-danger[b-ll8mvzyqp2], .btn-kiosk-link[b-ll8mvzyqp2] {
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all .15s;
    border: 1px solid transparent;
}

.btn-kiosk-primary[b-ll8mvzyqp2] {
    font-size: clamp(1.25rem, 2.8vw, 1.6rem);
    font-weight: 700;
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-kiosk-danger[b-ll8mvzyqp2] {
    font-size: clamp(1.25rem, 2.8vw, 1.6rem);
    font-weight: 700;
    background: var(--color-danger);
    color: #fff;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.nf-wrap[b-99jhr6804c] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.nf-card[b-99jhr6804c] {
    max-width: 480px;
    text-align: center;
    background: var(--neutral-layer-1, var(--color-white));
    border: 1px solid var(--neutral-stroke-rest, #e5e5e5);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.nf-code[b-99jhr6804c] {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-fill-rest, #0078d4), #6f42c1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

.nf-card h1[b-99jhr6804c] {
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

.nf-card p[b-99jhr6804c] {
    color: var(--neutral-foreground-hint, #555);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.nf-actions[b-99jhr6804c] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* /Components/Pages/NotificationsInbox.razor.rz.scp.css */
/* ── Container ─────────────────────────────────── */
.notif-container[b-g1j13hilav] {
    padding: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 880px;
    margin: 0 auto;
}

/* ── Header ───────────────────────────────────── */
.notif-header[b-g1j13hilav] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.notif-title[b-g1j13hilav] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

    .notif-title h2[b-g1j13hilav] {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.notif-subtitle[b-g1j13hilav] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.notif-unread-badge[b-g1j13hilav] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 6px;
    line-height: 1;
    margin-left: -0.1rem;
}

.notif-header-actions[b-g1j13hilav] {
    display: flex;
    gap: 0.4rem;
}

/* ── Filter bar ───────────────────────────────── */
.notif-filter-bar[b-g1j13hilav] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.btn-tab[b-g1j13hilav] {
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-strong);
    transition: background 0.15s, border-color 0.15s;
}

    .btn-tab:hover[b-g1j13hilav] {
        background: var(--color-surface-hover);
    }

    .btn-tab.active[b-g1j13hilav] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

/* ── Group label ───────────────────────────────── */
.notif-group-label[b-g1j13hilav] {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-faint);
}

.notif-sk-row[b-g1j13hilav] {
    height: 68px;
    border-bottom: 1px solid var(--color-border-faint);
    background: linear-gradient(90deg, #f9fafb 25%, #f0f1f3 50%, #f9fafb 75%);
    background-size: 200% 100%;
    animation: notif-shimmer-b-g1j13hilav 1.5s infinite;
}

.notif-sk-row:last-child[b-g1j13hilav] { border-bottom: 0; }

@keyframes notif-shimmer-b-g1j13hilav {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


[data-bs-theme="dark"] .notif-sk-row[b-g1j13hilav],
[data-theme="dark"] .notif-sk-row[b-g1j13hilav] {
    border-bottom-color: var(--color-border-faint);
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    background-size: 200% 100%;
}

/* ── Buttons (rostering style) ────────────────── */
.btn-primary-soft[b-g1j13hilav] {
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    transition: background 0.15s;
}

    .btn-primary-soft:hover:not(:disabled)[b-g1j13hilav] {
        background: var(--color-drop-target);
    }

    .btn-primary-soft:disabled[b-g1j13hilav] {
        opacity: 0.55;
        cursor: not-allowed;
    }

[data-theme="dark"] .btn-primary-soft[b-g1j13hilav] {
    color: #fff;
}

.btn-ghost[b-g1j13hilav] {
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-strong);
    transition: background 0.15s;
}

    .btn-ghost:hover:not(:disabled)[b-g1j13hilav] {
        background: var(--color-surface-hover);
    }

    .btn-ghost:disabled[b-g1j13hilav] {
        opacity: 0.55;
        cursor: not-allowed;
    }

[data-bs-theme="dark"] .btn-ghost[b-g1j13hilav],
[data-theme="dark"] .btn-ghost[b-g1j13hilav] {
    background: var(--color-surface-alt);
    border-color: var(--color-border-light);
    color: var(--color-text-strong);
}

[data-bs-theme="dark"] .btn-ghost:hover:not(:disabled)[b-g1j13hilav],
[data-theme="dark"] .btn-ghost:hover:not(:disabled)[b-g1j13hilav] {
    background: var(--color-surface-hover);
}

[data-bs-theme="dark"] .btn-ghost:disabled[b-g1j13hilav],
[data-theme="dark"] .btn-ghost:disabled[b-g1j13hilav] {
    background: var(--color-surface-alt);
    opacity: 0.65;
}

/* optional: prevents visual jump when text changes to "Vernieuwen..." */
.notif-header-actions .btn-ghost[b-g1j13hilav] {
    min-width: 8.5rem;
    text-align: center;
}

/* ── List ─────────────────────────────────────── */
.notif-list[b-g1j13hilav] {
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
}

.notif-row[b-g1j13hilav] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border-faint);
    border-left: 3px solid transparent;
    transition: background 0.12s;
}

    .notif-row:last-child[b-g1j13hilav] {
        border-bottom: 0;
    }

    .notif-row:hover[b-g1j13hilav] {
        background: var(--color-surface-subtle);
    }

    .notif-row.is-unread[b-g1j13hilav] {
        background: #f6fef9;
        border-left-color: #18a06f;
    }

        .notif-row.is-unread:hover[b-g1j13hilav] {
            background: var(--color-primary-bg-6);
        }

.notif-icon[b-g1j13hilav] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-body[b-g1j13hilav] {
    flex: 1;
    cursor: pointer;
    min-width: 0;
}

.notif-row-title[b-g1j13hilav] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-strong);
    word-break: break-word;
}

.notif-row-meta[b-g1j13hilav] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.notif-link-tag[b-g1j13hilav] {
    color: var(--color-primary-strong);
    font-weight: 500;
}

.notif-row-actions[b-g1j13hilav] {
    display: flex;
    gap: 0.35rem;
}

/* ── Empty ────────────────────────────────────── */
.notif-empty[b-g1j13hilav] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--color-text-subtle);
    padding: 3.5rem 1rem;
    font-size: 0.9rem;
    border: 1px dashed var(--color-border-light);
    border-radius: 10px;
    background: var(--color-surface-subtle);
}

/* ── Mobile ───────────────────────────────────── */
@media (max-width: 640px) {
    .notif-container[b-g1j13hilav] {
        padding: 1rem 0.75rem;
    }

    .notif-row[b-g1j13hilav] {
        padding: 0.65rem 0.75rem;
    }

    .notif-row-actions[b-g1j13hilav] {
        flex-direction: column;
    }
}
/* /Components/Pages/Rostering/Dialogs/ImportTemplateDialog.razor.rz.scp.css */
/* ── Week badge ──────────────────────────────── */
.template-week-badge[b-cqdq746atq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: var(--color-primary-bg-4);
    border: 1px solid var(--color-primary-bg-7);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary-strong);
    margin-bottom: 1rem;
}

/* ── Section label ───────────────────────────── */
.template-section[b-cqdq746atq] {
    margin-bottom: 0.75rem;
}

.form-label[b-cqdq746atq] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

/* ── Template radio list ─────────────────────── */
.template-list[b-cqdq746atq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.template-option[b-cqdq746atq] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    font-size: 0.88rem;
    color: var(--color-text-strong);
}

    .template-option:hover[b-cqdq746atq] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.08);
    }

    .template-option.selected[b-cqdq746atq] {
        border-color: var(--color-primary);
        background: var(--color-primary-bg-4);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.1);
    }

    .template-option input[type="radio"][b-cqdq746atq] {
        accent-color: var(--color-primary);
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        cursor: pointer;
    }

.template-option-icon[b-cqdq746atq] {
    font-size: 1rem;
    flex-shrink: 0;
}

.template-option-name[b-cqdq746atq] {
    flex: 1;
    font-weight: 500;
}

.template-option-check[b-cqdq746atq] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary-strong);
    flex-shrink: 0;
}

/* ── Conflicts toggle row ────────────────────── */
.template-conflicts-row[b-cqdq746atq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    margin-top: 0.25rem;
}

.template-conflicts-info[b-cqdq746atq] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.template-conflicts-label[b-cqdq746atq] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.template-conflicts-hint[b-cqdq746atq] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    line-height: 1.3;
}

/* ── Empty state ─────────────────────────────── */
.template-empty[b-cqdq746atq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
}

.template-empty-icon[b-cqdq746atq] {
    font-size: 2rem;
    opacity: 0.5;
}

.template-empty p[b-cqdq746atq] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 320px;
}
/* /Components/Pages/Rostering/V2/Absence/AbsenceApproval.razor.rz.scp.css */
/* -- Container ----------------------------------- */

.absence-approval-container[b-3zc70cv6x5] {
    padding: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* -- Header ------------------------------------- */

.absence-approval-header[b-3zc70cv6x5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.absence-approval-title[b-3zc70cv6x5] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

    .absence-approval-title h2[b-3zc70cv6x5] {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.subtitle[b-3zc70cv6x5] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* -- Summary strip ------------------------------- */

.summary-strip[b-3zc70cv6x5] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.summary-card[b-3zc70cv6x5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1.2rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    min-width: 90px;
}

    .summary-card.vacation[b-3zc70cv6x5] {
        border-color: var(--color-success-tint-2);
        background: var(--color-success-bg-1);
    }

    .summary-card.unavailable[b-3zc70cv6x5] {
        border-color: var(--color-danger-tint);
        background: var(--color-danger-bg-1);
    }

.summary-value[b-3zc70cv6x5] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-strong);
    line-height: 1.2;
}

.summary-label[b-3zc70cv6x5] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* -- Filter bar ---------------------------------- */

.filter-bar[b-3zc70cv6x5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
}

.filter-group[b-3zc70cv6x5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.filter-label[b-3zc70cv6x5] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-select[b-3zc70cv6x5],
.filter-input[b-3zc70cv6x5] {
    padding: 0.38rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-white);
    color: var(--color-text);
    font-size: 0.875rem;
    min-width: 160px;
}

    .filter-select:focus[b-3zc70cv6x5],
    .filter-input:focus[b-3zc70cv6x5] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-primary-focus);
    }

.btn-clear-filters[b-3zc70cv6x5] {
    align-self: flex-end;
    padding: 0.38rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}

    .btn-clear-filters:hover[b-3zc70cv6x5] {
        background: var(--color-danger-bg-1);
        color: var(--color-danger-bright);
        border-color: var(--color-danger-tint);
    }

/* -- Empty state -------------------------------- */

.empty-state[b-3zc70cv6x5] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

.empty-icon[b-3zc70cv6x5] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* -- Table --------------------------------------- */

.request-table-wrap[b-3zc70cv6x5] {
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
}

@media print {
    .request-table-wrap[b-3zc70cv6x5] {
        border: none;
    }
}

.request-table[b-3zc70cv6x5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .request-table thead tr[b-3zc70cv6x5] {
        background: var(--color-surface-alt);
        border-bottom: 1px solid var(--color-border-light);
    }

    .request-table thead th[b-3zc70cv6x5] {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        white-space: nowrap;
        user-select: none;
    }

        .request-table thead th.sortable[b-3zc70cv6x5] {
            cursor: pointer;
        }

            .request-table thead th.sortable:hover[b-3zc70cv6x5] {
                color: var(--color-text);
            }

        .request-table thead th.sorted[b-3zc70cv6x5] {
            color: var(--color-primary);
        }

.sort-icon[b-3zc70cv6x5] {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 0.2rem;
}

.rg-row[b-3zc70cv6x5] {
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-white);
    transition: background 0.1s;
    cursor: pointer;
}

    .rg-row:last-child[b-3zc70cv6x5] {
        border-bottom: none;
    }

    .rg-row:hover[b-3zc70cv6x5] {
        background: var(--color-surface-hover);
    }

    .rg-row td[b-3zc70cv6x5] {
        padding: 0.6rem 1rem;
        vertical-align: middle;
    }

/* -- Columns ------------------------------------- */

.col-employee[b-3zc70cv6x5] {
    min-width: 150px;
}

.col-dept[b-3zc70cv6x5] {
    min-width: 130px;
}

.col-type[b-3zc70cv6x5] {
    width: 160px;
}

.col-period[b-3zc70cv6x5] {
    min-width: 200px;
}

.col-note[b-3zc70cv6x5] {
    min-width: 140px;
}

/* -- Cells --------------------------------------- */

.employee-name[b-3zc70cv6x5] {
    font-weight: 600;
    color: var(--color-text-strong);
}

.dept-badge[b-3zc70cv6x5] {
    display: inline-block;
    padding: 0.15rem 0.5rem 0.15rem 0.55rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 5px;
    font-size: 0.8rem;
    color: var(--color-text);
}

.no-dept[b-3zc70cv6x5],
.no-note[b-3zc70cv6x5] {
    color: var(--color-text-muted);
}

.request-type[b-3zc70cv6x5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
}


.type-vacation[b-3zc70cv6x5] {
    background: var(--color-success-bg-1);
    color: var(--color-success-darker);
}

.type-unavailable[b-3zc70cv6x5] {
    background: var(--color-danger-bg-2);
    color: #991b1b;
}

.period-dates[b-3zc70cv6x5] {
    color: var(--color-text-strong);
    font-weight: 500;
}

.period-note[b-3zc70cv6x5] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    display: block;
}

/* -- Dark mode ---------------------------------- */

[data-theme="dark"] .request-table-wrap[b-3zc70cv6x5],
[data-theme="dark"] .filter-bar[b-3zc70cv6x5] {
    border-color: var(--color-border);
}

[data-theme="dark"] .request-table thead tr[b-3zc70cv6x5] {
    background: var(--color-surface-alt);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .rg-row[b-3zc70cv6x5] {
    background: var(--color-surface);
    border-bottom-color: var(--color-border);
}

    [data-theme="dark"] .rg-row:hover[b-3zc70cv6x5] {
        background: var(--color-surface-hover);
    }

[data-theme="dark"] .summary-card[b-3zc70cv6x5] {
    border-color: var(--color-border);
    background: var(--color-surface-alt);
}

    [data-theme="dark"] .summary-card.vacation[b-3zc70cv6x5] {
        background: rgba(22, 163, 74, 0.15);
        border-color: rgba(22, 163, 74, 0.3);
    }

    [data-theme="dark"] .summary-card.unavailable[b-3zc70cv6x5] {
        background: rgba(239, 68, 68, 0.15);
        border-color: rgba(239, 68, 68, 0.3);
    }

[data-theme="dark"] .filter-select[b-3zc70cv6x5],
[data-theme="dark"] .filter-input[b-3zc70cv6x5] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .dept-badge[b-3zc70cv6x5] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .type-vacation[b-3zc70cv6x5] {
    background: rgba(22, 163, 74, 0.2);
    color: #86efac;
}

[data-theme="dark"] .type-unavailable[b-3zc70cv6x5] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}
/* /Components/Pages/Rostering/V2/Absence/AbsenceApprovalDetail.razor.rz.scp.css */
/* ── Container ─────────────────────────────────── */

.detail-container[b-ai5tvikwko] {
    padding: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 900px;
}

/* ── Header ───────────────────────────────────── */

.detail-header[b-ai5tvikwko] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

    .detail-header h2[b-ai5tvikwko] {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.btn-back[b-ai5tvikwko] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
}

    .btn-back:hover[b-ai5tvikwko] {
        background: var(--color-surface-alt);
    }

/* ── Summary ──────────────────────────────────── */

.detail-summary[b-ai5tvikwko] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
    padding: 1rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.summary-item[b-ai5tvikwko] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.summary-label[b-ai5tvikwko] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.summary-value[b-ai5tvikwko] {
    font-size: 0.9rem;
    color: var(--color-text-strong);
    font-weight: 500;
}

.request-type[b-ai5tvikwko] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    width: fit-content;
}

.type-vacation[b-ai5tvikwko] {
    background: var(--color-success-bg-1);
    color: var(--color-success-darker);
}

.type-unavailable[b-ai5tvikwko] {
    background: var(--color-danger-bg-2);
    color: #991b1b;
}

[data-theme="dark"] .type-vacation[b-ai5tvikwko] {
    background: rgba(22, 163, 74, 0.2);
    color: #86efac;
}

[data-theme="dark"] .type-unavailable[b-ai5tvikwko] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.form-input[b-ai5tvikwko] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    font-size: 0.85rem;
}

/* ── Year warning ─────────────────────────────── */

.year-warning[b-ai5tvikwko] {
    font-size: 0.82rem;
    color: var(--color-warning-strong);
    background: var(--color-warning-bg-1);
    border: 1px solid var(--color-warning-tint);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

/* ── Saldo ────────────────────────────────────── */

.saldo-section[b-ai5tvikwko] {
    margin-bottom: 1.5rem;
}

.saldo-chips[b-ai5tvikwko] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.saldo-chip[b-ai5tvikwko] {
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background: var(--color-surface-hover);
    color: var(--color-text-strong);
}

.saldo-total[b-ai5tvikwko] {
    color: var(--color-text-muted);
}

/* ── Days section ─────────────────────────────── */

.days-section[b-ai5tvikwko] {
    margin-bottom: 1.5rem;
}

    .days-section h3[b-ai5tvikwko] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-text-strong);
        margin: 0 0 0.5rem;
    }

/* Scroll wrapper — only the table scrolls horizontally */
.days-table-scroll[b-ai5tvikwko] {
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
}

.bulk-actions[b-ai5tvikwko] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.bulk-label[b-ai5tvikwko] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.btn-bulk-type[b-ai5tvikwko] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.78rem;
    cursor: pointer;
}

    .btn-bulk-type:hover[b-ai5tvikwko] {
        background: var(--color-surface-hover);
    }

    .btn-bulk-type.active[b-ai5tvikwko] {
        background: var(--color-primary-bg-5);
        border-color: var(--color-primary-tint);
        color: var(--color-primary-deep);
        font-weight: 600;
    }

/* ── Days table ───────────────────────────────── */

.days-table[b-ai5tvikwko] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
}

    .days-table th[b-ai5tvikwko] {
        background: var(--color-surface-alt);
        padding: 0.5rem 0.6rem;
        text-align: left;
        font-weight: 600;
        color: var(--color-text-muted);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--color-border-light);
    }

    .days-table td[b-ai5tvikwko] {
        padding: 0.45rem 0.6rem;
        border-bottom: 1px solid var(--color-surface-hover);
        color: var(--color-text-strong);
    }

    .days-table tr:last-child td[b-ai5tvikwko] {
        border-bottom: none;
    }

.col-day-name[b-ai5tvikwko] {
    font-weight: 500;
    text-transform: capitalize;
    min-width: 40px;
}

.col-week[b-ai5tvikwko] {
    width: 36px;
    text-align: center;
}

.week-badge[b-ai5tvikwko] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-hover);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    min-width: 22px;
    text-align: center;
}

.week-first td[b-ai5tvikwko] {
    border-top: 2px solid var(--color-border-light);
}

.col-hours[b-ai5tvikwko] {
    width: 150px;
}

.hours-input-row[b-ai5tvikwko] {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

    .hours-input-row .btn-sign[b-ai5tvikwko] {
        height: 28px;
        padding: 0 8px;
        border: 1px solid var(--color-border);
        background: var(--color-surface-alt);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: background 0.12s, border-color 0.12s, color 0.12s, filter 0.12s, box-shadow 0.12s;
        white-space: nowrap;
    }

        .hours-input-row .btn-sign:first-child[b-ai5tvikwko] {
            border-radius: 6px 0 0 6px;
            border-right: none;
        }

        .hours-input-row .btn-sign:nth-child(2)[b-ai5tvikwko] {
            border-radius: 0;
            border-right: none;
        }

        .hours-input-row .btn-sign-min[b-ai5tvikwko] {
            background: #fef2f2;
            border-color: #fecaca;
            color: #b91c1c;
        }

        .hours-input-row .btn-sign-plus[b-ai5tvikwko] {
            background: #f0fdf4;
            border-color: #bbf7d0;
            color: #166534;
        }

        .hours-input-row .btn-sign-min.active[b-ai5tvikwko] {
            background: #dc2626;
            border-color: #b91c1c;
            color: #fff;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 2px rgba(220,38,38,0.22);
        }

        .hours-input-row .btn-sign-plus.active[b-ai5tvikwko] {
            background: #16a34a;
            border-color: #15803d;
            color: #fff;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 2px rgba(34,197,94,0.22);
        }

        .hours-input-row .btn-sign.active[b-ai5tvikwko] {
            font-weight: 800;
        }

        .hours-input-row .btn-sign:hover:not(.active)[b-ai5tvikwko] {
            filter: brightness(0.82);
        }

    .hours-input-row input[b-ai5tvikwko] {
        width: 60px;
        padding: 0.25rem 0.4rem;
        border: 1px solid var(--color-border);
        border-radius: 0 6px 6px 0;
        font-size: 0.85rem;
        text-align: right;
        height: 28px;
        box-sizing: border-box;
    }

    .days-table select[b-ai5tvikwko] {
        padding: 0.25rem 0.4rem;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        font-size: 0.82rem;
        background: var(--color-white);
        min-width: 140px;
    }

.year-separator td[b-ai5tvikwko] {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 0.6rem;
    background: var(--color-surface-alt);
    letter-spacing: 0.1em;
}

.total-row td[b-ai5tvikwko] {
    border-top: 2px solid var(--color-border-light);
    background: var(--color-surface-alt);
    padding: 0.5rem 0.6rem;
}

/* ── Actions ──────────────────────────────────── */

.detail-actions[b-ai5tvikwko] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
}

.validation-hint[b-ai5tvikwko] {
    margin-right: auto;
    font-size: 0.85rem;
    color: #b45309;
}

.btn-cancel[b-ai5tvikwko] {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
}

    .btn-cancel:hover[b-ai5tvikwko] {
        background: var(--color-surface-alt);
    }

.btn-approve[b-ai5tvikwko] {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-success-tint-2);
    border-radius: 8px;
    background: var(--color-success-bg-3);
    color: var(--color-success-darkest);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-approve:hover[b-ai5tvikwko] {
        background: var(--color-success-tint-3);
    }

    .btn-approve:disabled[b-ai5tvikwko] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-save[b-ai5tvikwko] {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-primary-tint);
    border-radius: 8px;
    background: var(--color-primary-bg-5);
    color: var(--color-primary-deep);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-save:hover[b-ai5tvikwko] {
        background: var(--color-drop-target);
    }

    .btn-save:disabled[b-ai5tvikwko] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Bulk actions ─────────────────────────────── */

.bulk-actions[b-ai5tvikwko] {
    display: flex;
    gap: 0.5rem;
    margin: 0.6rem 0;
}

.btn-fill[b-ai5tvikwko] {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-alt);
    color: var(--color-text-strong);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}

    .btn-fill:hover[b-ai5tvikwko] {
        background: var(--color-surface-hover);
        border-color: var(--color-border-light);
    }

.btn-clear[b-ai5tvikwko] {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}

    .btn-clear:hover[b-ai5tvikwko] {
        background: var(--color-surface-alt);
    }

/* ── Weekend / zero rows ─────────────────────── */

.weekend-row td[b-ai5tvikwko] {
    background: var(--color-surface-alt);
}

.zero-hours td[b-ai5tvikwko] {
    /*opacity: 0.5;*/
}

/* ── Orphan rows (booked date outside current roster range) ── */

.orphan-row td[b-ai5tvikwko] {
    background: #fff8e1;
}

[data-theme="dark"] .orphan-row td[b-ai5tvikwko] {
    background: #3a2e0a;
}

.orphan-badge[b-ai5tvikwko] {
    margin-left: 0.35rem;
    font-size: 0.8rem;
    color: #b45309;
    cursor: default;
}

.col-orphan-action[b-ai5tvikwko] {
    width: 2.5rem;
    text-align: center;
}

.btn-remove-orphan[b-ai5tvikwko] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.4rem;
    color: var(--color-danger-bright);
    border-radius: 4px;
}

    .btn-remove-orphan:hover[b-ai5tvikwko] {
        background: var(--color-surface-alt);
    }

.btn-danger[b-ai5tvikwko] {
    padding: 0.45rem 1rem;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-danger-bright);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-danger:hover[b-ai5tvikwko] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-light);
    }

    .btn-danger:disabled[b-ai5tvikwko] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Mobile ───────────────────────────────────── */

@media (max-width: 767.98px) {

    .detail-container[b-ai5tvikwko] {
        padding: 0.75rem 0.75rem 5rem; /* extra bottom for the mobile nav */
    }

    /* Header: stack back-link above title */
    .detail-header[b-ai5tvikwko] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        margin-bottom: 1rem;
    }

        .detail-header h2[b-ai5tvikwko] {
            font-size: 1.1rem;
        }

    /* Summary: single column */
    .detail-summary[b-ai5tvikwko] {
        grid-template-columns: 1fr;
        padding: 0.75rem;
    }

    /* Saldo chips: smaller */
    .saldo-chip[b-ai5tvikwko] {
        font-size: 0.72rem;
    }

    /* Bulk action rows: wrap tightly */
    .bulk-actions[b-ai5tvikwko] {
        gap: 0.3rem;
    }

    .btn-bulk-type[b-ai5tvikwko],
    .btn-fill[b-ai5tvikwko],
    .btn-clear[b-ai5tvikwko] {
        font-size: 0.73rem;
        padding: 0.25rem 0.5rem;
    }

    /* Days table: scroll horizontally so it never overflows */
    .days-table-scroll[b-ai5tvikwko] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        /* Remove the redundant border on the table itself once the wrapper has it */
        .days-table-scroll .days-table[b-ai5tvikwko] {
            border: none;
            border-radius: 0;
            /* keep a minimum so touch targets stay reasonable */
            min-width: 520px;
        }

    /* Make the select fill available space */
    .days-table select[b-ai5tvikwko] {
        min-width: 110px;
        max-width: 100%;
    }

    /* Hours input: keep compact */
    .col-hours[b-ai5tvikwko] {
        width: 120px;
    }

    .hours-input-row input[b-ai5tvikwko] {
        width: 48px;
    }

    /* Hide the verbose "Datum" column text on very narrow screens — keep day name */
    /* (commented out by default; un-comment if you want to drop it on phones)
    .col-date { display: none; }
    */

    /* Actions: stack full-width */
    .detail-actions[b-ai5tvikwko] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .detail-actions .btn-cancel[b-ai5tvikwko],
        .detail-actions .btn-approve[b-ai5tvikwko],
        .detail-actions .btn-save[b-ai5tvikwko],
        .detail-actions .btn-danger[b-ai5tvikwko] {
            text-align: center;
            justify-content: center;
            width: 100%;
            padding: 0.65rem 1rem;
        }
}

/* ── Dark mode ──────────────────────────────────── */

[data-theme="dark"] .btn-back[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

    [data-theme="dark"] .btn-back:hover[b-ai5tvikwko] {
        background: var(--color-surface-hover);
    }

[data-theme="dark"] .form-input[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-strong);
    color-scheme: dark;
}

/* ── Bulk type buttons ── */

[data-theme="dark"] .btn-bulk-type[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-strong);
}

    [data-theme="dark"] .btn-bulk-type:hover[b-ai5tvikwko] {
        background: var(--color-surface-hover);
    }

    [data-theme="dark"] .btn-bulk-type.active[b-ai5tvikwko] {
        background: rgba(46,144,250,0.15);
        border-color: rgba(46,144,250,0.35);
        color: #60a5fa;
    }

[data-theme="dark"] .btn-fill[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-strong);
}

    [data-theme="dark"] .btn-fill:hover[b-ai5tvikwko] {
        background: var(--color-surface-hover);
    }

[data-theme="dark"] .btn-clear[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

    [data-theme="dark"] .btn-clear:hover[b-ai5tvikwko] {
        background: var(--color-surface-hover);
    }

/* ── Table ── */

[data-theme="dark"] .days-table-scroll[b-ai5tvikwko] {
    border-color: var(--color-border);
}

[data-theme="dark"] .days-table[b-ai5tvikwko] {
    border-color: var(--color-border);
}

[data-theme="dark"] .days-table th[b-ai5tvikwko] {
    background: var(--color-surface);
    border-bottom-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .days-table td[b-ai5tvikwko] {
    color: var(--color-text-strong);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .days-table tr:hover td[b-ai5tvikwko] {
    /*background: var(--color-surface-hover);*/
    background-color: #1c1c1c;
}

[data-theme="dark"] .weekend-row td[b-ai5tvikwko] {
    /*background: var(--color-surface);*/
    color: var(--color-text-subtle);
}

[data-theme="dark"] .total-row td[b-ai5tvikwko] {
    background: var(--color-surface);
    border-top-color: var(--color-border);
}

[data-theme="dark"] .year-separator td[b-ai5tvikwko] {
    background: var(--color-surface);
    color: var(--color-text-muted);
}

[data-theme="dark"] .week-first td[b-ai5tvikwko] {
    border-top-color: var(--color-border);
}

[data-theme="dark"] .week-badge[b-ai5tvikwko] {
    background: var(--color-surface-hover);
    color: var(--color-text-subtle);
}

[data-theme="dark"] .days-table select[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-strong);
    color-scheme: dark;
}

[data-theme="dark"] .hours-input-row .btn-sign[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .hours-input-row .btn-sign-min[b-ai5tvikwko] {
    background: rgba(239,68,68,0.14);
    border-color: rgba(239,68,68,0.35);
    color: #fca5a5;
}

[data-theme="dark"] .hours-input-row .btn-sign-plus[b-ai5tvikwko] {
    background: rgba(34,197,94,0.14);
    border-color: rgba(34,197,94,0.35);
    color: #86efac;
}

    [data-theme="dark"] .hours-input-row .btn-sign-min.active[b-ai5tvikwko] {
        background: rgba(239,68,68,0.56);
        border-color: rgba(248,113,113,0.9);
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 2px rgba(239,68,68,0.3);
    }

    [data-theme="dark"] .hours-input-row .btn-sign-plus.active[b-ai5tvikwko] {
        background: rgba(34,197,94,0.56);
        border-color: rgba(134,239,172,0.9);
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 2px rgba(34,197,94,0.3);
    }

[data-theme="dark"] .hours-input-row .btn-sign.active[b-ai5tvikwko] {
    font-weight: 800;
}

[data-theme="dark"] .hours-input-row .btn-sign:hover:not(.active)[b-ai5tvikwko] {
    filter: brightness(0.78);
}

[data-theme="dark"] .hours-input-row input[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-strong);
    color-scheme: dark;
}

/* ── Action buttons ── */

[data-theme="dark"] .btn-cancel[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-strong);
}

    [data-theme="dark"] .btn-cancel:hover[b-ai5tvikwko] {
        background: var(--color-surface-hover);
    }

[data-theme="dark"] .btn-approve[b-ai5tvikwko] {
    background: rgba(22,163,74,0.18);
    border-color: rgba(22,163,74,0.35);
    color: #4ade80;
}

    [data-theme="dark"] .btn-approve:hover[b-ai5tvikwko] {
        background: rgba(22,163,74,0.28);
    }

[data-theme="dark"] .btn-save[b-ai5tvikwko] {
    background: rgba(46,144,250,0.15);
    border-color: rgba(46,144,250,0.35);
    color: #60a5fa;
}

    [data-theme="dark"] .btn-save:hover[b-ai5tvikwko] {
        background: rgba(46,144,250,0.25);
    }

[data-theme="dark"] .btn-danger[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: rgba(239,68,68,0.4);
    color: #fca5a5;
}

    [data-theme="dark"] .btn-danger:hover[b-ai5tvikwko] {
        background: rgba(239,68,68,0.15);
        border-color: rgba(239,68,68,0.55);
    }

/* ── Mobile dark ── */

@media (max-width: 767.98px) {
    [data-theme="dark"] .days-table-scroll[b-ai5tvikwko] {
        border-color: var(--color-border);
    }
}

/* Contract info */

.contract-badge[b-ai5tvikwko] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.contract-badge.contract-fixed[b-ai5tvikwko] {
    background: var(--color-success-soft, #e6f4ea);
    color: var(--color-success-strong, #1e7e34);
}

.contract-badge.contract-zero[b-ai5tvikwko] {
    background: var(--color-warning-soft, #fff4e0);
    color: var(--color-warning-strong, #b06f00);
}

.contract-detail[b-ai5tvikwko] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-left: 0.25rem;
}

.contract-period[b-ai5tvikwko] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

.contract-active[b-ai5tvikwko] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-success-strong, #1e7e34);
    margin-top: 0.1rem;
}


/* Attached roster item card */

.roster-item-card[b-ai5tvikwko] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 0.25rem;
    padding: 0.55rem 0.85rem;
    background: var(--color-info-bg-1, #eef5ff);
    border: 1px solid var(--color-info-tint, #b3d0ff);
    border-radius: 8px;
    font-size: 0.82rem;
}

.roster-item-icon[b-ai5tvikwko] {
    font-size: 1rem;
    flex-shrink: 0;
}

.roster-item-info[b-ai5tvikwko] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.roster-item-label[b-ai5tvikwko] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.roster-item-value[b-ai5tvikwko] {
    font-weight: 600;
    color: var(--color-text-strong);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.roster-item-time[b-ai5tvikwko] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.roster-item-edit-btn[b-ai5tvikwko] {
    flex-shrink: 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
    border: 1px solid var(--color-info-tint, #b3d0ff);
    background: var(--color-surface);
    color: var(--color-primary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .roster-item-edit-btn:hover[b-ai5tvikwko] {
        background: var(--color-primary-bg-5);
        border-color: var(--color-primary-tint);
    }

[data-theme="dark"] .roster-item-card[b-ai5tvikwko] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .roster-item-edit-btn[b-ai5tvikwko] {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
    color: #93c5fd;
}

    [data-theme="dark"] .roster-item-edit-btn:hover[b-ai5tvikwko] {
        background: rgba(46,144,250,0.22);
        border-color: rgba(46,144,250,0.4);
    }
/* ── End ──────────────────────────────────────── */
/* /Components/Pages/Rostering/V2/Absence/AbsenceCalendar.razor.rz.scp.css */
/* ── Absence Calendar ─────────────────────────── */

.absence-calendar[b-6xwcohxjmb] {
    padding: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Header ───────────────────────────────────── */

.cal-header[b-6xwcohxjmb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.4rem;
}

    .cal-header h2[b-6xwcohxjmb] {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.cal-nav[b-6xwcohxjmb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.month-label[b-6xwcohxjmb] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-strong);
    padding: 0 0.5rem;
    min-width: 160px;
    text-align: center;
}

/* ── Table ────────────────────────────────────── */

.cal-table[b-6xwcohxjmb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    table-layout: fixed;
}

    .cal-table th[b-6xwcohxjmb],
    .cal-table td[b-6xwcohxjmb] {
        border: 1px solid var(--color-border-light);
        padding: 0;
        text-align: center;
        vertical-align: middle;
    }

/* ── Name column ──────────────────────────────── */

.col-name[b-6xwcohxjmb] {
    width: 130px;
    text-align: left !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.8rem;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Day columns ──────────────────────────────── */

th.col-day[b-6xwcohxjmb] {
    padding: 0.3rem 0 !important;
    background: var(--color-surface-alt);
    font-weight: 600;
    color: var(--color-text-muted);
}

    th.col-day .day-abbr[b-6xwcohxjmb] {
        display: block;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-subtle);
    }

    th.col-day .day-num[b-6xwcohxjmb] {
        display: block;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--color-text-strong);
    }

    th.col-day.today[b-6xwcohxjmb] {
        background: var(--color-primary-soft);
    }

        th.col-day.today .day-num[b-6xwcohxjmb] {
            color: var(--color-primary-strong);
        }

    th.col-day.weekend[b-6xwcohxjmb] {
        background: var(--color-surface-hover);
    }

        th.col-day.weekend .day-num[b-6xwcohxjmb] {
            color: var(--color-text-subtle);
        }

td.col-day[b-6xwcohxjmb] {
    width: auto;
    height: 32px;
    min-width: 26px;
    position: relative;
    cursor: default;
}

    td.col-day.today[b-6xwcohxjmb] {
        background: rgba(239, 248, 255, 0.3);
    }

    /* Entry colors always override today background */
    td.col-day.today.cell-vacation[b-6xwcohxjmb] {
        background: var(--color-success-bg-1);
    }

    td.col-day.today.cell-sick[b-6xwcohxjmb] {
        background: var(--color-warning-amber);
    }

    td.col-day.today.cell-unavailable[b-6xwcohxjmb] {
        background: var(--color-danger-bg-2);
    }

    td.col-day.today.cell-rather-not[b-6xwcohxjmb] {
        background: #f3e8ff;
    }

    td.col-day.today.cell-pending[b-6xwcohxjmb] {
        background: var(--color-primary-bg-6);
    }

    td.col-day.today.cell-roster[b-6xwcohxjmb] {
        background: var(--color-primary-bg-5);
    }

    td.col-day.weekend[b-6xwcohxjmb] {
        background: var(--color-surface-subtle);
    }

    /* Entry colors always override weekend background */
    td.col-day.weekend.cell-vacation[b-6xwcohxjmb] {
        background: var(--color-success-bg-1);
    }

    td.col-day.weekend.cell-sick[b-6xwcohxjmb] {
        background: var(--color-warning-amber);
    }

    td.col-day.weekend.cell-unavailable[b-6xwcohxjmb] {
        background: var(--color-danger-bg-2);
    }

    td.col-day.weekend.cell-rather-not[b-6xwcohxjmb] {
        background: #f3e8ff;
    }

    td.col-day.weekend.cell-pending[b-6xwcohxjmb] {
        background: var(--color-primary-bg-6);
    }

    td.col-day.weekend.cell-roster[b-6xwcohxjmb] {
        background: var(--color-primary-bg-5);
    }

/* ── Department row ───────────────────────────── */

.dept-row td[b-6xwcohxjmb] {
    background: var(--color-surface-hover);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-strong);
    text-align: left !important;
    padding: 0.4rem 0.5rem !important;
    letter-spacing: 0.02em;
}

/* ── Employee rows ────────────────────────────── */

.emp-row .col-name[b-6xwcohxjmb] {
    font-weight: 500;
}

.colleague-empty[b-6xwcohxjmb] {
    font-weight: 400 !important;
    font-style: italic;
    color: #6b7280;
    text-align: center;
}

/* ── Current user pinned row ─────────────────── */

.my-row-header td[b-6xwcohxjmb] {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary-strong);
}

.my-row .col-name[b-6xwcohxjmb] {
    color: var(--color-primary-strong);
}

.my-row td.cell-empty[b-6xwcohxjmb] {
    cursor: crosshair;
    user-select: none;
}

    .my-row td.cell-empty:hover[b-6xwcohxjmb] {
        background: var(--color-drop-target);
    }

/* ── Cancelable pending cells ─────────────────── */

.cancelable[b-6xwcohxjmb] {
    cursor: pointer;
    position: relative;
}

    .cancelable:hover[b-6xwcohxjmb] {
        box-shadow: inset 0 0 0 2px var(--color-primary);
    }

    .cancelable:hover .cell-text[b-6xwcohxjmb] {
        opacity: 0.3;
    }

    .cancelable:hover[b-6xwcohxjmb]::after {
        content: '\270E';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--color-primary);
    }

.spacer-row td[b-6xwcohxjmb] {
    height: 6px;
    border: none;
    background: transparent;
}

/* ── Drag selection ──────────────────────────── */

.drag-selected[b-6xwcohxjmb] {
    background: var(--color-range-selected) !important;
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* ── Cell states ──────────────────────────────── */

.cell-text[b-6xwcohxjmb] {
    display: block;
    font-size: 0.82rem;
    line-height: 32px;
}

.cell-empty[b-6xwcohxjmb] {
    background: var(--color-white);
}

.cell-vacation[b-6xwcohxjmb] {
    background: var(--color-success-bg-1);
    color: var(--color-success-darker);
}

.cell-sick[b-6xwcohxjmb] {
    background: var(--color-warning-amber);
    color: var(--color-warning-strong);
}

.cell-unavailable[b-6xwcohxjmb] {
    background: var(--color-danger-bg-2);
    color: #991b1b;
}

.cell-rather-not[b-6xwcohxjmb] {
    background: #f3e8ff;
    color: #6b21a8;
}

.cell-roster[b-6xwcohxjmb] {
    background: var(--color-primary-bg-5);
    color: var(--color-primary-deep);
}

/* ── Pending state ────────────────────────────── */

.cell-pending[b-6xwcohxjmb] {
    background: var(--color-primary-bg-6);
    color: #0c4a6e;
}

.pending .cell-text[b-6xwcohxjmb] {
    opacity: 0.55;
    font-style: italic;
}

.pending[b-6xwcohxjmb] {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.35) 3px,
        rgba(255, 255, 255, 0.35) 6px
    );
}

/* ── Legend ────────────────────────────────────── */

.cal-legend[b-6xwcohxjmb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.legend-item[b-6xwcohxjmb] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-swatch[b-6xwcohxjmb] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--color-border-light);
}

/* ── Request panel overlay ────────────────────── */

.request-overlay[b-6xwcohxjmb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.request-panel[b-6xwcohxjmb] {
    background: var(--color-white);
    border-radius: 12px;
    padding: 1.5rem;
    width: 440px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.panel-header[b-6xwcohxjmb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .panel-header h3[b-6xwcohxjmb] {
        margin: 0;
        font-size: 1.05rem;
        color: var(--color-text);
    }

.btn-close-panel[b-6xwcohxjmb] {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 0 0.2rem;
    line-height: 1;
}

    .btn-close-panel:hover[b-6xwcohxjmb] {
        color: var(--color-text-strong);
    }

/* ── Form elements (matching roster dialogs) ──── */

.form-group[b-6xwcohxjmb] {
    margin-bottom: 0.75rem;
}

.form-label[b-6xwcohxjmb] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-strong);
    margin-bottom: 0.25rem;
}

.form-select[b-6xwcohxjmb], .form-input[b-6xwcohxjmb] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-white);
    box-sizing: border-box;
}

    .form-select:focus[b-6xwcohxjmb], .form-input:focus[b-6xwcohxjmb] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
    }

.form-fieldset[b-6xwcohxjmb] {
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 0.65rem 0.85rem 0.85rem;
    margin: 0 0 0.75rem;
}

    .form-fieldset legend[b-6xwcohxjmb] {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 0 0.35rem;
    }

.form-row[b-6xwcohxjmb] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

    .form-row .form-group[b-6xwcohxjmb] {
        flex: 1;
        margin-bottom: 0;
    }

.form-check[b-6xwcohxjmb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--color-text-strong);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    padding-bottom: 0.45rem;
}

    .form-check input[type="checkbox"][b-6xwcohxjmb] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

/* ── Time row (sits below date row in fieldsets) ─ */

.time-row[b-6xwcohxjmb] {
    margin-top: 0.5rem;
}

    .time-row .form-group[b-6xwcohxjmb] {
        max-width: 160px;
    }

.input-time[b-6xwcohxjmb] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    min-width: 120px;
}

/* ── Link button ──────────────────────────────── */

.btn-link[b-6xwcohxjmb] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color 0.15s;
}

    .btn-link:hover[b-6xwcohxjmb] {
        color: var(--color-primary-strong);
        text-decoration: underline;
    }

/* ── Actions footer ──────────────────────────── */

.request-actions[b-6xwcohxjmb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.actions-right[b-6xwcohxjmb] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* ── Stacked multi-entry cells ───────────────── */

td.col-day.cell-stacked[b-6xwcohxjmb] {
    height: auto;
    padding: 1px !important;
    vertical-align: middle;
}

.cell-entry[b-6xwcohxjmb] {
    display: block;
    font-size: 0.72rem;
    line-height: 14px;
    border-radius: 3px;
    padding: 0 2px;
    text-align: center;
    cursor: default;
}

.cell-entry + .cell-entry[b-6xwcohxjmb] {
    margin-top: 1px;
}

.cell-entry.pending[b-6xwcohxjmb] {
    cursor: pointer;
}

.cell-entry.pending:hover[b-6xwcohxjmb] {
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* ── Conflict banner ─────────────────────────── */

.conflict-banner[b-6xwcohxjmb] {
    display: flex;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-warning-tint);
    border-radius: 8px;
    background: var(--color-warning-bg-1);
    margin-bottom: 0.75rem;
}

.conflict-icon[b-6xwcohxjmb] {
    font-size: 1.1rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.conflict-body[b-6xwcohxjmb] {
    font-size: 0.8rem;
    color: var(--color-warning-strong);
    line-height: 1.4;
}

    .conflict-body strong[b-6xwcohxjmb] {
        display: block;
        font-size: 0.82rem;
        margin-bottom: 0.15rem;
    }

    .conflict-body p[b-6xwcohxjmb] {
        margin: 0 0 0.4rem;
    }

.conflict-entry-link[b-6xwcohxjmb] {
    display: block;
    background: none;
    border: none;
    color: #b45309;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.15rem 0;
    text-align: left;
    text-decoration: none;
}

    .conflict-entry-link:hover[b-6xwcohxjmb] {
        color: var(--color-warning-strong);
        text-decoration: underline;
    }

.btn-submit:disabled[b-6xwcohxjmb] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* -- Help banner -- */
.cal-help[b-6xwcohxjmb] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-tint-2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-primary-strong);
    line-height: 1.4;
}

.cal-help-icon[b-6xwcohxjmb] {
    font-size: 1rem;
    flex-shrink: 0;
}

.cal-help-text strong[b-6xwcohxjmb] {
    font-weight: 600;
}

/* ── Mobile vs desktop visibility ─────────────────────────── */

.cal-mobile[b-6xwcohxjmb] {
    display: none;
}

@media (max-width: 767.98px) {
    .cal-desktop[b-6xwcohxjmb] {
        display: none !important;
    }

    .cal-mobile[b-6xwcohxjmb] {
        display: block;
    }

    .absence-calendar[b-6xwcohxjmb] {
        padding: 0.75rem;
    }

    .cal-header[b-6xwcohxjmb] {
        gap: 0.5rem;
    }

        .cal-header h2[b-6xwcohxjmb] {
            font-size: 1.1rem;
        }

    .month-label[b-6xwcohxjmb] {
        min-width: 110px;
        font-size: 0.85rem;
    }

    .cal-help[b-6xwcohxjmb] {
        padding: 0.5rem 0.65rem;
        font-size: 0.78rem;
    }

    /* Request panel becomes full-screen sheet on phones */
    .request-overlay[b-6xwcohxjmb] {
        align-items: stretch;
        justify-content: stretch;
    }

    .request-panel[b-6xwcohxjmb] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        border-radius: 0;
        padding: 1rem;
        overflow-y: auto;
    }

    .form-row[b-6xwcohxjmb] {
        flex-wrap: wrap;
    }

    .request-actions[b-6xwcohxjmb] {
        flex-wrap: wrap;
    }

    .actions-right[b-6xwcohxjmb] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── Mobile list layout ────────────────────────────────── */

.mob-new-btn[b-6xwcohxjmb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 1rem;
}

    .mob-new-btn:active[b-6xwcohxjmb] {
        background: var(--color-primary-hover);
    }

.mob-section[b-6xwcohxjmb] {
    margin-bottom: 1.25rem;
}

.mob-section-title[b-6xwcohxjmb] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mob-empty[b-6xwcohxjmb] {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-border-light);
    border-radius: 8px;
    text-align: center;
}

.mob-list[b-6xwcohxjmb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mob-item[b-6xwcohxjmb] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
}

    .mob-item.tappable[b-6xwcohxjmb] {
        cursor: pointer;
    }

        .mob-item.tappable:active[b-6xwcohxjmb] {
            box-shadow: inset 0 0 0 2px var(--color-primary);
        }

.mob-item-icon[b-6xwcohxjmb] {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.mob-item-body[b-6xwcohxjmb] {
    flex: 1;
    min-width: 0;
}

.mob-item-range[b-6xwcohxjmb] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.mob-item-meta[b-6xwcohxjmb] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
}

.mob-item-note[b-6xwcohxjmb] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mob-item-edit[b-6xwcohxjmb] {
    color: var(--color-primary);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.mob-day-list[b-6xwcohxjmb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mob-range[b-6xwcohxjmb] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.mob-range-field[b-6xwcohxjmb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

    .mob-range-field input[b-6xwcohxjmb] {
        padding: 0.4rem 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        font-size: 0.85rem;
        background: var(--color-white);
    }

.mob-range-warning[b-6xwcohxjmb] {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--color-warning);
}

.mob-day[b-6xwcohxjmb] {
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: var(--color-surface-alt);
    border: 1px solid #eef0f3;
}

.mob-day-label[b-6xwcohxjmb] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-strong);
    margin-bottom: 0.35rem;
    text-transform: capitalize;
}

.mob-day-entries[b-6xwcohxjmb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.mob-chip[b-6xwcohxjmb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ── Dark mode ────────────────────────────────── */

/* Table structure */
[data-theme="dark"] .cal-table th[b-6xwcohxjmb],
[data-theme="dark"] .cal-table td[b-6xwcohxjmb] {
    border-color: var(--color-border);
}

[data-theme="dark"] th.col-day[b-6xwcohxjmb] {
    background: var(--color-surface);
}

[data-theme="dark"] th.col-day.today[b-6xwcohxjmb] {
    background: rgba(46, 144, 250, 0.15);
}

[data-theme="dark"] th.col-day.today .day-num[b-6xwcohxjmb] {
    color: #60a5fa;
}

[data-theme="dark"] th.col-day.weekend[b-6xwcohxjmb] {
    background: var(--color-surface-alt);
}

[data-theme="dark"] td.col-day.today[b-6xwcohxjmb] {
    background: rgba(46, 144, 250, 0.07);
}

[data-theme="dark"] td.col-day.weekend[b-6xwcohxjmb] {
    background: rgba(255, 255, 255, 0.03);
}

/* Cell states */
[data-theme="dark"] .cell-empty[b-6xwcohxjmb] {
    background: var(--color-surface);
}

[data-theme="dark"] .cell-vacation[b-6xwcohxjmb] {
    background: rgba(22, 163, 74, 0.22);
    color: #86efac;
}

[data-theme="dark"] .cell-sick[b-6xwcohxjmb] {
    background: rgba(217, 119, 6, 0.22);
    color: #fcd34d;
}

[data-theme="dark"] .cell-unavailable[b-6xwcohxjmb] {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}

[data-theme="dark"] .cell-rather-not[b-6xwcohxjmb] {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

[data-theme="dark"] .cell-roster[b-6xwcohxjmb] {
    background: rgba(46, 144, 250, 0.2);
    color: #60a5fa;
}

[data-theme="dark"] .cell-pending[b-6xwcohxjmb] {
    background: rgba(46, 144, 250, 0.15);
    color: #93c5fd;
}

/* Today + entry combos */
[data-theme="dark"] td.col-day.today.cell-vacation[b-6xwcohxjmb]    { background: rgba(22, 163, 74, 0.25); }
[data-theme="dark"] td.col-day.today.cell-sick[b-6xwcohxjmb]        { background: rgba(217, 119, 6, 0.25); }
[data-theme="dark"] td.col-day.today.cell-unavailable[b-6xwcohxjmb] { background: rgba(239, 68, 68, 0.25); }
[data-theme="dark"] td.col-day.today.cell-rather-not[b-6xwcohxjmb]  { background: rgba(139, 92, 246, 0.25); }
[data-theme="dark"] td.col-day.today.cell-pending[b-6xwcohxjmb]     { background: rgba(46, 144, 250, 0.2); }
[data-theme="dark"] td.col-day.today.cell-roster[b-6xwcohxjmb]      { background: rgba(46, 144, 250, 0.2); }

[data-theme="dark"] td.col-day.weekend.cell-vacation[b-6xwcohxjmb]    { background: rgba(22, 163, 74, 0.22); }
[data-theme="dark"] td.col-day.weekend.cell-sick[b-6xwcohxjmb]        { background: rgba(217, 119, 6, 0.22); }
[data-theme="dark"] td.col-day.weekend.cell-unavailable[b-6xwcohxjmb] { background: rgba(239, 68, 68, 0.22); }
[data-theme="dark"] td.col-day.weekend.cell-rather-not[b-6xwcohxjmb]  { background: rgba(139, 92, 246, 0.2); }
[data-theme="dark"] td.col-day.weekend.cell-pending[b-6xwcohxjmb]     { background: rgba(46, 144, 250, 0.15); }
[data-theme="dark"] td.col-day.weekend.cell-roster[b-6xwcohxjmb]      { background: rgba(46, 144, 250, 0.2); }

/* Dept / my row header */
[data-theme="dark"] .dept-row td[b-6xwcohxjmb] {
    background: var(--color-surface-alt);
    color: var(--color-text-strong);
}

[data-theme="dark"] .my-row-header td[b-6xwcohxjmb] {
    background: rgba(46, 144, 250, 0.15) !important;
    color: #60a5fa;
}

[data-theme="dark"] .my-row .col-name[b-6xwcohxjmb] {
    color: #60a5fa;
}

[data-theme="dark"] .my-row td.cell-empty:hover[b-6xwcohxjmb] {
    background: rgba(46, 144, 250, 0.1);
}

/* Help banner */
[data-theme="dark"] .cal-help[b-6xwcohxjmb] {
    background: rgba(46, 144, 250, 0.1);
    border-color: rgba(46, 144, 250, 0.25);
    color: #93c5fd;
}

/* Request panel */
[data-theme="dark"] .request-panel[b-6xwcohxjmb] {
    background: var(--color-surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .panel-header h3[b-6xwcohxjmb] {
    color: var(--color-text-strong);
}

[data-theme="dark"] .form-select[b-6xwcohxjmb],
[data-theme="dark"] .form-input[b-6xwcohxjmb] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-strong);
    color-scheme: dark;
}

[data-theme="dark"] .form-fieldset[b-6xwcohxjmb] {
    border-color: var(--color-border);
}

[data-theme="dark"] .form-fieldset legend[b-6xwcohxjmb] {
    color: var(--color-text-muted);
}

[data-theme="dark"] .form-check[b-6xwcohxjmb] {
    color: var(--color-text-strong);
}

[data-theme="dark"] .btn-cancel[b-6xwcohxjmb] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-strong);
}

[data-theme="dark"] .btn-cancel:hover[b-6xwcohxjmb] {
    background: var(--color-surface-hover);
}

[data-theme="dark"] .btn-delete[b-6xwcohxjmb] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

[data-theme="dark"] .btn-delete:hover[b-6xwcohxjmb] {
    background: rgba(239, 68, 68, 0.25);
}

/* Conflict banner */
[data-theme="dark"] .conflict-banner[b-6xwcohxjmb] {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.3);
}

[data-theme="dark"] .conflict-body[b-6xwcohxjmb] {
    color: #fcd34d;
}

[data-theme="dark"] .conflict-entry-link[b-6xwcohxjmb] {
    color: #fbbf24;
}

[data-theme="dark"] .conflict-entry-link:hover[b-6xwcohxjmb] {
    color: #fcd34d;
}

/* Mobile list */
[data-theme="dark"] .mob-empty[b-6xwcohxjmb] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .mob-item[b-6xwcohxjmb] {
    border-color: var(--color-border);
    background: var(--color-surface);
}

[data-theme="dark"] .mob-item.cell-vacation[b-6xwcohxjmb]    { background: rgba(22, 163, 74, 0.15);   border-color: rgba(22, 163, 74, 0.3); }
[data-theme="dark"] .mob-item.cell-sick[b-6xwcohxjmb]        { background: rgba(217, 119, 6, 0.15);   border-color: rgba(217, 119, 6, 0.3); }
[data-theme="dark"] .mob-item.cell-unavailable[b-6xwcohxjmb] { background: rgba(239, 68, 68, 0.15);   border-color: rgba(239, 68, 68, 0.3); }
[data-theme="dark"] .mob-item.cell-rather-not[b-6xwcohxjmb]  { background: rgba(139, 92, 246, 0.15);  border-color: rgba(139, 92, 246, 0.3); }
[data-theme="dark"] .mob-item.cell-pending[b-6xwcohxjmb]     { background: rgba(46, 144, 250, 0.12);  border-color: rgba(46, 144, 250, 0.28); }

[data-theme="dark"] .mob-day[b-6xwcohxjmb] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .mob-range-field input[b-6xwcohxjmb] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-strong);
    color-scheme: dark;
}

[data-theme="dark"] .legend-swatch[b-6xwcohxjmb] {
    border-color: var(--color-border);
}
/* /Components/Pages/Rostering/V2/Dialogs/AbsenceReportDialog.razor.rz.scp.css */
/* ── Date info bar ──────────────────────────────── */
.absence-date-info[b-e3qzuhxz3o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    font-weight: 500;
    text-transform: capitalize;
}

.absence-date-icon[b-e3qzuhxz3o] {
    font-size: 1rem;
}

/* ── Type selector ─────────────────────────────── */
.absence-type-options[b-e3qzuhxz3o] {
    display: flex;
    gap: 0.5rem;
}

.absence-type-btn[b-e3qzuhxz3o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

    .absence-type-btn:hover[b-e3qzuhxz3o] {
        border-color: var(--color-text-subtle);
        background: var(--color-surface-alt);
    }

    .absence-type-btn.selected[b-e3qzuhxz3o] {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
    }

.absence-type-icon[b-e3qzuhxz3o] {
    font-size: 1.5rem;
    line-height: 1;
}

.absence-type-label[b-e3qzuhxz3o] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

/* ── Form elements ─────────────────────────────── */
.form-group[b-e3qzuhxz3o] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    margin-bottom: 0.5rem;
}

.form-label[b-e3qzuhxz3o] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.label-optional[b-e3qzuhxz3o] {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    margin-left: 0.25rem;
}

.form-input[b-e3qzuhxz3o] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    transition: border-color 0.15s;
    width: 100%;
}

    .form-input:focus[b-e3qzuhxz3o] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
    }

.form-textarea[b-e3qzuhxz3o] {
    resize: vertical;
    min-height: 2.5rem;
    font-family: inherit;
}
/* /Components/Pages/Rostering/V2/Dialogs/BulkDeleteDialog.razor.rz.scp.css */
.bulk-delete-columns[b-epeah6z7wi] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.bulk-delete-section[b-epeah6z7wi] {
    flex: 1;
    min-width: 0;
}

.bulk-delete-section .form-label[b-epeah6z7wi] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.checkbox-grid[b-epeah6z7wi] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.checkbox-item[b-epeah6z7wi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.92rem;
    white-space: nowrap;
}

.checkbox-item input[type="checkbox"][b-epeah6z7wi] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
}

.select-actions[b-epeah6z7wi] {
    display: flex;
    gap: 1rem;
    margin-top: 0.35rem;
}

.btn-link[b-epeah6z7wi] {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0;
    text-decoration: underline;
}

.btn-link:hover[b-epeah6z7wi] {
    color: var(--color-primary-hover);
}

.bulk-delete-preview[b-epeah6z7wi] {
    background: var(--color-danger-soft);
    border: 1px solid var(--color-danger-border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--color-danger);
}

.preview-count[b-epeah6z7wi] {
    font-weight: 700;
    font-size: 1.1rem;
}

.bulk-delete-hint[b-epeah6z7wi] {
    background: var(--color-surface-alt);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

[b-epeah6z7wi] .btn-delete-confirm {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-white) !important;
}

[b-epeah6z7wi] .btn-delete-confirm:hover {
    background-color: #912018 !important;
    border-color: #912018 !important;
}

[b-epeah6z7wi] .btn-delete-disabled {
    background-color: var(--color-border-soft) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-subtle) !important;
    cursor: not-allowed;
}
/* /Components/Pages/Rostering/V2/Dialogs/HourLogDialog.razor.rz.scp.css */
/* ── Status bar ────────────────────────────────── */

.employee-context[b-18b386nrul] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--color-surface-alt);
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.employee-name[b-18b386nrul] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}

.employee-dept[b-18b386nrul] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    padding: 0.1rem 0.45rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-left: auto;
}

.status-bar[b-18b386nrul] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.status-bar.approved[b-18b386nrul] {
    background: var(--color-success-soft);
    color: var(--color-success);
    border: 1px solid var(--color-success-tint);
}

.status-bar.pending[b-18b386nrul] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-tint);
}

/* ── Planned info ──────────────────────────────── */
.log-planned-info[b-18b386nrul] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
}

.log-planned-info.standalone[b-18b386nrul] {
    border-left: 3px dashed var(--color-text-muted);
}

.log-planned-label[b-18b386nrul] {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.log-planned-time[b-18b386nrul] {
    font-weight: 600;
    color: var(--color-text-strong);
}

.log-planned-hours[b-18b386nrul] {
    color: var(--color-text-subtle);
    font-size: 0.78rem;
    margin-left: auto;
}

/* ── Form elements ─────────────────────────────── */
.form-group[b-18b386nrul] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    margin-bottom: 0.5rem;
}

.form-label[b-18b386nrul] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.form-input[b-18b386nrul],
.form-select[b-18b386nrul] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    transition: border-color 0.15s;
}

    .form-input:focus[b-18b386nrul],
    .form-select:focus[b-18b386nrul] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
    }

/* ── Time picker (select with clock icon) ──── */
.time-picker[b-18b386nrul] {
    position: relative;
    display: flex;
    align-items: center;
}

.time-picker-icon[b-18b386nrul] {
    position: absolute;
    left: 0.5rem;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}

.time-picker-select[b-18b386nrul] {
    padding-left: 1.75rem !important;
    width: 100%;
    appearance: auto;
}

.form-row[b-18b386nrul] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.form-hint[b-18b386nrul] {
    font-weight: 400;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
}

/* ── Summary ───────────────────────────────────── */
.edit-summary[b-18b386nrul] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-alt);
    border-radius: 6px;
    font-size: 0.85rem;
}

.edit-total[b-18b386nrul] {
    color: var(--color-text-strong);
}

.edit-error[b-18b386nrul] {
    color: var(--color-danger-strong);
    font-size: 0.8rem;
    font-weight: 500;
}

.log-diff[b-18b386nrul] {
    font-size: 0.8rem;
    font-weight: 500;
}

    .log-diff.over[b-18b386nrul] {
        color: var(--color-warning);
    }

    .log-diff.under[b-18b386nrul] {
        color: var(--color-success);
    }

/* ── Auto-approve checkbox ── */
.auto-approve-row[b-18b386nrul] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--color-success-bg-4);
    border: 1px solid var(--color-success-tint-3);
    border-radius: 6px;
}

.auto-approve-label[b-18b386nrul] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-success-strong);
    cursor: pointer;
}

    .auto-approve-label input[type="checkbox"][b-18b386nrul] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-success);
    }

/* ── Legacy meal display ── */
.legacy-meal[b-18b386nrul] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.3rem 0.5rem;
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning-tint);
    border-radius: 6px;
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

.legacy-hint[b-18b386nrul] {
    font-size: 0.7rem;
    color: var(--color-warning-strong);
    font-style: italic;
}
/* /Components/Pages/Rostering/V2/Dialogs/LeaveMutationDialog.razor.rz.scp.css */
/* ── Leave Mutation Dialog ────────────────────── */

.employee-context[b-ep1dlcmhrk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.75rem;
    background: var(--color-surface-alt);
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.employee-name[b-ep1dlcmhrk] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}

.employee-dept[b-ep1dlcmhrk] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    padding: 0.1rem 0.45rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-left: auto;
}

.form-group[b-ep1dlcmhrk] {
    margin-bottom: 0.75rem;
}

.form-label[b-ep1dlcmhrk] {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.optional[b-ep1dlcmhrk] {
    font-weight: 400;
    text-transform: none;
    color: var(--color-text-subtle);
}

.form-select[b-ep1dlcmhrk],
.form-input[b-ep1dlcmhrk] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    outline: none;
    box-sizing: border-box;
}

    .form-select:focus[b-ep1dlcmhrk],
    .form-input:focus[b-ep1dlcmhrk] {
        border-color: var(--color-primary-bright);
    }

.locked-value[b-ep1dlcmhrk] {
    padding: 0.4rem 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-strong);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-weight: 500;
}

/* ── Hours input ─────────────────────────────── */

.hours-input-row[b-ep1dlcmhrk] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-sign[b-ep1dlcmhrk] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

    .btn-sign.active[b-ep1dlcmhrk] {
        background: var(--color-primary-bright);
        border-color: var(--color-primary-bright);
        color: var(--color-white);
    }

    .btn-sign-min.active[b-ep1dlcmhrk] {
        background: #e74c3c;
        border-color: #e74c3c;
        color: var(--color-white);
    }

    .btn-sign-plus.active[b-ep1dlcmhrk] {
        background: #27ae60;
        border-color: #27ae60;
        color: var(--color-white);
    }

    .btn-sign:hover:not(.active)[b-ep1dlcmhrk] {
        background: var(--color-surface-alt);
    }

.hours-input[b-ep1dlcmhrk] {
    width: 80px !important;
    text-align: center;
    flex: 0 0 auto;
}

.hours-suffix[b-ep1dlcmhrk] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ── Effect info ─────────────────────────────── */

.effect-info[b-ep1dlcmhrk] {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.effect-badge[b-ep1dlcmhrk] {
    display: inline-block;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.effect-full[b-ep1dlcmhrk] {
    background: var(--color-success-bg-4);
    color: var(--color-success-strong);
    border: 1px solid var(--color-success-tint-3);
}

.effect-gap[b-ep1dlcmhrk] {
    background: var(--color-primary-bg-4);
    color: var(--color-primary-strong);
    border: 1px solid var(--color-primary-bg-7);
}

.effect-none[b-ep1dlcmhrk] {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-light);
}

/* ── Multi-day toggle ────────────────────────── */

.toggle-multiday[b-ep1dlcmhrk] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-strong);
    cursor: pointer;
    user-select: none;
}

    .toggle-multiday input[b-ep1dlcmhrk] {
        accent-color: var(--color-primary-bright);
    }

.multiday-hint[b-ep1dlcmhrk] {
    padding: 0.6rem 0.75rem;
    background: var(--color-primary-bg-4);
    border: 1px solid var(--color-primary-bg-7);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--color-primary-strong);
    line-height: 1.4;
}


/* /Components/Pages/Rostering/V2/Dialogs/MarketplaceOfferDialog.razor.rz.scp.css */
.offer-dialog[b-jljhys5ep1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.offer-hint[b-jljhys5ep1] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0;
}

.offer-field[b-jljhys5ep1] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.offer-label[b-jljhys5ep1] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.offer-textarea[b-jljhys5ep1] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    background: var(--color-white);
    color: var(--color-text-strong);
}

.offer-textarea:focus[b-jljhys5ep1] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.15);
}

/* ── Dark mode ───────────────────────────────────── */
[data-theme="dark"] .offer-textarea[b-jljhys5ep1] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-strong);
}

[data-theme="dark"] .offer-textarea:focus[b-jljhys5ep1] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}
/* /Components/Pages/Rostering/V2/Dialogs/MessageEditDialog.razor.rz.scp.css */
/* ── Form elements ─────────────────────────────── */
.form-group[b-8b19ydrice] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    margin-bottom: 0.5rem;
}

.form-label[b-8b19ydrice] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.form-input[b-8b19ydrice],
.form-select[b-8b19ydrice] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    transition: border-color 0.15s;
}

    .form-input:focus[b-8b19ydrice],
    .form-select:focus[b-8b19ydrice] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
    }
/* /Components/Pages/Rostering/V2/Dialogs/NotifyRosterDialog.razor.rz.scp.css */
.notify-section[b-o1rnwpvte0] {
    margin-bottom: 1rem;
}

.notify-section .form-label[b-o1rnwpvte0] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

/* ── Department card list ─────────────────────── */
.dept-list[b-o1rnwpvte0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dept-option[b-o1rnwpvte0] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .dept-option:hover[b-o1rnwpvte0] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.07);
    }

    .dept-option.selected[b-o1rnwpvte0] {
        border-color: var(--color-primary);
        background: var(--color-primary-bg-4);
    }

    .dept-option input[type="checkbox"][b-o1rnwpvte0] {
        accent-color: var(--color-primary);
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        cursor: pointer;
    }

.dept-option-icon[b-o1rnwpvte0] {
    font-size: 1rem;
    flex-shrink: 0;
}

.dept-option-body[b-o1rnwpvte0] {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex-wrap: wrap;
}

.dept-option-name[b-o1rnwpvte0] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text-strong);
}

.employee-count[b-o1rnwpvte0] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.last-sent[b-o1rnwpvte0] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

    .last-sent.never[b-o1rnwpvte0] {
        color: var(--color-text-subtle);
        font-style: italic;
    }

.select-actions[b-o1rnwpvte0] {
    display: flex;
    gap: 1rem;
    margin-top: 0.4rem;
}

.btn-link[b-o1rnwpvte0] {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0;
    text-decoration: underline;
}

    .btn-link:hover[b-o1rnwpvte0] {
        color: var(--color-primary-hover);
    }

/* ── Message textarea ────────────────────────── */
.notify-message[b-o1rnwpvte0] {
    width: 100%;
    resize: vertical;
    font-size: 0.92rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: inherit;
    background: var(--color-white);
    color: var(--color-text-strong);
    box-sizing: border-box;
}

    .notify-message:focus[b-o1rnwpvte0] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
    }

.message-footer[b-o1rnwpvte0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.3rem;
    min-height: 1.2rem;
}

.message-hint[b-o1rnwpvte0] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.char-count[b-o1rnwpvte0] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    text-align: right;
    flex-shrink: 0;
}

    .char-count.near-limit[b-o1rnwpvte0] {
        color: var(--color-warning);
        font-weight: 600;
    }

/* ── Preview / hint banner ───────────────────── */
.notify-preview[b-o1rnwpvte0] {
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-tint-2);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--color-primary-strong);
}

.preview-count[b-o1rnwpvte0] {
    font-weight: 700;
    font-size: 1.1rem;
}

.notify-hint[b-o1rnwpvte0] {
    background: var(--color-surface-alt);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
/* /Components/Pages/Rostering/V2/Dialogs/RenameDialog.razor.rz.scp.css */
.form-group[b-eveoz901ip] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    margin-bottom: 0.5rem;
}

.form-label[b-eveoz901ip] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.form-input[b-eveoz901ip] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    transition: border-color 0.15s;
    width: 100%;
}

    .form-input:focus[b-eveoz901ip] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
    }
/* /Components/Pages/Rostering/V2/Dialogs/ShiftEditDialog.razor.rz.scp.css */
/* ── Template picker ────────────────────────────── */
.template-bar[b-od8un05slx] {
    position: relative;
    margin-bottom: 0.75rem;
}

.btn-load-template[b-od8un05slx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-alt);
    color: var(--color-text-strong);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .btn-load-template:hover[b-od8un05slx] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
        color: var(--color-primary-strong);
    }

/* ── Template list overlay ────────────────────── */
.template-list-overlay[b-od8un05slx] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}

.template-list[b-od8un05slx] {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    width: 360px;
    max-width: 90vw;
    max-height: 400px;
    overflow-y: auto;
}

.template-list-header[b-od8un05slx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border-faint);
    position: sticky;
    top: 0;
    background: var(--color-white);
    border-radius: 12px 12px 0 0;
}

.template-list-title[b-od8un05slx] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
}

.template-list-close[b-od8un05slx] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 0 0.15rem;
    line-height: 1;
}

    .template-list-close:hover[b-od8un05slx] {
        color: var(--color-text-strong);
    }

/* ── Template list items ──────────────────────── */
.template-list-item[b-od8un05slx] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border: none;
    border-bottom: 1px solid var(--color-surface-alt);
    background: var(--color-white);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

    .template-list-item:last-child[b-od8un05slx] {
        border-bottom: none;
        border-radius: 0 0 12px 12px;
    }

    .template-list-item:hover[b-od8un05slx] {
        background: var(--color-primary-soft);
    }

.tli-icon[b-od8un05slx] {
    font-size: 1.3rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    flex-shrink: 0;
}

.tli-details[b-od8un05slx] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
    min-width: 0;
}

.tli-name[b-od8un05slx] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.tli-meta[b-od8un05slx] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tli-sep[b-od8un05slx] {
    color: var(--color-border);
}

.tli-type[b-od8un05slx] {
    font-weight: 500;
    color: var(--color-text-subtle);
}

.tli-arrow[b-od8un05slx] {
    color: var(--color-border);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: color 0.12s, transform 0.12s;
}

.template-list-item:hover .tli-arrow[b-od8un05slx] {
    color: var(--color-primary);
    transform: translateX(2px);
}

/* ── Form elements ─────────────────────────────── */
.form-group[b-od8un05slx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    margin-bottom: 0.5rem;
}

.form-label[b-od8un05slx] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.label-optional[b-od8un05slx] {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    margin-left: 0.25rem;
}

.form-input[b-od8un05slx],
.form-select[b-od8un05slx] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    transition: border-color 0.15s;
}

    .form-input:focus[b-od8un05slx],
    .form-select:focus[b-od8un05slx] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
    }

.form-textarea[b-od8un05slx] {
    resize: vertical;
    min-height: 2.5rem;
    font-family: inherit;
    width: 100%;
}

/* ── Employee searchable picker ───────────────── */
.employee-select-button[b-od8un05slx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: var(--color-white);
}

.employee-select-value[b-od8un05slx] {
    color: var(--color-text-strong);
}

.employee-select-placeholder[b-od8un05slx] {
    color: var(--color-text-subtle);
}

.employee-select-caret[b-od8un05slx] {
    color: var(--color-text-subtle);
    margin-left: 0.5rem;
}

.employee-picker[b-od8un05slx] {
    width: 380px;
    max-height: 460px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* override .template-list scroll — the inner list scrolls instead */
    .employee-picker.template-list[b-od8un05slx] {
        overflow-y: hidden;
    }

.employee-picker-search[b-od8un05slx] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border-faint);
    background: var(--color-white);
    flex-shrink: 0;
}

    .employee-picker-search .form-input[b-od8un05slx] {
        width: 100%;
    }

.employee-picker-list[b-od8un05slx] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.employee-option[b-od8un05slx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

    .employee-option.is-busy[b-od8un05slx] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.employee-option-name[b-od8un05slx] {
    flex: 1;
    color: var(--color-text-strong);
}

.employee-option-badge[b-od8un05slx] {
    font-size: 0.75rem;
    color: var(--color-warning);
}

.employee-picker-empty[b-od8un05slx] {
    padding: 1rem;
    text-align: center;
    color: var(--color-text-subtle);
    font-size: 0.85rem;
}

/* ── Time picker (select with clock icon) ──── */
.time-picker[b-od8un05slx] {
    position: relative;
    display: flex;
    align-items: center;
}

.time-picker-icon[b-od8un05slx] {
    position: absolute;
    left: 0.5rem;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}

.time-picker-select[b-od8un05slx] {
    padding-left: 1.75rem !important;
    width: 100%;
    appearance: auto;
}

.form-row[b-od8un05slx] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.day-options-row[b-od8un05slx] {
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

    .day-options-row .form-check[b-od8un05slx] {
        padding-bottom: 0;
    }

.form-check[b-od8un05slx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    padding-bottom: 0.45rem;
}

.form-fieldset[b-od8un05slx] {
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

    .form-fieldset legend[b-od8un05slx] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-muted);
        padding: 0 0.35rem;
    }

/* ── Link button ──────────────────────────────── */
.btn-link[b-od8un05slx] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color 0.15s;
}

    .btn-link:hover[b-od8un05slx] {
        color: var(--color-primary-strong);
        text-decoration: none !important;
    }

/* ── Summary ───────────────────────────────────── */
.edit-summary[b-od8un05slx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-alt);
    border-radius: 6px;
    font-size: 0.85rem;
}

.edit-total[b-od8un05slx] {
    color: var(--color-text-strong);
}

.edit-error[b-od8un05slx] {
    color: var(--color-danger-strong);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── Conflict banner ───────────────────────────── */
.conflict-banner[b-od8un05slx] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--color-danger-soft);
    border: 1px solid var(--color-danger-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
    color: var(--color-danger);
    line-height: 1.4;
}

.conflict-icon[b-od8un05slx] {
    flex-shrink: 0;
    font-size: 1.1rem;
}

/* ── Marketplace banner ───────────────────────── */

.marketplace-banner[b-od8un05slx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning-tint);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-warning);
    line-height: 1.4;
}

    .marketplace-banner a[b-od8un05slx] {
        color: var(--color-warning);
        font-weight: 600;
        text-decoration: underline;
    }

.btn-mp-remove[b-od8un05slx] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-danger-border);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-danger);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

    .btn-mp-remove:hover[b-od8un05slx] {
        background: var(--color-danger-soft);
    }

/* ── Marketplace offer button ─────────────────── */

.btn-marketplace[b-od8un05slx] {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px dashed var(--color-warning-tint);
    border-radius: 8px;
    background: var(--color-warning-bg-2);
    color: var(--color-warning);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
}

    .btn-marketplace:hover[b-od8un05slx] {
        background: var(--color-warning-soft);
        border-color: var(--color-warning-accent);
    }

/* ── Approve link ──────────────────────────────── */

.btn-approve-link[b-od8un05slx] {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--color-success-tint-2);
    border-radius: 8px;
    background: var(--color-success-bg-3);
    color: var(--color-success-darkest);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

    .btn-approve-link:hover[b-od8un05slx] {
        background: var(--color-success-tint-3);
    }

/* ── Sick-leave inline section ────────────────── */
.sick-leave-section[b-od8un05slx] {
    border-color: var(--color-warning-border, #f59e42);
    background: var(--color-warning-bg-subtle, #fffbf0);
    margin-top: 0.5rem;
}

    .sick-leave-section legend[b-od8un05slx] {
        color: var(--color-warning-strong, #b45309);
        font-size: 0.8rem;
    }

.sick-leave-booked-note[b-od8un05slx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-strong);
    padding: 0.25rem 0;
}

    .sick-leave-booked-note .label-optional[b-od8un05slx] {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--color-text-subtle, #6b7280);
    }

[data-theme="dark"] .sick-leave-booked-note .label-optional[b-od8un05slx] {
    color: #fff;
}

/* LOA booking status banner for non-sick absence types (Vacation, Unavailable, …) */
.loa-booking-status[b-od8un05slx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.loa-booked[b-od8un05slx] {
    background: var(--color-success-bg, #f0fdf4);
    color: var(--color-success-strong, #166534);
}

.loa-not-booked[b-od8un05slx] {
    background: var(--color-warning-bg-subtle, #fffbf0);
    color: var(--color-warning-strong, #b45309);
}

.loa-booking-status .label-optional[b-od8un05slx] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-subtle, #6b7280);
}

/* ── Dark-mode overrides for sick-leave / LOA sections ── */
[data-theme="dark"] .sick-leave-section[b-od8un05slx] {
    border-color: var(--color-warning-tint);
    background: var(--color-warning-bg-1);
}

    [data-theme="dark"] .sick-leave-section legend[b-od8un05slx] {
        color: var(--color-warning);
    }

[data-theme="dark"] .loa-booked[b-od8un05slx] {
    background: var(--color-success-bg-4);
    color: var(--color-success);
}

[data-theme="dark"] .loa-not-booked[b-od8un05slx] {
    background: var(--color-warning-bg-1);
    color: var(--color-warning);
}

.locked-value[b-od8un05slx] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-strong);
    padding: 0.35rem 0;
}

.hours-input-row[b-od8un05slx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-sign[b-od8un05slx] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-sign.active[b-od8un05slx] {
        background: var(--color-primary-bright);
        border-color: var(--color-primary-bright);
        color: var(--color-white);
    }

    .btn-sign:hover:not(.active)[b-od8un05slx] {
        background: var(--color-surface-alt);
    }

.hours-input[b-od8un05slx] {
    width: 80px !important;
    text-align: center;
    flex: 0 0 auto;
}

.hours-suffix[b-od8un05slx] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.toggle-multiday[b-od8un05slx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-strong);
    cursor: pointer;
    user-select: none;
}

    .toggle-multiday input[b-od8un05slx] {
        accent-color: var(--color-primary-bright);
    }
/* /Components/Pages/Rostering/V2/HourRegistrations/HourApproval.razor.rz.scp.css */
/* Page-specific styles for HourApproval.

   All approval header / day-group / table / filter / edit-panel chrome
   plus dark-mode overrides live in the shared stylesheet:
       wwwroot/css/approval.css

   Add only HourApproval-specific overrides below. */

/* ── Mobile Card View ──────────────────────────────────────────────────────── */

.entry-row[b-gdizbf09dd]{
    cursor:default !important;
}

.mobile-card-wrapper[b-gdizbf09dd] {
    padding: 0 !important;
    border: none !important;
}

.mobile-card[b-gdizbf09dd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem;
    margin: 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

    .mobile-card.row-approved[b-gdizbf09dd] {
        background: var(--color-success-bg-1);
        border-color: var(--color-success-tint);
        opacity: 0.85;
    }

    .mobile-card.row-returned[b-gdizbf09dd] {
        background: var(--color-warning-bg-1);
        border-color: var(--color-warning-tint);
    }

.mobile-card-header[b-gdizbf09dd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.mobile-card-left[b-gdizbf09dd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.mobile-emp-name[b-gdizbf09dd] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-hours[b-gdizbf09dd] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.mobile-card-body[b-gdizbf09dd] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mobile-info-row[b-gdizbf09dd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

    .mobile-info-row.mobile-note[b-gdizbf09dd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

.mobile-label[b-gdizbf09dd] {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.mobile-value[b-gdizbf09dd] {
    color: var(--color-text);
    text-align: right;
    flex: 1;
}

.mobile-note .mobile-value[b-gdizbf09dd] {
    text-align: left;
    font-size: 0.8rem;
}

.mobile-card-actions[b-gdizbf09dd] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border-light);
}

.btn-mobile-action[b-gdizbf09dd] {
    flex: 1;
    min-width: calc(50% - 0.25rem);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

    .btn-mobile-action:active[b-gdizbf09dd] {
        transform: scale(0.97);
    }

    .btn-mobile-action.approve[b-gdizbf09dd] {
        background: var(--color-success-bg-2);
        border-color: var(--color-success-tint);
        color: var(--color-success-dark);
    }

        .btn-mobile-action.approve:active[b-gdizbf09dd] {
            background: var(--color-success-bg-2);
            filter: brightness(0.92);
        }

    .btn-mobile-action.deny[b-gdizbf09dd],
    .btn-mobile-action.undo[b-gdizbf09dd] {
        background: var(--color-warning-bg-1);
        border-color: var(--color-warning-tint);
        color: var(--color-warning-dark);
    }

        .btn-mobile-action.deny:active[b-gdizbf09dd],
        .btn-mobile-action.undo:active[b-gdizbf09dd] {
            background: var(--color-warning-bg-1);
            filter: brightness(0.92);
        }

    .btn-mobile-action.edit[b-gdizbf09dd] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
        color: var(--color-primary-dark);
    }

        .btn-mobile-action.edit:active[b-gdizbf09dd] {
            background: var(--color-primary-soft);
            filter: brightness(0.92);
        }

    .btn-mobile-action.delete[b-gdizbf09dd] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-tint);
        color: var(--color-danger-dark);
    }

        .btn-mobile-action.delete:active[b-gdizbf09dd] {
            background: var(--color-danger-bg-2);
            filter: brightness(0.92);
        }

    .btn-mobile-action:disabled[b-gdizbf09dd] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

        .btn-mobile-action:disabled:active[b-gdizbf09dd] {
            transform: none;
        }

.col-actions[b-gdizbf09dd] {
    text-align: right;
}

/* Hide table headers on mobile when using cards */
@media (max-width: 768px) {
    .approval-table thead[b-gdizbf09dd] {
        display: none;
    }

    .approval-table tbody[b-gdizbf09dd] {
        display: block;
    }

        .approval-table tbody tr[b-gdizbf09dd] {
            display: block;
        }

    .day-header[b-gdizbf09dd] {
        border-radius: 8px 8px 8px 8px;
        border-bottom: 1px solid var(--color-border-light);
    }

    [data-theme="dark"] .day-group[b-gdizbf09dd] {
        background: none;
    }
}
/* /Components/Pages/Rostering/V2/HourRegistrations/HourApprovedWeekly.razor.rz.scp.css */
/* Page-specific styles for HourApprovedWeekly.

   All approval header / day-group / table / filter / edit-panel chrome
   plus dark-mode overrides live in the shared stylesheet:
       wwwroot/css/approval.css

   Add only HourApprovedWeekly-specific overrides below. */
/* /Components/Pages/Rostering/V2/MessageBoard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════
   Message Board – Prikbord
   ══════════════════════════════════════════════════ */

.messageboard[b-0qctc76rv3] {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* ── Header ──────────────────────────────────────── */
.mb-header[b-0qctc76rv3] {
    margin-bottom: 1.5rem;
}

    .mb-header h2[b-0qctc76rv3] {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--color-text);
    }

.mb-subtitle[b-0qctc76rv3] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ── Compose ─────────────────────────────────────── */
.mb-compose[b-0qctc76rv3] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.mb-compose-avatar[b-0qctc76rv3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mb-compose-input[b-0qctc76rv3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mb-textarea[b-0qctc76rv3] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    min-height: 48px;
    color: var(--color-text-strong);
    transition: border-color 0.15s;
}

    .mb-textarea:focus[b-0qctc76rv3] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

    .mb-textarea[b-0qctc76rv3]::placeholder {
        color: var(--color-text-subtle);
    }

.mb-compose-actions[b-0qctc76rv3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mb-compose-options[b-0qctc76rv3] {
    display: flex;
    gap: 0.75rem;
}

.mb-option-toggle[b-0qctc76rv3] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

    .mb-option-toggle input[b-0qctc76rv3] {
        accent-color: var(--color-warning-accent);
    }

.mb-send-btn[b-0qctc76rv3] {
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .mb-send-btn:hover:not(:disabled)[b-0qctc76rv3] {
        background: var(--color-primary-hover);
    }

    .mb-send-btn:disabled[b-0qctc76rv3] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Sections ────────────────────────────────────── */
.mb-section[b-0qctc76rv3] {
    margin-bottom: 1rem;
}

.mb-section-label[b-0qctc76rv3] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

/* ── Message card ────────────────────────────────── */
.mb-message[b-0qctc76rv3] {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-faint);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    transition: box-shadow 0.15s;
}

    .mb-message:hover[b-0qctc76rv3] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .mb-message.pinned[b-0qctc76rv3] {
        border-color: var(--color-warning-tint);
        background: var(--color-warning-bg-2);
    }

.mb-msg-avatar[b-0qctc76rv3] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.mb-msg-body[b-0qctc76rv3] {
    flex: 1;
    min-width: 0;
}

.mb-msg-header[b-0qctc76rv3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.mb-msg-author[b-0qctc76rv3] {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--color-text-strong);
}

.mb-msg-role[b-0qctc76rv3] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.mb-msg-time[b-0qctc76rv3] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    margin-left: auto;
}

.mb-msg-locked[b-0qctc76rv3] {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--color-surface-hover);
    color: var(--color-text-subtle);
}

.mb-msg-text[b-0qctc76rv3] {
    font-size: 0.85rem;
    color: var(--color-text-strong);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Actions ─────────────────────────────────────── */
.mb-msg-actions[b-0qctc76rv3] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.mb-action-btn[b-0qctc76rv3] {
    padding: 0.2rem 0.5rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .mb-action-btn:hover[b-0qctc76rv3] {
        background: var(--color-surface-hover);
        color: var(--color-text-strong);
    }

.mb-action-btn.pinned-indicator[b-0qctc76rv3] {
    color: var(--color-warning);
}

.mb-action-btn.mb-action-delete[b-0qctc76rv3] {
    color: var(--color-danger);
}

    .mb-action-btn.mb-action-delete:hover[b-0qctc76rv3] {
        background: var(--color-danger-soft);
        color: var(--color-danger);
    }

/* ── Reply compose ───────────────────────────────── */
.mb-reply-compose[b-0qctc76rv3] {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mb-reply-textarea[b-0qctc76rv3] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    resize: vertical;
    min-height: 36px;
    color: var(--color-text-strong);
    transition: border-color 0.15s;
}

    .mb-reply-textarea:focus[b-0qctc76rv3] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

.mb-reply-compose-actions[b-0qctc76rv3] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.mb-reply-send[b-0qctc76rv3] {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}

/* ── Empty state ─────────────────────────────────── */
.mb-empty[b-0qctc76rv3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-subtle);
}

.mb-empty-icon[b-0qctc76rv3] {
    font-size: 2rem;
}

.mb-empty-text[b-0qctc76rv3] {
    font-size: 0.88rem;
}

/* ── Replies ─────────────────────────────────────── */
.mb-replies[b-0qctc76rv3] {
    margin-top: 0.6rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mb-reply[b-0qctc76rv3] {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

.mb-reply-avatar[b-0qctc76rv3] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.mb-reply-body[b-0qctc76rv3] {
    flex: 1;
    min-width: 0;
}

.mb-reply-author[b-0qctc76rv3] {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--color-text-strong);
}

.mb-reply-time[b-0qctc76rv3] {
    font-size: 0.68rem;
    color: var(--color-text-subtle);
    margin-left: 0.3rem;
}

.mb-reply-text[b-0qctc76rv3] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin-top: 0.1rem;
}

.mb-reply-delete[b-0qctc76rv3] {
    border: none;
    background: transparent;
    color: var(--color-border);
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0;
    margin-left: 0.3rem;
    transition: color 0.15s;
    visibility: hidden;
}

.mb-reply:hover .mb-reply-delete[b-0qctc76rv3] {
    visibility: visible;
}

    .mb-reply-delete:hover[b-0qctc76rv3] {
        color: var(--color-danger);
    }
/* /Components/Pages/Rostering/V2/MoreCompactRoster.razor.rz.scp.css */
/* ── Compact Roster – Print-optimized ─────────── */

.compact-roster[b-08vznvfczw] {
    /*padding: 1.5rem;*/
    max-width: 500px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.emp-row[b-08vznvfczw]{
    background-color:#fff;
}

.col-name[b-08vznvfczw] {
    background-color: #fff;
}

/* ── Screen header ────────────────────────────── */

@media (max-width: 768px) {
    .compact-roster[b-08vznvfczw] {
        padding: 0.5rem 0rem;
        width: 100%;
        box-sizing: border-box;
    }

    .roster-header[b-08vznvfczw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ── Print title (visible only when printing) ── */

.print-title[b-08vznvfczw] {
    display: none;
}

/* ── Table ────────────────────────────────────── */

.compact-table[b-08vznvfczw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    table-layout: fixed;
}

    .compact-table th[b-08vznvfczw],
    .compact-table td[b-08vznvfczw] {
        border: 1px solid var(--color-border-light);
        padding: 0;
        text-align: center;
        vertical-align: middle;
    }

/* ── Name column ──────────────────────────────── */

.col-name[b-08vznvfczw] {
    width: 100px;
    text-align: left !important;
    padding: 0.2rem 0.35rem !important;
    font-size: 0.68rem;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Day columns ──────────────────────────────── */

th.col-day[b-08vznvfczw] {
    padding: 0.25rem 0 !important;
    background: #fff;
    font-weight: 600;
    color: var(--color-text-muted);
}

    th.col-day .day-abbr[b-08vznvfczw] {
        display: block;
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-subtle);
    }

    th.col-day .day-num[b-08vznvfczw] {
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--color-text-strong);
    }

    th.col-day.today[b-08vznvfczw] {
        background: var(--color-primary-soft);
    }

        th.col-day.today .day-num[b-08vznvfczw] {
            color: var(--color-primary-strong);
        }

td.col-day[b-08vznvfczw] {
    width: auto;
    height: 24px;
    min-width: 28px;
    position: relative;
}

    td.col-day.today[b-08vznvfczw] {
        background: rgba(239, 248, 255, 0.3);
    }

/* ── Total column ─────────────────────────────── */

.col-total[b-08vznvfczw] {
    width: 36px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: #fff;
    padding: 0.2rem 0.15rem !important;
}

/* ── Department row ───────────────────────────── */

.dept-header-row td[b-08vznvfczw] {
    background: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-strong);
    text-align: left !important;
    padding: 0.45rem 0.75rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-top: 2px solid var(--color-border);
    border-bottom: 1px solid var(--color-border-light);
}

.dept-header-row:first-child td[b-08vznvfczw] {
    border-top: none;
}

.dept-not-published[b-08vznvfczw] {
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    background: #fff7ed;
    color: var(--color-warning);
    border: 1px solid #fde2b3;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Body layout (table + sidebar) ───────────── */

.roster-body-layout[b-08vznvfczw] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.roster-body-main[b-08vznvfczw] {
    flex: 1;
    min-width: 0;
}

.roster-body-sidebar[b-08vznvfczw] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-msgs-title[b-08vznvfczw] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 0 0.1rem 0.4rem;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 0.5rem;
}

/* On small screens stack messages below the table */
@media (max-width: 900px) {
    .roster-body-layout[b-08vznvfczw] {
        flex-direction: column;
    }

    .roster-body-sidebar[b-08vznvfczw] {
        width: 100%;
    }
}

/* Messages ────────────────────────────────── */

.compact-all-msgs[b-08vznvfczw] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0;
}

.compact-msg-card[b-08vznvfczw] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    font-size: 0.78rem;
    line-height: 1.45;
    background: #fff;
    border-color: var(--color-border-light);
}

.msg-company[b-08vznvfczw] {
    border-left-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.msg-dept[b-08vznvfczw] {
    border-left-color: var(--color-warning-accent);
    background: var(--color-warning-soft);
}

.msg-icon[b-08vznvfczw] {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1.4;
}

.msg-card-body[b-08vznvfczw] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.msg-card-meta[b-08vznvfczw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.msg-day-pill[b-08vznvfczw] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-text-strong);
    background: rgba(0,0,0,0.06);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}

.msg-dept-badge[b-08vznvfczw] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-warning);
    background: rgba(0,0,0,0.06);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.msg-card-text[b-08vznvfczw] {
    font-size: 0.78rem;
    color: var(--color-text);
}

/* dark mode */
[data-theme="dark"] .msg-company[b-08vznvfczw] {
    background: rgba(46, 144, 250, 0.1);
    border-left-color: var(--color-primary);
}

[data-theme="dark"] .msg-dept[b-08vznvfczw] {
    background: rgba(245, 158, 11, 0.12);
    border-left-color: var(--color-warning-accent);
}

[data-theme="dark"] .msg-day-pill[b-08vznvfczw] {
    background: rgba(255,255,255,0.08);
    color: var(--color-text-strong);
}

[data-theme="dark"] .msg-dept-badge[b-08vznvfczw] {
    background: rgba(255,255,255,0.08);
}

[data-theme="dark"] .msg-card-text[b-08vznvfczw] {
    color: var(--color-text);
}

/* ── Employee rows ────────────────────────────── */

.emp-row .col-name[b-08vznvfczw] {
    font-weight: 500;
}

/* ── Cell states ──────────────────────────────── */

.cell-text[b-08vznvfczw] {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.02em;
}

.cell-empty[b-08vznvfczw] {
    background: var(--color-white);
}

.cell-default[b-08vznvfczw] {
    background: var(--color-primary-bg-6);
    color: #0c4a6e;
}

.cell-vacation[b-08vznvfczw] {
    background: var(--color-success-bg-1);
    color: var(--color-success-darker);
}

.cell-sick[b-08vznvfczw] {
    background: var(--color-warning-amber);
    color: var(--color-warning-strong);
}

.cell-unavailable[b-08vznvfczw] {
    background: var(--color-danger-bg-2);
    color: #991b1b;
}

.cell-request[b-08vznvfczw] {
    background: #f3e8ff;
    color: #6b21a8;
}

.cell-open[b-08vznvfczw] {
    background: #fef9c3;
    color: #854d0e;
}

.cell-other[b-08vznvfczw] {
    background: #ede9fe;
    color: #5b21b6;
}

.pending .cell-text[b-08vznvfczw] {
    opacity: 0.6;
    font-style: italic;
}

/* ── Dark mode cell overrides ─────────────────── */

[data-theme="dark"] .cell-empty[b-08vznvfczw] {
    background: transparent;
}

[data-theme="dark"] .cell-default[b-08vznvfczw] {
    background: rgba(14, 113, 195, 0.35);
    color: #fff;
}

[data-theme="dark"] .cell-vacation[b-08vznvfczw] {
    background: rgba(5, 150, 105, 0.35);
    color: #fff;
}

[data-theme="dark"] .cell-sick[b-08vznvfczw] {
    background: rgba(217, 119, 6, 0.4);
    color: #fff;
}

[data-theme="dark"] .cell-unavailable[b-08vznvfczw],
[data-theme="dark"] td.col-day.cell-unavailable[b-08vznvfczw] {
    background: transparent;
    color: #f87171;
}

[data-theme="dark"] .cell-request[b-08vznvfczw] {
    background: rgba(139, 92, 246, 0.35);
    color: #fff;
}

[data-theme="dark"] .cell-open[b-08vznvfczw] {
    background: rgba(161, 98, 7, 0.35);
    color: #fff;
}

[data-theme="dark"] .cell-other[b-08vznvfczw] {
    background: rgba(109, 40, 217, 0.35);
    color: #fff;
}

/* ── Totals row ───────────────────────────────── */

.totals-row td[b-08vznvfczw] {
    background: #fff;
    font-size: 0.65rem;
    border-top: 2px solid var(--color-border);
}

/* ── Legend ────────────────────────────────────── */

.compact-legend[b-08vznvfczw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.legend-item[b-08vznvfczw] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-swatch[b-08vznvfczw] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--color-border-light);
}

/* ── Print styles ─────────────────────────────── */

@media print {

    .print-title[b-08vznvfczw] {
        display: block;
        text-align: center;
        font-size: 10pt;
        font-weight: 700;
        margin-bottom: 6pt;
        color: #000;
    }

    .compact-roster[b-08vznvfczw] {
        padding: 0;
        max-width: none;
    }

    .compact-table[b-08vznvfczw] {
        font-size: 7pt;
    }

        .compact-table th[b-08vznvfczw],
        .compact-table td[b-08vznvfczw] {
            border-color: #999;
        }

    .col-name[b-08vznvfczw] {
        width: 70px;
        font-size: 6.5pt;
    }

    td.col-day[b-08vznvfczw] {
        height: 16px;
        min-width: 18px;
    }

    .cell-text[b-08vznvfczw] {
        font-size: 6pt;
        line-height: 16px;
    }

    th.col-day .day-abbr[b-08vznvfczw] {
        font-size: 5.5pt;
    }

    th.col-day .day-num[b-08vznvfczw] {
        font-size: 6.5pt;
    }

    .col-total[b-08vznvfczw] {
        width: 24px;
        font-size: 6pt;
    }

    .dept-header-row td[b-08vznvfczw] {
        font-size: 6.5pt;
        padding: 2pt 3pt !important;
    }

    /* Force background colors when printing */
    .cell-default[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cell-vacation[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cell-sick[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cell-unavailable[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cell-request[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cell-open[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cell-other[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .dept-header-row td[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    th.col-day[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .col-total[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .totals-row td[b-08vznvfczw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

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


/* -- Department filter bar -- */

.dept-filter-bar[b-08vznvfczw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0.75rem;
}

.dept-filter-label[b-08vznvfczw] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.15rem;
}

.dept-chip[b-08vznvfczw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}

    .dept-chip:hover[b-08vznvfczw] {
        background: var(--color-surface-hover, var(--color-border-light));
    }

    .dept-chip.active[b-08vznvfczw] {
        background: var(--dept-color, var(--color-primary));
        border-color: var(--dept-color, var(--color-primary));
        color: #fff;
    }

/* ── Swipe hint (touch devices only) ─────────── */

.swipe-hint[b-08vznvfczw] {
    display: none;
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    text-align: center;
    padding: 0.25rem 0;
}

@media (pointer: coarse) {
    .swipe-hint[b-08vznvfczw] {
        display: block;
    }
}

/* ── Swipe transition ────────────────────────── */

.compact-roster[b-08vznvfczw] {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

    .compact-roster.swiping-left[b-08vznvfczw] {
        opacity: 0.4;
        transform: translateX(-12px);
    }

    .compact-roster.swiping-right[b-08vznvfczw] {
        opacity: 0.4;
        transform: translateX(12px);
    }
/* /Components/Pages/Rostering/V2/Reporting/EmployeeWeekDetail.razor.rz.scp.css */
/* ══════════════════════════════════════════════════
   Employee Week Detail
   ══════════════════════════════════════════════════ */

.emp-week[b-l0s2nzmjw6] {
    padding: 1rem 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Page header ──────────────────────────────── */

.page-header[b-l0s2nzmjw6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

    .page-header h2[b-l0s2nzmjw6] {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.btn-back[b-l0s2nzmjw6] {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    font-size: 0.78rem;
    color: var(--color-text-strong);
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-back:hover[b-l0s2nzmjw6] {
        background: var(--color-surface-hover);
    }

.week-nav[b-l0s2nzmjw6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.week-badge[b-l0s2nzmjw6] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 0.2rem 0.6rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
}

/* ── Add buttons ──────────────────────────────── */

.btn-add[b-l0s2nzmjw6] {
    margin-left: auto;
    margin-bottom: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

    .btn-add:hover[b-l0s2nzmjw6] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background: var(--color-primary-bg-3);
    }

.add-adj-wrapper[b-l0s2nzmjw6] {
    position: relative;
    margin-left: auto;
}

.add-adj-dropdown[b-l0s2nzmjw6] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    z-index: 50;
    padding: 0.3rem 0;
}

    .add-adj-dropdown .dropdown-item[b-l0s2nzmjw6] {
        display: block;
        width: 100%;
        padding: 0.45rem 0.85rem;
        font-size: 0.78rem;
        color: var(--color-text-strong);
        cursor: pointer;
        border: none;
        background: none;
        text-align: left;
        transition: background 0.1s;
    }

        .add-adj-dropdown .dropdown-item:hover[b-l0s2nzmjw6] {
            background: var(--color-primary-bg-3);
        }

/* ── Summary cards ────────────────────────────── */

.summary-cards[b-l0s2nzmjw6] {
    display: flex;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.card[b-l0s2nzmjw6] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    min-width: 100px;
}

.card-label[b-l0s2nzmjw6] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.card-value[b-l0s2nzmjw6] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}

    .card-value.muted[b-l0s2nzmjw6] {
        color: var(--color-border);
    }

    .card-value.sick[b-l0s2nzmjw6] {
        color: var(--color-warning-bright);
    }

    .card-value.vacation[b-l0s2nzmjw6] {
        color: var(--color-success-strong);
    }

.plusmin.positive[b-l0s2nzmjw6] {
    color: var(--color-success-strong);
}

.plusmin.negative[b-l0s2nzmjw6] {
    color: var(--color-danger-bright);
}

/* ── Section headers ──────────────────────────── */

.section[b-l0s2nzmjw6] {
    margin-bottom: 1.75rem;
}

.section-header[b-l0s2nzmjw6] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

    .section-header h3[b-l0s2nzmjw6] {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--color-text);
    }

.section-count[b-l0s2nzmjw6] {
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    font-weight: 500;
}

/* ── Detail tables ────────────────────────────── */

.detail-table[b-l0s2nzmjw6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .detail-table th[b-l0s2nzmjw6],
    .detail-table td[b-l0s2nzmjw6] {
        border: 1px solid var(--color-border-light);
        padding: 0.45rem 0.65rem;
        text-align: left;
        vertical-align: middle;
    }

    .detail-table thead th[b-l0s2nzmjw6] {
        background: var(--color-surface-alt);
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .detail-table tfoot td[b-l0s2nzmjw6] {
        background: var(--color-surface-hover);
        border-top: 2px solid var(--color-border);
        font-size: 0.78rem;
    }

.col-r[b-l0s2nzmjw6] {
    text-align: right !important;
    width: 72px;
    white-space: nowrap;
}

.col-date[b-l0s2nzmjw6] {
    white-space: nowrap;
    width: 95px;
}

.date-day[b-l0s2nzmjw6] {
    display: inline-block;
    width: 28px;
    font-weight: 600;
    color: var(--color-text-strong);
}

.date-full[b-l0s2nzmjw6] {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.col-note[b-l0s2nzmjw6] {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-roster-link[b-l0s2nzmjw6] {
    white-space: nowrap;
    width: 1%;
}

.roster-link-badge[b-l0s2nzmjw6] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--color-bg-subtle, #f0f0f0);
    color: var(--color-text-link, #0066cc);
    border: 1px solid var(--color-border-muted, #ddd);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

    .roster-link-badge:hover[b-l0s2nzmjw6] {
        background: var(--color-accent-subtle, #e0efff);
        text-decoration: underline;
    }

/* ── Hour log rows ────────────────────────────── */

.log-row[b-l0s2nzmjw6] {
    cursor: pointer;
    transition: background 0.1s;
}

    .log-row:hover[b-l0s2nzmjw6] {
        background: var(--color-primary-bg-3);
    }

    .log-row.approved[b-l0s2nzmjw6] {
    }

        .log-row.approved:hover[b-l0s2nzmjw6] {
            background: var(--color-surface-hover);
        }

.not-registered[b-l0s2nzmjw6] {
    color: var(--color-border);
    font-style: italic;
    font-size: 0.75rem;
}

/* ── Status pills ─────────────────────────────── */

.status-pill[b-l0s2nzmjw6] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

    .status-pill.approved[b-l0s2nzmjw6] {
        background: transparent;
        color: var(--color-success-strong);
    }


    .status-pill.pending[b-l0s2nzmjw6] {
        background: transparent;
        color: var(--color-warning-strong);
    }

    .status-pill.missing[b-l0s2nzmjw6] {
        background: transparent;
        color: var(--color-text-subtle);
    }

/* ── Adjustment rows ──────────────────────────── */

.adj-row[b-l0s2nzmjw6] {
    cursor: pointer;
    transition: background 0.1s;
}

    .adj-row:hover td[b-l0s2nzmjw6] {
        background: var(--color-primary-bg-3);
    }

    .adj-row.approved[b-l0s2nzmjw6] {
    }

    .adj-row.collection-member td[b-l0s2nzmjw6] {
        border-top: 1px dashed var(--color-border-light);
    }

.adj-type[b-l0s2nzmjw6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.78rem;
}

    .adj-type.adj-sick[b-l0s2nzmjw6] {
        color: var(--color-warning-bright);
    }

    .adj-type.adj-vacation[b-l0s2nzmjw6] {
        color: var(--color-success-strong);
    }

    .adj-type.adj-correction[b-l0s2nzmjw6] {
        color: var(--color-purple);
    }

    .adj-type.adj-payout[b-l0s2nzmjw6] {
        color: var(--color-info);
    }

.positive[b-l0s2nzmjw6] {
    color: var(--color-success-strong);
    font-weight: 600;
}

.negative[b-l0s2nzmjw6] {
    color: var(--color-danger-bright);
    font-weight: 600;
}

.empty-row[b-l0s2nzmjw6] {
    text-align: center;
    color: var(--color-text-subtle);
    font-style: italic;
    padding: 1rem !important;
}

/* ── Status & actions ──────────────────────── */

.status-pill.declined[b-l0s2nzmjw6] {
    background: transparent;
    color: var(--color-danger);
}

.log-row.declined[b-l0s2nzmjw6] {
    background: var(--color-danger-bg-1);
}

.col-actions[b-l0s2nzmjw6] {
    white-space: nowrap;
    vertical-align: middle !important;
    width: 90px;
}

.col-actions .btn-icon + .btn-icon[b-l0s2nzmjw6] {
    margin-left: 0.25rem;
}

.btn-icon[b-l0s2nzmjw6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-icon:hover[b-l0s2nzmjw6] {
        background: var(--color-surface-hover);
    }

    .btn-icon.btn-icon-danger:hover[b-l0s2nzmjw6] {
        background: var(--color-danger-bg-1);
    }

    .btn-icon.btn-icon-approve:hover[b-l0s2nzmjw6] {
        background: var(--color-success-bg-2);
    }

/* ── Leave compensation badges ────────────── */

.compensates-badge[b-l0s2nzmjw6] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-success-strong);
}

.no-compensates-badge[b-l0s2nzmjw6] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-subtle);
}

/* ── LOA sign pills (Opname / Opbouw) ──────── */

.loa-sign-pill[b-l0s2nzmjw6] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 9px;
    margin-right: 3px;
    vertical-align: middle;
    line-height: 1.4;
}

.pill-withdrawal[b-l0s2nzmjw6] {
    background: #fde8e8;
    color: #c0392b;
}

.pill-accrual[b-l0s2nzmjw6] {
    background: #e8f5e9;
    color: #27ae60;
}

.pill-neutral[b-l0s2nzmjw6] {
    background: #fef9c3;
    color: #854d0e;
}

.subtotal-row[b-l0s2nzmjw6] {
    background: var(--color-surface-alt);
}

.subtotal-label[b-l0s2nzmjw6] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: right !important;
}

/* ── Unbooked LOA warnings ────────────────── */

.unbooked-warnings[b-l0s2nzmjw6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.unbooked-card[b-l0s2nzmjw6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.85rem;
    background: var(--color-warning-bg-1);
    border: 1px solid var(--color-warning-tint);
    border-radius: 8px;
    font-size: 0.8rem;
}

.unbooked-type[b-l0s2nzmjw6] {
    font-weight: 700;
    padding-left: 0.5rem;
    white-space: nowrap;
    color: var(--color-text-strong);
}

.unbooked-date[b-l0s2nzmjw6] {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.unbooked-time[b-l0s2nzmjw6] {
    margin-left: 0.3rem;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.unbooked-msg[b-l0s2nzmjw6] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-warning-bright);
    white-space: nowrap;
}

.unbooked-actions[b-l0s2nzmjw6] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.unbooked-action-btn[b-l0s2nzmjw6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.unbooked-action-book[b-l0s2nzmjw6] {
    color: var(--color-primary);
    background: var(--color-primary-bg-5);
    border-color: var(--color-range-selected);
}

    .unbooked-action-book:hover[b-l0s2nzmjw6] {
        background: var(--color-drop-target);
        border-color: var(--color-primary-tint);
        text-decoration: none;
    }

.unbooked-action-edit[b-l0s2nzmjw6] {
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border-color: var(--color-border-light);
}

    .unbooked-action-edit:hover[b-l0s2nzmjw6] {
        color: var(--color-text-strong);
        background: var(--color-surface-hover);
        border-color: var(--color-border);
    }

.unbooked-action-delete[b-l0s2nzmjw6] {
    color: var(--color-danger);
    background: transparent;
    border-color: transparent;
}

    .unbooked-action-delete:hover[b-l0s2nzmjw6] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-tint, var(--color-danger));
    }

/* ── Week result card ─────────────────────────── */

.week-result-card[b-l0s2nzmjw6] {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 1.5rem;
    max-width: 380px;
    overflow: hidden;
}

.contract-bar[b-l0s2nzmjw6] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    padding: 0.5rem 1rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
}

.result-header[b-l0s2nzmjw6] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-strong);
    padding: 0.6rem 1rem;
    background: var(--color-surface-hover);
    border-bottom: 1px solid var(--color-border-light);
}

.result-lines[b-l0s2nzmjw6] {
    padding: 0.5rem 1rem;
}

.result-line[b-l0s2nzmjw6] {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.8rem;
    color: var(--color-text-strong);
}

    .result-line.muted[b-l0s2nzmjw6] {
        color: var(--color-text-subtle);
        font-style: italic;
    }

    .result-line.result-subtotal[b-l0s2nzmjw6] {
        border-top: 1px solid var(--color-border-light);
        margin-top: 0.25rem;
        padding-top: 0.45rem;
        font-weight: 600;
        color: var(--color-text);
    }

.result-total[b-l0s2nzmjw6] {
    display: flex;
    justify-content: space-between;
    padding: 0.55rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    border-top: 2px solid var(--color-border-light);
    background: var(--color-white);
}

    .result-total.positive[b-l0s2nzmjw6] {
        color: var(--color-success-strong);
    }

    .result-total.negative[b-l0s2nzmjw6] {
        color: var(--color-danger-bright);
    }

/* ── Dark-mode overrides ──────────────────────── */

[data-theme="dark"] .detail-table th[b-l0s2nzmjw6],
[data-theme="dark"] .detail-table td[b-l0s2nzmjw6] {
    color: var(--color-text-strong);
    background: var(--color-surface);
    border-color: var(--color-border-faint);
}

[data-theme="dark"] .detail-table thead th[b-l0s2nzmjw6] {
    background: var(--color-surface-alt);
    color: var(--color-text-subtle);
}

[data-theme="dark"] .detail-table tfoot td[b-l0s2nzmjw6] {
    background: var(--color-surface-alt);
}

[data-theme="dark"] .log-row:hover td[b-l0s2nzmjw6] {
    background: var(--color-surface-hover);
}

[data-theme="dark"] .adj-row:hover td[b-l0s2nzmjw6] {
    background: var(--color-surface-hover);
}

[data-theme="dark"] .log-row.declined td[b-l0s2nzmjw6] {
    background: rgba(239, 68, 68, 0.12);
}

[data-theme="dark"] .log-row.approved td[b-l0s2nzmjw6] {
    background: rgba(16, 185, 129, 0.08);
}

[data-theme="dark"] .result-total[b-l0s2nzmjw6] {
    background: var(--color-surface);
    color: var(--color-text-strong);
}

[data-theme="dark"] .unbooked-card[b-l0s2nzmjw6] {
    background: var(--color-surface);
    border-color: var(--color-warning-tint);
}

[data-theme="dark"] .unbooked-msg[b-l0s2nzmjw6] {
    color: var(--color-warning);
}

[data-theme="dark"] .unbooked-action-book[b-l0s2nzmjw6] {
    color: var(--color-primary-strong);
    border-color: var(--color-range-selected);
}

    [data-theme="dark"] .unbooked-action-book:hover[b-l0s2nzmjw6] {
        background: var(--color-drop-target);
        border-color: var(--color-primary-strong);
    }

[data-theme="dark"] .unbooked-action-edit[b-l0s2nzmjw6] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.approved-hours-note[b-l0s2nzmjw6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary-bg-3);
    color: var(--color-text-secondary);
    font-size: 0.78rem;
}

.approved-hours-warning[b-l0s2nzmjw6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.25rem 0 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-warning-tint);
    border-left: 3px solid var(--color-warning-bright);
    border-radius: 8px;
    background: var(--color-warning-bg-1);
    color: var(--color-warning-strong);
    font-size: 0.78rem;
}
/* /Components/Pages/Rostering/V2/Reporting/EmployeeYearDetail.razor.rz.scp.css */
/* ── Employee Year Detail ─────────────────────── */

.emp-year[b-wu23ucwr8e] {
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Header ───────────────────────────────────── */

.page-header[b-wu23ucwr8e] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

    .page-header h2[b-wu23ucwr8e] {
        margin: 0;
        font-size: 1.1rem;
        color: var(--color-text-strong);
    }

.btn-back[b-wu23ucwr8e] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    transition: background 0.15s;
}

    .btn-back:hover[b-wu23ucwr8e] {
        background: var(--color-surface-hover);
        color: var(--color-text-strong);
    }

.year-nav[b-wu23ucwr8e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.year-label[b-wu23ucwr8e] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-strong);
    padding: 0 0.4rem;
    min-width: 3rem;
    text-align: center;
}

/* ── Table ────────────────────────────────────── */

.table-scroll[b-wu23ucwr8e] {
    overflow-x: auto;
}

.overview-table[b-wu23ucwr8e] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .overview-table th[b-wu23ucwr8e],
    .overview-table td[b-wu23ucwr8e] {
        border: 1px solid var(--color-border-light);
        padding: 0.45rem 0.6rem;
        text-align: left;
        vertical-align: middle;
    }

/* ── Header row ───────────────────────────────── */

.overview-table thead th[b-wu23ucwr8e] {
    background: var(--color-surface-alt);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

/* ── Column types ─────────────────────────────── */

.col-week-num[b-wu23ucwr8e] {
    min-width: 50px;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

.col-dates[b-wu23ucwr8e] {
    min-width: 120px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.col-num[b-wu23ucwr8e] {
    text-align: right !important;
    white-space: nowrap;
    min-width: 60px;
    font-variant-numeric: tabular-nums;
}

.col-contract[b-wu23ucwr8e] {
    color: var(--color-text-muted);
}

.col-plusmin[b-wu23ucwr8e] {
    min-width: 55px;
}

.col-cumulative[b-wu23ucwr8e] {
    min-width: 60px;
}

/* ── Week rows ────────────────────────────────── */

.week-row[b-wu23ucwr8e] {
    transition: background 0.1s;
    cursor: pointer;
}

    .week-row:hover[b-wu23ucwr8e] {
        background: var(--color-primary-soft);
    }

    .week-row.current-week[b-wu23ucwr8e] {
        background: var(--color-primary-bg-4);
        border-left: 3px solid var(--color-primary-bright);
    }

        .week-row.current-week:hover[b-wu23ucwr8e] {
            background: var(--color-primary-bg-6);
        }

    .week-row.future-week[b-wu23ucwr8e] {
        opacity: 0.45;
    }

    .week-row.has-data[b-wu23ucwr8e] {
        opacity: 1;
    }

    .week-row.future-week.has-data[b-wu23ucwr8e] {
        opacity: 0.8;
    }

/* ── Values ───────────────────────────────────── */

.contract-hours[b-wu23ucwr8e] {
    color: var(--color-text-muted);
}

.no-contract[b-wu23ucwr8e] {
    color: var(--color-border);
}

.plusmin[b-wu23ucwr8e] {
    font-weight: 600;
    font-size: 0.78rem;
}

    .plusmin.positive[b-wu23ucwr8e] {
        color: var(--color-success-strong);
    }

    .plusmin.negative[b-wu23ucwr8e] {
        color: var(--color-danger-bright);
    }

.cumulative[b-wu23ucwr8e] {
    font-weight: 600;
    font-size: 0.72rem;
}

    .cumulative.positive[b-wu23ucwr8e] {
        color: var(--color-success-strong);
    }

    .cumulative.negative[b-wu23ucwr8e] {
        color: var(--color-danger-bright);
    }

.days-hint[b-wu23ucwr8e] {
    font-size: 0.68rem;
    color: var(--color-text-subtle);
    font-weight: 400;
}

/* ── Totals row ───────────────────────────────── */

.totals-row td[b-wu23ucwr8e] {
    background: var(--color-surface-alt);
    border-top: 2px solid var(--color-border);
    font-size: 0.78rem;
}
/* /Components/Pages/Rostering/V2/Reporting/TipOverview.razor.rz.scp.css */
/* ── Tip Overview ──────────────────────────────── */

.tip-overview[b-etdbquja3u] {
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Empty state ──────────────────────────────── */

.empty-state[b-etdbquja3u] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
}

.empty-icon[b-etdbquja3u] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state p[b-etdbquja3u] {
    margin: 0.25rem 0;
    font-size: 0.85rem;
}

.empty-hint[b-etdbquja3u] {
    font-size: 0.75rem !important;
    color: var(--color-text-subtle);
}

/* ── Header ───────────────────────────────────── */

.overview-header[b-etdbquja3u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.4rem;
}

    .overview-header h2[b-etdbquja3u] {
        margin: 0;
        font-size: 1.3rem;
        color: var(--color-text-strong);
    }

/* ── Export bar ─────────────────────────────────── */

.export-bar[b-etdbquja3u] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.export-icon[b-etdbquja3u] {
    font-size: 0.85rem;
}

/* ── Tips bar ─────────────────────────────────── */

.tips-bar[b-etdbquja3u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    background: var(--color-warning-bg-1);
    border: 1px solid var(--color-warning-tint);
    border-radius: 8px;
}

.tips-label[b-etdbquja3u] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-warning-strong);
    white-space: nowrap;
}

[data-theme="dark"] .tips-bar[b-etdbquja3u] {
    background: rgba(247, 144, 9, 0.15);
    border-color: rgba(247, 144, 9, 0.40);
}

[data-theme="dark"] .tips-label[b-etdbquja3u] {
    color: #fdb022;
}

.tips-input-group[b-etdbquja3u] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-white);
}

.tips-currency[b-etdbquja3u] {
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border-right: 1px solid var(--color-border);
}

.tips-input[b-etdbquja3u] {
    width: 90px;
    padding: 0.3rem 0.5rem;
    border: none;
    outline: none;
    font-size: 0.82rem;
    color: var(--color-text-strong);
}

    .tips-input:focus[b-etdbquja3u] {
        box-shadow: none;
    }

.tips-rate[b-etdbquja3u] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ── Summary cards ────────────────────────────── */

.summary-cards[b-etdbquja3u] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* ── Department filter ────────────────────────── */

.dept-filter[b-etdbquja3u] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.dept-filter-label[b-etdbquja3u] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}

.dept-chip[b-etdbquja3u] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-white);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

    .dept-chip:hover[b-etdbquja3u] {
        background: var(--color-surface-alt);
    }

    .dept-chip.active[b-etdbquja3u] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-tint);
        color: var(--color-primary-deep);
        font-weight: 600;
    }

/* ── Department separator ─────────────────────── */

.dept-row[b-etdbquja3u] {
    /* roster pages have flex, wont work here */
    display: table-row;
}

    .dept-row td[b-etdbquja3u] {
        background: var(--color-surface-hover);
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--color-text-strong);
        padding: 0.35rem 0.5rem !important;
        letter-spacing: 0.02em;
    }

.card-stat[b-etdbquja3u] {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 1rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    min-width: 100px;
}

.card-label[b-etdbquja3u] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.card-value[b-etdbquja3u] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-strong);
    margin-top: 0.15rem;
}
/* ── Table ────────────────────────────────────── */

.table-scroll[b-etdbquja3u] {
    overflow-x: auto;
}

.overview-table[b-etdbquja3u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .overview-table th[b-etdbquja3u],
    .overview-table td[b-etdbquja3u] {
        border: 1px solid var(--color-border-light);
        padding: 0.45rem 0.6rem;
        text-align: left;
        vertical-align: middle;
    }
    /* ── Header row ───────────────────────────────── */

    .overview-table thead th[b-etdbquja3u] {
        background: var(--color-surface-alt);
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
        position: sticky;
        top: 0;
    }
/* ── Column types ─────────────────────────────── */

.col-name[b-etdbquja3u] {
    min-width: 150px;
    font-weight: 500;
    color: var(--color-text-strong);
}

.col-num[b-etdbquja3u] {
    text-align: right !important;
    white-space: nowrap;
    min-width: 60px;
    font-variant-numeric: tabular-nums;
}

.col-tips[b-etdbquja3u] {
    min-width: 80px;
}

.col-net[b-etdbquja3u] {
    min-width: 80px;
}
/* ── Employee row ─────────────────────────────── */

.emp-row[b-etdbquja3u] {
    transition: background 0.1s;
}

    .emp-row:hover[b-etdbquja3u] {
        background: var(--color-primary-soft);
    }

    .emp-row.clickable[b-etdbquja3u] {
        cursor: pointer;
    }
/* ── Plus/minus colors ────────────────────────── */

.positive[b-etdbquja3u] {
    color: var(--color-success-strong);
    font-weight: 600;
}

.negative[b-etdbquja3u] {
    color: var(--color-danger-bright);
    font-weight: 600;
}
/* ── Totals row ───────────────────────────────── */

.totals-row td[b-etdbquja3u] {
    background: var(--color-surface-alt);
    border-top: 2px solid var(--color-border);
    font-size: 0.78rem;
}
/* ── Print styles ─────────────────────────────── */

@media print {
    body *[b-etdbquja3u] {
        visibility: hidden;
    }

    .tip-overview[b-etdbquja3u],
    .tip-overview *[b-etdbquja3u] {
        visibility: visible;
    }

    .tip-overview[b-etdbquja3u] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
    }

    .tips-bar[b-etdbquja3u],
    .summary-cards[b-etdbquja3u],
    .overview-nav .btn-nav[b-etdbquja3u],
    .overview-nav .btn-today[b-etdbquja3u] {
        display: none !important;
    }

    .overview-table[b-etdbquja3u] {
        font-size: 9pt;
    }

        .overview-table th[b-etdbquja3u],
        .overview-table td[b-etdbquja3u] {
            padding: 3px 6px;
            border: 1px solid #ccc;
        }

    .overview-header h2[b-etdbquja3u] {
        font-size: 14pt;
    }
}
/* /Components/Pages/Rostering/V2/Reporting/WeeklyHourOverview.razor.rz.scp.css */
/* ── Header ───────────────────────────────────── */

/*.overview-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.week-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-strong);
    padding: 0 0.5rem;
}*/

/* ── Badges & pills ───────────────────────────── */

/*.badge-contractor {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-primary-bg-4);
    color: #0369a1;
    border: 1px solid var(--color-primary-bg-7);
    vertical-align: middle;
}

.no-contract {
    color: var(--color-border);
}

.contract-hours {
    color: var(--color-text-muted);
}*/



.plusmin-cell[b-06o674bs6x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.plusmin-approval-warning[b-06o674bs6x] {
    font-size: 0.78rem;
    cursor: help;
    line-height: 1;
}

.plusmin-value[b-06o674bs6x] {
    margin-left: auto;
}

/* ── Filter bar ──────────────────────────────── */

/*.filter-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}

.filter-search {
    flex: 1;
    min-width: 200px;
}

.filter-input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.84rem;
    color: var(--color-text);
    background: var(--color-white);
    box-sizing: border-box;
}

    .filter-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

.filter-select {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    cursor: pointer;
}

    .filter-select:focus {
        outline: none;
        border-color: var(--color-primary);
    }

.btn-clear-filters {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-danger-tint);
    border-radius: 8px;
    background: var(--color-danger-bg-1);
    color: var(--color-danger);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-clear-filters:hover {
        background: var(--color-danger-bg-2);
    }*/

/* /Components/Pages/Rostering/V2/Reporting/YearlyHourOverview.razor.rz.scp.css */
/* ── Yearly Hour Overview ─────────────────────── */

.year-overview[b-lydqpkgodt] {
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Header ───────────────────────────────────── */

.overview-header[b-lydqpkgodt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.4rem;
}

    .overview-header h2[b-lydqpkgodt] {
        margin: 0;
        font-size: 1.3rem;
        color: var(--color-text-strong);
    }

.year-nav[b-lydqpkgodt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.year-label[b-lydqpkgodt] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-strong);
    padding: 0 0.4rem;
    min-width: 3rem;
    text-align: center;
}

.toggle-scope[b-lydqpkgodt] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

    .toggle-scope input[b-lydqpkgodt] {
        accent-color: var(--color-primary-bright);
    }

/* ── Export bar ──────────────────────────────── */

.export-bar[b-lydqpkgodt] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.export-icon[b-lydqpkgodt] {
    font-size: 0.85rem;
}

/* ── Filter bar ──────────────────────────────── */

.filter-bar[b-lydqpkgodt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.filter-search[b-lydqpkgodt] {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--color-text-strong);
    min-width: 180px;
    outline: none;
    transition: border-color 0.15s;
}

    .filter-search:focus[b-lydqpkgodt] {
        border-color: var(--color-primary-bright);
    }

    .filter-search[b-lydqpkgodt]::placeholder {
        color: var(--color-text-subtle);
    }

.filter-select[b-lydqpkgodt] {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--color-text-strong);
    background: var(--color-white);
    cursor: pointer;
    outline: none;
}

    .filter-select:focus[b-lydqpkgodt] {
        border-color: var(--color-primary-bright);
    }

.toggle-filter[b-lydqpkgodt] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

    .toggle-filter input[b-lydqpkgodt] {
        accent-color: var(--color-primary-bright);
    }

.btn-clear-filters[b-lydqpkgodt] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .btn-clear-filters:hover[b-lydqpkgodt] {
        background: var(--color-danger-bg-1);
        color: var(--color-danger-bright);
        border-color: #fca5a5;
    }

.scope-info[b-lydqpkgodt] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    margin-bottom: 0.5rem;
}

/* ── Table ────────────────────────────────────── */

.table-scroll[b-lydqpkgodt] {
    overflow-x: auto;
}

.overview-table[b-lydqpkgodt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .overview-table th[b-lydqpkgodt],
    .overview-table td[b-lydqpkgodt] {
        border: 1px solid var(--color-border-light);
        padding: 0.45rem 0.6rem;
        text-align: left;
        vertical-align: middle;
    }

    /* ── Header row ───────────────────────────────── */

    .overview-table thead th[b-lydqpkgodt] {
        background: var(--color-surface-alt);
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
        position: sticky;
        top: 0;
    }

/* ── Column types ─────────────────────────────── */

.col-name[b-lydqpkgodt] {
    min-width: 150px;
    font-weight: 500;
    color: var(--color-text-strong);
}

.col-num[b-lydqpkgodt] {
    text-align: right !important;
    white-space: nowrap;
    min-width: 60px;
    font-variant-numeric: tabular-nums;
}

.col-contract[b-lydqpkgodt] {
    color: var(--color-text-muted);
}

/* ── Department separator ─────────────────────── */

.dept-row[b-lydqpkgodt] {
    /* roster pages have flex, wont work here */
    display: table-row;
}

    .dept-row td[b-lydqpkgodt] {
        background: var(--color-surface-hover);
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--color-text-strong);
        padding: 0.35rem 0.5rem !important;
        letter-spacing: 0.02em;
    }

/* ── Employee row ─────────────────────────────── */

.emp-row[b-lydqpkgodt] {
    transition: background 0.1s;
    cursor: pointer;
}

    .emp-row:hover[b-lydqpkgodt] {
        background: var(--color-primary-soft);
    }

/* ── Badges ───────────────────────────────────── */

.badge-contractor[b-lydqpkgodt] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-primary-bg-4);
    color: #0369a1;
    border: 1px solid var(--color-primary-bg-7);
    vertical-align: middle;
}

.no-contract[b-lydqpkgodt] {
    color: var(--color-border);
}

.contract-hours[b-lydqpkgodt] {
    color: var(--color-text-muted);
}

/* ── Days hint ────────────────────────────────── */

.days-hint[b-lydqpkgodt] {
    font-size: 0.68rem;
    color: var(--color-text-subtle);
    font-weight: 400;
}

/* ── Plus/minus ───────────────────────────────── */

.col-plusmin[b-lydqpkgodt] {
    min-width: 55px;
}

.plusmin[b-lydqpkgodt] {
    font-weight: 600;
    font-size: 0.78rem;
}

    .plusmin.positive[b-lydqpkgodt] {
        color: var(--color-success-strong);
    }

    .plusmin.negative[b-lydqpkgodt] {
        color: var(--color-danger-bright);
    }

/* ── Totals row ───────────────────────────────── */

.totals-row td[b-lydqpkgodt] {
    background: var(--color-surface-alt);
    border-top: 2px solid var(--color-border);
    font-size: 0.78rem;
}

/* ── Empty state ──────────────────────────────── */

.empty-state[b-lydqpkgodt] {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* ━━ Print styles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media print {
    .year-nav[b-lydqpkgodt],
    .toggle-scope[b-lydqpkgodt],
    .export-bar[b-lydqpkgodt],
    .no-print[b-lydqpkgodt],
    .filter-bar[b-lydqpkgodt],
    .scope-info[b-lydqpkgodt] {
        display: none !important;
        visibility: hidden !important;
    }

    .overview-header h2[b-lydqpkgodt] {
        margin: 0 0 8pt 0 !important;
        font-size: 14pt !important;
    }

    .overview-table[b-lydqpkgodt],
    table[b-lydqpkgodt] {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 8pt !important;
    }

        .overview-table th[b-lydqpkgodt],
        .overview-table td[b-lydqpkgodt],
        table th[b-lydqpkgodt],
        table td[b-lydqpkgodt] {
            border: 1px solid #666 !important;
            padding: 4px 6px !important;
            text-align: left !important;
            color: #000 !important;
        }

        .overview-table th[b-lydqpkgodt],
        table th[b-lydqpkgodt] {
            background: #e8e8e8 !important;
            font-weight: bold !important;
        }

    tbody tr[b-lydqpkgodt] {
        page-break-inside: avoid;
    }
}
/* /Components/Pages/Rostering/V2/Rostering/CompactRoster.razor.rz.scp.css */
/* ── Compact Roster – Print-optimized ─────────── */

.compact-roster[b-d7x9t60oia] {
    padding: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Screen header ────────────────────────────── */

@media (max-width: 768px) {
    .compact-roster[b-d7x9t60oia] {
        padding: 0.5rem 0rem;
        width: 100%;
        box-sizing: border-box;
    }

    .roster-header[b-d7x9t60oia] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ── Print title (visible only when printing) ── */

.print-title[b-d7x9t60oia] {
    display: none;
}

/* ── Table ────────────────────────────────────── */

.compact-table[b-d7x9t60oia] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    table-layout: fixed;
}

    .compact-table th[b-d7x9t60oia],
    .compact-table td[b-d7x9t60oia] {
        border: 1px solid var(--color-border-light);
        padding: 0;
        text-align: center;
        vertical-align: middle;
    }

/* ── Name column ──────────────────────────────── */

.col-name[b-d7x9t60oia] {
    width: 100px;
    text-align: left !important;
    padding: 0.2rem 0.35rem !important;
    font-size: 0.68rem;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Day columns ──────────────────────────────── */

th.col-day[b-d7x9t60oia] {
    padding: 0.25rem 0 !important;
    background: var(--color-surface-alt);
    font-weight: 600;
    color: var(--color-text-muted);
}

    th.col-day .day-abbr[b-d7x9t60oia] {
        display: block;
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-subtle);
    }

    th.col-day .day-num[b-d7x9t60oia] {
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--color-text-strong);
    }

    th.col-day.today[b-d7x9t60oia] {
        background: var(--color-primary-soft);
    }

        th.col-day.today .day-num[b-d7x9t60oia] {
            color: var(--color-primary-strong);
        }

td.col-day[b-d7x9t60oia] {
    width: auto;
    height: 24px;
    min-width: 28px;
    position: relative;
}

    td.col-day.today[b-d7x9t60oia] {
        background: rgba(239, 248, 255, 0.3);
    }

/* ── Total column ─────────────────────────────── */

.col-total[b-d7x9t60oia] {
    width: 36px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    padding: 0.2rem 0.15rem !important;
}

/* ── Department row ───────────────────────────── */

.dept-header-row td[b-d7x9t60oia] {
    background: var(--color-surface-alt);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-strong);
    text-align: left !important;
    padding: 0.45rem 0.75rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-top: 2px solid var(--color-border);
    border-bottom: 1px solid var(--color-border-light);
}

.dept-header-row:first-child td[b-d7x9t60oia] {
    border-top: none;
}

.dept-not-published[b-d7x9t60oia] {
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    background: #fff7ed;
    color: var(--color-warning);
    border: 1px solid #fde2b3;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Body layout (table + sidebar) ───────────── */

.roster-body-layout[b-d7x9t60oia] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.roster-body-main[b-d7x9t60oia] {
    flex: 1;
    min-width: 0;
}

.roster-body-sidebar[b-d7x9t60oia] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-msgs-title[b-d7x9t60oia] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 0 0.1rem 0.4rem;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 0.5rem;
}

/* On small screens stack messages below the table */
@media (max-width: 900px) {
    .roster-body-layout[b-d7x9t60oia] {
        flex-direction: column;
    }

    .roster-body-sidebar[b-d7x9t60oia] {
        width: 100%;
    }
}

/* Messages ────────────────────────────────── */

.compact-all-msgs[b-d7x9t60oia] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0;
}

.compact-msg-card[b-d7x9t60oia] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    font-size: 0.78rem;
    line-height: 1.45;
    background: var(--color-surface-alt);
    border-color: var(--color-border-light);
}

.msg-company[b-d7x9t60oia] {
    border-left-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.msg-dept[b-d7x9t60oia] {
    border-left-color: var(--color-warning-accent);
    background: var(--color-warning-soft);
}

.msg-icon[b-d7x9t60oia] {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1.4;
}

.msg-card-body[b-d7x9t60oia] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.msg-card-meta[b-d7x9t60oia] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.msg-day-pill[b-d7x9t60oia] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-text-strong);
    background: rgba(0,0,0,0.06);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}

.msg-dept-badge[b-d7x9t60oia] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-warning);
    background: rgba(0,0,0,0.06);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.msg-card-text[b-d7x9t60oia] {
    font-size: 0.78rem;
    color: var(--color-text);
}

/* dark mode */
[data-theme="dark"] .msg-company[b-d7x9t60oia] {
    background: rgba(46, 144, 250, 0.1);
    border-left-color: var(--color-primary);
}

[data-theme="dark"] .msg-dept[b-d7x9t60oia] {
    background: rgba(245, 158, 11, 0.12);
    border-left-color: var(--color-warning-accent);
}

[data-theme="dark"] .msg-day-pill[b-d7x9t60oia] {
    background: rgba(255,255,255,0.08);
    color: var(--color-text-strong);
}

[data-theme="dark"] .msg-dept-badge[b-d7x9t60oia] {
    background: rgba(255,255,255,0.08);
}

[data-theme="dark"] .msg-card-text[b-d7x9t60oia] {
    color: var(--color-text);
}

/* ── Employee rows ────────────────────────────── */

.emp-row .col-name[b-d7x9t60oia] {
    font-weight: 500;
}

/* ── Cell states ──────────────────────────────── */

.cell-text[b-d7x9t60oia] {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.02em;
}

.cell-empty[b-d7x9t60oia] {
    background: var(--color-white);
}

.cell-default[b-d7x9t60oia] {
    background: var(--color-primary-bg-6);
    color: #0c4a6e;
}

.cell-vacation[b-d7x9t60oia] {
    background: var(--color-success-bg-1);
    color: var(--color-success-darker);
}

.cell-sick[b-d7x9t60oia] {
    background: var(--color-warning-amber);
    color: var(--color-warning-strong);
}

.cell-unavailable[b-d7x9t60oia] {
    background: var(--color-danger-bg-2);
    color: #991b1b;
}

.cell-request[b-d7x9t60oia] {
    background: #f3e8ff;
    color: #6b21a8;
}

.cell-open[b-d7x9t60oia] {
    background: #fef9c3;
    color: #854d0e;
}

.cell-other[b-d7x9t60oia] {
    background: #ede9fe;
    color: #5b21b6;
}

.pending .cell-text[b-d7x9t60oia] {
    opacity: 0.6;
    font-style: italic;
}

/* ── Dark mode cell overrides ─────────────────── */

[data-theme="dark"] .cell-empty[b-d7x9t60oia] {
    background: transparent;
}

[data-theme="dark"] .cell-default[b-d7x9t60oia] {
    background: rgba(14, 113, 195, 0.35);
    color: #fff;
}

[data-theme="dark"] .cell-vacation[b-d7x9t60oia] {
    background: rgba(5, 150, 105, 0.35);
    color: #fff;
}

[data-theme="dark"] .cell-sick[b-d7x9t60oia] {
    background: rgba(217, 119, 6, 0.4);
    color: #fff;
}

[data-theme="dark"] .cell-unavailable[b-d7x9t60oia],
[data-theme="dark"] td.col-day.cell-unavailable[b-d7x9t60oia] {
    background: transparent;
    color: #f87171;
}

[data-theme="dark"] .cell-request[b-d7x9t60oia] {
    background: rgba(139, 92, 246, 0.35);
    color: #fff;
}

[data-theme="dark"] .cell-open[b-d7x9t60oia] {
    background: rgba(161, 98, 7, 0.35);
    color: #fff;
}

[data-theme="dark"] .cell-other[b-d7x9t60oia] {
    background: rgba(109, 40, 217, 0.35);
    color: #fff;
}

/* ── Totals row ───────────────────────────────── */

.totals-row td[b-d7x9t60oia] {
    background: var(--color-surface-alt);
    font-size: 0.65rem;
    border-top: 2px solid var(--color-border);
}

/* ── Legend ────────────────────────────────────── */

.compact-legend[b-d7x9t60oia] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.legend-item[b-d7x9t60oia] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-swatch[b-d7x9t60oia] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--color-border-light);
}

/* ── Print styles ─────────────────────────────── */

@media print {
    
    .print-title[b-d7x9t60oia] {
        display: block;
        text-align: center;
        font-size: 10pt;
        font-weight: 700;
        margin-bottom: 6pt;
        color: #000;
    }

    .compact-roster[b-d7x9t60oia] {
        padding: 0;
        max-width: none;
    }

    .compact-table[b-d7x9t60oia] {
        font-size: 7pt;
    }

    .compact-table th[b-d7x9t60oia],
    .compact-table td[b-d7x9t60oia] {
        border-color: #999;
    }

    .col-name[b-d7x9t60oia] {
        width: 70px;
        font-size: 6.5pt;
    }

    td.col-day[b-d7x9t60oia] {
        height: 16px;
        min-width: 18px;
    }

    .cell-text[b-d7x9t60oia] {
        font-size: 6pt;
        line-height: 16px;
    }

    th.col-day .day-abbr[b-d7x9t60oia] {
        font-size: 5.5pt;
    }

    th.col-day .day-num[b-d7x9t60oia] {
        font-size: 6.5pt;
    }

    .col-total[b-d7x9t60oia] {
        width: 24px;
        font-size: 6pt;
    }

    .dept-header-row td[b-d7x9t60oia] {
        font-size: 6.5pt;
        padding: 2pt 3pt !important;
    }

    /* Force background colors when printing */
    .cell-default[b-d7x9t60oia]    { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cell-vacation[b-d7x9t60oia]   { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cell-sick[b-d7x9t60oia]       { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cell-unavailable[b-d7x9t60oia] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cell-request[b-d7x9t60oia]    { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cell-open[b-d7x9t60oia]       { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cell-other[b-d7x9t60oia]      { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .dept-header-row td[b-d7x9t60oia] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    th.col-day[b-d7x9t60oia]       { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .col-total[b-d7x9t60oia]       { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .totals-row td[b-d7x9t60oia]   { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

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


/* -- Department filter bar -- */

.dept-filter-bar[b-d7x9t60oia] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0.75rem; }

.dept-filter-label[b-d7x9t60oia] { font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.15rem; }

.dept-chip[b-d7x9t60oia] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text); font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; }

.dept-chip:hover[b-d7x9t60oia] { background: var(--color-surface-hover, var(--color-border-light)); }

.dept-chip.active[b-d7x9t60oia] { background: var(--dept-color, var(--color-primary)); border-color: var(--dept-color, var(--color-primary)); color: #fff; }

/* ── Swipe hint (touch devices only) ─────────── */

.swipe-hint[b-d7x9t60oia] {
    display: none;
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    text-align: center;
    padding: 0.25rem 0;
}

@media (pointer: coarse) {
    .swipe-hint[b-d7x9t60oia] {
        display: block;
    }
}

/* ── Swipe transition ────────────────────────── */

.compact-roster[b-d7x9t60oia] {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.compact-roster.swiping-left[b-d7x9t60oia] {
    opacity: 0.4;
    transform: translateX(-12px);
}

.compact-roster.swiping-right[b-d7x9t60oia] {
    opacity: 0.4;
    transform: translateX(12px);
}
/* /Components/Pages/Rostering/V2/Rostering/Components/RosterToolbar.razor.rz.scp.css */
.roster-toolbar[b-ipaa0p517d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-group[b-ipaa0p517d] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.toolbar-split[b-ipaa0p517d] {
    width: 1px;
    height: 1.4rem;
    background: var(--color-border-light);
    margin: 0 0.15rem;
}

.toolbar-btn[b-ipaa0p517d] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

    .toolbar-btn:hover[b-ipaa0p517d] {
        background: var(--color-surface-hover);
    }

    .toolbar-btn.publish[b-ipaa0p517d] {
        background: var(--color-success-bright);
        border-color: var(--color-success-bright);
        color: var(--color-white);
    }

        .toolbar-btn.publish:hover[b-ipaa0p517d] {
            background: var(--color-success-mid);
        }

.publish-pill[b-ipaa0p517d] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

    .publish-pill.draft[b-ipaa0p517d], .publish-pill.concept[b-ipaa0p517d] {
        background: rgba(255, 255, 255, 0.25);
        color: var(--color-white);
    }

    .publish-pill.partial[b-ipaa0p517d], .publish-pill.gedeeltelijk[b-ipaa0p517d] {
        background: var(--color-white);
        color: var(--color-warning-strong);
    }

    .publish-pill.published[b-ipaa0p517d], .publish-pill.gepubliceerd[b-ipaa0p517d] {
        background: var(--color-white);
        color: var(--color-success-deep);
    }

    .toolbar-btn.danger[b-ipaa0p517d] {
        color: var(--color-danger);
        border-color: var(--color-danger-border);
    }

        .toolbar-btn.danger:hover[b-ipaa0p517d] {
            background: var(--color-danger-soft);
        }

.toolbar-icon[b-ipaa0p517d] {
    font-size: 0.9rem;
    line-height: 1;
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
}

.toolbar-chevron[b-ipaa0p517d] {
    font-size: 0.6rem;
    margin-left: 0.1rem;
    opacity: 0.6;
    color: inherit;
}

.toolbar-dropdown-wrapper[b-ipaa0p517d] {
    position: relative;
}

.toolbar-dropdown[b-ipaa0p517d] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    padding: 0.25rem;
}

.dropdown-item[b-ipaa0p517d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--color-text-strong);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

    .dropdown-item:hover[b-ipaa0p517d] {
        background: var(--color-surface-hover);
    }

.dropdown-divider[b-ipaa0p517d] {
    height: 1px;
    background: var(--color-border-light);
    margin: 0.25rem 0.5rem;
}

.publish-check[b-ipaa0p517d] {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
}

    .publish-check.checked[b-ipaa0p517d] {
        color: var(--color-success-bright);
    }

    .publish-check.unchecked[b-ipaa0p517d] {
        color: var(--color-text-subtle);
    }

    .publish-check.partial[b-ipaa0p517d] {
        color: var(--color-warning-accent);
    }

.publish-label[b-ipaa0p517d] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

    .publish-label.published[b-ipaa0p517d] {
        color: var(--color-success-deep);
        background: var(--color-success-soft);
    }

    .publish-label.draft[b-ipaa0p517d] {
        color: var(--color-warning);
        background: var(--color-warning-soft);
    }

/* ===================================================================
   Dark-theme overrides — triggered by data-theme="dark" on <html>
   (set by DepartmentRoster page via JS interop). Lives here because
   Blazor CSS isolation prevents page-scoped rules from matching
   selectors rendered by this component.
   =================================================================== */
html[data-theme="dark"] .roster-toolbar[b-ipaa0p517d] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

html[data-theme="dark"] .toolbar-btn[b-ipaa0p517d] {
    background: var(--color-surface);
    color: var(--color-text-strong);
    border-color: var(--color-border);
}

    html[data-theme="dark"] .toolbar-btn:hover[b-ipaa0p517d] {
        background: var(--color-surface-hover);
    }

    html[data-theme="dark"] .toolbar-btn.publish[b-ipaa0p517d] {
        background: var(--color-success-bright);
        border-color: var(--color-success-bright);
        color: var(--color-white-fixed, #ffffff);
    }

    html[data-theme="dark"] .toolbar-btn.danger[b-ipaa0p517d] {
        color: var(--color-danger);
        border-color: var(--color-danger-border);
        background: var(--color-surface);
    }

html[data-theme="dark"] .toolbar-split[b-ipaa0p517d] {
    background: var(--color-border);
}

html[data-theme="dark"] .toolbar-dropdown[b-ipaa0p517d] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

html[data-theme="dark"] .dropdown-item[b-ipaa0p517d] {
    color: var(--color-text-strong);
}

    html[data-theme="dark"] .dropdown-item:hover[b-ipaa0p517d] {
        background: var(--color-surface-hover);
    }
/* /Components/Pages/Rostering/V2/Rostering/Components/ShiftCard.razor.rz.scp.css */
.shift-card[b-hy6prk3elu] {
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    font-size: 0.78rem;
    transition: box-shadow var(--transition-fast);
    pointer-events: auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

    .shift-card:hover[b-hy6prk3elu] {
        box-shadow: var(--shadow-card);
    }

    .shift-card.highlighted[b-hy6prk3elu],
    .shift-card.type-unavailable.highlighted[b-hy6prk3elu],
    .shift-card.type-vacation.highlighted[b-hy6prk3elu],
    .shift-card.type-request.highlighted[b-hy6prk3elu],
    .shift-card.type-sick.highlighted[b-hy6prk3elu],
    .shift-card.type-other.highlighted[b-hy6prk3elu] {
        background: #37e298;
        color: #000 !important;
    }

[data-theme="dark"] .shift-card.highlighted[b-hy6prk3elu] {
    /*background-color: #e4c76a;*/
    background: #37e298;
}

    [data-theme="dark"] .shift-card.highlighted .shift-employee[b-hy6prk3elu] {
        color: #000 !important;
    }

    [data-theme="dark"] .shift-card.highlighted .shift-time[b-hy6prk3elu] {
        color: #000 !important;
    }

    [data-theme="dark"] .shift-card.highlighted .shift-type-pill.type-request[b-hy6prk3elu] {
        background-color: gray;
    }

    [data-theme="dark"] .shift-card.highlighted .shift-type-pill.type-vacation[b-hy6prk3elu] {
        background-color: gray;
    }

    [data-theme="dark"] .shift-card.highlighted .shift-type-pill.type-unavailable[b-hy6prk3elu] {
        background-color: gray;
        color: white;
    }

    [data-theme="dark"] .shift-card.highlighted .shift-type-pill.type-sick[b-hy6prk3elu] {
        background-color: gray;
        color: white;
    }

    [data-theme="dark"] .shift-card.highlighted .shift-type-pill.type-request[b-hy6prk3elu] {
        background-color: gray;
        color: white;
    }

    [data-theme="dark"] .shift-card.highlighted .shift-notes[b-hy6prk3elu] {
        color:#000;
    }

    [data-theme="dark"] .shift-card.highlighted .shift-badge[b-hy6prk3elu] {
        color: #000;
    }

/* Type modifiers — declared here so the scoped attribute selector matches
       the card element (overrides the base `.shift-card` background above). */
.shift-card.type-unavailable[b-hy6prk3elu] {
    background: var(--color-danger-soft);
}

.shift-card.type-vacation[b-hy6prk3elu] {
    background: var(--color-success-soft);
}

.shift-card.type-request[b-hy6prk3elu] {
    background: var(--color-purple-soft);
}

.shift-card.type-sick[b-hy6prk3elu] {
    background: var(--color-warning-soft);
}

.shift-card.type-other[b-hy6prk3elu] {
    background: var(--color-purple-soft);
}

.shift-card.type-open[b-hy6prk3elu] {
    background: var(--color-warning-soft);
    border: 1px dashed #e4c76a;
}

.shift-card.type-vacation-pending[b-hy6prk3elu] {
    background: var(--color-success-soft);
    border-style: dashed;
}

.shift-card.type-unavailable-pending[b-hy6prk3elu] {
    background: var(--color-danger-soft);
    border-style: dashed;
}

.shift-card.dragging[b-hy6prk3elu] {
    opacity: 0.4;
    box-shadow: none;
}

.shift-card[draggable="true"][b-hy6prk3elu] {
    cursor: grab;
}

    .shift-card[draggable="true"]:active[b-hy6prk3elu] {
        cursor: grabbing;
    }

.shift-mp-indicator[b-hy6prk3elu] {
    font-size: 0.55rem;
    line-height: 1;
}

.shift-card.on-marketplace[b-hy6prk3elu] {
    box-shadow: inset 0 -2px 0 0 var(--color-warning-accent);
}

.days-content.drag-active[b-hy6prk3elu],
.days-content.drag-active .shift-card[b-hy6prk3elu] {
    pointer-events: none;
}

.days-messages.drag-active[b-hy6prk3elu],
.days-messages.drag-active .day-message-cell[b-hy6prk3elu] {
    pointer-events: none;
}

.day-bg.drop-target[b-hy6prk3elu] {
    background: var(--color-drop-target) !important;
    box-shadow: inset 0 0 0 2px var(--color-primary);
    border-radius: var(--radius-sm);
}

.day-bg.range-selected[b-hy6prk3elu] {
    background: var(--color-range-selected) !important;
    box-shadow: inset 0 0 0 2px var(--color-primary);
    border-radius: var(--radius-sm);
}

.shift-employee[b-hy6prk3elu] {
    font-weight: 600;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shift-time[b-hy6prk3elu] {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.shift-badge[b-hy6prk3elu] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    background: var(--color-info-soft);
    color: var(--color-info);
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

.shift-hours[b-hy6prk3elu] {
    color: var(--color-text-subtle);
    font-size: 0.7rem;
}

.shift-notes[b-hy6prk3elu] {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0;
}

/* ── Shift card top row ───────────────────────── */
.shift-card-top[b-hy6prk3elu] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.shift-employee[b-hy6prk3elu] {
    flex-shrink: 0;
    min-width: 0;
}

/* ── Shift card bottom row (time + type pill) ─── */
.shift-card-bottom[b-hy6prk3elu] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

    .shift-card-bottom .shift-time[b-hy6prk3elu] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .shift-card-bottom .shift-type-pill[b-hy6prk3elu] {
        flex-shrink: 0;
    }

/* ── Item type pill ───────────────────────────── */
.shift-type-pill[b-hy6prk3elu] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Item type colors for pills/cards live in /css/shared.css. */
/* /Components/Pages/Rostering/V2/Rostering/DepartmentRoster.razor.rz.scp.css */
/* ============================================================
   Department roster — page-specific styles only.
   Shared roster chrome (top bar, toolbar, header row, dept rows,
   day headers, day messages, days grid, shift cards, totals,
   modal/forms, dark-mode overrides) lives in /css/roster.css.
   ============================================================ */

/* ── Days grid min-height (department-specific) ─── */
.days-content[b-fps8tdkmcv] {
    min-height: 90px;
}

/* ── Open shifts section min-height ─────────────── */
.open-shifts-section[b-fps8tdkmcv] {
    min-height: 52px;
}

/* ── Roster data loading state ───────────────────── */
.roster-loading[b-fps8tdkmcv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    min-height: 200px;
}

.roster-loading-text[b-fps8tdkmcv] {
    font-size: 0.9rem;
    color: var(--color-text-muted, #888);
}

.roster-loading-bar[b-fps8tdkmcv] {
    width: 220px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-primary-soft, #d4edda);
    overflow: hidden;
    position: relative;
}

.roster-loading-bar[b-fps8tdkmcv]::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 50%;
    background: var(--color-primary, #4aa359);
    border-radius: 2px;
    animation: roster-load-sweep-b-fps8tdkmcv 1.2s ease-in-out infinite;
}

@keyframes roster-load-sweep-b-fps8tdkmcv {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}
/* /Components/Pages/Rostering/V2/Rostering/EmployeeRoster.razor.rz.scp.css */
/* ============================================================
   Employee roster — page-specific styles only.
   Shared roster chrome (top bar, toolbar, day headers, day
   messages, days grid, shift cards, totals frame, modal/forms,
   dark-mode overrides) lives in /css/roster.css.
   ============================================================ */

/* ── Header row ────────────────────────────────── */
.roster-header-row[b-rafkdgm1br] {
    display: grid;
    grid-template-columns: 200px repeat(7, minmax(0, 1fr));
    border: 1px solid var(--color-border-light);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background: var(--color-surface-alt);
}

/* Show + buttons on header / group-header hover */
.grid-day-header:hover .day-message-add[b-rafkdgm1br],
.dept-group-header:hover .day-message-add[b-rafkdgm1br],
.dept-group-header:hover .day-shift-add[b-rafkdgm1br] {
    display: inline-block;
}

/* ── Department group ──────────────────────────── */
.dept-group[b-rafkdgm1br] {
    border: 1px solid var(--color-border-light);
    border-top: none;
}

.dept-group-header[b-rafkdgm1br] {
    display: flex;
    background: #f4f5f7;
    cursor: pointer;
    user-select: none;
}

.dept-group-left[b-rafkdgm1br] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    min-width: 200px;
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border-light);
}

.dept-collapse-chevron[b-rafkdgm1br] {
    font-size: 0.7rem;
    transition: transform 0.2s;
    color: var(--color-text-muted);
}

    .dept-collapse-chevron.collapsed[b-rafkdgm1br] {
        transform: rotate(-90deg);
    }

.dept-icon[b-rafkdgm1br] {
    font-size: 1.1rem;
}

.dept-name[b-rafkdgm1br] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text-strong);
}

.dept-count[b-rafkdgm1br] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-border-light);
    border-radius: 8px;
    padding: 0.05rem 0.4rem;
    margin-left: 0.15rem;
}

.dept-group-days[b-rafkdgm1br] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    gap: 0 4px;
    padding: 0 4px;
}

.dept-group-day-cell[b-rafkdgm1br] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    min-height: 28px;
    border-right: 1px solid var(--color-border-faint);
}

    .dept-group-day-cell:last-child[b-rafkdgm1br] {
        border-right: none;
    }

/* ── Employee rows ─────────────────────────────── */
.emp-row[b-rafkdgm1br] {
    display: flex;
    border-top: 1px solid var(--color-border-faint);
    background: var(--color-white);
    transition: background 0.1s;
}

    .emp-row:hover[b-rafkdgm1br] {
        background: var(--color-primary-bg-2);
    }

.emp-row.open-row[b-rafkdgm1br] {
    background: var(--color-warning-bg-2);
    border-top: 1px dashed #e4c76a;
}

.grid-emp[b-rafkdgm1br] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    min-width: 200px;
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border-light);
    background: #fcfcfd;
}

.open-row .grid-emp[b-rafkdgm1br] {
    background: var(--color-warning-bg-2);
}

.open-label[b-rafkdgm1br],
.open-count[b-rafkdgm1br] {
    color: #b88a00;
}

.emp-name[b-rafkdgm1br] {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--color-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-hours[b-rafkdgm1br] {
    font-size: 0.7rem;
    color: var(--color-text-subtle);
}

.emp-days[b-rafkdgm1br] {
    flex: 1;
    position: relative;
    min-height: 52px;
}

/* ── Days grid sizing (page-specific min-height) ─ */
.days-content[b-rafkdgm1br] {
    min-height: 52px;
}

/* ── Totals (column width matches header) ──────── */
.roster-totals[b-rafkdgm1br] {
    display: grid;
    grid-template-columns: 200px repeat(7, minmax(0, 1fr));
}

/* ============================================================
   Page-specific dark-theme overrides
   (department-group header, employee rows, open-row).
   ============================================================ */
[data-theme="dark"] .dept-group[b-rafkdgm1br] {
    border-color: var(--color-border-light);
}

[data-theme="dark"] .dept-group-header[b-rafkdgm1br] {
    background: var(--color-surface-alt);
}

[data-theme="dark"] .dept-group-left[b-rafkdgm1br] {
    border-right-color: var(--color-border-light);
}

[data-theme="dark"] .dept-name[b-rafkdgm1br] {
    color: var(--color-text-strong);
}

[data-theme="dark"] .dept-collapse-chevron[b-rafkdgm1br] {
    color: var(--color-text-muted);
}

[data-theme="dark"] .dept-count[b-rafkdgm1br] {
    color: var(--color-text-muted);
    background: var(--color-border-light);
}

[data-theme="dark"] .dept-group-day-cell[b-rafkdgm1br] {
    border-right-color: var(--color-border-faint);
}

/* Employee rows on dark canvas */
[data-theme="dark"] .emp-row[b-rafkdgm1br] {
    background: var(--color-white); /* token resolves to dark card face */
    border-top-color: var(--color-border-faint);
}

    [data-theme="dark"] .emp-row:hover[b-rafkdgm1br] {
        background: var(--color-primary-bg-2);
    }

    [data-theme="dark"] .emp-row:hover .grid-emp[b-rafkdgm1br] {
    }

[data-theme="dark"] .grid-emp[b-rafkdgm1br] {
    background: var(--color-surface-alt);
    border-right-color: var(--color-border-light);
}

[data-theme="dark"] .emp-name[b-rafkdgm1br] {
    color: var(--color-text-strong);
}

[data-theme="dark"] .emp-hours[b-rafkdgm1br] {
    color: var(--color-text-subtle);
}

/* Open shift row keeps its amber identity but on dark surface */
[data-theme="dark"] .emp-row.open-row[b-rafkdgm1br] {
    background: var(--color-warning-bg-2);
    border-top-color: var(--color-warning-accent);
}

    [data-theme="dark"] .emp-row.open-row:hover[b-rafkdgm1br] {
    }

    [data-theme="dark"] .emp-row.open-row:hover .grid-emp[b-rafkdgm1br] {
    }

[data-theme="dark"] .open-row .grid-emp[b-rafkdgm1br] {
    background: var(--color-warning-bg-2);
}

[data-theme="dark"] .open-label[b-rafkdgm1br],
[data-theme="dark"] .open-count[b-rafkdgm1br] {
    color: #fde68a;
}

/* ── Roster data loading state ───────────────────── */
.roster-loading[b-rafkdgm1br] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    min-height: 200px;
}

.roster-loading-text[b-rafkdgm1br] {
    font-size: 0.9rem;
    color: var(--color-text-muted, #888);
}

.roster-loading-bar[b-rafkdgm1br] {
    width: 220px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-primary-soft, #d4edda);
    overflow: hidden;
    position: relative;
}

.roster-loading-bar[b-rafkdgm1br]::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 50%;
    background: var(--color-primary, #4aa359);
    border-radius: 2px;
    animation: roster-load-sweep-b-rafkdgm1br 1.2s ease-in-out infinite;
}

@keyframes roster-load-sweep-b-rafkdgm1br {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}
/* /Components/Pages/Rostering/V2/Rostering/Marketplace.razor.rz.scp.css */
/* ── Container ─────────────────────────────────── */
.marketplace[b-k32vm8kce1] {
    padding: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Header ────────────────────────────────────── */
.marketplace-header[b-k32vm8kce1] {
    margin-bottom: 1.25rem;
}

.marketplace-title h2[b-k32vm8kce1] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text);
}

.marketplace-subtitle[b-k32vm8kce1] {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* ── Empty state ───────────────────────────────── */
.marketplace-empty[b-k32vm8kce1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
    text-align: center;
}

.marketplace-empty .empty-icon[b-k32vm8kce1] {
    font-size: 2.5rem;
    opacity: 0.5;
}

.marketplace-empty .empty-text[b-k32vm8kce1] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.marketplace-empty .empty-hint[b-k32vm8kce1] {
    font-size: 0.8rem;
}

/* ── Day groups ────────────────────────────────── */
.mp-day-group[b-k32vm8kce1] {
    margin-bottom: 1.5rem;
}

.mp-day-header[b-k32vm8kce1] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.3rem 0;
    margin-bottom: 0.6rem;
    border-bottom: 2px solid var(--color-primary);
}

.mp-day-label[b-k32vm8kce1] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-strong);
    text-transform: capitalize;
}

.mp-day-count[b-k32vm8kce1] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ── Grid ──────────────────────────────────────── */
.marketplace-grid[b-k32vm8kce1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
}

/* ── Card ──────────────────────────────────────── */
.mp-card[b-k32vm8kce1] {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}

.mp-card:hover[b-k32vm8kce1] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mp-open[b-k32vm8kce1] {
    border-left: 3px solid var(--color-primary);
}

.mp-offer[b-k32vm8kce1] {
    border-left: 3px solid var(--color-warning-accent);
}

/* ── Card header ───────────────────────────────── */
.mp-card-header[b-k32vm8kce1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-surface-hover);
    background: #fafbfc;
}

.mp-type-badge[b-k32vm8kce1] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.badge-open[b-k32vm8kce1] {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.badge-offer[b-k32vm8kce1] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.mp-dept[b-k32vm8kce1] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ── Card body ─────────────────────────────────── */
.mp-card-body[b-k32vm8kce1] {
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.mp-shift-info[b-k32vm8kce1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mp-date[b-k32vm8kce1] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text);
}

.mp-time[b-k32vm8kce1] {
    font-size: 0.82rem;
    color: var(--color-text-strong);
    font-weight: 500;
}

.mp-hours[b-k32vm8kce1] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: var(--color-surface-hover);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.mp-offerer[b-k32vm8kce1] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
}

.mp-offerer-label[b-k32vm8kce1] {
    color: var(--color-text-muted);
}

.mp-offerer-name[b-k32vm8kce1] {
    font-weight: 600;
    color: var(--color-text-strong);
}

.mp-note[b-k32vm8kce1] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.4;
}

/* ── Card footer ───────────────────────────────── */
.mp-card-footer[b-k32vm8kce1] {
    padding: 0.55rem 0.75rem;
    border-top: 1px solid var(--color-surface-hover);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ── Applicants (manager view) ─────────────────── */
.mp-applicants[b-k32vm8kce1] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mp-applicants-title[b-k32vm8kce1] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-strong);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mp-applicant[b-k32vm8kce1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.4rem;
    background: var(--color-surface-alt);
    border-radius: 6px;
    gap: 0.4rem;
}

.mp-applicant-info[b-k32vm8kce1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mp-applicant-name[b-k32vm8kce1] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
}

.mp-applicant-note[b-k32vm8kce1] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.mp-applicant-date[b-k32vm8kce1] {
    font-size: 0.65rem;
    color: var(--color-text-subtle);
}

.mp-no-applicants[b-k32vm8kce1] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    font-style: italic;
}

/* ── Employee view ─────────────────────────────── */
.mp-apply-section[b-k32vm8kce1] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.mp-apply-note[b-k32vm8kce1] {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.75rem;
    outline: none;
}

.mp-apply-note:focus[b-k32vm8kce1] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.15);
}

.mp-applied[b-k32vm8kce1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mp-applied-text[b-k32vm8kce1] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #039855;
}

.mp-own-offer[b-k32vm8kce1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.mp-other-dept[b-k32vm8kce1] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    font-style: italic;
}

.mp-cross-dept-hint[b-k32vm8kce1] {
    font-size: 0.72rem;
    color: var(--color-warning);
    background: var(--color-warning-soft);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
}

/* ── Buttons ───────────────────────────────────── */
.btn-apply[b-k32vm8kce1] {
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-apply:hover[b-k32vm8kce1] {
    background: var(--color-primary-hover);
}

.btn-assign[b-k32vm8kce1] {
    padding: 0.25rem 0.55rem;
    border: none;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #039855;
    color: var(--color-white);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-assign:hover[b-k32vm8kce1] {
    background: #027a45;
}

.btn-withdraw[b-k32vm8kce1] {
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--color-white);
    color: var(--color-text-strong);
    cursor: pointer;
    transition: background 0.15s;
}

.btn-withdraw:hover[b-k32vm8kce1] {
    background: var(--color-surface-alt);
}

.btn-cancel[b-k32vm8kce1] {
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-danger-border);
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--color-white);
    color: var(--color-danger);
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.15s;
}

.btn-cancel:hover[b-k32vm8kce1] {
    background: var(--color-danger-soft);
}

/* ── Dark theme overrides ──────────────────────── */
[data-theme="dark"] .mp-day-label[b-k32vm8kce1] {
    color: var(--color-text-strong);
}

[data-theme="dark"] .mp-card[b-k32vm8kce1] {
    background: var(--color-surface);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .mp-card:hover[b-k32vm8kce1] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .mp-card-header[b-k32vm8kce1] {
    background: var(--color-surface-alt);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .mp-card-footer[b-k32vm8kce1] {
    border-top-color: var(--color-border);
}

[data-theme="dark"] .mp-hours[b-k32vm8kce1] {
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
}

[data-theme="dark"] .mp-applicant[b-k32vm8kce1] {
    background: var(--color-surface-hover);
}

[data-theme="dark"] .mp-apply-note[b-k32vm8kce1] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .mp-apply-note[b-k32vm8kce1]::placeholder {
    color: var(--color-text-subtle);
}

[data-theme="dark"] .mp-apply-note:focus[b-k32vm8kce1] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.2);
}

[data-theme="dark"] .mp-applied-text[b-k32vm8kce1] {
    color: #4ade80;
}

[data-theme="dark"] .btn-withdraw[b-k32vm8kce1] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-strong);
}

[data-theme="dark"] .btn-withdraw:hover[b-k32vm8kce1] {
    background: var(--color-surface-hover);
}

[data-theme="dark"] .btn-cancel[b-k32vm8kce1] {
    background: var(--color-surface-alt);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}

[data-theme="dark"] .btn-cancel:hover[b-k32vm8kce1] {
    background: rgba(239, 68, 68, 0.18);
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 640px) {
    .marketplace-grid[b-k32vm8kce1] {
        grid-template-columns: 1fr;
    }

    .mp-apply-section[b-k32vm8kce1] {
        flex-direction: column;
    }

    .mp-apply-note[b-k32vm8kce1] {
        width: 100%;
    }
}
/* /Components/Pages/Rostering/V2/Rostering/MyRoster.razor.rz.scp.css */
/* ── Container ─────────────────────────────────── */
.my-roster[b-47vwfosner] {
    padding: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.my-roster.swiping-left[b-47vwfosner] {
    opacity: 0.4;
    transform: translateX(-12px);
}

.my-roster.swiping-right[b-47vwfosner] {
    opacity: 0.4;
    transform: translateX(12px);
}

/* ── Swipe hint (touch devices only) ── */
.swipe-hint[b-47vwfosner] {
    display: none;
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    text-align: center;
    padding: 0.25rem 0;
}

@media (pointer: coarse) {
    .swipe-hint[b-47vwfosner] {
        display: block;
    }
}

/* ── Week summary bar ──────────────────────────── */
.week-summary[b-47vwfosner] {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
}

.summary-stat[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.25rem;
    border-right: 1px solid var(--color-border-light);
    min-width: 90px;
}

    .summary-stat:last-child[b-47vwfosner] {
        border-right: none;
    }

    .summary-stat.primary[b-47vwfosner] {
        background: var(--color-success-bg-4);
    }

    .summary-stat.over .summary-value[b-47vwfosner] {
        color: var(--color-warning);
    }

    .summary-stat.under .summary-value[b-47vwfosner] {
        color: var(--color-success);
    }

    .summary-stat.type-stat[b-47vwfosner] {
        background: var(--color-surface-alt);
    }

.summary-value[b-47vwfosner] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.3;
}

.summary-label[b-47vwfosner] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Day cards grid ────────────────────────────── */
.week-grid[b-47vwfosner] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Print-only compact grid ───────────────────── */
.print-roster-grid[b-47vwfosner] {
    display: none;
    grid-template-columns: 1.2fr 2.2fr 2.2fr 1.2fr;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    font-size: 11px;
    line-height: 1.35;
}

.print-grid-head[b-47vwfosner] {
    font-weight: 700;
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid #cbd5e1;
    background: #f8fafc;
}

.print-grid-cell[b-47vwfosner] {
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

.print-grid-cell:nth-child(4n)[b-47vwfosner] {
    border-right: none;
}

.print-day[b-47vwfosner] {
    font-weight: 600;
}

.print-muted[b-47vwfosner] {
    color: #64748b;
}

.day-card[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border-light);
    background: var(--color-white);
    min-height: 200px;
}

    .day-card:last-child[b-47vwfosner] {
        border-right: none;
    }

    .day-card.today[b-47vwfosner] {
        background: var(--color-primary-bg-3);
    }

    .day-card.off[b-47vwfosner] {
        background: var(--color-surface-subtle);
    }

/* Day card body – stacks on desktop, splits on mobile */
.day-card-body[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Day messages ──────────────────────────────── */
.day-messages[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.3rem 0.6rem;
}

/* ── Messages row: sits above all day cards, one cell per day column ── */
.week-msg-cell[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.3rem 0.5rem;
    min-height: 0; /* collapses when empty */
    border-right: 1px solid var(--color-border-light);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
}

    .week-msg-cell:last-of-type[b-47vwfosner] {
        border-right: none;
    }

/* Mobile duplicate: hidden on desktop, shown when grid is 1-column */
.day-card-msgs-mobile[b-47vwfosner] {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.3rem 0.6rem;
}

/* Day card header */
.day-card-header[b-47vwfosner] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.6rem 0.4rem;
    border-bottom: 1px solid var(--color-border-faint);
}

.day-card.today .day-card-header[b-47vwfosner] {
    border-bottom: 2px solid var(--color-primary);
}

.day-card-header-text[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.day-card-name[b-47vwfosner] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text-strong);
}

.day-card-date[b-47vwfosner] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
}

.day-card-hours[b-47vwfosner] {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-text-strong);
    background: var(--color-surface-hover);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.today-badge[b-47vwfosner] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-white);
    background: var(--color-primary);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Day card messages */
.day-card-messages[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--color-border-faint);
}

/* Day card shifts */
.day-card-shifts[b-47vwfosner] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
}

.my-shift-card[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: var(--color-surface-alt);
    font-size: 0.78rem;
    transition: box-shadow 0.15s;
}

    .my-shift-card:hover[b-47vwfosner] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

.my-shift-time[b-47vwfosner] {
    font-weight: 600;
    color: var(--color-text-strong);
    font-size: 0.85rem;
}

.my-shift-hours[b-47vwfosner] {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.my-shift-span[b-47vwfosner] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    background: var(--color-info-soft);
    color: var(--color-info);
    font-size: 0.6rem;
    font-weight: 600;
    width: fit-content;
}

.day-off-label[b-47vwfosner] {
    color: var(--color-text-subtle);
    font-size: 0.82rem;
    font-style: italic;
    text-align: center;
    padding-top: 1.5rem;
}

/* ── Item type pill ───────────────────────────── */
.shift-type-pill[b-47vwfosner] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    width: fit-content;
    margin-bottom: 0.1rem;
}

.shift-type-pill.type-unavailable[b-47vwfosner],
.shift-type-pill.type-unavailable-pending[b-47vwfosner] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.shift-type-pill.type-vacation[b-47vwfosner],
.shift-type-pill.type-vacation-pending[b-47vwfosner] {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.shift-type-pill.type-request[b-47vwfosner] {
    background: var(--color-purple-soft);
    color: var(--color-purple);
}

.shift-type-pill.type-sick[b-47vwfosner] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.shift-type-pill.type-other[b-47vwfosner] {
    background: var(--color-purple-soft);
    color: var(--color-purple);
}

.shift-type-pill.type-open[b-47vwfosner] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

/* Item type card backgrounds */
.my-shift-card.type-unavailable[b-47vwfosner]        { background: var(--color-danger-soft); }
.my-shift-card.type-vacation[b-47vwfosner]           { background: var(--color-success-soft); }
.my-shift-card.type-request[b-47vwfosner]            { background: var(--color-purple-soft); }
.my-shift-card.type-sick[b-47vwfosner]               { background: var(--color-warning-soft); }
.my-shift-card.type-other[b-47vwfosner]              { background: var(--color-purple-soft); }
.my-shift-card.type-open[b-47vwfosner]               { background: var(--color-warning-soft); border-style: dashed; }
.my-shift-card.type-vacation-pending[b-47vwfosner]   { background: var(--color-success-soft); border-style: dashed; }
.my-shift-card.type-unavailable-pending[b-47vwfosner] { background: var(--color-danger-soft); border-style: dashed; }

/* ── Colleagues ────────────────────────────────── */
.day-card-colleagues[b-47vwfosner] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--color-border-faint);
    flex-wrap: wrap;
}

.colleagues-label[b-47vwfosner] {
    font-size: 0.68rem;
    color: var(--color-text-subtle);
    white-space: nowrap;
}

.colleague-chip[b-47vwfosner] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-border-light);
    color: var(--color-text-strong);
    font-size: 0.55rem;
    font-weight: 700;
    cursor: default;
    flex-shrink: 0;
}

    .colleague-chip:hover[b-47vwfosner] {
        background: var(--color-border);
    }

/* ── Day card logs ──────────────────────────────── */
.day-card-logs[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
}

.log-actions[b-47vwfosner] {
    display: flex;
    gap: 0.25rem;
}

.status-badge.declined[b-47vwfosner] {
    background: var(--color-danger-bg-1);
    color: var(--color-danger);
    font-size: 0.65rem;
}

.declined-note[b-47vwfosner] {
    color: var(--color-danger);
}

/* ── Section labels ─────────────────────────────── */
.section-label[b-47vwfosner] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-subtle);
    padding-bottom: 0.15rem;
}

.section-icon[b-47vwfosner] {
    font-size: 0.65rem;
}

/* ── Hour registration section ─────────────────── */
.day-card-logs-section[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    margin-top: auto;
    border-top: 1px dashed var(--color-border-light);
    background: var(--color-surface-alt);
}

.footer-log-card[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: var(--color-white);
    font-size: 0.75rem;
    border: 1px solid var(--color-border-light);
}

    .footer-log-card.approved[b-47vwfosner] {
        background: var(--color-success-bg-2);
        border-color: var(--color-success-tint);
    }

    .footer-log-card.declined[b-47vwfosner] {
        background: var(--color-danger-bg-1);
        border-color: var(--color-danger-tint);
    }

.footer-log-row[b-47vwfosner] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.log-time[b-47vwfosner] {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--color-text-strong);
}

.log-details-row[b-47vwfosner] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.log-detail-chip[b-47vwfosner] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
}

    .log-detail-chip.meal[b-47vwfosner] {
        background: var(--color-warning-amber);
        color: var(--color-warning-strong);
    }

    .log-detail-chip.no-meal[b-47vwfosner] {
        background: var(--color-surface-hover);
        color: var(--color-text-subtle);
    }

.log-declined-row[b-47vwfosner],
.log-pending-row[b-47vwfosner] {
    padding-top: 0.1rem;
}

.footer-log-info[b-47vwfosner] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* ── Day card action buttons ────────────────────── */
.day-card-actions[b-47vwfosner] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* ── Absence report button ─────────────────────── */
.btn-report-absence[b-47vwfosner] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px dashed var(--color-danger-border);
    border-radius: 6px;
    background: none;
    color: var(--color-danger);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .btn-report-absence:hover[b-47vwfosner] {
        background: var(--color-danger-soft);
        border-color: #f97066;
    }

.absence-reported-card[b-47vwfosner] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: var(--color-danger-soft);
    border: 1px solid #fecdca;
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
}

    .absence-reported-card.type-unavailable-pending[b-47vwfosner] {
        background: var(--color-surface-alt);
        border-color: var(--color-border-light);
    }

.absence-reported-icon[b-47vwfosner] {
    font-size: 0.9rem;
    line-height: 1;
}

.absence-reported-text[b-47vwfosner] {
    font-weight: 600;
    color: var(--color-text-strong);
    flex: 1;
}

.btn-withdraw[b-47vwfosner] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

    .btn-withdraw:hover[b-47vwfosner] {
        background: var(--color-danger-soft);
        border-color: var(--color-danger-border);
        color: var(--color-danger);
    }

.btn-add-log[b-47vwfosner] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

    .btn-add-log:hover[b-47vwfosner] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary);
        color: var(--color-primary-strong);
    }

/* ── Standalone log cards ──────────────────────── */
.standalone-log-card[b-47vwfosner] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: var(--color-border-faint);
    font-size: 0.78rem;
    transition: box-shadow 0.15s;
    border-style: dashed;
}

    .standalone-log-card:hover[b-47vwfosner] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

.standalone-label[b-47vwfosner] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

/* ── Status badges ─────────────────────────────── */
.status-badge[b-47vwfosner] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-badge.pending[b-47vwfosner] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.status-badge.approved[b-47vwfosner] {
    background: var(--color-success-soft);
    color: var(--color-success);
}

/* ── Form hint ─────────────────────────────────── */
.form-hint[b-47vwfosner] {
    font-weight: 400;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
}

.log-planned-info.standalone[b-47vwfosner] {
    border-left: 3px dashed var(--color-text-muted);
}

/* ── Hour log status on shift cards ──────────── */
.shift-card-row[b-47vwfosner] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.shift-card-info[b-47vwfosner] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.btn-offer-shift[b-47vwfosner] {
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--color-warning-tint);
    border-radius: 5px;
    background: var(--color-warning-bg-1);
    cursor: pointer;
    font-size: 0.7rem;
    flex-shrink: 0;
    line-height: 1;
    transition: background 0.15s;
}

.btn-offer-shift:hover[b-47vwfosner] {
    background: var(--color-warning-amber);
}

.btn-log[b-47vwfosner] {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 0.1rem;
    white-space: nowrap;
    color: var(--color-text-strong);
}

    .btn-log:hover[b-47vwfosner] {
        background: var(--color-primary-soft);
        border-color: var(--color-primary);
        color: var(--color-primary-strong);
    }

    .btn-log.logged[b-47vwfosner] {
        background: var(--color-success-soft);
        border-color: #a6f4c5;
        color: var(--color-success);
    }

        .btn-log.logged:hover[b-47vwfosner] {
            background: #d1fadf;
        }

.my-shift-card.needs-log[b-47vwfosner] {
    box-shadow: inset 0 0 0 1px #fec84b;
}

.my-shift-card.logged[b-47vwfosner] {
    box-shadow: inset 0 0 0 1px #6ce9a6;
}

/* Hour log summary inside shift card */
.hour-log-summary[b-47vwfosner] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--color-border-light);
    font-size: 0.7rem;
}

.log-actual[b-47vwfosner] {
    font-weight: 600;
    color: var(--color-text-strong);
}

.log-detail[b-47vwfosner] {
    color: var(--color-text-muted);
}

.log-meal[b-47vwfosner] {
    font-weight: 600;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.62rem;
}

    .log-meal.meal-lunch[b-47vwfosner] {
        background: var(--color-warning-amber);
        color: var(--color-warning-strong);
    }

    .log-meal.meal-dinner[b-47vwfosner] {
        background: #ede9fe;
        color: #5b21b6;
    }

    .log-meal.meal-both[b-47vwfosner] {
        background: #fce7f3;
        color: #9d174d;
    }

/* ── Summary bar additions ─────────────────────── */
.summary-stat.logged .summary-value[b-47vwfosner] {
    color: var(--color-success);
}

.summary-stat.needs-action[b-47vwfosner] {
    background: var(--color-warning-soft);
}

    .summary-stat.needs-action .summary-value[b-47vwfosner] {
        color: var(--color-warning);
    }

.summary-stat.all-logged[b-47vwfosner] {
    background: var(--color-success-soft);
}

    .summary-stat.all-logged .summary-value[b-47vwfosner] {
        color: var(--color-success);
    }

/* ── Hour log modal extras ─────────────────────── */
.log-planned-info[b-47vwfosner] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.82rem;
}

.log-planned-label[b-47vwfosner] {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.log-planned-time[b-47vwfosner] {
    font-weight: 600;
    color: var(--color-text-strong);
}

.log-planned-hours[b-47vwfosner] {
    color: var(--color-text-subtle);
    font-size: 0.78rem;
    margin-left: auto;
}

.log-diff[b-47vwfosner] {
    font-size: 0.8rem;
    font-weight: 500;
}

    .log-diff.over[b-47vwfosner] {
        color: var(--color-warning);
    }

    .log-diff.under[b-47vwfosner] {
        color: var(--color-success);
    }

/* ═══════════════════════════════════════════════════
   Responsive – mobile (≤ 1200px)
   Stack days vertically, vertical roster/hours layout
   ═══════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .my-roster[b-47vwfosner] {
        padding: 0.75rem;
    }

    /* ── Summary bar: 3-column grid ── */
    .week-summary[b-47vwfosner] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-radius: 8px;
    }

    .summary-stat[b-47vwfosner] {
        min-width: unset;
        padding: 0.5rem 0.5rem;
        border-right: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
    }

        .summary-stat:nth-child(3n)[b-47vwfosner] {
            border-right: none;
        }

        .summary-stat:last-child[b-47vwfosner] {
            border-right: none;
        }

    .summary-value[b-47vwfosner] {
        font-size: 0.92rem;
    }

    .summary-label[b-47vwfosner] {
        font-size: 0.62rem;
    }

    /* ── Day grid: stack vertically ── */
    .week-grid[b-47vwfosner] {
        grid-template-columns: 1fr;
        border: none;
        border-radius: 0;
        gap: 0.5rem;
        background: transparent;
    }

    /* Hide the desktop message row; show the inline card version instead */
    .week-msg-cell[b-47vwfosner] {
        display: none;
    }

    .day-card-msgs-mobile[b-47vwfosner] {
        display: flex;
    }

    .day-card[b-47vwfosner] {
        border-right: none;
        border: 1px solid var(--color-border-light);
        border-radius: 10px;
        min-height: unset;
        overflow: hidden;
    }

        .day-card:last-child[b-47vwfosner] {
            border-right: none;
            border-bottom: 1px solid var(--color-border-light);
        }

        .day-card.today[b-47vwfosner] {
            border-color: var(--color-primary);
            box-shadow: 0 1px 4px rgba(46, 144, 250, 0.15);
        }

        .day-card.off[b-47vwfosner] {
            background: var(--color-surface-alt);
        }

    /* ── Header: horizontal day + date ── */
    .day-card-header[b-47vwfosner] {
        padding: 0.5rem 0.75rem;
    }

    .day-card-header-text[b-47vwfosner] {
        flex-direction: row;
        align-items: baseline;
        gap: 0.4rem;
    }

    .day-card-name[b-47vwfosner] {
        font-size: 0.92rem;
    }

    .day-card-date[b-47vwfosner] {
        font-size: 0.78rem;
    }

    /* Off days: compact */
    .day-card.off .day-off-label[b-47vwfosner] {
        padding-top: 0;
        text-align: left;
        font-size: 0.78rem;
    }

    /* ── Buttons: bigger touch targets ── */
    .btn-add-log[b-47vwfosner] {
        padding: 0.4rem 0.5rem;
        font-size: 0.72rem;
    }

    .btn-log[b-47vwfosner] {
        min-width: 32px;
        min-height: 32px;
    }

    /* Messages */
    .day-card-messages[b-47vwfosner] {
        padding: 0.35rem 0.75rem;
    }

    .day-msg-text[b-47vwfosner] {
        -webkit-line-clamp: 3;
    }

    /* Colleagues */
    .day-card-colleagues[b-47vwfosner] {
        padding: 0.35rem 0.75rem;
    }
}

@media print {
    .my-roster[b-47vwfosner] {
        padding: 0;
        font-size: 12px;
    }

    .print-roster-grid[b-47vwfosner] {
        display: grid !important;
    }

    .week-summary[b-47vwfosner] {
        margin-bottom: 0.6rem;
    }
}

/* ── Dark-mode overrides ──────────────────────── */

[data-theme="dark"] .log-detail-chip[b-47vwfosner] {
    background: var(--color-surface-alt);
    color: var(--color-text-strong);
}

[data-theme="dark"] .log-detail-chip.meal[b-47vwfosner] {
    background: rgba(217, 119, 6, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .log-detail-chip.no-meal[b-47vwfosner] {
    background: var(--color-surface-alt);
    color: var(--color-text-subtle);
}
/* /Components/Pages/Rostering/V2/Rostering/Templating/TemplateList.razor.rz.scp.css */
.tpl-container[b-rlokswh4hv] {
    padding: 1.5rem;
    max-width: 860px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tpl-header[b-rlokswh4hv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

    .tpl-header h2[b-rlokswh4hv] {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--color-text-strong);
    }

.btn-create[b-rlokswh4hv] {
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-primary-tint);
    border-radius: 8px;
    background: var(--color-primary-bg-5);
    color: var(--color-primary-deep);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-create:hover[b-rlokswh4hv] {
        background: var(--color-drop-target);
    }

.tpl-list[b-rlokswh4hv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tpl-card[b-rlokswh4hv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .tpl-card:hover[b-rlokswh4hv] {
        border-color: var(--color-primary-tint);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

.tpl-info[b-rlokswh4hv] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tpl-name[b-rlokswh4hv] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.tpl-meta[b-rlokswh4hv] {
    font-size: 0.78rem;
    color: var(--color-text-subtle);
}

.tpl-actions[b-rlokswh4hv] {
    display: flex;
    gap: 0.3rem;
}

.btn-delete-tpl[b-rlokswh4hv] {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-danger-tint);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-danger-bright);
    font-size: 0.85rem;
    cursor: pointer;
}

    .btn-delete-tpl:hover[b-rlokswh4hv] {
        background: var(--color-danger-bg-1);
    }

/* ── Empty state ──────────────────────────────── */

.empty-state[b-rlokswh4hv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 3rem 1rem;
    color: var(--color-text-subtle);
    font-size: 0.88rem;
}

.empty-icon[b-rlokswh4hv] {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.empty-hint[b-rlokswh4hv] {
    font-size: 0.78rem;
}

/* ── Dark theme overrides ─────────────────────── */

[data-theme="dark"] .tpl-header h2[b-rlokswh4hv] {
    color: var(--color-text-strong);
}

[data-theme="dark"] .btn-create[b-rlokswh4hv] {
    background: var(--color-surface);
    color: var(--color-text-strong);
    border-color: var(--color-border);
}

    [data-theme="dark"] .btn-create:hover[b-rlokswh4hv] {
        background: var(--color-surface-hover);
        border-color: var(--color-primary);
    }

[data-theme="dark"] .tpl-card[b-rlokswh4hv] {
    background: var(--color-surface);
    border-color: var(--color-border-light);
}

    [data-theme="dark"] .tpl-card:hover[b-rlokswh4hv] {
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

[data-theme="dark"] .tpl-name[b-rlokswh4hv] {
    color: var(--color-text-strong);
}

[data-theme="dark"] .tpl-meta[b-rlokswh4hv] {
    color: var(--color-text-subtle);
}

[data-theme="dark"] .btn-delete-tpl[b-rlokswh4hv] {
    background: var(--color-surface);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.45);
}

    [data-theme="dark"] .btn-delete-tpl:hover[b-rlokswh4hv] {
        background: rgba(239, 68, 68, 0.18);
    }

[data-theme="dark"] .empty-state[b-rlokswh4hv] {
    color: var(--color-text-subtle);
}
/* /Components/Pages/Rostering/V2/Rostering/Templating/TemplateRoster.razor.rz.scp.css */
/* ============================================================
   Template roster � page-specific styles only.
   Shared roster chrome (toolbar, header row, dept rows, day
   headers, day messages, days grid, shift cards, totals,
   modal/forms, dark-mode overrides) lives in /css/roster.css.
   ============================================================ */

/* -- Top bar (template page uses justify-content: space-between) */
.roster-header[b-mh7g2fi4vz] {
    justify-content: space-between;
    flex-wrap: wrap;
}

    .roster-header h2[b-mh7g2fi4vz] {
        font-size: 1.4rem;
    }

/* -- Template name editing ----------------------- */
.template-name-edit[b-mh7g2fi4vz] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.template-name-edit .btn-icon[b-mh7g2fi4vz] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    transition: background 0.12s;
    line-height: 1;
}

    .template-name-edit .btn-icon.save[b-mh7g2fi4vz] {
        color: var(--color-success-darkest);
    }

        .template-name-edit .btn-icon.save:hover[b-mh7g2fi4vz] {
            background: var(--color-success-bg-3);
        }

    .template-name-edit .btn-icon.cancel[b-mh7g2fi4vz] {
        color: var(--color-danger);
    }

        .template-name-edit .btn-icon.cancel:hover[b-mh7g2fi4vz] {
            background: #fee4e2;
        }

.template-name-input[b-mh7g2fi4vz] {
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    background: var(--color-white);
    min-width: 220px;
}

    .template-name-input:focus[b-mh7g2fi4vz] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
    }

.template-name-error[b-mh7g2fi4vz] {
    font-size: 0.78rem;
    color: var(--color-danger);
}

/* -- Publish pill (inside toolbar-btn.publish) --- */
.publish-pill[b-mh7g2fi4vz] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

    .publish-pill.draft[b-mh7g2fi4vz] {
        background: rgba(255, 255, 255, 0.25);
        color: var(--color-white);
    }

    .publish-pill.partial[b-mh7g2fi4vz] {
        background: var(--color-warning-soft);
        color: var(--color-warning);
    }

    .publish-pill.published[b-mh7g2fi4vz] {
        background: var(--color-white);
        color: var(--color-success-deep);
    }

/* -- Item type pill ------------------------------ */
.shift-type-pill[b-mh7g2fi4vz] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Item type colors for pills/cards live in /css/shared.css. */

/* -- Shift card states (template-specific) ------- */
.shift-card.editing[b-mh7g2fi4vz] {
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* ?? Roster data loading state ????????????????????? */
.roster-loading[b-mh7g2fi4vz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    min-height: 200px;
}

.roster-loading-text[b-mh7g2fi4vz] {
    font-size: 0.9rem;
    color: var(--color-text-muted, #888);
}

.roster-loading-bar[b-mh7g2fi4vz] {
    width: 220px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-primary-soft, #d4edda);
    overflow: hidden;
    position: relative;
}

.roster-loading-bar[b-mh7g2fi4vz]::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 50%;
    background: var(--color-primary, #4aa359);
    border-radius: 2px;
    animation: roster-load-sweep-b-mh7g2fi4vz 1.2s ease-in-out infinite;
}

@keyframes roster-load-sweep-b-mh7g2fi4vz {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}
/* /Components/SelectWeekBar.razor.rz.scp.css */
/* ── Shared week navigation bar (SelectWeekBar) ── */

.roster-nav[b-h7uhfjgyea] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.week-label[b-h7uhfjgyea] {
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 260px;
    text-align: center;
}

/* ── Dark theme ────────────────────────────────── */
[data-theme="dark"] .week-label[b-h7uhfjgyea] {
    color: var(--color-text-strong);
}

/* ── Mobile (≤ 1200px): stack and reorder ─────── */
@media (max-width: 1200px) {
    .roster-nav[b-h7uhfjgyea] {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.4rem;
        width: 100%;
    }

    .week-label[b-h7uhfjgyea] {
        min-width: unset;
        font-size: 0.82rem;
        order: -1;
        width: 100%;
        text-align: center;
        white-space: normal;
        padding: 0;
    }

    .btn-print-desktop[b-h7uhfjgyea] {
        display: none !important;
    }
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
.confirm-dialog[b-byxifbuwei] {
    padding: 0.5rem 0;
}

.confirm-message[b-byxifbuwei] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-strong);
    line-height: 1.6;
}
/* /Components/Shared/DeclineDialog.razor.rz.scp.css */
.decline-dialog[b-yiftmcnua3] {
    padding: 0.5rem 0;
}

.decline-message[b-yiftmcnua3] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-text-strong);
    line-height: 1.6;
}

.decline-notify[b-yiftmcnua3] {
    margin-bottom: 0.75rem;
}

.notify-toggle[b-yiftmcnua3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-text-strong);
    cursor: pointer;
    user-select: none;
}

    .notify-toggle input[type="checkbox"][b-yiftmcnua3] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

.decline-reason[b-yiftmcnua3] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.reason-label[b-yiftmcnua3] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.reason-input[b-yiftmcnua3] {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 0.84rem;
    color: var(--color-text);
    background: var(--color-surface);
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

    .reason-input:focus[b-yiftmcnua3] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-focus-ring);
    }
/* /Components/Shared/DeleteRosterItemDialog.razor.rz.scp.css */
.delete-roster-dialog[b-sa2iqr8see] {
    padding: 0.5rem 0;
}

.delete-roster-message[b-sa2iqr8see] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-text-strong);
    line-height: 1.6;
}

.delete-roster-option[b-sa2iqr8see] {
    margin-bottom: 0.25rem;
}

.roster-toggle[b-sa2iqr8see] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-text-strong);
    cursor: pointer;
    user-select: none;
}

    .roster-toggle input[type="checkbox"][b-sa2iqr8see] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }
/* /Components/Shared/SendBackDialog.razor.rz.scp.css */
.sendback-dialog[b-fbqxqf6d77] {
    padding: 0.5rem 0;
}

.sendback-message[b-fbqxqf6d77] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-text-strong);
    line-height: 1.6;
}

.sendback-options[b-fbqxqf6d77] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.sendback-option[b-fbqxqf6d77] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    transition: border-color 0.15s;
}

.sendback-option:has(input:checked)[b-fbqxqf6d77] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest-10, color-mix(in srgb, var(--accent-fill-rest) 10%, transparent));
}

.sendback-option input[type="radio"][b-fbqxqf6d77] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent-fill-rest);
}

.sendback-option span[b-fbqxqf6d77] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sendback-option strong[b-fbqxqf6d77] {
    font-weight: 600;
    color: var(--color-text-strong);
}

.sendback-option small[b-fbqxqf6d77] {
    color: var(--color-text-muted, var(--neutral-foreground-hint));
    font-size: 0.8rem;
}

.sendback-reason[b-fbqxqf6d77] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.reason-label[b-fbqxqf6d77] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-strong);
}

.reason-input[b-fbqxqf6d77] {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.88rem;
    border: 1px solid var(--color-border, var(--neutral-stroke-rest));
    border-radius: 6px;
    background: var(--color-surface-alt, var(--neutral-fill-input-rest));
    color: var(--color-text, var(--neutral-foreground-rest));
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.reason-input:focus[b-fbqxqf6d77] {
    outline: none;
    border-color: var(--color-primary, var(--accent-fill-rest));
    box-shadow: 0 0 0 2px var(--color-focus-ring, var(--accent-fill-rest));
}