/* ============================================================================
   Agent Growth Platform — Listings, Buyer Needs, Promotion Center, and the
   admin cost/config consoles.

   Namespace: .wr-* classes, built entirely on the --wr-* design tokens defined
   in app-shell.css. Nothing here introduces a new colour literal that isn't a
   token or a token-derived alpha, so a future palette change propagates here
   for free. Loaded after app-shell.css so these definitions win where a name
   overlaps.
   ============================================================================ */

/* ---------------------------------------------------------------- shared bits */

.wr-req { color: var(--wr-danger); }

.wr-muted { color: var(--wr-ink-600); }

.wr-linklike {
    background: none;
    border: 0;
    padding: 0;
    margin-right: 12px;
    color: var(--wr-accent);
    font-size: var(--wr-text-sm);
    cursor: pointer;
    text-decoration: underline;
}
.wr-linklike:hover { color: var(--wr-accent-ink); }

.wr-form-section-title {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wr-ink-900);
}

.wr-form-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.wr-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    line-height: 1.5;
}
.wr-checkbox-row input { margin-top: 4px; flex: none; }

.wr-inline-note,
.wr-inline-warn {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--wr-radius-md, 10px);
    background: var(--wr-accent-soft);
    border: 1px solid var(--wr-border);
    color: var(--wr-ink-900);
    font-size: var(--wr-text-sm);
    margin-bottom: 16px;
}
.wr-inline-warn {
    background: var(--wr-money-soft);
    border-color: var(--wr-money);
}
.wr-inline-note i,
.wr-inline-warn i { color: var(--wr-accent-ink); }

.wr-breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: var(--wr-text-sm);
    color: var(--wr-ink-600);
    margin-bottom: 14px;
}
.wr-breadcrumb a { color: var(--wr-accent); text-decoration: none; }
.wr-breadcrumb a:hover { text-decoration: underline; }

.wr-result-count {
    font-size: var(--wr-text-sm);
    color: var(--wr-ink-600);
    margin: 0 0 14px;
}

.wr-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.wr-status-pill.is-active  { background: var(--wr-accent-soft); color: var(--wr-accent-ink); }
.wr-status-pill.is-info    { background: rgba(62, 123, 250, 0.12); color: var(--wr-accent-ink); }
.wr-status-pill.is-success { background: rgba(34, 160, 100, 0.14); color: #14603c; }
.wr-status-pill.is-warn    { background: var(--wr-money-soft); color: var(--wr-money-ink); }
.wr-status-pill.is-danger  { background: rgba(214, 69, 69, 0.12); color: #8f2020; }
.wr-status-pill.is-muted   { background: var(--wr-surface-2); color: var(--wr-ink-600); }

/* ---------------------------------------------------------------- toolbars + filters */

.wr-listing-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.wr-listing-usage {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--wr-ink-600);
    font-size: var(--wr-text-sm);
}
.wr-listing-usage strong {
    font-size: 1.5rem;
    color: var(--wr-ink-900);
}

.wr-listing-filters,
.wr-buyer-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
    padding: 16px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg, 14px);
    margin-bottom: 18px;
}
.wr-filter-field-wide { grid-column: span 2; }
.wr-filter-field-narrow { max-width: 120px; }
.wr-filter-field .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wr-ink-600);
    margin-bottom: 4px;
}
.wr-filter-actions {
    display: flex;
    gap: 8px;
    align-items: end;
}

.wr-listing-tabs,
.wr-status-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ---------------------------------------------------------------- public listing grid */

.wr-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.wr-listing-card {
    display: flex;
    flex-direction: column;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg, 14px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.wr-listing-card:hover {
    transform: translateY(-3px);
    border-color: var(--wr-accent);
    box-shadow: 0 12px 28px rgba(20, 22, 26, 0.10);
}

.wr-listing-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--wr-surface-2);
}
.wr-listing-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wr-listing-card-noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--wr-ink-400);
    font-size: 2rem;
}
.wr-listing-card-status {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20, 22, 26, 0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
}

