/* ============================================================================
   Manage Developments drill-down (Lease-up + Recertification assistants).

   The rel-* rules below are copied verbatim from the <style> block in
   RelocationAssistant.razor so ManageDevelopmentsTree renders with the same modal design
   language. That file is NOT modified -- it keeps its own inline copy, which is why the
   relocation assistant is unaffected by anything here.

   The dmt-* rules at the bottom are new: nesting, indent guides and the expand caret.

   Auto-extracted: 35 rel-* tokens referenced, 53 rules kept (incl. @keyframes: rel-modal-fade, rel-modal-pop, rel-modal-spin).
   ============================================================================ */

/* ===== Modern Initiate Relocation modal ===== */
    .rel-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1050;
        padding: 20px;
        animation: rel-modal-fade .15s ease-out;
    }

.rel-search-input {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

.rel-search-input svg {
        position: absolute;
        left: 12px;
        color: var(--bs-secondary-color, var(--bs-secondary));
    }

.rel-search-input input {
        width: 100%;
        padding: 9px 12px 9px 34px;
        border-radius: 10px;
        border: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        font-size: 13px;
    }

.rel-search-input input:focus {
        outline: none;
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15);
    }

.rel-search-input-wide {
        flex: 1 1 auto;
        margin-bottom: 0;
        margin-right: 8px;
    }

.rel-options-toolbar {
        display: flex;
        align-items: center;
    }

.rel-options-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

.rel-option-card {
        border: 1px solid var(--bs-border-color);
        border-radius: 12px;
        padding: 12px 14px;
        background: var(--bs-body-bg);
    }

.rel-option-card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }

.rel-option-card-title {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

.rel-option-card-title strong {
        font-size: 14px;
        color: var(--bs-body-color);
    }

.rel-option-card-addr {
        font-size: 12px;
        color: var(--bs-secondary-color, var(--bs-secondary));
    }

.rel-option-card-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

.rel-step-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.4;
        white-space: nowrap;
        border: 1px solid transparent;
    }

.rel-step-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: .85;
        flex-shrink: 0;
    }

