/* =============================================================================
   3Beez Token Overrides (T-UI-01)
   Xablu.Blazor component overrides for the 3Beez gold/cream theme.
   Load after design-tokens.css in App.razor.
   All tokens use canonical --x- namespace.
   ============================================================================= */

@layer project-overrides {

/* XNotificationBell badge: FigmaMake uses gold (primary), library default is red (destructive) */
.x-notification-bell {
    --x-notification-bell-badge-bg: var(--x-color-primary);
    --x-notification-bell-badge-color: var(--x-color-primary-foreground);
}

/* XButton pill shape (for FigmaMake pill CTAs) */
.btn-pill { border-radius: 100px !important; height: 46px !important; }

/* XButton — Figma design system states (BButton component, font: Inter 14px/700) */
/* Button label font matches Figma: Inter, 14px, Bold */
.x-button .x-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
}
/* Primary pressed state: rgba(104,89,38) = #685926 */
.x-button-primary:active,
.x-button-primary.x-button-primary-active {
    background-color: var(--x-color-primary-active) !important;
    border-color: var(--x-color-primary-active) !important;
}
/* Secondary filled pressed state: rgba(81,84,88) = #515458 */
.x-button-secondary:active,
.x-button-secondary.x-button-secondary-active {
    background-color: rgba(81, 84, 88, 1) !important;
}
/* Secondary outline pressed state: rgba(229,233,238) */
.x-button-outline:active,
.x-button-outline.x-button-outline-active {
    background-color: rgba(229, 233, 238, 1) !important;
    border-color: rgba(208, 215, 224, 1) !important;
    color: var(--x-color-primary) !important;
}
/* Disabled state: rgba(239,242,245) bg + rgba(208,215,224) border */
.x-button-primary:disabled,
.x-button-primary[disabled] {
    background-color: rgba(239, 242, 245, 1) !important;
    border-color: rgba(208, 215, 224, 1) !important;
}
.x-button-secondary:disabled,
.x-button-secondary[disabled] {
    background-color: rgba(239, 242, 245, 1) !important;
    border-color: rgba(208, 215, 224, 1) !important;
}
.x-button-outline:disabled,
.x-button-outline[disabled] {
    background-color: rgba(239, 242, 245, 1) !important;
    border-color: rgba(208, 215, 224, 1) !important;
}

/* ── Ghost button text visibility (T-UI-15) ─────────────────────────────────
   v3.3.0 exposes --x-button-ghost-color token — set it to gold primary.
   Hover/active/disabled behavioral overrides still needed (no token). ── */
.x-button-ghost {
    --x-button-ghost-color: var(--x-color-primary);
    --x-button-ghost-hover-color: var(--x-color-primary);
}
.x-button-ghost:not(.x-button-icon-only):hover {
    background-color: transparent !important;
    opacity: 0.75;
}
.x-button-ghost:not(.x-button-icon-only):active {
    opacity: 0.55;
}
.x-button-ghost:not(.x-button-icon-only):disabled .x-label,
.x-button-ghost:not(.x-button-icon-only)[disabled] .x-label {
    color: var(--x-color-muted-foreground) !important;
    opacity: 0.5;
}

/* XCard sizing variants (Figma-aligned) */
.x-card.card-lg { border-radius: 20px !important; padding: var(--x-spacing-lg) !important; }
.x-card.card-md { border-radius: 16px !important; padding: var(--x-spacing-md) !important; }

/* XAvatar initials fallback — flat gold background, white Instrument Serif text */
/* v3.3.0: font uses tokens; background still needs !important (no --x-avatar-bg token yet) */
.x-avatar,
.x-avatar-wrapper,
.x-avatar > *:not(.x-avatar-text):not(.x-avatar-image) {
    background-color: #AE9440 !important;
    background: #AE9440 !important;
}
.x-avatar .x-avatar-text {
    background: #AE9440 !important;
    background-color: #AE9440 !important;
    color: #ffffff !important;
    --x-avatar-text-font: 'Instrument Serif', Georgia, serif;
    --x-avatar-text-weight: 400;
}

/* XChip — Figma design system states (BChip component)
   v3.3.0: IsSelected parameter drives selected state via CSS custom properties.
   Figma selected color: light blue rgba(156,193,224) = #9CC1E0 (not gold). */
