/* ==========================================================================
   WeReferAgents — Application Design System v3
   --------------------------------------------------------------------------
   The single visual language for every AUTHENTICATED page. Loaded LAST in
   App.razor so it wins on equal specificity against app-shell.css, which stays
   in place as the base layer (it still owns hundreds of page-specific rules
   that are simply re-skinned from here rather than rewritten).

   Scope discipline:
     - Shell chrome (.wr-topbar / .wr-sidebar / .wra-dashboard-*) is only ever
       rendered inside DashboardLayoutV2, so those rules are unscoped.
     - Everything else is scoped under .wr-dashboard-page (the root class every
       authenticated page already renders) so no rule here can leak onto the
       public marketing pages, which keep marketing.css / landing.css untouched.

   Reference: wwwroot/design-reference/Wereferagents-dashboard-reference.png
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* --- Brand ------------------------------------------------------------ */
    --wr3-blue: #1d5ff5; /* primary action blue */
    --wr3-blue-600: #1550db;
    --wr3-blue-700: #1244b4;
    --wr3-blue-soft: #e8f0ff;
    --wr3-blue-ink: #12408f;

    --wr3-navy: #0c1a3a; /* sidebar / deep chrome */
    --wr3-navy-2: #0a1631;
    --wr3-navy-line: rgba(255, 255, 255, 0.07);

    --wr3-purple: #6d38dd; /* accent, AI + hero gradient end */
    --wr3-purple-600: #5b2cc4;
    --wr3-purple-soft: #f1ecfe;
    --wr3-purple-ink: #4a2394;

    /* --- Status ----------------------------------------------------------- */
    --wr3-success: #10a86a;
    --wr3-success-soft: #e6f7ef;
    --wr3-success-ink: #0a6f46;
    --wr3-warning: #d18700;
    --wr3-warning-soft: #fdf3e0;
    --wr3-warning-ink: #8a5a00;
    --wr3-danger: #d63c3c;
    --wr3-danger-soft: #fdecec;
    --wr3-danger-ink: #99241f;

    /* --- Neutrals --------------------------------------------------------- */
    --wr3-bg: #f5f7fb;
    --wr3-surface: #ffffff;
    --wr3-surface-2: #f7f9fc;
    --wr3-border: #e4e8f0;
    --wr3-border-strong: #d3d9e5;
    --wr3-ink: #0f172a;
    --wr3-ink-2: #475569;
    --wr3-ink-3: #7c8798;

    /* --- Radius / elevation ---------------------------------------------- */
    --wr3-r-sm: 8px;
    --wr3-r-md: 12px;
    --wr3-r-lg: 16px;
    --wr3-r-xl: 20px;
    --wr3-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --wr3-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --wr3-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.07);
    --wr3-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10);

    /* --- Layout ----------------------------------------------------------- */
    --wr3-topbar-h: 74px;
    --wr3-sidebar-w: 244px;
    --wr3-sidebar-w-collapsed: 76px;
    --wr3-gutter: 24px;

    /* --- Gradients -------------------------------------------------------- */
    --wr3-hero-gradient: linear-gradient(103deg, #0f52ea 0%, #2b47e2 42%, #6d38dd 100%);
    --wr3-blue-gradient: linear-gradient(135deg, var(--wr3-blue) 0%, var(--wr3-blue-700) 100%);
    --wr3-purple-gradient: linear-gradient(135deg, #7c4bec 0%, var(--wr3-purple-600) 100%);

    /* Re-point the v1 tokens the rest of app-shell.css already consumes, so every existing rule
       inherits the v3 palette without being rewritten. This is the single biggest lever for
       "one design language across all authenticated pages": ~200 legacy rules change colour here. */
    --wr-bg: var(--wr3-bg);
    --wr-surface: var(--wr3-surface);
    --wr-surface-2: var(--wr3-surface-2);
    --wr-border: var(--wr3-border);
    --wr-border-strong: var(--wr3-border-strong);
    --wr-ink-900: var(--wr3-ink);
    --wr-ink-600: var(--wr3-ink-2);
    --wr-ink-400: var(--wr3-ink-3);
    --wr-accent: var(--wr3-blue);
    --wr-accent-2: #5b8cff;
    --wr-accent-soft: var(--wr3-blue-soft);
    --wr-accent-ink: var(--wr3-blue-ink);
    --wr-ai: var(--wr3-purple);
    --wr-ai-2: #9b74f2;
    --wr-ai-soft: rgba(109, 56, 221, 0.08);
    --wr-success: var(--wr3-success);
    --wr-warning: var(--wr3-warning);
    --wr-danger: var(--wr3-danger);
    --wr-radius-sm: var(--wr3-r-sm);
    --wr-radius-md: var(--wr3-r-md);
    --wr-radius-lg: var(--wr3-r-lg);
    --wr-shadow-sm: var(--wr3-shadow-sm);
    --wr-shadow-md: var(--wr3-shadow-md);
    --wr-shadow-lg: var(--wr3-shadow-lg);
    --wr-primary: var(--wr3-blue);
    --wr-primary-dark: var(--wr3-blue-700);
    --wr-primary-gradient: var(--wr3-blue-gradient);
    --wr-ai-gradient: linear-gradient(135deg, var(--wr3-blue) 0%, var(--wr3-purple) 100%);
}

/* ==========================================================================
   2. Shell geometry — full-width header, sidebar beneath it
   ========================================================================== */

.wr-shell-v3 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--wr3-bg);
}

.wr-shell-v3 .wr-shell-body {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.wr-shell-v3 .wra-dashboard-main {
    flex: 1;
    min-width: 0; /* lets long tables scroll inside instead of widening the page */
    display: flex;
    flex-direction: column;
}

.wr-shell-v3 .wra-dashboard-content {
    flex: 1;
    min-width: 0;
}

/* Drawer scrim — only ever visible while the mobile sidebar is open. */
.wr-shell-scrim {
    display: none;
}

/* ==========================================================================
   3. Top bar
   ========================================================================== */

.wr-topbar {
    height: var(--wr3-topbar-h);
    padding: 0 20px;
    gap: 18px;
    background: var(--wr3-surface);
    border-bottom: 1px solid var(--wr3-border);
    backdrop-filter: none;
    position: sticky;
    top: 0;
    z-index: 160;
    flex: none;
}

/* Sized to its own content with a small trailing gutter rather than pinned to the sidebar width --
   the "Real Estate Referral Network" lockup is wider than the 244px rail, and a fixed width clipped
   it behind the search field. */
.wr-topbar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex: none;
    margin-right: 8px;
    min-width: 0;
    color: var(--wr3-blue);
}

.wr-topbar-brand-mark {
    width: 40px;
    height: 40px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wr3-blue);
}

    .wr-topbar-brand-mark svg {
        width: 100%;
        height: 100%;
    }

.wr-topbar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.wr-topbar-brand-name {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.05;
    color: var(--wr3-ink);
    white-space: nowrap;
}

    .wr-topbar-brand-name span {
        color: var(--wr3-blue);
    }

.wr-topbar-brand-tag {
    font-size: 0.585rem;
    font-weight: 700;
    letter-spacing: 0.115em;
    text-transform: uppercase;
    color: var(--wr3-ink-3);
    white-space: nowrap;
}

