/* =============================================================================
   leaseup-compliance.css — "Project Compliance Summary" accordion
   -----------------------------------------------------------------------------
   Appended below the toolbar of LeaseUpApplicationsGridRow_ListView.

   Theming: every colour resolves through the --app-* tokens defined in
   theme-bridge.css, which chain --bs-* (classic DX themes) -> --dxds-* (Fluent)
   -> literal fallback. That means the panel follows the user's selected theme in
   both light and dark without any theme-specific rule here, and without freezing
   a palette of its own. Do NOT introduce raw hex colours below.

   font-family is deliberately omitted so the panel inherits the active theme's
   body font (classic DX themes set it on body without exposing a variable).
   ============================================================================= */

.lucx {
    /* Column widths shared by every project row. The stats block is given a FIXED
       track width (not `auto`) so it starts at the same x on every row — with an
       auto track its offset would follow the badge count and the numbers would
       zig-zag down the list. */
    --lucx-stat-w: 84px;
    --lucx-stats-gap: 12px;
    --lucx-stats-w: calc(var(--lucx-stat-w) * 4 + var(--lucx-stats-gap) * 3);
    --lucx-gutter: 14px;
    --lucx-chevron-w: 16px;

    box-sizing: border-box;
    margin: 8px 0 12px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-surface);
    color: var(--app-fg);
    overflow: hidden;
}

.lucx *,
.lucx *::before,
.lucx *::after {
    box-sizing: inherit;
}

/* visually hidden but available to screen readers */
.lucx__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- header bar ---------------------------------------------------------- */

.lucx__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px var(--lucx-gutter);
    border: 0;
    /* Sits flush on the panel surface — no tinted title bar. Hover still gives a
       faint wash so the row reads as clickable. */
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.lucx__bar:hover {
    background: var(--app-surface-soft);
}

.lucx--page {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.lucx--page .lucx__panel {
    flex: 1 1 auto;
    max-height: none;
}

/* The Compliance tab of the Lease-Up Applications list: a card under the tab strip, in place of the
   grid, growing with its content (the page scrolls, not the panel). */
.lucx--embedded {
    margin: 10px 0 12px;
}

.lucx--embedded .lucx__panel {
    max-height: none;
}

/* The Applications grid while the Compliance tab shows (site.js adds and removes the class). */
.leaseup-grid-hidden {
    display: none !important;
}

.lucx__bar--static {
    border-bottom: 1px solid var(--app-border);
    cursor: default;
}

.lucx__bar--static:hover {
    background: transparent;
}

.lucx__filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--lucx-gutter);
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-soft);
}

.lucx__filter-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--app-fg);
}

.lucx__filter-select {
    flex: 0 1 320px;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-surface);
    color: var(--app-fg);
    font: inherit;
    font-size: .8125rem;
}

.lucx__filter-select:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -1px;
}

.lucx__filter-action {
    margin-left: auto;
}

.lucx__reports {
    padding: 14px var(--lucx-gutter) 18px;
    border-top: 1px solid var(--app-border);
}

.lucx__reports-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.lucx__reports-total {
    font-size: .75rem;
    color: var(--app-muted);
}

.lucx__pager {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.lucx__pager-text {
    font-size: .75rem;
    color: var(--app-muted);
}

.lucx-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .45);
}

.lucx-modal__box {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    height: min(90vh, 100%);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-surface);
    color: var(--app-fg);
    overflow: hidden;
}

.lucx-modal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--app-border);
}

.lucx-modal__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 600;
}

.lucx-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

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

.lucx__bar.is-open {
    border-bottom: 1px solid var(--app-border);
}

.lucx__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--lucx-chevron-w);
    width: var(--lucx-chevron-w);
    color: var(--app-muted);
    transition: transform .18s ease;
}

.lucx__bar.is-open .lucx__chevron,
.lucx__project.is-open .lucx__chevron {
    transform: rotate(90deg);
}