.wr-listing-card-body { padding: 16px; }
.wr-listing-card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wr-ink-900);
}
.wr-listing-card-title {
    margin: 4px 0 2px;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
}
.wr-listing-card-address {
    margin: 0 0 10px;
    font-size: var(--wr-text-sm);
    color: var(--wr-ink-600);
}
.wr-listing-card-specs {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: var(--wr-text-sm);
    color: var(--wr-ink-600);
}
.wr-listing-card-specs strong { color: var(--wr-ink-900); }
.wr-listing-card-brokerage {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--wr-border);
    font-size: 0.78rem;
    color: var(--wr-ink-400);
}

.wr-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}
.wr-pagination-label { font-size: var(--wr-text-sm); color: var(--wr-ink-600); }

/* ---------------------------------------------------------------- my listings rows */

.wr-listing-manage-grid { display: grid; gap: 16px; }

.wr-listing-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: start;
}
.wr-listing-row.is-archived { opacity: 0.62; }

.wr-listing-row-media {
    aspect-ratio: 4 / 3;
    border-radius: var(--wr-radius-md, 10px);
    overflow: hidden;
    background: var(--wr-surface-2);
}
.wr-listing-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wr-listing-row-noimage {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--wr-ink-400); font-size: 1.6rem;
}

.wr-listing-row-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px;
}
.wr-listing-row-head h3 { margin: 0; font-size: 1.02rem; }
.wr-listing-row-address { margin: 0 0 8px; font-size: var(--wr-text-sm); color: var(--wr-ink-600); }
.wr-listing-row-facts {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: var(--wr-text-sm); color: var(--wr-ink-600); margin-bottom: 12px;
}
.wr-listing-row-price { font-weight: 700; color: var(--wr-ink-900); }
.wr-listing-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- listing detail */

.wr-listing-detail-gallery { margin-bottom: 24px; }

/* ================================================================= listing gallery

   Main stage, chevron navigation, counter, thumbnail strip, and lightbox. Rendered by
   Components/Shared/ListingGallery.razor. */

/* Stage height is driven by the viewport, not by an aspect ratio. A fixed 16:9 stage on a ~1500px
   container works out to ~840px tall -- taller than most laptop viewports, so the page opens on
   nothing but the photo. `aspect-ratio` plus `max-height` doesn't fix it either: capping the
   height of an aspect-ratio box shrinks its WIDTH to preserve the ratio, leaving the stage
   narrower than the strip beneath it. clamp() keeps it full-width at every size and simply stops
   growing past a sensible ceiling -- the premium wide-gallery look, without the runaway height. */
.wr-gallery-stage {
    position: relative;
    width: 100%;
    height: clamp(220px, 44vw, 500px);
    border-radius: var(--wr-radius-lg, 14px);
    overflow: hidden;
    background: var(--wr-surface-2);
}

/* The stage image is wrapped in a real <button> so opening the lightbox is keyboard-reachable and
   announced, rather than a click handler bolted to a div. */
.wr-gallery-main {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
.wr-gallery-main:focus-visible {
    outline: 3px solid var(--wr-accent);
    outline-offset: -3px;
}

.wr-gallery-image {
    width: 100%;
    height: 100%;
    /* Never distort an agent's upload -- crop to the frame instead. */
    object-fit: cover;
    display: block;
    animation: wr-gallery-fade 0.22s ease;
}
/* The placeholder is artwork, not a photograph: contain it so it isn't cropped, and give the empty
   state a shorter frame so a photo-less listing doesn't push its price and agent card below the
   fold behind 500px of grey. */
.wr-gallery.is-empty .wr-gallery-stage { height: clamp(180px, 26vw, 280px); }
.wr-gallery-image.is-placeholder { object-fit: contain; padding: 24px; opacity: 0.7; }

@keyframes wr-gallery-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- chevrons ---- */

.wr-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    font-size: 1.05rem;
    /* Legible over both a bright sky and a dark interior: a dark translucent disc with a white
       glyph, plus a soft ring so it separates from busy photography either way. */
    background: rgba(17, 20, 26, 0.55);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}
.wr-gallery-nav:hover { background: rgba(17, 20, 26, 0.8); transform: translateY(-50%) scale(1.06); }
.wr-gallery-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wr-gallery-nav.is-prev { left: 14px; }
.wr-gallery-nav.is-next { right: 14px; }

/* ---- counter + affordance ---- */

