/* ===============================================================================
   Blue Belmont - Dashboard View
   Premium real estate intelligence dashboard styling.
   Depends on design tokens from app.css and shared components from components.css.
   =============================================================================== */

/* ── Label composition - shared label typography (mirrors property.css) ── */
.dash-market-stat-label,
.dash-coverage-summary-label,
.dash-coverage-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--faint);
}


/* ===============================================================================
   1. WELCOME BANNER
   Greeting banner with user name, time-based salutation, and current date.
   Dark slate background with a thin gold accent along the bottom edge.
   =============================================================================== */

/* ───────────────────────────────────────────────────────────────────
   Dashboard page header - enterprise SaaS pattern.
   Flat layout, no gradient, no stripe pattern, no decorative accent bar.
   Title + subtitle left, date + actions right, single rule underneath.
   Matches Linear / Stripe / Notion / CoStar dashboard conventions.
   ─────────────────────────────────────────────────────────────────── */

.dash-welcome {
    position: relative;
    background: transparent;
    border: 0;
    border-bottom: 0.0625rem solid var(--border-light);
    border-radius: 0;
    padding: 1.5rem 0 1.25rem;
    margin: 0 0 1.75rem;
    box-shadow: none;
    overflow: visible;
}

/* Remove all decorative overlays from the welcome banner */
.dash-welcome::after,
.dash-welcome::before {
    content: none;
    display: none;
}

.dash-welcome-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.dash-welcome-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.dash-welcome-greeting {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: var(--weight-bold);
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.dash-welcome-sub {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--muted);
    font-weight: var(--weight-regular);
    line-height: 1.45;
}

.dash-welcome-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    /* Allow the date pill + county selector to wrap onto a second row
       when the available width can't fit both at their target size.
       Without this, narrow viewports forced the rigid pair (~400px
       combined) to hang off the right edge of the container. */
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 1;
    min-width: 0;
    min-height: 2.25rem;
}

/* Partner-org logo chip in the dashboard welcome banner. Renders only
   when the user has user.partner_org set (e.g. Coldwell Banker Stiles
   agents). Sized to match the date pill / county select height so the
   three controls share a baseline. */
.dash-partner-org {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0.25rem 0.625rem;
    border: 0.0625rem solid var(--gold, #d4af37);
    border-radius: 0.375rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.02));
    flex-shrink: 0;
}
.dash-partner-org img {
    height: 1.5rem;
    width: auto;
    display: block;
}

/* Lifetime-access pill in the welcome banner. Matches the height of the
   date pill + county selector (.dash-welcome-actions min-height 2.25rem)
   so all three controls share a baseline. */
.dash-lifetime-pill {
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
}

/* Date pill is visually paired with .dash-county-select, so every
   property that determines the box's size/typography is copied from the
   select: same height, padding, font-size, font-weight, border-radius.
   That way the two chips land on the same baseline and match at a glance. */
/* Shared pill - the date span and county select render from this
   one rulebook so their box model, typography, width, and vertical
   text centering are identical. The only thing the select adds on top
   is a chevron background and right-padding to clear it.
   ``width`` is pinned here to override .form-input { width: 100% } in
   app.css, which would otherwise stretch the select across the flex
   row while the date stays at content width. */
.dash-welcome-date,
.dash-welcome-actions .dash-county-select,
.dash-welcome-actions select.form-input-sm {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    height: 2.25rem;
    min-height: 2.25rem;
    width: clamp(12rem, 22vw, 14rem);
    min-width: clamp(12rem, 22vw, 14rem);
    max-width: clamp(12rem, 22vw, 14rem);
    padding: 0 0.75rem;
    border: 0.0625rem solid var(--border);
    border-radius: 0.375rem;
    background: var(--warm-white);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    /* 2.125rem = 2.25rem height - 0.125rem total border → text centers
       vertically inside the content box without relying on flexbox or
       vertical-align, so both elements share one centering mechanism. */
    line-height: 2.125rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    margin: 0;
}

/* Unified dashboard spacing - every top-level section sits in a flex
   column with a single, consistent gap so sections never bunch up or
   drift apart based on their individually-authored margins. All the
   legacy margin-bottoms on children are zeroed so only this gap wins. */
