/* ===========================================================================
   ShiftPlan — Operations Scheduler UI
   =========================================================================== */
:root {
    --sp-bg: #f3f4f6;
    --sp-surface: #ffffff;
    --sp-sidebar: #0f172a;
    --sp-sidebar-muted: #94a3b8;
    --sp-sidebar-hover: #1e293b;
    --sp-border: #e5e7eb;
    --sp-text: #111827;
    --sp-text-muted: #6b7280;
    --sp-primary: #2563eb;
    --sp-primary-soft: #eff6ff;

    /* Shift theme colours */
    --sp-day-bg: #fefce8;
    --sp-day-border: #fde047;
    --sp-day-text: #a16207;
    --sp-day-dot: #eab308;

    --sp-evening-bg: #eef2ff;
    --sp-evening-border: #c7d2fe;
    --sp-evening-text: #4f46e5;
    --sp-evening-dot: #6366f1;

    --sp-night-bg: #f8fafc;
    --sp-night-border: #e2e8f0;
    --sp-night-text: #334155;
    --sp-night-dot: #475569;

    --sp-weekend-bg: #ecfdf5;
    --sp-weekend-border: #a7f3d0;
    --sp-weekend-text: #059669;
    --sp-weekend-dot: #10b981;

    --sp-overdue: #dc2626;
    --sp-pending: #d97706;
    --sp-done: #059669;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--sp-bg);
    color: var(--sp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ----- App shell ---------------------------------------------------------- */
.sp-app {
    display: flex;
    min-height: 100vh;
}

/* ----- Sidebar ------------------------------------------------------------ */
.sp-sidebar {
    width: 230px;
    flex: 0 0 230px;
    background: var(--sp-sidebar);
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    transition: width .18s ease, flex-basis .18s ease;
    overflow-x: hidden;
}

.sp-sidebar.collapsed {
    width: 68px;
    flex: 0 0 68px;
}

.sp-sidebar.collapsed .sp-brand-text,
.sp-sidebar.collapsed .sp-nav-label,
.sp-sidebar.collapsed .sp-alert-title span,
.sp-sidebar.collapsed .sp-alert-sub,
.sp-sidebar.collapsed .sp-user-meta,
.sp-sidebar.collapsed .sp-nav-item span:not(.sp-nav-icon):not(.sp-nav-badge) {
    display: none;
}

.sp-sidebar.collapsed .sp-brand {
    justify-content: center;
    padding: 20px 10px;
}

.sp-sidebar.collapsed .sp-sidebar-toggle {
    transform: rotate(180deg);
    position: static;
    margin-top: 8px;
}

.sp-sidebar.collapsed .sp-nav-item {
    justify-content: center;
}

.sp-sidebar.collapsed .sp-nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
}

.sp-sidebar.collapsed .sp-nav-item {
    position: relative;
}

.sp-sidebar.collapsed .sp-alert-box {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.sp-sidebar.collapsed .sp-alert-title {
    justify-content: center;
}

.sp-sidebar.collapsed .sp-user-box {
    justify-content: center;
}

.sp-sidebar.collapsed .sp-user-signout {
    display: none;
}

.sp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px;
    position: relative;
}

.sp-sidebar-toggle {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    color: #cbd5e1;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform .18s ease, background .15s ease;
}

.sp-sidebar-toggle:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}


.sp-brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--sp-primary);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    flex: 0 0 auto;
}

.sp-brand-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    color: #fff;
}

.sp-brand-sub {
    font-size: 12px;
    color: var(--sp-sidebar-muted);
}

.sp-nav-label {
    padding: 8px 20px;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--sp-sidebar-muted);
    text-transform: uppercase;
}

.sp-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px;
}

.sp-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #cbd5e1;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

    .sp-nav-item:hover {
        background: var(--sp-sidebar-hover);
        color: #fff;
    }

    .sp-nav-item.active {
        background: var(--sp-primary);
        color: #fff;
    }

.sp-nav-icon {
    width: 18px;
    text-align: center;
    font-size: 16px;
}

.sp-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sp-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.sp-sidebar-spacer {
    flex: 1 1 auto;
}

.sp-alert-box {
    display: block;
    margin: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(220, 38, 38, .12);
    border: 1px solid rgba(220, 38, 38, .35);
    color: #fca5a5;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.sp-alert-box:hover {
    background: rgba(220, 38, 38, .2);
    border-color: rgba(220, 38, 38, .55);
}

.sp-alert-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #fecaca;
}

.sp-alert-sub {
    font-size: 12px;
    margin-top: 2px;
    color: #f87171;
}

/* ----- Main column -------------------------------------------------------- */
.sp-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sp-topbar {
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sp-topbar-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.sp-topbar-sub {
    color: var(--sp-text-muted);
    font-size: 13px;
}

.sp-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Owner top bar: coverage-gap alerts replace the task stat tiles. */
.sp-gap-alerts {
    display: grid;
    gap: 6px;
    max-width: 34rem;
}

.sp-gap-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: #b91c1c;
}

.sp-gap-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sp-gap {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: .74rem;
    font-weight: 600;
    text-decoration: none;
}

.sp-gap.critical {
    background: #fee2e2;
    border-color: #f87171;
}

.sp-gap.more {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}

.sp-gap:hover {
    filter: brightness(.97);
}

.sp-gap-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.sp-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 84px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .05s;
}

.sp-stat:hover {
    border-color: var(--sp-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.sp-stat:active {
    transform: translateY(1px);
}

.sp-stat-icon {
    font-size: 15px;
    color: var(--sp-text-muted);
}

.sp-stat-num {
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}

.sp-stat-label {
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-stat.is-pending .sp-stat-icon { color: var(--sp-pending); }
.sp-stat.is-done .sp-stat-icon { color: var(--sp-done); }
.sp-stat.is-overdue {
    border-color: #fecaca;
    background: #fef2f2;
}
.sp-stat.is-overdue .sp-stat-icon,
.sp-stat.is-overdue .sp-stat-num { color: var(--sp-overdue); }

.sp-stat.is-understaffed {
    border-color: #fecaca;
    background: #fef2f2;
}
.sp-stat.is-understaffed .sp-stat-icon,
.sp-stat.is-understaffed .sp-stat-num,
.sp-stat.is-understaffed .sp-stat-label { color: var(--sp-overdue); }

.sp-content {
    padding: 24px;
    flex: 1 1 auto;
}

/* ----- Period header ------------------------------------------------------ */
.sp-period {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.sp-period-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.sp-period-sub {
    color: var(--sp-text-muted);
    font-size: 13px;
}

.sp-period-nav {
    display: flex;
    gap: 8px;
}

/* Shifts / Tasks view toggle on the Non-Operations calendar header */
.sp-view-toggle {
    display: inline-flex;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.sp-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .sp-toggle-btn:hover {
        color: var(--sp-text);
    }

    .sp-toggle-btn.active {
        background: var(--sp-primary);
        color: #fff;
    }

.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .sp-btn:hover {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    .sp-btn.primary {
        background: var(--sp-primary);
        border-color: var(--sp-primary);
        color: #fff;
    }

        .sp-btn.primary:hover {
            background: #1d4ed8;
        }

    .sp-btn.success {
        background: #16a34a;
        border-color: #16a34a;
        color: #fff;
    }

        .sp-btn.success:hover {
            background: #15803d;
            border-color: #15803d;
        }

    .sp-btn.warn {
        background: #b45309;
        border-color: #b45309;
        color: #fff;
    }

        .sp-btn.warn:hover {
            background: #92400e;
            border-color: #92400e;
        }

    .sp-btn.danger {
        background: var(--sp-surface);
        border-color: var(--sp-overdue);
        color: var(--sp-overdue);
    }

        .sp-btn.danger:hover {
            background: #fef2f2;
            border-color: var(--sp-overdue);
        }

/* ----- Finalized schedule banner & time-off policy note ------------------- */
.sp-finalized-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 4px;
    padding: 12px 16px;
    border: 1px solid #fcd34d;
    border-left: 4px solid #d97706;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
}

    .sp-finalized-banner .bi {
        font-size: 20px;
        color: #d97706;
    }

    .sp-finalized-banner strong {
        display: block;
        font-size: 14px;
    }

    .sp-finalized-banner span {
        font-size: 13px;
        color: #b45309;
    }

.sp-policy-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    background: var(--sp-primary-soft);
    color: var(--sp-text-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

    .sp-policy-note .bi {
        color: var(--sp-primary);
        margin-top: 1px;
    }

/* ----- Calendar tabs (Job / Office) --------------------------------------- */
.sp-calendar-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--sp-border);
    margin-bottom: 16px;
}

.sp-caltab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

    .sp-caltab:hover {
        color: var(--sp-text);
    }

    .sp-caltab.active {
        color: var(--sp-primary);
        border-bottom-color: var(--sp-primary);
    }

.sp-period-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--sp-text-muted);
    margin-bottom: 2px;
}

/* ----- Job calendar cell -------------------------------------------------- */
.sp-jobcell {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sp-jobcell-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sp-text-muted);
}

    .sp-jobcell-line i {
        color: var(--sp-text-muted);
        font-size: 12px;
    }

.sp-jobcell-num {
    font-weight: 700;
    color: var(--sp-text);
}

.sp-jobcell.is-empty .sp-jobcell-line {
    opacity: .55;
}

.sp-jobcell-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.sp-jobcell-bar {
    flex: 1;
    height: 6px;
    background: var(--sp-border);
    border-radius: 999px;
    overflow: hidden;
}

    .sp-jobcell-bar > span {
        display: block;
        height: 100%;
        background: var(--sp-primary);
        border-radius: 999px;
        transition: width .2s ease;
    }

.sp-jobcell-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--sp-text-muted);
    min-width: 32px;
    text-align: right;
}

/* Add link in a drawer section title */
.sp-drawer-section-add {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .sp-drawer-section-add:hover {
        text-decoration: underline;
    }

/* ----- Calendar ----------------------------------------------------------- */
.sp-weekrow-label {
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--sp-text-muted);
    font-weight: 600;
    margin: 14px 0 8px;
    text-transform: uppercase;
}

.sp-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    padding: 0 2px 6px;
}

.sp-dow span {
    text-align: center;
    color: var(--sp-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.sp-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin-bottom: 6px;
}

.sp-day {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 12px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .sp-day.is-empty {
        background: #fafafa;
    }

    /* Blue highlight only appears on hover or while the day's drawer is open. */
    .sp-day:hover,
    .sp-day.is-selected {
        border-color: var(--sp-primary);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, .25);
    }

    /* "Today" stays subtly marked without a permanent blue ring. */
    .sp-day.is-today .sp-day-num {
        text-decoration: underline;
        text-decoration-color: var(--sp-text-muted);
        text-underline-offset: 3px;
    }

.sp-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.sp-day-dow {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-day-num {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.sp-day-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.sp-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

    .sp-badge.due {
        background: #fff7ed;
        color: var(--sp-pending);
    }

    .sp-badge.assigned {
        background: var(--sp-primary-soft);
        color: var(--sp-primary);
    }

/* Shared / copy indicator (_TaskSharingBadge). Two distinct colours because
   the difference between "we all work this one row" and "you have your own
   duplicate" changes what completing it means. */
.sp-badge.sp-share {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .sp-badge.sp-share.shared {
        background: #eef2ff;
        color: #4338ca;
    }

    .sp-badge.sp-share.copy {
        background: #f0fdf4;
        color: #15803d;
    }

/* Shift chip inside a day */
.sp-shift {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.3;
}

.sp-shift-name {
    font-weight: 700;
}

.sp-shift-time {
    font-weight: 500;
    opacity: .8;
    margin-left: 4px;
}

.sp-shift-staff {
    margin-top: 2px;
    color: var(--sp-text-muted);
    font-size: 11px;
}

.sp-shift-staff.unassigned {
    font-style: italic;
}

.sp-shift.theme-day {
    background: var(--sp-day-bg);
    border-color: var(--sp-day-border);
}
.sp-shift.theme-day .sp-shift-name { color: var(--sp-day-text); }

.sp-shift.theme-evening {
    background: var(--sp-evening-bg);
    border-color: var(--sp-evening-border);
}
.sp-shift.theme-evening .sp-shift-name { color: var(--sp-evening-text); }

.sp-shift.theme-night {
    background: var(--sp-night-bg);
    border-color: var(--sp-night-border);
}
.sp-shift.theme-night .sp-shift-name { color: var(--sp-night-text); }

.sp-shift.theme-weekend {
    background: var(--sp-weekend-bg);
    border-color: var(--sp-weekend-border);
}
.sp-shift.theme-weekend .sp-shift-name { color: var(--sp-weekend-text); }

/* Legend */
.sp-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
    font-size: 13px;
}

.sp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sp-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.sp-dot.theme-day { background: var(--sp-day-dot); }
.sp-dot.theme-evening { background: var(--sp-evening-dot); }
.sp-dot.theme-night { background: var(--sp-night-dot); }
.sp-dot.theme-weekend { background: var(--sp-weekend-dot); }

/* ----- Generic cards / tables (other pages) ------------------------------- */
.sp-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 18px;
}

.sp-grid {
    display: grid;
    gap: 16px;
}

.sp-grid.cols-3 {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.sp-grid.cols-2 {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.sp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    overflow: hidden;
}

.sp-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sp-text-muted);
    background: #f9fafb;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sp-border);
    vertical-align: middle;
}

.sp-table tr:last-child td {
    border-bottom: none;
}

.sp-table tbody tr:hover {
    background: #f9fafb;
}

.sp-admin-table-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 16px;
}

.sp-admin-table-scroll-top #admin-tasks-scroll-top-spacer {
    height: 1px;
}

.sp-admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
}

.sp-admin-table-readonly {
    border: none;
    border-radius: 0;
    font-size: 13px;
}

.sp-admin-table-readonly th {
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.sp-admin-table-readonly td {
    padding: 8px 16px;
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-admin-row-clickable {
    cursor: pointer;
}

.sp-admin-row-clickable:hover {
    background: #eef2ff;
}

.sp-admin-mode-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sp-btn.active {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4338ca;
}

.sp-admin-table tbody tr.sp-admin-row[data-editable="1"] {
    cursor: pointer;
}

.sp-admin-table tbody tr.sp-admin-row[data-editable="1"]:hover {
    background: #eef2ff;
}

.sp-admin-table-readonly thead th.sp-sortable {
    cursor: pointer;
    user-select: none;
}

.sp-admin-table-readonly thead th.sp-sortable:hover {
    background: #eef2ff;
}

.sp-admin-table-readonly thead th.sp-sort-asc::after {
    content: " \25B2";
    font-size: 11px;
}

.sp-admin-table-readonly thead th.sp-sort-desc::after {
    content: " \25BC";
    font-size: 11px;
}

/* Batch selection ("Edit all") controls in the admin spreadsheet toolbar. */
.sp-batch-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

.sp-batch-col {
    width: 36px;
    text-align: center;
    display: none;
}

.sp-admin-table-batchmode .sp-batch-col {
    display: table-cell;
}

.sp-admin-table tbody tr.sp-admin-row .sp-batch-col {
    cursor: default;
}

/* The employees table must not clip the row "Actions" dropdown, so it overrides
   the default overflow:hidden. Corner rounding is reapplied to the edge cells so
   the rounded-card look is preserved. */
.sp-employees-table {
    overflow: visible;
}

    .sp-employees-table th:first-child {
        border-top-left-radius: 12px;
    }

    .sp-employees-table th:last-child {
        border-top-right-radius: 12px;
    }

    .sp-employees-table tr:last-child td:first-child {
        border-bottom-left-radius: 12px;
    }

    .sp-employees-table tr:last-child td:last-child {
        border-bottom-right-radius: 12px;
    }

/* Avatars */
.sp-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    flex: 0 0 auto;
}

.sp-avatar.c0 { background: #6366f1; }
.sp-avatar.c1 { background: #0ea5e9; }
.sp-avatar.c2 { background: #10b981; }
.sp-avatar.c3 { background: #f59e0b; }
.sp-avatar.c4 { background: #ec4899; }
.sp-avatar.c5 { background: #8b5cf6; }

.sp-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-person-name {
    font-weight: 600;
}

.sp-person-role {
    color: var(--sp-text-muted);
    font-size: 12px;
}

.sp-dept-roster {
    margin-top: 6px;
    font-size: 12px;
}

.sp-dept-roster > summary {
    cursor: pointer;
    color: var(--sp-text-muted);
    font-weight: 600;
    list-style: none;
}

.sp-dept-roster > summary::-webkit-details-marker {
    display: none;
}

.sp-dept-roster > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.15s ease;
}

.sp-dept-roster[open] > summary::before {
    transform: rotate(90deg);
}

.sp-dept-roster .sp-person-role {
    padding: 6px 0 2px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Colour-coded completion state for each copy of a separate-copy task. */
.sp-roster-done {
    color: #15803d;
}

.sp-roster-open {
    color: #b45309;
}

/* Pills / status */
.sp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.sp-pill.green { background: #ecfdf5; color: var(--sp-done); }
.sp-pill.amber { background: #fffbeb; color: var(--sp-pending); }
.sp-pill.red { background: #fef2f2; color: var(--sp-overdue); }
.sp-pill.gray { background: #f3f4f6; color: var(--sp-text-muted); }
.sp-pill.blue { background: var(--sp-primary-soft); color: var(--sp-primary); }
.sp-pill.purple {
    background: #efe0ff;
    color: #6b21a8;
    border: 1px solid #e9d5ff;
}

.sp-pill.duplicate {
    background: #e6f6ff;
    color: #0369a1;
    border: 1px solid #bfebff;
}

.sp-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
}

.sp-section-sub {
    color: var(--sp-text-muted);
    font-size: 13px;
    margin: 0 0 16px;
}

.sp-shift-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sp-shift-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
}

.sp-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sp-text-muted);
    font-size: 13px;
    margin-top: 6px;
}

.sp-empty {
    color: var(--sp-text-muted);
    font-style: italic;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .sp-week, .sp-dow {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-dow {
        display: none;
    }
}

@media (max-width: 720px) {
    .sp-sidebar {
        display: none;
    }

    .sp-week, .sp-dow {
        grid-template-columns: 1fr;
    }
}

/* ----- User box (sidebar footer) ----------------------------------------- */
.sp-user-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 12px 14px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(148, 163, 184, .12);
}

.sp-user-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-user-name {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-user-role {
    color: var(--sp-sidebar-muted);
    font-size: 12px;
}

.sp-user-signout {
    color: #cbd5e1;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    flex: 0 0 auto;
}

    .sp-user-signout:hover {
        background: var(--sp-sidebar-hover);
        color: #fff;
    }

/* ----- Toolbar / flash --------------------------------------------------- */
.sp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sp-toolbar-info {
    color: var(--sp-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.sp-filter-clear {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-primary);
    text-decoration: none;
    white-space: nowrap;
}

.sp-filter-clear:hover {
    text-decoration: underline;
}

/* Inside the filter bar, the clear link sits next to full-height select
   fields; align it to their vertical center and give it a matching box
   height so it doesn't look squashed against the bottom of the row. */
.sp-filter-bar .sp-filter-clear {
    align-self: center;
    height: 38px;
    margin-left: 4px;
    padding: 0 4px;
}

/* Prominent "Clear filters" button, positioned directly beside the filter
   selects rather than floating separately, so it reads as part of the same
   control group instead of a disconnected small link. */
.sp-filter-clear-btn {
    align-self: center;
    height: 38px;
    margin-left: 4px;
    white-space: nowrap;
}

/* Read-only date stamp shown instead of the picker for non-privileged users. */
.sp-filter-today {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.sp-flash {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    /* Diagnostic messages can be long; wrap rather than overflow. */
    overflow-wrap: anywhere;
}

    .sp-flash.success {
        background: #ecfdf5;
        color: var(--sp-done);
        border: 1px solid #a7f3d0;
    }

    .sp-flash.error {
        background: #fef2f2;
        color: var(--sp-overdue);
        border: 1px solid #fecaca;
    }

.sp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: var(--sp-text-muted);
    padding: 48px 24px;
}

    .sp-empty-state i {
        font-size: 32px;
        opacity: .5;
    }

    /* Side-by-side actions under an empty state, as in the reference. */
    .sp-empty-state .sp-empty-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Headline line of a two-line empty state, so the "what" reads louder than
       the "how to fix it" sitting under it. */
    .sp-empty-state .sp-empty-title {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--sp-text);
    }

    .sp-empty-state p {
        margin: 0;
    }

/* A read-only value shown in the same slot a field would occupy, so system
   issued data lines up with the inputs around it. */
.sp-field-static {
    padding: 6px 0;
    font-weight: 600;
    color: var(--sp-text);
}

/* Supporting figures that sit beside a field rather than in it, wrapping on
   narrow rails instead of squeezing the control they inform. */
.sp-inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 13px;
    color: var(--sp-text-muted);
}

/* ----- Marketing insight list ------------------------------------------- */
/* Content for screen readers only: removed from the visual flow without being
   hidden from the accessibility tree the way display:none would be. */
.sp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sp-insight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-insight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    background: var(--sp-surface);
}

    /* Keeps the severity pill from being squeezed by a long headline. */
    .sp-insight > .sp-pill {
        flex: 0 0 auto;
        white-space: nowrap;
    }

/* ----- Inline status selector (VA task list) ----------------------------- */
.sp-status-form {
    margin: 0;
}

.sp-status-select {
    width: auto;
    min-width: 120px;
    padding: 4px 8px;
    font-size: .82rem;
}

/* ----- Dropdown (3-dots) menu -------------------------------------------- */
.sp-menu {
    position: relative;
    display: inline-block;
}

.sp-menu-trigger {
    border: none;
    background: transparent;
    color: var(--sp-text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: grid;
    place-items: center;
}

    .sp-menu-trigger:hover {
        background: #f3f4f6;
        color: var(--sp-text);
    }

.sp-menu-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 190px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    padding: 6px;
    z-index: 40;
    display: none;
}

.sp-menu.open .sp-menu-pop {
    display: block;
}

.sp-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--sp-text);
    cursor: pointer;
}

    .sp-menu-item:hover {
        background: #f3f4f6;
    }

    .sp-menu-item:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .sp-menu-item.danger {
        color: var(--sp-overdue);
    }

        .sp-menu-item.danger:hover {
            background: #fef2f2;
        }

.sp-menu-pop form {
    margin: 0;
}

/* ----- Modal ------------------------------------------------------------- */
.sp-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    z-index: 100;
    overflow-y: auto;
}

    .sp-modal.open {
        display: flex;
    }

/* Assign-staff modal opened from within an open day drawer (z-index 1100)
   must stack above it, otherwise the picker renders behind the drawer scrim. */
.sp-modal.sp-modal-over-drawer {
    z-index: 1200;
}

body.sp-modal-open {
    overflow: hidden;
}

.sp-modal-card {
    background: var(--sp-surface);
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    padding: 22px;
}

.sp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .sp-modal-head h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
    }

.sp-modal-close {
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--sp-text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

    .sp-modal-close:hover {
        background: #f3f4f6;
        color: var(--sp-text);
    }

.sp-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.sp-modal-card-lg {
    max-width: 860px;
}

.sp-field-group {
    margin-top: 16px;
}

.sp-field-group > .sp-field-label {
    display: block;
    margin-bottom: 8px;
}

.sp-modal-actions-split {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.sp-modal-actions-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.sp-check-inline {
    margin: 0;
}

/* ----- Forms ------------------------------------------------------------- */
.sp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

/* Two fields sitting side by side, e.g. a shift's start and end time. */
.sp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .sp-field-row {
        grid-template-columns: 1fr;
    }
}

.sp-addr-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
    grid-column: 1 / -1;
}

.sp-addr-grid .sp-field {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .sp-addr-grid {
        grid-template-columns: 1fr;
    }
}

.sp-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
}

.sp-field-checkboxes .sp-checkbox-row {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 38px;
}

.sp-checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-text);
    cursor: pointer;
    margin: 0;
}