.wr-topbar-search {
    flex: 1 1 420px;
    /* A flex item's default min-width:auto is its content's min-width -- the search input's own
       intrinsic minimum, which is what kept the header ~70px too wide at 1024 and pushed the whole
       page sideways. Explicit 0 lets it actually shrink. */
    min-width: 0;
    max-width: 460px;
    background: var(--wr3-surface-2);
    border: 1px solid var(--wr3-border);
    border-radius: 10px;
    padding: 0 14px;
    height: 42px;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .wr-topbar-search:focus-within {
        background: var(--wr3-surface);
        border-color: var(--wr3-blue);
        box-shadow: 0 0 0 3px rgba(29, 95, 245, 0.14);
    }

    .wr-topbar-search input {
        font-size: 0.855rem;
        min-width: 0;
    }

.wr-topbar-search-kbd {
    background: var(--wr3-surface);
    border-color: var(--wr3-border-strong);
    font-size: 0.66rem;
    font-weight: 600;
    padding: 2px 7px;
}

.wr-topbar-actions {
    gap: 9px;
}

.wr-topbar-quick-create {
    background: var(--wr3-blue);
    border-radius: 10px;
    padding: 0 17px;
    height: 42px;
    font-size: 0.845rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(29, 95, 245, 0.35);
}

    .wr-topbar-quick-create:hover {
        background: var(--wr3-blue-600);
        opacity: 1;
    }

.wr-topbar-plan-link {
    text-decoration: none;
    display: inline-flex;
}

.wr-topbar-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--wr3-surface-2);
    border-color: var(--wr3-border);
    color: var(--wr3-ink-2);
    font-size: 0.95rem;
}

    .wr-topbar-icon-btn:hover {
        background: var(--wr3-blue-soft);
        border-color: var(--wr3-blue);
        color: var(--wr3-blue-ink);
    }

.wr-topbar-badge {
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    font-size: 0.64rem;
    font-weight: 800;
    border: 2px solid var(--wr3-surface);
    padding: 0 4px;
}

.wr-topbar-badge-alert {
    background: #ef4444;
}

.wr-topbar-user-btn {
    gap: 10px;
    border: 1px solid var(--wr3-border);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    height: 44px;
    background: var(--wr3-surface);
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .wr-topbar-user-btn:hover {
        border-color: var(--wr3-border-strong);
        background: var(--wr3-surface-2);
    }

    .wr-topbar-user-btn img {
        width: 34px;
        height: 34px;
    }

.wr-topbar-user-initials {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--wr3-blue-gradient);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .wr-topbar-user-btn > .fa-chevron-down {
        font-size: 0.62rem;
        color: var(--wr3-ink-3);
    }

.wr-topbar-user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    min-width: 0;
}

.wr-topbar-user-name {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--wr3-ink);
    max-width: 150px;
}

.wr-topbar-user-plan {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--wr3-ink-3);
    white-space: nowrap;
}

.wr-topbar-dropdown-panel {
    border-radius: var(--wr3-r-md);
    box-shadow: var(--wr3-shadow-lg);
    border-color: var(--wr3-border);
}

/* ---------- Notification panel ---------- */
.wr-notify-panel {
    min-width: 340px;
    max-width: 380px;
    padding: 0;
    overflow: hidden;
}

.wr-notify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wr3-border);
    font-size: 0.86rem;
}

    .wr-notify-head strong {
        color: var(--wr3-ink);
    }

    .wr-notify-head .wr-btn-text {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--wr3-blue);
        padding: 0;
    }

.wr-notify-loading {
    padding: 22px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--wr3-ink-3);
}

.wr-notify-list {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 380px;
    overflow-y: auto;
}

.wr-notify-item {
    display: flex;
    gap: 11px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: var(--wr3-r-sm);
    font-family: inherit;
}

    .wr-notify-item:hover {
        background: var(--wr3-surface-2);
    }

    .wr-notify-item.is-unread {
        background: rgba(29, 95, 245, 0.045);
    }

.wr-notify-ico {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--wr3-blue-soft);
    color: var(--wr3-blue-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .wr-notify-ico svg,
    .wr-notify-ico i {
        width: 16px;
        height: 16px;
    }

.wr-notify-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wr-notify-title {
    font-size: 0.815rem;
    font-weight: 700;
    color: var(--wr3-ink);
}

.wr-notify-text {
    font-size: 0.765rem;
    color: var(--wr3-ink-2);
    line-height: 1.4;
}

.wr-notify-time {
    font-size: 0.69rem;
    color: var(--wr3-ink-3);
}

/* ==========================================================================
   4. Sidebar — compact dark navy rail
   ========================================================================== */

/* The rail itself never scrolls -- only its <nav> does (see .wr-sidebar-nav below). That keeps the
   profile/upgrade footer permanently visible at the bottom without it overlaying the last few nav
   rows, which is what a single scrolling column plus a sticky footer produced. */
.wr-sidebar {
    width: var(--wr3-sidebar-w);
    background: var(--wr3-navy);
    border-right: none;
    position: sticky;
    top: var(--wr3-topbar-h);
    height: calc(100vh - var(--wr3-topbar-h));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
}

.wr-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

    .wr-sidebar-nav::-webkit-scrollbar {
        width: 6px;
    }

    .wr-sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.16);
        border-radius: 999px;
    }

/* The sidebar collapse control now lives in the top bar (see TopBar.razor) -- styled to match the
   other icon buttons there. */
.wr-topbar-collapse-btn {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--wr3-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

    .wr-topbar-collapse-btn:hover {
        background: var(--wr3-surface-2);
        color: var(--wr3-ink);
    }

.wr-sidebar-nav {
    padding: 6px 12px 8px;
}

.wr-sidebar-nav ul {
    margin: 0 0 2px;
}

/* Section labels: small-caps, muted — the reference's "REFERRALS / OPPORTUNITIES / AI TOOLS /
   LISTINGS / ACTIVITY / ACCOUNT". Spacing is deliberately tight: the agent tree is 23 rows plus
   six headings, and at a laptop height the difference between 18px and 13px of leading here is
   whether "Billing & Plans" is reachable without scrolling. */
.wr-sidebar-section-label,
.wr-sidebar-v2 p.wr-sidebar-section-label {
    color: rgba(255, 255, 255, 0.36);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.095em;
    text-transform: uppercase;
    padding: 0 10px;
    margin: 11px 0 4px;
}

.wr-sidebar-section {
    margin-bottom: 0;
}

.wr-sidebar-primary {
    padding-bottom: 0;
    margin-bottom: 0 !important;
    border-bottom: none;
}

/* Rows */
/* 5px vertical padding is deliberate on desktop: the agent tree is 21 rows plus six headings plus a
   fixed footer, and this is what lets the last row ("Billing & Plans" -- the conversion path for a
   Free agent, whose footer also carries an Upgrade button) sit above the fold on a laptop rather
   than below a scroll. The drawer breakpoint restores comfortable touch targets. */
.wr-sidebar-link {
    gap: 11px;
    padding: 5px 10px;
    border-radius: var(--wr3-r-sm);
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.825rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 0;
    line-height: 1.4;
    transition: background 0.14s ease, color 0.14s ease;
}

    .wr-sidebar-link i,
    .wr-sidebar-link svg {
        width: 17px;
        height: 17px;
        font-size: 0.95rem;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: rgba(255, 255, 255, 0.58);
        flex: none;
        transition: color 0.14s ease;
    }

    .wr-sidebar-link:hover {
        background: rgba(255, 255, 255, 0.07);
        color: #fff;
        transform: none;
    }

        .wr-sidebar-link:hover i,
        .wr-sidebar-link:hover svg {
            color: #fff;
        }

    /* Active row: a solid blue pill, exactly as in the reference — no left accent bar,
       no icon chip, no gradient wash. */
    .wr-sidebar-link.active {
        background: var(--wr3-blue);
        color: #fff;
        font-weight: 700;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    }

        .wr-sidebar-link.active::before {
            display: none;
        }

        .wr-sidebar-link.active i,
        .wr-sidebar-link.active svg {
            background: none;
            box-shadow: none;
            color: #fff;
        }

/* "Find Agents" -- the single most important destination in the product -- keeps a real, permanent
   emphasis (brighter label, gold star, faint raised surface) but no longer the filled light-blue
   block it used to have: on a navy rail that read as a second active state competing with the
   actual current page. */
.wr-sidebar-link-featured:not(.active) {
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
    font-weight: 700;
}

    .wr-sidebar-link-featured:not(.active):hover {
        background: rgba(255, 255, 255, 0.11);
        color: #fff;
    }

.wr-sidebar-link .wr-sidebar-star {
    color: #f6b93b;
    font-size: 0.62rem;
}

.wr-sidebar-link.active .wr-sidebar-star {
    color: rgba(255, 255, 255, 0.85);
}

/* Badges + PRO pills */
.wr-sidebar-badge {
    background: var(--wr3-blue);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 0.16rem 0.42rem;
    min-width: 1.25rem;
}

.wr-sidebar-link.active .wr-sidebar-badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--wr3-blue-ink);
}

