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

/* Height is driven by the viewport, not by an aspect ratio. A fixed 16:9 hero 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 hero
   narrower than the gallery beneath it. clamp() keeps the hero full-width at every size and
   simply stops growing past a sensible ceiling. */
.wr-listing-detail-hero {
    width: 100%;
    height: clamp(220px, 44vw, 500px);
    border-radius: var(--wr-radius-lg, 14px);
    overflow: hidden;
    background: var(--wr-surface-2);
}
.wr-listing-detail-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A listing with no photos gets a compact placeholder, not a full-height hero of empty grey --
   at 500px tall the "no image" state pushes the price, specs, and agent card entirely below the
   fold, which is the opposite of what someone opening a photo-less listing needs to see. */
.wr-listing-detail-hero-empty {
    height: 200px;
    display: flex; align-items: center; justify-content: center;
    color: var(--wr-ink-400); font-size: 2.4rem;
}

.wr-listing-detail-thumbs {
    display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 2px;
}
.wr-listing-thumb {
    flex: none; width: 92px; height: 68px; padding: 0;
    border: 2px solid transparent; border-radius: var(--wr-radius-sm, 8px);
    overflow: hidden; background: none; cursor: pointer;
}
.wr-listing-thumb.is-selected { border-color: var(--wr-accent); }
.wr-listing-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

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