.wr-gallery-counter,
.wr-gallery-expand {
    position: absolute;
    bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(17, 20, 26, 0.62);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}
.wr-gallery-counter { right: 14px; font-variant-numeric: tabular-nums; }
.wr-gallery-expand { left: 14px; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.wr-gallery-expand i { font-size: 0.75rem; }

/* Neighbour prefetch: in the DOM so the browser fetches it, but never laid out or announced. */
.wr-gallery-preload {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ---- thumbnail strip ---- */

.wr-gallery-thumbs-wrap { position: relative; }

.wr-gallery-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Room for the selected ring and focus outline, which overflow:auto would otherwise clip. */
    padding: 12px 4px 6px;
    margin: 0 -4px;
    scrollbar-width: thin;
}
.wr-gallery-thumbs::-webkit-scrollbar { height: 6px; }
.wr-gallery-thumbs::-webkit-scrollbar-thumb { background: var(--wr-border-strong); border-radius: 999px; }

.wr-gallery-thumb {
    flex: none;
    width: 104px;
    height: 78px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--wr-radius-sm, 8px);
    overflow: hidden;
    background: var(--wr-surface-2);
    cursor: pointer;
    position: relative;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.wr-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.16s ease, transform 0.24s ease;
    opacity: 0.82;
}
.wr-gallery-thumb:hover img { opacity: 1; transform: scale(1.05); }
.wr-gallery-thumb:hover { box-shadow: 0 4px 12px rgba(20, 22, 26, 0.14); }
.wr-gallery-thumb:focus-visible { outline: 3px solid var(--wr-accent); outline-offset: 2px; }

.wr-gallery-thumb.is-selected {
    border-color: var(--wr-accent);
    box-shadow: 0 0 0 2px var(--wr-accent-soft);
}
.wr-gallery-thumb.is-selected img { opacity: 1; }

/* Blazor Server prerenders this gallery, so the controls are painted before any click can reach the
   server. During that window `.is-loading` is present: show a wait cursor and suppress the hover
   affordance, so an early click reads as "not ready yet" rather than as a broken control. The
   class is removed on the first interactive render, which is normally well under a second. */
.wr-gallery.is-loading .wr-gallery-nav,
.wr-gallery.is-loading .wr-gallery-thumb,
.wr-gallery.is-loading .wr-gallery-main { cursor: progress; }
.wr-gallery.is-loading .wr-gallery-thumb:hover img { opacity: 0.75; transform: none; }
.wr-gallery.is-loading .wr-gallery-thumb:hover { box-shadow: none; }

/* ================================================================= lightbox */

/* Applied to <body> while the lightbox is open. overscroll-behavior is the part that matters on
   touch: without it, swiping past the end of the viewer chains the gesture to the listing page
   underneath and scrolls it away behind the overlay. */
body.wr-scroll-locked {
    overflow: hidden;
    overscroll-behavior: none;
}

.wr-lightbox {
    position: fixed;
    inset: 0;
    /* Above the dashboard shell's sticky sidebar (100) and topbar (90). */
    z-index: 2000;
    display: flex;
    flex-direction: column;
    /* Fully opaque, not a translucent scrim: this is a photo viewer, and letting the app shell
       ghost through behind the image both distracts from the photograph and makes the backdrop
       read as a half-finished modal. */
    background: #0b0d12;
    animation: wr-gallery-fade 0.18s ease;
}
.wr-lightbox:focus { outline: none; }

.wr-lightbox-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    color: #fff;
    flex: none;
}
.wr-lightbox-title {
    font-size: 0.92rem;
    font-weight: 600;
    /* Long addresses truncate rather than pushing the counter and close button off-screen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wr-lightbox-counter {
    margin-left: auto;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.78);
}
.wr-lightbox-close {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.16s ease;
}
.wr-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.wr-lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.wr-lightbox-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0 16px;
}

.wr-lightbox-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: grid;
    place-items: center;
}
.wr-lightbox-figure img {
    max-width: 100%;
    /* min() rather than 100% so the image is bounded by the stage, never overflowing it on a
       short landscape viewport. */
    max-height: min(100%, 82vh);
    width: auto;
    height: auto;
    /* Full-screen view shows the whole photograph -- no cropping here, unlike the stage. */
    object-fit: contain;
    border-radius: 8px;
    animation: wr-gallery-fade 0.2s ease;
}