.wr-sidebar-pro-badge {
    color: #f0b429;
    background: rgba(240, 180, 41, 0.14);
    border: 1px solid rgba(240, 180, 41, 0.35);
    font-size: 0.56rem;
    letter-spacing: 0.05em;
    padding: 1px 6px;
}

.wr-sidebar-link.active .wr-sidebar-pro-badge {
    color: #ffe08a;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
}

/* The AI Tools section keeps a whisper of violet so it reads as its own family, as in the
   reference. Selectors below are two-class on purpose: SidebarNavV2.razor.css is a Blazor-scoped
   sheet, so its rules carry an extra [b-xxxxx] attribute selector and outrank a single class here
   no matter the load order -- .wr-sidebar-v2 puts this file back on equal footing, where being
   loaded last wins. Every override in this block and the footer block below needs that. */
.wr-sidebar-v2 .wr-sidebar-ai-group {
    background: rgba(124, 75, 236, 0.10);
    padding: 1px 4px 3px;
    margin: 2px -4px;
    border-radius: 10px;
}

    .wr-sidebar-v2 .wr-sidebar-ai-group > .wr-sidebar-section-label {
        color: rgba(184, 160, 255, 0.85);
    }

.wr-sidebar-tour-btn {
    color: rgba(255, 255, 255, 0.76);
}

/* Collapsible admin/vendor groups keep working; just re-skinned for the dark rail. */
.wr-sidebar-group > summary {
    color: rgba(255, 255, 255, 0.36);
}

    .wr-sidebar-group > summary::after {
        color: rgba(255, 255, 255, 0.36);
    }

.wr-sidebar-v2 .wr-sidebar-group > summary svg,
.wr-sidebar-v2 .wr-sidebar-group > summary i {
    color: rgba(255, 255, 255, 0.45);
}

/* ---------- Footer profile card ---------- */
.wr-sidebar-footer {
    flex: none;
    padding: 10px 12px 12px;
    gap: 8px;
    border-top: 1px solid var(--wr3-navy-line);
    background: var(--wr3-navy-2);
}

/* Compact by design: the footer is fixed chrome that every nav row has to fit above, and a Free
   agent's footer carries an extra "Upgrade Plan" button on top of the profile card. */
.wr-sidebar-v2 .wr-sidebar-profile-card {
    gap: 7px;
}

.wr-sidebar-v2 .wr-sidebar-profile-progress-head {
    font-size: 0.64rem;
    margin-bottom: 0.22rem;
}

.wr-sidebar-v2 .wr-sidebar-profile-progress-track {
    height: 5px;
}

.wr-sidebar-v2 .wr-sidebar-profile-avatar {
    width: 34px;
    height: 34px;
}

.wra-sidebar-collapsed .wr-topbar-collapse-btn i {
    transform: rotate(180deg);
}

/* Two-class selectors for the same Blazor-scoped-CSS reason documented on the AI Tools block
   above. Without them SidebarNavV2.razor.css's own --wr-ink-900 / --wr-ink-400 colours win, and
   since v3 re-points those tokens to near-black the agent's name renders invisibly on the navy. */
.wr-sidebar-v2 .wr-sidebar-profile-avatar {
    background: var(--wr3-blue-gradient);
    border-radius: 10px;
}

.wr-sidebar-v2 .wr-sidebar-profile-name {
    color: #fff;
}

.wr-sidebar-v2 .wr-sidebar-profile-plan {
    color: rgba(255, 255, 255, 0.5);
}

.wr-sidebar-v2 .wr-sidebar-profile-progress-head {
    color: rgba(255, 255, 255, 0.55);
}

.wr-sidebar-v2 .wr-sidebar-profile-progress-track {
    background: rgba(255, 255, 255, 0.12);
}