.dash-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.dash-page > * { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (max-width: 48em) {
    .dash-page { gap: var(--space-6); }
}

/* Align the county dropdown to the same height as the date text so
   they share a common baseline in the flex row. The dark-on-dark
   styles previously injected via inline style in dashboard.js are
   replaced by proper light-mode styling here. */
/* Select-only additions: strip the native widget chrome, draw the
   chevron ourselves, and extend right-padding so the text never
   collides with the chevron. Every OTHER property comes from the
   shared rule above. */
.dash-welcome-actions .dash-county-select,
.dash-welcome-actions select.form-input-sm {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231c2331' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
    cursor: pointer;
}
.dash-welcome-actions select.form-input-sm:hover {
    border-color: var(--gold-border, var(--gold)) !important;
}
.dash-welcome-actions select.form-input-sm:focus {
    border-color: var(--gold) !important;
    box-shadow: var(--shadow-gold);
    outline: none;
}

.dash-welcome-date-day {
    display: none;
}

@media (max-width: 48em) {
    .dash-welcome { padding: 1.25rem 0 1rem; margin-bottom: 1.25rem; }
    .dash-welcome-greeting { font-size: 1.375rem; }
    .dash-welcome-inner { gap: 1rem; }
    .dash-welcome-actions { width: 100%; justify-content: flex-start; }
    /* On narrow viewports, drop the rigid clamped width on the date pill
       and the county selector so they can each take half the row (or
       wrap to a second row on ultra-narrow phones). The user asked: the
       buttons must never hang off the edge of the container. */
    .dash-welcome-date,
    .dash-welcome-actions .dash-county-select,
    .dash-welcome-actions select.form-input-sm {
        flex: 1 1 10rem;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }
}
/* Phones: stack the chips vertically - at ~360px there isn't room for
   two readable pills side by side without truncating the date or county
   labels. */
@media (max-width: 26em) {
    .dash-welcome-date,
    .dash-welcome-actions .dash-county-select,
    .dash-welcome-actions select.form-input-sm {
        flex: 1 1 100%;
        width: 100%;
    }
}


/* ===============================================================================
   2. METRIC CARDS ROW
   Horizontal row of 4-6 KPI cards, each with icon, label, large mono value,
   trend arrow + percentage, and a sparkline area beneath.
   =============================================================================== */

.dash-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Combined lead-tier card - looks like a single .dash-metric-card from
   the outside but splits horizontally into two halves: Hot leads on the
   left, Super hot leads on the right (or vice versa per the metricData
   order). Shares one grid slot in .dash-metrics so the rest of the
   strip keeps its existing widths. */
.dash-metric-card.dash-metric-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    /* Drop the outer card padding - each half manages its own padding
       so the divider line touches the card's top and bottom edges. */
    padding: 0;
    overflow: hidden;
}
.dash-metric-half {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    min-width: 0;
    cursor: pointer;
    transition: background var(--anim-fast) var(--easing);
}
.dash-metric-half + .dash-metric-half {
    border-left: 0.0625rem solid var(--border-light);
}
.dash-metric-half:hover {
    background: rgba(255, 255, 255, 0.04);
}
.dash-metric-half:focus-visible {
    outline: 0.125rem solid var(--gold);
    outline-offset: -0.125rem;
}

.dash-metric-card {
    background: var(--surface-card);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Match skeleton height so the swap from SkeletonStats → real cards
       doesn't shift content below. Without this, short cards collapse
       smaller than the skeleton that preceded them. */
    min-height: 7.5rem;
    transition: border-color var(--anim-fast) var(--easing),
                box-shadow var(--anim-fast) var(--easing),
                transform var(--anim-fast) var(--easing);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.dash-metric-card.is-actionable { cursor: pointer; }
.dash-metric-card.is-actionable .dash-metric-arrow {
    color: var(--faint);
    display: inline-flex;
    align-items: center;
    transition: transform var(--anim-fast) var(--easing),
                color var(--anim-fast) var(--easing);
}
.dash-metric-card.is-actionable:hover .dash-metric-arrow {
    color: var(--gold);
}

/* (Card mountain decoration removed - the climber animation runs
   ONLY on the loading skeleton state, not on loaded data cards.) */

.dash-metric-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.1875rem;
    background: var(--gold-gradient);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--anim-normal, 250ms) var(--easing, ease);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Only actionable cards get the clickable hover - static cards stay flat.
   This prevents users from expecting a click that goes nowhere. */