.x-chip {
    --x-chip-selected-bg: var(--x-color-chip-selected);
    --x-chip-selected-color: var(--x-color-chip-selected-foreground);
    --x-chip-selected-border: var(--x-color-chip-selected);
    /* Unselected border: Figma rgba(203,211,221) */
    --x-chip-border-color: rgba(203, 211, 221, 1);
}
/* Selected hover: darker blue (Figma rgba(102,149,189)) */
.x-chip.x-chip-selected:hover,
.x-chip-filled.chip-selected:hover {
    --x-chip-bg: rgba(102, 149, 189, 1);
    background-color: rgba(102, 149, 189, 1) !important;
    border-color: rgba(102, 149, 189, 1) !important;
}
/* Selected pressed: dark blue (Figma rgba(68,100,126)) */
.x-chip.x-chip-selected:active,
.x-chip-filled.chip-selected:active {
    background-color: rgba(68, 100, 126, 1) !important;
    border-color: rgba(68, 100, 126, 1) !important;
}
/* Unselected hover: light blue wash (Figma rgba(227,237,246)) */
.x-chip:not(.x-chip-selected):hover,
.x-chip-outlined.chip-unselected:hover {
    background-color: rgba(227, 237, 246, 1) !important;
    border-color: rgba(203, 211, 221, 1) !important;
}
/* Unselected pressed: slightly deeper (Figma rgba(198,219,237)) */
.x-chip:not(.x-chip-selected):active,
.x-chip-outlined.chip-unselected:active {
    background-color: rgba(198, 219, 237, 1) !important;
    border-color: rgba(203, 211, 221, 1) !important;
}
/* Disabled: grey (Figma rgba(219,224,231)) */
.x-chip.x-chip-disabled {
    background-color: rgba(219, 224, 231, 1) !important;
    border-color: rgba(219, 224, 231, 1) !important;
    color: var(--x-color-muted-foreground) !important;
    pointer-events: none;
}

/* XTab — Figma design system states (BTabItem component) */
/* Figma: BTabItem 60px h, active=gold 3px border-bottom, inactive=transparent, text Inter 16px/400 */
.x-tab-header {
    border-bottom: 3px solid rgba(234, 237, 241, 1);
    background: transparent;
    padding: 0;
    gap: 0;
}
.x-tab-header-item {
    height: 60px;
    display: flex;
    align-items: center;
    border-radius: 0;
    padding: 0 var(--x-spacing-md);
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    background: transparent;
    color: var(--x-color-muted-foreground);
    font-size: 16px;
    font-weight: 400;
    transition: color var(--x-duration-fast) var(--x-ease-out),
                border-color var(--x-duration-fast) var(--x-ease-out),
                background-color var(--x-duration-fast) var(--x-ease-out);
}
/* Selected: gold bottom border 3px, normal weight (Figma w=400) */
.x-tab-header-item.selected {
    border-bottom: 3px solid rgba(174, 148, 64, 1) !important;
    color: var(--x-color-foreground) !important;
    font-weight: 400;
    background: transparent !important;
}
/* Hover: muted foreground text + subtle grey background (Figma rgba(245,246,248)) */
.x-tab-header-item:hover:not(.selected) {
    color: var(--x-color-foreground);
    background-color: rgba(245, 246, 248, 1);
}
/* Selected hover: keep gold border, add same grey background */
.x-tab-header-item.selected:hover {
    background-color: rgba(245, 246, 248, 1);
}
/* Pressed: slightly darker grey (Figma rgba(234,237,241)) */
.x-tab-header-item:active {
    background-color: rgba(234, 237, 241, 1);
}
/* Focus ring */
.x-tab-header-item:focus-visible {
    outline: 2px solid var(--x-color-ring);
    outline-offset: -2px;
}

/* XToggle gold track — v3.3.0 token (replaces !important input:checked selector) */
.x-toggle {
    --x-toggle-checked-bg: var(--x-color-brand-gold);
}
/* Hover: slight opacity shift on the track */
.x-toggle:not(.x-toggle-disabled):hover .x-toggle-track {
    opacity: 0.85;
}
/* Disabled: muted grey track */
.x-toggle.x-toggle-disabled .x-toggle-track,
.x-toggle input:disabled + .x-toggle-track {
    background-color: rgba(219, 224, 231, 1) !important;
    cursor: not-allowed;
}