.wr-sidebar-v2 .wr-sidebar-profile-progress-fill {
    background: linear-gradient(90deg, var(--wr3-blue) 0%, #7c4bec 100%);
}

.wr-sidebar-footer-upgrade {
    background: var(--wr3-purple-gradient);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.8rem;
    box-shadow: 0 2px 10px rgba(109, 56, 221, 0.4);
}

    .wr-sidebar-footer-upgrade:hover {
        opacity: 1;
        filter: brightness(1.08);
    }

/* Collapsed rail */
.wra-sidebar-collapsed .wr-sidebar {
    width: var(--wr3-sidebar-w-collapsed);
}

.wra-sidebar-collapsed .wr-sidebar-section-label {
    display: none;
}

.wra-sidebar-collapsed .wr-sidebar-link {
    justify-content: center;
    padding: 10px;
}

.wra-sidebar-collapsed .wr-sidebar-header {
    justify-content: center;
}

/* ==========================================================================
   5. Page canvas + shared page header
   ========================================================================== */

.wr-dashboard-page {
    padding: var(--wr3-gutter) var(--wr3-gutter) 40px;
    background: var(--wr3-bg);
    color: var(--wr3-ink);
    font-family: var(--wr-font-sans);
}

.wr-breadcrumbs {
    padding: 16px var(--wr3-gutter) 0;
    font-size: 0.78rem;
}

.wr-page-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.wr-page-header-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.wr-page-header-icon {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--wr3-r-md);
    background: var(--wr3-blue-soft);
    color: var(--wr3-blue-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.wr-page-header-copy {
    min-width: 0;
    flex: 1 1 260px;
}

    .wr-page-header-copy h1 {
        margin: 0;
        font-size: 1.65rem;
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.2;
        color: var(--wr3-ink);
    }

    .wr-page-header-copy p {
        margin: 4px 0 0;
        font-size: 0.875rem;
        color: var(--wr3-ink-2);
        line-height: 1.5;
    }

.wr-page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.wr-page-header-extra {
    min-width: 0;
}

/* ==========================================================================
   6. Cards, panels, sections
   ========================================================================== */

.wr-dashboard-page .wr-card,
.wr-dashboard-page .wr-panel,
.wr-panel {
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border);
    border-radius: var(--wr3-r-lg);
    box-shadow: var(--wr3-shadow-sm);
}

.wr-dashboard-page .wr-card {
    padding: 18px;
}

.wr-panel-head {
    padding: 15px 18px;
    border-bottom: 1px solid var(--wr3-border);
    gap: 8px;
}

    .wr-panel-head h3 {
        font-size: 1.02rem;
        font-weight: 800;
        letter-spacing: -0.018em;
        color: var(--wr3-ink);
    }

.wr-panel-sub {
    font-size: 0.755rem;
    color: var(--wr3-ink-3);
}

.wr-panel-link {
    font-size: 0.775rem;
    font-weight: 700;
    color: var(--wr3-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .wr-panel-link:hover {
        color: var(--wr3-blue-700);
    }

    .wr-panel-link svg,
    .wr-panel-link i {
        width: 13px;
        height: 13px;
        font-size: 0.66rem;
    }

.wr-dashboard-page .wr-section {
    margin-bottom: var(--wr3-gutter);
}

.wr-section-head {
    margin-bottom: 12px;
}

    .wr-section-head h2 {
        font-size: 1.08rem;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.wr-dashboard-page .wr-btn,
.wr-topbar .wr-btn,
.wr-btn {
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.845rem;
    padding: 10px 17px;
    letter-spacing: -0.005em;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.wr-btn-primary {
    background: var(--wr3-blue);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(29, 95, 245, 0.3);
}

    .wr-btn-primary:hover {
        background: var(--wr3-blue-600);
        color: #fff;
        box-shadow: 0 4px 12px rgba(29, 95, 245, 0.28);
    }

.wr-btn-outline {
    background: var(--wr3-surface);
    border-color: var(--wr3-border-strong);
    color: var(--wr3-ink);
}

    .wr-btn-outline:hover {
        background: var(--wr3-blue-soft);
        border-color: var(--wr3-blue);
        color: var(--wr3-blue-ink);
    }

.wr-btn-sm {
    padding: 7px 12px;
    font-size: 0.775rem;
    border-radius: var(--wr3-r-sm);
}

.wr-btn-lg {
    padding: 12px 22px;
    font-size: 0.925rem;
}

.wr-btn-ai {
    background: var(--wr3-purple-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(109, 56, 221, 0.32);
}

    .wr-btn-ai:hover {
        color: #fff;
        filter: brightness(1.07);
    }

@media (prefers-reduced-motion: reduce) {
    .wr-btn,
    .wr-btn:active {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   8. Badges, chips, status pills
   ========================================================================== */

.wr-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.665rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.5;
}

.wr-badge-blue { background: var(--wr3-blue-soft); color: var(--wr3-blue-ink); }
.wr-badge-purple { background: var(--wr3-purple-soft); color: var(--wr3-purple-ink); }
.wr-badge-green { background: var(--wr3-success-soft); color: var(--wr3-success-ink); }
.wr-badge-amber { background: var(--wr3-warning-soft); color: var(--wr3-warning-ink); }
.wr-badge-red { background: var(--wr3-danger-soft); color: var(--wr3-danger-ink); }
.wr-badge-neutral { background: var(--wr3-surface-2); color: var(--wr3-ink-2); }

.wr-plan-badge {
    font-size: 0.735rem;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 9px;
}

    .wr-plan-badge.free {
        background: var(--wr3-blue-soft);
        color: var(--wr3-blue-ink);
        border: 1px solid transparent;
    }

    .wr-plan-badge.professional {
        background: var(--wr3-blue);
        color: #fff;
    }

    .wr-plan-badge.elite {
        background: var(--wr3-purple-soft);
        color: var(--wr3-purple-ink);
    }

.wr-dashboard-page .wr-chip,
.wr-dashboard-page .wr-filter-chip {
    border-radius: 999px;
    font-size: 0.755rem;
    font-weight: 600;
}

.wr-dashboard-page .wra-status-pill,
.wr-dashboard-page .wr-status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wr3-surface-2);
    color: var(--wr3-ink-2);
    border: 1px solid var(--wr3-border);
}

/* ==========================================================================
   9. KPI cards (shared — dashboard, connections, billing, analytics…)
   ========================================================================== */

.wr-dashboard-page .wr-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 14px;
}

.wr-dashboard-page .wr-kpi-card {
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border);
    border-radius: var(--wr3-r-lg);
    box-shadow: var(--wr3-shadow-sm);
    padding: 15px 16px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .wr-dashboard-page .wr-kpi-card:hover {
        border-color: var(--wr3-border-strong);
        box-shadow: var(--wr3-shadow-md);
        transform: translateY(-1px);
    }

.wr-dashboard-page .wr-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--wr3-blue-soft);
    color: var(--wr3-blue-ink);
    font-size: 0.95rem;
}

.wr-dashboard-page .wr-kpi-label {
    font-size: 0.665rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--wr3-ink-3);
}

.wr-dashboard-page .wr-kpi-value {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--wr3-ink);
    font-family: var(--wr-font-sans);
}

@media (prefers-reduced-motion: reduce) {
    .wr-dashboard-page .wr-kpi-card {
        transition: none;
    }

        .wr-dashboard-page .wr-kpi-card:hover {
            transform: none;
        }
}

/* ==========================================================================
   9b. Agent cards
   --------------------------------------------------------------------------
   Two card components render an agent (AgentCard on Find Agents, FeaturedAgentCard on
   Connections / Agent Profile / Brokerage Dashboard) and they looked like different products.
   FeaturedAgentCard drew its avatar as a 140px full-bleed cover banner, which is fine for a real
   photograph but turns the generated initials avatar (a circular glyph from
   /agent-avatar/{id}) into a giant cropped colour block. Both now use the same circular avatar
   and centred layout, so an agent looks the same wherever they appear.
   ========================================================================== */

.wr-dashboard-page .wr-featured-card {
    padding: 18px 16px;
    text-align: center;
    border-radius: var(--wr3-r-lg);
    border-color: var(--wr3-border);
    box-shadow: var(--wr3-shadow-sm);
}

.wr-dashboard-page .wr-featured-photo {
    width: 76px;
    height: 76px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 2px solid var(--wr3-border);
    background-size: cover;
    background-position: center;
    background-color: var(--wr3-surface-2);
}

.wr-dashboard-page .wr-featured-body {
    padding: 0;
}

    .wr-dashboard-page .wr-featured-body h4 {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--wr3-ink);
        letter-spacing: -0.015em;
    }

.wr-dashboard-page .wr-featured-brokerage {
    justify-content: center;
    font-size: 0.775rem;
    color: var(--wr3-ink-3);
}

.wr-dashboard-page .wr-featured-card .wr-chip-row {
    justify-content: center;
}

/* A page that wraps the card in its own .wr-card (Connections does, to attach the match reason
   underneath) would otherwise show a border inside a border. */