.dash-metric-card.is-actionable:hover {
    border-color: var(--gold-border);
    box-shadow: var(--shadow-card-hover);
}

.dash-metric-card.is-actionable:hover::after {
    transform: scaleY(1);
}

.dash-metric-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.dash-metric-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(181, 148, 42, 0.12) 0%, rgba(181, 148, 42, 0.04) 100%);
    color: var(--gold-dark);
    border: 0.0625rem solid var(--gold-border);
    box-shadow: 0 0.0625rem 0 rgba(255, 255, 255, 0.6) inset;
}
.dash-metric-icon svg { display: block; }
.dash-metric-card:hover .dash-metric-icon {
    background: linear-gradient(135deg, rgba(181, 148, 42, 0.18) 0%, rgba(181, 148, 42, 0.08) 100%);
    color: var(--gold);
}
.dash-action-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--gold-muted);
    color: var(--gold-dark);
    border: 0.0625rem solid var(--gold-border);
    transition: background var(--anim-fast) var(--easing),
                color var(--anim-fast) var(--easing);
}
.property-row:hover .dash-action-icon {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}
.dash-action-arrow {
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    transition: transform var(--anim-fast) var(--easing);
}
.property-row:hover .dash-action-arrow { /* no-op - color change only, no movement */ }

.dash-metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.dash-metric-trend.up {
    color: var(--success);
    background: var(--success-light);
}

.dash-metric-trend.down {
    color: var(--error);
    background: var(--error-light);
}

.dash-metric-trend.neutral {
    color: var(--muted);
    background: var(--bg-subtle);
}

.dash-metric-trend-arrow {
    font-size: var(--text-2xs);
    line-height: 1;
}

.dash-metric-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    line-height: var(--leading-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-metric-value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-metric-sub {
    font-size: var(--text-sm);
    color: var(--muted);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
}

/* Sparkline area at the bottom of the metric card */
.dash-metric-sparkline {
    margin-top: auto;
    padding-top: 0.5rem;
    height: 2rem;
    display: flex;
    align-items: flex-end;
}

.dash-metric-sparkline svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Hero metric - spans the full row with a horizontal layout so the
   primary KPI commands attention instead of competing equally with
   secondary stats. Dark background breaks the uniform card rhythm. */
.dash-metric-card.primary {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
    min-height: auto;
    background: var(--slate);
    border-color: rgba(181, 148, 42, 0.2);
}
.dash-metric-card.primary .dash-metric-top {
    flex-shrink: 0;
}
.dash-metric-card.primary .dash-metric-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(181, 148, 42, 0.15);
    border-color: rgba(181, 148, 42, 0.25);
    color: var(--gold-light);
}
.dash-metric-card.primary .dash-metric-label {
    color: rgba(255, 255, 255, 0.45);
}
.dash-metric-card.primary .dash-metric-value {
    font-size: var(--text-4xl);
    color: var(--gold-light);
}
.dash-metric-card.primary .dash-metric-sub {
    color: rgba(255, 255, 255, 0.3);
}
.dash-metric-card.primary .dash-metric-sparkline {
    margin-top: 0;
    margin-left: auto;
    width: 8rem;
    height: 2.5rem;
    flex-shrink: 0;
}
@media (max-width: 40em) {
    .dash-metric-card.primary {
        flex-direction: column;
        padding: var(--space-5);
    }
    .dash-metric-card.primary .dash-metric-value {
        font-size: var(--text-3xl);
    }
    .dash-metric-card.primary .dash-metric-sparkline {
        margin-left: 0;
        width: 100%;
    }
}


/* ===============================================================================
   3. MARKET SNAPSHOT
   Card showing market health for the selected county: median assessed value,
   total sales, average days on market, price trend.
   =============================================================================== */

.dash-market-snapshot {
    background: var(--warm-white);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.dash-market-snapshot:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.dash-market-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 0.0625rem solid var(--border-light);
    gap: var(--space-3);
}

.dash-market-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--slate);
}

.dash-market-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--gold-muted);
    color: var(--gold-dark);
    border: 0.0625rem solid var(--gold-border);
    vertical-align: middle;
    white-space: nowrap;
}

.dash-market-body {
    padding: 1.25rem;
}

.dash-market-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.25rem;
}

