/*
 * Property units card + modal -- lease detail sidebar only.
 *
 * Split out of detailview.css, which 13 detail templates load but only
 * leasedetail.html renders this feature. Depends on rules that stay there
 * (.comments-container, .side-panel-card, .housing-details-button,
 * .modal, .detail-modal__*), so leasedetail.html must link this file AFTER
 * detailview.css: several overrides here tie on specificity and win on
 * source order alone.
 */

.sr-only-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.property-units-card {
    /* Tighter than the .side-panel-card default: this card is one line of text
       and a button, so it should not claim a comment card's breathing room. */
    padding: 6px;
    margin-bottom: 16px;
    color: #262626;
}

.property-units-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 0 4px;
}

.property-units-card__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    min-width: 0;
    margin: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.3;
}

/* Only the counts carry weight -- the words around them stay regular. */
.property-units-card__number {
    font-weight: 600;
}

.property-units-card__separator {
    color: #9e9e9e;
}

.property-units-card__leasing {
    color: #6a6a6a;
}

.property-units-card__leasing--open {
    color: darkgreen;
}

.property-units-card__button {
    flex: 0 0 auto;
    width: auto;
    min-height: 30px;
    padding: 0 14px;
    font-size: 14px;
}

/* Modal body */

/* Scoped to this modal on purpose: .detail-modal__body's 26px inset is shared
   with the description, housing-details and suggest-update modals, which keep
   it. Here the rows take the inset instead, so the table fills the dialog. */
.property-units-modal .detail-modal__body {
    padding: 0;
}

/* The body no longer pads, so the pre-table states carry the row inset. */
.property-units-loading {
    display: grid;
    gap: 9px;
    padding: 12px 26px;
}

.property-units-skeleton {
    display: block;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eee 25%, #f7f7f7 50%, #eee 75%);
    background-size: 200% 100%;
    animation: property-units-skeleton-pulse 1.35s ease-in-out infinite;
}

.property-units-skeleton--medium {
    width: 64%;
}