.wr-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}
.wr-lightbox-nav:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-50%) scale(1.06); }
.wr-lightbox-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wr-lightbox-nav.is-prev { left: 12px; }
.wr-lightbox-nav.is-next { right: 12px; }

.wr-lightbox-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 18px 16px;
    flex: none;
    justify-content: safe center;
}
.wr-lightbox-thumbs .wr-gallery-thumb {
    width: 84px;
    height: 62px;
    background: rgba(255, 255, 255, 0.08);
}
.wr-lightbox-thumbs .wr-gallery-thumb img { opacity: 0.55; }
.wr-lightbox-thumbs .wr-gallery-thumb.is-selected {
    border-color: #fff;
    box-shadow: none;
}
.wr-lightbox-thumbs .wr-gallery-thumb.is-selected img,
.wr-lightbox-thumbs .wr-gallery-thumb:hover img { opacity: 1; }

.wr-listing-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

.wr-listing-detail-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.wr-listing-detail-price { font-size: 2rem; font-weight: 700; color: var(--wr-ink-900); }
.wr-listing-detail-title { margin: 8px 0 4px; font-size: 1.35rem; font-weight: 600; }
.wr-listing-detail-address { margin: 0 0 20px; color: var(--wr-ink-600); }

.wr-listing-detail-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    padding: 18px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg, 14px);
}
.wr-spec { display: flex; flex-direction: column; gap: 2px; }
.wr-spec strong { font-size: 1.25rem; color: var(--wr-ink-900); }
.wr-spec span { font-size: 0.78rem; color: var(--wr-ink-600); text-transform: uppercase; letter-spacing: 0.04em; }

.wr-listing-detail-section-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wr-ink-900);
}

/* Preserves agent-authored line breaks. Razor already HTML-escapes the text, so this only affects
   whitespace rendering, never markup interpretation. */
.wr-listing-detail-description {
    margin: 0;
    color: var(--wr-ink-600);
    line-height: 1.65;
    white-space: pre-wrap;
}

.wr-openhouse-banner {
    display: flex; gap: 14px; align-items: flex-start;
    margin-top: 20px; padding: 16px 18px;
    border-radius: var(--wr-radius-lg, 14px);
    background: var(--wr-money-soft);
    border: 1px solid var(--wr-money);
}
.wr-openhouse-banner i { color: var(--wr-money-ink); font-size: 1.2rem; margin-top: 2px; }
.wr-openhouse-banner div { display: flex; flex-direction: column; gap: 2px; }

.wr-fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 0;
}
.wr-fact-grid dt { font-size: 0.78rem; color: var(--wr-ink-400); text-transform: uppercase; letter-spacing: 0.04em; }
.wr-fact-grid dd { margin: 2px 0 0; color: var(--wr-ink-900); }

.wr-listing-disclaimer {
    margin-top: 20px;
    font-size: 0.8rem;
    color: var(--wr-ink-400);
    line-height: 1.6;
}

.wr-listing-detail-aside { position: sticky; top: 90px; }

.wr-agent-card-identity { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.wr-agent-card-identity > div { display: flex; flex-direction: column; }
.wr-agent-card-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.wr-agent-card-brokerage { font-size: var(--wr-text-sm); color: var(--wr-ink-600); }

.wr-agent-contact { display: flex; flex-direction: column; gap: 8px; }

.wr-owner-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wr-border);
}

.wr-share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.wr-share-url { font-size: 0.78rem; }

/* ---------------------------------------------------------------- photo management */

.wr-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.wr-photo-tile {
    position: relative;
    border: 2px solid var(--wr-border);
    border-radius: var(--wr-radius-md, 10px);
    overflow: hidden;
    background: var(--wr-surface-2);
}
.wr-photo-tile.is-primary { border-color: var(--wr-accent); }
.wr-photo-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.wr-photo-badge {
    position: absolute; top: 8px; left: 8px;
    padding: 3px 8px; border-radius: 999px;
    background: var(--wr-accent); color: #fff;
    font-size: 0.68rem; font-weight: 600;
}
.wr-photo-actions {
    display: flex; gap: 6px; flex-wrap: wrap; padding: 8px;
    background: var(--wr-surface);
}
.wr-btn-danger-ghost { color: var(--wr-danger); border-color: var(--wr-danger); }