.sp-checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sp-input {
    width: 100%;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    color: var(--sp-text);
    background: #fff;
}

    .sp-input:focus {
        outline: none;
        border-color: var(--sp-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    }

textarea.sp-input {
    resize: vertical;
}

.sp-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sp-text);
    margin: 4px 0 2px;
}

/* ----- Calendar task chips ----------------------------------------------- */
.sp-day-tasks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px dashed var(--sp-border);
}

.sp-task-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 7px;
    border-radius: 6px;
    line-height: 1.2;
}

.sp-task-chip-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-task-chip-who {
    flex: 0 0 auto;
    opacity: .75;
    font-weight: 500;
}

.sp-task-chip.green { background: #ecfdf5; color: var(--sp-done); }
.sp-task-chip.amber { background: #fffbeb; color: var(--sp-pending); }
.sp-task-chip.red { background: #fef2f2; color: var(--sp-overdue); }

.sp-task-chip-check {
    flex: 0 0 auto;
    font-weight: 600;
    opacity: .85;
}

.sp-task-urgent {
    color: var(--sp-overdue);
}

/* ----- Task metadata, filters & checklist -------------------------------- */
.sp-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.sp-field-inline {
    min-width: 160px;
}

.sp-inline-filter {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.sp-task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.sp-checklist {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-checklist-item {
    font-size: 12px;
    color: var(--sp-text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-checklist-item.done .sp-checklist-text-btn span,
.sp-checklist-item.done > span {
    color: var(--sp-text-muted);
    text-decoration: line-through;
}

.sp-checklist-form {
    margin: 0;
    display: inline-flex;
}

.sp-checklist-toggle {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 2px;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.sp-checklist-toggle:hover {
    color: var(--sp-primary);
}

.sp-checklist-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 2px 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.sp-checklist-text-btn:hover {
    color: var(--sp-primary);
    text-decoration: underline;
}

.sp-checklist-details-icon {
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-checklist-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    background: none;
    border: none;
    padding: 2px 0;
    font-size: 12px;
    color: var(--sp-text-muted);
    cursor: pointer;
}

.sp-checklist-add-btn:hover {
    color: var(--sp-primary);
}

.sp-drawer-checklist {
    margin-top: 6px;
}

/* ----- Login ------------------------------------------------------------- */
.sp-login-bg {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #2563eb 140%);
}

.sp-login-card {
    width: 100%;
    max-width: 400px;
    background: var(--sp-surface);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    padding: 30px 28px;
}

.sp-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.sp-login-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
}

.sp-login-sub {
    color: var(--sp-text-muted);
    font-size: 13px;
    margin: 0 0 20px;
}

.sp-login-submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

.sp-login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    color: var(--sp-overdue);
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.sp-login-hint {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 560px) {
    .sp-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ----- Profile + Availability ------------------------------------------- */
.sp-profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.sp-availability-wrap {
    overflow-x: auto;
}

table.sp-availability {
    min-width: 640px;
}

    table.sp-availability th.center,
    table.sp-availability td.center {
        text-align: center;
    }

    table.sp-availability td {
        vertical-align: middle;
    }

.sp-avail-day {
    font-weight: 700;
    color: var(--sp-text);
    white-space: nowrap;
}

/* Time input with trailing clock icon */
.sp-time-input {
    position: relative;
    max-width: 170px;
}

    .sp-time-input .sp-input {
        padding-right: 34px;
    }

    .sp-time-input i {
        position: absolute;
        right: 11px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--sp-text-muted);
        pointer-events: none;
        font-size: 15px;
    }

/* Pill toggle that reads Yes / No / Off (image-style) */
.sp-switch {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
}

.sp-switch-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sp-switch-pill {
    position: relative;
    width: 58px;
    height: 28px;
    border-radius: 999px;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    transition: background .15s ease, border-color .15s ease;
    display: inline-block;
}

    /* knob */
    .sp-switch-pill::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
        transition: transform .15s ease;
    }

    /* label text (defaults to the OFF text) */
    .sp-switch-pill::after {
        content: attr(data-off);
        position: absolute;
        top: 0;
        right: 8px;
        line-height: 26px;
        font-size: 11px;
        font-weight: 700;
        color: var(--sp-text-muted);
    }

/* checked state */
.sp-switch-cb:checked ~ .sp-switch-pill {
    background: #dbeafe;
    border-color: var(--sp-primary);
}

    .sp-switch-cb:checked ~ .sp-switch-pill::before {
        transform: translateX(30px);
    }

    .sp-switch-cb:checked ~ .sp-switch-pill::after {
        content: attr(data-on);
        right: auto;
        left: 9px;
        color: var(--sp-primary);
    }

/* "Active" column uses green when on */
.sp-switch-cb:checked ~ .sp-switch-pill.is-active {
    background: #dcfce7;
    border-color: var(--sp-done);
}

    .sp-switch-cb:checked ~ .sp-switch-pill.is-active::after {
        color: var(--sp-done);
    }

.sp-switch-cb:focus-visible ~ .sp-switch-pill {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}

/* Block-out list */
.sp-blockout-list {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sp-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-blockout-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-blockout-reason {
    color: var(--sp-text-muted);
    font-size: 13px;
}

.sp-blockout-remove {
    margin: 0 0 0 auto;
}

/* ---- Manager time-off review queue ---- */
.sp-request-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.sp-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    background: var(--sp-surface);
}

.sp-request-who {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 260px;
}

.sp-request-name {
    font-weight: 600;
    color: var(--sp-text);
}

.sp-request-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.sp-request-days {
    color: var(--sp-text-muted);
    font-size: 12px;
}

.sp-request-reason {
    color: var(--sp-text-muted);
    font-size: 13px;
    margin-top: 4px;
}

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

.sp-note-input {
    max-width: 200px;
}

.sp-icon-btn {
    border: none;
    background: transparent;
    color: var(--sp-text-muted);
    width: 30px;
    height: 30px;
    border-radius: 7px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

    .sp-icon-btn:hover {
        background: #f3f4f6;
        color: var(--sp-text);
    }

    .sp-icon-btn.danger:hover {
        background: #fef2f2;
        color: var(--sp-overdue);
    }

/* ===========================================================================
   Role-filter tabs (Employees)
   =========================================================================== */
.sp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.sp-tab {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
}

    .sp-tab:hover {
        border-color: var(--sp-primary);
        color: var(--sp-primary);
    }

    .sp-tab.active {
        background: var(--sp-sidebar);
        border-color: var(--sp-sidebar);
        color: #fff;
    }

/* ===========================================================================
   Role badges (Employees)
   =========================================================================== */
.sp-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.sp-role-badge.role-admin       { background: #fef2f2; color: #b91c1c; }
.sp-role-badge.role-manager     { background: #f5f3ff; color: #7c3aed; }
.sp-role-badge.role-supervisor  { background: #eff6ff; color: #2563eb; }
.sp-role-badge.role-technician  { background: #ecfeff; color: #0891b2; }
.sp-role-badge.role-operator    { background: #ecfdf5; color: #059669; }
.sp-role-badge.role-maintenance { background: #fff7ed; color: #ea580c; }
.sp-role-badge.role-security    { background: #fef2f2; color: #dc2626; }
.sp-role-badge.role-va          { background: #f0f9ff; color: #0369a1; }
.sp-role-badge.role-default     { background: #f3f4f6; color: var(--sp-text-muted); }

/* ===========================================================================
   Shift day pills / picker (Shift Definitions)
   =========================================================================== */
.sp-shift-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 10px 0;
}

.sp-day-chip {
    min-width: 30px;
    text-align: center;
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid var(--sp-border);
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    background: var(--sp-surface);
}

    .sp-day-chip.on {
        background: var(--sp-primary-soft);
        border-color: var(--sp-primary);
        color: var(--sp-primary);
    }

.sp-shift-day-crews {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

    .sp-shift-day-crews[hidden] {
        display: none;
    }

.sp-shift-crew-collapse {
    margin-top: 8px;
}

.sp-shift-crew-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    background: var(--sp-surface);
    color: var(--sp-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease, border-color .12s ease;
}

    .sp-shift-crew-toggle:hover {
        border-color: var(--sp-primary);
    }

.sp-shift-crew-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-muted);
}

.sp-shift-crew-days {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sp-shift-crew-day-pill {
    display: inline-flex;
    align-items: center;
    min-width: 26px;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--sp-primary-soft, rgba(37, 99, 235, 0.12));
    color: var(--sp-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

    .sp-shift-crew-day-pill.empty {
        background: var(--sp-surface-alt, rgba(148, 163, 184, 0.16));
        color: var(--sp-text-muted);
    }

.sp-shift-crew-chevron {
    transition: transform .15s ease;
    color: var(--sp-text-muted);
}

.sp-shift-crew-toggle.collapsed .sp-shift-crew-chevron {
    transform: rotate(-90deg);
}

.sp-shift-day-crew {
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 10px;
    background: var(--sp-surface);
}

    .sp-shift-day-crew.is-clickable {
        cursor: pointer;
        transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
    }

        .sp-shift-day-crew.is-clickable:hover,
        .sp-shift-day-crew.is-clickable:focus-visible {
            border-color: var(--sp-primary);
            box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
            outline: none;
        }

.sp-shift-day-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-primary);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .1);
}

.sp-shift-day-crew-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sp-shift-day-name {
    font-weight: 700;
    font-size: 12px;
    color: var(--sp-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-shift-day-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
}

    .sp-shift-day-count.under {
        color: var(--sp-overdue);
    }

.sp-day-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sp-day-toggle {
    position: relative;
    cursor: pointer;
}

    .sp-day-toggle input {
        position: absolute;
        opacity: 0;
        inset: 0;
        cursor: pointer;
    }

    .sp-day-toggle span {
        display: inline-block;
        min-width: 42px;
        text-align: center;
        padding: 7px 10px;
        border-radius: 8px;
        border: 1px solid var(--sp-border);
        font-size: 13px;
        font-weight: 600;
        color: var(--sp-text-muted);
        background: var(--sp-surface);
        transition: all .12s ease;
    }

    .sp-day-toggle input:checked + span {
        background: var(--sp-primary);
        border-color: var(--sp-primary);
        color: #fff;
    }

/* ===========================================================================
   Staff chips + assignment rows (Shifts & calendar drawer)
   =========================================================================== */
.sp-avatar.xs {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.sp-shift-staff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px;
}

.sp-staff-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 3px;
    border-radius: 999px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    font-size: 12px;
}

.sp-staff-chip-name {
    font-weight: 600;
    color: var(--sp-text);
}

.sp-staff-chip-role {
    color: var(--sp-text-muted);
    font-size: 11px;
}

.sp-staff-chip-x {
    display: inline-flex;
    margin: 0;
}

    .sp-staff-chip-x button {
        border: 0;
        background: transparent;
        color: var(--sp-text-muted);
        cursor: pointer;
        padding: 0 2px;
        line-height: 1;
        display: inline-grid;
        place-items: center;
    }

    .sp-staff-chip-x button:hover {
        color: var(--sp-overdue);
    }

.sp-assign-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

    .sp-assign-row .sp-input {
        flex: 1 1 auto;
    }

/* Availability-gated "Assign staff" control on shift cards */
.sp-shift-assign-btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

/* Drawer shift: "Assign staff" + "Assign hours" share one row */
.sp-drawer-shift-actions {
    display: flex;
    gap: 8px;
}

    .sp-drawer-shift-actions .sp-shift-assign-btn {
        flex: 1 1 0;
        min-width: 0;
    }

.sp-assign-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sp-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.sp-assign-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 300px;
    overflow-y: auto;
    margin: 4px 0 6px;
}

    .sp-assign-list .sp-assign-row {
        margin-top: 0;
        padding: 6px 8px;
        border-radius: 8px;
        cursor: pointer;
        transition: background .12s ease;
    }

        .sp-assign-list .sp-assign-row:hover {
            background: var(--sp-surface-alt, rgba(127, 127, 127, .08));
        }

.sp-assign-name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
}

/* Assign staff: selected chips */
.sp-assign-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
}

.sp-assign-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 4px;
    border-radius: 999px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    font-size: 12px;
}

.sp-assign-chip-name {
    font-weight: 600;
    color: var(--sp-text);
    padding-left: 2px;
}

.sp-assign-chip-hours {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 4px;
}

    .sp-assign-chip-hours .sp-input {
        min-width: 78px;
    }

.sp-assign-none {
    margin: 4px 0 8px;
}

/* Assign staff: search box + results */
.sp-assign-search {
    position: relative;
    display: flex;
    align-items: center;
}

    .sp-assign-search .bi-search {
        position: absolute;
        left: 10px;
        color: var(--sp-text-muted);
        font-size: 13px;
        pointer-events: none;
    }

    .sp-assign-search .sp-input {
        width: 100%;
        padding-left: 30px;
    }

.sp-assign-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
    margin: 6px 0;
}

.sp-assign-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}

    .sp-assign-option:hover {
        background: var(--sp-surface-alt, rgba(127, 127, 127, .08));
    }

.sp-assign-add-icon {
    color: var(--sp-text-muted);
    font-size: 14px;
}

/* Availability hint icon + inline availability shown in assign-staff pickers */
.sp-assign-avail-icon {
    color: var(--sp-text-muted);
    font-size: 12px;
    margin-left: 4px;
    cursor: help;
}

.sp-assign-avail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--sp-text-muted);
    cursor: help;
}

.sp-assign-conflict {
    color: var(--sp-danger, #c0392b);
    font-weight: 600;
}

.sp-btn.sm {
    padding: 6px 12px;
    font-size: 13px;
}

.sp-inline-form {
    display: inline;
    margin: 0;
}

/* Worked-hours chip + per-day inline assign (Shifts) */
.sp-staff-chip-hours {
    color: var(--sp-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.sp-chip-x-form {
    display: inline-flex;
    margin: 0;
}

.sp-chip-x {
    border: 0;
    background: transparent;
    color: var(--sp-text-muted);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
}

    .sp-chip-x:hover {
        color: var(--sp-overdue);
    }

/* Inline "set specific hours" button on a crew chip */
.sp-chip-edit {
    border: 0;
    background: transparent;
    color: var(--sp-text-muted);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
}

    .sp-chip-edit:hover {
        color: var(--sp-primary);
    }

/* From / To selects in the per-day hours picker */
.sp-hours-row {
    display: flex;
    gap: 12px;
    margin: 8px 0 4px;
}

    .sp-hours-row .sp-field {
        flex: 1;
    }

/* Right-aligned count + "assign hours" control in the Staff-by-day header */
.sp-shift-day-crew-head-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Per-day "assign hours" popup: one row per staff member with a From–To range */
.sp-dayhours-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 4px;
    max-height: 320px;
    overflow-y: auto;
}

.sp-dayhours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.sp-dayhours-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .sp-dayhours-range .sp-input {
        min-width: 92px;
    }

.sp-dayhours-dash {
    color: var(--sp-text-muted);
}

.sp-dayhours-avail {
    font-size: 11px;
    color: var(--sp-text-muted);
    white-space: nowrap;
}

.sp-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fffbeb;
    color: var(--sp-pending);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.sp-assign-inline {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

    .sp-assign-inline .sp-input {
        flex: 1 1 auto;
    }

.sp-input.sm {
    padding: 6px 9px;
    font-size: 13px;
}

.sp-empty.sm {
    font-size: 12px;
}

/* Checkbox row (Shifts modal: visible on schedule) */
.sp-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sp-text);
    margin: 4px 0 14px;
    cursor: pointer;
}

    .sp-check-row input {
        width: 16px;
        height: 16px;
    }

/* Staffing-minimums modal */
.sp-modal-hint {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: 0 0 14px;
    line-height: 1.5;
}

.sp-staffing-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.sp-staffing-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sp-staffing-row .sp-input {
        flex: 1 1 auto;
    }

.sp-staffing-dash {
    color: var(--sp-text-muted);
    flex: 0 0 12px;
    width: 12px;
    text-align: center;
}

.sp-staffing-min {
    flex: 0 0 70px;
    width: 70px;
}

.sp-staffing-day {
    flex: 0 0 84px;
    width: 84px;
}

.sp-staffing-row .sp-staffing-dept {
    flex: 0 0 140px;
    width: 140px;
}

.sp-staffing-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 0 2px;
}

    .sp-staffing-head span {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--sp-text-muted);
    }

    .sp-staffing-head .sp-staffing-dept {
        flex: 0 0 140px;
        width: 140px;
    }

    .sp-staffing-head .sp-staffing-col {
        flex: 1 1 auto;
    }

    .sp-staffing-head .sp-staffing-spacer {
        flex: 0 0 24px;
        width: 24px;
    }

.sp-link-btn {
    border: 0;
    background: transparent;
    color: var(--sp-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 4px;
}

    .sp-link-btn.danger {
        color: var(--sp-overdue);
    }

    .sp-link-btn:hover {
        text-decoration: underline;
    }

/* ===========================================================================
   Day detail drawer (Schedule Calendar)
   =========================================================================== */
.sp-drawer {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: none;
    z-index: 1100;
}

    .sp-drawer.open {
        display: block;
    }

/* Slide-in editor drawer used by the Tasks board and Office Calendar.
   The scrim is the full-screen backdrop; the inner .sp-drawer is the panel
   that slides in from the right. Scoped with the child combinator so the
   standalone .sp-drawer used by the schedule day drawers is untouched. */
.sp-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: none;
    justify-content: flex-end;
    z-index: 1100;
}

    .sp-drawer-scrim.open {
        display: flex;
    }

    .sp-drawer-scrim > .sp-drawer {
        position: relative;
        inset: auto;
        background: var(--sp-surface);
        height: 100%;
        width: min(460px, 100%);
        box-shadow: -8px 0 24px rgba(15, 23, 42, .18);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 20px 22px 28px;
        animation: sp-drawer-in .18s ease;
    }

    .sp-drawer-scrim > .sp-drawer.sp-drawer-sm {
        width: min(360px, 100%);
    }

    .sp-drawer-scrim > .sp-drawer.sp-drawer-lg {
        width: min(900px, 100%);
    }

.sp-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(440px, 100%);
    background: var(--sp-surface);
    box-shadow: -8px 0 24px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    animation: sp-drawer-in .18s ease;
}

@keyframes sp-drawer-in {
    from { transform: translateX(24px); opacity: .6; }
    to   { transform: translateX(0); opacity: 1; }
}

.sp-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-drawer-title {
    margin: 0;
    font-size: 17px;
    color: var(--sp-text);
}

.sp-drawer-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sp-close-day-btn {
    white-space: nowrap;
}

.sp-drawer-sub {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin-top: 2px;
}

.sp-drawer-body {
    padding: 16px 20px 24px;
    overflow-y: auto;
}

.sp-drawer-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--sp-text-muted);
    margin: 18px 0 10px;
}

    .sp-drawer-section-title:first-child {
        margin-top: 0;
    }

.sp-drawer-shift {
    border: 1px solid var(--sp-border);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.sp-drawer-shift.theme-day     { border-left-color: var(--sp-day-dot);     background: var(--sp-day-bg); }
.sp-drawer-shift.theme-evening { border-left-color: var(--sp-evening-dot); background: var(--sp-evening-bg); }
.sp-drawer-shift.theme-night   { border-left-color: var(--sp-night-dot);   background: var(--sp-night-bg); }
.sp-drawer-shift.theme-weekend { border-left-color: var(--sp-weekend-dot); background: var(--sp-weekend-bg); }

.sp-drawer-shift-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

    .sp-drawer-shift-head .sp-shift-name {
        font-weight: 700;
        font-size: 13px;
    }

    .sp-drawer-shift-head .sp-shift-time {
        font-size: 12px;
        color: var(--sp-text-muted);
    }

.sp-drawer-shift-staffing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    margin-bottom: 8px;
}

    .sp-drawer-shift-staffing.under {
        color: var(--sp-overdue);
    }

.sp-drawer-staff {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- Day-drawer task list (Non-Operations Calendar "Tasks due" view) ---- */
.sp-drawer-tasklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-drawer-task {
    border: 1px solid var(--sp-border);
    border-left-width: 4px;
    border-left-color: var(--sp-evening-dot);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--sp-evening-bg);
}

    .sp-drawer-task.is-done {
        border-left-color: var(--sp-day-dot);
        background: var(--sp-day-bg);
    }

.sp-drawer-task-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.sp-drawer-task-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--sp-text);
    text-decoration: none;
}

    .sp-drawer-task-title:hover {
        text-decoration: underline;
    }