.lucx__bar-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.lucx__title {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.3;
}

.lucx__subtitle {
    font-size: .75rem;
    color: var(--app-muted);
    line-height: 1.3;
}

.lucx__bar-kpis {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.lucx__chip {
    padding: 3px 9px;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface);
    font-size: .6875rem;
    color: var(--app-muted);
    white-space: nowrap;
}

.lucx__chip b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--app-fg);
}

/* ---- panel + shared states ----------------------------------------------- */

/* An organization with many projects would otherwise push the applications grid
   far down the page, so the panel scrolls internally past a generous threshold. */
.lucx__panel {
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lucx__state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px var(--lucx-gutter);
    font-size: .8125rem;
    color: var(--app-muted);
}

.lucx__state--error {
    color: var(--app-danger);
    background: var(--app-danger-soft);
    border-top: 1px solid var(--app-danger-border);
    border-bottom: 1px solid var(--app-danger-border);
}

.lucx__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid var(--app-border);
    border-top-color: var(--app-primary);
    border-radius: 50%;
    animation: lucx-spin .7s linear infinite;
}

.lucx__spinner--sm {
    width: 11px;
    height: 11px;
}

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

@media (prefers-reduced-motion: reduce) {
    .lucx__spinner { animation-duration: 2s; }
    .lucx__chevron { transition: none; }
}

/* ---- project rows -------------------------------------------------------- */

.lucx__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lucx__project {
    /* transparent placeholder keeps the accent from shifting the row when it appears */
    border-left: 3px solid transparent;
}

.lucx__project + .lucx__project {
    border-top: 1px solid var(--app-border);
}

/* The left accent alone marks the open row — no tinted fill. */
.lucx__project.is-open {
    border-left-color: var(--app-primary);
}

.lucx__project-head {
    display: grid;
    grid-template-columns:
        var(--lucx-chevron-w)     /* chevron */
        minmax(160px, 1fr)        /* name + meta */
        auto                      /* badges */
        var(--lucx-stats-w);      /* stats — fixed, so the columns line up row to row */
    align-items: center;
    gap: 3px 12px;
    width: 100%;
    padding: 9px var(--lucx-gutter);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lucx__project-head:hover {
    background: var(--app-surface-soft);
}

.lucx__project-head:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}

.lucx__project-id {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.lucx__project-name {
    font-weight: 600;
    font-size: .8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lucx__project-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: .6875rem;
    color: var(--app-muted);
}

.lucx__project-code {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* separator drawn in CSS so the meta line collapses cleanly when there is no development */
.lucx__project-dev {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lucx__project-dev::before {
    content: "·";
    margin-right: 6px;
}

.lucx__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}

.lucx__tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: .6875rem;
    font-weight: 500;
    white-space: nowrap;
}

.lucx__tag--muted {
    background: var(--app-surface-hover);
    color: var(--app-muted);
}

.lucx__stats {
    display: grid;
    grid-template-columns: repeat(4, var(--lucx-stat-w));
    gap: var(--lucx-stats-gap);
}

.lucx__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    min-width: 0;
}

.lucx__stat-value {
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* the "/ total" half of a ratio reads as context, not as data */
.lucx__stat-of {
    font-weight: 400;
    color: var(--app-muted);
}

.lucx__stat-label {
    font-size: .625rem;
    letter-spacing: .02em;
    color: var(--app-muted);
    white-space: nowrap;
}

/* ---- lease-up meter (row 2 of the project grid) -------------------------- */

.lucx__progress-row {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.lucx__progress {
    height: 4px;
    border-radius: 999px;
    /* visible track — without it a full bar reads as a divider rule, not a meter */
    background: color-mix(in srgb, var(--app-fg) 12%, var(--app-surface));
    overflow: hidden;
}

.lucx__progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--app-primary);
}

.lucx__progress.is-over .lucx__progress-fill {
    background: var(--app-warning);
}

