/* Portal pages — global polish layer.
   Applies to every authenticated portal page. Token-driven, no
   hex literals. Loaded after the design system primitives so it
   can override safely. */

/* ─── Native form controls — dark-mode aware ────────────────── */

/* Tell the browser to render native chrome (number-input
   spinners, date pickers, scrollbars) using the right theme. */
:root {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

/* Hide native number-input spinners. They render as white-on-white
   in dark mode and don't follow the design system. The user can
   still type or use arrow keys. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Themed checkbox + radio. Use accent-color for the simple case;
   custom box for richer hover/focus states. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Native select arrow icon — invert in dark mode so it's visible. */
[data-theme="dark"] select {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--space-8);
}

/* File inputs — theme the picker button */
input[type="file"] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

input[type="file"]::file-selector-button {
    margin-right: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
}

input[type="file"]::file-selector-button:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

/* ─── Generic page section / hero ──────────────────────────── */

.page-section {
    display: block;
    width: 100%;
}

.page-section + .page-section {
    margin-top: var(--space-8);
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.page-header > .page-title-block {
    flex: 1;
    min-width: 0;
}

.page-header h1 {
    margin: 0 0 var(--space-1);
}

.page-header .page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
    max-width: 60ch;
}

.page-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ─── Lead inbox ────────────────────────────────────────────── */

.lead-tabs {
    display: flex;
    gap: 2px;
    padding: var(--space-1);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    width: fit-content;
}

.lead-tabs a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background 100ms ease, color 100ms ease;
}

.lead-tabs a:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.lead-tabs a[data-active="True"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

.lead-tab-count {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs);
}

.lead-filters {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.lead-card {
    transition: transform 100ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.lead-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.lead-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.lead-card-when {
    flex-shrink: 0;
    white-space: nowrap;
}

.lead-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    cursor: pointer;
}

.lead-filter-toggle[aria-pressed="true"] {
    background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
    border-color: var(--brand-primary);
    color: var(--text);
}

/* Lead detail activity timeline */

.lead-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lead-activity-row {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.lead-activity-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--brand-primary);
    font-size: var(--text-md);
    flex-shrink: 0;
}

/* ─── Forms — generic field layout ─────────────────────────── */

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field > input:not([type="checkbox"]):not([type="radio"]),
.form-field > select,
.form-field > textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.form-field > input:focus,
.form-field > select:focus,
.form-field > textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
}

.form-field > textarea { min-height: 100px; resize: vertical; }

/* Form rows that pack 2-3 inputs side by side */
.form-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.form-row > .form-field {
    flex: 1 1 240px;
    min-width: 0;
}

/* ─── Feature chip grid (multi-select chips) ────────────────── */

.feature-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
}

.feature-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background 100ms ease, border-color 100ms ease;
}

.feature-chip:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.feature-chip input[type="checkbox"] {
    margin: 0;
    accent-color: var(--brand-primary);
}

.feature-chip:has(input:checked) {
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    border-color: var(--brand-primary);
    color: var(--text);
}

/* ─── Compliance gauges ─────────────────────────────────────── */

.compliance-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.compliance-gauge-score {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ─── Vendor portal ─────────────────────────────────────────── */

.vendor-page {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
}

/* ─── Empty states ──────────────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: var(--text-4xl);
    opacity: 0.5;
}

.empty-state-title {
    margin: 0;
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: 600;
}

/* ─── Generic table / data list ─────────────────────────────── */

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.data-table th,
.data-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-subtle);
}

.data-table th {
    background: var(--surface-2);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: var(--surface-hover);
}

/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 720px) {
    .page-header {
        flex-direction: column;
        gap: var(--space-3);
    }
    .page-actions {
        width: 100%;
    }
    .lead-tabs {
        width: 100%;
        overflow-x: auto;
    }
    .lead-tabs a {
        flex-shrink: 0;
    }
}

/* ─── Sticky save bar utility ──────────────────────────── */
/* Drop .sticky-actions on a form footer to keep the Save/
   Submit button reachable on long pages. Subtle drop-shadow
   on top so the bar reads as "floating" above content. */
.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    margin: 1rem -1rem -1rem -1rem;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -8px 16px -8px color-mix(in srgb, var(--text) 8%, transparent);
}

/* Danger variant for buttons — used by ConfirmModal destructive
   confirmations. Pure red gradient; same hover lift as primary. */
.btn[data-variant="danger"] {
    background: linear-gradient(135deg, var(--danger-bright), var(--danger));
    color: var(--white);
    border: none;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.06), 0 6px 14px -6px rgba(var(--danger-rgb),  0.45);
}

.btn[data-variant="danger"]:hover {
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.08), 0 10px 22px -6px rgba(var(--danger-rgb),  0.55);
}

.btn[data-variant="danger"]:active { transform: translateY(1px); }

/* ─── Legal pages (/legal/privacy, /legal/terms) ─────────── */

.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding-block: var(--space-6) var(--space-12);
    color: var(--text);
}

.legal-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}

.legal-back {
    display: inline-block;
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
}