.dash-market-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    border: 0.0625rem solid var(--border-light);
}

.dash-market-stat-label {
    letter-spacing: 0.08em;
}

.dash-market-stat-value {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: var(--weight-medium);
    color: var(--slate);
    line-height: var(--leading-tight);
}

.dash-market-stat-change {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.dash-market-stat-change.up { color: var(--success); }
.dash-market-stat-change.down { color: var(--error); }
.dash-market-stat-change.flat { color: var(--muted); }

/* Trend chart area within the market card */
.dash-market-chart {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--border-light);
    height: 8rem;
    position: relative;
}

.dash-market-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dash-market-footer {
    padding: 0.625rem 1.25rem;
    border-top: 0.0625rem solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dash-market-source {
    font-size: var(--text-xs);
    color: var(--faint);
    font-style: italic;
}

.dash-market-updated {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--faint);
}


/* ===============================================================================
   4. PORTFOLIO SUMMARY
   Aggregate stats for saved property lists: total properties, total value,
   average value, zone distribution mini chart.
   =============================================================================== */

.dash-portfolio {
    background: var(--warm-white);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.dash-portfolio:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.dash-portfolio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 0.0625rem solid var(--border-light);
    gap: var(--space-3);
}

.dash-portfolio-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--slate);
}

.dash-portfolio-body {
    padding: 1.25rem;
}

.dash-portfolio-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dash-portfolio-stat {
    text-align: center;
    padding: 0.625rem 0.5rem;
}

.dash-portfolio-stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--slate);
    line-height: var(--leading-tight);
}

.dash-portfolio-stat-label {
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* Separator between stat items (vertical line) */
.dash-portfolio-stat + .dash-portfolio-stat {
    border-left: 0.0625rem solid var(--border-light);
}

/* Zone distribution mini-chart */
.dash-portfolio-zones {
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--border-light);
}

.dash-portfolio-zones-title {
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--faint);
    margin-bottom: 0.625rem;
}

.dash-portfolio-zone-bar {
    display: flex;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--border-light);
    margin-bottom: 0.5rem;
}

.dash-portfolio-zone-segment {
    height: 100%;
    transition: width var(--anim-slow) var(--easing);
    min-width: 0.125rem;
}

.dash-portfolio-zone-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.dash-portfolio-zone-item {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: var(--text-xs);
    color: var(--muted);
}

.dash-portfolio-zone-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.dash-portfolio-zone-count {
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    color: var(--text);
}

/* Empty state for portfolio */
.dash-portfolio-empty {
    text-align: center;
    padding: 2rem 1rem;
}

.dash-portfolio-empty-icon {
    font-size: var(--text-2xl);
    color: var(--border);
    margin-bottom: 0.75rem;
}

.dash-portfolio-empty-text {
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.dash-portfolio-empty-hint {
    font-size: 0.75rem;
    color: var(--faint);
}


/* ===============================================================================
   5. ACTIVITY FEED
   Vertical timeline of recent user actions: property views, searches,
   list additions, exports. Each item has icon, description, timestamp.
   =============================================================================== */

.dash-activity {
    background: var(--warm-white);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.dash-activity:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.dash-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 0.0625rem solid var(--border-light);
    gap: 0.75rem;
}

.dash-activity-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--slate);
}

.dash-activity-filter {
    font-size: var(--text-xs);
    color: var(--gold);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: color var(--transition);
}

.dash-activity-filter:hover {
    color: var(--gold-dark);
}

.dash-activity-body {
    padding: 0;
    max-height: 24rem;
    overflow-y: auto;
}

.dash-activity-body::-webkit-scrollbar { width: 0.25rem; }
.dash-activity-body::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-xs); }
.dash-activity-body::-webkit-scrollbar-track { background: transparent; }

.dash-activity-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.dash-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8125rem 1.25rem;
    border-bottom: 0.0625rem solid var(--border-light);
    transition: background var(--transition);
    position: relative;
}

.dash-activity-item:last-child {
    border-bottom: none;
}

.dash-activity-item:hover {
    background: var(--bg-hover);
}

/* Timeline connector line */
.dash-activity-item::before {
    content: '';
    position: absolute;
    left: 2.125rem;
    top: 2.5rem;
    bottom: -0.1875rem;
    width: 0.0625rem;
    background: var(--border-light);
}