.wr-dashboard-page .wr-card > .wr-featured-card {
    border: none;
    box-shadow: none;
    padding: 0 0 4px;
}

.wr-dashboard-page .wr-network-match-reason {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--wr3-border);
    font-size: 0.755rem;
    line-height: 1.4;
    color: var(--wr3-ink-3);
    text-align: left;
}

    .wr-dashboard-page .wr-network-match-reason i {
        margin-top: 2px;
        color: var(--wr3-purple);
    }

.wr-dashboard-page .wr-agent-card-avatar {
    border-color: var(--wr3-border);
}

/* Three actions share one row on an agent card ("View Profile / Connect / Create Referral"); at a
   3-up grid width the last label wrapped onto two lines and made that one button taller than its
   neighbours. */
.wr-dashboard-page .wr-agent-card-actions .wr-btn {
    white-space: nowrap;
    padding: 9px 11px;
    font-size: 0.79rem;
}

/* ==========================================================================
   10. Tables
   ========================================================================== */

.wr-dashboard-page .wr-dt-wrap,
.wr-dashboard-page .wr-dt {
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border);
    border-radius: var(--wr3-r-lg);
    box-shadow: var(--wr3-shadow-sm);
    overflow: hidden;
}

.wr-dashboard-page .wr-dt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.845rem;
}

.wr-dashboard-page .wr-dt-table th {
    background: var(--wr3-surface-2);
    color: var(--wr3-ink-3);
    font-size: 0.665rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--wr3-border);
    white-space: nowrap;
}

.wr-dashboard-page .wr-dt-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--wr3-border);
    color: var(--wr3-ink-2);
    vertical-align: middle;
}

.wr-dashboard-page .wr-dt-table tbody tr:last-child td {
    border-bottom: none;
}

.wr-dashboard-page .wr-dt-table tbody tr:hover td {
    background: var(--wr3-surface-2);
}

/* Any wide table scrolls inside its own card rather than widening the page. */
.wr-dashboard-page .wr-dt-wrap,
.wr-dashboard-page .wr-table-scroll {
    overflow-x: auto;
}

/* ==========================================================================
   11. Empty states
   ========================================================================== */

.wr-dashboard-page .wra-empty-state {
    background: var(--wr3-surface-2);
    border: 1px dashed var(--wr3-border-strong);
    border-radius: var(--wr3-r-md);
    padding: 30px 22px;
    text-align: center;
    color: var(--wr3-ink-2);
}

.wr-dashboard-page .wra-empty-state-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border);
    color: var(--wr3-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.wr-dashboard-page .wra-empty-state h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--wr3-ink);
    margin: 0 0 5px;
}

.wr-dashboard-page .wra-empty-state p {
    font-size: 0.845rem;
    color: var(--wr3-ink-2);
    margin: 0 auto;
    max-width: 46ch;
    line-height: 1.55;
}

/* EmptyState.razor's action renders with marketing.css's .wra-btn-gold (a dark-theme gold pill).
   Re-skinned here — inside an authenticated page only — to the standard primary button, rather
   than editing the shared component, which public pages also render. */
.wr-dashboard-page .wra-empty-state .wra-btn,
.wr-dashboard-page .wra-empty-state .wra-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 17px;
    border-radius: 10px;
    background: var(--wr3-blue);
    color: #fff;
    border: none;
    font-size: 0.845rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(29, 95, 245, 0.3);
}

    .wr-dashboard-page .wra-empty-state .wra-btn:hover {
        background: var(--wr3-blue-600);
        color: #fff;
    }

/* ==========================================================================
   12. Forms, search bars, filter panels
   ========================================================================== */

.wr-dashboard-page input[type="text"],
.wr-dashboard-page input[type="search"],
.wr-dashboard-page input[type="email"],
.wr-dashboard-page input[type="tel"],
.wr-dashboard-page input[type="url"],
.wr-dashboard-page input[type="number"],
.wr-dashboard-page input[type="date"],
.wr-dashboard-page input[type="password"],
.wr-dashboard-page select,
.wr-dashboard-page textarea {
    font-family: inherit;
    font-size: 0.865rem;
    color: var(--wr3-ink);
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* One control height across the board -- a <select> renders shorter than a text <input> at the
   same padding, which left filter rows (Buyer Needs, Find Agents, the admin consoles) with fields
   of two different heights sitting on the same line. */
.wr-dashboard-page input[type="text"],
.wr-dashboard-page input[type="search"],
.wr-dashboard-page input[type="email"],
.wr-dashboard-page input[type="tel"],
.wr-dashboard-page input[type="url"],
.wr-dashboard-page input[type="number"],
.wr-dashboard-page input[type="date"],
.wr-dashboard-page input[type="password"],
.wr-dashboard-page select {
    min-height: 42px;
    box-sizing: border-box;
}

    .wr-dashboard-page input:focus,
    .wr-dashboard-page select:focus,
    .wr-dashboard-page textarea:focus {
        outline: none;
        border-color: var(--wr3-blue);
        box-shadow: 0 0 0 3px rgba(29, 95, 245, 0.14);
    }

    .wr-dashboard-page input::placeholder,
    .wr-dashboard-page textarea::placeholder {
        color: var(--wr3-ink-3);
    }

.wr-dashboard-page label {
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--wr3-ink-2);
}

.wr-dashboard-page .wr-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border-strong);
    border-radius: 10px;
    padding: 0 13px;
    height: 42px;
    color: var(--wr3-ink-3);
}

    .wr-dashboard-page .wr-search-box:focus-within {
        border-color: var(--wr3-blue);
        box-shadow: 0 0 0 3px rgba(29, 95, 245, 0.14);
    }

    .wr-dashboard-page .wr-search-box input {
        border: none;
        background: none;
        padding: 0;
        flex: 1;
        min-width: 0;
    }

        .wr-dashboard-page .wr-search-box input:focus {
            box-shadow: none;
        }

.wr-dashboard-page .wr-filter-rail,
.wr-dashboard-page .wr-filter-panel {
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border);
    border-radius: var(--wr3-r-lg);
    box-shadow: var(--wr3-shadow-sm);
}

.wr-dashboard-page .wr-filter-rail-group-label {
    font-size: 0.665rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wr3-ink-3);
}

/* ---------- Bootstrap-flavoured forms (the scaffolded Identity / Account Settings pages) ----------
   Those pages were generated with Bootstrap's own .btn / .form-control / .form-floating markup and
   never migrated to .wr-* classes. Rather than rewrite ~15 scaffolded Razor pages, the Bootstrap
   classes are re-skinned here -- inside .wr-dashboard-page only, so Bootstrap keeps behaving
   normally everywhere else it is used. */
.wr-dashboard-page .form-control,
.wr-dashboard-page .form-select {
    font-family: inherit;
    font-size: 0.865rem;
    color: var(--wr3-ink);
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border-strong);
    border-radius: 10px;
    min-height: 42px;
    box-shadow: none;
}

    .wr-dashboard-page .form-control:focus,
    .wr-dashboard-page .form-select:focus {
        border-color: var(--wr3-blue);
        box-shadow: 0 0 0 3px rgba(29, 95, 245, 0.14);
    }