/* Page heading patterns (Instrument Serif — Figma-aligned) */
.page-heading {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: var(--x-spacing-lg);
}
.page-heading__plain {
    font-family: var(--x-font-heading);
    font-size: 60px;
    line-height: 1;
    color: var(--x-color-foreground);
}
.page-heading__italic {
    font-family: var(--x-font-heading);
    font-size: 60px;
    line-height: 1;
    font-style: italic;
    color: var(--x-color-primary);
}

/* Section heading patterns (Figma-aligned) */
.section-heading {
    display: flex;
    gap: var(--x-spacing-sm);
    align-items: center;
    margin-bottom: var(--x-spacing-md);
}
.section-heading__plain {
    font-family: var(--x-font-heading);
    font-size: 32px;
    line-height: 1;
    color: var(--x-color-foreground);
}
.section-heading__italic {
    font-family: var(--x-font-heading);
    font-size: 32px;
    line-height: 1;
    font-style: italic;
    color: var(--x-color-primary);
}

/* Count badge (Figma-aligned) */
.section-count-badge {
    min-width: 24px;
    height: 24px;
    border-radius: 100px;
    background: var(--x-color-primary);
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-text-inverse);
}

/* Messages page layout (Figma-aligned) */
.messages-layout { display: flex; height: calc(100vh - var(--app-header-height, 64px)); overflow: hidden; }
.messages-chat-list { width: 280px; flex-shrink: 0; border-right: 1px solid var(--x-color-border); overflow-y: auto; }
.chat-list-item { display: flex; align-items: center; gap: var(--x-spacing-3, 12px); padding: var(--x-spacing-md); border-bottom: 1px solid var(--x-color-border); cursor: pointer; }
.chat-list-item.active,
.chat-list-item:hover { background: var(--x-color-neutral-100); }
.chat-list-item__name { font-weight: 700; font-size: var(--x-text-sm); }
.chat-list-item__preview { color: var(--x-color-muted-foreground); font-size: var(--x-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-item__time { font-size: var(--x-text-xs); color: var(--x-color-muted-foreground); margin-left: auto; flex-shrink: 0; }

/* XChatWindow layout — token-based bubble styling is at end of file */
.x-chat-window { flex: 1; display: flex; flex-direction: column; }

/* XTextfield pill shape (.input-pill) — for login/settings password fields */
.x-textfield.input-pill .x-textfield-container {
    border-radius: 100px;
    overflow: hidden;
}
.x-textfield.input-pill .x-textfield-input {
    height: 46px;
    border-radius: 100px;
    background: var(--x-color-input-background);
    padding: 0 16px;
}

/* XSelect pill shape (.select-pill) — for timezone/frequency dropdowns */
.x-select.select-pill .x-select-input {
    height: 46px;
    border-radius: 100px;
    padding: 0 16px;
    background: var(--x-color-input-background);
    width: 100%;
}

/* KPI grid for Dashboard dealflow stats */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--x-spacing-md);
}

/* ── T-UI-10: Onboarding / Login left panel ────────────────────────────── */
/* Dark left panel: override ALL color tokens to white context.
   XThemeProvider sets --x-color-foreground: #000000 on its wrapper,
   which cascades into this panel. We override the token at the panel
   level so all children using var(--x-color-foreground), var(--x-color-text-primary),
   var(--x-color-text-inverse), or inherited color get white. */
.onboarding-left-panel {
    flex: 1;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.2) 0%, rgba(177,177,177,0.2) 100%),
                linear-gradient(90deg, var(--x-color-bg-dark) 0%, var(--x-color-bg-dark) 100%);

    /* Override color tokens for dark background context */
    --x-color-foreground: #ffffff;
    --x-color-text-primary: #ffffff;
    --x-color-text-inverse: #ffffff;
    --x-color-muted-foreground: rgba(255, 255, 255, 0.7);
    color: #ffffff;

    display: none; /* hidden on mobile */
}
.onboarding-left-panel__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 0 95px 64px;
    z-index: 1;
}
@media (min-width: 1024px) {
    .onboarding-left-panel { display: flex; }
}