.dash-activity-item:last-child::before {
    display: none;
}

.dash-activity-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    position: relative;
    z-index: 1;
}

.dash-activity-icon.search {
    background: var(--info-light);
    color: var(--info);
}

.dash-activity-icon.view {
    background: var(--success-light);
    color: var(--success);
}

.dash-activity-icon.list {
    background: var(--gold-muted);
    color: var(--gold);
    border: 0.0625rem solid var(--gold-border);
}

.dash-activity-icon.export {
    background: var(--warning-light);
    color: var(--warning);
}

.dash-activity-icon.map {
    background: var(--bg-subtle);
    color: var(--muted);
    border: 0.0625rem solid var(--border-light);
}

.dash-activity-content {
    flex: 1;
    min-width: 0;
}

.dash-activity-text {
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.4;
}

.dash-activity-text strong {
    font-weight: var(--weight-semibold);
    color: var(--slate);
}

.dash-activity-text .highlight {
    color: var(--gold-dark);
    font-weight: var(--weight-semibold);
}

.dash-activity-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.1875rem;
}

.dash-activity-time {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--faint);
}

.dash-activity-tag {
    display: inline-flex;
    align-items: center;
    height: 1rem;
    min-height: 1rem;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--muted);
    vertical-align: middle;
    white-space: nowrap;
}

/* Empty activity state */
.dash-activity-empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--faint);
    font-size: var(--text-sm);
}

/* Day separator within the feed */
.dash-activity-day {
    padding: 0.5rem 1.25rem;
    background: var(--bg-subtle);
    border-bottom: 0.0625rem solid var(--border-light);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--faint);
}


/* ===============================================================================
   6. SAVED SEARCHES CARD
   List of saved searches showing name, last-run date, result count,
   and a "Run Again" action button.
   =============================================================================== */

.dash-saved-searches {
    background: var(--warm-white);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.dash-saved-searches:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.dash-saved-searches-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 0.0625rem solid var(--border-light);
    gap: 0.75rem;
}

.dash-saved-searches-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--slate);
}

.dash-saved-searches-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    background: var(--bg-subtle);
    color: var(--muted);
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-pill);
}

.dash-saved-searches-body {
    padding: 0;
}

.dash-saved-search-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 0.0625rem solid var(--border-light);
    transition: background var(--transition);
}

.dash-saved-search-item:last-child {
    border-bottom: none;
}

.dash-saved-search-item:hover {
    background: var(--bg-hover);
}

.dash-saved-search-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--info-light);
    color: var(--info);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.dash-saved-search-info {
    flex: 1;
    min-width: 0;
}

.dash-saved-search-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-saved-search-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.dash-saved-search-date {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--faint);
}

.dash-saved-search-results {
    font-size: 0.625rem;
    font-weight: var(--weight-semibold);
    color: var(--muted);
}

.dash-saved-search-results strong {
    font-family: var(--font-mono);
    color: var(--text);
}

.dash-saved-search-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-sm);
    border: 0.0625rem solid var(--border);
    background: var(--warm-white);
    color: var(--gold-dark);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-saved-search-action:hover {
    background: var(--gold-muted);
    border-color: var(--gold-border);
    color: var(--gold);
}

/* Empty state */
.dash-saved-searches-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--faint);
    font-size: var(--text-sm);
}


/* ===============================================================================
   7. QUICK ACTIONS GRID
   2x3 grid of actionable cards. Each has icon, title, short description.
   Hover lifts the card and reveals a gold border.
   =============================================================================== */

.dash-quick-actions {
    margin-bottom: var(--space-6);
}

.dash-quick-actions-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--slate);
    margin-bottom: 0.875rem;
}

.dash-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.dash-quick-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.125rem 1.25rem;
    background: var(--warm-white);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.dash-quick-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.125rem;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--anim-normal) var(--easing);
}

.dash-quick-action:hover {
    border-color: var(--gold-border);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-0.0625rem);
}

.dash-quick-action:hover::before {
    transform: scaleX(1);
}

.dash-quick-action-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--bg-subtle);
    color: var(--muted);
    border: 0.0625rem solid var(--border-light);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.dash-quick-action:hover .dash-quick-action-icon {
    background: var(--gold-muted);
    color: var(--gold);
    border-color: var(--gold-border);
}

