/* 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, #EF4444, #B91C1C);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 14px -6px rgba(220, 38, 38, 0.45);
}

.btn[data-variant="danger"]:hover {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 22px -6px rgba(220, 38, 38, 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-1);
    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-tiny);
    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(34, 197, 94, 0.12));
    color: var(--success, #15803d);
}

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

.integrations-status--aggregator {
    background: var(--brand-subtle, rgba(59, 130, 246, 0.12));
    color: var(--brand-700, #1d4ed8);
}

.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(--surface-0);
    font: inherit;
}

.integrations-form input:focus-visible {
    outline: 2px solid var(--brand-500, #3b82f6);
    outline-offset: 1px;
}

.t-danger  { color: var(--danger, #b91c1c); }
.t-success { color: var(--success, #15803d); }


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