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

.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: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
}

.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 .dmt-leaf-name,
.rpd-unit.is-blocked .dmt-leaf-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);
}

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