.dash-quick-action-text {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.dash-quick-action-title {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: 1.3;
}

.dash-quick-action-desc {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.45;
}

/* bp-md: quick-actions drop from the grid-3 layout to 2-column.
   Previously used a rogue 55em breakpoint; aligned to 48em to match
   the rest of the dashboard's major layout shift. */
@media (max-width: 48em) {
    .dash-quick-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40em) {
    .dash-quick-actions-grid {
        grid-template-columns: 1fr;
    }
}


/* ===============================================================================
   8. COUNTY SELECTOR DROPDOWN
   Styled dropdown for switching the active county. Shows county name,
   loaded/loading status, and parcel count.
   =============================================================================== */

.dash-county-select {
    position: relative;
    margin-bottom: var(--space-6);
}

.dash-county-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--warm-white);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
    font-family: var(--font-body);
}

.dash-county-select-trigger:hover {
    border-color: var(--gold-border);
    box-shadow: 0 0 0 0.1875rem var(--gold-muted);
}

.dash-county-select-trigger:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
}

.dash-county-select.open .dash-county-select-trigger {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
}

.dash-county-select-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm);
    background: var(--gold-muted);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    border: 0.0625rem solid var(--gold-border);
}

.dash-county-select-label {
    flex: 1;
    min-width: 0;
}

/* Counties the user's plan doesn't cover are kept in the dropdown so a
   single click still routes through the paywall flow, but they're
   visually de-emphasized (italic + muted) so the user can tell at a
   glance which counties they already own vs which ones unlock with an
   upgrade. Native <option> styling honors color/font-style on every
   modern desktop browser; mobile rendering varies but the 🔒 suffix
   on the option text guarantees the state is still legible. */
.dash-county-select option[data-locked="1"] {
    color: var(--muted, #8b8680);
    font-style: italic;
}

.dash-county-select-name {
    font-size: 0.875rem;
    font-weight: var(--weight-bold);
    color: var(--slate);
    display: block;
}

.dash-county-select-status {
    font-size: var(--text-xs);
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.dash-county-select-chevron {
    font-size: 0.625rem;
    color: var(--faint);
    flex-shrink: 0;
    transition: transform var(--transition);
}

.dash-county-select.open .dash-county-select-chevron {
    transform: rotate(180deg);
}

/* Status indicator dot */
.dash-county-status-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-county-status-dot.loaded {
    background: var(--success);
    box-shadow: 0 0 0 0.125rem var(--success-light);
}

.dash-county-status-dot.partial {
    background: var(--warning);
    box-shadow: 0 0 0 0.125rem var(--warning-light);
}

.dash-county-status-dot.unloaded {
    background: var(--border);
}

/* Dropdown list */
.dash-county-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 20rem;
    overflow-y: auto;
    background: var(--warm-white);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.dash-county-select-menu::-webkit-scrollbar { width: 0.25rem; }
.dash-county-select-menu::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-xs); }
.dash-county-select-menu::-webkit-scrollbar-track { background: transparent; }

.dash-county-select.open .dash-county-select-menu {
    display: block;
}

.dash-county-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background var(--transition);
    border-bottom: 0.0625rem solid var(--border-light);
    font-family: var(--font-body);
}

.dash-county-option:last-child {
    border-bottom: none;
}

.dash-county-option:hover {
    background: var(--bg-hover);
}

.dash-county-option.selected {
    background: var(--gold-muted);
}

.dash-county-option-name {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.dash-county-option-parcels {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--faint);
    flex-shrink: 0;
}


/* ===============================================================================
   9. DATA COVERAGE INDICATOR
   Shows data completeness for the active county: parcels loaded, layers
   available, last-updated timestamp.
   =============================================================================== */

.dash-coverage {
    background: var(--warm-white);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.25rem;
    margin-bottom: var(--space-6);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.dash-coverage:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.dash-coverage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
    gap: 0.5rem;
}

.dash-coverage-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--slate);
}

.dash-coverage-updated {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--faint);
}

.dash-coverage-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dash-coverage-item {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.dash-coverage-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dash-coverage-item-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
}

.dash-coverage-item-value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text);
}