.wr-photo-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.wr-photo-pick {
    width: 96px; height: 72px; padding: 0;
    border: 2px solid var(--wr-border); border-radius: var(--wr-radius-sm, 8px);
    background: var(--wr-surface-2); overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; color: var(--wr-ink-600);
}
.wr-photo-pick.is-selected { border-color: var(--wr-accent); }
.wr-photo-pick img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- promotion center */

.wr-promote-layout,
.wr-linkedin-layout,
.wr-buyer-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}
.wr-promote-aside,
.wr-linkedin-aside,
.wr-buyer-detail-aside { position: sticky; top: 90px; }

.wr-channel-row { display: flex; gap: 12px; flex-wrap: wrap; }
.wr-channel {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 120px; padding: 16px 18px;
    border: 2px solid var(--wr-border); border-radius: var(--wr-radius-lg, 14px);
    background: var(--wr-surface); cursor: pointer;
    font-size: var(--wr-text-sm); color: var(--wr-ink-900);
}
.wr-channel i { font-size: 1.5rem; }
.wr-channel small { color: var(--wr-ink-400); font-size: 0.72rem; }
.wr-channel.is-selected { border-color: var(--wr-accent); background: var(--wr-accent-soft); }
.wr-channel.is-disabled { opacity: 0.55; cursor: not-allowed; }

.wr-promotion-types { display: flex; gap: 8px; flex-wrap: wrap; }
.wr-promotion-type {
    padding: 8px 14px;
    border: 1px solid var(--wr-border); border-radius: 999px;
    background: var(--wr-surface); color: var(--wr-ink-600);
    font-size: var(--wr-text-sm); cursor: pointer;
}
.wr-promotion-type.is-selected {
    border-color: var(--wr-accent);
    background: var(--wr-accent);
    color: #fff;
}

.wr-generate-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wr-generate-row input { flex: 1 1 240px; }

.wr-post-editor { font-family: inherit; line-height: 1.6; }
.wr-post-meta {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 8px; font-size: 0.78rem; color: var(--wr-ink-400);
}

.wr-promote-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wr-schedule-inline { display: flex; gap: 8px; align-items: center; }
.wr-schedule-inline input { width: 210px; }

.wr-promote-preview-image {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--wr-radius-md, 10px); margin-bottom: 12px;
}
.wr-promote-preview-price { font-size: 1.2rem; font-weight: 700; }
.wr-promote-preview-address { margin: 4px 0 10px; font-size: var(--wr-text-sm); color: var(--wr-ink-600); }

.wr-post-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wr-post-history > li { padding-bottom: 14px; border-bottom: 1px solid var(--wr-border); }
.wr-post-history > li:last-child { border-bottom: 0; padding-bottom: 0; }
.wr-post-history-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; font-size: var(--wr-text-sm); }
.wr-post-history-excerpt { margin: 0 0 6px; font-size: var(--wr-text-sm); color: var(--wr-ink-600); }
.wr-post-history-meta {
    display: flex; gap: 12px; flex-wrap: wrap;
    font-size: 0.75rem; color: var(--wr-ink-400); margin-bottom: 6px;
}
.wr-post-history-error {
    margin: 6px 0; padding: 8px 10px;
    border-radius: var(--wr-radius-sm, 8px);
    background: rgba(214, 69, 69, 0.08);
    color: #8f2020; font-size: 0.78rem;
}

/* ---------------------------------------------------------------- LinkedIn hub */

.wr-connection-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wr-connection-row > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; }
.wr-connection-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.wr-connection-status { font-size: var(--wr-text-sm); }
.wr-connection-status.is-connected { color: #14603c; }

.wr-post-list { display: grid; gap: 18px; }
.wr-post-item { padding-bottom: 16px; border-bottom: 1px solid var(--wr-border); }
.wr-post-item:last-child { border-bottom: 0; padding-bottom: 0; }
.wr-post-item-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: var(--wr-text-sm); }
.wr-post-item-body { margin: 0 0 8px; white-space: pre-wrap; line-height: 1.6; color: var(--wr-ink-900); }
.wr-post-item-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.78rem; color: var(--wr-ink-400); }