.legal-back:hover { color: var(--text); }

.legal-eyebrow {
    margin: 0 0 var(--space-2) 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-xs);
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.legal-title {
    margin: 0;
    font-size: clamp(1.85rem, 3vw, 2.4rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.15;
}

.legal-meta {
    margin: var(--space-3) 0 0 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.legal-body {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text);
}

.legal-body p { margin: 0 0 var(--space-4) 0; }

.legal-body h2 {
    margin: var(--space-8) 0 var(--space-3) 0;
    font-size: 1.2rem;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    color: var(--text);
}

.legal-body ul {
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-6);
    color: var(--text);
}

.legal-body li {
    margin-bottom: var(--space-2);
    line-height: 1.6;
}

.legal-body a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    transition: border-color 140ms ease;
}

.legal-body a:hover {
    border-bottom-color: var(--accent);
}

.legal-body strong { font-weight: var(--weight-semibold); }

.legal-footer {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

.legal-cross-link {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    transition: background 140ms ease, transform 100ms ease;
}

.legal-cross-link:hover {
    background: var(--surface-hover);
    transform: translateY(-1px);
}

/* ─── Integrations (TransUnion / TPN credential setup) ────────── */
.integrations-card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.integrations-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.integrations-card-header h2 { margin: 0; }

.integrations-status {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.integrations-status--connected {
    background: var(--success-subtle, rgba(var(--accent-rgb),  0.12));
    color: var(--success, var(--accent));
}

.integrations-status--not-connected {
    background: var(--surface-2, rgba(var(--shadow-rgb),  0.06));
    color: var(--text-tertiary);
}

.integrations-status--aggregator {
    /* Was var(--brand-*) — undefined tokens that fell back to BLUE on a
       forest-green brand. Use the real green accent tokens. */
    background: var(--accent-subtle);
    color: var(--accent-text);
}

.integrations-form {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    max-width: 540px;
}

.integrations-form label {
    display: grid;
    gap: var(--space-1);
}

.integrations-form input {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg);
    font: inherit;
}

.integrations-form input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.t-danger  { color: var(--danger, var(--danger)); }
.t-success { color: var(--success, var(--accent)); }


/* ────────────────────────────────────────────────────────────────
   Sidebar collapsed-mode flyout overflow release
   ────────────────────────────────────────────────────────────────
   When the sidebar is collapsed AND the user is hovering a nav
   group, the flyout panel needs to escape past the sidebar's right
   edge. Normally the sidebar (and its nav child) clip overflow so
   the brand stays pinned at the top and the nav scrolls inside.

   On hover, we lift the overflow cage via :has() so the flyout
   can render in front of the topbar / main content.

   This rule lives in the global stylesheet (not in PortalLayout's
   scoped CSS) so the :has() selector can reach .nav-group, which
   lives inside the NavGroup child component. Blazor's CSS
   isolation would otherwise scope the selectors away from it. */

.portal-shell[data-sidebar-collapsed] .portal-sidebar:has(.nav-group:hover),
.portal-shell[data-sidebar-collapsed] .portal-sidebar:has(.nav-group:focus-within) {
    overflow: visible;
}

.portal-shell[data-sidebar-collapsed] .portal-sidebar-nav:has(.nav-group:hover),
.portal-shell[data-sidebar-collapsed] .portal-sidebar-nav:has(.nav-group:focus-within) {
    overflow: visible;
}

/* Same escape hatch for the FOOTER tooltip pop-outs (theme toggle,
   text-size, sign-out, collapse). Without this, the tooltip text
   ("Sign out", "Text size") gets clipped by the sidebar's right
   edge because the sidebar normally has overflow:hidden. */
.portal-shell[data-sidebar-collapsed] .portal-sidebar:has(.portal-sidebar-footer button:hover),
.portal-shell[data-sidebar-collapsed] .portal-sidebar:has(.portal-sidebar-footer button:focus-visible),
.portal-shell[data-sidebar-collapsed] .portal-sidebar:has(.portal-footer-user:hover) {
    overflow: visible;
}

/* Same for nav-link tooltips (the popout that shows the label of
   non-group items like Dashboard, Listings, Leads, CRM, Settings
   when sidebar is collapsed). */
.portal-shell[data-sidebar-collapsed] .portal-sidebar:has(a.portal-nav-link:hover),
.portal-shell[data-sidebar-collapsed] .portal-sidebar-nav:has(a.portal-nav-link:hover) {
    overflow: visible;
}

/* Google Places Autocomplete dropdown (pac-container) is appended to
   document.body, outside Blazor's scoped CSS bubble. Bump its
   z-index above the sticky wizard footer (z-index 1) and any modals. */
.pac-container {
    z-index: 9999 !important;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 10px 30px -10px rgba(var(--shadow-rgb),  0.25);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="dark"] .pac-container {
    background: var(--surface);
    color: var(--text);
}

[data-theme="dark"] .pac-item {
    color: var(--text);
    border-color: rgba(var(--accent-rgb),  0.14);
}

[data-theme="dark"] .pac-item:hover,
[data-theme="dark"] .pac-item-selected {
    background: var(--accent-subtle);
}

[data-theme="dark"] .pac-item-query,
[data-theme="dark"] .pac-matched {
    color: var(--accent-text);
}

/* ════════════════════════════════════════════════════════════════
   REPORTING DASHBOARD + COMPLIANCE
   These KPI-grid / trend / table / heat-pill rules previously lived
   only in the dead, unlinked wwwroot/app.css, so the Reports and
   Compliance pages rendered their KPI tiles full-width and stacked.
   Re-homed here (a stylesheet App.razor actually loads) so the tiles
   lay out as a responsive grid like the rest of the portal.
   ════════════════════════════════════════════════════════════════ */
.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-3);
}