.lucx__progress-pct {
    min-width: 46px;
    text-align: right;
    font-size: .625rem;
    font-variant-numeric: tabular-nums;
    color: var(--app-muted);
}

.lucx__progress-pct.is-over {
    color: var(--app-warning);
    font-weight: 600;
}

/* ---- expanded detail ----------------------------------------------------- */

.lucx__detail {
    padding: 2px var(--lucx-gutter) 16px;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface);
}

.lucx__detail-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}

.lucx__generated {
    font-size: .6875rem;
    color: var(--app-muted);
}

.lucx__detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.lucx__status {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.lucx__status--ok {
    background: var(--app-success-soft);
    border-color: var(--app-success-border);
    color: var(--app-success);
}

.lucx__status--review {
    background: var(--app-warning-soft);
    border-color: var(--app-warning-border);
    color: var(--app-warning);
}

.lucx__status--critical {
    background: var(--app-danger-soft);
    border-color: var(--app-danger-border);
    color: var(--app-danger);
}

/* ---- buttons ------------------------------------------------------------- */

.lucx__btn-icon {
    display: inline-flex;
    align-items: center;
}

/* format suffix on the secondary download buttons (PDF / XLSX) */
.lucx__fmt {
    padding: 0 4px;
    border-radius: 3px;
    background: var(--app-surface-hover);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--app-muted);
}

/* ---- KPI strip ----------------------------------------------------------- */

.lucx__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
}

.lucx__kpi {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border: 1px solid var(--app-border);
    border-radius: 7px;
    background: var(--app-surface-soft);
}

.lucx__kpi--warn {
    border-color: var(--app-warning-border);
    background: var(--app-warning-soft);
}

.lucx__kpi--warn .lucx__kpi-value {
    color: var(--app-warning);
}

.lucx__kpi--ok .lucx__kpi-value {
    color: var(--app-success);
}

.lucx__kpi-value {
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.lucx__kpi-label {
    font-size: .625rem;
    letter-spacing: .02em;
    color: var(--app-muted);
}

/* ---- sections + tables --------------------------------------------------- */

.lucx__section {
    margin-top: 18px;
}

.lucx__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--app-fg);
}

/* hairline that runs out from the heading to the right edge */
.lucx__section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--app-border);
}

/* wide tables scroll inside their own box rather than widening the list view */
.lucx__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: 7px;
}

.lucx__table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: .75rem;
}

.lucx__col-num    { width: 76px; }
.lucx__col-meter  { width: 92px; }
.lucx__col-status { width: 116px; }

.lucx__table th,
.lucx__table td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: middle;
}

.lucx__table tbody tr + tr th,
.lucx__table tbody tr + tr td {
    border-top: 1px solid var(--app-border);
}

.lucx__table thead th {
    background: var(--app-surface-soft);
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
    font-size: .6875rem;
    color: var(--app-muted);
    white-space: nowrap;
}

.lucx__table tbody tr:hover td {
    background: var(--app-surface-hover);
}

/* numbers right-align so targets and filled counts compare column-wise */
.lucx__table .lucx__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lucx__table td:first-child {
    /* long category / preference names truncate rather than forcing a scrollbar */
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- in-table filled-vs-target meter ------------------------------------- */

.lucx__meter {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-fg) 12%, var(--app-surface));
    overflow: hidden;
}

.lucx__meter--na {
    background: repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-fg) 12%, var(--app-surface)) 0 3px,
        transparent 3px 6px
    );
}

.lucx__meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--app-primary);
}

.lucx__meter-fill--ok       { background: var(--app-success); }
.lucx__meter-fill--review   { background: var(--app-warning); }
.lucx__meter-fill--critical { background: var(--app-danger); }

/* ---- gaps + recommendations ---------------------------------------------- */

.lucx__gaps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 6px;
}

.lucx__gap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--app-border);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--app-surface-soft);
}