.rel-step-c0 { background: color-mix(in srgb, var(--bs-primary, #3b82f6) 12%, var(--bs-body-bg, #fff)); color: var(--bs-primary, #3b82f6); border-color: color-mix(in srgb, var(--bs-primary, #3b82f6) 30%, var(--bs-body-bg, #fff)); }

.rel-step-c1 { background: color-mix(in srgb, var(--bs-success, #10b981) 14%, var(--bs-body-bg, #fff)); color: var(--bs-success, #10b981); border-color: color-mix(in srgb, var(--bs-success, #10b981) 32%, var(--bs-body-bg, #fff)); }

/* HDC compliance badges (Deep Skew 170%, Middle-Income units). Theme variables only. */
.dmt-badge-warn { background: color-mix(in srgb, var(--bs-warning) 16%, var(--bs-body-bg)); color: var(--bs-warning-text-emphasis, var(--bs-warning)); border-color: color-mix(in srgb, var(--bs-warning) 35%, var(--bs-body-bg)); }
.rel-step-c9 { background: color-mix(in srgb, var(--bs-secondary-color, #6b7280) 16%, var(--bs-body-bg, #fff)); color: var(--bs-secondary-color, #6b7280); border-color: color-mix(in srgb, var(--bs-secondary-color, #6b7280) 34%, var(--bs-body-bg, #fff)); }

/* Extra-large modal for Manage Developments — it hosts lists, tabs and forms. */
    .rel-modal-xl {
        width: min(96vw, 1320px) !important;
        max-height: 90vh !important;
    }

.rel-modal {
        width: min(94vw, 720px);
        max-height: 92vh;
        display: flex;
        position: relative;
        flex-direction: column;
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        border: 1px solid var(--bs-border-color);
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.1);
        overflow: hidden;
        animation: rel-modal-pop .18s ease-out;
    }

.rel-modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 20px 14px;
        border-bottom: 1px solid var(--bs-border-color);
    }

.rel-modal-header-left {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
    }

.rel-modal-icon {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(var(--bs-primary-rgb), .12);
        color: var(--bs-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.rel-modal-title {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--bs-body-color);
        line-height: 1.2;
    }

.rel-modal-subtitle {
        margin-top: 3px;
        font-size: 12.5px;
        color: var(--bs-secondary-color, var(--bs-secondary));
    }

.rel-modal-close {
        appearance: none;
        background: transparent;
        border: 0;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        color: var(--bs-secondary-color, var(--bs-secondary));
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color .15s ease, color .15s ease;
    }

.rel-modal-close:hover:not(:disabled) {
        background: rgba(var(--bs-secondary-bg-rgb, 233, 236, 239), .8);
        color: var(--bs-body-color);
    }

.rel-modal-close:disabled { opacity: .5; cursor: not-allowed; }

.rel-modal-body {
        padding: 18px 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1 1 auto;
        min-height: 0;
    }

.rel-modal-units-state {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 24px;
        font-size: 13px;
        color: var(--bs-secondary-color, var(--bs-secondary));
        border: 1px dashed var(--bs-border-color);
        border-radius: 12px;
    }

.rel-modal-units-empty {
        font-style: italic;
    }

.rel-modal-spinner {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid rgba(var(--bs-primary-rgb), .25);
        border-top-color: var(--bs-primary);
        animation: rel-modal-spin .7s linear infinite;
    }

.rel-modal-spinner-sm {
        width: 12px;
        height: 12px;
        border-width: 2px;
        border-color: rgba(255,255,255,.4);
        border-top-color: var(--bs-body-bg, #fff);
    }

.rel-modal-alert {
        padding: 11px 13px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.45;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

.rel-modal-alert-error {
        background: rgba(var(--bs-danger-rgb, 220, 53, 69), .1);
        color: var(--bs-danger, #842029);
        border: 1px solid rgba(var(--bs-danger-rgb, 220, 53, 69), .25);
    }

.rel-modal-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px;
        border-top: 1px solid var(--bs-border-color);
        background: rgba(var(--bs-secondary-bg-rgb, 233, 236, 239), .35);
    }

.rel-modal-footer-hint {
        font-size: 12.5px;
        color: var(--bs-secondary-color, var(--bs-secondary));
    }

.rel-modal-footer-actions {
        display: inline-flex;
        gap: 8px;
    }

.rel-modal-btn {
        appearance: none;
        border: 1px solid transparent;
        padding: 9px 16px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
    }

.rel-modal-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.rel-modal-btn-ghost {
        background: transparent;
        border-color: var(--bs-border-color);
        color: var(--bs-body-color);
    }

.rel-modal-btn-ghost:hover:not(:disabled) {
        background: rgba(var(--bs-secondary-bg-rgb, 233, 236, 239), .7);
    }

@media (max-width: 640px) {
    .rel-modal { border-radius: 14px; }
    .rel-modal-footer { flex-direction: column; align-items: stretch; }
    .rel-modal-footer-actions { justify-content: flex-end; }
}

.rcd-value > .rel-step-badge { max-width: 100%; }

.rel-modal-btn-sm {
        padding: 4px 8px;
        font-size: 12px;
        line-height: 1;
    }

.rel-roster-actions .rel-modal-btn + .rel-modal-btn {
        margin-left: 4px;
    }

/* ===== Stage 1 / Stage 2 survey — modern polish ===== */

    /* Banded section header inside the survey detail body */
    .rel-modal-body .rel-modal-section-title {
        margin: 18px -20px 14px -20px;
        padding: 12px 20px 11px 20px;
        background: linear-gradient(180deg, var(--bs-tertiary-bg, #f8fafc) 0%, var(--bs-tertiary-bg, #f1f5f9) 100%);
        border-top: 1px solid var(--bs-border-color, #e2e8f0);
        border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
        font-size: 13px;
        font-weight: 600;
        color: var(--bs-body-color, #0f172a);
        letter-spacing: 0.01em;
    }

.rel-modal-body .rel-modal-section-title:first-of-type {
        margin-top: 4px;
    }

.rel-tma-modal .rel-modal-body {
        background: var(--bs-tertiary-bg, var(--bs-body-bg));
        gap: 12px;
    }

@keyframes rel-modal-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

@keyframes rel-modal-pop {
        from { opacity: 0; transform: translateY(8px) scale(.98); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

@keyframes rel-modal-spin {
        to { transform: rotate(360deg); }
    }


/* ── Drill-down tree (new) ─────────────────────────────────────────────────── */
.dmt-caret {
    display: inline-block;
    margin-right: 6px;
    transition: transform .15s ease;
    font-size: 10px;
    line-height: 1;
}

.dmt-caret-open { transform: rotate(90deg); }

.dmt-children {
    margin: 10px 0 2px 18px;
    padding-left: 14px;
    border-left: 2px solid var(--bs-border-color, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dmt-row {
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--bs-body-bg, #fff);
}

.dmt-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dmt-row-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dmt-row-title strong {
    font-size: 13px;
    color: var(--bs-body-color, #0f172a);
}

.dmt-empty {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--bs-secondary-color, #64748b);
    border: 1px dashed var(--bs-border-color, #e5e7eb);
    border-radius: 8px;
}

.dmt-leaf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bs-tertiary-bg, #f8fafc);
    flex-wrap: wrap;
}

.dmt-leaf-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dmt-leaf-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bs-body-color, #0f172a);
}

.dmt-leaf-meta {
    font-size: 12px;
    color: var(--bs-secondary-color, #64748b);
}

/* Themed eye button that opens a record's XAF detail view. --app-primary tracks the
   selected DevExpress theme (classic + Fluent) via theme-bridge.css. */
.dmt-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    background: var(--bs-body-bg, #fff);
    color: var(--app-primary, var(--bs-primary, #3b82f6));
    border-radius: 7px;
    cursor: pointer;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dmt-view-btn:hover:not(:disabled) {
    background: var(--app-primary-soft, #eff6ff);
    border-color: var(--app-primary-border, var(--bs-primary, #3b82f6));
}

.dmt-view-btn:disabled { opacity: .55; cursor: not-allowed; }
.dmt-view-ico { display: block; }

.dmt-view-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--app-primary-soft, rgba(59, 130, 246, .25));
    border-top-color: var(--app-primary, #3b82f6);
    border-radius: 50%;
    animation: rel-modal-spin .6s linear infinite;
    display: inline-block;
}

.dmt-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .45);
}

.dmt-nav-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 30px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.dmt-nav-box p { margin: 0; font-size: 13px; font-weight: 600; color: var(--bs-body-color, #0f172a); }

/* ============================================================================
   Weekly Planner surfaces (WeeklyPlansModal / MyWeeklyPlansModal). Colors resolve
   through the same --bs-* -> --dxds-* -> literal bridge as the rest of this file,
   so the planner adopts the active Fluent (or classic) theme with no fixed palette.
   ============================================================================ */

.rel-planner-modal .rel-modal-body { display: flex; flex-direction: column; gap: 1rem; }

/* Progress bars (plan + task) */
.rel-planner-progress { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.rel-planner-bar {
    flex: 1; height: 8px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--bs-body-color, #0f172a) 12%, var(--bs-body-bg, #fff));
}
.rel-planner-bar-sm { height: 6px; }
.rel-planner-fill {
    height: 100%; border-radius: 999px;
    background: var(--bs-success, #10b981);
    transition: width .3s ease;
}
.rel-planner-progress-label, .rel-planner-task-count {
    font-size: .78rem; font-weight: 600;
    color: var(--bs-secondary-color, var(--bs-secondary, #64748b));
    white-space: nowrap;
}

/* Manager list */
.rel-planner-manager-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem;
}
.rel-planner-manager-card {
    display: flex; flex-direction: column; gap: .55rem;
    padding: 1rem; border-radius: 12px; cursor: pointer;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.rel-planner-manager-card:hover {
    border-color: var(--bs-primary, #3b82f6);
    box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb, 59 130 246), .15);
}
.rel-planner-manager-card:active { transform: translateY(1px); }
.rel-planner-manager-top { display: flex; align-items: center; gap: .6rem; }
.rel-planner-manager-avatar {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    background: color-mix(in srgb, var(--bs-primary, #3b82f6) 16%, var(--bs-body-bg, #fff));
    color: var(--bs-primary, #3b82f6);
}
.rel-planner-manager-name { margin: 0; font-size: .95rem; font-weight: 700; color: var(--bs-body-color, #0f172a); }
.rel-planner-manager-contact {
    display: flex; flex-wrap: wrap; gap: .25rem .9rem;
    font-size: .78rem; color: var(--bs-secondary-color, #64748b);
}
.rel-planner-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.rel-planner-dev-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
    background: color-mix(in srgb, var(--bs-body-color, #0f172a) 6%, var(--bs-body-bg, #fff));
    color: var(--bs-body-color, #0f172a);
    border: 1px solid var(--bs-border-color, #e5e7eb);
}

/* Plan cards */
.rel-planner-plans, .rel-planner-task-list, .rel-planner-tasks { display: flex; flex-direction: column; gap: .75rem; }
.rel-planner-plan-card, .rel-planner-form-card, .rel-planner-task-form {
    padding: 1rem; border-radius: 12px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
}
.rel-planner-plan-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.rel-planner-plan-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--bs-body-color, #0f172a); }
.rel-planner-plan-meta, .rel-planner-task-meta {
    display: flex; flex-wrap: wrap; gap: .25rem .9rem;
    font-size: .78rem; color: var(--bs-secondary-color, #64748b);
}
.rel-planner-plan-empty { margin: .75rem 0 0; font-size: .82rem; color: var(--bs-secondary-color, #64748b); }

/* Task rows */
.rel-planner-task-card {
    border-radius: 10px;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    background: color-mix(in srgb, var(--bs-body-color, #0f172a) 2%, var(--bs-body-bg, #fff));
    overflow: hidden;
}
.rel-planner-task-card.is-expanded { border-color: var(--bs-primary, #3b82f6); }
.rel-planner-task-summary { padding: .8rem .9rem; cursor: pointer; }
.rel-planner-task-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rel-planner-task-title { margin: 0; font-size: .9rem; font-weight: 700; color: var(--bs-body-color, #0f172a); }
.rel-planner-task-notes { margin: .4rem 0 0; font-size: .8rem; color: var(--bs-secondary-color, #64748b); }
.rel-planner-task-detail {
    padding: .9rem; border-top: 1px solid var(--bs-border-color, #e5e7eb);
    display: flex; flex-direction: column; gap: .75rem;
    background: var(--bs-body-bg, #fff);
}
.rel-planner-detail-badges { display: flex; flex-wrap: wrap; gap: .35rem; }

/* MyWeeklyPlans read rows */
.rel-planner-task { list-style: none; border-radius: 10px; border: 1px solid var(--bs-border-color, #e5e7eb); overflow: hidden; }
.rel-planner-task.is-expanded { border-color: var(--bs-primary, #3b82f6); }
.rel-planner-task-progress { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }

/* Units section */
.rel-planner-units-section { display: flex; flex-direction: column; gap: .6rem; }
.rel-planner-units-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.rel-planner-units-title { margin: 0; font-size: .85rem; font-weight: 700; color: var(--bs-body-color, #0f172a); }
.rel-planner-units-pager { display: inline-flex; align-items: center; gap: .4rem; }
.rel-planner-units-pager-count { font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color, #64748b); }
.rel-planner-units-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rel-planner-units-filter-group { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.rel-planner-filter-btn {
    padding: .28rem .6rem; border-radius: 8px; font-size: .76rem; font-weight: 600; cursor: pointer;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #64748b);
    border: 1px solid var(--bs-border-color, #e5e7eb);
}
.rel-planner-filter-btn.is-active {
    background: color-mix(in srgb, var(--bs-primary, #3b82f6) 12%, var(--bs-body-bg, #fff));
    color: var(--bs-primary, #3b82f6);
    border-color: color-mix(in srgb, var(--bs-primary, #3b82f6) 35%, var(--bs-body-bg, #fff));
}
.rel-planner-scope-units { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rel-planner-scope-unit {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .22rem .55rem; border-radius: 8px; font-size: .78rem; font-weight: 600;
    background: color-mix(in srgb, var(--bs-body-color, #0f172a) 5%, var(--bs-body-bg, #fff));
    color: var(--bs-body-color, #0f172a);
    border: 1px solid var(--bs-border-color, #e5e7eb);
}
.rel-planner-scope-unit.is-complete {
    background: color-mix(in srgb, var(--bs-success, #10b981) 14%, var(--bs-body-bg, #fff));
    color: var(--bs-success, #10b981);
    border-color: color-mix(in srgb, var(--bs-success, #10b981) 32%, var(--bs-body-bg, #fff));
}

/* Notice delivery checklist */
.rel-planner-tenant-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.rel-planner-tenant-row {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .5rem .65rem; border-radius: 8px;
    background: color-mix(in srgb, var(--bs-body-color, #0f172a) 3%, var(--bs-body-bg, #fff));
    border: 1px solid var(--bs-border-color, #e5e7eb);
}
.rel-planner-tenant-name { font-size: .82rem; font-weight: 600; color: var(--bs-body-color, #0f172a); }
.rel-planner-tenant-unit {
    font-size: .74rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-color, #0f172a) 7%, var(--bs-body-bg, #fff));
    color: var(--bs-secondary-color, #64748b);
}
.rel-planner-tenant-delivered { margin-left: auto; }

/* Notes block */
.rel-planner-notes-block { display: flex; flex-direction: column; gap: .2rem; }
.rel-planner-notes-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color, #64748b); }
.rel-planner-notes { margin: 0; font-size: .82rem; color: var(--bs-body-color, #0f172a); white-space: pre-wrap; }

/* Selection count pill in the add-task form */
.rel-field-selection-count {
    margin-left: .4rem; font-size: .72rem; font-weight: 600;
    color: var(--bs-primary, #3b82f6);
}
.rel-planner-listbox { max-height: 220px; }


/* Weekly Planner — new-plan wizard */
.rel-planner-wizard-step {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: color-mix(in srgb, var(--bs-body-color) 55%, transparent);
}
.rel-planner-queued-tasks {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.rel-planner-queued-task {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 100%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bs-body-color) 4%, transparent);
}
.rel-planner-queued-task-summary {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}
.rel-planner-queued-task-scope {
    flex: 1;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--bs-body-color) 60%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   Entity change history (EntityChangeHistory.razor)

   The Change History panel on the Relocation Assistant's manage screens —
   development, building, unit and tenant. Sits inside .rel-manage-form-card
   layouts, so it borrows their 8px radius and border, and runs entirely off
   the --bs-* variables like the rest of this file, which is what keeps it
   correct in both themes without a second colour block.

   Only the diff colours are stated outright: nothing else in these screens
   shows a before and after, so there is no existing token to reuse.
   ========================================================================== */
.ech-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);

    /* .rel-modal-body is a flex column, so this panel is a flex item. Flex items shrink by default,
       which squeezed the panel below its content height: with overflow hidden it clipped everything
       and read as an empty box, and without it the rows spilled over the form beneath. flex:0 0 auto
       makes it size to its content and stay there. Spacing comes from the parent's gap, not margins. */
    flex: 0 0 auto;
    align-self: stretch;
}

.ech-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-body-color) 4%, transparent);
}

.ech-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

.ech-refresh {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background: var(--bs-body-bg);
    color: color-mix(in srgb, var(--bs-body-color) 75%, transparent);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
}

.ech-refresh:disabled { opacity: 0.6; cursor: default; }

.ech-state {
    padding: 1rem 0.85rem;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--bs-body-color) 60%, transparent);
}

.ech-state-error { color: #b91c1c; }

.ech-list { display: flex; flex-direction: column; }

.ech-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 60%, transparent);
}

.ech-row:last-child { border-bottom: 0; }

.ech-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.ech-field { font-size: 0.82rem; font-weight: 600; color: var(--bs-body-color); }

.ech-when {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--bs-body-color) 55%, transparent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ech-diff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    /* Values can be long free text and must wrap rather than widen the card. */
    overflow-wrap: anywhere;
}

.ech-old {
    background: color-mix(in srgb, #b91c1c 12%, transparent);
    color: #b91c1c;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    text-decoration: line-through;
}

.ech-new {
    background: color-mix(in srgb, #028b02 12%, transparent);
    color: #028b02;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.ech-arrow { color: color-mix(in srgb, var(--bs-body-color) 45%, transparent); }

.ech-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--bs-body-color) 55%, transparent);
}

.ech-source::before { content: "·"; margin-right: 0.4rem; }

.ech-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-body-color) 3%, transparent);
}

.ech-page-btn {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

.ech-page-btn:disabled { opacity: 0.45; cursor: default; }

.ech-page-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.75rem;
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}

.ech-page-sub {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--bs-body-color) 55%, transparent);
}

/* Collapsed-by-default header. The bar is the toggle, so it needs to look
   clickable and keep the count legible when the body is hidden. */
.ech-head-toggle { cursor: pointer; user-select: none; }

.ech-head-toggle:hover { background: color-mix(in srgb, var(--bs-body-color) 7%, transparent); }

.ech-head-toggle:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

.ech-head-right { display: flex; align-items: center; gap: 0.5rem; }

.ech-count {
    display: inline-block;
    min-width: 1.25rem;
    text-align: center;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-color) 12%, transparent);
    color: color-mix(in srgb, var(--bs-body-color) 75%, transparent);
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ech-chevron {
    display: inline-flex;
    color: color-mix(in srgb, var(--bs-body-color) 55%, transparent);
    transition: transform 0.15s ease;
}

.ech-chevron.is-open { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .ech-chevron { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Recert Assistant — bulk package download picker (RecertPackageDownloadDialog)

   Reuses the rel-modal / dmt-* shell above and adds only what selection needs:
   a tri-state tick, a checkbox-aligned row, and the footer's count line.
   ═══════════════════════════════════════════════════════════════════════════ */

.rel-modal-alert-success {
    background: rgba(var(--bs-success-rgb, 25, 135, 84), .1);
    color: var(--bs-success-text-emphasis, var(--bs-success, #0f5132));
    border: 1px solid rgba(var(--bs-success-rgb, 25, 135, 84), .25);
}

.rel-modal-btn-primary {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.rel-modal-btn-primary:hover:not(:disabled) { filter: brightness(1.07); }

/* The tick itself. Sized to line up with the row title's cap height rather than
   its full line box, so a checkbox column reads straight down the tree. */
.rpd-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--bs-border-color);
    border-radius: 5px;
    background: var(--bs-body-bg, #fff);
    color: #fff;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.rpd-check:hover:not(:disabled) { border-color: var(--bs-primary, #0d6efd); }

.rpd-check:disabled { opacity: .5; cursor: not-allowed; }

.rpd-check:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.rpd-check.is-checked,
.rpd-check.is-partial {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}

/* Row title + tick, kept on one baseline and allowed to shrink so the badges and
   expand button on the right never get pushed off the card. */
.rpd-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.rpd-unit {
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) auto auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 0;
    padding: 7px 10px;
    border-radius: 8px;
}

/* Fixed tracks, so the state chip and the action button land at the same x on every
   row instead of following the width of the unit name. */
.rpd-unit-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rpd-unit-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--app-fg); }
.rpd-unit-no { white-space: nowrap; }
.rpd-unit-meta { font-size: 12px; color: var(--app-muted); }
.rpd-unit-state { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rpd-unit-actions { display: flex; align-items: center; justify-content: flex-end; min-width: 132px; }
.rpd-unit-panel { grid-column: 1 / -1; }
.rpd-unit-panel:empty { display: none; }

/* Log number is an identifier — tabular figures, never wrapped. */
.rpd-log {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    border: 1px solid var(--app-primary-border);
}

/* Amber variant of the shared step badge, for the "waiting on someone else" state. */
.rel-step-c1.rpd-state-warn, .rpd-state-warn {
    background: var(--app-warning-soft);
    color: var(--app-warning);
    border-color: var(--app-warning-border);
}

.rpd-unit:hover { background: color-mix(in srgb, var(--bs-body-color) 5%, transparent); }

/* Account number sits beside the unit number, de-emphasised — it is a search key
   more often than something the user reads. */
.rpd-acct {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--bs-body-color) 10%, transparent);
    color: color-mix(in srgb, var(--bs-body-color) 70%, transparent);
}

/* "Show all N …" — the escape hatch from a search subset back to the full list. */
.rpd-showall {
    display: inline-block;
    margin: 4px 0 2px 28px;
    padding: 4px 10px;
    border: 1px dashed var(--bs-border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--bs-primary, #0d6efd);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.rpd-showall:hover { background: rgba(var(--bs-primary-rgb, 13, 110, 253), .08); }

.rpd-hint {
    margin: 8px 0 4px;
    font-size: 12.5px;
    color: var(--bs-secondary-color, var(--bs-secondary));
}

.rpd-hint-warn { color: var(--bs-warning-text-emphasis, #997404); }

.rpd-summary { font-weight: 600; color: var(--bs-body-color); }

.rpd-preview-note { margin-left: 4px; }

.rpd-preview-warn {
    margin-left: 4px;
    color: var(--bs-warning-text-emphasis, #997404);
    font-weight: 600;
}

/* Recert-year picker in the package dialog's toolbar. Sits beside the search box
   and shrinks last, so the search field takes the slack on a narrow modal. */
/* ── Picker toolbar ─────────────────────────────────────────────────────────
   Search, recert year and "Clear selection" on one row. Everything is pinned to
   the same 38px height and 10px radius so the row reads as one control strip
   rather than three widgets that happen to be adjacent — which is what it looked
   like when each carried its own ad-hoc padding. Scoped to .rpd-toolbar because
   .rel-options-toolbar is shared with the relocation dialogs. */
.rpd-toolbar {
    gap: 8px;
    flex-wrap: wrap;
}

/* Stated rather than inherited from Bootstrap's reboot: every height below is a
   border-box height, and a content-box fallback would make each control 20px
   taller than its neighbours. */
.rpd-toolbar,
.rpd-toolbar * {
    box-sizing: border-box;
}

.rpd-toolbar .rel-search-input-wide {
    margin-right: 0;   /* the toolbar's gap owns the spacing now */
    min-width: 220px;
}

.rpd-toolbar .rel-search-input input {
    height: 38px;
    padding-right: 34px;   /* clear button's lane */
}

/* The × inside the search box. Sits over the input's padding rather than beside
   it, so the field keeps its full width. */
.rpd-search-clear {
    position: absolute;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #64748b);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.rpd-search-clear:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bs-body-color) 10%, transparent);
    color: var(--bs-body-color);
}

.rpd-search-clear:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}

.rpd-search-clear:disabled { opacity: .5; cursor: not-allowed; }

/* Label and select as one bordered pill: the label is the pill's prefix on a
   tinted ground, the select fills the rest with no border of its own. */
.rpd-year {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: stretch;
    height: 38px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rpd-year:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15);
}

.rpd-year-label {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    background: var(--bs-tertiary-bg, #f1f5f9);
    border-right: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color, var(--bs-secondary));
}

/* The native chevron is the one thing that can't be themed, so it is replaced
   with an inline one. Fixed slate rather than currentColor — a data: URI can't
   inherit — which reads acceptably against both light and dark grounds. */
.rpd-year select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 28px 0 10px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 10px;
    color: var(--bs-body-color);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.rpd-year select:focus { outline: none; }

/* :has() dims the whole pill where it is supported; the select's own rule is the
   fallback, so the disabled state is never invisible. */
.rpd-year:has(select:disabled) { opacity: .55; }

.rpd-year select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.rpd-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg, #fff);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--bs-secondary-color, var(--bs-secondary));
    transition: border-color .15s ease, color .15s ease;
}

.rpd-toggle:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15);
}

.rpd-toggle:has(input:checked) {
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
}

.rpd-toggle input { accent-color: var(--bs-primary); cursor: pointer; margin: 0; }

.rpd-toggle:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.rpd-toggle input:disabled { cursor: not-allowed; }

.rpd-noaudit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(var(--bs-warning-rgb), .16);
    color: var(--bs-warning-text-emphasis, #856404);
}

.rpd-genaudit {
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid var(--bs-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--bs-primary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.rpd-genaudit:hover:not(:disabled) { background: rgba(var(--bs-primary-rgb), .1); }
.rpd-genaudit:disabled { opacity: .5; cursor: not-allowed; }

/* "Clear selection" — same height and radius as its neighbours; the base
   .rel-modal-btn padding would otherwise make it the odd one out. */
.rpd-toolbar-btn {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 12px;
    gap: 6px;
    border-radius: 10px;
    font-size: 12.5px;
}

/* A unit with no Recertification Package or TIC for the chosen year. Muted rather
   than hidden — the user still needs to see the unit is there and why it is out. */
.rpd-unit.is-blocked .rpd-unit-name,
.rpd-unit.is-blocked .rpd-unit-meta {
    color: color-mix(in srgb, var(--bs-body-color) 45%, transparent);
}

.rpd-unit.is-blocked:hover { background: transparent; }

/* The warning pill. Amber rather than red: nothing is broken, the package simply
   hasn't been generated yet. Sized to sit inline after the unit number. */
.rpd-nodocs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: rgba(var(--bs-warning-rgb, 255, 193, 7), .16);
    color: var(--bs-warning-text-emphasis, #997404);
    border: 1px solid rgba(var(--bs-warning-rgb, 255, 193, 7), .4);
}

/* Its counterpart on units that do have documents — quiet, since "it works" is the
   expected case and should not compete with the warning for attention. */
.rpd-doccount {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: rgba(var(--bs-success-rgb, 25, 135, 84), .12);
    color: var(--bs-success-text-emphasis, #0f5132);
}

.rpd-doccount-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

.rpd-doccount-btn:hover,
.rpd-doccount-btn.is-open {
    background: rgba(var(--bs-success-rgb, 25, 135, 84), .2);
    border-color: rgba(var(--bs-success-rgb, 25, 135, 84), .35);
}

.rpd-doccount-btn:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}


.rpd-docs {
    margin: 6px 0 2px;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
}

.rpd-docs-msg {
    padding: 10px 12px;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #64748b);
}

.rpd-docs-err { color: var(--bs-danger-text-emphasis, #b02a37); }

.rpd-docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.rpd-docs-table th {
    position: sticky;
    top: 0;
    padding: 7px 12px;
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #475569);
    background: var(--bs-tertiary-bg, #f8fafc);
    border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
}

.rpd-docs-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--bs-secondary-bg, #f1f5f9);
    color: var(--bs-body-color, #0f172a);
}

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

.rpd-docdl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #475569);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.rpd-docdl:hover:not(:disabled) {
    color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 8%, var(--bs-body-bg, #fff));
}

.rpd-docdl:disabled { opacity: .6; cursor: progress; }

.rpd-doc-noaudit { color: var(--bs-secondary-color, #64748b); }

.rpd-docs-tick { width: 28px; text-align: center; }
.rpd-docs-tick input { cursor: pointer; }

/* Log number reads as an identifier, so it gets tabular figures and never wraps. */
.rpd-docs-log {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}

.rpd-audit-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--bs-border-color, #e5e7eb);
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 6%, var(--bs-body-bg, #fff));
}

.rpd-audit-bar-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-body-color, #0f172a);
}

.rpd-audit-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.rpd-audit-btn {
    padding: 5px 12px;
    border-radius: 7px;
    border: 1px solid var(--bs-primary, #0d6efd);
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.rpd-audit-btn:hover:not(:disabled) { filter: brightness(.94); }
.rpd-audit-btn:disabled { opacity: .6; cursor: progress; }

.rpd-audit-btn--ghost {
    background: transparent;
    color: var(--bs-secondary-color, #475569);
    border-color: var(--bs-border-color, #e5e7eb);
}

.rpd-audit-btn--ghost:hover:not(:disabled) {
    background: var(--bs-tertiary-bg, #f1f5f9);
    filter: none;
}

/* Recert type on the unit's meta line. Weighted up a little against the rest of the
   line because it is one of the things the user picks units on; kept unwrapped so
   "Recert Type: Annual" never splits across two lines. */
.rpd-recert-type {
    font-weight: 600;
    white-space: nowrap;
    color: color-mix(in srgb, var(--bs-body-color) 62%, transparent);
}

/* Filter chips. Same shape as .rel-planner-filter-btn, pinned to the toolbar's
   38px / 10px / 12.5px contract so the strip reads as one control family. */
.rpd-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: -6px;
}

.rpd-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.rpd-filter-btn:hover:not(:disabled):not(.is-active) { background: var(--app-surface-hover); }

.rpd-filter-btn.is-active {
    background: var(--app-primary-soft);
    color: var(--app-primary);
    border-color: var(--app-primary-border);
}

.rpd-filter-btn:disabled { opacity: .5; cursor: not-allowed; }

.rpd-filter-btn:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }

.rpd-filter-count {
    min-width: 1.25rem;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--app-surface-soft);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.rpd-filter-btn.is-active .rpd-filter-count { background: var(--app-surface); }

/* Wider than the shared xl modal: this picker carries a document table inside an expanded
   unit, which the 1320px shell squeezed. Scoped to this dialog so the other rel-modal-xl
   users keep their width. */
.rel-modal.rpd-modal {
    width: min(97vw, 1680px) !important;
    max-height: 94vh !important;
}

/* Name track is capped so the state chips sit beside the unit rather than drifting to the
   far edge as the dialog widens; the slack goes to the spacer before the action button. */
.rpd-unit {
    grid-template-columns: auto minmax(150px, 340px) auto minmax(0, 1fr) auto;
}

.rpd-unit-state { justify-content: flex-start; }

/* ── Construction Schedule chip (E1) ───────────────────────────────────────────
   Theme tokens only, so the panel follows the XAF theme in light and dark. */

.csch-pane { display: flex; flex-direction: column; gap: 12px; }

.csch-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }

.csch-field { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.csch-field-wide { flex: 1 1 320px; }
.csch-field-narrow { min-width: 120px; max-width: 150px; }
.csch-field-label { font-size: 11px; font-weight: 600; color: var(--csch-muted); text-transform: uppercase; letter-spacing: .03em; }
.csch-required { color: var(--csch-danger); }

/* DevExpress editors carry their own theming; square the corners to match the panel. */
.csch-editor { width: 100%; }
.csch-editor.dxbl-edit,
.csch-editor .dxbl-edit { border-radius: 2px; }

.csch-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--csch-border); margin-bottom: 12px; }
.csch-tab {
    border: none; background: transparent; color: var(--csch-muted);
    padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.csch-tab:hover { color: var(--csch-fg); background: var(--csch-surface-hover); }
.csch-tab-active { color: var(--csch-primary); border-bottom-color: var(--csch-primary); }

.csch-card {
    border: 1px solid var(--csch-border);
    background: var(--csch-surface);
    border-radius: 2px;
    padding: 12px;
}
.csch-card-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.csch-card-head strong { font-size: 13px; color: var(--csch-fg); }

.csch-counts, .csch-summary { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--csch-muted); }
.csch-summary { padding: 8px 10px; border: 1px solid var(--csch-border); border-radius: 2px; background: var(--csch-surface-soft); }
.csch-count-bad { color: var(--csch-warning); font-weight: 600; }

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

/* Phase workbook picker (E1 Phase 5). The native file input stays raw — DevExpress has no file
   control here — so it borrows the toolbar's own tokens rather than the browser default. */
.csch-file-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--csch-border); border-radius: 2px; background: var(--csch-surface-soft); font-size: 12px; color: var(--csch-muted); }
.csch-file-label input[type="file"] { max-width: 190px; font-size: 12px; color: inherit; }
.csch-file-label input[type="file"]:disabled { opacity: .55; }

/* Group filter + search over the unit list. Wraps to its own rows on a narrow pane rather than
   squeezing the editors down to unusable widths. */
.csch-filterbar {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 10px;
}

.csch-filter-group { width: 220px; }
.csch-filter-search { width: 300px; flex: 1 1 220px; max-width: 420px; }

.csch-filter-group.dxbl-edit,
.csch-filter-group .dxbl-edit,
.csch-filter-search.dxbl-edit,
.csch-filter-search .dxbl-edit { border-radius: 2px; }

/* Pre-activation group preview: what the import will create, before it creates it. */
.csch-preview-groups {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--csch-border);
    display: flex; flex-direction: column; gap: 8px;
}
.csch-preview-group {
    padding: 8px 10px;
    border: 1px solid var(--csch-border);
    border-radius: 2px;
    background: var(--csch-surface-soft);
    display: flex; flex-direction: column; gap: 6px;
}
.csch-map-source { margin-bottom: 8px; }
.csch-muted-text { color: var(--csch-muted); }

/* Rule-set activation strip: a status line, not a content card, so it sits tighter. */
.csch-card-tight { padding: 10px 12px; }
.csch-card-tight .csch-card-head { margin-bottom: 6px; }
.csch-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.csch-meta { font-size: 12px; color: var(--csch-muted); }
.csch-preview {
    margin-top: 8px; padding: 8px 10px;
    border: 1px solid var(--csch-primary-border);
    border-radius: 2px;
    background: var(--csch-primary-soft);
    color: var(--csch-fg);
}
.csch-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }

.csch-empty { padding: 24px; text-align: center; color: var(--csch-muted); font-size: 13px; }
.csch-hint { font-size: 12px; color: var(--csch-muted); }
.csch-hint-inline { font-size: 12px; color: var(--csch-muted); margin-left: 6px; }

.csch-upload { display: flex; flex-direction: column; gap: 6px; }
.csch-upload-drop {
    border: 1px dashed var(--csch-border);
    border-radius: 2px;
    padding: 16px;
    text-align: center;
    color: var(--csch-muted);
    font-size: 13px;
    cursor: pointer;
    background: var(--csch-surface-soft);
}
.csch-upload-drop:hover { border-color: var(--csch-primary); color: var(--csch-fg); }
.csch-upload-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Notices tab: one section per letter template, so a coordinator can send one notice type on its
   own. Separated by a rule rather than nested in another card - the pane is already a card and a
   second border reads as a second surface. */
.csch-group { border-top: 1px solid var(--csch-border); padding-top: 12px; margin-top: 12px; }
.csch-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.csch-group-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.csch-group-head strong { font-size: 13px; color: var(--csch-fg); }

.csch-tablewrap { overflow-x: auto; max-height: 320px; overflow-y: auto; border: 1px solid var(--csch-border); border-radius: 2px; }
.csch-tablewrap-tall { max-height: 420px; }

.csch-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.csch-table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--csch-surface-soft);
    color: var(--csch-muted);
    text-align: left; font-weight: 600;
    padding: 7px 10px;
    border-bottom: 1px solid var(--csch-border);
    white-space: nowrap;
}
.csch-table td { padding: 7px 10px; border-bottom: 1px solid var(--csch-border); color: var(--csch-fg); vertical-align: top; }
.csch-table tr:last-child td { border-bottom: none; }
.csch-table tbody tr:hover { background: var(--csch-surface-hover); }
.csch-th-check { width: 34px; }
.csch-td-actions { white-space: nowrap; }

.csch-row-bad, .csch-row-warn { background: var(--csch-warning-soft); }
.csch-row-muted { opacity: .6; }

.csch-badge {
    display: inline-block; padding: 1px 7px; border-radius: 9px;
    font-size: 11px; font-weight: 600; margin-left: 6px;
    border: 1px solid var(--csch-border); color: var(--csch-muted); background: var(--csch-surface-soft);
}
.csch-badge-ok { color: var(--csch-success); background: var(--csch-success-soft); border-color: var(--csch-success-border); }
.csch-badge-warn { color: var(--csch-warning); background: var(--csch-warning-soft); border-color: var(--csch-warning-border); }
.csch-badge-bad { color: var(--csch-danger); background: var(--csch-danger-soft); border-color: var(--csch-danger-border); }
.csch-badge-muted { color: var(--csch-muted); }

.csch-chip {
    display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px;
    border-radius: 2px; font-size: 11px;
    border: 1px solid var(--csch-primary-border);
    background: var(--csch-primary-soft);
    color: var(--csch-primary);
    white-space: nowrap;
}

.csch-errors { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
.csch-error-row {
    font-size: 12px; color: var(--csch-warning);
    background: var(--csch-warning-soft);
    border: 1px solid var(--csch-warning-border);
    border-radius: 2px; padding: 4px 8px;
}

/* DxButton RenderStyle has no Danger variant for Link buttons, so tint the delete actions here. */
.csch-btn-danger { color: var(--csch-danger); }

.csch-map { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }

/* ── Import tab ──────────────────────────────────────────────────────────────
   The drop zone is the button: the native file input is stretched over it and made invisible,
   so the browser's own "Choose File" control never shows and a file can be dropped anywhere on it.
   Steps are numbered sections inside the file card, with the one primary action at the foot. */
.csch-imp-drop {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 22px 16px;
    border: 1px dashed var(--csch-primary-border); border-radius: 2px;
    background: var(--csch-primary-soft); color: var(--csch-primary);
    transition: border-color .15s, background .15s;
}
.csch-imp-drop:hover, .csch-imp-drop:focus-within { border-color: var(--csch-primary); }
.csch-imp-drop.is-compact { justify-content: flex-start; padding: 10px 14px; background: var(--csch-surface-soft); border-color: var(--csch-border); color: var(--csch-muted); }
.csch-imp-drop.is-compact:hover { border-color: var(--csch-primary); color: var(--csch-primary); }
.csch-imp-drop.is-busy { opacity: .6; }
.csch-imp-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.csch-imp-drop-input:disabled { cursor: progress; }
.csch-imp-drop-icon { flex: 0 0 auto; }
.csch-imp-drop-title { font-size: 14px; font-weight: 600; }
.csch-imp-drop.is-compact .csch-imp-drop-title { font-size: 13px; }
.csch-imp-drop-sub { margin-top: 2px; font-size: 12px; color: var(--csch-muted); }
.csch-imp-drop.is-compact .csch-imp-drop-sub { display: none; }

.csch-imp-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: -6px; }

.csch-imp-guide { display: flex; flex-direction: column; gap: 10px; }
.csch-imp-guide-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.csch-imp-guide-head strong { font-size: 13px; }
.csch-imp-example td, .csch-imp-example th { white-space: nowrap; }
.csch-imp-example .csch-imp-scope-col { background: var(--csch-primary-soft); }
.csch-imp-example th.csch-imp-scope-col { color: var(--csch-primary); }
.csch-imp-guide-notes { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--csch-fg); }
.csch-imp-guide-scope { padding: 8px 10px; border-left: 3px solid var(--csch-primary); background: var(--csch-primary-soft); }
.csch-imp-guide-notes code {
    padding: 0 4px; border: 1px solid var(--csch-border); border-radius: 2px;
    background: var(--csch-surface); font-size: 12px;
}

.csch-imp-stats { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--csch-muted); }
.csch-imp-stats > span { padding: 2px 8px; border: 1px solid var(--csch-border); border-radius: 2px; background: var(--csch-surface-soft); }
.csch-imp-stats b { color: var(--csch-fg); font-weight: 600; }
.csch-imp-stats .csch-count-bad b { color: inherit; }

.csch-imp-confirm { margin-bottom: 12px; }

.csch-imp-section { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--csch-border); }
.csch-imp-section-head { display: flex; gap: 10px; align-items: flex-start; }
.csch-imp-section-head strong { font-size: 13.5px; color: var(--csch-fg); }
.csch-imp-step {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--csch-primary); color: var(--csch-surface);
    font-size: 12px; font-weight: 600;
}
.csch-imp-section-actions { display: flex; justify-content: flex-end; }

.csch-imp-map-group { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--csch-border); border-radius: 2px; }
.csch-imp-map-scope { border-left: 3px solid var(--csch-primary); }
.csch-imp-map-title { font-size: 12.5px; font-weight: 600; color: var(--csch-fg); }
.csch-imp-optional { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--csch-muted); }
.csch-imp-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; }
.csch-imp-map-grid .csch-field { min-width: 0; }
.csch-imp-map-grid .csch-field-label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.csch-imp-map-extra { padding-top: 8px; border-top: 1px dashed var(--csch-border); }

.csch-imp-note { margin-bottom: 0; border-left: 3px solid var(--csch-warning); }
.csch-imp-nowrap { white-space: nowrap; }
.csch-imp-chip {
    display: inline-block; margin: 1px 6px 3px 0; padding: 1px 7px;
    border: 1px solid var(--csch-border); border-radius: 2px;
    background: var(--csch-surface-soft); color: var(--csch-muted);
    font-size: 11.5px; white-space: nowrap;
}
.csch-imp-chip b { color: var(--csch-fg); font-weight: 600; }

.csch-imp-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 -12px -12px; padding: 10px 12px;
    border-top: 1px solid var(--csch-border); background: var(--csch-surface-soft);
}

/* ── Construction Schedule as a full XAF view ──────────────────────────────────
   The workspace used to be a modal, so it borrowed the rel-modal-* shell. As its own
   ConstructionScheduleHost_DetailView tab it owns the page instead: these classes replace
   the backdrop/dialog/footer chrome. The csch-* tab-body classes above are unchanged and
   are shared by both. Theme tokens only; 2px radius. */
/* Local alias layer. theme-bridge.css normally resolves --app-* for us, but a whole-object
   PropertyEditor host can be mounted on a page that never links it, and an undefined token
   silently drops the whole declaration. Chaining --app-* -> --dxds-* (the live DevExpress
   token, which the editors on this same form demonstrably read) -> literal keeps the page
   painted under every theme. Use var(--csch-*) below, never a raw hex. */
.csch-page {
    --csch-surface: var(--app-surface, var(--dxds-color-surface-neutral-default-rest, #ffffff));
    --csch-fg: var(--app-fg, var(--dxds-color-content-neutral-default-rest, #1f2933));
    --csch-muted: var(--app-muted, var(--dxds-color-content-neutral-subdued-rest, #6b7280));
    --csch-border: var(--app-border, var(--dxds-color-border-neutral-default-rest, #e5e7eb));
    --csch-primary: var(--app-primary, var(--dxds-color-content-primary-default-rest, #2563eb));
    --csch-success: var(--app-success, var(--dxds-color-content-success-default-rest, #16a34a));
    --csch-danger: var(--app-danger, var(--dxds-color-content-danger-default-rest, #dc2626));
    --csch-warning: var(--app-warning, var(--dxds-color-content-warning-default-rest, #d97706));
    --csch-surface-soft: color-mix(in srgb, var(--csch-fg) 4%, var(--csch-surface));
    --csch-surface-hover: color-mix(in srgb, var(--csch-fg) 8%, var(--csch-surface));
    --csch-primary-soft: color-mix(in srgb, var(--csch-primary) 12%, var(--csch-surface));
    --csch-success-soft: color-mix(in srgb, var(--csch-success) 12%, var(--csch-surface));
    --csch-danger-soft: color-mix(in srgb, var(--csch-danger) 12%, var(--csch-surface));
    --csch-warning-soft: color-mix(in srgb, var(--csch-warning) 15%, var(--csch-surface));
    --csch-primary-border: color-mix(in srgb, var(--csch-primary) 35%, var(--csch-surface));
    --csch-success-border: color-mix(in srgb, var(--csch-success) 35%, var(--csch-surface));
    --csch-danger-border: color-mix(in srgb, var(--csch-danger) 35%, var(--csch-surface));
    --csch-warning-border: color-mix(in srgb, var(--csch-warning) 35%, var(--csch-surface));

    display: flex; flex-direction: column; min-height: 100%;
    background: var(--csch-surface); color: var(--csch-fg);
}

.csch-page-header {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--csch-border); background: var(--csch-surface-soft);
}

.csch-page-header-left { display: flex; gap: 12px; align-items: center; min-width: 0; }

.csch-page-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: 0 0 36px;
    border: 1px solid var(--csch-border); border-radius: 2px;
    background: var(--csch-surface-soft); color: var(--csch-primary);
}

.csch-page-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--csch-fg); }
.csch-page-subtitle { margin: 2px 0 0; font-size: 12px; color: var(--csch-muted); }

.csch-page-picker { min-width: 260px; }

.csch-page-body { flex: 1 1 auto; padding: 14px 18px; }

/* Replaces .rel-modal-alert* for this surface. Those were written against --bs-* only, and the
   app runs the Fluent theme, where every --bs-* is undefined — so they collapsed to hardcoded
   Bootstrap red/green and ignored the active theme (and carried a 10px radius). */
.csch-alert {
    margin-bottom: 12px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
    border: 1px solid var(--csch-border); border-radius: 2px;
    background: var(--csch-surface-soft); color: var(--csch-fg);
}

.csch-alert-error {
    color: var(--csch-danger);
    background: color-mix(in srgb, var(--csch-danger) 12%, var(--csch-surface));
    border-color: color-mix(in srgb, var(--csch-danger) 35%, var(--csch-surface));
}

.csch-alert-success {
    color: var(--csch-success);
    background: color-mix(in srgb, var(--csch-success) 12%, var(--csch-surface));
    border-color: color-mix(in srgb, var(--csch-success) 35%, var(--csch-surface));
}

.csch-page-footer {
    padding: 10px 18px; font-size: 12px; color: var(--csch-muted);
    border-top: 1px solid var(--csch-border); background: var(--csch-surface-soft);
}

/* Centres DxWaitIndicator while the development list loads. */
.csch-page-busy { display: flex; align-items: center; gap: 8px; padding: 24px; color: var(--csch-muted); font-size: 13px; }

@media (max-width: 720px) {
    .csch-page-header { align-items: stretch; }
    .csch-page-picker { min-width: 0; width: 100%; }
}

/* ── Packing Material Requests as a full XAF view ──────────────────────────────
   The workspace used to be three Relocation Assistant chips borrowing the rel-modal-* shell.
   As its own PackingMaterialRequestHost_DetailView tab it owns the page instead, and it cannot
   reuse those classes: rel-modal-backdrop and friends live in RelocationAssistant.razor's inline
   <style>, which is only present while the assistant itself is mounted. Theme tokens only;
   2px radius. Follows the csch-* page block above. */

/* Local alias layer, same reasoning as --csch-*: theme-bridge.css normally resolves --app-* for
   us, but a whole-object PropertyEditor host can be mounted on a page that never links it, and an
   undefined token silently drops the whole declaration. Chaining --app-* -> --dxds-* (the live
   DevExpress token the editors on this same form demonstrably read) -> literal keeps the page
   painted under every theme. Use var(--pmr-*) below, never a raw hex.
   Declared on .pmr-scope as well as .pmr-page because DxPopup portals its body out of the page
   wrapper — the QR panel would otherwise inherit none of these. */
.pmr-scope,
.pmr-page {
    --pmr-surface: var(--app-surface, var(--dxds-color-surface-neutral-default-rest, #ffffff));
    --pmr-fg: var(--app-fg, var(--dxds-color-content-neutral-default-rest, #1f2933));
    --pmr-muted: var(--app-muted, var(--dxds-color-content-neutral-subdued-rest, #6b7280));
    --pmr-border: var(--app-border, var(--dxds-color-border-neutral-default-rest, #e5e7eb));
    --pmr-primary: var(--app-primary, var(--dxds-color-content-primary-default-rest, #2563eb));
    --pmr-success: var(--app-success, var(--dxds-color-content-success-default-rest, #16a34a));
    --pmr-danger: var(--app-danger, var(--dxds-color-content-danger-default-rest, #dc2626));
    --pmr-warning: var(--app-warning, var(--dxds-color-content-warning-default-rest, #d97706));
    --pmr-surface-soft: color-mix(in srgb, var(--pmr-fg) 4%, var(--pmr-surface));
    --pmr-surface-hover: color-mix(in srgb, var(--pmr-fg) 8%, var(--pmr-surface));
    --pmr-primary-soft: color-mix(in srgb, var(--pmr-primary) 12%, var(--pmr-surface));
    --pmr-primary-border: color-mix(in srgb, var(--pmr-primary) 35%, var(--pmr-surface));
    --pmr-success-soft: color-mix(in srgb, var(--pmr-success) 12%, var(--pmr-surface));
    --pmr-success-border: color-mix(in srgb, var(--pmr-success) 35%, var(--pmr-surface));
    --pmr-danger-soft: color-mix(in srgb, var(--pmr-danger) 12%, var(--pmr-surface));
    --pmr-danger-border: color-mix(in srgb, var(--pmr-danger) 35%, var(--pmr-surface));
    --pmr-warning-soft: color-mix(in srgb, var(--pmr-warning) 15%, var(--pmr-surface));
    --pmr-warning-border: color-mix(in srgb, var(--pmr-warning) 35%, var(--pmr-surface));
}

/* ── Page shell ── */

.pmr-page {
    display: flex; flex-direction: column; min-height: 100%;
    background: var(--pmr-surface); color: var(--pmr-fg);
}

.pmr-page-header {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--pmr-border); background: var(--pmr-surface-soft);
}

.pmr-page-header-left { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pmr-page-heading { min-width: 0; }

.pmr-page-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: 0 0 36px;
    border: 1px solid var(--pmr-border); border-radius: 2px;
    background: var(--pmr-surface-soft); color: var(--pmr-primary);
}

.pmr-page-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--pmr-fg); }
.pmr-page-subtitle { margin: 2px 0 0; font-size: 12px; color: var(--pmr-muted); }

.pmr-page-body { flex: 1 1 auto; padding: 14px 18px; }

.pmr-page-footer {
    padding: 10px 18px; font-size: 12px; color: var(--pmr-muted);
    border-top: 1px solid var(--pmr-border); background: var(--pmr-surface-soft);
}

/* ── Tab strip (hand-rolled; see the component for why DxTabs is not used) ── */

.pmr-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--pmr-border); margin-bottom: 12px; }

.pmr-tab {
    border: none; background: transparent; color: var(--pmr-muted);
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 14px; cursor: pointer;
    border-bottom: 2px solid transparent;
}

.pmr-tab:hover { color: var(--pmr-fg); background: var(--pmr-surface-hover); }
.pmr-tab-active { color: var(--pmr-primary); border-bottom-color: var(--pmr-primary); }
.pmr-tab:focus-visible { outline: 2px solid var(--pmr-primary); outline-offset: -2px; }

/* ── Tab bodies ── */

.pmr-pane { display: flex; flex-direction: column; gap: 12px; }

.pmr-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }

.pmr-field { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.pmr-field-wide { flex: 1 1 300px; }
.pmr-field-label { font-size: 11px; font-weight: 600; color: var(--pmr-muted); text-transform: uppercase; letter-spacing: .03em; }

/* DevExpress editors carry their own theming; square the corners to match the panels. */
.pmr-editor { width: 100%; }
.pmr-editor.dxbl-edit,
.pmr-editor .dxbl-edit { border-radius: 2px; }

/* The toolbar is a flex row, so align-self centres the checkbox against the editors beside it;
   the cards are flex columns, where the same property would centre it horizontally instead. */
.pmr-toolbar .pmr-check { align-self: center; }
.pmr-card .pmr-check { align-self: flex-start; }

.pmr-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }

.pmr-card {
    border: 1px solid var(--pmr-border); border-radius: 2px;
    background: var(--pmr-surface); padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
}

.pmr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pmr-card-head strong { font-size: 13px; color: var(--pmr-fg); }

.pmr-muted { color: var(--pmr-muted); font-size: 12px; margin: 0; }
.pmr-hint { font-size: 12px; color: var(--pmr-muted); margin: 0; }
.pmr-hint-beside { flex: 1 1 260px; align-self: center; }

.pmr-empty {
    padding: 24px; text-align: center; color: var(--pmr-muted); font-size: 13px;
    border: 1px dashed var(--pmr-border); border-radius: 2px; background: var(--pmr-surface-soft);
}

/* Centres DxWaitIndicator while a list loads. */
.pmr-busy { display: flex; align-items: center; gap: 8px; padding: 24px; color: var(--pmr-muted); font-size: 13px; }

.pmr-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 4px; }

/* Popup bodies. A DxPopup body is a flex column too, so .pmr-field-wide's row-oriented
   `flex: 1 1 300px` would become a 300px *height* basis per field and stretch the dialog to the
   screen; here every field sits at its natural height, full width, and the popup sizes to its
   content. */
.pmr-popup-body { display: flex; flex-direction: column; gap: 12px; }
.pmr-popup-body .pmr-field,
.pmr-popup-body .pmr-field-wide { flex: 0 0 auto; min-width: 0; width: 100%; }
.pmr-popup-body .pmr-hint { margin: 0; }
.pmr-popup-body .pmr-actions { padding-top: 8px; }

.pmr-reasons { margin: 8px 0 0 18px; padding: 0; }

/* ── Alerts. Replaces .rel-modal-alert*, which were written against --bs-* only; the app runs the
   Fluent theme, where every --bs-* is undefined, so those collapsed to hardcoded Bootstrap
   red/green and ignored the active theme (and carried a 10px radius). ── */

.pmr-alert {
    padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
    border: 1px solid var(--pmr-border); border-radius: 2px;
    background: var(--pmr-surface-soft); color: var(--pmr-fg);
}

.pmr-alert-error {
    color: var(--pmr-danger); background: var(--pmr-danger-soft); border-color: var(--pmr-danger-border);
}

.pmr-alert-success {
    color: var(--pmr-success); background: var(--pmr-success-soft); border-color: var(--pmr-success-border);
}

/* ── Tables ── */

.pmr-tablewrap { overflow-x: auto; border: 1px solid var(--pmr-border); border-radius: 2px; }

.pmr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.pmr-table thead th {
    background: var(--pmr-surface-soft); color: var(--pmr-muted);
    font-weight: 600; text-align: left; white-space: nowrap;
    padding: 8px 10px; border-bottom: 1px solid var(--pmr-border);
}

.pmr-table td {
    padding: 7px 10px; border-bottom: 1px solid var(--pmr-border);
    color: var(--pmr-fg); vertical-align: middle;
}

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

.pmr-th-sortable { cursor: pointer; user-select: none; }
.pmr-th-sortable:hover { color: var(--pmr-fg); }

.pmr-col-check { width: 96px; }
.pmr-col-select { width: 44px; }
.pmr-col-qty { width: 140px; }

/* Rows open the delivery editor, so they need to read as clickable. */
.pmr-row { cursor: pointer; }
.pmr-row:hover td { background: var(--pmr-surface-hover); }

.pmr-pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pmr-pager-controls { display: flex; gap: 8px; align-items: center; }

.pmr-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--pmr-border); color: var(--pmr-muted); background: var(--pmr-surface-soft);
}

.pmr-badge-open { color: var(--pmr-warning); background: var(--pmr-warning-soft); border-color: var(--pmr-warning-border); }
.pmr-badge-ok { color: var(--pmr-success); background: var(--pmr-success-soft); border-color: var(--pmr-success-border); }
.pmr-badge-low { color: var(--pmr-danger); background: var(--pmr-danger-soft); border-color: var(--pmr-danger-border); }

/* ── Inventory ── */

/* A low material carries a left edge as well as its "Low" badge, so it stands out while scanning
   the column without the colour being the only cue. */
.pmr-row-low td { background: var(--pmr-danger-soft); }
.pmr-row-low td:first-child { box-shadow: inset 3px 0 0 var(--pmr-danger); }

/* Stock can go below zero when a hand-off is recorded before the stock delivery is. */
.pmr-qty-negative { color: var(--pmr-danger); font-weight: 600; }

/* ── Delivery editor ── */

.pmr-detail-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

.pmr-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
    padding: 10px 12px; border: 1px solid var(--pmr-border); border-radius: 2px;
    background: var(--pmr-surface-soft);
}

.pmr-summary-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pmr-summary-label { font-size: 11px; font-weight: 600; color: var(--pmr-muted); text-transform: uppercase; letter-spacing: .03em; }
.pmr-summary-value { font-size: 12.5px; color: var(--pmr-fg); overflow-wrap: anywhere; }

.pmr-notes { font-size: 12.5px; color: var(--pmr-fg); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── QR panel (DxPopup body) ── */

.pmr-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px; }
.pmr-qr > .pmr-field,
.pmr-qr > .pmr-alert { width: 100%; }

/* White plate regardless of theme: a dark surface behind the modules stops phone cameras
   resolving the code. */
.pmr-qr-image {
    width: 260px; height: 260px; max-width: 100%;
    background: #fff; padding: 12px;
    border: 1px solid var(--pmr-border); border-radius: 2px;
}

.pmr-qr-org { font-weight: 600; font-size: 13px; color: var(--pmr-fg); text-align: center; }
.pmr-qr-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* DxButton renders a <button>, which cannot carry a download href — so this one action is an
   anchor styled to sit beside the DevExpress buttons. */
.pmr-download-link {
    display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
    border: 1px solid var(--pmr-primary); border-radius: 2px;
    background: var(--pmr-primary); color: var(--pmr-surface);
    font-size: 13px; font-weight: 500; text-decoration: none;
}

.pmr-download-link:hover { filter: brightness(1.07); color: var(--pmr-surface); text-decoration: none; }
.pmr-download-link:focus-visible { outline: 2px solid var(--pmr-primary); outline-offset: 2px; }

@media (max-width: 720px) {
    .pmr-page-header { align-items: stretch; }
    .pmr-field, .pmr-field-wide { min-width: 0; width: 100%; }
    .pmr-pager { justify-content: center; }
}

/* ── List chrome shared by the packing grid and its pager ──────────────────────
   The Requests and Send Request tabs render DxGrid with server paging, the same shape Tenant
   Notices uses: the grid's own pager is hidden, so these classes carry the one we draw. */

.pmr-grid { border: 1px solid var(--pmr-border); border-radius: 2px; overflow: hidden; }

/* Rows open the delivery editor, so they need to read as clickable. */
.pmr-grid.pmr-grid-clickable .dxbl-grid-table tbody tr { cursor: pointer; }

.pmr-summary-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pmr-muted); }
.pmr-sep { opacity: .6; }

.pmr-pager-right { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-left: auto; }
.pmr-pager-size { display: flex; gap: 8px; align-items: center; }
.pmr-editor-narrow { min-width: 96px; }

/* ── Inventory tab ──────────────────────────────────────────────────────────
   One working table per development: a quantity box and Add button side by side in the row, and
   a reorder-level box that saves itself. Sections that are only sometimes wanted (history,
   deliveries) fold behind a full-width header button. */
.pmr-table td .pmr-editor-narrow { width: 96px; }
.pmr-card .pmr-actions { align-items: center; }

.pmr-fold {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 2px 0; margin: 0; border: 0; background: transparent; text-align: left;
    font: inherit; color: var(--pmr-fg); cursor: pointer;
}
.pmr-fold:hover strong { color: var(--pmr-primary); }
.pmr-fold-chevron { width: 12px; color: var(--pmr-muted); font-size: 11px; }
.pmr-fold strong { font-size: 13px; }

/* The quantity editors in the record-on-behalf popup: narrow enough to sit in a table cell. */
.pmr-editor-qty { width: 130px; }

/* ── Workspace busy overlay ────────────────────────────────────────────────────
   Painted by WorkspaceBusyOverlay while any WorkspaceBusyState scope is open, so an operation the
   user started cannot be stacked on by a second click anywhere on the page.

   Fixed rather than absolute: these workspaces are tall, and a scrim bounded by the page would put
   the spinner off-screen — and the chrome around the page back in reach — once scrolled. The
   z-index clears DevExpress popups (1050-1500) so an operation started from inside one is still
   covered. Theme tokens with literal fallbacks, since the overlay may render on a page that never
   linked theme-bridge.css. */

.wsbusy {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb,
        var(--app-surface, var(--dxds-color-surface-neutral-default-rest, #ffffff)) 55%, transparent);
    backdrop-filter: blur(1px);
    cursor: progress;
}

.wsbusy-card {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 2px;
    border: 1px solid var(--app-border, var(--dxds-color-border-neutral-default-rest, #e5e7eb));
    background: var(--app-surface, var(--dxds-color-surface-neutral-default-rest, #ffffff));
    color: var(--app-fg, var(--dxds-color-content-neutral-default-rest, #1f2933));
    font-size: 13px; font-weight: 600;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.wsbusy-spinner {
    width: 18px; height: 18px; flex: 0 0 18px;
    border: 2px solid var(--app-border, var(--dxds-color-border-neutral-default-rest, #e5e7eb));
    border-top-color: var(--app-primary, var(--dxds-color-content-primary-default-rest, #2563eb));
    border-radius: 50%;
    animation: wsbusy-spin .7s linear infinite;
}

@keyframes wsbusy-spin { to { transform: rotate(360deg); } }

/* Respects the OS setting: the scrim still blocks, it just stops spinning. */
@media (prefers-reduced-motion: reduce) {
    .wsbusy-spinner { animation-duration: 2.4s; }
}

/* Reconciliation panel (E1 Phase 6). Sits above the Groups card and is warning-tinted, because
   an unmatched phase is something to act on rather than a neutral list. */
.csch-reconcile { border-color: var(--csch-warning-border); background: var(--csch-warning-soft); }
.csch-reconcile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--csch-border); }
.csch-reconcile-source { display: inline-flex; flex-direction: column; min-width: 180px; }
.csch-reconcile-arrow { color: var(--csch-muted); }
.csch-conflict-list { margin: 6px 0 0; padding-left: 18px; }
.csch-conflict-list li { margin-bottom: 4px; }
.csch-count-good { color: var(--csch-success); font-weight: 600; }
.csch-notice-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

/* Review & apply wizard (E1 Phase 9). The stepper is hand-rolled: DxTabs is rejected across this
   workspace because it scrolls itself into view on first render and drags the XAF content area
   past everything above it (see MorRecordWorkflowView). */
.csch-review { display: flex; flex-direction: column; gap: 12px; }
.csch-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.csch-step { flex: 0 0 auto; }
.csch-step-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--csch-border); border-radius: 2px;
  background: var(--csch-surface); color: var(--csch-muted);
  font-size: 12.5px; cursor: pointer;
}
.csch-step-btn:disabled { opacity: .5; cursor: not-allowed; }
.csch-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--csch-surface-hover); color: var(--csch-fg); font-size: 11px; font-weight: 600;
}
.csch-step-active .csch-step-btn { border-color: var(--csch-primary); color: var(--csch-fg); background: var(--csch-primary-soft); }
.csch-step-active .csch-step-num { background: var(--csch-primary); color: var(--csch-surface); }
.csch-step-done .csch-step-btn { color: var(--csch-fg); }
.csch-step-done .csch-step-num { background: var(--csch-success); color: var(--csch-surface); }
.csch-review-body { min-height: 180px; }
.csch-review-threshold {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px; border-bottom: 1px solid var(--csch-border);
  font-size: 12.5px; color: var(--csch-fg);
}
.csch-review-foot { display: flex; gap: 8px; justify-content: flex-end; }
.csch-editor-narrow { max-width: 90px; }

/* Update flow (E1 Phase 10): a value the latest change moved, shown beside what it was. */
.csch-row-changed td { background: var(--csch-primary-soft); }
.csch-cell-changed { font-weight: 600; color: var(--csch-primary); }

/* Per-row AI review (E1 Phase 11). */
.csch-review-cell { white-space: nowrap; }
.csch-review-cell .dxbl-btn, .csch-review-cell .csch-editor { vertical-align: middle; }

/* ===== E5 Move-Back chip (Relocation Assistant) ===== */
/* E5 Move-Back chip. Colors come from the app theme (--app-*) with the DevExpress design-system
   tokens (--dxds-*) as the fallback, on a local alias layer — the same pattern as --csch-* in
   manage-developments.css. The literals are last-resort fallbacks only. 2px radius throughout. */

.mbk {
    --mbk-surface: var(--app-surface, var(--dxds-color-surface-neutral-default-rest, #ffffff));
    --mbk-fg: var(--app-fg, var(--dxds-color-content-neutral-default-rest, #1f2933));
    --mbk-muted: var(--app-muted, var(--dxds-color-content-neutral-subdued-rest, #6b7280));
    --mbk-border: var(--app-border, var(--dxds-color-border-neutral-default-rest, #e5e7eb));
    --mbk-primary: var(--app-primary, var(--dxds-color-content-primary-default-rest, #2563eb));
    --mbk-success: var(--app-success, var(--dxds-color-content-success-default-rest, #16a34a));
    --mbk-danger: var(--app-danger, var(--dxds-color-content-danger-default-rest, #dc2626));
    --mbk-warning: var(--app-warning, var(--dxds-color-content-warning-default-rest, #d97706));
    --mbk-surface-soft: color-mix(in srgb, var(--mbk-fg) 4%, var(--mbk-surface));
    --mbk-primary-soft: color-mix(in srgb, var(--mbk-primary) 12%, var(--mbk-surface));
    --mbk-success-soft: color-mix(in srgb, var(--mbk-success) 12%, var(--mbk-surface));
    --mbk-danger-soft: color-mix(in srgb, var(--mbk-danger) 12%, var(--mbk-surface));
    --mbk-warning-soft: color-mix(in srgb, var(--mbk-warning) 15%, var(--mbk-surface));
    --mbk-primary-border: color-mix(in srgb, var(--mbk-primary) 35%, var(--mbk-surface));
    --mbk-success-border: color-mix(in srgb, var(--mbk-success) 35%, var(--mbk-surface));
    --mbk-danger-border: color-mix(in srgb, var(--mbk-danger) 35%, var(--mbk-surface));
    --mbk-warning-border: color-mix(in srgb, var(--mbk-warning) 35%, var(--mbk-surface));
    color: var(--mbk-fg);
}

.mbk-modal { max-width: 1180px; width: calc(100vw - 32px); }
.mbk-dialog { max-width: 560px; width: calc(100vw - 32px); }
.mbk-dialog--wide { max-width: 760px; }
.mbk-body { position: relative; }

/* Toolbar + fields */
.mbk-toolbar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 0 0 10px; }
.mbk-field { display: flex; flex-direction: column; gap: 4px; min-width: 180px; margin-bottom: 8px; }
.mbk-field--wide { flex: 1 1 280px; }
.mbk-field--check { justify-content: flex-end; min-width: 0; }
.mbk-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mbk-muted); }
.mbk .mbk-date { width: 170px; }

/* Tabs (hand-rolled: DxTabs scrolls itself into view and drags the host with it) */
.mbk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--mbk-border); margin: 4px 0 12px; }
.mbk-tab {
    appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
    padding: 8px 14px; font-weight: 600; color: var(--mbk-muted); cursor: pointer; border-radius: 2px 2px 0 0;
}
.mbk-tab:hover { color: var(--mbk-fg); background: var(--mbk-surface-soft); }
.mbk-tab.is-active { color: var(--mbk-primary); border-bottom-color: var(--mbk-primary); }

/* Alerts, hints, empty states */
.mbk-alert { border: 1px solid var(--mbk-border); border-radius: 2px; padding: 8px 12px; margin: 0 0 10px; font-size: 13px; }
.mbk-alert--error { background: var(--mbk-danger-soft); border-color: var(--mbk-danger-border); color: var(--mbk-danger); }
.mbk-alert--ok { background: var(--mbk-success-soft); border-color: var(--mbk-success-border); color: var(--mbk-success); }
.mbk-alert--warn { background: var(--mbk-warning-soft); border-color: var(--mbk-warning-border); color: var(--mbk-fg); }
.mbk-hint { font-size: 12px; color: var(--mbk-muted); margin: 10px 0; }
.mbk-empty {
    display: flex; align-items: center; gap: 8px; justify-content: center; padding: 28px 12px;
    border: 1px dashed var(--mbk-border); border-radius: 2px; color: var(--mbk-muted); font-size: 13px;
}

/* Bulk bar */
.mbk-bulk {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin: 0 0 10px;
    border: 1px solid var(--mbk-primary-border); background: var(--mbk-primary-soft); border-radius: 2px;
}
.mbk-bulk-count { font-weight: 600; margin-right: 4px; }

/* Tables */
.mbk-table-wrap { overflow-x: auto; border: 1px solid var(--mbk-border); border-radius: 2px; }
.mbk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mbk-table th, .mbk-table td { border-bottom: 1px solid var(--mbk-border); padding: 8px; text-align: left; vertical-align: top; }
.mbk-table th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mbk-muted);
    background: var(--mbk-surface-soft); white-space: nowrap;
}
.mbk-table tbody tr:last-child td { border-bottom: none; }
.mbk-table tr.is-moved td:first-child { box-shadow: inset 3px 0 0 var(--mbk-warning); }
.mbk-col-check { width: 34px; }
.mbk-actions { white-space: nowrap; text-align: right; }
.mbk-actions .dxbl-btn { margin-left: 4px; }

.mbk-strong { font-weight: 600; }
.mbk-sub { font-size: 12px; color: var(--mbk-muted); }
.mbk-sub--warn { color: var(--mbk-warning); }

/* Badges */
.mbk-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.mbk-badge {
    display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.5; padding: 0 6px;
    border-radius: 2px; border: 1px solid var(--mbk-border); background: var(--mbk-surface-soft); color: var(--mbk-fg);
    white-space: nowrap;
}
.mbk-badge--ok { background: var(--mbk-success-soft); border-color: var(--mbk-success-border); color: var(--mbk-success); }
.mbk-badge--warn { background: var(--mbk-warning-soft); border-color: var(--mbk-warning-border); color: var(--mbk-fg); }
.mbk-badge--info { background: var(--mbk-primary-soft); border-color: var(--mbk-primary-border); color: var(--mbk-primary); }
.mbk-badge--muted { color: var(--mbk-muted); }

/* Pager */
.mbk-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 0; font-size: 13px; color: var(--mbk-muted); }

/* Dialog content */
.mbk-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 13px; }
.mbk-facts dt { color: var(--mbk-muted); }
.mbk-facts dd { margin: 0; }
.mbk-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.mbk-card { border: 1px solid var(--mbk-border); border-radius: 2px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; }
.mbk-card--ok { border-color: var(--mbk-success-border); background: var(--mbk-success-soft); }
.mbk-card--warn { border-color: var(--mbk-warning-border); background: var(--mbk-warning-soft); }
.mbk-card--muted { background: var(--mbk-surface-soft); }
.mbk-card-title { font-weight: 600; margin-bottom: 4px; }

.mbk-unit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; margin-bottom: 10px; }
.mbk-unit {
    appearance: none; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
    border: 1px solid var(--mbk-border); border-radius: 2px; background: var(--mbk-surface); color: var(--mbk-fg); cursor: pointer;
}
.mbk-unit:hover { background: var(--mbk-surface-soft); }
.mbk-unit.is-picked { border-color: var(--mbk-primary); box-shadow: inset 0 0 0 1px var(--mbk-primary); background: var(--mbk-primary-soft); }

.mbk-gates { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.mbk-gate { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 8px; border: 1px solid var(--mbk-border); border-radius: 2px; }
.mbk-gate-icon { width: 18px; flex-shrink: 0; text-align: center; font-weight: 700; color: var(--mbk-muted); }
.mbk-gate.is-met .mbk-gate-icon { color: var(--mbk-success); }
.mbk-gate.is-blocking { border-color: var(--mbk-danger-border); background: var(--mbk-danger-soft); }
.mbk-gate.is-blocking .mbk-gate-icon { color: var(--mbk-danger); }
.mbk-issues { margin: 4px 0 6px 18px; padding: 0; }

@media (max-width: 640px) {
    .mbk-field { min-width: 100%; }
    .mbk-actions { white-space: normal; }
}

/* ===== Household Inventory workspace (HouseholdInventoryHost_DetailView) =====
   Inventory-specific pieces of the detail view. Everything else reuses the pmr-* page furniture,
   so colours come from the --pmr-* alias layer (declared on .pmr-page and .pmr-scope). 2px radius. */
.hinv-steps { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.hinv-step {
    flex: 1 1 140px; display: flex; align-items: center; gap: 6px; padding: 6px 8px;
    border: 1px solid var(--pmr-border); border-radius: 2px; font-size: 12px; color: var(--pmr-muted);
}
.hinv-step-dot {
    width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px; background: var(--pmr-surface-soft); color: var(--pmr-fg); flex-shrink: 0;
}
.hinv-step.is-done { color: var(--pmr-success); border-color: var(--pmr-success-border); }
.hinv-step.is-done .hinv-step-dot { background: var(--pmr-success); color: var(--pmr-surface); }
.hinv-step.is-current { color: var(--pmr-primary); border-color: var(--pmr-primary-border); background: var(--pmr-primary-soft); }
.hinv-step.is-current .hinv-step-dot { background: var(--pmr-primary); color: var(--pmr-surface); }

.hinv-next { border: 1px solid var(--pmr-border); border-radius: 2px; padding: 10px 12px; margin: 0 0 12px; background: var(--pmr-surface-soft); }
.hinv-next.is-warn { border-color: var(--pmr-warning-border); background: var(--pmr-warning-soft); }
.hinv-next.is-success { border-color: var(--pmr-success-border); background: var(--pmr-success-soft); }
.hinv-next.is-info { border-color: var(--pmr-primary-border); background: var(--pmr-primary-soft); }
.hinv-next-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--pmr-muted); }
.hinv-next-title { font-size: 15px; font-weight: 700; margin: 2px 0; color: var(--pmr-fg); }

.hinv-issues { border-color: var(--pmr-warning-border); }
.hinv-disc {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0;
    border-top: 1px solid var(--pmr-border); font-size: 13px;
}
.hinv-disc:first-of-type { border-top: none; }
.hinv-disc.is-resolved { color: var(--pmr-muted); padding: 4px 0 0; border-top: none; }

.hinv-item-name { font-weight: 600; }
.hinv-risk td:first-child { box-shadow: inset 3px 0 0 var(--pmr-warning); }

.hinv-leg { border: 1px solid var(--pmr-border); border-radius: 2px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.hinv-leg.is-missing { border-color: var(--pmr-warning-border); background: var(--pmr-warning-soft); }
.hinv-leg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hinv-seq { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pmr-primary); }

.hinv-damage { border: 1px solid var(--pmr-danger-border); background: var(--pmr-danger-soft); border-radius: 2px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.hinv-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 2px; border: 1px solid var(--pmr-border); margin: 2px 4px 2px 0; }


/* ===== Construction Calendar (ConstructionCalendarView) ===== */
/* Tokens sit on the popup too: DxPopup portals its body outside .csch-page. */
.csch-page, .ccal-popup {
    --ccal-fg: var(--app-fg, var(--dxds-color-content-neutral-default-rest, #1f2933));
    --ccal-muted: var(--app-muted, var(--dxds-color-content-neutral-subdued-rest, #6b7280));
    --ccal-surface: var(--app-surface, var(--dxds-color-surface-neutral-default-rest, #ffffff));
    --ccal-border: var(--app-border, var(--dxds-color-border-neutral-default-rest, #e5e7eb));
    --ccal-c0: var(--app-primary, var(--dxds-color-content-primary-default-rest, #2563eb));
    --ccal-c1: var(--app-warning, var(--dxds-color-content-warning-default-rest, #d97706));
    --ccal-c2: var(--app-success, var(--dxds-color-content-success-default-rest, #16a34a));
    --ccal-c3: var(--app-danger, var(--dxds-color-content-danger-default-rest, #dc2626));
    --ccal-c4: var(--app-info, var(--dxds-color-content-info-default-rest, #0891b2));
    --ccal-c5: var(--ccal-muted);
}
.ccal-filters { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ccal-empty { padding: 32px; text-align: center; color: var(--ccal-muted); border: 1px dashed var(--ccal-border); border-radius: 2px; }
.ccal-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ccal-legend-item { font-size: 12px; padding: 2px 8px; border-radius: 2px; border-left: 4px solid var(--ccal-accent); color: var(--ccal-fg);
    background: color-mix(in srgb, var(--ccal-accent) 12%, var(--ccal-surface)); }
.ccal-scheduler { min-height: 640px; }
.ccal-appt { height: 100%; padding: 1px 6px; font-size: 12px; line-height: 18px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    border-radius: 2px; border-left: 4px solid var(--ccal-accent); color: var(--ccal-fg);
    background: color-mix(in srgb, var(--ccal-accent) 16%, var(--ccal-surface)); }
.ccal-appt:hover { background: color-mix(in srgb, var(--ccal-accent) 28%, var(--ccal-surface)); }
.ccal-type-0 { --ccal-accent: var(--ccal-c0); }
.ccal-type-1 { --ccal-accent: var(--ccal-c1); }
.ccal-type-2 { --ccal-accent: var(--ccal-c2); }
.ccal-type-3 { --ccal-accent: var(--ccal-c3); }
.ccal-type-4 { --ccal-accent: var(--ccal-c4); }
.ccal-type-5 { --ccal-accent: var(--ccal-c5); }
.ccal-popup-grid { max-height: 60vh; }

/* Construction schedule setup guide — five steps above the tab strip. Theme tokens only; 2px radius. */
.csch-guide {
    border: 1px solid var(--csch-border);
    background: var(--csch-surface);
    border-radius: 2px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.csch-guide-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.csch-guide-steps {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.csch-guide-step {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--csch-border);
    border-radius: 2px;
    background: var(--csch-surface);
}
.csch-guide-mark {
    flex: 0 0 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--csch-border);
    color: var(--csch-muted);
    font-size: 12px; font-weight: 600;
}
.csch-guide-text { flex: 1 1 auto; min-width: 0; }
.csch-guide-title { font-weight: 600; font-size: 13px; color: var(--csch-fg); }
.csch-guide-detail { font-size: 12px; color: var(--csch-muted); }
.csch-guide-current { border-color: var(--csch-primary-border); background: var(--csch-primary-soft); }
.csch-guide-current .csch-guide-mark { border-color: var(--csch-primary); color: var(--csch-primary); }
.csch-guide-done .csch-guide-mark { border-color: var(--csch-success-border); background: var(--csch-success-soft); color: var(--csch-success); }
.csch-guide-warn .csch-guide-mark { border-color: var(--csch-warning-border); background: var(--csch-warning-soft); color: var(--csch-warning); }
.csch-guide-todo { opacity: .8; }
@media (max-width: 640px) {
    .csch-guide-step { flex-wrap: wrap; }
}

/* File Tasks (Phase 3.3b): the row expander is a plain button, not a DevExpress one. */
.csch-btn-link { background: none; border: 0; padding: 2px 6px; cursor: pointer; color: var(--csch-primary); font-size: 14px; }
.csch-btn-link:focus-visible { outline: 2px solid var(--csch-primary); outline-offset: 1px; }

/* Unit Schedule page. Theme tokens only, 2px radius like the rest of the workspace; no animation. */

/* Drop zone: the real <input type=file> sits invisibly over the whole zone, so a drop and a click both reach it.
   Centred in the card as a column (icon, text, Browse), with the file chip under it at the same width. */
.csch-us-upload { width: 100%; margin: 4px 0 12px; }
.csch-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    padding: 24px 20px; margin-bottom: 8px;
    border: 1.5px dashed var(--csch-border); border-radius: 2px;
    background: var(--csch-surface-soft); cursor: pointer;
}
.csch-drop:hover, .csch-drop:focus-within { border-color: var(--csch-primary); background: var(--csch-primary-soft); }
.csch-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.csch-drop-disabled { opacity: .6; cursor: default; }
.csch-drop-disabled:hover { border-color: var(--csch-border); background: var(--csch-surface-soft); }
.csch-drop-disabled input[type="file"] { cursor: default; }
.csch-drop-icon { display: inline-flex; color: var(--csch-primary); }
.csch-drop-text { min-width: 0; }
.csch-drop-title { font-size: 13px; font-weight: 600; color: var(--csch-fg); }
.csch-drop-sub { font-size: 12px; color: var(--csch-muted); }
.csch-drop-browse {
    margin-top: 2px; padding: 4px 14px; border-radius: 2px;
    border: 1px solid var(--csch-primary-border); color: var(--csch-primary);
    background: var(--csch-surface); font-size: 12px; font-weight: 600;
}

.csch-file-chip {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 6px 10px; margin-bottom: 8px;
    border: 1px solid var(--csch-border); border-radius: 2px; background: var(--csch-surface);
    font-size: 12.5px; color: var(--csch-fg);
}
.csch-file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.csch-file-size { color: var(--csch-muted); }
.csch-file-chip .csch-badge { margin-left: 0; }
.csch-eye-btn { display: inline-flex; align-items: center; padding: 2px 4px; color: var(--csch-muted); }
.csch-eye-btn:hover { color: var(--csch-primary); }
.csch-us-upload .csch-file-chip { justify-content: center; }
.csch-toolbar-top { margin-top: 4px; }
.csch-hint-flush { margin-left: 0; }

/* Expected units + Extract: label on top, then the input and the button on one compact row (both 34px tall,
   so they line up), then the help text under the row. The block starts at the card's left edge, the same edge
   as the drop zone above it. Stacks on narrow screens (see the 640px query). */
.csch-us-extract { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; margin: 4px 0 8px; }
.csch-us-extract-row { display: flex; align-items: center; gap: 10px; }
.csch-us-expected.csch-input { flex: 0 0 200px; width: 200px; }
.csch-us-extract .csch-us-extract-btn.dxbl-btn { height: 34px; flex: 0 0 auto; white-space: nowrap; border-radius: 2px; }
.csch-us-label { font-size: 12.5px; font-weight: 600; color: var(--csch-fg); }
.csch-us-label-optional { font-weight: 400; color: var(--csch-muted); }
.csch-input {
    box-sizing: border-box; width: 100%; height: 34px; padding: 6px 10px;
    border: 1px solid var(--csch-border); border-radius: 2px;
    background: var(--csch-surface); color: var(--csch-fg);
    font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
}
.csch-input::placeholder { color: var(--csch-muted); opacity: 1; }
.csch-input:hover { border-color: var(--csch-primary-border); }
.csch-input:focus { outline: none; border-color: var(--csch-primary); box-shadow: 0 0 0 3px var(--csch-primary-soft); }
.csch-input[aria-invalid="true"] { border-color: var(--csch-danger); }
.csch-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--csch-danger-soft); }
.csch-input:disabled { background: var(--csch-surface-soft); color: var(--csch-muted); cursor: not-allowed; }
.csch-field-help { font-size: 12px; line-height: 1.45; color: var(--csch-muted); }

/* Notice groups. Every notice type (7/14/30/60/90 days, ...) renders through the same markup and these classes:
   one head layout (title + count on the left, Generate Notice on the right), fixed column widths, one row
   height and one scroll height, so the grids line up and look the same whatever their content. */
.csch-notice-group-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 34px; margin-bottom: 8px;
}
.csch-notice-group-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.csch-notice-group-title strong { font-size: 13px; color: var(--csch-fg); }
.csch-group-count { font-size: 12px; color: var(--csch-muted); white-space: nowrap; }
.csch-notice-group-msg { margin: 0 0 8px; }

.csch-notice-group-head .csch-group-generate.dxbl-btn {
    flex: 0 0 auto; white-space: nowrap;
    padding: 6px 16px; border-radius: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
    background: var(--csch-primary); border: 1px solid var(--csch-primary); color: var(--csch-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--csch-fg) 18%, transparent);
}
.csch-notice-group-head .csch-group-generate.dxbl-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--csch-primary) 85%, var(--csch-fg));
    border-color: color-mix(in srgb, var(--csch-primary) 85%, var(--csch-fg));
}
.csch-notice-group-head .csch-group-generate.dxbl-btn:focus-visible { outline: 2px solid var(--csch-primary); outline-offset: 2px; }
.csch-notice-group-head .csch-group-generate.dxbl-btn:disabled {
    background: var(--csch-surface-soft); border-color: var(--csch-border); color: var(--csch-muted);
    box-shadow: none; opacity: 1; cursor: not-allowed;
}

/* The grid: long lists scroll inside the wrap (same height for every group); narrow screens scroll sideways. */
.csch-notice-wrap { max-height: 360px; overflow: auto; }
.csch-notice-grid { table-layout: fixed; min-width: 980px; font-size: 12.5px; }
/* 10px either side of the 16px box: the same 10px the next column pads its text with, so the gap between the
   box and "Building" (and each row's building) is identical in the header and the body. */
.csch-notice-grid col.csch-nc-check { width: 36px; }
.csch-notice-grid col.csch-nc-building { width: 15%; }
.csch-notice-grid col.csch-nc-unit { width: 8%; }
.csch-notice-grid col.csch-nc-tenant { width: 17%; }
.csch-notice-grid col.csch-nc-rule { width: 14%; }
.csch-notice-grid col.csch-nc-date { width: 10%; }
.csch-notice-grid col.csch-nc-state { width: 12%; }
/* The template column takes what is left. */
.csch-notice-grid th {
    height: 34px; padding: 0 10px; vertical-align: middle;
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
    background: var(--csch-surface-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.csch-notice-grid td {
    height: 36px; padding: 0 10px; vertical-align: middle;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.csch-notice-grid .csch-badge { margin-left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* The selection column. The header's bulk box and every row's box are centred the same way - as a 16px block
   with auto side margins - rather than with text-align: theme-bridge.css sets `th { text-align: inherit
   !important }` (Bootstrap Reboot parity for the Fluent themes), which beat a centred th but not the td
   below it, so the header box sat at the column's left edge while the row boxes sat in its middle. As blocks
   they also leave the cell's line box, so the header's smaller uppercase font no longer nudges the box up or
   down: the cell's vertical-align: middle centres exactly the 16px box, in the 34px header as in the rows. */
.csch-notice-grid .csch-check-col { padding: 0; }
.csch-check-col .csch-check,
.csch-check-col .csch-row-check { box-sizing: border-box; width: 16px; height: 16px; margin: 0 auto; }
.csch-check-col .csch-check { display: flex; }
.csch-check-col .csch-row-check { display: block; }

/* Checkboxes: the header's tri-state box and the row boxes are the same 16px square. The header one is a
   button with role=checkbox, so the mixed state shows without script. */
.csch-row-check { width: 16px; height: 16px; margin: 0; accent-color: var(--csch-primary); cursor: pointer; }
.csch-row-check:disabled { cursor: not-allowed; }
.csch-check {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 16px; height: 16px; padding: 0;
    border: 1.5px solid var(--csch-muted); border-radius: 2px;
    background: var(--csch-surface); color: var(--csch-surface); cursor: pointer;
}
.csch-check:hover:not(:disabled) { border-color: var(--csch-primary); }
.csch-check:focus-visible { outline: 2px solid var(--csch-primary); outline-offset: 2px; }
.csch-check-on, .csch-check-mixed { border-color: var(--csch-primary); background: var(--csch-primary); }
.csch-check:disabled { opacity: .45; cursor: not-allowed; }

/* Notice generation runs (queued in the background): one row per run, newest first, above the tabs; a finished
   run's per-notice outcomes open under its row. */
.csch-jobs { margin-bottom: 12px; }
.csch-job { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; }
.csch-job + .csch-job { border-top: 1px solid var(--csch-border); }
.csch-job .csch-badge { margin-left: 0; }
.csch-job-meta { font-size: 12px; color: var(--csch-muted); }
.csch-job-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.csch-job-actions .csch-btn-link { font-size: 12px; font-weight: 600; }
.csch-job-message { flex: 1 1 100%; font-size: 12.5px; color: var(--csch-fg); }
.csch-job-result { flex: 1 1 100%; }

/* Summary cards */
.csch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.csch-stat { border: 1px solid var(--csch-border); border-radius: 2px; padding: 8px 12px; background: var(--csch-surface); }
.csch-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--csch-muted); }
.csch-stat-value { font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--csch-fg); }
.csch-stat-sub { font-size: 11.5px; color: var(--csch-muted); }
.csch-stat-ok { border-color: var(--csch-success-border); }
.csch-stat-ok .csch-stat-value { color: var(--csch-success); }
.csch-stat-warn { border-color: var(--csch-warning-border); background: var(--csch-warning-soft); }
.csch-stat-warn .csch-stat-value { color: var(--csch-warning); }

/* Unit grid: calmer headers, centred rows, quieter secondary columns. */
.csch-grid th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; }
.csch-grid td { padding: 8px 10px; vertical-align: middle; }
.csch-grid .csch-badge { margin-left: 0; }
.csch-cell-strong { font-weight: 600; white-space: nowrap; }
.csch-cell-muted { color: var(--csch-muted); white-space: nowrap; }
.csch-cell-small { font-size: 12px; color: var(--csch-muted); }
.csch-cell-notes { max-width: 280px; }
.csch-notice-line + .csch-notice-line { margin-top: 4px; }
.csch-action-btn {
    padding: 3px 10px; border-radius: 2px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--csch-primary-border); background: var(--csch-surface);
    color: var(--csch-primary); font-size: 12px; font-weight: 600;
}
.csch-action-btn:hover { background: var(--csch-primary-soft); }
.csch-action-btn:focus-visible { outline: 2px solid var(--csch-primary); outline-offset: 1px; }

/* Collapsible sections: the header is one button; the body is simply not rendered while collapsed. */
.csch-collapse-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 0; border: 0; background: none; cursor: pointer;
    text-align: left; font: inherit; color: var(--csch-fg);
}
.csch-collapse-head:focus-visible { outline: 2px solid var(--csch-primary); outline-offset: 2px; }
.csch-collapse-chevron { flex: 0 0 auto; color: var(--csch-muted); }
.csch-collapse-open .csch-collapse-chevron { transform: rotate(90deg); }
.csch-collapse-title { font-size: 13px; font-weight: 600; }
.csch-collapse-summary { margin-left: auto; font-size: 12px; color: var(--csch-muted); text-align: right; }
.csch-collapse-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--csch-border); }
.csch-tab-body { margin-top: 0; padding-top: 0; border-top: 0; }
.csch-us-tabs { overflow-x: auto; flex-wrap: nowrap; }
.csch-us-tabs .csch-tab { white-space: nowrap; }

@media (max-width: 640px) {
    .csch-drop { padding: 18px 14px; }
    .csch-us-extract-row { flex-direction: column; align-items: stretch; }
    .csch-us-expected.csch-input { flex: 0 0 auto; width: 100%; }
    .csch-us-extract .csch-us-extract-btn.dxbl-btn { width: 100%; }
    .csch-notice-group-head { flex-wrap: wrap; }
    .csch-collapse-head { flex-wrap: wrap; }
    .csch-collapse-summary { margin-left: 22px; text-align: left; width: 100%; }
}

/* Unit schedule: apply the reviewed dates as construction or move dates */
.csch-apply { border-left: 3px solid var(--csch-accent, var(--csch-success)); }
.csch-apply-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.csch-apply-choice {
    display: flex; gap: 8px; align-items: flex-start; flex: 1 1 260px; cursor: pointer;
    padding: 10px 12px; border: 1px solid var(--csch-border); border-radius: 2px;
    background: var(--csch-surface); font-size: 12.5px; color: var(--csch-fg);
}
.csch-apply-choice input { margin-top: 2px; }
.csch-apply-choice-on { border-color: var(--csch-success-border); background: var(--csch-success-soft); }
.csch-apply-choice-sub { display: block; color: var(--csch-muted); font-size: 11.5px; margin-top: 2px; }
.csch-apply-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.csch-apply-counts { font-size: 12px; color: var(--csch-muted); }
.csch-date-status-msg { font-size: 11.5px; color: var(--csch-danger); margin-top: 3px; max-width: 260px; }

/* ===== Construction Schedule page (csch-v2) =====
   Scoped to the page root, so the Construction Calendar (same csch-* classes) is untouched.
   Theme tokens only (Fluent: --dxds-* via --csch-*); rounded cards, tinted tiles, XAF loader. */

.csch-loader-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--csch-surface) 65%, transparent);
}

.csch-v2 { background: var(--csch-surface-soft); }
.csch-v2 .csch-page-header { align-items: center; background: var(--csch-surface); padding: 16px 20px; }
.csch-v2 .csch-page-icon {
    width: 40px; height: 40px; flex-basis: 40px; border: none; border-radius: 10px;
    background: var(--csch-primary-soft); color: var(--csch-primary);
}
.csch-v2 .csch-page-title { font-size: 18px; font-weight: 700; }
.csch-v2 .csch-page-subtitle { font-size: 12.5px; }
.csch-v2 .csch-page-picker { min-width: 300px; }
.csch-v2 .csch-page-body { padding: 16px 20px 24px; }

/* Cards */
.csch-v2 .csch-card {
    border-radius: 10px; padding: 16px 18px; margin-bottom: 14px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--csch-fg) 6%, transparent);
}
.csch-v2 .csch-pane { gap: 0; }
.csch-v2 .csch-alert { border-radius: 8px; padding: 10px 12px; }
.csch-v2 .csch-imp-note { border-left-width: 3px; border-left-color: var(--csch-primary); background: var(--csch-primary-soft); }

/* Step headers: 1 Upload, 2 Review, 3 Apply */
.csch-step-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.csch-step-num {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: var(--csch-primary-soft); color: var(--csch-primary); border: 1px solid var(--csch-primary-border);
}
.csch-step-done { background: var(--csch-success-soft); color: var(--csch-success); border-color: var(--csch-success-border); }
.csch-step-warn { background: var(--csch-warning-soft); color: var(--csch-warning); border-color: var(--csch-warning-border); }
.csch-step-title { font-size: 14.5px; font-weight: 700; color: var(--csch-fg); line-height: 1.3; }
.csch-step-sub { font-size: 12.5px; color: var(--csch-muted); margin-top: 2px; }

/* Saved-schedule picker */
.csch-saved-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 14px; border-radius: 10px;
    border: 1px solid var(--csch-border); background: var(--csch-surface);
}
.csch-saved-icon { display: inline-flex; color: var(--csch-primary); }
.csch-saved-label { font-size: 13px; font-weight: 700; color: var(--csch-fg); }
.csch-saved-picker { flex: 1 1 360px; max-width: 560px; }
.csch-saved-meta { font-size: 12px; color: var(--csch-muted); }
.csch-inline-loading { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--csch-muted); }

/* Tabs */
.csch-v2 .csch-tabs { gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--csch-border); }
.csch-v2 .csch-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; font-size: 13px; border-radius: 8px 8px 0 0; margin-bottom: -1px;
}
.csch-v2 .csch-tab-active { background: var(--csch-surface); border-bottom-width: 3px; }
.csch-tab-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
    padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: var(--csch-surface-hover); color: var(--csch-muted);
}
.csch-v2 .csch-tab-active .csch-tab-count { background: var(--csch-primary-soft); color: var(--csch-primary); }

/* Upload: drop zone beside the extract controls */
.csch-upload-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.csch-v2 .csch-us-upload { margin: 0; }
.csch-v2 .csch-drop {
    flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px;
    padding: 18px 20px; border-radius: 10px; border-color: var(--csch-primary-border);
    background: color-mix(in srgb, var(--csch-primary) 4%, var(--csch-surface));
}
.csch-v2 .csch-drop-icon {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px;
    align-items: center; justify-content: center; background: var(--csch-primary-soft);
}
.csch-v2 .csch-drop-text { flex: 1 1 auto; }
.csch-v2 .csch-drop-browse { border-radius: 6px; padding: 6px 16px; margin: 0; }
.csch-v2 .csch-file-chip { border-radius: 8px; justify-content: flex-start; margin-top: 8px; }
.csch-v2 .csch-us-extract { max-width: none; margin: 0; }

/* Review tiles, like the dashboard KPI cards */
.csch-v2 .csch-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.csch-v2 .csch-stat {
    border-radius: 10px; padding: 12px 14px; border-left: 4px solid var(--csch-primary);
    background: var(--csch-surface);
}
.csch-v2 .csch-stat-value { font-size: 26px; font-weight: 800; color: var(--csch-primary); }
.csch-v2 .csch-stat-ok { border-left-color: var(--csch-success); }
.csch-v2 .csch-stat-ok .csch-stat-value { color: var(--csch-success); }
.csch-v2 .csch-stat-warn { border-left-color: var(--csch-warning); background: var(--csch-surface); }
.csch-v2 .csch-stat-warn .csch-stat-value { color: var(--csch-warning); }

/* Apply */
.csch-v2 .csch-apply { border-left: 4px solid var(--csch-primary); }
.csch-v2 .csch-apply-choice { border-radius: 10px; padding: 12px 14px; }
.csch-v2 .csch-apply-choice:hover { border-color: var(--csch-primary-border); }

/* Units grid */
.csch-units-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.csch-search {
    position: relative; display: flex; align-items: center; flex: 0 1 340px;
    color: var(--csch-muted);
}
.csch-search svg { position: absolute; left: 10px; pointer-events: none; }
.csch-search input {
    width: 100%; padding: 7px 10px 7px 32px; border-radius: 6px; font-size: 12.5px;
    border: 1px solid var(--csch-border); background: var(--csch-surface); color: var(--csch-fg);
}
.csch-search input:focus { outline: none; border-color: var(--csch-primary); }
.csch-v2 .csch-toolbar { align-items: center; gap: 8px; }
.csch-filter-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    border: 1px solid var(--csch-border); background: var(--csch-surface); color: var(--csch-fg);
}
.csch-filter-chip input { accent-color: var(--csch-primary); margin: 0; }
.csch-filter-on { border-color: var(--csch-primary-border); background: var(--csch-primary-soft); color: var(--csch-primary); }
.csch-v2 .csch-tablewrap { border-radius: 8px; }
.csch-v2 .csch-tablewrap-tall { max-height: 560px; }
.csch-v2 .csch-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; }
.csch-v2 .csch-table td { padding: 9px 12px; vertical-align: middle; }
.csch-v2 .csch-badge { border-radius: 999px; padding: 2px 9px; font-weight: 600; }

/* Empty state */
.csch-empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 48px 20px; border-radius: 10px; border: 1px dashed var(--csch-border); background: var(--csch-surface);
}
.csch-empty-icon {
    width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--csch-primary-soft); color: var(--csch-primary);
}
.csch-empty-title { font-size: 15px; font-weight: 700; color: var(--csch-fg); }
.csch-empty-sub { font-size: 12.5px; color: var(--csch-muted); max-width: 420px; }
.csch-v2 .csch-empty { border-radius: 10px; border: 1px dashed var(--csch-border); background: var(--csch-surface); }

/* Notice groups and jobs */
.csch-v2 .csch-notice-group { border: 1px solid var(--csch-border); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.csch-v2 .csch-jobs { border-left: 4px solid var(--csch-primary); }

@media (max-width: 900px) {
    .csch-upload-grid { grid-template-columns: 1fr; }
    .csch-v2 .csch-page-picker { min-width: 0; width: 100%; }
}