/* =============================================================================
   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__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 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 6px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-fg);
    font: inherit;
    font-size: .75rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.lucx__btn:hover:not(:disabled) {
    background: var(--app-surface-hover);
}

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

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

.lucx__btn--primary {
    background: var(--app-primary);
    border-color: var(--app-primary);
    /* contrast partner for --app-primary; falls back to the page surface, which is
       the light colour under every stock theme's primary fill */
    color: var(--bs-btn-color, var(--dxds-color-content-primary-oncolor-rest, var(--app-surface)));
    font-weight: 600;
}

.lucx__btn--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--app-fg) 14%, var(--app-primary));
    border-color: color-mix(in srgb, var(--app-fg) 14%, var(--app-primary));
}

.lucx__btn--ghost {
    background: transparent;
}

.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);
}

.lucx__icon-btn {
    padding: 3px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--app-primary);
    font: inherit;
    font-size: .6875rem;
    cursor: pointer;
}

.lucx__icon-btn:hover:not(:disabled) {
    background: var(--app-primary-soft);
}

.lucx__icon-btn:disabled {
    opacity: .5;
    cursor: default;
}

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