.lucx__gap--critical { border-left-color: var(--app-danger); }
.lucx__gap--high     { border-left-color: var(--app-warning); }
.lucx__gap--medium   { border-left-color: var(--app-primary); }
.lucx__gap--low      { border-left-color: var(--app-border); }

.lucx__gap-title {
    font-size: .75rem;
    font-weight: 600;
}

.lucx__gap-desc {
    font-size: .6875rem;
    color: var(--app-muted);
    line-height: 1.45;
}

.lucx__recs {
    margin: 0;
    padding-left: 18px;
    font-size: .75rem;
    color: var(--app-muted);
    line-height: 1.55;
}

/* ---- narrow viewports ---------------------------------------------------- */

/* Stats drop to their own line before they start squeezing the project name. */
@media (max-width: 1200px) {
    .lucx__project-head {
        grid-template-columns: var(--lucx-chevron-w) minmax(140px, 1fr) auto;
    }

    .lucx__stats {
        grid-column: 2 / -1;
        justify-content: start;
    }

    .lucx__stat {
        align-items: flex-start;
    }
}

@media (max-width: 820px) {
    .lucx__bar-kpis {
        display: none;
    }

    .lucx__badges {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }

    .lucx__stats {
        grid-template-columns: repeat(2, var(--lucx-stat-w));
        gap: 8px 16px;
    }

    .lucx__detail-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ── Average Income Test ───────────────────────────────────────────────────────
   A failing figure is marked on the number itself. The row's status cell already
   says which test failed, but the two percentages sit side by side and nothing
   else distinguishes the one that broke from the one that held. */
.lucx__table .lucx__num--bad {
    color: var(--app-danger-fg, #b42318);
    font-weight: 700;
}

/* Sits under a table to say what the two columns mean. The tables above it are
   self-explanatory from their headers; this one is stating a statutory rule. */
.lucx__note {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--app-muted-fg, #6b7280);
}

/* ── Opportunity filter ────────────────────────────────────────────────────────
   Mounted as the tab strip's last child, pushed to the far end of the row by an
   auto left margin so it sits opposite the tabs without the strip needing to know
   anything about it. */
.leaseup-filter-host {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.lucf { position: relative; }

.lucf__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    padding: 5px 10px;
    border: 1px solid var(--app-border, #d1d5db);
    border-radius: 7px;
    background: var(--app-surface, #fff);
    color: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .lucf__btn:hover,
    .lucf__btn.is-open { border-color: var(--app-accent, #2563eb); }

.lucf__label {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lucf__caret {
    width: 0;
    height: 0;
    border-top: 5px solid currentColor;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: .6;
}

/* Catches the outside click that closes the menu. Transparent, and below the menu
   but above everything else, so nothing behind it reacts while the menu is open. */
.lucf__scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.lucf__menu {
    position: absolute;
    z-index: 41;
    top: calc(100% + 4px);
    right: 0;
    width: 360px;
    max-width: 90vw;
    border: 1px solid var(--app-border, #d1d5db);
    border-radius: 9px;
    background: var(--app-surface, #fff);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    overflow: hidden;
    text-align: left;
}

.lucf__head {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--app-border-subtle, #eef0f3);
}

.lucf__search {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--app-border, #d1d5db);
    border-radius: 6px;
    font-size: 12.5px;
}

.lucf__clear {
    padding: 5px 10px;
    border: 1px solid var(--app-border, #d1d5db);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    cursor: pointer;
}

    .lucf__clear:disabled { opacity: .5; cursor: default; }

.lucf__list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

.lucf__option {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 400;
    cursor: pointer;
}

    .lucf__option:hover { background: var(--app-hover, rgba(0, 0, 0, .04)); }

.lucf__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lucf__meta,
.lucf__empty {
    font-size: 11.5px;
    color: var(--app-muted-fg, #6b7280);
}

.lucf__empty { padding: 10px; }