.wr-dashboard-page .form-floating > label {
    color: var(--wr3-ink-3);
    font-size: 0.865rem;
    font-weight: 500;
}

.wr-dashboard-page .btn {
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.865rem;
    padding: 10px 18px;
    border: 1px solid transparent;
    box-shadow: none;
}

.wr-dashboard-page .btn-primary,
.wr-dashboard-page .btn-lg.btn-primary {
    background: var(--wr3-blue);
    border-color: transparent;
    color: #fff;
}

    .wr-dashboard-page .btn-primary:hover,
    .wr-dashboard-page .btn-primary:focus {
        background: var(--wr3-blue-600);
        border-color: transparent;
        color: #fff;
    }

.wr-dashboard-page .btn-outline-primary,
.wr-dashboard-page .btn-secondary,
.wr-dashboard-page .btn-outline-secondary {
    background: var(--wr3-surface);
    border-color: var(--wr3-border-strong);
    color: var(--wr3-ink);
}

    .wr-dashboard-page .btn-outline-primary:hover,
    .wr-dashboard-page .btn-secondary:hover,
    .wr-dashboard-page .btn-outline-secondary:hover {
        background: var(--wr3-blue-soft);
        border-color: var(--wr3-blue);
        color: var(--wr3-blue-ink);
    }

.wr-dashboard-page .btn-danger {
    background: var(--wr3-danger);
    border-color: transparent;
    color: #fff;
}

/* marketing.css's .wra-form-control is width:100%, which turned the AI Seller Opportunities filter
   row (a flex row of three controls) into three stacked full-width fields. */
.wr-dashboard-page .ai-opp-filters > * {
    flex: 1 1 180px;
    width: auto;
    max-width: 280px;
    min-width: 160px;
}

.wr-dashboard-page .wra-form-control {
    font-family: inherit;
    font-size: 0.865rem;
    color: var(--wr3-ink);
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border-strong);
    border-radius: 10px;
    min-height: 42px;
    padding: 10px 12px;
    box-sizing: border-box;
}

    .wr-dashboard-page .wra-form-control:focus {
        outline: none;
        border-color: var(--wr3-blue);
        box-shadow: 0 0 0 3px rgba(29, 95, 245, 0.14);
    }

/* Tabs */
.wr-dashboard-page .wr-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--wr3-border);
}

.wr-dashboard-page .wr-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 14px;
    font-size: 0.855rem;
    font-weight: 700;
    color: var(--wr3-ink-3);
    cursor: pointer;
    font-family: inherit;
}

    .wr-dashboard-page .wr-tab:hover {
        color: var(--wr3-ink);
    }

    .wr-dashboard-page .wr-tab.active {
        color: var(--wr3-blue);
        border-bottom-color: var(--wr3-blue);
    }

/* ==========================================================================
   13. Modals
   ========================================================================== */

.wr-dashboard-page .wr-modal,
.wr-modal-card {
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border);
    border-radius: var(--wr3-r-xl);
    box-shadow: var(--wr3-shadow-lg);
}

/* ==========================================================================
   14. Dashboard — hero
   ========================================================================== */

.wr-dash3 {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wr-dash3-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 18px;
    align-items: stretch;
}

.wr-hero3 {
    position: relative;
    overflow: hidden;
    border-radius: var(--wr3-r-lg);
    background: var(--wr3-hero-gradient);
    color: #fff;
    padding: 34px 36px;
    display: grid;
    /* The headline has to sit on one line down to ~1440 (it wraps awkwardly as "Grow your real
       estate / business" otherwise), so the copy column gets the larger share. */
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.86fr);
    gap: 28px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(24, 60, 180, 0.22);
    min-height: 268px;
}

/* Decorative network graphic — nodes + links, drawn in CSS/SVG. Deliberately
   graphical: no photography, no people. */
.wr-hero3-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
}

    .wr-hero3-canvas svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.wr-hero3-copy,