.sp-drawer-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.sp-drawer-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    padding: 3px 9px;
}

    .sp-drawer-task-chip.sp-empty-chip {
        opacity: .75;
        font-style: italic;
    }

.sp-drawer-task-status {
    margin-bottom: 10px;
}

    .sp-drawer-task-status .sp-status-select {
        width: 100%;
    }

.sp-drawer-checklist {
    margin: 0;
    padding-top: 8px;
    border-top: 1px dashed var(--sp-border);
}

.sp-understaff-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.sp-understaff-row {
    display: flex;
    align-items: center;

    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--sp-overdue);
    border-radius: 8px;
    background: rgba(220, 38, 38, .06);
    font-size: 12px;
}

.sp-understaff-time {
    font-weight: 600;
    color: var(--sp-text);
    font-variant-numeric: tabular-nums;
}

.sp-understaff-dept {
    font-weight: 700;
    color: var(--sp-text);
    margin-right: auto;
}

.sp-understaff-count {
    font-weight: 700;
    color: var(--sp-overdue);
    font-variant-numeric: tabular-nums;
}

.sp-drawer-task {
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.sp-drawer-task-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--sp-text);
}

.sp-drawer-task-desc {
    font-size: 12px;
    color: var(--sp-text-muted);
    margin-top: 2px;
}

.sp-drawer-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.sp-drawer-task-assignee {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===========================================================================
   Employee edit/add drawer (Personal & Work Info / Job Description / Availability)
   =========================================================================== */
.sp-emp-drawer-panel {
    width: min(560px, 100%);
    padding: 0;
}

.sp-emp-drawer-head {
    background: var(--sp-sidebar);
    color: #fff;
    border-bottom: 0;
}

    .sp-emp-drawer-head .sp-drawer-title {
        color: #fff;
    }

    .sp-emp-drawer-head .sp-drawer-sub {
        color: #cbd5e1;
    }

    .sp-emp-drawer-head .sp-modal-close {
        color: #cbd5e1;
    }

        .sp-emp-drawer-head .sp-modal-close:hover {
            background: rgba(255, 255, 255, .12);
            color: #fff;
        }

.sp-emp-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid var(--sp-border);
    background: var(--sp-surface);
}

.sp-emp-tab {
    border: 0;
    background: transparent;
    padding: 14px 6px;
    margin-right: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

    .sp-emp-tab:hover {
        color: var(--sp-text);
    }

    .sp-emp-tab.active {
        color: var(--sp-primary);
        border-bottom-color: var(--sp-primary);
    }

.sp-emp-drawer-body {
    flex: 1 1 auto;
}

.sp-emp-pane {
    display: none;
}

    .sp-emp-pane.active {
        display: block;
    }

.sp-emp-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sp-text-muted);
    margin: 4px 0 14px;
}

    .sp-emp-pane .sp-emp-section-title:not(:first-child) {
        margin-top: 22px;
    }

.sp-emp-hint {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: -6px 0 16px;
}

.sp-emp-drawer-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--sp-border);
    background: var(--sp-surface);
}

/* ----- Employee mini-dashboard ------------------------------------------ */
.sp-mini-dash {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.sp-mini-dash-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.sp-mini-id {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

    .sp-mini-id .sp-avatar {
        width: 46px;
        height: 46px;
        font-size: 16px;
        flex: 0 0 auto;
    }

.sp-mini-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--sp-text);
}

.sp-mini-username {
    font-size: 13px;
    color: var(--sp-text-muted);
}

.sp-mini-id-text .sp-role-badge {
    margin-top: 4px;
}

.sp-mini-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 18px;
}

.sp-mini-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sp-text);
}

    .sp-mini-fact i {
        color: var(--sp-text-muted);
        width: 16px;
        text-align: center;
    }

.sp-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.sp-mini-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    background: var(--sp-bg);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .05s;
}

    .sp-mini-stat:hover {
        border-color: var(--sp-primary);
        box-shadow: 0 1px 3px rgba(37, 99, 235, .15);
    }

    .sp-mini-stat:active {
        transform: translateY(1px);
    }

.sp-mini-stat-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--sp-text);
}

.sp-mini-stat-label {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-mini-stat.is-pending .sp-mini-stat-num {
    color: var(--sp-pending);
}

.sp-mini-stat.is-done .sp-mini-stat-num {
    color: var(--sp-done);
}

.sp-mini-stat.is-overdue.has-overdue {
    border-color: var(--sp-overdue);
    background: rgba(220, 38, 38, .06);
}

    .sp-mini-stat.is-overdue.has-overdue .sp-mini-stat-num {
        color: var(--sp-overdue);
    }

.sp-mini-foot {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    border-top: 1px solid var(--sp-border);
    padding-top: 12px;
}

.sp-mini-block-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--sp-text-muted);
    margin-bottom: 6px;
}

.sp-mini-avail {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.sp-mini-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    background: var(--sp-bg);
    color: var(--sp-text-muted);
}

    .sp-mini-day.is-on {
        background: var(--sp-primary-soft);
        border-color: #bfdbfe;
        color: var(--sp-primary);
    }

.sp-mini-day-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.sp-mini-day-hrs {
    font-size: 10px;
    white-space: nowrap;
}

.sp-mini-shifts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}

.sp-mini-empty {
    font-size: 13px;
    color: var(--sp-text-muted);
    font-style: italic;
}

.sp-mini-tabs {
    display: flex;
    gap: 4px;
    margin: 4px 0 14px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-mini-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
}

    .sp-mini-tab:hover {
        color: var(--sp-text);
    }

    .sp-mini-tab.is-active {
        color: var(--sp-primary);
        border-bottom-color: var(--sp-primary);
    }

.sp-mini-history {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.sp-mini-history-day {
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--sp-surface);
}

.sp-mini-history-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}

.sp-mini-history-total {
    color: var(--sp-primary);
    font-size: 12px;
}

.sp-mini-history-shift {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    color: var(--sp-text-muted);
    padding: 2px 0;
}

.sp-mini-history-name {
    flex: 1;
    color: var(--sp-text);
}

.sp-mini-history-range {
    flex: 0 0 auto;
}

.sp-mini-history-hrs {
    flex: 0 0 auto;
    min-width: 46px;
    text-align: right;
}

/* ----- Edit-drawer Work History pane ------------------------------------ */
.sp-emp-history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.sp-emp-history-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 8px;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--sp-primary-soft), var(--sp-surface));
    text-align: center;
}

.sp-emp-history-stat-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--sp-primary);
}

.sp-emp-history-stat-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sp-text-muted);
}

.sp-emp-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-emp-history-day {
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    background: var(--sp-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
}

.sp-emp-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid var(--sp-border);
}

.sp-emp-history-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--sp-text);
}

    .sp-emp-history-date i {
        color: var(--sp-text-muted);
        font-size: 13px;
    }

.sp-emp-history-total {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
    font-size: 12px;
    font-weight: 600;
}

.sp-emp-history-shifts {
    display: flex;
    flex-direction: column;
}

.sp-emp-history-shift {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    border-top: 1px solid var(--sp-border);
}

    .sp-emp-history-shift:first-child {
        border-top: none;
    }

    .sp-emp-history-shift:hover {
        background: var(--sp-primary-soft);
    }

.sp-emp-history-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--sp-text);
}

    .sp-emp-history-name i {
        color: var(--sp-primary);
        font-size: 13px;
        flex: 0 0 auto;
    }

.sp-emp-history-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--sp-text-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

    .sp-emp-history-range i {
        font-size: 12px;
    }

.sp-emp-history-hrs {
    flex: 0 0 auto;
    min-width: 52px;
    text-align: right;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--sp-text);
    font-variant-numeric: tabular-nums;
}

.sp-emp-empty {
    color: var(--sp-text-muted);
    font-size: 13px;
    padding: 12px;
    border: 1px dashed var(--sp-border);
    border-radius: 8px;
    background: var(--sp-surface);
}

.sp-emp-row {
    cursor: pointer;
}

    .sp-emp-row.is-selected {
        background: var(--sp-primary-soft);
        box-shadow: inset 3px 0 0 var(--sp-primary);
    }

@media (max-width: 720px) {
    .sp-mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-mini-foot {
        grid-template-columns: 1fr;
    }
}

/* ----- Alert center (Notifications page) -------------------------------- */
.sp-alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sp-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--sp-border);
}

    .sp-alert-item:last-child {
        border-bottom: none;
    }

    .sp-alert-item.unread {
        background: rgba(37, 99, 235, .05);
        border-radius: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

.sp-alert-ico {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-surface-alt, #eef2ff);
    color: var(--sp-primary);
    font-size: 16px;
}

.sp-alert-item.unread .sp-alert-ico {
    background: var(--sp-primary);
    color: #fff;
}

.sp-alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-alert-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.sp-alert-heading {
    font-weight: 600;
    color: var(--sp-text, #0f172a);
}

.sp-alert-age {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--sp-text-muted, #64748b);
}

.sp-alert-text {
    color: var(--sp-text-muted, #475569);
    font-size: 14px;
    margin-top: 2px;
}

.sp-alert-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-primary);
    text-decoration: none;
}

    .sp-alert-link:hover {
        text-decoration: underline;
    }

.sp-alert-actions {
    flex: 0 0 auto;
}

.sp-alert-approve {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

    .sp-alert-approve form {
        margin: 0;
    }

/* ----- Communication preferences matrix --------------------------------- */
.sp-pref-table th.center,
.sp-pref-table td.center {
    text-align: center;
    width: 90px;
}

.sp-pref-name {
    font-weight: 600;
    color: var(--sp-text, #0f172a);
}

.sp-pref-desc {
    font-size: 12px;
    color: var(--sp-text-muted, #64748b);
    margin-top: 2px;
}

/* ----- Audit log -------------------------------------------------------- */
.sp-audit-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .sp-audit-filters .sp-input {
        min-width: 160px;
    }

.sp-audit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sp-audit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--sp-border);
}

    .sp-audit-item:last-child {
        border-bottom: none;
    }

.sp-audit-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-surface-alt, #eef2ff);
    color: var(--sp-primary);
    font-size: 15px;
}

    .sp-audit-ico.cat-auth {
        background: #e0f2fe;
        color: #0369a1;
    }

    .sp-audit-ico.cat-task {
        background: #dcfce7;
        color: #15803d;
    }

    .sp-audit-ico.cat-shift {
        background: #fef3c7;
        color: #b45309;
    }

    .sp-audit-ico.cat-employee {
        background: #ede9fe;
        color: #6d28d9;
    }

    .sp-audit-ico.cat-device {
        background: #cffafe;
        color: #0e7490;
    }

    .sp-audit-ico.cat-billing {
        background: #fce7f3;
        color: #be185d;
    }

    .sp-audit-ico.cat-opportunity {
        background: #ffedd5;
        color: #c2410c;
    }

    .sp-audit-ico.cat-system {
        background: #e2e8f0;
        color: #334155;
    }

.sp-audit-body {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-audit-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.sp-audit-pill {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sp-surface-alt, #eef2ff);
    color: var(--sp-primary);
}

    .sp-audit-pill.cat-auth {
        background: #e0f2fe;
        color: #0369a1;
    }

    .sp-audit-pill.cat-task {
        background: #dcfce7;
        color: #15803d;
    }

    .sp-audit-pill.cat-shift {
        background: #fef3c7;
        color: #b45309;
    }

    .sp-audit-pill.cat-employee {
        background: #ede9fe;
        color: #6d28d9;
    }

    .sp-audit-pill.cat-device {
        background: #cffafe;
        color: #0e7490;
    }

    .sp-audit-pill.cat-billing {
        background: #fce7f3;
        color: #be185d;
    }

    .sp-audit-pill.cat-opportunity {
        background: #ffedd5;
        color: #c2410c;
    }

    .sp-audit-pill.cat-system {
        background: #e2e8f0;
        color: #334155;
    }

.sp-audit-summary {
    color: var(--sp-text, #0f172a);
    font-size: 14px;
}

.sp-audit-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--sp-text-muted, #64748b);
    flex-wrap: wrap;
}

.sp-audit-actor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--sp-text, #334155);
}

.sp-audit-role {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--sp-surface-alt, #eef2ff);
    font-weight: 600;
}

/* ----- Print: Daily Schedule roster ------------------------------------- */
/* The roster is rendered in the page but only shown when printing. */
.sp-print-roster {
    display: none;
}

/* The Manager Framework shows its published sheet on screen as well, so the
   manager can check what staff will receive before printing it. The print rules
   below live inside @media print, so the on-screen preview restates them. */
.sp-print-roster.is-inline {
    display: block;
    overflow-x: auto;
    color: #0f172a;
    font-size: 12px;
}

.sp-print-roster.is-inline .sp-roster-head {
    background: #1818d8;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px 8px 0 0;
}

.sp-print-roster.is-inline .sp-roster-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;
}

.sp-print-roster.is-inline .sp-roster-weekof {
    margin-top: 4px;
    font-size: 11px;
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.sp-print-roster.is-inline .sp-roster-weekof-label {
    font-weight: 700;
}

.sp-print-roster.is-inline table.sp-roster {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 10px;
}

.sp-print-roster.is-inline table.sp-roster th,
.sp-print-roster.is-inline table.sp-roster td {
    border: 1px solid #e2e8f0;
    padding: 5px 6px;
    vertical-align: top;
    text-align: left;
    word-wrap: break-word;
}

.sp-print-roster.is-inline table.sp-roster thead th {
    border: none;
    text-align: center;
    padding-bottom: 6px;
}

.sp-print-roster.is-inline .sp-roster-date {
    font-size: 13px;
    font-weight: 700;
}

.sp-print-roster.is-inline .sp-roster-day {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #64748b;
}

.sp-print-roster.is-inline .sp-roster-deptcol {
    width: 16%;
    border: none !important;
    text-align: right !important;
    font-weight: 700;
    font-size: 12px;
    padding-right: 10px !important;
}

.sp-print-roster.is-inline tr.sp-roster-band td {
    background: #f1f5f9;
    border: none;
    height: 16px;
}

.sp-print-roster.is-inline tr.sp-roster-band td.sp-roster-deptcol {
    background: #fff;
}

.sp-print-roster.is-inline .sp-roster-name {
    display: block;
    font-weight: 600;
    color: #1818d8;
}

.sp-print-roster.is-inline .sp-roster-hours {
    display: block;
    color: #0f172a;
}

.sp-print-roster.is-inline .sp-roster-off {
    display: block;
    font-style: italic;
    font-weight: 600;
    color: #b91c1c;
}

.sp-print-roster.is-inline .sp-roster-empty {
    color: #94a3b8;
    text-align: center;
}

.sp-mf-publish .sp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media print {
    /* Hide every on-screen element; only the roster prints. */
    .sp-sidebar,
    .sp-topbar,
    .sp-period,
    .sp-calendar-tabs,
    .sp-finalized-banner,
    .sp-flash,
    .sp-dow,
    .sp-cal-dow,
    .sp-cal-monthnav,
    .sp-period-nav,
    .sp-weekrow-label,
    .sp-week,
    .sp-legend,
    .sp-drawer,
    .sp-alert-box {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .sp-app {
        display: block;
    }

    .sp-main {
        width: 100%;
    }

    .sp-content {
        padding: 0;
    }

    /* ---- The printable roster ---- */
    .sp-print-roster {
        display: block;
        color: #000;
        font-size: 9px;
    }

    .sp-roster-page {
        page-break-after: always;
    }

    .sp-roster-page:last-child {
        page-break-after: auto;
    }

    .sp-roster-head {
        background: #1818d8;
        color: #fff;
        padding: 12px 16px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sp-roster-head h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .5px;
    }

    .sp-roster-weekof {
        margin-top: 4px;
        font-size: 8px;
        display: flex;
        gap: 6px;
        align-items: baseline;
    }

    .sp-roster-weekof-label {
        font-weight: 700;
    }

    table.sp-roster {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        margin-top: 10px;
    }

    table.sp-roster th,
    table.sp-roster td {
        border: 1px solid #c9c9c9;
        padding: 3px 4px;
        vertical-align: top;
        text-align: left;
        overflow: hidden;
        word-wrap: break-word;
    }

    table.sp-roster thead th {
        border: none;
        text-align: center;
        padding-bottom: 6px;
    }

    .sp-roster-date {
        font-size: 11px;
        font-weight: 700;
    }

    .sp-roster-day {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .3px;
    }

    /* The leftmost label column (department name / blank spacer). */
    .sp-roster-deptcol {
        width: 16%;
        border: none !important;
        text-align: right !important;
        font-weight: 700;
        font-size: 10px;
        padding-right: 10px !important;
    }

    /* Grey department band that spans the day columns. */
    tr.sp-roster-band td {
        background: #efefef;
        border: none;
        height: 14px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* The department label cell itself stays white. */
    tr.sp-roster-band td.sp-roster-deptcol {
        background: #fff;
    }

    .sp-roster-name {
        display: block;
        font-weight: 600;
        color: #1818d8;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sp-roster-hours {
        display: block;
        color: #000;
    }

    .sp-roster-off {
        display: block;
        font-style: italic;
        font-weight: 600;
        color: #b91c1c;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sp-roster-empty {
        text-align: center !important;
        font-style: italic;
        color: #666;
    }

    @page {
        size: landscape;
        margin: 10mm;
    }
}

/* ===========================================================================
   Tasks board (kanban), stat cards, search & office agenda
   =========================================================================== */

/* ----- Tasks page header -------------------------------------------------- */
.sp-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ----- Stat cards --------------------------------------------------------- */
.sp-statcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.sp-statcard {
    display: block;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

a.sp-statcard:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.sp-statcard.is-alert {
    border-color: #fecaca;
    background: #fef2f2;
}

.sp-statcard.is-pending {
    border-color: #fde68a;
    background: #fffbeb;
}

.sp-statcard.is-pending .sp-statcard-value {
    color: var(--sp-pending);
}

.sp-statcard-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sp-statcard-value {
    margin-top: 6px;
    font-size: 28px;
    font-weight: 700;
    color: var(--sp-text);
}

.sp-statcard.is-alert .sp-statcard-value {
    color: var(--sp-overdue);
}

/* ----- List / board view toggle ------------------------------------------ */
.sp-filter-spacer {
    flex: 1 1 auto;
}

.sp-view-toggle {
    display: inline-flex;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--sp-surface);
}

.sp-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    color: var(--sp-text-muted);
    cursor: pointer;
}

    .sp-view-btn:hover {
        background: #f9fafb;
        color: var(--sp-text);
    }

    .sp-view-btn.active {
        background: var(--sp-primary-soft);
        color: var(--sp-primary);
    }

    .sp-view-btn + .sp-view-btn {
        border-left: 1px solid var(--sp-border);
    }

/* ----- Search box --------------------------------------------------------- */
.sp-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 0 12px;
    height: 36px;
    color: var(--sp-text-muted);
}

.sp-search-input {
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--sp-text);
    min-width: 180px;
}