.wr-usage-metric { margin-bottom: 18px; }
.wr-usage-label { display: block; font-size: 0.78rem; color: var(--wr-ink-400); text-transform: uppercase; letter-spacing: 0.04em; }
.wr-usage-value { display: block; font-size: 1.1rem; font-weight: 600; margin: 2px 0 8px; }
.wr-usage-track { height: 6px; border-radius: 999px; background: var(--wr-surface-2); overflow: hidden; }
.wr-usage-fill { height: 100%; background: var(--wr-accent); border-radius: 999px; }
.wr-usage-fill.is-ai { background: var(--wr-ai); }

.wr-howitworks { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: var(--wr-text-sm); color: var(--wr-ink-600); }

/* ---------------------------------------------------------------- buyer needs */

.wr-privacy-callout {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px; margin-bottom: 18px;
    border-radius: var(--wr-radius-lg, 14px);
    background: var(--wr-accent-soft);
    border: 1px solid var(--wr-accent);
}
.wr-privacy-callout i { color: var(--wr-accent-ink); font-size: 1.15rem; margin-top: 2px; }
.wr-privacy-callout > div { display: flex; flex-direction: column; gap: 4px; }
.wr-privacy-callout span { font-size: var(--wr-text-sm); color: var(--wr-ink-600); line-height: 1.55; }

.wr-buyer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
.wr-buyer-card {
    display: block; padding: 18px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg, 14px);
    text-decoration: none; color: inherit;
    transition: border-color 0.16s ease, transform 0.16s ease;
}
.wr-buyer-card:hover { border-color: var(--wr-accent); transform: translateY(-2px); }
.wr-buyer-card-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wr-buyer-card-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.wr-buyer-card-budget { margin: 8px 0; font-size: 1.15rem; font-weight: 700; color: var(--wr-ink-900); }
.wr-buyer-card-specs { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--wr-text-sm); color: var(--wr-ink-600); }
.wr-buyer-card-financing { margin-top: 10px; font-size: var(--wr-text-sm); color: #14603c; }
.wr-buyer-card-agent {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wr-border);
    font-size: 0.8rem; color: var(--wr-ink-400);
}

.wr-buyer-mine { display: grid; gap: 14px; }
.wr-buyer-mine-row { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
.wr-buyer-mine-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.wr-buyer-detail-title { margin: 0; font-size: 1.4rem; }
.wr-buyer-detail-budget { margin-top: 8px; font-size: 1.6rem; font-weight: 700; }

.wr-match-list { display: grid; gap: 10px; }
.wr-match-row {
    display: flex; justify-content: space-between; gap: 14px; align-items: center;
    padding: 12px 14px; border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md, 10px);
    text-decoration: none; color: inherit;
}
.wr-match-row:hover { border-color: var(--wr-accent); }
.wr-match-row > div { display: flex; flex-direction: column; gap: 2px; }
.wr-match-row .wr-muted { font-size: var(--wr-text-sm); }
.wr-match-price { font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------- admin consoles */

.wr-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.wr-kpi-tile {
    padding: 16px 18px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg, 14px);
}
.wr-kpi-label { display: block; font-size: 0.75rem; color: var(--wr-ink-400); text-transform: uppercase; letter-spacing: 0.04em; }
.wr-kpi-value { display: block; font-size: 1.5rem; font-weight: 700; margin-top: 4px; }
.wr-kpi-value.is-negative, .is-negative { color: var(--wr-danger); }

.wr-table-scroll { overflow-x: auto; }

.wr-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wr-text-sm);
}
.wr-data-table th,
.wr-data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--wr-border);
    vertical-align: top;
}
.wr-data-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wr-ink-400);
    white-space: nowrap;
}
.wr-data-table td.num, .wr-data-table th.num { text-align: right; white-space: nowrap; }
.wr-table-sub { display: block; font-size: 0.75rem; }
.wr-row-risk { background: rgba(214, 69, 69, 0.05); }
.wr-row-highcost { background: var(--wr-money-soft); }