/* ── T-UI-13: Onboarding form inputs (pill r=100 per Figma) ─────────────────── */
.onboarding-input {
    width: 100%;
}
.onboarding-input .x-textfield-input {
    width: 100%;
    height: 46px;
    border-radius: 100px;
    border: 1px solid rgba(208, 215, 224, 1);
    background: var(--x-color-input-background);
    padding: 0 16px;
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    color: var(--x-color-foreground);
    outline: none;
    letter-spacing: -0.32px;
    box-sizing: border-box;
}
.onboarding-input .x-textfield-input::placeholder { color: rgba(122, 127, 133, 1); }
.onboarding-input .x-textfield-input:focus { border-color: var(--x-color-primary); }
.onboarding-input--password .x-textfield-input { padding-right: 48px; }

/* Password show/hide toggle (XButton Action inside wrapper) */
.password-field-wrapper { position: relative; }
.password-field-wrapper .password-toggle-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    min-width: auto;
    width: auto;
    height: auto;
    color: var(--x-color-muted-foreground);
    z-index: 1;
}

/* ── T-UI-13: Progress bar (3px pill segments) ─────────────────────────────── */
.onboarding-progress {
    display: flex;
    gap: var(--x-spacing-lg);
    width: 100%;
    height: 12px;
    align-items: center;
}
.onboarding-progress__step {
    flex: 1;
    height: 3px;
    border-radius: 9999px;
    background: var(--x-color-progress-inactive);
}
.onboarding-progress__step--done { background: var(--x-color-primary); }

/* Bee logo on onboarding right panel (FigmaMake: 93x77px centered) */
.onboarding-bee-logo {
    width: 93px;
    height: 77px;
    flex-shrink: 0;
    margin-bottom: var(--x-spacing-lg);
}

/* Step label below progress bar */
/* Back button — FigmaMake: white pill, 150px, border, arrow icon */
.onboarding-back-btn {
    height: 46px;
    min-width: 150px;
    width: 150px;
    border-radius: var(--x-radius-full, 9999px);
    border: 1px solid var(--x-color-border);
    background: var(--x-color-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm);
    cursor: pointer;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-action-text);
}
.onboarding-back-btn:hover { opacity: 0.8; }

/* Nav arrow icons */
.onboarding-nav-arrow { width: 18px; height: 14px; flex-shrink: 0; }
.onboarding-nav-arrow-sm { width: 12px; height: 10px; flex-shrink: 0; }

.onboarding-step-label {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    margin: var(--x-spacing-xs) 0 0;
    align-self: flex-start;
}

/* ── T-UI-13: Next button (graphite pill matching Figma onboarding CTAs) ─── */
.onboarding-next-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm);
    height: 46px;
    min-width: 150px;
    width: 150px;
    padding: var(--x-spacing-xs) var(--x-spacing-3, 12px);
    border-radius: var(--x-radius-full, 9999px);
    border: none;
    background: var(--x-color-graphite);
    color: var(--x-color-text-inverse);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    cursor: pointer;
}
.onboarding-next-btn.disabled,
.onboarding-next-btn:disabled {
    background: var(--x-color-chip-light);
    color: var(--x-color-disabled-text);
    cursor: default;
}

/* ── T-UI-13: Login CTA button (gold, 12px radius — NOT pill) ──────────────── */
/* Used for the Continue button on Login page */
.login-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    width: 100%;
    border-radius: var(--x-radius);
    border: none;
    background: var(--x-color-primary);
    color: var(--x-color-primary-foreground);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity var(--x-duration-normal) var(--x-ease-out);
}
.login-cta-btn:hover { opacity: 0.9; }
.login-cta-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── T-UI-13: Social login buttons (12px radius — NOT pill) ─────────────────── */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    border-radius: var(--x-radius);
    border: 1px solid var(--x-color-border);
    background: var(--x-color-card);
    cursor: pointer;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--x-color-foreground);
}
.social-btn:hover { background: var(--x-color-neutral-50); }