/* ----- Kanban board ------------------------------------------------------- */
.sp-board-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 16px;
}

.sp-board-scroll-top #board-scroll-top-spacer {
    height: 1px;
}

.sp-board-wrap {
    overflow-x: auto;
}

/* ---- Tasks dashboard panel grid (2 wide x 3 tall) ---------------------- */
.sp-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
    align-items: start;
}

@media (max-width: 1100px) {
    .sp-panel-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sp-panel-title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-panel-title.is-toggleable {
    cursor: pointer;
}

    .sp-panel-title.is-toggleable:hover .sp-panel-title-text {
        text-decoration: underline dotted;
        text-underline-offset: 4px;
    }

    .sp-panel-title.is-toggleable:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 3px;
        border-radius: 6px;
    }

/* The Completed/Archive switcher lives inside the panel header. */
.sp-panel-title-form {
    margin: 0 0 0 auto;
    cursor: default;
}

.sp-panel-viewselect {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 8px;
}

/* Clicking a panel header widens it to the full grid so the whole table is
   readable; the taller body keeps more rows visible at the same time. */
.sp-panel.is-expanded {
    grid-column: 1 / -1;
}

    .sp-panel.is-expanded .sp-panel-body {
        max-height: 70vh;
    }

.sp-panel-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: #64748b;
}

.sp-tt-row.is-archived {
    cursor: default;
    background: #f8fafc;
}

.sp-panel-body {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    max-height: 360px;
    overflow: auto;
}

.sp-panel-soon {
    padding: 40px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* ---- Today's Tasks table ---------------------------------------------- */
.sp-tt {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sp-tt thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    text-align: left;
    font-weight: 500;
    color: #94a3b8;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.sp-tt-th-due {
    width: 110px;
}

.sp-tt tbody tr {
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}

.sp-tt tbody tr:hover {
    background: #f8fafc;
}

.sp-tt tbody tr.is-active {
    background: #eef2f7;
}

.sp-tt td {
    padding: 8px 16px;
    color: #0f172a;
    vertical-align: middle;
}

.sp-tt-empty-row td {
    color: #94a3b8;
    text-align: center;
    padding: 32px 16px;
    cursor: default;
}

/* Time-of-day divider rows: a quiet band that splits a task table into
   Morning / Afternoon / Night sections without competing with the rows. */
.sp-tt-group-row td {
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 8px 16px;
    cursor: default;
}

.sp-tt-cellwrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sp-tt-time {
    flex: none;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e3a8a;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.sp-tt-time.is-night {
    background: #c7d2fe;
    color: #312e81;
}

.sp-tt-time.is-none {
    background: none;
    color: #94a3b8;
    padding-left: 4px;
    padding-right: 4px;
}

/* The inline time-of-day dropdown only surfaces on the hovered/active row,
   matching the chevron affordance in the design. */
.sp-tt-timeform {
    display: none;
    margin: 0;
}

.sp-tt tbody tr:hover .sp-tt-timeform,
.sp-tt tbody tr.is-active .sp-tt-timeform {
    display: block;
}

.sp-tt-timeselect {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    padding: 2px 4px;
    color: #334155;
}

.sp-tt-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-tt-open {
    display: none;
    flex: none;
    border: none;
    background: none;
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.sp-tt tbody tr:hover .sp-tt-open,
.sp-tt tbody tr.is-active .sp-tt-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sp-tt-due {
    color: #475569;
    white-space: nowrap;
}

/* ---- Approval panel columns -------------------------------------------- */
.sp-tt-desc,
.sp-tt-employee,
.sp-tt-manager {
    color: #475569;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-tt-muted {
    color: #94a3b8;
}

.sp-tt-inlineform {
    margin: 0;
}

.sp-tt-select {
    width: 100%;
    max-width: 170px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    padding: 4px 6px;
    color: #334155;
}

.sp-tt-approve-actions {
    display: inline-flex;
    gap: 6px;
}

.sp-tt-approve-actions form {
    margin: 0;
}

.sp-tt-approve,
.sp-tt-reject {
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
}

.sp-tt-approve {
    background: #dcfce7;
    color: #166534;
}

.sp-tt-approve:hover {
    background: #bbf7d0;
}

.sp-tt-reject {
    background: #fee2e2;
    color: #991b1b;
}

.sp-tt-reject:hover {
    background: #fecaca;
}

.sp-tt-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
}

.sp-tt-chip.is-pending {
    background: #fef3c7;
    color: #92400e;
}

/* Overdue is an alert state, so it reads red rather than the informational
   blue it previously shared with neutral chips. */
.sp-tt-chip.is-overdue,
.sp-tt-select.is-overdue {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.sp-tt-chip.is-done,
.sp-tt-select.is-done {
    background: #dcfce7;
    border-color: #dcfce7;
    color: #166534;
}

.sp-tt-select.is-pending {
    background: #fef3c7;
    border-color: #fef3c7;
    color: #92400e;
}

/* In Progress: active work, blue. */
.sp-tt-chip.is-inprogress,
.sp-tt-select.is-inprogress {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

/* Pending Approval: awaiting sign-off, purple so it is distinct from both
   "not started" amber and "done" green. */
.sp-tt-chip.is-pendingapproval,
.sp-tt-select.is-pendingapproval {
    background: #ede9fe;
    border-color: #ddd6fe;
    color: #5b21b6;
}

/* Paused and Inactive are both dormant, so they share a muted grey and are
   distinguished by their label rather than by colour. */
.sp-tt-chip.is-paused,
.sp-tt-select.is-paused,
.sp-tt-chip.is-inactive,
.sp-tt-select.is-inactive {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

/* Row-level tint. Kept very light so the status column stays the primary
   signal and the row text keeps its contrast. The left border carries most of
   the cue, which also keeps this legible for colour-blind users. */
.sp-tt-row.is-overdue {
    background: #fef2f2;
    box-shadow: inset 3px 0 0 #ef4444;
}

.sp-tt-row.is-done {
    background: #f6fdf9;
    box-shadow: inset 3px 0 0 #22c55e;
}

.sp-tt-row.is-inprogress {
    background: #f5f9ff;
    box-shadow: inset 3px 0 0 #3b82f6;
}

.sp-tt-row.is-pendingapproval {
    background: #faf8ff;
    box-shadow: inset 3px 0 0 #8b5cf6;
}

.sp-tt-row.is-paused,
.sp-tt-row.is-inactive {
    background: #fafafa;
    box-shadow: inset 3px 0 0 #cbd5e1;
}

.sp-tt-row.is-pending {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* Completed rows read as de-emphasised without hiding the text. */
.sp-tt-row.is-done .sp-tt-title {
    color: #64748b;
}

/* The tint must not fight the existing hover/selected affordances. */
.sp-tt-row.is-overdue:hover,
.sp-tt-row.is-done:hover,
.sp-tt-row.is-inprogress:hover,
.sp-tt-row.is-pendingapproval:hover,
.sp-tt-row.is-paused:hover,
.sp-tt-row.is-inactive:hover,
.sp-tt-row.is-pending:hover {
    background: #eef2f7;
}

/* Keep the status column from being squeezed out by the task title cell. */
.sp-tt-th-status {
    width: 140px;
    white-space: nowrap;
}

/* ---- Recurring Tasks management screen ---------------------------------- */

.sp-rt-panel {
    margin-bottom: 24px;
}
.sp-rt-hint {
    margin: 6px 0 0;
    max-width: 780px;
    font-size: 13px;
    color: #64748b;
}

.sp-rt-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.sp-rt-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.sp-rt-filter input,
.sp-rt-filter select {
    min-width: 200px;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
}

.sp-rt-table {
    width: 100%;
}

.sp-rt-title {
    font-weight: 600;
    color: #0f172a;
}

.sp-rt-desc {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
}

/* Paused definitions stay visible but visibly inert, since pausing never
   removes tasks already generated. */
.sp-rt-paused {
    opacity: .6;
}

.sp-tt-chip.sp-rt-on {
    background: #dcfce7;
    color: #166534;
}

.sp-tt-chip.sp-rt-off {
    background: #fee2e2;
    color: #991b1b;
}

.sp-rt-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.sp-rt-inline {
    display: inline;
}

.sp-rt-empty {
    padding: 20px;
    text-align: center;
    color: #94a3b8;
}

/* ---- Add Task: Repeat Interval chooser --------------------------------- */

.sp-repeat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 2px;
}

.sp-repeat-option {
    cursor: pointer;
}

    /* The native radio is hidden but kept in the DOM so the control stays
       keyboard-accessible and posts normally; the pill is the visible state. */
    .sp-repeat-option input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.sp-repeat-pill {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: #334155;
}

.sp-repeat-option input:checked + .sp-repeat-pill {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

.sp-repeat-option input:focus-visible + .sp-repeat-pill {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Recurrence can only be chosen while creating a task; editing an existing one
   locks the list so a generated occurrence can never reshape its series. */
.sp-repeat-list.is-locked .sp-repeat-option {
    cursor: not-allowed;
    opacity: .55;
}

/* ---- Finance / bookkeeper board ---------------------------------------- */

.sp-fin-panel {
    margin-bottom: 24px;
}

.sp-fin-hint {
    margin: 6px 0 0;
    max-width: 780px;
    font-size: 13px;
    color: #64748b;
}

.sp-fin-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.sp-fin-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

    .sp-fin-filter input,
    .sp-fin-filter select {
        min-width: 200px;
        padding: 7px 10px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 13px;
        color: #0f172a;
    }

.sp-fin-day {
    margin: 0 0 18px;
}

/* The header stays put when a day is collapsed so its counts remain scannable. */
.sp-fin-dayhead {
    display: flex;
    align-items: center;
    /* Items flow from the left; the progress read-out pushes itself to the
       far right with margin-left:auto so the badges stay beside the date. */
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
    background: #f8fafc;
    cursor: pointer;
    text-align: left;
}

.sp-fin-day.is-collapsed .sp-fin-table {
    display: none;
}

.sp-fin-day.is-collapsed .sp-fin-dayhead {
    border-radius: 8px;
}

.sp-fin-day.is-today .sp-fin-dayhead {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.sp-fin-daydate {
    font-weight: 600;
    color: #0f172a;
}

.sp-fin-table {
    width: 100%;
}

.sp-fin-title {
    font-weight: 600;
    color: #0f172a;
}

.sp-fin-desc {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
}

.sp-fin-done {
    opacity: .6;
}

.sp-fin-row {
    cursor: pointer;
}

    .sp-fin-row:hover {
        background: var(--sp-surface-alt, #f1f5f9);
    }

    .sp-fin-row:focus-visible {
        outline: 2px solid var(--sp-primary);
        outline-offset: -2px;
    }

    /* Cells that own their own controls opt out of the row click affordance. */
    .sp-fin-row .sp-fin-nolink {
        cursor: default;
    }

.sp-fin-actions {
    white-space: nowrap;
}

.sp-fin-inline {
    display: inline;
}

/* ---- Finance board modernization -------------------------------------- */
.sp-fin-caret {
    font-size: 12px;
    color: #64748b;
    transition: transform .15s ease;
}

.sp-fin-day.is-collapsed .sp-fin-caret {
    transform: rotate(-90deg);
}

/* A day in the past that still has open work is called out in red. */
.sp-fin-day.is-overdue .sp-fin-dayhead {
    background: #fef2f2;
    border-color: #fecaca;
}

.sp-fin-progress {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.sp-fin-today {
    background: #dbeafe;
    color: #1d4ed8;
}

.sp-fin-late {
    background: #fee2e2;
    color: #b91c1c;
}

.sp-fin-row.is-late .sp-fin-title {
    color: #b91c1c;
}

.sp-fin-person {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.sp-fin-unassigned {
    font-size: 12px;
    font-style: italic;
    color: #94a3b8;
}

/* Priority colouring so an Urgent row is visible without reading it. */
.sp-badge.sp-prio {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sp-prio.p-low {
    background: #f1f5f9;
    color: #475569;
}

.sp-prio.p-normal {
    background: #e0f2fe;
    color: #0369a1;
}

.sp-prio.p-high {
    background: #ffedd5;
    color: #c2410c;
}

.sp-prio.p-urgent {
    background: #fee2e2;
    color: #b91c1c;
}

.sp-fin-status {
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
}

    .sp-fin-status.s-done {
        border-color: #86efac;
        background: #f0fdf4;
        color: #166534;
    }

    .sp-fin-status.s-overdue {
        border-color: #fca5a5;
        background: #fef2f2;
        color: #b91c1c;
    }

    .sp-fin-status.s-inprogress {
        border-color: #93c5fd;
        background: #eff6ff;
        color: #1d4ed8;
    }

/* Icon-only delete keeps the actions column from crowding the row. */
.sp-fin-remove {
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}

    .sp-fin-remove:hover {
        border-color: #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

/* ---- Owner framework task rows ---------------------------------------- */
.sp-badge.sp-fw-src {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.sp-fw-src.company {
    background: #ede9fe;
    color: #5b21b6;
}

.sp-fw-src.recurring {
    background: #e0f2fe;
    color: #0369a1;
}

.sp-fw-src.onetime {
    background: #f1f5f9;
    color: #475569;
}

/* Text buttons made every row wrap; icons keep the actions on one line. */
.sp-fw-rowactions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-fw-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    line-height: 1;
}

    .sp-fw-iconbtn.save {
        color: #15803d;
    }

        .sp-fw-iconbtn.save:hover {
            border-color: #86efac;
            background: #f0fdf4;
        }

    .sp-fw-iconbtn.remove {
        color: #94a3b8;
    }

        .sp-fw-iconbtn.remove:hover {
            border-color: #fecaca;
            background: #fef2f2;
            color: #b91c1c;
        }

.sp-fin-empty {
    padding: 20px;
    text-align: center;
    color: #94a3b8;
}

.sp-fin-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 16px;
}

.sp-fin-formactions {
    grid-column: 1 / -1;
}

.sp-rt-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 16px;
    padding: 16px;
}

.sp-rt-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.sp-rt-form input,
.sp-rt-form select {
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
}

.sp-rt-form .sp-rt-wide {
    grid-column: span 2;
}

.sp-rt-form .sp-rt-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.sp-rt-form .sp-rt-check input {
    width: auto;
}

.sp-rt-formactions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.sp-rt-editrow > td {
    background: #f8fafc;
    padding: 0;
}

/* ---- Task detail drawer ------------------------------------------------
   Namespaced as .sp-tdrawer-* rather than .sp-drawer-* because the Schedule
   day drawer already owns the .sp-drawer/.sp-drawer-head/.sp-drawer-body
   class names further up this file. Sharing them made the two rule blocks
   collide, which left this panel permanently rendered on page load. */
.sp-tdrawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
    z-index: 900;
}

.sp-tdrawer-scrim.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sp-tdrawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(620px, 96vw);
    background: #fff;
    box-shadow: -8px 0 32px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s ease;
    display: flex;
    flex-direction: column;
    z-index: 901;
}

.sp-tdrawer.open {
    transform: translateX(0);
    visibility: visible;
}

.sp-tdrawer > form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.sp-tdrawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    flex: none;
}

.sp-tdrawer-nav,
.sp-tdrawer-headright {
    display: flex;
    gap: 4px;
}

.sp-tdrawer-iconbtn {
    border: none;
    background: none;
    color: #64748b;
    font-size: 15px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.sp-tdrawer-iconbtn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.sp-tdrawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 48px 32px;
}

.sp-tdrawer-title {
    margin: 0 0 20px;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.sp-tdrawer-group {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    min-height: 20px;
}

.sp-tdrawer-rule {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 24px 0;
}

.sp-tdrawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
    margin-bottom: 20px;
}

.sp-tdrawer-field {
    display: block;
    margin-bottom: 20px;
}

.sp-tdrawer-grid .sp-tdrawer-field {
    margin-bottom: 0;
}

.sp-tdrawer-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
}

.sp-tdrawer-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
}

.sp-tdrawer-input:disabled {
    background: #f8fafc;
    color: #64748b;
}

.sp-tdrawer-input.is-pill {
    background: #dbeafe;
    border-color: #dbeafe;
    color: #1e3a8a;
    font-weight: 500;
}

/* Read-only "chip" readouts used for values the drawer shows but doesn't edit
   (department, approval outcomes). */
.sp-tdrawer-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 600;
}

.sp-tdrawer-chip.is-muted {
    background: #f1f5f9;
    color: #64748b;
}

.sp-tdrawer-chip.is-yes {
    background: #dbeafe;
    color: #1e3a8a;
}

.sp-tdrawer-chip.is-approved {
    background: #dcfce7;
    color: #166534;
}

.sp-tdrawer-chip.is-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.sp-tdrawer-chip.is-pending {
    background: #fef3c7;
    color: #92400e;
}

.sp-tdrawer-textarea {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
}

.sp-tdrawer-files {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 28px 16px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.sp-tdrawer-files:hover,
.sp-tdrawer-files.is-dragover {
    border-color: #2563eb;
    background: #f1f5f9;
}

.sp-tdrawer-files-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.sp-tdrawer-fileinput {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sp-tdrawer-filehint {
    margin-top: 6px;
    font-size: 11px;
    color: #94a3b8;
}

.sp-tdrawer-current {
    margin-top: 6px;
    font-size: 12px;
}

.sp-tdrawer-current a {
    color: #2563eb;
    text-decoration: none;
}

.sp-tdrawer-current a:hover {
    text-decoration: underline;
}

.sp-tdrawer-check {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.sp-tdrawer-check input {
    width: 18px;
    height: 18px;
}

.sp-tdrawer-foot {
    flex: none;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.sp-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 16px;
    align-items: start;
}

.sp-board-col {
    background: #f9fafb;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}

.sp-board-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 13px;
    border-bottom: 2px solid var(--sp-border);
    border-radius: 12px 12px 0 0;
}

    .sp-board-col-head.not-started {
        color: var(--sp-text-muted);
        border-bottom-color: #cbd5e1;
    }

    .sp-board-col-head.in-progress {
        color: var(--sp-primary);
        border-bottom-color: #93c5fd;
    }

    .sp-board-col-head.completed {
        color: var(--sp-done);
        border-bottom-color: #6ee7b7;
    }

    .sp-board-col-head.pending-approval {
        color: #b45309;
        border-bottom-color: #fcd34d;
    }

.sp-board-col-select {
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 13px;
    color: inherit;
    padding: 2px 4px;
    border-radius: 6px;
    cursor: pointer;
}

    .sp-board-col-select:hover,
    .sp-board-col-select:focus {
        background: rgba(0, 0, 0, 0.05);
        outline: none;
    }

.sp-board-count {
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
    font-size: 12px;
    text-align: center;
}

.sp-board-col-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    min-height: 60px;
}

.sp-board-col-body.sp-dragover {
    background: rgba(59, 130, 246, 0.08);
    outline: 2px dashed var(--sp-primary);
    outline-offset: -2px;
    border-radius: 8px;
}

.sp-board-empty {
    text-align: center;
    color: var(--sp-text-muted);
    font-size: 12px;
    font-style: italic;
    padding: 16px 8px;
}

/* ----- Task card ---------------------------------------------------------- */
.sp-task-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    box-sizing: border-box;
    overflow: hidden;
}

.sp-task-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sp-task-card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--sp-text);
}

.sp-task-card-title-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 8px;
    cursor: pointer;
}

.sp-task-card-title-btn:hover {
    text-decoration: underline;
}

.sp-hidden {
    display: none !important;
}

.sp-view-task-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 12px;
}

.sp-view-task-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--sp-border, #e5e7eb);
    padding-bottom: 8px;
}

/* The audit timeline inside the read-only task modal stacks instead of
   using the label/value row layout used by the rest of the rows. */
.sp-view-task-audit {
    display: block;
    border-bottom: 0;
}

.sp-modal-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.sp-task-card-desc {
    margin-top: 4px;
    font-size: 12px;
    color: var(--sp-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-task-card-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-task-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sp-border);
}

.sp-task-due {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
}

.sp-task-card .sp-status-form {
    margin-top: 10px;
}

    .sp-task-card .sp-status-select {
        width: 100%;
    }

.sp-daynote-form {
    margin-top: 6px;
}

.sp-daynote-input {
    width: 100%;
    resize: vertical;
    font-size: 12px;
    padding: 6px 8px;
    min-height: 32px;
}

.sp-approval-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    border-radius: 10px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.sp-approval-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #b45309;
    white-space: normal;
    min-width: 0;
}