@keyframes property-units-skeleton-pulse {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.property-units-empty,
.property-units-error {
    padding: 12px 26px;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.property-units-retry {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #006ca8;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

.property-units-retry:hover,
.property-units-retry:focus-visible {
    color: #004f7c;
    text-decoration: underline;
}

.property-units-table {
    display: block;
}

/* Selection mode.

   The row is an <a> and also the 4-column grid, so a checkbox cannot live
   inside it. Each row is wrapped in a flex shell instead and the checkbox is a
   sibling of the row -- which leaves the grid, and especially the <=600px
   grid-area map at the foot of this file, completely untouched.

   The select cell is a zero-width flex item until .is-selecting opens it, and
   the row gives back exactly what the cell takes (26px of left padding becomes
   8px + a 42px cell). The thumbnail column therefore does not move when
   selection mode engages -- the table opens a column rather than shifting. */
.property-units-row-shell {
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
}

/* The border moved up to the shell, so the row must not draw a second one. */
.property-units-row-shell .property-units-row {
    flex: 1;
    min-width: 0;
    border-top: 0;
}

.property-units-row-shell--head {
    border-top: 0;
    background: #f5f5f5;
}

/* Absent until selection mode, rather than collapsed to zero width. A
   zero-width flex item still participates in layout: its contents wrap to one
   character per line and drag the row's height with them, and the checkbox
   inside it escapes the box under flex shrinking. display:none has neither
   problem, at the cost of an animated reveal that was never worth this. */
.property-units-select-cell {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    padding-left: 12px;
    white-space: nowrap;
}

.property-units-table.is-selecting .property-units-select-cell {
    display: flex;
}

/* The row surrenders its whole left inset to the column, so the table opens a
   column rather than sliding its contents sideways: the 34px cell replaces the
   26px inset, leaving the thumbnails within a few pixels of where they were. */
.property-units-table.is-selecting .property-units-row {
    padding-left: 0;
}

.property-units-select {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #176a9d;
    cursor: pointer;
}

.property-units-select:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Sits alongside --current rather than replacing it: the unit you are viewing
   keeps its own tint when it is not selected. */
.property-units-row-shell--selected,
.property-units-row-shell--selected .property-units-row--current {
    background: #eaf4fb;
}

/* In selection mode a row click toggles its checkbox instead of navigating, so
   the pointer should stop promising a link. */
.property-units-table.is-selecting .property-units-row {
    cursor: pointer;
}

/* --- Subtitle entry point ------------------------------------------------ */

/* The separator and the action are one unbreakable unit. Hiding them together
   is only half of it: without nowrap the "." can end a line while the action
   drops to the next, which reads as a stray dot just the same. */
.property-units-start-slot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Wears the same pill as "Suggest an update" -- .listing-meta-message-btn,
   which detailview.css defines and this file is loaded after. Only the
   differences belong here: the icon needs a flex row, and that button's margins
   exist for its own meta row, not for a subtitle. */
.property-units-start {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* The shared class styles :hover only, so focus gets the same treatment. No
   `outline: none` -- the UA focus ring is the only thing marking this control
   for keyboard users. */
.property-units-start:focus-visible {
    border-color: #1f1f1f;
    background: #f5f5f5;
}

/* --- Save bar ----------------------------------------------------------- */

/* Mirrors .detail-modal__header at the other end of the same scroller. The
   dialog is the scroll container, so this sticks to its bottom edge and
   --property-units-footer-h (written by the save module) lifts the down scroll
   arrow clear of it. */
.property-units-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 12px 26px;
    border-top: 1.2px solid #ececec;
    background: #fff;
}

.property-units-modal .detail-modal__scroll-zone--down {
    bottom: var(--property-units-footer-h, 0px);
}

/* These two carry `display: flex`, which outranks the UA's [hidden] rule, so
   the states have to opt out explicitly or both render at once. */
/* Everything here carries `display: flex`/`inline-flex`, which outranks the UA's
   [hidden] rule, so each hideable element has to opt out explicitly or it
   renders alongside the state that replaced it. */
.property-units-save-bar__selecting[hidden],
.property-units-save-bar__result[hidden],
.property-units-save-bar__select[hidden],
.property-units-save-bar__destination-name[hidden],
.property-units-start-slot[hidden] {
    display: none;
}

.property-units-save-bar__selecting,
.property-units-save-bar__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.property-units-save-bar__outcome {
    min-width: 0;
    margin: 0;
    color: #262626;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.property-units-save-bar__outcome a {
    color: #006ca8;
    font-weight: 600;
}

.property-units-save-bar__status {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.property-units-save-bar__count {
    margin: 0;
    color: #262626;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.property-units-save-bar__destination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: #6a6a6a;
    font-size: 13px;
    line-height: 1.3;
}

.property-units-save-bar__select {
    max-width: 220px;
    padding: 2px 6px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fff;
    color: #262626;
    font: inherit;
    font-size: 13px;
}

.property-units-save-bar__destination-name {
    color: #262626;
    font-weight: 600;
}

.property-units-save-bar__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.property-units-save-bar__cancel,
.property-units-save-bar__done {
    flex: 0 0 auto;
    padding: 0 10px;
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #5a5a5a;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
}

.property-units-save-bar__cancel:hover,
.property-units-save-bar__cancel:focus-visible,
.property-units-save-bar__done:hover,
.property-units-save-bar__done:focus-visible {
    background: #f1f1f1;
    color: #262626;
}

.property-units-save-bar__save {
    min-height: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: #176a9d;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}

.property-units-save-bar__save:hover:not(:disabled),
.property-units-save-bar__save:focus-visible:not(:disabled) {
    background: #12567f;
}

/* Disabled is the resting state -- entering selection mode starts with an empty
   diff -- so it has to read as "nothing to do", not as broken. */
.property-units-save-bar__save:disabled {
    background: #d5dde2;
    color: #7b8388;
    cursor: not-allowed;
}

/* One alignment model for the whole table: every column centres its content
   under its header, horizontally and vertically. Rows carry the horizontal
   inset themselves (the modal body has none) so the head band, hover and
   current-row backgrounds bleed to the dialog's full width. 26px matches
   .detail-modal__header's left padding, lining the first column up with the
   modal title. */
.property-units-row {
    /* Pads each column's first line to a common height. That no longer exists
       to put the four columns on one baseline -- the row centres them now --
       but it still equalises the three two-line cells, which would otherwise
       measure 37.8 / 35.9 / 36 and drift apart once centred. */
    --unit-row-line-1: 20px;
    --unit-row-thumb: 48px;
    /* Wide enough for "2 bd, 1.5 ba" on one line without leaving slack the
       centred text would spend drifting away from the photo. */
    --unit-row-text: 76px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 12px;
    padding: 12px 26px;
    border-top: 1px solid #eee;
    color: inherit;
    text-decoration: none;
}

.property-units-row--head {
    padding: 7px 26px;
    border-top: 0;
    background: #f5f5f5;
    color: #5a5a5a;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

a.property-units-row:hover,
a.property-units-row:focus-visible {
    background: #f7f7f7;
    outline: none;
}

.property-units-row--current {
    background: #f2f8fc;
}

.property-units-cell {
    min-width: 0;
    text-align: center;
}

.property-units-cell--layout,
.property-units-cell--rent,
.property-units-unit-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

/* The photo belongs to the Unit column rather than a column of its own, so the
   two read as one thing.
   Both tracks are fixed and the pair is centred, rather than letting the text
   track absorb the column's slack: a 1fr track is ~90px wide holding ~58px of
   text, and centring inside it pushed the text a further 16px off the photo.
   Fixed tracks also keep the photos on one edge down the table, and keep the
   header's "UNIT" over the same track the body text sits in -- each row is its
   own grid, so only identical track definitions stay aligned. */
.property-units-cell--unit {
    display: grid;
    grid-template-columns: var(--unit-row-thumb) var(--unit-row-text);
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.property-units-unit-text {
    grid-column: 2;
}

/* Line 1 of every column gets the same slot and centres its own text inside it,
   so the unit label, capacity, status pill and rent total share a baseline
   despite running at 15px, 13px and 12px. */
.property-units-label,
.property-units-capacity,
.property-units-rent-total,
.property-units-rent-person:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--unit-row-line-1);
}

/* Anchors the "Viewing" ribbon. `line-height: 0` keeps the wrapper exactly the
   photo's 40px -- as an inline box it would otherwise pick up descender leading
   and hand the row back the height this overlay exists to save. */
.property-units-photo {
    position: relative;
    display: block;
    width: var(--unit-row-thumb);
    line-height: 0;
}

/* 40px tall matches the two-line text stack beside it (20px line 1 + 2px gap +
   17px line 2), so photo and text start and end together. */
.property-units-thumb {
    display: block;
    box-sizing: border-box;
    width: var(--unit-row-thumb);
    height: 40px;
    object-fit: cover;
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    background: #fff;
}

.property-units-thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b0b0b0;
    font-size: 18px;
}

.property-units-label {
    /* break-word, not anywhere: "anywhere" also shrinks the box's min-content
       width to a single character, so in a minmax(0, 1fr) column a label with a
       perfectly good space in it still breaks mid-word ("ONE BEDROO / M").
       break-word keeps min-content at the longest word and breaks at the space,
       while still splitting a genuinely unbreakable one. */
    overflow-wrap: break-word;
    color: #222;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

/* Out of flow across the foot of the photo, so the current row measures exactly
   like every other row. Solid fill rather than translucent: white on #176a9d is
   5.8:1, but only if the photo underneath cannot show through. Bottom corners
   only, to follow the photo's 6px rounding. */
.property-units-current-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2px 0;
    border-radius: 0 0 5px 5px;
    background: #176a9d;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.property-units-size,
.property-units-rooms {
    color: #666;
    font-size: 13px;
    line-height: 1.3;
}

/* The Layout column's leading line, so a step darker than the rooms under it. */
.property-units-capacity {
    color: #444;
    font-size: 13px;
    line-height: 1.3;
}

/* Horizontally symmetric padding is what lets centring align the pill's text
   with the header: centre the pill and its text centres too. */
.property-units-status {
    display: inline-flex;
    align-items: center;
    /* border-box so the padding sits inside the line-1 slot rather than adding
       to it -- otherwise the chip is 26px tall and its text rides 3px low. */
    box-sizing: border-box;
    min-height: var(--unit-row-line-1);
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #5a5a5a;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.property-units-status--open {
    background: #e4f2e4;
    color: darkgreen;
}

.property-units-rent-total,
.property-units-rent-total-short {
    color: #222;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

/* The abbreviated total is for the narrow layout only; the media query below
   swaps which of the pair is shown. */
.property-units-rent-total-short {
    display: none;
}

/* 13px like .property-units-size and .property-units-rooms, so every column's
   second line shares a size and a baseline. */
.property-units-rent-person {
    color: #666;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

/* .detail-modal__header drops to 20px here, so the rows follow it. */
@media (max-width: 800px) {
    .property-units-row,
    .property-units-row--head,
    .property-units-loading,
    .property-units-empty,
    .property-units-error,
    .property-units-save-bar {
        padding-right: 20px;
        padding-left: 20px;
    }

    .property-units-select-cell {
        padding-left: 10px;
    }
}

@media (max-width: 600px) {
    .property-units-card__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .property-units-card__button {
        width: 100%;
    }

    /* Four columns will not fit a min(680px, 100vw - 32px) dialog, and there is
       no header to centre under once it goes. The row becomes four lines beside
       the photo, one field per line:

           [img]  #16                          [Leasing now]
                  2 bd, 1 ba
                  For up to 2 · Double
                  $3.8k/mo · $1.2k-$1.4k/p

       Each line holds one idea rather than being packed to the width -- the
       earlier attempts to share lines wrapped raggedly at this width. Status
       moves up beside the unit number visually; the DOM keeps it after layout,
       so screen readers still read unit, layout, status, rent. */
    .property-units-row--head {
        display: none;
    }

    /* Column 2 takes the slack so the pill parks on the right edge of line 1;
       every line below spans both content columns. */
    .property-units-row {
        grid-template-columns: var(--unit-row-thumb) minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 3px;
        padding-right: 16px;
        padding-left: 16px;
    }

    /* Both dissolve so the photo, the unit number and its size each place on
       their own grid line rather than being locked together in a cell. */
    .property-units-cell--unit,
    .property-units-unit-text {
        display: contents;
    }

    /* The wrapper is the grid item now, not the image inside it. */
    .property-units-photo {
        grid-area: 1 / 1 / 5 / 2;
        align-self: center;
    }

    .property-units-label {
        grid-area: 1 / 2 / 2 / 3;
    }

    .property-units-cell--status {
        grid-area: 1 / 3 / 2 / 4;
        justify-self: end;
    }

    .property-units-size {
        grid-area: 2 / 2 / 3 / 4;
    }

    .property-units-cell--layout {
        grid-area: 3 / 2 / 4 / 4;
    }

    /* `start`, not the default stretch, so the prices read from the same left
       edge as the lines above them. */
    .property-units-cell--rent {
        grid-area: 4 / 2 / 5 / 4;
        justify-self: start;
    }

    .property-units-loading,
    .property-units-empty,
    .property-units-error,
    .property-units-save-bar {
        padding-right: 16px;
        padding-left: 16px;
    }

    /* Narrower here, and the row gives back all of its 16px rather than 18px:
       the four-line stack is already tight against the dialog edge. */
    .property-units-select-cell {
        width: 30px;
        padding-left: 8px;
    }

    /* Keeps the counts and the action on one line at this width, where they are
       otherwise ~13px too wide.

       The header reserves its right padding for .detail-modal__close, but that
       button is absolutely positioned in the header's top 48px while this
       paragraph always starts below it -- even with a single-line title, which
       ends at 52px. So the subtitle can spend the reserve without ever running
       under the button. Scoped to this modal: the description and
       housing-details dialogs have no second line to fit. */
    .property-units-modal .detail-modal__heading p {
        margin-right: -44px;
    }

    /* The status pill and the save actions both want the right edge; stack the
       bar instead of letting the destination select squeeze to nothing. */
    .property-units-save-bar__selecting {
        flex-wrap: wrap;
        gap: 10px;
    }

    .property-units-save-bar__actions {
        flex: 1 0 auto;
        justify-content: flex-end;
    }

    .property-units-cell {
        text-align: left;
    }

    .property-units-cell--layout,
    .property-units-cell--rent {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 6px;
    }

    .property-units-label,
    .property-units-capacity,
    .property-units-rent-total,
    .property-units-rent-person:first-child,
    .property-units-status {
        justify-content: flex-start;
        min-height: 0;
    }

    /* Swap the full total for the abbreviated one: "$3,800/mo" is what pushes
       the rent onto a second line at this width, "$3.8k/mo" fits. */
    .property-units-rent-total {
        display: none;
    }

    .property-units-rent-total-short {
        display: inline;
    }

    /* Separators inside the two lines that still carry more than one field.
       The two-value form keeps them out of the accessibility tree.
       `.property-units-rooms` is absent when a unit has no room types, so its
       separator goes with it; the price separator uses :not(:first-child) so an
       individual lease -- per-person only, no total -- does not open its line
       with a stray dot. */
    .property-units-rooms::before,
    .property-units-rent-person:not(:first-child)::before {
        content: "·" / "";
        margin-right: 4px;
        color: #b0b0b0;
    }
}