/* Progress bar for coverage */
.dash-coverage-bar {
    height: 0.375rem;
    background: var(--border-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.dash-coverage-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width 0.5s var(--easing);
    background: var(--gold);
}

.dash-coverage-bar-fill.full {
    background: var(--success);
}

.dash-coverage-bar-fill.partial {
    background: var(--warning);
}

.dash-coverage-bar-fill.low {
    background: var(--error);
}

/* Freshness badges */
.dash-coverage-freshness {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1rem;
    min-height: 1rem;
    padding: 0 0.4375rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    margin-top: 0.375rem;
}

.dash-coverage-freshness.fresh {
    background: var(--success-light);
    color: var(--success);
}

.dash-coverage-freshness.stale {
    background: var(--warning-light);
    color: var(--warning);
}

.dash-coverage-freshness.outdated {
    background: var(--error-light);
    color: var(--error);
}

/* Summary row at the bottom */
.dash-coverage-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 0.0625rem solid var(--border-light);
    gap: 0.75rem;
}

.dash-coverage-summary-stat {
    text-align: center;
    flex: 1;
}

.dash-coverage-summary-value {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: var(--weight-medium);
    color: var(--slate);
    display: block;
}

.dash-coverage-summary-label {
    /* Typography inherited from grouped label rule above. */
}

.dash-coverage-summary-stat + .dash-coverage-summary-stat {
    border-left: 0.0625rem solid var(--border-light);
}


/* ===============================================================================
   10. TREND CHARTS
   Card wrapper for embedded SVG charts with title, subtitle, legend,
   and optional time-range selector.
   =============================================================================== */

.dash-chart-card {
    background: var(--warm-white);
    border: 0.0625rem solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.dash-chart-card:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.dash-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 0.0625rem solid var(--border-light);
    gap: 0.75rem;
}

.dash-chart-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.dash-chart-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--slate);
}

.dash-chart-subtitle {
    font-size: var(--text-xs);
    color: var(--faint);
    line-height: 1.4;
}

/* Time-range tabs within chart header */
.dash-chart-ranges {
    display: flex;
    gap: 0;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.dash-chart-range {
    padding: 0.25rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--weight-semibold);
    color: var(--muted);
    background: var(--warm-white);
    border: none;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
    border-left: 0.0625rem solid var(--border-light);
}

.dash-chart-range:first-child {
    border-left: none;
}

.dash-chart-range:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.dash-chart-range.active {
    background: var(--slate);
    color: var(--gold-light);
}

.dash-chart-body {
    padding: 1.25rem;
    position: relative;
}

/* Chart canvas area */
.dash-chart-canvas {
    width: 100%;
    height: 12rem;
    position: relative;
}

.dash-chart-canvas svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Axis labels */
.dash-chart-axis-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    fill: var(--faint);
}

.dash-chart-grid-line {
    stroke: var(--border-light);
    stroke-width: 1;
    stroke-dasharray: 4, 4;
}

/* Chart legend */
.dash-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    border-top: 0.0625rem solid var(--border-light);
}

.dash-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    color: var(--muted);
    cursor: default;
}

.dash-chart-legend-line {
    width: 1rem;
    height: 0.125rem;
    border-radius: 0.0625rem;
    flex-shrink: 0;
}

.dash-chart-legend-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-chart-legend-value {
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    color: var(--text);
    margin-left: 0.125rem;
}

/* Tooltip on chart hover */
.dash-chart-tooltip {
    position: absolute;
    background: var(--slate);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
}

.dash-chart-tooltip.visible {
    opacity: 1;
}

.dash-chart-tooltip-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.125rem;
}

.dash-chart-tooltip-value {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    color: var(--gold-light);
}

/* No-data placeholder */
.dash-chart-nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12rem;
    color: var(--faint);
    font-size: var(--text-sm);
    font-style: italic;
}


/* ===============================================================================
   LAYOUT UTILITIES
   Grid compositions for assembling the dashboard sections.
   =============================================================================== */