.sp-approval-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .sp-approval-btns .sp-btn {
        white-space: nowrap;
    }


/* ----- Office calendar agenda -------------------------------------------- */
.sp-agenda-time {
    font-weight: 700;
    color: var(--sp-text);
}

.sp-agenda-time.sp-overdue {
    color: var(--sp-overdue);
}

.sp-status-select.status-amber { color: var(--sp-pending); }
.sp-status-select.status-green { color: var(--sp-done); }
.sp-status-select.status-blue { color: var(--sp-primary); }
.sp-status-select.status-red { color: var(--sp-overdue); }
.sp-status-select.status-gray { color: var(--sp-text-muted); }

/* ----- Office calendar: month grid -------------------------------------- */
.sp-cal-monthnav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-cal-monthrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sp-cal-monthrow .sp-period-title {
        margin: 0;
    }

.sp-cal-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
    background: var(--sp-surface);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

    .sp-cal-arrow:hover {
        border-color: var(--sp-primary);
        color: var(--sp-primary);
    }

.sp-cal-dow {
    margin-top: 8px;
}

.sp-cal-week {
    gap: 0;
    margin-bottom: 0;
}

    /* Collapse borders between adjacent cells into a single grid outline. */
    .sp-cal-week + .sp-cal-week .sp-cal-cell {
        border-top: none;
    }

    .sp-cal-week .sp-cal-cell + .sp-cal-cell {
        border-left: none;
    }

/* Scoped to the older week-strip calendar. Left unscoped it also hit the
   resource calendar cells, which draw their own dividers through the grid gap
   and ended up with a doubled border and the wrong height. */
.sp-cal-week .sp-cal-cell {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    min-height: 132px;
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: box-shadow .15s ease, background .15s ease;
}

    .sp-cal-week .sp-cal-cell.is-out {
        background: #fafafa;
        color: var(--sp-text-muted);
    }

    .sp-cal-week .sp-cal-cell.is-empty {
        cursor: default;
    }

    .sp-cal-week .sp-cal-cell:hover:not(.is-empty),
    .sp-cal-week .sp-cal-cell.is-selected {
        box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .25);
        background: var(--sp-primary-soft);
    }

.sp-cal-cell-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sp-cal-daynum {
    font-size: 15px;
    font-weight: 700;
    color: var(--sp-text);
    line-height: 1;
}

    .sp-cal-week .sp-cal-cell.is-out .sp-cal-daynum {
        color: var(--sp-text-muted);
        font-weight: 600;
    }

    .sp-cal-daynum.is-today {
        background: var(--sp-primary);
        color: #fff;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

.sp-cal-monthtag {
    font-size: 11px;
    font-weight: 700;
    color: var(--sp-primary);
    letter-spacing: .03em;
}

.sp-cal-dow-label {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--sp-text-muted);
}

.sp-cal-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.sp-cal-event {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.25;
    color: var(--sp-text);
    min-width: 0;
}

    .sp-cal-event .sp-dot {
        flex: 0 0 auto;
    }

.sp-cal-event-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-cal-event-time {
    font-weight: 600;
    margin-right: 3px;
}

/* Ghost occurrences: transient recurring-task previews before their schedule
   period is finalized. Never persisted; view-only. */
.sp-cal-event.is-ghost {
    opacity: 0.55;
    font-style: italic;
}

.sp-cal-ghost-icon {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.8;
}

.sp-drawer-task.is-ghost {
    opacity: 0.7;
    border-style: dashed;
}

/* Status dots on chips and drawer task cards. */
.sp-dot.cal-gray  { background: #9ca3af; }
.sp-dot.cal-blue  { background: var(--sp-primary); }
.sp-dot.cal-green { background: var(--sp-done); }
.sp-dot.cal-red   { background: var(--sp-overdue); }

/* ----- Office calendar: day drawer task cards --------------------------- */
.sp-cal-task-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .sp-cal-task-head .sp-dot {
        margin-top: 6px;
        flex: 0 0 auto;
    }

.sp-cal-task-titles {
    min-width: 0;
}

.sp-cal-task-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sp-border);
}

    .sp-cal-task-actions .sp-status-form {
        margin: 0;
    }

    .sp-cal-task-actions .sp-status-select {
        min-width: 130px;
    }

/* Keep the month grid readable as it narrows; restore per-cell borders once
   the shared .sp-week collapse (below) removes the unified grid outline. */
@media (max-width: 1100px) {
    .sp-cal-week .sp-cal-cell,
    .sp-cal-week + .sp-cal-week .sp-cal-cell {
        border: 1px solid var(--sp-border);
    }
}

/* ---- Owner scheduling framework planner --------------------------------- */

.sp-fw-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.sp-fw-mode {
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
}

    .sp-fw-mode:hover {
        border-color: #94a3b8;
        color: #0f172a;
    }

    .sp-fw-mode.is-active {
        border-color: #2563eb;
        background: #eff6ff;
        color: #1d4ed8;
    }

.sp-fw-panel {
    margin-bottom: 24px;
}

/* Wildcards panel head puts the title/hint block beside the Add button. */
.sp-fw-wildcards .sp-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-fw-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sp-fw-head-actions {
    display: flex;
    gap: 8px;
}

.sp-fw-hint {
    margin: 6px 0 0;
    max-width: 780px;
    font-size: 13px;
    color: #64748b;
}

.sp-fw-muted {
    color: #94a3b8;
}

.sp-fw-empty {
    padding: 16px;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}

/* Shared row layout for the create/details forms. */
.sp-fw-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 16px;
}

.sp-fw-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

    .sp-fw-field input {
        min-width: 180px;
        padding: 7px 10px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 13px;
        color: #0f172a;
    }

.sp-fw-field-wide input {
    min-width: 360px;
}

/* Template load/save/default/delete controls above the minimums table. */
.sp-fw-templatebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

    .sp-fw-templatebar select,
    .sp-fw-templatebar input[type="text"] {
        padding: 6px 10px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 13px;
        color: #0f172a;
    }

/* ---- Staffing minimums table ---------------------------------------
   The minimums used to render every control inside a single cell. They now
   use real columns, with the editor tucked into a hidden sibling row. */
.sp-min-table td,
.sp-min-table th {
    vertical-align: middle;
}

.sp-min-col-staff,
.sp-min-col-hours {
    white-space: nowrap;
}

.sp-min-days {
    font-weight: 600;
    color: #0f172a;
}

.sp-min-dept {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 600;
}

    .sp-min-dept.is-all {
        background: #f1f5f9;
        color: #475569;
    }

.sp-min-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 8px;
    border-radius: 8px;
    background: #dcfce7;
    color: #166534;
    font-weight: 700;
}

.sp-min-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.sp-min-editrow > td {
    background: #f8fafc;
    border-top: 0;
}

.sp-min-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Shared add/edit field set. */
.sp-min-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.sp-min-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.sp-min-field-wide {
    flex-basis: 100%;
}

.sp-min-field-narrow {
    min-width: 100px;
}

.sp-min-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}

.sp-min-patterns,
.sp-min-days-picker,
.sp-min-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Radios/checkboxes are hidden and the label acts as the chip, so day and
   pattern choices read as a compact toggle group rather than a form. */
.sp-min-pattern input,
.sp-min-day input,
.sp-min-date input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sp-min-pattern span,
.sp-min-day span,
.sp-min-date span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

.sp-min-pattern input:checked + span,
.sp-min-day input:checked + span,
.sp-min-date input:checked + span {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

.sp-min-pattern input:focus-visible + span,
.sp-min-day input:focus-visible + span,
.sp-min-date input:focus-visible + span {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.sp-min-addbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid #e2e8f0;
}

/* Add dialog. */
.sp-min-dialog {
    width: min(720px, 92vw);
    padding: 0;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

    .sp-min-dialog::backdrop {
        background: rgba(15, 23, 42, .45);
    }

.sp-min-dialog-form {
    display: block;
    padding: 20px 22px 18px;
}

.sp-min-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

    .sp-min-dialog-head h3 {
        margin: 0;
        font-size: 17px;
        color: #0f172a;
    }

.sp-min-dialog-close {
    border: 0;
    background: none;
    font-size: 15px;
    color: #64748b;
    cursor: pointer;
}

.sp-min-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.sp-fw-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.sp-fw-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

    .sp-fw-filter input,
    .sp-fw-filter select {
        min-width: 170px;
        padding: 7px 10px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 13px;
        color: #0f172a;
    }

.sp-fw-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.sp-fw-table {
    width: 100%;
}

.sp-fw-actions-col {
    width: 1%;
    white-space: nowrap;
}

/* Each rule occupies a full-width cell so its inline edit form can wrap
   naturally instead of being squeezed into fixed table columns. */
.sp-fw-rulecell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sp-fw-rulerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .sp-fw-rulerow input,
    .sp-fw-rulerow select {
        padding: 6px 8px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 13px;
        color: #0f172a;
    }

    .sp-fw-rulerow input[type="number"] {
        width: 80px;
    }

.sp-fw-addrule {
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* ---- Framework task table (matches the dashboard .sp-tt tables) --------- */

.sp-fw-tasktable td {
    vertical-align: middle;
}

/* Rows here are edited in place rather than opening a drawer, so the pointer
   affordance from .sp-tt would be misleading. */
.sp-fw-tasktable tbody tr {
    cursor: default;
}

/* Inline editors sit flush in their cells and only show their chrome on
   hover/focus, so a dense table still reads as a table rather than a form. */
.sp-fw-input {
    width: 100%;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: #0f172a;
}

    .sp-fw-input:hover {
        border-color: #e2e8f0;
        background: #fff;
    }

    .sp-fw-input:focus {
        outline: none;
        border-color: #2563eb;
        background: #fff;
    }

.sp-fw-input-date {
    min-width: 130px;
}

.sp-fw-tasktable .sp-tt-select {
    max-width: none;
}

.sp-fw-col-title {
    min-width: 180px;
}

.sp-fw-col-desc {
    min-width: 180px;
}

.sp-fw-col-dept,
.sp-fw-col-assignee,
.sp-fw-col-manager {
    min-width: 150px;
}

.sp-fw-col-priority {
    min-width: 110px;
}

.sp-fw-col-source {
    width: 1%;
    white-space: nowrap;
}

.sp-fw-col-all {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

/* The add row is pinned in the table footer so it stays visually part of the
   table while reading as a distinct "new entry" affordance. */
.sp-fw-addrow td {
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    vertical-align: middle;
}

.sp-fw-tasktable .sp-fw-actions-col {
    white-space: nowrap;
}

    .sp-fw-tasktable .sp-fw-actions-col .sp-tt-inlineform {
        display: inline-block;
    }

.sp-fw-source {
    display: inline-flex;
    align-items: center;
}

/* Projected recurring occurrences are not persisted yet; muting them makes the
   distinction obvious without hiding them from the plan. */
.sp-fw-ghost {
    background: #fdfdfe;
}

/* ----- Sidebar nav groups -------------------------------------------------- */

.sp-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* A label, not a link: the group itself has no page, so it must not look
   clickable or pick up the hover/active treatment its children use. */
.sp-nav-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 6px;
    color: var(--sp-sidebar-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: default;
    user-select: none;
}

.sp-nav-item.sp-nav-child {
    padding-left: 30px;
    font-size: 13px;
}

/* Collapsed rail: the header text would have nothing to align against, so the
   group flattens into plain icons and only the divider hints at the grouping. */
.sp-sidebar.collapsed .sp-nav-group-header span:not(.sp-nav-icon) {
    display: none;
}

.sp-sidebar.collapsed .sp-nav-group-header {
    justify-content: center;
    padding: 8px 0 4px;
    margin: 4px 10px 0;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sp-sidebar.collapsed .sp-nav-item.sp-nav-child {
    padding-left: 12px;
}

/* ----- Coverage dropdown --------------------------------------------------- */

.sp-coverage-wrap {
    position: relative;
    display: inline-block;
}

.sp-coverage-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 680px;
    max-width: 92vw;
    max-height: 74vh;
    overflow-y: auto;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.18);
    padding: 16px;
    display: none;
}

    .sp-coverage-pop.open {
        display: block;
    }

/* Little arrow tying the panel back to the button it drops from. */
.sp-coverage-pop::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 24px;
    width: 11px;
    height: 11px;
    background: var(--sp-bg);
    border-left: 1px solid var(--sp-border);
    border-top: 1px solid var(--sp-border);
    transform: rotate(45deg);
}

.sp-cov-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.sp-cov-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 14px;
}

.sp-cov-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 16px;
    flex: 0 0 auto;
}

    .sp-cov-stat-icon.blue {
        background: #eef2ff;
        color: #4f46e5;
    }

    .sp-cov-stat-icon.green {
        background: #ecfdf5;
        color: #059669;
    }

    .sp-cov-stat-icon.red {
        background: #fef2f2;
        color: #dc2626;
    }

.sp-cov-stat-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sp-text);
}

.sp-cov-stat-label {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-cov-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    overflow: hidden;
}

.sp-cov-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-cov-card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--sp-text);
}

.sp-cov-card-note {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-cov-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .sp-cov-table th {
        text-align: left;
        padding: 9px 16px;
        font-size: 10.5px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--sp-text-muted);
        font-weight: 600;
        background: #fafafa;
        border-bottom: 1px solid var(--sp-border);
    }

    .sp-cov-table td {
        padding: 11px 16px;
        border-bottom: 1px solid #f1f2f4;
        vertical-align: middle;
    }

    .sp-cov-table tr:last-child td {
        border-bottom: 0;
    }

/* Tint the whole row when the window is not fully covered, so gaps read at a
   glance without relying on the bar colour alone. */
.sp-cov-row.short {
    background: #fff7f7;
}

.sp-cov-row.partial {
    background: #fffdf5;
}

.sp-cov-day {
    font-weight: 600;
    color: var(--sp-text);
}

.sp-cov-date {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--sp-text-muted);
}

.sp-cov-hours {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--sp-text);
    white-space: nowrap;
}

.sp-cov-dept {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    background: #eff6ff;
    color: #1d4ed8;
}

    .sp-cov-dept.ops {
        background: #fffbeb;
        color: #b45309;
    }

    .sp-cov-dept.all {
        background: #f3f4f6;
        color: #4b5563;
    }

.sp-cov-meter {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 170px;
}

.sp-cov-bar {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.sp-cov-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: #10b981;
}

    .sp-cov-bar-fill.partial {
        background: #f59e0b;
    }

    .sp-cov-bar-fill.short {
        background: #f87171;
    }

.sp-cov-ratio {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: #059669;
}

    .sp-cov-ratio.partial {
        color: #b45309;
    }

    .sp-cov-ratio.short {
        color: #dc2626;
    }

.sp-cov-ok {
    color: #10b981;
    font-size: 15px;
}

.sp-cov-fix {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-primary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

    .sp-cov-fix:hover {
        text-decoration: underline;
    }

/* ----- Partial coverage detail --------------------------------------------- */

/* The sub-row spelling out which stretches are short. This is the part that
   makes partial coverage actionable rather than just visible. */
.sp-cov-detail td {
    padding: 0 16px 11px 16px;
    border-bottom: 1px solid #f1f2f4;
}

.sp-cov-gaps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
}

.sp-cov-gaps-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sp-text-muted);
    font-weight: 600;
    margin-right: 2px;
}

.sp-cov-gap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    font-size: 11.5px;
    color: #b91c1c;
    white-space: nowrap;
}

.sp-cov-gap-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sp-cov-gap-short {
    font-weight: 700;
}

/* A miniature timeline of the rule's window: green where the minimum is met,
   red where it is not, so the shape of a partial gap is obvious. */
.sp-cov-timeline {
    display: flex;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: #e5e7eb;
    margin-top: 7px;
}

.sp-cov-seg {
    height: 100%;
}

    .sp-cov-seg.ok {
        background: #34d399;
    }

    .sp-cov-seg.short {
        background: #f87171;
    }

.sp-cov-empty {
    padding: 26px 16px;
    text-align: center;
    color: var(--sp-text-muted);
    font-size: 13px;
}

/* Stacked label/control form used inside the wildcard modals. */
.sp-modal-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .sp-modal-form > label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--sp-text-muted);
    }

        .sp-modal-form > label.sp-fw-check {
            flex-direction: row;
            align-items: center;
            gap: 6px;
        }

    .sp-modal-form select[multiple] {
        min-height: 96px;
    }

/* Two-column layout for grouped selects inside modal forms (e.g. add wildcard),
   so related short fields sit side by side instead of stacking full-width. */
.sp-modal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 560px) {
    .sp-modal-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Wildcard tasks sit beside the staffing minimums. Both collapse to a single
   column on narrow screens rather than squeezing two dense tables together. */
.sp-fw-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1200px) {
    .sp-fw-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sp-fw-wc-table td {
    vertical-align: top;
}

/* The unassigned-recurring shelf reuses the wildcard table, but sits on its own
   full-width row beneath the split, so it needs its own top spacing. */
.sp-fw-unassigned {
    margin-top: 16px;
}

.sp-fw-wc-title {
    font-weight: 600;
}

.sp-fw-wc-desc {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-fw-wc-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
}

    .sp-fw-wc-meta span {
        font-size: 11px;
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--sp-primary-soft);
        color: var(--sp-primary);
    }

/* A parked wildcard stays listed so it can be switched back on, but is dimmed
   so it never looks assignable. */
.sp-fw-wc-off {
    opacity: .55;
}

.sp-fw-wc-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.sp-fw-wc-add {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 10px;
}

.sp-fw-wc-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--sp-text-muted);
}

    .sp-fw-wc-inline input {
        width: 64px;
    }

/* ----- Manager framework grid ---------------------------------------------- */

/* Owner's planning period banner. Given a left accent bar so the dates read as
   a constraint handed down from the owner rather than another page heading. */
.sp-mf-period {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid var(--sp-border);
    border-left-width: 4px;
    background: var(--sp-surface, #fff);
}

    .sp-mf-period.final {
        border-left-color: var(--sp-primary);
    }

    .sp-mf-period.draft {
        border-left-color: var(--sp-pending);
    }

.sp-mf-period-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sp-mf-period-main > i {
        font-size: 20px;
        color: var(--sp-text-muted);
    }

.sp-mf-period-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sp-text-muted);
}

.sp-mf-period-dates {
    font-size: 15px;
    font-weight: 600;
}

.sp-mf-period-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-mf-period-span {
    font-size: 12px;
    color: var(--sp-text-muted);
}

/* Template save/load bar. */
.sp-mf-templates {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
}

.sp-mf-tpl-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-mf-tpl-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    white-space: nowrap;
}