.report-trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-3);
}

.report-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
    gap: var(--space-1);
    align-items: end;
    height: 8rem;
}

.report-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: 100%;
    gap: var(--space-1);
}

.report-bar-fill {
    width: 100%;
    background: var(--accent, var(--accent));
    border-radius: var(--radius-sm);
    min-height: 4%;
    transition: height 200ms ease-out;
}

.report-bar-label {
    text-align: center;
}

.report-rank {
    color: var(--text-tertiary);
    min-width: 2.5rem;
}

/* Per-listing performance grid — two cards side by side on wide
   screens, stacked on mobile (handled by minmax wrap). */
.report-perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: var(--space-3);
}

/* Read-only data tables (commission tracker, ledger, heat map). */
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.report-table th,
.report-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle, rgba(var(--shadow-rgb), 0.06));
    text-align: left;
    vertical-align: top;
}
.report-table th {
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
}
.report-table tbody tr:hover {
    background: var(--surface-hover);
}

/* Heat-pill — five intensity steps from cold (light grey) to hot. */
.heat-pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
    text-align: center;
}
.heat-pill.heat-0 { background: rgba(var(--shadow-rgb), 0.05); color: var(--text-tertiary); }
.heat-pill.heat-1 { background: rgba(var(--warning-rgb),  0.25); color: var(--warning-deep); }
.heat-pill.heat-2 { background: rgba(var(--warning-rgb),  0.35); color: var(--warning-deep); }
.heat-pill.heat-3 { background: rgba(var(--danger-rgb),  0.45); color: var(--danger-deep); }
.heat-pill.heat-4 { background: rgba(var(--danger-rgb),  0.85); color: var(--white); font-weight: 600; }

@media (max-width: 720px) {
    .report-kpi-grid { grid-template-columns: 1fr 1fr; }
    .report-bars { height: 6rem; }
}

@media (max-width: 480px) {
    .report-kpi-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   PORTAL LIST ROWS · REMINDERS · ACTIVITY FEED
   Same dead-file story: these were defined only in the unlinked
   wwwroot/app.css, so the listing/leaderboard/landlord/agent/vendor
   list rows, the reminders side-panel and the activity feed all
   rendered as bare, unstyled <ul>/<li> stacks. Re-homed here.
   ════════════════════════════════════════════════════════════════ */
.portal-listing-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.portal-listing-row {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: background var(--duration-fast, 120ms) var(--ease-smooth, ease);
}
.portal-listing-row:hover { background: var(--surface-hover); }
.portal-listing-link {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: inherit;
    text-decoration: none;
}
@media (max-width: 720px) {
    .portal-listing-row { font-size: 0.95rem; }
}

/* Reminder side-panel — lightweight list that tucks beside context
   cards on detail pages. */
.reminder-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.reminder-row {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle, rgba(var(--shadow-rgb), 0.06));
}
.reminder-row:last-child { border-bottom: none; }

/* Recent-activity feed (Activity area). */
.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}
.activity-feed-item {
    display: grid;
    grid-template-columns: 7rem 14rem 1fr;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    align-items: baseline;
}
.activity-feed-item:last-child { border-bottom: none; }
.activity-when { color: var(--text-tertiary); }
.activity-type {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .activity-feed-item {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* Vendor self-service portal shell — stripped chrome (thin topbar +
   content). Layout classes were stranded in the dead app.css, so the
   vendor magic-link pages rendered with no grid / no topbar. */
.vendor-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 64px 1fr;
}
.vendor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg);
}
.vendor-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.vendor-main {
    padding: var(--space-6) var(--space-5);
    background: var(--bg-subtle);
}

/* Vendor topbar brand + user chrome — these shared portal-* classes
   were also stranded in the dead app.css, so the vendor topbar showed
   a bare "A" (no green brand square), unstyled wordmark and a
   non-flex user block. (.portal-logout-form is also used by the
   inspector + renter sign-out forms.) */
.portal-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    background: var(--accent);
    color: var(--text-on-accent, var(--white));
    border-radius: var(--radius-sm);
    font-weight: var(--weight-bold, 700);
}
.portal-brand-text {
    font-weight: var(--weight-semibold, 600);
    font-size: var(--text-md, 1rem);
}
.portal-user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.portal-user-name {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary);
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-logout-form {
    margin: 0;
}