/* ── P2-028: Hexagon SVG decoration pattern ───────────────────────────────── */
/* Reusable hexagon background for hero sections and decorative panels */
.hex-decoration {
    position: absolute;
    pointer-events: none;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
@media (max-width: 767px) {
    .hex-decoration { display: none; }
}
.hex-decoration__svg {
    position: absolute;
    width: 1452px;
    height: 1199px;
    left: -484px;
    top: -465px;
    transform: rotate(180deg) scaleY(-1);
}

/* Hexagon outline variant (used on Login panel) */
.hex-decoration--outline {
    opacity: 0.18;
}

/* ── Responsive heading adjustments (Figma-aligned) ─────────────────────── */
@media (max-width: 1024px) {
    .page-heading__plain,
    .page-heading__italic {
        font-size: 36px;
    }
}
@media (max-width: 767px) {
    .page-heading__plain,
    .page-heading__italic {
        font-size: 24px;
    }
    .section-heading__plain,
    .section-heading__italic {
        font-size: 18px;
    }
}

/* ── P2-028: Onboarding split panel — left panel visible inside XSplitView ── */
.x-split-view .onboarding-left-panel {
    display: flex;
    min-height: 100vh;
}

/* =============================================================================
   Phase CP Cross-Cutting Fixes (CAT-A through CAT-H)
   FigmaMake → Blazor alignment classes.
   ============================================================================= */

/* ── CAT-B: Graphite action button (#292a2c) ─────────────────────────────── */
/* v3.4.0 exposes normal-state tokens; v3.4.1 adds disabled-state tokens.
   Zero !important — fully token-driven. */
.btn-graphite {
    --x-button-bg: var(--x-color-graphite, #292a2c);
    --x-button-color: var(--x-color-text-inverse, white);
    --x-button-hover-bg: var(--x-color-graphite, #292a2c);
    --x-button-hover-color: var(--x-color-text-inverse, white);
    --x-button-active-bg: var(--x-color-graphite, #292a2c);
    --x-button-disabled-bg: var(--x-color-chip-light, #eff2f5);
    --x-button-disabled-color: var(--x-color-disabled-text, #b7bec7);
    border: 1px solid var(--x-color-border);
}
.btn-graphite:hover { opacity: 0.9; }
.btn-graphite:disabled,
.btn-graphite.disabled {
    cursor: default;
}

/* Fixed-width action buttons (FigmaMake: width 150px).
   white-space: nowrap ensures longer labels (e.g. "Start Exploring") never
   wrap to a second line. min-width keeps short buttons (Back/Next) at 150px. */
.btn-fixed { min-width: 150px; white-space: nowrap; }

/* Onboarding Next/Back CTAs render as pills per Figma (both variants).
   Targets .btn-fixed inside .form-content (onboarding page layout) so this
   rule does not leak into modal/side-panel footer buttons that use the same
   .btn-fixed utility for width but need radius from their own context. */
.form-content .btn-fixed {
    --x-button-radius: 9999px;
    border-radius: 9999px;
}

/* Figma: Back button = white bg, #D0D7E0 border, #515458 gray text+icon.
   Scoped to .form-content (onboarding pages only) to avoid overriding primary
   Save buttons in side panels and other non-onboarding contexts.
   Root cause of blue icon: XButton icons use filter:var(--x-icon-filter-primary),
   NOT stroke/color — so we must override the filter token, not SVG attrs. */
.form-content .btn-fixed:not(.btn-graphite) {
    background: #ffffff !important;
    border-color: var(--x-color-border, #D0D7E0) !important;
    color: #515458 !important;
    /* Text color token */
    --x-color-primary: #515458;
    --x-color-accent: #515458;
    --x-color-ring: #515458;
    /* Icon filter tokens — brightness(0)+invert(32%) produces #525252 ≈ #515458 gray */
    --x-icon-filter-primary:     brightness(0) saturate(100%) invert(32%);
    --x-icon-filter-primary-s20: brightness(0) saturate(100%) invert(34%);
    --x-icon-filter-primary-s40: brightness(0) saturate(100%) invert(36%);
}

/* Modal cancel button (FigmaMake: #954535 reject colour border + text) */
.modal-cancel-btn {
    border-color: var(--x-color-reject, #954535) !important;
    color: var(--x-color-reject, #954535) !important;
}
.modal-cancel-btn:hover { opacity: 0.8; }

/* CAT-C: Avatar rounded-square — now using Shape="AvatarShape.RoundedSquare" parameter */

/* ── Earned attribute chip (Profile BeeScore — FigmaMake: #d4e4f2 light blue) ── */
.x-chip-filled.chip-attribute {
    background-color: var(--x-color-chip-attribute, #d4e4f2) !important;
    color: var(--x-color-foreground) !important;
    border: none !important;
    font-weight: 600;
    letter-spacing: -0.28px;
}

/* ── CAT-D: FigmaMake card shadow ────────────────────────────────────────── */
.card-shadow { box-shadow: var(--x-shadow-card, 5px 5px 20px 0px #d6dce4) !important; }

/* ── CAT-H: Button row alignment (right-aligned, Figma-aligned) ──────────── */
.btn-row-end {
    display: flex;
    justify-content: flex-end;
    gap: var(--x-spacing-lg);
    width: 100%;
}

/* ── Onboarding shared styles ─────────────────────────────────────────────── */
/* Shared across all onboarding pages (Founder, Investor, Partner, Role).     */
/* Extracted from 9 duplicated .razor.css files — Phase 185E-01.              */

.left-panel-inner {
    display: flex;
    min-height: 100vh;
}

.hex-bg-container {
    position: absolute;
    pointer-events: none;
    inset: 0;
    overflow: hidden;
}

.hex-bg-svg {
    position: absolute;
    width: 1452px;
    height: 1199px;
    left: -484px;
    top: -465px;
    transform: rotate(180deg) scaleY(-1);
}

.testimonial-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 95px 45px;
    z-index: 1;
}

.star-row {
    display: flex;
    gap: var(--x-spacing-sm);
    align-items: center;
    height: 24px;
}

.star-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.testimonial-quote {
    font-family: var(--x-font-heading);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 400;
    line-height: var(--x-line-height-snug);
    color: var(--x-color-foreground);
    max-width: 770px;
}

.testimonial-attribution {
    font-family: var(--x-font-body);
    font-size: var(--x-text-lg);
    color: var(--x-color-foreground);
    line-height: var(--x-line-height-snug);
    letter-spacing: -0.4px;
}

/* Right panel of XSplitView needs white bg to fill behind form-content */
.x-split-view-right {
    background: var(--x-color-card);
    flex: 1;
    min-height: 100vh;
}

/* FigmaMake: flex-col, 644px centered, gap-[40px] between major sections */
.form-content {
    max-width: 644px;
    margin: 0 auto;
    padding: var(--x-spacing-2xl) var(--x-spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    flex: 1;
}

/* FigmaMake: gap-[24px] between form field sections */
.section-top {
    margin-top: var(--x-spacing-lg);
    width: 100%;
}

.heading-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* Onboarding sub-heading scale: fluid 24-40px to match Figma "Tell about X" / "Your X" sub-headings */
.heading-plain {
    font-family: var(--x-font-heading);
    font-size: clamp(24px, 3.5vw, 40px);
    line-height: 1;
    color: var(--x-color-foreground);
}

.heading-accent {
    font-family: var(--x-font-heading);
    font-size: clamp(24px, 3.5vw, 40px);
    font-style: italic;
    line-height: 1;
    color: var(--x-color-primary);
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
    width: 100%;
}

.field-label-row {
    display: flex;
    gap: var(--x-spacing-xs);
    align-items: center;
}

.field-label {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    color: var(--x-color-foreground);
    letter-spacing: -0.32px;
}

/* .required-marker removed — replaced with the library-provided
   .x-required-indicator span (Xablu v3.5.0 tokens.css:937). */

.two-col-row {
    display: flex;
    gap: var(--x-spacing-lg);
    margin-top: var(--x-spacing-lg);
    width: 100%;
}

.col-half {
    flex: 1 1 0;
    min-width: 0;
    /* overflow: hidden removed — it clips XDropdown overlay menus.
       min-width: 0 already prevents the flex column from growing. */
}

/* Prevent XDropdown/XTextfield inside two-col from resizing column */
.col-half > .field-group,
.col-half .x-dropdown,
.col-half .x-textfield {
    width: 100% !important;
}
.col-half .x-dropdown-trigger {
    width: 100% !important;
    box-sizing: border-box;
}

/* FigmaMake: radio buttons 40px gap between options */
.onboarding-radio-group .x-radio-group-options {
    gap: 40px !important;
}

/* FigmaMake: nav buttons pushed to bottom with mt-auto, right-aligned */
.nav-row {
    display: flex;
    justify-content: flex-end;
    gap: var(--x-spacing-lg);
    margin-top: auto;
    width: 100%;
}

.field-section {
    margin-bottom: var(--x-spacing-lg);
    width: 100%;
}

.chip-label {
    display: block;
    font-size: var(--x-text-base);
    font-weight: 400;
    color: var(--x-color-foreground);
    margin-bottom: var(--x-spacing-sm);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-sm);
}

.role-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
    width: 100%;
}

/* Currency input: € / $ prefix overlay.
   Root cause of double border: Class="currency-input" applies to the XTextfield
   outer wrapper div (.x-textfield), NOT the inner <input>. That wrapper must NOT
   have its own border — only the inner .x-textfield-input should have one (via Xablu).
   We only override the inner input's left padding to clear the currency symbol. */
.currency-input-wrapper {
    position: relative;
    width: 100%;
}
.currency-symbol {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--x-color-muted-foreground);
    font-size: var(--x-text-base, 16px);
    font-family: var(--x-font-body);
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}
/* Applied to the .x-textfield wrapper via Class="currency-input" — NO border here */
.currency-input {
    width: 100%;
}
/* Push input text right to clear the currency symbol */
.currency-input-wrapper .x-textfield-input {
    padding-left: 34px !important;
}

/* .amount-label removed — Min/Max inputs now use the shared .field-label utility
   so label sizing matches Figma (16px Inter regular) across the whole onboarding. */

.dropdown-label {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    letter-spacing: -0.32px;
}

/* ── View Transitions (cross-document navigation) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: var(--x-duration-fast) var(--x-ease-out) both fade-out; }
::view-transition-new(root) { animation: var(--x-duration-fast) var(--x-ease-out) both fade-in; }
.app-sidebar { view-transition-name: sidebar; }
.app-header-cluster { view-transition-name: header; }
.bottom-nav { view-transition-name: bottomnav; }
::view-transition-group(sidebar), ::view-transition-group(header), ::view-transition-group(bottomnav) { animation: none; }

/* ── Touch UX: prevent accidental double-tap zoom, contain overscroll ── */
a, button, [role="button"], input, select, textarea, .x-button, .x-chip {
    touch-action: manipulation;
}

/* ── Landscape phones: reduce header+footer overhead ── */
@media (orientation: landscape) and (max-height: 500px) {
    .app-header-cluster {
        height: 40px;
        padding: 0 var(--x-spacing-md);
    }
    .bottom-nav-bar {
        height: 44px;
    }
    .app-content {
        padding-bottom: calc(44px + var(--x-spacing-md, 16px));
    }
}

/* ── Box-shadow: reduce blur on mobile for scroll performance ── */
@media (max-width: 767px) {
    .card-shadow {
        box-shadow: 2px 2px 8px 0px rgba(214, 220, 228, 0.6) !important;
    }
}

/* ── Reduced motion: disable all transitions and view transitions ── */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* XStatusPill — Figma design system badge colors */
/* Info: Figma uses royal blue #1C6FB8, not primary gold */
.x-status-pill-info {
    background-color: var(--x-color-info-light) !important;
    color: var(--x-color-info) !important;
}
/* Success: Figma #6B8E23 (olive green) */
.x-status-pill-success {
    background-color: var(--x-color-success-light) !important;
    color: var(--x-color-success) !important;
}
/* Warning: Figma #FFCD1E (bright yellow) — dark text for contrast */
.x-status-pill-warning {
    background-color: var(--x-color-warning-light) !important;
    color: var(--x-color-warning-dark) !important;
}
/* Danger: Figma #954535 (brownish red) */
.x-status-pill-danger {
    background-color: var(--x-color-destructive-muted) !important;
    color: var(--x-color-destructive) !important;
}

/* XCard — Figma design system interactive states */
/* Focused: gold outline (Figma stroke rgba(174,148,64) w=2) */
.x-card.x-card-selected,
.x-card:focus-visible {
    outline: 2px solid var(--x-color-brand-gold) !important;
    outline-offset: 0;
}
/* Pressed: slightly grey background (Figma rgba(245,246,248)) */
.x-card.x-card-clickable:active {
    background-color: rgba(245, 246, 248, 1) !important;
}

/* ── Chat bubble brand overrides (via CSS custom properties — no ::deep needed) ── */
.x-chat-message {
    --x-chat-bubble-own-bg: var(--x-color-sent-bubble);
    --x-chat-bubble-own-color: var(--x-color-foreground);
    --x-chat-bubble-other-bg: var(--x-color-received-bubble);
    --x-chat-bubble-other-color: var(--x-color-foreground);
    --x-chat-bubble-radius: var(--x-radius-lg);
    --x-chat-bubble-padding: var(--x-spacing-3, 12px);
    --x-chat-bubble-max-width: 584px;
}

} /* end @layer project-overrides */