.sp-mf-tpl-manage {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sp-mf-tpl-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 2px 6px 2px 9px;
    border-radius: 999px;
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
}

/* Report of what a template load had to drop. Rendered as a list rather than a
   flash because each skipped person or task is separately actionable. */
.sp-mf-tpl-warnings {
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 13px;
}

.sp-mf-tpl-warn-head {
    font-weight: 600;
    margin-bottom: 6px;
}

.sp-mf-tpl-warnings ul {
    margin: 0;
    padding-left: 22px;
}

.sp-mf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sp-mf-weeknav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-mf-weeklabel {
    font-weight: 600;
    font-size: 13px;
    color: var(--sp-text);
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 7px 14px;
}

.sp-mf-grid-wrap {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    overflow: hidden;
}

.sp-mf-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .sp-mf-grid th {
        padding: 10px 12px;
        font-size: 10.5px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--sp-text-muted);
        font-weight: 600;
        background: #fafafa;
        border-bottom: 1px solid var(--sp-border);
        text-align: center;
    }

        .sp-mf-grid th.sp-mf-emp-col {
            text-align: left;
            width: 190px;
        }

    .sp-mf-grid td {
        border-bottom: 1px solid #f1f2f4;
        border-left: 1px solid #f1f2f4;
        padding: 6px;
        vertical-align: top;
        height: 74px;
    }

        .sp-mf-grid td.sp-mf-emp-cell {
            border-left: 0;
            padding: 10px 12px;
            vertical-align: middle;
        }

/* Collapsible department bands in the scheduling grid. */
.sp-mf-grid tr.sp-mf-deptrow > th {
    padding: 0;
    border-left: 0;
    background: var(--sp-surface-2, #f1f5f9);
}

.sp-mf-deptbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

    .sp-mf-deptbtn:hover {
        background: rgba(79, 70, 229, .07);
    }

    .sp-mf-deptbtn i {
        font-size: 12px;
        color: #64748b;
    }

.sp-mf-deptname {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #0f172a;
    text-transform: uppercase;
}

.sp-mf-deptmeta {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.sp-mf-dow {
    display: block;
    font-size: 11px;
    color: var(--sp-text-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.sp-mf-emp {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sp-mf-emp-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--sp-text);
    line-height: 1.2;
}

.sp-mf-emp-sub {
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-mf-emp-dept {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 7px;
    border-radius: 5px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 10.5px;
    font-weight: 600;
}

/* A single employee/day slot in the schedule grid. Holds either shift chips
   or the dashed add button, and is the target the Coverage "Fix" link jumps to. */
.sp-mf-cell {
    vertical-align: top;
    padding: 6px;
    min-width: 132px;
}

.sp-mf-shift {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 7px 9px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .sp-mf-shift:hover {
        border-color: var(--sp-primary);
        box-shadow: 0 2px 8px rgba(37,99,235,.12);
    }

    .sp-mf-shift + .sp-mf-shift {
        margin-top: 5px;
    }

.sp-mf-shift-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sp-text);
}

.sp-mf-shift-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--sp-primary-soft);
    color: #1d4ed8;
    font-size: 10.5px;
    font-weight: 600;
}

    .sp-mf-shift-loc.virtual {
        background: #ecfdf5;
        color: #059669;
    }

.sp-mf-shift-note {
    margin-top: 3px;
    font-size: 10.5px;
    color: var(--sp-text-muted);
}

/* Empty cells stay visibly actionable without shouting. */
.sp-mf-add {
    width: 100%;
    height: 100%;
    min-height: 60px;
    border: 1px dashed #d8dbe0;
    border-radius: 8px;
    background: transparent;
    color: #c2c7ce;
    font-size: 16px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

    .sp-mf-add:hover {
        border-color: var(--sp-primary);
        color: var(--sp-primary);
        background: var(--sp-primary-soft);
    }

    /* A cell that already has shifts keeps a slim "add another" strip so a
       second shift on the same day is one click away without crowding out
       the shifts already there. */
    .sp-mf-add.more {
        min-height: 0;
        height: auto;
        padding: 2px 0;
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.1;
    }

/* The task a shift is scheduled to cover, shown on the shift chip. */
.sp-mf-shift-task {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 10.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Small helper text under a modal field. */
.sp-field-hint {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}

/* Flashed when the Coverage panel's "Fix" jumps to a day/department. */
.sp-mf-highlight {
    animation: sp-mf-flash 2s ease-out;
}

@keyframes sp-mf-flash {
    0%, 40% {
        background: #fef3c7;
        box-shadow: inset 0 0 0 2px #f59e0b;
    }

    100% {
        background: transparent;
        box-shadow: none;
    }
}

.sp-mf-locations {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sp-mf-loc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 7px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    font-size: 12px;
    color: var(--sp-text);
    cursor: pointer;
    transition: all .15s ease;
}

    .sp-mf-loc-chip:hover {
        border-color: var(--sp-primary);
    }

    .sp-mf-loc-chip.selected {
        background: #1e3a8a;
        border-color: #1e3a8a;
        color: #fff;
    }

/* Multi-select employee picker in the Assign Shift modal: same chip language
   as locations, but scrollable since a period can have many employees. */
.sp-mf-emp-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-height: 140px;
    overflow-y: auto;
    padding: 2px;
}

.sp-mf-emp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    font-size: 12px;
    color: var(--sp-text);
    cursor: pointer;
    transition: all .15s ease;
}

    .sp-mf-emp-chip:hover {
        border-color: var(--sp-primary);
    }

    .sp-mf-emp-chip.selected {
        background: var(--sp-primary);
        border-color: var(--sp-primary);
        color: #fff;
    }

    .sp-mf-emp-chip:disabled,
    .sp-mf-emp-chip-locked {
        opacity: .4;
        cursor: not-allowed;
    }

/* Multi-select task picker: chips instead of a <select multiple>, matching
   the employee/location pickers so the whole modal reads consistently. */
.sp-mf-task-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-height: 140px;
    overflow-y: auto;
    padding: 2px;
}

.sp-mf-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 7px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    font-size: 12px;
    color: var(--sp-text);
    cursor: pointer;
    text-align: left;
    transition: all .15s ease;
}

    .sp-mf-task-chip:hover {
        border-color: var(--sp-primary);
    }

    .sp-mf-task-chip.selected {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

.sp-mf-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--sp-border);
    font-size: 12px;
    color: var(--sp-text-muted);
}

/* ----- Task activity timeline (task drawer audit log) --------------------- */

.sp-tal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sp-tal-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    background: var(--sp-surface-alt, #eef2ff);
    border-radius: 999px;
    padding: 2px 10px;
}

.sp-tal {
    list-style: none;
    margin: 0;
    padding: 0 0 0 6px;
    max-height: 340px;
    overflow-y: auto;
}

.sp-tal-empty {
    padding: 18px 4px;
    text-align: center;
    font-size: 13px;
    color: var(--sp-text-muted);
}

.sp-tal-day {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 4px 0 8px;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sp-text-muted);
    background: var(--sp-surface, #fff);
}

.sp-tal-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 16px 0;
}

    /* Connector line running through the icon column. */
    .sp-tal-row::before {
        content: "";
        position: absolute;
        left: 13px;
        top: 26px;
        bottom: 0;
        width: 2px;
        background: var(--sp-border);
    }

    .sp-tal-row:last-child {
        padding-bottom: 2px;
    }

        .sp-tal-row:last-child::before {
            display: none;
        }

.sp-tal-dot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #e2e8f0;
    color: #334155;
    box-shadow: 0 0 0 3px var(--sp-surface, #fff);
}

.sp-tal-row.is-created .sp-tal-dot {
    background: #dbeafe;
    color: #1d4ed8;
}

.sp-tal-row.is-edited .sp-tal-dot,
.sp-tal-row.is-status .sp-tal-dot {
    background: #e2e8f0;
    color: #334155;
}

.sp-tal-row.is-assigned .sp-tal-dot {
    background: #ede9fe;
    color: #6d28d9;
}

.sp-tal-row.is-pending .sp-tal-dot {
    background: #fef3c7;
    color: #b45309;
}

.sp-tal-row.is-approved .sp-tal-dot,
.sp-tal-row.is-completed .sp-tal-dot {
    background: #dcfce7;
    color: #15803d;
}

.sp-tal-row.is-rejected .sp-tal-dot,
.sp-tal-row.is-deleted .sp-tal-dot {
    background: #fee2e2;
    color: #b91c1c;
}

.sp-tal-body {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--sp-surface-alt, #f8fafc);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 8px 12px;
}

.sp-tal-summary {
    font-size: 13px;
    line-height: 1.4;
    color: var(--sp-text);
    overflow-wrap: anywhere;
}

.sp-tal-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-tal-actor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--sp-text);
}

.sp-tal-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--sp-primary);
    color: #fff;
}

.sp-tal-role {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface, #fff);
    font-weight: 600;
}

.sp-tal-time {
    margin-left: auto;
    white-space: nowrap;
    cursor: help;
}

/* ===========================================================================
   SALES WORKSPACE (Dashboard / Leads / Follow-ups)
   Shared shell for the sales pages: a section sub-nav, a left filter rail, KPI
   cards and a dense scrollable table. Built on the existing --sp-* tokens so
   these pages stay consistent with the rest of the app.
   =========================================================================== */

/* ----- Section heading + sub-nav ------------------------------------------ */

.sp-section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sp-text-muted);
    margin-bottom: 2px;
}

.sp-section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.sp-section-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

.sp-section-count {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sp-text-muted);
}

/* Underlined tab strip, distinct from the pill-style .sp-tabs used elsewhere. */
.sp-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid var(--sp-border);
    margin-bottom: 18px;
}

.sp-subnav-item {
    position: relative;
    padding: 8px 2px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

    .sp-subnav-item:hover {
        color: var(--sp-primary);
    }

    .sp-subnav-item.active {
        color: var(--sp-text);
        border-bottom-color: var(--sp-primary);
    }

    /* A tab for a section that exists in the design but not yet in the app.
       Shown rather than hidden so the strip matches the reference, but it does
       not respond to hover: there is nowhere for it to go. */
    .sp-subnav-item.is-disabled {
        opacity: .55;
        cursor: default;
    }

        .sp-subnav-item.is-disabled:hover {
            color: var(--sp-text-muted);
        }

.sp-subnav-badge {
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ----- Workspace layout: left rail + content ------------------------------ */

.sp-workspace {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.sp-rail {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sp-rail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-text);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

    .sp-rail-item:hover {
        background: var(--sp-bg);
    }

    .sp-rail-item.active {
        background: var(--sp-bg);
        font-weight: 700;
    }

.sp-rail-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
}

/* ----- Filter row --------------------------------------------------------- */

.sp-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.sp-filter-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-primary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* The lead list's dropdown filters read as a row of links in the reference
   rather than boxed inputs, so the select chrome is stripped back. */
.sp-lead-filters {
    gap: 10px;
}

    .sp-lead-filters .sp-input {
        width: auto;
        padding: 4px 6px;
        border-color: transparent;
        background: none;
        font-size: 13px;
        font-weight: 600;
        color: var(--sp-primary);
        cursor: pointer;
    }

        .sp-lead-filters .sp-input:hover,
        .sp-lead-filters .sp-input:focus {
            border-color: var(--sp-border);
            background: var(--sp-surface);
        }

.sp-search {
    position: relative;
    margin-left: auto;
}

    .sp-search .sp-input {
        padding-right: 32px;
        min-width: 240px;
    }

    .sp-search .bi {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--sp-text-muted);
        pointer-events: none;
        font-size: 13px;
    }

/* ----- KPI cards ---------------------------------------------------------- */

.sp-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 18px;
}

.sp-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-right: 1px solid var(--sp-border);
}

    .sp-kpi:last-child {
        border-right: 0;
    }

.sp-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 8px;
    background: var(--sp-bg);
    color: var(--sp-text-muted);
    font-size: 17px;
}

