/* ============================================================================
   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; }
}