.wr-hero3-features {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.wr-hero3-copy h1 {
    margin: 0 0 12px;
    font-size: clamp(1.62rem, 1.62vw + 0.55rem, 2.3rem);
    line-height: 1.13;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #fff;
}

.wr-hero3-copy p {
    margin: 0 0 24px;
    font-size: 1.005rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    max-width: 34ch;
}

.wr-hero3-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.wr-hero3-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 0.905rem;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.wr-hero3-btn-solid {
    background: #fff;
    color: var(--wr3-blue-ink);
}

    .wr-hero3-btn-solid:hover {
        background: #f2f6ff;
        color: var(--wr3-blue-ink);
        transform: translateY(-1px);
    }

.wr-hero3-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

    .wr-hero3-btn-ghost:hover {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        transform: translateY(-1px);
    }

.wr-hero3-features {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.wr-hero3-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.wr-hero3-feature-ico {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

    .wr-hero3-feature-ico svg,
    .wr-hero3-feature-ico i {
        width: 19px;
        height: 19px;
        font-size: 0.95rem;
    }

.wr-hero3-feature strong {
    display: block;
    font-size: 0.925rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

.wr-hero3-feature span {
    display: block;
    font-size: 0.815rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
    .wr-hero3-btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   15. Dashboard — KPI strip
   ========================================================================== */

.wr-kpi3-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.wr-kpi3 {
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border);
    border-radius: var(--wr3-r-lg);
    box-shadow: var(--wr3-shadow-sm);
    padding: 15px 16px 14px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wr-kpi3-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
}

.wr-kpi3-ico {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .wr-kpi3-ico svg,
    .wr-kpi3-ico i {
        width: 18px;
        height: 18px;
        font-size: 0.92rem;
    }

.wr-kpi3-ico-green { background: var(--wr3-success-soft); color: var(--wr3-success-ink); }
.wr-kpi3-ico-blue { background: var(--wr3-blue-soft); color: var(--wr3-blue-ink); }
.wr-kpi3-ico-purple { background: var(--wr3-purple-soft); color: var(--wr3-purple-ink); }
.wr-kpi3-ico-amber { background: var(--wr3-warning-soft); color: var(--wr3-warning-ink); }
.wr-kpi3-ico-red { background: var(--wr3-danger-soft); color: var(--wr3-danger-ink); }

/* Tight tracking + a wrap-friendly line-height: "REFERRALS RECEIVED" is the longest label and has
   to sit on one line at the ~190px tile width a five-up row gives it on a 1440 screen, otherwise
   that one tile grows taller than its four neighbours. */
.wr-kpi3-label {
    font-size: 0.635rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--wr3-ink-3);
    line-height: 1.25;
    min-width: 0;
}

.wr-kpi3-value {
    font-size: 1.68rem;
    font-weight: 800;
    letter-spacing: -0.032em;
    line-height: 1.1;
    color: var(--wr3-ink);
    margin-bottom: 5px;
}

    .wr-kpi3-value.is-empty {
        color: var(--wr3-ink-3);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

.wr-kpi3-sub {
    font-size: 0.735rem;
    color: var(--wr3-ink-3);
    line-height: 1.35;
    margin-bottom: 11px;
}

.wr-kpi3-link {
    margin-top: auto;
    font-size: 0.755rem;
    font-weight: 700;
    color: var(--wr3-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .wr-kpi3-link:hover {
        color: var(--wr3-blue-700);
    }

    .wr-kpi3-link svg,
    .wr-kpi3-link i {
        width: 12px;
        height: 12px;
        font-size: 0.65rem;
    }

.wr-kpi3-skeleton {
    height: 15px;
    width: 60%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--wr3-surface-2) 25%, #eef1f6 50%, var(--wr3-surface-2) 75%);
    background-size: 200% 100%;
    animation: wr3Shimmer 1.3s linear infinite;
    margin-bottom: 5px;
}

@keyframes wr3Shimmer {
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wr-kpi3-skeleton { animation: none; }
}

/* ==========================================================================
   16. Dashboard — Profile Strength
   ========================================================================== */

.wr-strength3 {
    background: var(--wr3-surface);
    border: 1px solid var(--wr3-border);
    border-radius: var(--wr3-r-lg);
    box-shadow: var(--wr3-shadow-sm);
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

    .wr-strength3 > h3 {
        align-self: flex-start;
        margin: 0 0 14px;
        font-size: 1.02rem;
        font-weight: 800;
        letter-spacing: -0.018em;
        color: var(--wr3-ink);
    }

.wr-strength3-ring {
    position: relative;
    width: 156px;
    height: 156px;
    margin-bottom: 16px;
}

    .wr-strength3-ring svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

.wr-strength3-track {
    fill: none;
    stroke: #eceff5;
    stroke-width: 11;
}

.wr-strength3-fill {
    fill: none;
    stroke: url(#wrStrengthGrad);
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.7s var(--wr-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
    .wr-strength3-fill { transition: none; }
}

.wr-strength3-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--wr3-ink);
}

.wr-strength3-note {
    font-size: 0.815rem;
    color: var(--wr3-ink-2);
    line-height: 1.5;
    margin: 0 0 12px;
    max-width: 30ch;
}

.wr-strength3-missing {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

    .wr-strength3-missing li {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        font-size: 0.775rem;
        color: var(--wr3-ink-2);
        line-height: 1.4;
    }

    .wr-strength3-missing i,
    .wr-strength3-missing svg {
        width: 13px;
        height: 13px;
        flex: none;
        margin-top: 2px;
        color: var(--wr3-warning);
        font-size: 0.7rem;
    }

.wr-strength3-cta {
    margin-top: auto;
    font-size: 0.845rem;
    font-weight: 700;
    color: var(--wr3-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .wr-strength3-cta:hover {
        color: var(--wr3-blue-700);
    }

/* ==========================================================================
   17. Dashboard — main three-column band
   ========================================================================== */

.wr-dash3-mid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr) minmax(0, 0.9fr);
    gap: 18px;
    align-items: start;
}

.wr-dash3-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}

.wr-dash3-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* ---------- Recent Activity ---------- */
.wr-activity3-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.wr-activity3-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 10px;
    border-radius: var(--wr3-r-sm);
    text-decoration: none;
    color: inherit;
    transition: background 0.14s ease;
}

    .wr-activity3-item:hover {
        background: var(--wr3-surface-2);
    }

.wr-activity3-ico {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--wr3-blue-soft);
    color: var(--wr3-blue-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.wr-activity3-body {
    min-width: 0;
    flex: 1;
}

.wr-activity3-text {
    display: block;
    font-size: 0.83rem;
    line-height: 1.4;
    color: var(--wr3-ink-2);
}

    .wr-activity3-text strong {
        color: var(--wr3-ink);
        font-weight: 700;
    }

.wr-activity3-time {
    display: block;
    font-size: 0.715rem;
    color: var(--wr3-ink-3);
    margin-top: 3px;
}

.wr-activity3-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wr3-blue);
    flex: none;
    margin-top: 11px;
}

.wr-activity3-foot {
    padding: 4px 16px 14px;
}

/* ---------- Top Referral Opportunities ---------- */
.wr-opp3-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wr-opp3-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid var(--wr3-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.14s ease;
}

    .wr-opp3-list li:last-child .wr-opp3-item {
        border-bottom: none;
    }

    .wr-opp3-item:hover {
        background: var(--wr3-surface-2);
    }

.wr-opp3-thumb {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--wr3-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.wr-opp3-thumb-seller { background: var(--wr3-purple-soft); color: var(--wr3-purple); }
.wr-opp3-thumb-buyer { background: var(--wr3-success-soft); color: var(--wr3-success); }
.wr-opp3-thumb-commercial { background: var(--wr3-blue-soft); color: var(--wr3-blue); }
.wr-opp3-thumb-relocation { background: var(--wr3-warning-soft); color: var(--wr3-warning); }

.wr-opp3-body {
    flex: 1;
    min-width: 0;
}

.wr-opp3-title {
    display: block;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--wr3-ink);
    letter-spacing: -0.012em;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr-opp3-loc {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.775rem;
    color: var(--wr3-ink-3);
    margin-bottom: 5px;
}

    .wr-opp3-loc i,
    .wr-opp3-loc svg {
        width: 12px;
        height: 12px;
        font-size: 0.7rem;
    }

.wr-opp3-price {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--wr3-ink);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.wr-opp3-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wr-opp3-fee {
    font-size: 0.755rem;
    color: var(--wr3-ink-2);
    font-weight: 600;
}

.wr-opp3-match {
    margin-left: auto;
}

.wr-opp3-chev {
    color: var(--wr3-ink-3);
    flex: none;
    font-size: 0.8rem;
}

/* ---------- What's New ---------- */
.wr-new3-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.wr-new3-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: var(--wr3-r-sm);
}

.wr-new3-ico {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--wr3-purple-soft);
    color: var(--wr3-purple-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .wr-new3-ico svg,
    .wr-new3-ico i {
        width: 16px;
        height: 16px;
        font-size: 0.8rem;
    }

.wr-new3-text {
    flex: 1;
    min-width: 0;
    font-size: 0.815rem;
    line-height: 1.4;
    color: var(--wr3-ink-2);
}

    .wr-new3-text strong {
        color: var(--wr3-ink);
        font-weight: 700;
    }

.wr-new3-link {
    flex: none;
    font-size: 0.745rem;
    font-weight: 700;
    color: var(--wr3-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .wr-new3-link:hover {
        color: var(--wr3-blue-700);
    }

/* ---------- Upgrade card ---------- */
.wr-upgrade3 {
    position: relative;
    overflow: hidden;
    border-radius: var(--wr3-r-lg);
    border: 1px solid #e0d8fb;
    background: linear-gradient(135deg, #f4f0ff 0%, #ece5ff 100%);
    padding: 18px 19px;
}

.wr-upgrade3-body {
    position: relative;
    z-index: 1;
    max-width: 68%;
}

.wr-upgrade3 h3 {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wr3-purple-ink);
}

.wr-upgrade3 > .wr-upgrade3-body > p {
    margin: 0 0 12px;
    font-size: 0.775rem;
    line-height: 1.45;
    color: #6b5a9a;
}

.wr-upgrade3-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .wr-upgrade3-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.795rem;
        color: #4a3f6b;
        line-height: 1.35;
    }

    .wr-upgrade3-list i,
    .wr-upgrade3-list svg {
        width: 13px;
        height: 13px;
        flex: none;
        margin-top: 2px;
        color: var(--wr3-purple);
        font-size: 0.72rem;
    }

.wr-upgrade3-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 10px;
    background: var(--wr3-purple-gradient);
    color: #fff;
    font-size: 0.855rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(109, 56, 221, 0.32);
    transition: filter 0.15s ease;
}

    .wr-upgrade3-cta:hover {
        color: #fff;
        filter: brightness(1.08);
    }

.wr-upgrade3-art {
    position: absolute;
    right: -6px;
    bottom: 6px;
    width: 128px;
    height: 128px;
    opacity: 0.9;
    pointer-events: none;
}

    .wr-upgrade3-art svg {
        width: 100%;
        height: 100%;
    }

/* ---------- Find Agents by State ---------- */

/* The "Find Agents by State" horizontal button strip and its cartogram toggle lived here. Both
   were replaced by the interactive US map (Components/Shared/UsAgentMap.razor + its own scoped
   stylesheet), so their rules were removed rather than left as dead CSS. */

@media (prefers-reduced-motion: reduce) {
    .wr-state3-tile:hover { transform: none; }
}

/* ---------- Network at a Glance ---------- */
.wr-glance3 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 16px 12px 18px;
}

.wr-glance3-cell {
    text-align: center;
    padding: 4px 6px;
    min-width: 0;
}

.wr-glance3-ico {
    width: 30px;
    height: 30px;
    margin: 0 auto 7px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wr3-blue-soft);
    color: var(--wr3-blue-ink);
}

    .wr-glance3-ico svg,
    .wr-glance3-ico i {
        width: 15px;
        height: 15px;
        font-size: 0.78rem;
    }

.wr-glance3-value {
    display: block;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--wr3-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.wr-glance3-label {
    display: block;
    font-size: 0.685rem;
    color: var(--wr3-ink-3);
    margin-top: 2px;
    line-height: 1.3;
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

/* 1600px and down — the three-column mid band gets tight first. */
@media (max-width: 1600px) {
    .wr-dash3-top {
        grid-template-columns: minmax(0, 1fr) 270px;
    }
}

@media (max-width: 1440px) {
    .wr-hero3 {
        padding: 30px 30px;
        min-height: 252px;
    }

    .wr-hero3-copy h1 {
        font-size: 2.05rem;
    }

    .wr-dash3-bottom {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

@media (max-width: 1366px) {
    :root {
        --wr3-gutter: 20px;
        --wr3-sidebar-w: 228px;
    }

    .wr-dash3-mid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

        /* What's New + Upgrade drop under the two wider cards rather than squeezing to a sliver. */
        .wr-dash3-mid > .wr-dash3-rail {
            grid-column: 1 / -1;
            flex-direction: row;
        }

            .wr-dash3-mid > .wr-dash3-rail > * {
                flex: 1 1 0;
                min-width: 0;
            }

    .wr-hero3-copy h1 {
        font-size: 1.92rem;
    }

    .wr-kpi3-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 1200px) {
    /* Header real estate runs out before the sidebar collapses: drop the brand strapline and the
       search box's minimum so the fixed-width action buttons always fit. */
    .wr-topbar-brand-tag {
        display: none;
    }

    .wr-topbar-search {
        flex: 1 1 200px;
        max-width: 320px;
    }

    .wr-topbar-user-name {
        max-width: 110px;
    }

    .wr-dash3-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .wr-hero3 {
        min-height: 0;
    }

    .wr-kpi3-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wr-dash3-bottom {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tablet — sidebar becomes an off-canvas drawer (breakpoint matches app-shell.css). */
@media (max-width: 992px) {
    .wr-sidebar {
        position: fixed;
        left: calc(-1 * var(--wr3-sidebar-w) - 20px);
        top: var(--wr3-topbar-h);
        bottom: 0;
        height: auto;
        z-index: 170;
        box-shadow: var(--wr3-shadow-lg);
        transition: left 0.25s ease;
    }

    .wra-sidebar-mobile-open .wr-sidebar {
        left: 0;
    }

    .wra-sidebar-mobile-open .wr-shell-scrim {
        display: block;
        position: fixed;
        inset: var(--wr3-topbar-h) 0 0 0;
        background: rgba(10, 22, 49, 0.45);
        z-index: 165;
    }

    .wr-topbar-brand-tag {
        display: none;
    }

    .wr-topbar-brand {
        width: auto;
    }

    .wr-topbar-search {
        display: none;
    }

    /* Below the drawer breakpoint the rail is opened by the hamburger, so the desktop
       collapse toggle has nothing to do. */
    .wr-topbar-collapse-btn {
        display: none;
    }

    /* Comfortable touch targets in the drawer -- vertical space is no longer the constraint
       there, since the drawer scrolls over the page rather than sharing its height. */
    .wr-sidebar-link {
        padding: 9px 10px;
        font-size: 0.9rem;
    }

    .wr-sidebar-section-label,
    .wr-sidebar-v2 p.wr-sidebar-section-label {
        margin: 16px 0 6px;
    }

    .wr-hero3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 28px 24px;
    }

    .wr-hero3-features {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }

    .wr-hero3-feature {
        flex: 1 1 210px;
    }

    .wr-dash3-mid {
        grid-template-columns: minmax(0, 1fr);
    }

        .wr-dash3-mid > .wr-dash3-rail {
            flex-direction: row;
            flex-wrap: wrap;
        }

            .wr-dash3-mid > .wr-dash3-rail > * {
                flex: 1 1 280px;
            }
}

@media (max-width: 768px) {
    :root {
        --wr3-gutter: 16px;
        --wr3-topbar-h: 66px;
    }

    .wr-topbar {
        padding: 0 12px;
        gap: 10px;
    }

    .wr-topbar-brand-name {
        font-size: 1.08rem;
    }

    .wr-topbar-quick-create {
        padding: 0 12px;
    }

    /* The header row is fixed-width icon buttons plus one elastic element: the user button's
       name/plan block. That is what has to go on a phone, or the row pushes the whole document
       sideways. The Help menu goes with it -- its actions (tour, Ask AI, support) are all
       reachable from the sidebar and the pages themselves. */
    .wr-topbar-user-meta {
        display: none;
    }

    .wr-topbar-user-btn {
        padding: 4px;
    }

    .wr-topbar-help {
        display: none;
    }

    .wr-kpi3-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wr-hero3-copy h1 {
        font-size: 1.62rem;
    }

    .wr-hero3-copy p {
        font-size: 0.92rem;
        max-width: none;
    }

    .wr-page-header-copy h1 {
        font-size: 1.38rem;
    }

    .wr-page-header-actions {
        margin-left: 0;
        width: 100%;
    }

    .wr-glance3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 4px;
    }

    .wr-dash3-mid > .wr-dash3-rail {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .wr-topbar-brand-text {
        display: none;
    }

    .wr-kpi3-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .wr-hero3-ctas .wr-hero3-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .wr-upgrade3-body {
        max-width: 100%;
    }

    .wr-upgrade3-art {
        display: none;
    }

    .wr-opp3-thumb {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}

/* Nothing inside an authenticated page may push the document sideways. */
.wra-dashboard-main,
.wra-dashboard-content,
.wr-dashboard-page {
    max-width: 100%;
    overflow-x: clip;
}

/* Screen-reader-only text. Present in marketing.css and seller.css under their own prefixes, but
   those sheets are not loaded on authenticated pages -- this is the app-shell equivalent, used by
   the network map's state-search label. */
.wr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}