.sp-kpi.is-done .sp-kpi-icon { background: #ecfdf5; color: var(--sp-done); }
.sp-kpi.is-info .sp-kpi-icon { background: var(--sp-primary-soft); color: var(--sp-primary); }
.sp-kpi.is-warn .sp-kpi-icon { background: #fffbeb; color: var(--sp-pending); }
.sp-kpi.is-alt .sp-kpi-icon { background: #f5f3ff; color: #7c3aed; }

.sp-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    margin-bottom: 2px;
}

.sp-kpi-period {
    font-weight: 500;
    opacity: .75;
}

.sp-kpi-value {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--sp-done);
}

.sp-kpi.is-info .sp-kpi-value { color: #0891b2; }
.sp-kpi.is-alt .sp-kpi-value { color: #7c3aed; }

/* ----- Open items / metric panels ----------------------------------------- */

.sp-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.sp-metric {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    background: var(--sp-bg);
    color: var(--sp-text-muted);
    font-size: 15px;
}

.sp-metric-label {
    flex: 1;
    font-size: 13px;
    color: var(--sp-text-muted);
}

.sp-metric-value {
    font-size: 20px;
    font-weight: 700;
}

    .sp-metric-value.is-alert {
        color: var(--sp-overdue);
    }

/* ----- Dense scrollable table --------------------------------------------- */

/* The sales tables carry far more columns than fit; the wrapper scrolls
   horizontally while the surrounding layout stays put. */
.sp-table-scroll {
    overflow-x: auto;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
}

    .sp-table-scroll .sp-table {
        margin: 0;
        border: 0;
        border-radius: 0;
        min-width: 100%;
        white-space: nowrap;
    }

.sp-table.dense th,
.sp-table.dense td {
    padding: 10px 14px;
    font-size: 13px;
}

.sp-table.dense th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sp-text-muted);
    background: var(--sp-surface);
}

/* Sortable headers keep the caret inline so the label never shifts on toggle. */
.sp-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

    .sp-sort:hover {
        color: var(--sp-primary);
    }

    .sp-sort .bi {
        font-size: 10px;
        opacity: .45;
    }

    .sp-sort.is-active {
        color: var(--sp-text);
    }

        .sp-sort.is-active .bi {
            opacity: 1;
            color: var(--sp-primary);
        }

th.is-sorted {
    background: var(--sp-primary-soft);
}

.sp-cell-strong {
    font-weight: 600;
    color: var(--sp-text);
}

.sp-cell-muted {
    color: var(--sp-text-muted);
}

.sp-cell-alert {
    color: var(--sp-overdue);
    font-weight: 600;
}

/* ----- Pagination --------------------------------------------------------- */

.sp-pager {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}

.sp-pager-item {
    padding: 6px 12px;
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    background: var(--sp-surface);
    color: var(--sp-text);
    font-size: 13px;
    text-decoration: none;
}

    .sp-pager-item:hover {
        border-color: var(--sp-primary);
        color: var(--sp-primary);
    }

    .sp-pager-item.active {
        background: var(--sp-primary);
        border-color: var(--sp-primary);
        color: #fff;
        font-weight: 600;
    }

    .sp-pager-item.disabled {
        color: var(--sp-text-muted);
        opacity: .55;
        pointer-events: none;
    }

/* ----- Table row overflow menu -------------------------------------------- */

.sp-rowmenu {
    position: relative;
}

/* Trailing actions column: sized to the kebab and right-aligned so the menu
   opens off the edge of the table rather than over the last data column. */
.sp-col-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

    .sp-rowmenu > summary {
        list-style: none;
        cursor: pointer;
        color: var(--sp-text-muted);
        padding: 2px 6px;
        border-radius: 6px;
    }

        .sp-rowmenu > summary::-webkit-details-marker {
            display: none;
        }

        .sp-rowmenu > summary:hover {
            background: var(--sp-hover, #f3f4f6);
            color: var(--sp-text);
        }

.sp-rowmenu-panel {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 150px;
    padding: 6px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

    .sp-rowmenu-panel a,
    .sp-rowmenu-panel button {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 7px 10px;
        border: 0;
        border-radius: 6px;
        background: none;
        color: var(--sp-text);
        font-size: 13px;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

        .sp-rowmenu-panel a:hover,
        .sp-rowmenu-panel button:hover {
            background: var(--sp-hover, #f3f4f6);
        }

/* ----- Add container form ------------------------------------------------- */

.sp-container-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

    .sp-container-form label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--sp-text-muted);
        text-transform: uppercase;
        letter-spacing: .02em;
    }

/* Buttons that steer the page itself never belong on the printed sheet. */
@media print {
    .sp-no-print {
        display: none !important;
    }
}

/* Month/Week segmented control on the resource calendar, pushed to the far end
   of the toolbar as in the reference. */
.sp-cal-span {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

/* ----- Follow-ups list ---------------------------------------------------- */

/* Overdue dates are coloured inline rather than pilled: the reference keeps the
   row quiet and lets the red date carry the urgency on its own. */
.sp-cell-overdue {
    color: var(--sp-danger, #d64545);
    font-weight: 600;
}

.sp-followup-actions {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

    .sp-followup-actions form {
        display: flex;
        gap: .25rem;
    }

/* ----- Move out pick sheet ------------------------------------------------ */

/* Sized for paper: a plain sheet with a wide tick column the picker signs off. */
.sp-picksheet {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-picksheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

    .sp-picksheet-head h1 {
        margin: 0;
        font-size: 22px;
    }

    .sp-picksheet-head p {
        margin: 4px 0 0;
        font-size: 13px;
    }

    .sp-picksheet-head .sp-no-print {
        display: flex;
        gap: 8px;
    }

.sp-picksheet-table .num {
    text-align: right;
}

.sp-picksheet-tick {
    width: 90px;
    border-left: 1px solid var(--sp-border);
}

.sp-picksheet-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 16px;
    font-size: 13px;
    color: var(--sp-text-muted);
}

/* ----- Opportunity detail workspace --------------------------------------- */

/* Main panel plus a fixed-width card stack. The sidebar is a set width rather
   than a fraction so the cards keep a readable form column as the main panel
   grows with wide tables. */
.sp-workspace-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.sp-workspace-main,
.sp-workspace-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Customer profiles put the card stack on the left instead of the right, so
   the contact and activity rail reads before the deal history. */
.sp-workspace-detail.side-first {
    grid-template-columns: 320px minmax(0, 1fr);
}

.sp-tabstrip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

    .sp-tabstrip.sub {
        margin-bottom: 12px;
    }

.sp-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

    .sp-card-head h3 {
        margin: 0;
    }

.sp-muted {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-form-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 14px;
}

    .sp-form.stacked {
        flex-direction: column;
        align-items: stretch;
    }

    .sp-form.stacked .sp-field,
    .sp-form.stacked .sp-input,
    .sp-form.stacked textarea {
        width: 100%;
    }

.sp-row-actions {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}

.sp-btn.icon {
    padding: 4px 8px;
    line-height: 1;
}

/* Right-aligned so figures line up on the decimal point down a money column. */
.sp-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Voided payments stay in the ledger for the audit trail, so they are muted
   rather than removed. */
.sp-table tr.is-voided td {
    color: var(--sp-text-muted);
    text-decoration: line-through;
}

.sp-mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-mini-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sp-border);
}

    .sp-mini-row:last-child {
        border-bottom: 0;
    }

    .sp-mini-row.is-done .sp-mini-title {
        color: var(--sp-text-muted);
        text-decoration: line-through;
    }

.sp-mini-title {
    font-size: 13px;
    font-weight: 600;
}

.sp-mini-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-mini-group + .sp-mini-group {
    margin-top: 12px;
}

.sp-mini-group-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sp-text-muted);
}

.sp-metric-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-empty-state.compact {
    padding: 14px 0;
    font-size: 12px;
}

.sp-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-timeline-item {
    padding-left: 12px;
    border-left: 2px solid var(--sp-border);
}

.sp-timeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sp-timeline-when,
.sp-timeline-who {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-timeline-body {
    margin: 6px 0 0;
    font-size: 13px;
}

@media (max-width: 1200px) {
    .sp-workspace-detail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .sp-workspace {
        grid-template-columns: 1fr;
    }

    .sp-rail {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .sp-search {
        margin-left: 0;
        width: 100%;
    }

        .sp-search .sp-input {
            width: 100%;
        }
}

/* ----- Dispatch board ----------------------------------------------------- */

.sp-dispatch-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.sp-dispatch-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-date-nav {
    display: flex;
    align-items: center;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    overflow: hidden;
}

.sp-date-step {
    padding: 7px 10px;
    color: var(--sp-text-muted);
    text-decoration: none;
}

.sp-date-step:hover { background: var(--sp-surface-alt); }

.sp-date-form { margin: 0; }

.sp-date-form .sp-input {
    border: 0;
    border-radius: 0;
    text-align: center;
}

/* A pill that is also a button. Styled from .sp-pill so the confirmation
   colours stay identical whether the row is interactive or read-only. */
.sp-pill-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
}

.sp-pill-btn.green { background: #ecfdf5; color: var(--sp-done); }
.sp-pill-btn.amber { background: #fffbeb; color: var(--sp-pending); }
.sp-pill-btn:hover { filter: brightness(0.95); }

/* Dispatch tables carry more columns than they can fit, so they scroll
   horizontally inside the card rather than forcing the whole page sideways. */
.sp-scroll-x { overflow-x: auto; }

.sp-dispatch-table { min-width: 1100px; }

.sp-crew-cell {
    display: flex;
    gap: 12px;
    color: var(--sp-text-muted);
    font-size: 12px;
}

.sp-dispatch-board {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.sp-dispatch-rail {
    flex: 0 0 240px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    overflow: hidden;
}

.sp-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border);
    font-size: 13px;
    font-weight: 700;
}

.sp-rail-list {
    max-height: 560px;
    overflow-y: auto;
    padding: 8px;
}

/* Tab panels are toggled with the hidden attribute, so no display rule further
   down the sheet may quietly bring an inactive panel back. */
.sp-rail-list[hidden],
.sp-dispatch-rail [hidden] {
    display: none !important;
}

.sp-rail-item {
    display: flex;
    /* The generic .sp-rail-item earlier in the sheet is a two-ended nav row and
       leaves justify-content: space-between behind, which pushes the avatar and
       the name apart. A dispatch rail row reads left to right instead. */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
}

.sp-rail-item:hover { background: var(--sp-surface-alt); }

.sp-rail-code {
    flex: 0 0 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.sp-rail-name { font-size: 13px; font-weight: 600; }

.sp-rail-meta {
    font-size: 11px;
    color: var(--sp-text-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-rail-flag { color: var(--sp-pending); font-weight: 600; }

.sp-rail-empty { padding: 12px; font-size: 12px; }

/* Role groups in the crew rail. The header is a button so it can collapse. */
.sp-rail-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: var(--sp-surface-alt);
    border: 0;
    border-bottom: 1px solid var(--sp-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
}

/* Chips naming the runs a crew member is booked to. */
.sp-rail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.sp-rail-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--sp-surface-alt);
    color: var(--sp-text-muted);
}

/* Number of runs a crew member is on, shown beside their name. */
.sp-rail-count { color: var(--sp-text-muted); font-weight: 400; }

/* Add-resource control pinned to the foot of a rail list. */
.sp-rail-foot {
    padding: 10px 12px;
    border-top: 1px solid var(--sp-border);
}

.sp-rail-foot .sp-input { width: 100%; font-size: 12px; }

/* Custom office arrival time: label, the time input and the clear action all on
   one line, so the override reads as a single setting rather than a form. */
.sp-pop-office {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.sp-pop-office-form { display: inline-flex; }

.sp-pop-time {
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Crew-confirmation note shown inline on the job popover. */
.sp-pop-crewnote {
    padding: 10px 0;
    border-bottom: 1px solid var(--sp-border);
    font-size: 12px;
}

.sp-pop-crewnote-text { color: var(--sp-primary); line-height: 1.5; }

.sp-dispatch-grid-wrap {
    flex: 1 1 auto;
    /* Without an explicit zero basis the 820px grid inside forces the flex item
       wider than the board, which pushes the jobs rail off screen instead of
       scrolling the grid. */
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    background: var(--sp-surface);
}

.sp-dispatch-grid { min-width: 820px; }

.sp-grid-head {
    display: flex;
    border-bottom: 1px solid var(--sp-border);
    background: var(--sp-surface-alt);
}

.sp-grid-rowlabel {
    flex: 0 0 190px;
    /* Long template names and crew chips must wrap inside the label rather than
       widening it, or the lane no longer lines up with the hour headings. */
    min-width: 0;
    overflow: hidden;
    padding: 10px 12px;
    border-right: 1px solid var(--sp-border);
}

.sp-grid-hours {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.sp-grid-hour {
    flex: 1 1 0;
    padding: 10px 6px;
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-grid-row {
    display: flex;
    border-bottom: 1px solid var(--sp-border);
    min-height: 84px;
}

.sp-grid-rowname { font-size: 13px; font-weight: 600; }

.sp-grid-rowcrew {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.sp-crew-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--sp-text-muted);
    background: var(--sp-surface-alt);
    border-radius: 4px;
    padding: 1px 5px;
}

/* The lane is the positioning context for job blocks; the cells behind it are
   only there to draw the hour dividers. */
.sp-grid-lane {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.sp-lane-cell {
    flex: 1 1 0;
    border-right: 1px solid var(--sp-border-soft, #f1f5f9);
}

.sp-job-block {
    position: absolute;
    top: 6px;
    bottom: 6px;
    border-radius: 6px;
    padding: 6px 8px;
    overflow: hidden;
    font-size: 11px;
    border-left: 3px solid var(--sp-primary);
    background: var(--sp-primary-soft);
}

/* Confirmed work is green and settled; unconfirmed is amber and still needs a
   phone call. Same vocabulary as the confirmation pills, so the board and the
   list never say different things about the same job. */
.sp-job-block.confirmed {
    border-left-color: var(--sp-done);
    background: #ecfdf5;
}

.sp-job-block.unconfirmed {
    border-left-color: var(--sp-pending);
    background: #fffbeb;
}

.sp-job-title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-job-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--sp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A short job still has to be readable, and two runs on the same truck must not
   sit on top of each other, so blocks get a floor width and lift on hover. */
.sp-job-block {
    min-width: 88px;
    z-index: 1;
}

    .sp-job-block:hover,
    .sp-job-block:focus-visible {
        z-index: 3;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
    }

/* The rail row is a flex line: without this the name/meta column collapses and
   the trailing action buttons squeeze the text out of the item. */
.sp-rail-body {
    flex: 1 1 auto;
    min-width: 0;
}

    .sp-rail-body .sp-rail-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* The jobs rail sits on the right of the board and must not be squeezed out by
   the scrolling grid between the two rails. */
.sp-dispatch-rail.right {
    flex: 0 0 260px;
}

.sp-now-line {
    position: absolute;
    top: 0;
    bottom: -1000px;
    width: 1px;
    background: var(--sp-overdue);
    z-index: 2;
}

.sp-now-dot {
    position: absolute;
    top: 4px;
    left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sp-overdue);
}

.sp-unscheduled-card {
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-primary);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 11px;
}

.sp-assign-form { margin-top: 6px; }

.sp-assign-form .sp-input { font-size: 11px; padding: 4px 6px; }

@media (max-width: 1200px) {
    /* Below this the three columns cannot all hold their content, so the rails
       stack above and below the grid rather than crushing it. */
    .sp-dispatch-board { flex-wrap: wrap; }
    .sp-dispatch-rail { flex: 1 1 100%; }
}

/* ----- Dispatch job popover ----------------------------------------------- */

.sp-pop-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 40;
}

.sp-job-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(500px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--sp-surface);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    z-index: 41;
    overflow: hidden;
}

.sp-pop-header {
    position: relative;
    padding: 14px 40px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-pop-header.confirmed { background: #d1fae5; }
.sp-pop-header.unconfirmed { background: #fef3c7; }

.sp-pop-phone { margin-left: 6px; font-weight: 500; }

.sp-pop-type {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sp-pop-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    padding: 4px;
}

.sp-pop-body {
    padding: 14px 16px;
    overflow-y: auto;
    font-size: 13px;
}

.sp-pop-row {
    display: flex;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-pop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sp-border);
}

.sp-pop-label {
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-pop-value { font-weight: 600; }

.sp-pop-stops { padding: 12px 0; border-bottom: 1px solid var(--sp-border); }

.sp-pop-stop { margin-bottom: 10px; }

.sp-pop-address { font-size: 14px; font-weight: 600; }

.sp-pop-crew { padding: 12px 0; border-bottom: 1px solid var(--sp-border); }

.sp-pop-notes { padding-top: 12px; }

.sp-pop-note-tabs {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--sp-border);
    margin: 8px 0 10px;
}

.sp-pop-note-tab {
    position: relative;
    border: 0;
    background: transparent;
    padding: 4px 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
}

.sp-pop-note-tab.active {
    color: var(--sp-primary);
    box-shadow: inset 0 -2px 0 var(--sp-primary);
}

.sp-note-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sp-primary);
    vertical-align: super;
    margin-left: 2px;
}

.sp-pop-note-panel { font-size: 13px; white-space: pre-wrap; }

/* ----- Dispatch trips ----------------------------------------------------- */

.sp-trips-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.sp-trip-name { font-weight: 600; }

.sp-trip-notes { font-size: 12px; }

.sp-trip-status { padding: 4px 8px; font-size: 12px; }

.sp-trip-actions { text-align: right; }

.sp-trip-detail > td {
    background: var(--sp-surface-alt, #f8fafc);
    padding: 10px 14px 14px;
}

.sp-trip-jobs {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 13px;
}

.sp-trip-jobs li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}

.sp-inline-form { display: inline-flex; }

/* ----- Modal -------------------------------------------------------------- */

.sp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.sp-modal-backdrop[hidden] { display: none; }

.sp-modal {
    width: min(460px, calc(100vw - 32px));
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--sp-surface);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
    overflow: hidden;
}

.sp-modal-header,
.sp-modal-footer {
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

.sp-modal-header {
    justify-content: space-between;
    border-bottom: 1px solid var(--sp-border);
}

.sp-modal-header h3 { margin: 0; font-size: 15px; }

.sp-modal-body {
    padding: 14px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-modal-footer {
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--sp-border);
}

.sp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-field > span {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
}

/* ----- Resource calendar -------------------------------------------------- */

.sp-cal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sp-cal-title {
    margin: 0;
    font-size: 16px;
    min-width: 170px;
}

.sp-cal-totals {
    margin-left: auto;
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--sp-text-muted);
}

.sp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.sp-cal-head {
    background: var(--sp-surface-alt, #f8fafc);
    padding: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sp-text-muted);
    text-align: center;
}

.sp-cal-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 112px;
    padding: 10px 12px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
}

a.sp-cal-cell:hover {
    background: var(--sp-surface);
    border-color: var(--sp-primary);
}

.sp-cal-cell.outside {
    background: var(--sp-surface-alt, #f8fafc);
    color: var(--sp-text-muted);
}

.sp-cal-cell.today { box-shadow: none; }

/* The reference marks load with the fill bar alone, so the cells stay plain
   white and the only colour in the grid is meaningful. */
.sp-cal-cell.light,
.sp-cal-cell.busy,
.sp-cal-cell.full,
.sp-cal-cell.today.light,
.sp-cal-cell.today.busy,
.sp-cal-cell.today.full { box-shadow: none; }

.sp-cal-cellhead {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sp-cal-daynum {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.1;
}

/* Today reads as a filled disc against the plain day numbers, matching the
   reference rather than outlining the whole cell. */
.sp-cal-cell.today .sp-cal-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--sp-primary);
    color: #fff;
    font-size: 14px;
}

.sp-cal-month,
.sp-cal-weekday {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sp-text-muted);
}

.sp-cal-month { color: var(--sp-primary); }

.sp-cal-quiet { color: var(--sp-text-muted); }

.sp-cal-jobs { font-weight: 600; }

.sp-cal-meta { color: var(--sp-text-muted); }

.sp-cal-meta.hot { color: #dc2626; }

.sp-cal-meta.warn { color: #b45309; }

.sp-job-done {
    float: right;
    color: #15803d;
}

.sp-rail-tabs {
    display: flex;
    border-bottom: 1px solid var(--sp-border);
}

.sp-rail-tab {
    flex: 1;
    padding: 8px 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
}

.sp-rail-tab.active {
    color: var(--sp-primary);
    border-bottom-color: var(--sp-primary);
}

.sp-cal-booked {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-cal-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--sp-surface-alt, #eef2f6);
    overflow: hidden;
}

.sp-cal-bar-fill {
    display: block;
    height: 100%;
    background: var(--sp-primary);
}

.sp-cal-booked-num { flex: none; }

.sp-unscheduled-card.cancelled {
    opacity: .7;
    box-shadow: inset 3px 0 0 #ef4444;
}

.sp-cal-legend {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-cal-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
}

.sp-cal-key.light { background: #93c5fd; }
.sp-cal-key.busy { background: #f59e0b; }
.sp-cal-key.full { background: #ef4444; }

/* ----- Resource calendar -------------------------------------------------- */

.sp-resource-cal-wrap {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sp-resource-cal-wrap .sp-resource-cal { flex: 1; min-width: 0; }

.sp-rail-subhead {
    padding: 10px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sp-text-muted);
}

.sp-cal-cellhead { display: flex; }

.sp-cal-res {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    line-height: 1.5;
}

    .sp-cal-res .bi {
        font-size: 10px;
        opacity: .75;
    }

/* ----- Fleet -------------------------------------------------------------- */

.sp-drawer-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--sp-border);
    background: var(--sp-surface);
}

/* A label wrapping a switch, so the caption sits above the toggle rather than
   beside it as the inline .sp-switch does on its own. */
.sp-switch-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ----- Sales dashboard ---------------------------------------------------- */

.sp-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.sp-card-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--sp-text-muted);
    margin-left: 4px;
}

.sp-card-body {
    padding: 16px;
}

/* The card header only gets its own padding on dashboard cards, because the
   bare .sp-card-head is reused elsewhere as an inline flex row. */
.sp-dash-row .sp-card-head,
.sp-dash-row > .sp-card > .sp-card-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-dash-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.sp-dash-person {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-dash-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    background: var(--sp-surface);
    overflow: hidden;
    margin-bottom: 16px;
}

.sp-dash-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-right: 1px solid var(--sp-border);
}

    .sp-dash-kpi:last-child {
        border-right: 0;
    }

.sp-dash-kpi-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    font-size: 20px;
}

.sp-dash-kpi-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
}

    .sp-dash-kpi-label span {
        font-size: 11px;
        font-weight: 400;
        color: var(--sp-text-muted);
        margin-left: 4px;
    }

.sp-dash-kpi-value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
}

/* Shared accents for the KPI icons and their values. */
.sp-dash-kpi-icon.is-done, .sp-dash-open-icon.is-done { background: #ecfdf5; color: var(--sp-done); }
.sp-dash-kpi-icon.is-info, .sp-dash-open-icon.is-info { background: var(--sp-primary-soft); color: var(--sp-primary); }
.sp-dash-kpi-icon.is-alt, .sp-dash-open-icon.is-alt { background: #f5f3ff; color: #7c3aed; }
.sp-dash-kpi-icon.is-warn, .sp-dash-open-icon.is-warn { background: #fffbeb; color: var(--sp-pending); }
.sp-dash-open-icon.is-alert { background: #fef2f2; color: var(--sp-overdue); }
.sp-dash-open-icon.is-muted { background: #f3f4f6; color: var(--sp-text-muted); }

.sp-dash-kpi-value.is-done { color: var(--sp-done); }
.sp-dash-kpi-value.is-info { color: var(--sp-primary); }
.sp-dash-kpi-value.is-alt { color: #7c3aed; }
.sp-dash-kpi-value.is-warn { color: var(--sp-pending); }

.sp-dash-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.sp-dash-actions-table {
    width: 100%;
    border-collapse: collapse;
}

    .sp-dash-actions-table th,
    .sp-dash-actions-table td {
        padding: 10px 8px;
        text-align: center;
        font-size: 13px;
    }

    .sp-dash-actions-table thead th {
        font-size: 12px;
        font-weight: 600;
        color: var(--sp-text-muted);
    }

    .sp-dash-actions-table tbody th {
        text-align: left;
        font-weight: 500;
    }

    .sp-dash-actions-table tbody tr + tr th,
    .sp-dash-actions-table tbody tr + tr td {
        border-top: 1px solid var(--sp-border);
    }

.sp-dash-open {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.sp-dash-open-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

    .sp-dash-open-item:not(.is-static):hover {
        background: var(--sp-surface-alt, #f9fafb);
    }

.sp-dash-open-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 15px;
}

.sp-dash-open-label {
    font-size: 13px;
}

    .sp-dash-open-label em {
        font-style: normal;
        font-size: 11px;
        color: var(--sp-text-muted);
    }

.sp-dash-open-value {
    font-size: 20px;
    font-weight: 700;
}

/* The revenue chart is bars in a flex row rather than a canvas: it is a shape,
   not a dataset the user reads exact values off, and the tooltip covers detail. */
.sp-dash-chart-frame {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

/* Tick labels sit in their own column so the bars keep the full remaining
   width rather than being indented by the longest currency string. */
.sp-dash-chart-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 180px;
    font-size: 11px;
    color: var(--sp-text-muted);
    text-align: right;
    white-space: nowrap;
}

.sp-dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 180px;
    flex: 1 1 auto;
    border-left: 1px solid var(--sp-border);
    border-bottom: 1px solid var(--sp-border);
    padding-left: 4px;
}

.sp-dash-bar-slot {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.sp-dash-bar {
    width: 100%;
    min-height: 2px;
    background: var(--sp-primary);
    border-radius: 2px 2px 0 0;
}

.sp-dash-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-dash-referral + .sp-dash-referral {
    margin-top: 14px;
}

.sp-dash-referral-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}

.sp-dash-referral-name {
    font-size: 13px;
    font-weight: 600;
}

.sp-dash-referral-value {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-dash-referral-track {
    height: 10px;
    border-radius: 5px;
    background: #f3f4f6;
    overflow: hidden;
}

.sp-dash-referral-fill {
    height: 100%;
    border-radius: 5px;
    background: var(--sp-done);
}

@media (max-width: 1100px) {
    .sp-dash-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .sp-dash-kpi:nth-child(2) {
        border-right: 0;
    }

    .sp-dash-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .sp-dash-kpis {
        grid-template-columns: 1fr;
    }

    .sp-dash-kpi {
        border-right: 0;
        border-bottom: 1px solid var(--sp-border);
    }

    .sp-dash-open {
        grid-template-columns: 1fr;
    }
}

/* ----- Lead detail -------------------------------------------------------- */

.sp-backlink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sp-primary);
    text-decoration: none;
}

.sp-lead-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.sp-lead-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

    .sp-lead-title h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: var(--sp-primary);
    }

.sp-lead-quote {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-text-muted);
}

.sp-lead-next {
    text-align: right;
}

.sp-lead-next-label {
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-lead-next-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-primary);
}

    .sp-lead-next-value.is-overdue {
        color: var(--sp-overdue);
    }

    .sp-lead-next-value.is-empty {
        color: var(--sp-text-muted);
        font-weight: 400;
    }

.sp-lead-next-owner {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-lead-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 16px;
}

.sp-lead-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Composer */
.sp-composer-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--sp-border);
    margin: -16px -16px 12px;
}

.sp-composer-tab input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sp-composer-tab span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: 13px;
    color: var(--sp-text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.sp-composer-tab input:checked + span {
    color: var(--sp-primary);
    border-bottom-color: var(--sp-primary);
    font-weight: 600;
}

/* Keyboard users get the same visible cue as a focused control, since the real
   radio is hidden. */
.sp-composer-tab input:focus-visible + span {
    outline: 2px solid var(--sp-primary);
    outline-offset: -2px;
}

.sp-composer-body {
    width: 100%;
    resize: vertical;
}

.sp-composer-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.sp-composer-submit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-composer-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px 16px;
    border-top: 1px solid var(--sp-border);
    font-size: 13px;
    color: var(--sp-text-muted);
}

    .sp-composer-stats i {
        margin-right: 4px;
    }

/* Activity feed */
.sp-activity-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 8px;
}

/* The next obligation on a deal, shown in the workspace header so it stays
   true no matter which tab is open. */
.sp-next-followup {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-left: auto;
    text-align: right;
    font-size: .8rem;
}

.sp-next-followup > div {
    display: flex;
    flex-direction: column;
}