.wr-health-legend {
    display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
    margin-bottom: 14px; font-size: var(--wr-text-sm); color: var(--wr-ink-600);
}
.wr-health-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
}
.wr-health-dot.is-healthy  { background: #22a064; }
.wr-health-dot.is-monitor  { background: #e7c53d; }
.wr-health-dot.is-highcost { background: var(--wr-urgent); }
.wr-health-dot.is-risk     { background: var(--wr-danger); }

.wr-cell-input { max-width: 110px; display: inline-block; text-align: right; }

.wr-setting-list { display: grid; gap: 14px; }
.wr-setting-row {
    display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap;
    padding-bottom: 12px; border-bottom: 1px solid var(--wr-border);
}
.wr-setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.wr-setting-input { display: flex; gap: 10px; align-items: center; }
.wr-setting-input input { max-width: 200px; }

.wr-promo-layout,
.wr-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
}

.wr-agent-picker { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.wr-agent-picker button {
    width: 100%; text-align: left; padding: 10px 12px;
    border: 1px solid var(--wr-border); border-radius: var(--wr-radius-sm, 8px);
    background: var(--wr-surface); cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
}
.wr-agent-picker button.is-selected { border-color: var(--wr-accent); background: var(--wr-accent-soft); }

.wr-skipped-list { margin: 10px 0 0; padding-left: 18px; font-size: var(--wr-text-sm); color: var(--wr-ink-600); }

/* Modal used by the profitability drill-down. */
.wr-modal-backdrop {
    position: fixed; inset: 0; z-index: 1040;
    background: rgba(20, 22, 26, 0.5);
}
.wr-modal {
    position: fixed; z-index: 1050;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    background: var(--wr-surface);
    border-radius: var(--wr-radius-lg, 14px);
    box-shadow: 0 24px 64px rgba(20, 22, 26, 0.28);
    overflow: hidden;
}
.wr-modal-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    padding: 20px 24px; border-bottom: 1px solid var(--wr-border);
}
.wr-modal-head h2 { margin: 0; font-size: 1.1rem; }
.wr-modal-head p { margin: 2px 0 0; font-size: var(--wr-text-sm); }
.wr-modal-body { padding: 20px 24px; overflow-y: auto; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .wr-listing-detail-layout,
    .wr-promote-layout,
    .wr-linkedin-layout,
    .wr-buyer-detail-layout {
        grid-template-columns: 1fr;
    }
    .wr-listing-detail-aside,
    .wr-promote-aside,
    .wr-linkedin-aside,
    .wr-buyer-detail-aside {
        position: static;
    }
}

@media (max-width: 720px) {
    .wr-listing-row { grid-template-columns: 1fr; }
    .wr-listing-row-media { max-width: 260px; }
    .wr-filter-field-wide { grid-column: span 1; }
    .wr-filter-field-narrow { max-width: none; }
    .wr-listing-detail-price { font-size: 1.5rem; }
    .wr-buyer-mine-row { flex-direction: column; align-items: stretch; }
    .wr-modal { width: calc(100vw - 16px); max-height: calc(100vh - 32px); }
    .wr-setting-row { flex-direction: column; align-items: stretch; }
    .wr-setting-input input { max-width: none; }

    /* ---- gallery on phones ----
       The stage stays full-width within the content column; only the controls shrink. 40px keeps
       the chevrons above the 40px minimum touch target while giving the photo more room, and
       tucking them closer to the edges stops them covering the middle of the image. */
    .wr-gallery-nav { width: 40px; height: 40px; font-size: 0.95rem; }
    .wr-gallery-nav.is-prev { left: 8px; }
    .wr-gallery-nav.is-next { right: 8px; }

    .wr-gallery-counter,
    .wr-gallery-expand { bottom: 10px; font-size: 0.74rem; padding: 5px 10px; }
    .wr-gallery-counter { right: 10px; }
    /* Two pills plus two chevrons is too much furniture on a 390px photo -- the counter is the
       one that carries information, so the "view all photos" hint stands down. Tapping the image
       still opens the lightbox. */
    .wr-gallery-expand { display: none; }

    .wr-gallery-thumb { width: 84px; height: 64px; }

    .wr-lightbox-bar { padding: 10px 12px; gap: 10px; }
    .wr-lightbox-title { font-size: 0.82rem; }
    .wr-lightbox-nav { width: 44px; height: 44px; font-size: 1rem; }
    .wr-lightbox-nav.is-prev { left: 6px; }
    .wr-lightbox-nav.is-next { right: 6px; }
    .wr-lightbox-stage { padding: 0 8px; }
    .wr-lightbox-thumbs { padding: 10px 12px 12px; }
    .wr-lightbox-thumbs .wr-gallery-thumb { width: 66px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .wr-gallery-image,
    .wr-lightbox,
    .wr-lightbox-figure img { animation: none; }
    .wr-gallery-thumb,
    .wr-gallery-thumb img,
    .wr-gallery-nav,
    .wr-lightbox-nav { transition: none; }
    .wr-gallery-nav:hover,
    .wr-lightbox-nav:hover { transform: translateY(-50%); }
    .wr-gallery-thumb:hover img { transform: none; }
    .wr-gallery-thumbs { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- dashboard growth panel

   Rendered inside the DashboardV2 rail/main column, so it inherits .wr-panel's surface from
   dashboard-v2.css and only adds its own grid + card treatment here. */

.wr-growth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.wr-growth-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: var(--wr-radius-md, 10px);
    border: 1px solid var(--wr-border);
    background: var(--wr-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.16s ease, transform 0.16s ease;
}
.wr-growth-card:hover { border-color: var(--wr-accent); transform: translateY(-2px); }

.wr-growth-icon {
    flex: none;
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
}
.wr-growth-icon.is-ai { background: rgba(139, 107, 255, 0.14); color: var(--wr-ai); }
.wr-growth-icon.is-linkedin { background: rgba(10, 102, 194, 0.12); color: #0a66c2; }

.wr-growth-body { display: flex; flex-direction: column; min-width: 0; }
.wr-growth-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wr-ink-400); }
.wr-growth-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.wr-growth-sub { font-size: 0.76rem; color: var(--wr-ink-600); }

/* Skeleton state: two shimmering bars standing in for the label and the value, so the panel
   occupies its final height from the first paint and nothing below it jumps when data lands. */
.wr-growth-card.is-skeleton {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    pointer-events: none;
}
.wr-growth-card.is-skeleton span {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--wr-surface-2) 25%, var(--wr-border) 37%, var(--wr-surface-2) 63%);
    background-size: 400% 100%;
    animation: wr-growth-shimmer 1.4s ease infinite;
}
.wr-growth-card.is-skeleton span:last-child { width: 55%; height: 22px; }

@keyframes wr-growth-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .wr-growth-card.is-skeleton span { animation: none; }
    .wr-growth-card:hover { transform: none; }
}