.dash-layout {
    display: grid;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.dash-layout-2 {
    grid-template-columns: 1fr 1fr;
}

.dash-layout-sidebar {
    grid-template-columns: 1fr 20rem;
}

.dash-layout-sidebar-wide {
    grid-template-columns: 1fr 24rem;
}

.dash-layout-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 80em) {
    .dash-layout-sidebar,
    .dash-layout-sidebar-wide {
        grid-template-columns: 1fr;
    }

    .dash-layout-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 48em) {
    .dash-layout-2,
    .dash-layout-3 {
        grid-template-columns: 1fr;
    }

    .dash-welcome-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .dash-welcome-date {
        text-align: left;
    }

    .dash-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-portfolio-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-market-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* bp-sm: metrics and portfolio stats go single-column on phones.
   Quick actions already hit 1fr from their own 40em block above. */
@media (max-width: 40em) {
    .dash-metrics {
        grid-template-columns: 1fr;
    }

    .dash-portfolio-stats {
        grid-template-columns: 1fr;
    }

    .dash-portfolio-stat + .dash-portfolio-stat {
        border-left: none;
        border-top: 0.0625rem solid var(--border-light);
        padding-top: 0.625rem;
    }
}

/* The 30em (bp-xs) block for dash-metrics and dash-portfolio-stats was
   moved up to the 40em (bp-sm) tier so single-column kicks in earlier
   on phone-width viewports.  No rules remain at 30em for the dashboard. */


/* ===============================================================================
   SECTION HEADERS
   Reusable header pattern for dashboard sections with title and optional action.
   =============================================================================== */

.dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
    gap: 0.75rem;
}

.dash-section-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--weight-bold);
    color: var(--slate);
    letter-spacing: -0.01em;
}

.dash-section-action {
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    color: var(--gold);
    cursor: pointer;
    transition: color var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.dash-section-action:hover {
    color: var(--gold-dark);
}


/* ===============================================================================
   LOADING & SKELETON STATES
   Animated placeholders while data loads.
   =============================================================================== */

/* Skeleton shimmer uses the shared shimmer keyframe from app.css
   instead of a dashboard-specific duplicate. */
.dash-skeleton {
    background: linear-gradient(
        90deg,
        var(--border-light) 25%,
        var(--bg-subtle) 37%,
        var(--border-light) 63%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
    border-radius: var(--radius-sm);
}

.dash-skeleton-line {
    height: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-sm);
}

.dash-skeleton-line.short { width: 40%; }
.dash-skeleton-line.medium { width: 65%; }
.dash-skeleton-line.long { width: 90%; }

.dash-skeleton-block {
    height: 4rem;
    border-radius: var(--radius-md);
}

.dash-skeleton-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}


/* ===============================================================================
   TRANSITIONS & POLISH
   Entrance animations and micro-interactions.
   =============================================================================== */

/* Dashboard entrance uses the shared fadeInUp from app.css with
   standardized 50ms stagger increments (matching the property page). */
.dash-animate-in {
    animation: fadeInUp var(--anim-normal) var(--easing) both;
}
.dash-animate-in:nth-child(1) { animation-delay: 0s; }
.dash-animate-in:nth-child(2) { animation-delay: 50ms; }
.dash-animate-in:nth-child(3) { animation-delay: 100ms; }
.dash-animate-in:nth-child(4) { animation-delay: 150ms; }
.dash-animate-in:nth-child(5) { animation-delay: 200ms; }
.dash-animate-in:nth-child(6) { animation-delay: 250ms; }

.dash-live-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0.1875rem rgba(46, 125, 50, 0.15);
    flex-shrink: 0;
    /* Static green dot with subtle glow ring - no pulsing animation.
       The static ring communicates "live" without distracting motion. */
}


/* ===============================================================================
   PRINT STYLES
   =============================================================================== */

@media print {
    .dash-welcome {
        background: #fff;
        border: 0.0625rem solid #ccc;
        color: #000;
    }

    .dash-welcome-greeting {
        color: #000;
    }

    .dash-welcome-sub,
    .dash-welcome-date {
        color: #555;
    }

    .dash-welcome::after,
    .dash-welcome::before {
        display: none;
    }

    .dash-metric-card,
    .dash-market-snapshot,
    .dash-portfolio,
    .dash-activity,
    .dash-saved-searches,
    .dash-quick-action,
    .dash-chart-card,
    .dash-coverage {
        box-shadow: none;
        break-inside: avoid;
    }

    .dash-metric-card.primary {
        background: #fff;
        border: 0.0625rem solid #ccc;
    }

    .dash-metric-card.primary .dash-metric-value {
        color: #000;
    }

    .dash-metric-card.primary .dash-metric-label {
        color: #555;
    }

    .dash-quick-action:hover,
    .dash-metric-card:hover {
        transform: none;
        box-shadow: none;
    }
}