.sp-next-followup-label {
    color: var(--sp-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sp-next-followup-due {
    font-weight: 700;
    color: var(--sp-accent, #2563eb);
}

.sp-next-followup-due.is-overdue {
    color: #b91c1c;
}

.sp-next-followup-owner {
    color: var(--sp-muted);
}

/* Heading row on the Sales and Estimate tabs, keeping the title and its
   primary action on one line. */
.sp-estimate-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.sp-rail-address {
    font-weight: 600;
    line-height: 1.35;
}

/* Storage account workspace: a fixed record rail beside the tabbed panel,
   matching how warehouse staff read the account while working a tab. */
.sp-storage-workspace {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .sp-storage-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sp-storage-rail {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}

.sp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.sp-storage-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 20px;
    border-bottom: 1px solid var(--sp-border, #e5e7eb);
    text-align: center;
}

.sp-avatar-lg {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2f6fd0;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.sp-storage-name {
    margin: 0;
    font-size: 1.15rem;
}

.sp-storage-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--sp-muted-fg, #6b7280);
    font-size: .85rem;
}

/* Rail cards collapse individually so a long account still fits on screen. */
.sp-rail-card {
    border: 0;
    border-bottom: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 0;
    margin: 0;
}

.sp-rail-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.sp-rail-card-head::-webkit-details-marker {
    display: none;
}

.sp-rail-card-head h3 {
    margin: 0;
    font-size: 1rem;
}

.sp-rail-card[open] .sp-rail-chevron {
    transform: rotate(180deg);
}

.sp-rail-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px;
}

.sp-rail-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-rail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sp-rail-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sp-muted-fg, #6b7280);
}

.sp-rail-value {
    display: flex;
    flex-direction: column;
    font-size: .9rem;
}

.sp-rail-value.strong {
    font-weight: 600;
}

.sp-rail-sub {
    font-size: .75rem;
    color: var(--sp-muted-fg, #6b7280);
}

.sp-rail-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-input-narrow {
    max-width: 90px;
}

.sp-rail-save {
    align-self: flex-start;
}

.sp-lot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sp-lot-add > summary {
    cursor: pointer;
    list-style: none;
}

.sp-lot-add > summary::-webkit-details-marker {
    display: none;
}

.sp-icon-btn {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.sp-icon-btn.danger {
    color: #d97706;
}

.sp-icon-btn.danger:hover {
    background: #fef3c7;
}

.sp-storage-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-storage-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Billing sections read as separated blocks, as in the reference. */
.sp-billing-section .sp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-billing-body {
    padding: 16px;
}

.sp-billing-empty {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px;
    padding: 24px;
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 6px;
}

.sp-billing-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-hover, #f3f4f6);
    color: var(--sp-muted-fg, #6b7280);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.sp-billing-empty-title {
    font-weight: 600;
}

.sp-inventory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.sp-inventory-search {
    position: relative;
    flex: 1 1 280px;
    max-width: 340px;
}

.sp-inventory-search input {
    width: 100%;
    padding-right: 32px;
}

.sp-inventory-search i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sp-muted-fg, #6b7280);
    pointer-events: none;
}

.sp-inventory-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
}

.sp-inventory-empty td {
    padding: 16px;
    color: var(--sp-muted-fg, #6b7280);
}

/* Drop zone mirrors the reference's dashed target. */
.sp-dropzone {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 16px;
    padding: 16px;
    border: 1px dashed var(--sp-border, #d1d5db);
    border-radius: 6px;
    color: var(--sp-muted-fg, #6b7280);
    text-decoration: none;
}

.sp-dropzone:hover {
    border-color: #2f6fd0;
    color: #2f6fd0;
}

.sp-dropzone-icon {
    width: 96px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--sp-border, #d1d5db);
    border-radius: 6px;
    font-size: 1.5rem;
    flex: 0 0 auto;
}

/* The label is the click target, so the native file input is hidden but kept
   focusable for keyboard users. */
.sp-filebucket .sp-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.sp-filebucket .sp-dropzone {
    cursor: pointer;
}

.sp-filebucket .sp-dropzone-input:focus-visible + .sp-dropzone {
    border-color: #2f6fd0;
    color: #2f6fd0;
}

.sp-dropzone-readonly {
    cursor: default;
}

/* Highlighted while a file is dragged over the target. */
.sp-dropzone.is-dragover {
    border-color: #2f6fd0;
    color: #2f6fd0;
    background: rgba(47, 111, 208, 0.04);
}

/* Uploaded files listed above the drop target, one row each. */
.sp-filelist {
    list-style: none;
    margin: 0;
    padding: 0 16px;
}

.sp-filelist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--sp-border, #e5e7eb);
}

.sp-filelist li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    text-decoration: none;
}

.sp-filelist li > a:hover {
    text-decoration: underline;
}

.sp-filelist form {
    margin: 0;
}

/* Split button: primary action plus an overflow menu for the destructive
   ones, which are kept behind a click so they cannot be hit by accident. */
.sp-split-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-split-menu {
    position: relative;
}

.sp-split-toggle {
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
}

.sp-split-toggle::-webkit-details-marker {
    display: none;
}

.sp-split-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 240px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.sp-split-item {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}

.sp-split-item:hover {
    background: var(--sp-hover, #f3f4f6);
}

.sp-split-item.danger {
    color: #b91c1c;
}

.sp-split-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--sp-border, #e5e7eb);
    padding-top: 10px;
}

/* Rooms / Items / CP / PBO read as two labelled pairs per row, matching the
   way estimators call the numbers out. */
.sp-inventory-counts {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 6px 10px;
    align-items: baseline;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--sp-border, #e5e7eb);
    font-size: .82rem;
}

.sp-inventory-counts dt {
    color: var(--sp-muted);
    font-weight: 500;
}

.sp-inventory-counts dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

/* Section bar above the composer: names the workspace area and offers the
   one action the reference puts there. */
.sp-lead-actionbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.sp-lead-section {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
}

.sp-lead-section-num {
    font-weight: 500;
    color: var(--sp-muted);
}

.sp-activity-toggle {
    font-size: .78rem;
    color: var(--sp-muted);
}

/* Replies are collapsed rather than removed so the toggle is reversible
   without another request. */
#activity-feed.hide-replies .sp-activity-item.is-reply {
    display: none;
}

.sp-subtabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.sp-subtab {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--sp-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

    .sp-subtab.is-active {
        color: var(--sp-primary);
        border-bottom-color: var(--sp-primary);
        font-weight: 600;
    }

.sp-activity-group {
    margin: 16px 0 8px;
    font-size: 13px;
    color: var(--sp-text-muted);
}

.sp-activity-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
}

    /* An open commitment is the one thing on the feed that still needs doing,
       so it is marked rather than blending into the history. */
    .sp-activity-item.is-followup {
        border-left: 3px solid var(--sp-pending);
    }

.sp-activity-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 14px;
}

    .sp-activity-icon.blue { background: var(--sp-primary-soft); color: var(--sp-primary); }
    .sp-activity-icon.amber { background: #fffbeb; color: var(--sp-pending); }
    .sp-activity-icon.green { background: #ecfdf5; color: var(--sp-done); }
    .sp-activity-icon.gray { background: #f3f4f6; color: var(--sp-text-muted); }

.sp-activity-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.sp-activity-kind {
    font-size: 13px;
    font-weight: 600;
}

.sp-activity-when {
    font-size: 12px;
    color: var(--sp-text-muted);
    white-space: nowrap;
}

    .sp-activity-when.is-overdue {
        color: var(--sp-overdue);
        font-weight: 600;
    }

.sp-activity-title {
    margin-top: 6px;
    font-size: 14px;
}

.sp-activity-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

    .sp-activity-actions .sp-input {
        flex: 1;
    }

/* Rail */
.sp-rail-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}

/* Scoped to the definition-list form of the rail. Unscoped it also matched the
   dispatch resource/jobs rails, replacing their scrolling list with a two column
   grid and, because display wins over the hidden attribute, showing the inactive
   tab panel at the same time as the active one. */
dl.sp-rail-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
    font-size: 13px;
}

    dl.sp-rail-list dt {
        color: var(--sp-text-muted);
    }

    dl.sp-rail-list dd {
        margin: 0;
        text-align: right;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

.sp-rail-form {
    margin-top: 12px;
}

.sp-rail-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sp-rail-inline .sp-input {
        flex: 1;
        min-width: 0;
    }

.sp-rail-stop + .sp-rail-stop {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sp-border);
}

.sp-rail-stop-kind {
    font-size: 12px;
    color: var(--sp-text-muted);
    margin-bottom: 2px;
}

@media (max-width: 1100px) {
    .sp-lead-layout {
        grid-template-columns: 1fr;
    }
}

/* ----- Estimate tab ------------------------------------------------------- */

.sp-estimate-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.sp-estimate-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.sp-estimate-quote {
    color: var(--sp-text-muted);
    font-weight: 600;
}

.sp-estimate-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.sp-estimate-kpi {
    padding: 14px 16px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
}

    /* The total is the figure that goes to the customer, so it is the one card
       that carries emphasis. */
    .sp-estimate-kpi.is-total {
        background: #fff7ed;
        border-color: #fed7aa;
    }

.sp-estimate-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sp-text-muted);
    margin-bottom: 6px;
}

.sp-estimate-kpi-value {
    font-size: 16px;
    font-weight: 600;
}

.sp-estimate-figure {
    font-size: 20px;
    color: var(--sp-primary);
}

.sp-estimate-sep {
    color: var(--sp-border);
    margin: 0 4px;
}

.sp-estimate-kpi-value .is-positive {
    color: var(--sp-done);
}

.sp-estimate-kpi-value .is-negative {
    color: var(--sp-overdue);
}

.sp-estimate-kpi-foot {
    margin-top: 6px;
    font-size: 11px;
    color: var(--sp-text-muted);
}

@media (max-width: 1100px) {
    .sp-estimate-kpis {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .sp-estimate-kpis {
        grid-template-columns: 1fr;
    }
}

.sp-trip-summary {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--sp-text-muted);
    margin-left: auto;
    margin-right: 12px;
}

.sp-trip-label {
    font-weight: 700;
    color: var(--sp-text);
    margin-right: 4px;
}

.sp-note-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sp-primary);
    vertical-align: super;
    margin-left: 3px;
}

.sp-note-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sp-total-list {
    margin: 0 0 8px;
}

.sp-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sp-border);
}

    .sp-total-row dt {
        font-size: 13px;
        color: var(--sp-text-muted);
        margin: 0;
    }

    .sp-total-row dd {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
    }

    /* The figure that goes on the estimate, highlighted the way the rest of the
       rail highlights a summary line. */
    .sp-total-row.is-grand {
        background: #eff6ff;
        border-bottom: none;
        padding: 10px 10px;
        margin: 0 -10px;
        border-radius: 6px;
    }

        .sp-total-row.is-grand dt,
        .sp-total-row.is-grand dd {
            font-size: 14px;
            font-weight: 700;
            color: var(--sp-text);
        }

.sp-total-note {
    font-size: 11px;
    color: var(--sp-text-muted);
    margin-left: 4px;
}

.sp-rail-empty {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--sp-text-muted);
}

.sp-rail-total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sp-border);
    font-size: 13px;
}

.sp-link-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-primary);
    text-decoration: none;
}

    .sp-link-action:hover {
        text-decoration: underline;
    }

/* ----- Tab headings ------------------------------------------------------- */

.sp-tab-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.sp-tab-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.sp-tab-counts {
    display: flex;
    gap: 28px;
}

.sp-tab-count {
    text-align: center;
}

.sp-tab-count-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
}

.sp-tab-count-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sp-text-muted);
}

/* ----- Upload drop zone --------------------------------------------------- */

.sp-dropzone {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border: 2px dashed var(--sp-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--sp-text-muted);
}

    .sp-dropzone:hover,
    .sp-dropzone:focus-within {
        border-color: var(--sp-primary);
        background: #f8fafc;
    }

    .sp-dropzone > .bi {
        font-size: 26px;
    }

/* Hidden visually but still focusable, so the label stays the click target
   without breaking keyboard access. */
.sp-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.sp-dropzone-text {
    font-size: 14px;
}

.sp-dropzone-hint {
    display: block;
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-upload-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 12px;
}

    .sp-upload-row .sp-field {
        flex: 1;
    }

.sp-input-suffix {
    display: flex;
    align-items: stretch;
}

    .sp-input-suffix .sp-input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        flex: 1;
        min-width: 0;
    }

.sp-input-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    color: var(--sp-text-muted);
    background: #f3f4f6;
    border: 1px solid var(--sp-border);
    border-left: none;
    border-radius: 0 6px 6px 0;
}

/* ----- Collapsible file buckets ------------------------------------------- */

.sp-filebucket-head {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

    /* The default disclosure triangle is replaced by the chevron on the right. */
    .sp-filebucket-head::-webkit-details-marker {
        display: none;
    }

    .sp-filebucket-head::marker {
        content: "";
    }

    .sp-filebucket-head:hover {
        background: #f8fafc;
    }

.sp-filebucket-count {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sp-filebucket-chevron {
    color: var(--sp-text-muted);
    transition: transform .15s ease;
}

.sp-filebucket[open] .sp-filebucket-chevron {
    transform: rotate(180deg);
}

/* ----- Storage aging ------------------------------------------------------ */

/* The four overdue bucket cards above the aging table. auto-fit keeps them on
   one row on a wide screen and wraps them rather than squashing them below. */
.sp-aging-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.sp-aging-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: var(--sp-surface, #fff);
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 8px;
}

.sp-aging-card-title {
    font-size: 17px;
    font-weight: 600;
}

.sp-aging-card-hint {
    font-size: 12px;
    color: var(--sp-text-muted);
    margin-top: 2px;
}

.sp-aging-card-value {
    font-size: 19px;
    font-weight: 600;
    color: var(--sp-primary);
    white-space: nowrap;
}

/* Money columns line up on the decimal point only when right aligned, which
   matters most in the totals row beneath them. */
.sp-aging-table .sp-num,
.sp-invoice-table .sp-num {
    text-align: right;
    white-space: nowrap;
}

/* Balances still owed are called out in red, matching the reference. */
.sp-owed {
    color: var(--sp-overdue);
    font-weight: 600;
}

.sp-aging-table tfoot td {
    border-top: 2px solid var(--sp-border, #e5e7eb);
    font-weight: 600;
}

/* ----- Storage account notes ---------------------------------------------- */

.sp-note-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-note {
    display: flex;
    gap: 12px;
}

/* Fixed size so a long or short set of initials does not change the circle. */
.sp-note-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
    font-size: 12px;
    font-weight: 600;
}

.sp-note-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.sp-note-body p {
    margin: 0;
    white-space: pre-wrap;
}

/* The note row is the positioning context for its overflow menu. */
.sp-note {
    position: relative;
}

.sp-note-menu {
    margin-left: auto;
}

.sp-note-menu > summary {
    list-style: none;
    cursor: pointer;
    color: var(--sp-text-muted);
    padding: 2px 6px;
    border-radius: 4px;
}

.sp-note-menu > summary::-webkit-details-marker { display: none; }
.sp-note-menu > summary:hover { background: var(--sp-surface-alt, #f3f4f6); }

/* Anchored to the row so the menu overlays the ledger rather than pushing
   the notes below it down as it opens. */
.sp-note-menu-body {
    position: absolute;
    right: 0;
    z-index: 20;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--sp-surface, #fff);
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

/* ----- Storage ledger entry forms ----------------------------------------- */

.sp-ledger-form {
    margin-top: 16px;
    border-top: 1px solid var(--sp-border, #e5e7eb);
    padding-top: 12px;
}

.sp-ledger-form > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--sp-primary);
}

.sp-ledger-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.sp-ledger-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
}

/* Descriptions and reasons need more room than the numeric fields. */
.sp-ledger-form-wide {
    grid-column: 1 / -1;
}

/* ----- Storage inventory --------------------------------------------------- */

.sp-inv-count {
    font-size: 13px;
    font-weight: 400;
    margin-left: 8px;
}

.sp-inv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 0 16px 12px;
}

.sp-inv-search {
    display: flex;
    gap: .5rem;
    flex: 1 1 320px;
}

.sp-inv-search .sp-input {
    flex: 1;
}

.sp-inv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sp-text-muted);
    white-space: nowrap;
}

/* Table / card switch, pushed to the right of the search row. */
.sp-inv-viewtoggle {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

    .sp-inv-viewtoggle .sp-iconbtn.active {
        background: var(--sp-primary);
        border-color: var(--sp-primary);
        color: #fff;
    }

.sp-inv-filterrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 0 16px 12px;
}

.sp-inv-advanced {
    margin-left: auto;
}

    .sp-inv-advanced > summary {
        list-style: none;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: var(--sp-primary);
    }

        .sp-inv-advanced > summary::-webkit-details-marker {
            display: none;
        }

.sp-inv-advanced-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

    .sp-inv-advanced-panel label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--sp-text-muted);
        text-transform: uppercase;
        letter-spacing: .02em;
    }

/* Selection column stays narrow so the data columns keep their width. */
.sp-inv-check {
    width: 34px;
    text-align: center;
}

.sp-inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
}

.sp-inv-tile {
    padding: 12px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    background: var(--sp-surface);
}

    .sp-inv-tile > header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .sp-inv-tile dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 4px 10px;
        margin: 0;
        font-size: 13px;
    }

    .sp-inv-tile dt {
        color: var(--sp-text-muted);
        font-weight: 600;
    }

    .sp-inv-tile dd {
        margin: 0;
    }

/* A button that reads as a link, for in-card actions. */
.sp-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sp-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .sp-linkbtn:hover {
        text-decoration: underline;
    }

/* The table carries ten columns, so it scrolls rather than crushing them. */
.sp-inv-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.sp-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    margin-right: 4px;
    border-radius: 999px;
    background: var(--sp-surface-alt, #f3f4f6);
    color: var(--sp-text-muted);
}

/* ----- Storage dashboard -------------------------------------------------- */

.sp-dash-locations {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-dash-create {
    background: #2f6fd0;
    border-color: #2f6fd0;
    color: #fff;
}

.sp-dash-create:hover {
    filter: brightness(0.95);
    color: #fff;
}

/* Four summary tiles across, collapsing on narrow screens. */
.sp-dash-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 16px;
}

.sp-dash-tile {
    padding: 16px;
}

.sp-dash-tile-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    margin-bottom: 12px;
}

.sp-dash-tile-figure {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    color: #2f6fd0;
}

.sp-dash-warn {
    color: #d97706;
}

/* Today/Tomorrow each hold a move-in and a move-out column. */
.sp-dash-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sp-dash-split > div + div {
    padding-left: 16px;
    border-left: 1px solid var(--sp-border, #e5e7eb);
}

.sp-dash-charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 16px;
}

.sp-dash-chart {
    padding-bottom: 12px;
}

.sp-dash-section {
    margin: 24px 16px 0;
    font-size: 1.25rem;
}

.sp-dash-section .sp-muted {
    font-size: .875rem;
    margin-left: 8px;
}

.sp-dash-schedule {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 16px;
    align-items: start;
}

/* Charts: plotted from percentages so they scale with the card rather than
   needing to be measured in script. */
.sp-barchart,
.sp-linechart {
    display: flex;
    gap: 8px;
    height: 200px;
    padding: 16px;
}

.sp-barchart-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    color: var(--sp-text-muted);
    text-align: right;
    flex: 0 0 auto;
    /* Aligned to the plot area, leaving room for the month labels below it. */
    padding-bottom: 20px;
}

.sp-barchart-plot {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex: 1 1 auto;
    border-left: 1px solid var(--sp-border, #e5e7eb);
    border-bottom: 1px solid var(--sp-border, #e5e7eb);
    padding: 0 8px;
}

.sp-barchart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    flex: 1 1 0;
}

.sp-barchart-bar {
    width: 8px;
    min-height: 2px;
    background: #2f6fd0;
    border-radius: 2px 2px 0 0;
}

.sp-barchart-label {
    margin-top: 4px;
    margin-bottom: -20px;
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-linechart-plot {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--sp-border, #e5e7eb);
    border-bottom: 1px solid var(--sp-border, #e5e7eb);
    padding-bottom: 20px;
}

.sp-linechart-plot svg {
    width: 100%;
    height: 100%;
}

.sp-linechart-labels {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-donutchart {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 200px;
    padding: 16px;
}

.sp-donut {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    flex: 0 0 auto;
    /* The hole is punched with a mask so the slices stay a single element. */
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%);
    mask: radial-gradient(circle, transparent 55%, #000 56%);
}

.sp-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.sp-donut-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.sp-donut-legend strong {
    margin-left: auto;
}

.sp-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex: 0 0 auto;
}

@media (max-width: 1200px) {
    .sp-dash-summary,
    .sp-dash-charts,
    .sp-dash-schedule {
        grid-template-columns: 1fr;
    }
}

/* ----- Responsive --------------------------------------------------------- */