.wr-growth-nudges { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.wr-growth-nudges li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--wr-radius-sm, 8px);
    background: var(--wr-surface-2);
    font-size: var(--wr-text-sm);
}
.wr-growth-nudges li i { color: var(--wr-accent); flex: none; }
.wr-growth-nudges li span { flex: 1; }
.wr-growth-nudges li a { color: var(--wr-accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
.wr-growth-nudges li a:hover { text-decoration: underline; }

.wr-growth-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--wr-radius-sm, 8px);
    background: var(--wr-accent-soft);
}
.wr-growth-empty p { margin: 0; font-size: var(--wr-text-sm); }

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

   The .wr-* design system had no :disabled treatment at all, so a disabled .wr-btn rendered
   identically to an enabled one -- a solid primary button that silently ignores clicks, which is
   precisely the "buttons that look clickable but do nothing" this project's standards prohibit.
   Found while QA-ing the Promotion Center, where Publish/Save draft/Copy are correctly disabled
   until there's content to act on but gave the user no visual signal.

   Scoped to the disabled state only, so no enabled button anywhere in the app changes. */
.wr-btn:disabled,
.wr-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(0.35);
}
.wr-btn:disabled:hover,
.wr-btn[disabled]:hover {
    /* Neutralize the hover lift/glow the enabled variants apply -- a disabled control must not
       respond to the pointer at all. */
    transform: none;
    box-shadow: none;
}