/**
 * clerk-overrides.css
 *
 * Bridges Clerk's stable CSS class names with the app's design system.
 *
 * ── CASCADE STRATEGY ────────────────────────────────────────────────────────
 * Clerk's runtime-injected <style> blocks are placed inside a named CSS @layer
 * called 'clerk' via the `cssLayerName: 'clerk'` option in clerkAppearance.js.
 *
 * CSS that lives OUTSIDE any @layer (i.e., this entire file) has higher cascade
 * priority than ALL layered styles — more specifically:
 *   unlayered CSS > @layer clerk > @layer base > …
 *
 * This means our rules here win over Clerk's runtime sheet WITHOUT needing
 * !important — though !important is kept on critical rules as an extra guard
 * for any Clerk elements that might render outside the named layer.
 *
 * The `@layer clerk;` declaration below formally registers the layer name so
 * that the cascade order is explicit even before Clerk injects anything.
 * ────────────────────────────────────────────────────────────────────────────
 *
 * CLASS NAMES: Only safe stable classes (those before the 🔒 lock icon in
 * DevTools) are targeted here — e.g. cl-userButtonPopoverActionButton.
 *
 * Design tokens referenced here mirror vanilla_app/css/style.css exactly:
 *   Light:  --card-bg:#ffffff | --border-color:#e5e7eb | --text-headings:#1a1a2e
 *   Dark:   --card-bg:#2c2c2c | --border-color:#3a3a3a | --text-headings:#ffffff
 *
 * Confirmed element class names from DevTools inspection:
 *   Built-in items:
 *     .cl-userButtonPopoverActionButton           → button row
 *     .cl-userButtonPopoverActionButtonIconBox    → icon <span>
 *     .cl-userButtonPopoverActionButtonIcon       → SVG icon
 *     .cl-userButtonPopoverActionButtonText       → label text (NOT present in HTML; text is direct child)
 *   Custom menu items (Settings, Billing):
 *     .cl-userButtonPopoverCustomItemButton       → button row
 *     .cl-userButtonPopoverCustomItemButtonIconBox → icon <span>
 *     .cl-userButtonPopoverActionItemButtonIcon   → inner icon <div> (note: "Action" prefix, not "Custom")
 */

/* Register the Clerk layer name. Unlayered rules (everything below) automatically
   outrank any @layer clerk { … } blocks injected by the Clerk JS SDK at runtime. */
@layer clerk;

/* ─────────────────────────────────────────────────────────────────────────────
   HIDE "Secured by Clerk" BRANDING — ALL LOCATIONS
   Clerk renders the badge in multiple places using only cl-internal-* classes,
   so we must use attribute/content selectors to target them reliably.
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. Stable cl-footer class (modal bottom, sidebar bottom) */
.cl-footer {
    display: none !important;
}

/* 2. Stable cl-userButtonPopoverFooter (popover) */
.cl-userButtonPopoverFooter,
[class*="cl-userButtonPopoverFooter"],
.cl-userButton__footer {
    display: none !important;
}

/* 3. Target the Clerk branding link by its href — this is the most reliable
      cross-version selector since the URL is stable even if class names change */
a[href*="go.clerk.com"],
a[href*="clerk.com/components"] {
    display: none !important;
}

/* 4. Hide the "Secured by" text node's parent paragraph when it's next to
      or parent of a Clerk branding link */
p:has(+ a[href*="go.clerk.com"]),
p:has(+ a[href*="clerk.com"]) {
    display: none !important;
}

/* 5. Hide any internal div that directly contains the Clerk link */
div:has(> p + a[href*="go.clerk.com"]),
div:has(> a[href*="go.clerk.com"]) {
    display: none !important;
}

/* 6. Legacy/fallback: internal class segments known to wrap the badge */
[class*="cl-internal-"][class*="footer"],
[class*="SecuredBy"],
[class*="secured"],
[class*="branding"] {
    display: none !important;
}

/* Prevent the above broad rule from hiding real content — re-scope to known
   badge containers only (inside popover card and modal navbar sidebar) */
.cl-userButtonPopoverCard [class*="cl-internal-"][class*="footer"],
.cl-navbar [class*="cl-internal-"][class*="footer"],
.cl-modalContent [class*="cl-internal-"][class*="footer"] {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL POPOVER CARD  (shared by header and sidebar UserButton)
   ───────────────────────────────────────────────────────────────────────────── */
.cl-userButtonPopoverCard {
    background-color: var(--card-bg, #ffffff) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    min-width: 240px !important;
    z-index: 9999 !important;
}

body.dark-mode .cl-userButtonPopoverCard {
    background-color: var(--card-bg, #2c2c2c) !important;
    border-color: var(--border-color, #3a3a3a) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   USER PREVIEW (name + identifier at top of popover)
   Confirmed stable class names from DevTools:
     .cl-userPreview                    → outer row
     .cl-avatarBox / .cl-userPreviewAvatarBox → avatar container (ring)
     .cl-avatarImage                    → <img>
     .cl-userPreviewTextContainer       → text column
     .cl-userPreviewMainIdentifier      → name row
     .cl-userPreviewMainIdentifierText  → name text (inner <span>)
     .cl-userPreviewSecondaryIdentifier → username / email line
   ───────────────────────────────────────────────────────────────────────────── */
.cl-userPreview {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    /* Background uses the user's chosen theme accent color — auto-updates with theme */
    background-color: var(--accent-color, #ff5151) !important;
    /* No border-bottom needed — the solid background acts as a visual divider */
    border-bottom: none !important;
    /* Slight gradient overlay to add depth without hardcoding a second color */
    background-image: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
    border-radius: 0 !important;
}

/* Avatar container — white outline ring so it pops against the colored bg */
.cl-avatarBox,
.cl-userPreviewAvatarBox {
    border-radius: 50% !important;
    outline: 2px solid rgba(255, 255, 255, 0.6) !important;
    outline-offset: 2px !important;
    flex-shrink: 0 !important;
}

/* Avatar image */
.cl-avatarImage,
.cl-userPreviewAvatarImage {
    border-radius: 50% !important;
    display: block !important;
}

/* Text column */
.cl-userPreviewTextContainer {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

/* Name row — white text on the colored background */
.cl-userPreviewMainIdentifier {
    font-family: var(--font-display, 'Poppins', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    /* Always white — accent bg provides sufficient contrast in all theme colors */
    color: #ffffff !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Name inner text span inherits */
.cl-userPreviewMainIdentifierText {
    font-family: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Username / email — slightly translucent white on colored bg */
.cl-userPreviewSecondaryIdentifier {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   POPOVER ACTION BUTTONS  (built-in: Manage account, Sign out)
   Confirmed stable classes from DevTools inspection.
   ───────────────────────────────────────────────────────────────────────────── */
.cl-userButtonPopoverActions {
    padding: 6px 0 !important;
}

/* Built-in item button rows */
.cl-userButtonPopoverActionButton {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 9px 16px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    /* Set color on the button so text nodes (direct children) inherit it */
    color: var(--text-headings, #1a1a2e) !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

body.dark-mode .cl-userButtonPopoverActionButton {
    color: var(--text-headings, #ffffff) !important;
}

.cl-userButtonPopoverActionButton:hover {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.08) !important;
}

body.dark-mode .cl-userButtonPopoverActionButton:hover {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.14) !important;
}

/* Icon box <span> inside built-in items */
.cl-userButtonPopoverActionButtonIconBox {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: var(--text-muted, #6c757d) !important;
}

body.dark-mode .cl-userButtonPopoverActionButtonIconBox {
    color: var(--text-muted, #a0a0b0) !important;
}

/* SVG icon inside built-in items */
.cl-userButtonPopoverActionButtonIcon {
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
    flex-shrink: 0 !important;
}

/* Sign out — muted text until hover */
.cl-userButtonPopoverActionButton__signOut {
    color: var(--text-muted, #6c757d) !important;
}

body.dark-mode .cl-userButtonPopoverActionButton__signOut {
    color: var(--text-muted, #a0a0b0) !important;
}

.cl-userButtonPopoverActionButton__signOut:hover {
    color: #dc2626 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CUSTOM MENU ITEMS  (Settings + Billing — added via customMenuItems config)

   Confirmed stable class names from DevTools (classes before the 🔒 icon):
     Button:      .cl-userButtonPopoverCustomItemButton
     Icon span:   .cl-userButtonPopoverCustomItemButtonIconBox
     Icon div:    .cl-userButtonPopoverActionItemButtonIcon  (note: "Action" prefix)
     FA icon <i>: inside .cl-userButtonPopoverActionItemButtonIcon

   The label text "Settings" / "Billing" is a direct text node child of the button,
   so it inherits the button's color property — no separate text class needed.
   ───────────────────────────────────────────────────────────────────────────── */

/* Custom item button row */
.cl-userButtonPopoverCustomItemButton {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 9px 16px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    /* Full primary text color — Clerk defaults these to colorTextSecondary (muted) */
    color: var(--text-headings, #1a1a2e) !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

body.dark-mode .cl-userButtonPopoverCustomItemButton {
    color: var(--text-headings, #ffffff) !important;
}

.cl-userButtonPopoverCustomItemButton:hover {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.08) !important;
}

body.dark-mode .cl-userButtonPopoverCustomItemButton:hover {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.14) !important;
}

/* Icon <span> wrapping the inner div in custom items */
.cl-userButtonPopoverCustomItemButtonIconBox {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: var(--text-muted, #6c757d) !important;
}

body.dark-mode .cl-userButtonPopoverCustomItemButtonIconBox {
    color: var(--text-muted, #a0a0b0) !important;
}

/* The inner icon <div> added by Clerk wrapping our mountIcon content */
.cl-userButtonPopoverActionItemButtonIcon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    color: inherit !important;
}

/* FA icon <i> injected via mountIcon() callback */
.cl-userButtonPopoverActionItemButtonIcon i {
    color: var(--text-muted, #6c757d) !important;
    font-size: 14px !important;
}

body.dark-mode .cl-userButtonPopoverActionItemButtonIcon i {
    color: var(--text-muted, #a0a0b0) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER: UserButton trigger chip
   ───────────────────────────────────────────────────────────────────────────── */
.clerk-user-button-wrapper {
    display: flex;
    align-items: center;
}

.clerk-user-button-wrapper .cl-userButtonTrigger {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 10px 4px 4px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    color: var(--text-headings) !important;
    height: 38px !important;
}

.clerk-user-button-wrapper .cl-userButtonTrigger:hover {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.08) !important;
    border-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.2) !important;
}

body.dark-mode .clerk-user-button-wrapper .cl-userButtonTrigger {
    color: var(--text-headings, #ffffff) !important;
}

.clerk-user-button-wrapper .cl-userButtonAvatarBox {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR: UserButton trigger (full-width row)
   ───────────────────────────────────────────────────────────────────────────── */
.clerk-sidebar-user-wrapper {
    width: 100%;
}

.clerk-sidebar-user-wrapper .cl-userButtonTrigger {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: var(--radius-md, 8px) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    color: var(--text-headings) !important;
    text-align: left !important;
    min-height: 44px !important;
}

.clerk-sidebar-user-wrapper .cl-userButtonTrigger:hover {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.10) !important;
}

body.dark-mode .clerk-sidebar-user-wrapper .cl-userButtonTrigger {
    color: var(--text-headings, #ffffff) !important;
}

body.dark-mode .clerk-sidebar-user-wrapper .cl-userButtonTrigger:hover {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.15) !important;
}

.clerk-sidebar-user-wrapper .cl-userButtonAvatarBox {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* In collapsed (form-builder-mode) sidebar, only the avatar shows */
.form-builder-mode .clerk-sidebar-user-wrapper .cl-userButtonTrigger {
    justify-content: center !important;
    padding: 8px !important;
}

/* Sidebar popover — ensure it doesn't clip under the sidebar */
.clerk-sidebar-user-wrapper .cl-userButtonPopoverCard {
    left: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EMBEDDED UserProfile (Settings → Account & Security tab)
   ───────────────────────────────────────────────────────────────────────────── */

#clerk-user-profile-embed {
    width: 100%;
}

#clerk-user-profile-embed .cl-rootBox,
#clerk-user-profile-embed .cl-profilePage {
    width: 100% !important;
    box-shadow: none !important;
}

#clerk-user-profile-embed .cl-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Active nav item override for embedded UserProfile (already styled globally above) */
#clerk-user-profile-embed .cl-navbarButton.cl-active,
#clerk-user-profile-embed .cl-navbarButton[data-active="true"] {
    color: var(--accent-color) !important;
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.10) !important;
}

/* Embedded profile uses a transparent navbar bg (no sidebar fill needed) */
#clerk-user-profile-embed .cl-navbar {
    background-color: transparent !important;
    border-right: 1px solid var(--border-color, #e5e7eb) !important;
}

body.dark-mode #clerk-user-profile-embed .cl-navbar {
    border-right-color: var(--border-color, #3a3a3a) !important;
}

/* Section headers inside embedded UserProfile */
#clerk-user-profile-embed .cl-profileSectionTitleText {
    color: var(--text-muted, #6c757d) !important;
}

body.dark-mode #clerk-user-profile-embed .cl-profileSectionTitleText {
    color: var(--text-muted, #a0a0b0) !important;
}

/* Body text inside embedded UserProfile */
#clerk-user-profile-embed .cl-headerSubtitle,
#clerk-user-profile-embed .cl-formFieldHintText {
    font-family: var(--font-body) !important;
    color: var(--text-muted, #6c757d) !important;
}

body.dark-mode #clerk-user-profile-embed .cl-headerSubtitle,
body.dark-mode #clerk-user-profile-embed .cl-formFieldHintText {
    color: var(--text-muted, #a0a0b0) !important;
}

/* Labels */
#clerk-user-profile-embed .cl-formFieldLabel {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--text-headings, #1a1a2e) !important;
}

body.dark-mode #clerk-user-profile-embed .cl-formFieldLabel {
    color: var(--text-headings, #ffffff) !important;
}

/* Inputs */
#clerk-user-profile-embed .cl-formFieldInput {
    border: 1px solid var(--border-color, #cccccc) !important;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.9rem !important;
    font-family: var(--font-body) !important;
    border-radius: var(--radius-sm, 6px) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    color: var(--text-headings, #1a1a2e) !important;
    background-color: #fff !important;
}

#clerk-user-profile-embed .cl-formFieldInput:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 255, 81, 81), 0.2) !important;
    outline: none !important;
}

body.dark-mode #clerk-user-profile-embed .cl-formFieldInput {
    border-color: var(--border-color, #3a3a3a) !important;
    background-color: #1e1e1e !important;
    color: var(--text-headings, #ffffff) !important;
}

/* Primary buttons inside UserProfile */
#clerk-user-profile-embed .cl-formButtonPrimary {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    background-color: var(--accent-color) !important;
    border-radius: var(--radius-sm, 6px) !important;
    font-size: 0.875rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
    color: #fff !important;
}

#clerk-user-profile-embed .cl-formButtonPrimary:hover {
    background-color: var(--accent-color-dark, #cc4040) !important;
    color: #fff !important;
}

/* Reset / secondary */
#clerk-user-profile-embed .cl-formButtonReset {
    color: var(--accent-color) !important;
    font-family: var(--font-body) !important;
}

/* Badge pills */
#clerk-user-profile-embed .cl-badge {
    font-family: var(--font-body) !important;
    font-size: 0.7rem !important;
    border-radius: 4px !important;
}

/* Hide "Secured by Clerk" inside embedded UserProfile */
#clerk-user-profile-embed .cl-userButtonPopoverFooter,
#clerk-user-profile-embed [class*="cl-internal-"][class*="footer"],
#clerk-user-profile-embed [class*="SecuredBy"],
#clerk-user-profile-embed [class*="branding"] {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MANAGE ACCOUNT MODAL + USER PROFILE LAYOUT
   theme: 'simple' strips Clerk's internal layout CSS, so we must restore the
   flex layout for the modal card, left navbar sidebar, and right content area.

   Stable class names confirmed from DevTools inspection (before the 🔒 icon):
     .cl-modalBackdrop          → semi-opaque overlay
     .cl-modalContent           → the white/dark modal card
     .cl-cardBox                → flex row: navbar (left) + scrollBox (right)
     .cl-modalCloseButton       → × close button (top-right)
     .cl-navbar                 → left sidebar (title + nav tabs)
     .cl-navbarButtons          → column of nav tab buttons
     .cl-navbarButton           → individual nav tab
     .cl-navbarButtonIcon       → SVG icon inside nav tab
     .cl-navbarButtonText       → label text inside nav tab
     .cl-navbarMobileMenuRow    → mobile hamburger row (hidden on desktop)
     .cl-scrollBox              → right content scroll wrapper
     .cl-pageScrollBox          → inner scrollable area
     .cl-page                   → page container
     .cl-profilePage            → profile page content
     .cl-profileSection         → each section — DOM order: content THEN header,
                                  so flex-direction:column-reverse shows header above content
     .cl-profileSectionHeader   → section title wrapper
     .cl-profileSectionContent  → section content wrapper
     .cl-profileSectionItem     → individual item row
     .cl-profileSectionPrimaryButton → ghost action button (Update profile, etc.)
     .cl-headerTitle            → page heading ("Profile details")
     .cl-badge                  → pill badge ("Primary")
     .cl-footer                 → "Secured by Clerk" footer (hidden)
   ───────────────────────────────────────────────────────────────────────────── */

/* Backdrop */
.cl-modalBackdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .cl-modalBackdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Modal card — two-column layout container */
.cl-modalContent {
    background-color: var(--card-bg, #ffffff) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: 12px !important;
    width: min(900px, 92vw) !important;
    min-height: 500px !important;
    max-height: 88vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body.dark-mode .cl-modalContent {
    background-color: var(--card-bg, #2c2c2c) !important;
    border-color: var(--border-color, #3a3a3a) !important;
}

/* Root box — fill modal height */
.cl-userProfile-root {
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Card box — side-by-side: navbar + scrollBox */
.cl-cardBox {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 500px !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Close × button */
.cl-modalCloseButton {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 6px !important;
    color: var(--text-muted, #6c757d) !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.cl-modalCloseButton:hover {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.08) !important;
    color: var(--text-headings, #1a1a2e) !important;
}

body.dark-mode .cl-modalCloseButton {
    color: var(--text-muted, #a0a0b0) !important;
}

body.dark-mode .cl-modalCloseButton:hover {
    color: var(--text-headings, #ffffff) !important;
}

/* ── Left sidebar ── */
.cl-navbar {
    width: 220px !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 12px !important;
    border-right: 1px solid var(--border-color, #e5e7eb) !important;
    background-color: var(--bg-secondary, #f8f9fa) !important;
    overflow-y: auto !important;
}

body.dark-mode .cl-navbar {
    border-right-color: var(--border-color, #3a3a3a) !important;
    background-color: var(--bg-secondary, #252526) !important;
}

/* Sidebar title and description */
.cl-navbar h1 {
    font-family: var(--font-display, 'Poppins', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-headings, #1a1a2e) !important;
    margin: 0 0 4px !important;
}

body.dark-mode .cl-navbar h1 {
    color: var(--text-headings, #ffffff) !important;
}

.cl-navbar p {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.8rem !important;
    color: var(--text-muted, #6c757d) !important;
    margin: 0 0 16px !important;
    line-height: 1.4 !important;
}

body.dark-mode .cl-navbar p {
    color: var(--text-muted, #a0a0b0) !important;
}

/* Nav buttons column */
.cl-navbarButtons {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
}

/* Individual nav tab */
.cl-navbarButton {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--text-muted, #6c757d) !important;
    text-align: left !important;
}

body.dark-mode .cl-navbarButton {
    color: var(--text-muted, #a0a0b0) !important;
}

.cl-navbarButton:hover {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.08) !important;
    color: var(--text-headings, #1a1a2e) !important;
}

body.dark-mode .cl-navbarButton:hover {
    color: var(--text-headings, #ffffff) !important;
}

/* Active tab */
.cl-navbarButton.cl-active,
.cl-navbarButton[data-active="true"] {
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.10) !important;
    color: var(--accent-color, #ff5151) !important;
    font-weight: 600 !important;
}

.cl-navbarButtonIcon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    color: inherit !important;
}

.cl-navbarButtonText {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.875rem !important;
    color: inherit !important;
}

/* Mobile hamburger — hide on desktop */
.cl-navbarMobileMenuRow {
    display: none !important;
}

/* ── Right content area ── */
.cl-scrollBox {
    flex: 1 !important;
    overflow-y: auto !important;
    min-width: 0 !important;
}

.cl-pageScrollBox {
    padding: 24px 28px !important;
}

.cl-page {
    width: 100% !important;
    max-width: 640px !important;
}

/* Page heading ("Profile details") */
.cl-headerTitle {
    font-family: var(--font-display, 'Poppins', sans-serif) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--text-headings, #1a1a2e) !important;
    margin-bottom: 20px !important;
}

body.dark-mode .cl-headerTitle {
    color: var(--text-headings, #ffffff) !important;
}

/* ── Profile sections ──
   DOM order is: .cl-profileSectionContent THEN .cl-profileSectionHeader
   flex-direction: column-reverse puts the title visually ABOVE the content */
.cl-profileSection {
    display: flex !important;
    flex-direction: column-reverse !important;
    margin-bottom: 28px !important;
    padding-bottom: 28px !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
}

.cl-profileSection:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.dark-mode .cl-profileSection {
    border-bottom-color: var(--border-color, #3a3a3a) !important;
}

/* Section title label */
.cl-profileSectionTitleText {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--text-muted, #6c757d) !important;
    margin: 0 0 8px !important;
}

body.dark-mode .cl-profileSectionTitleText {
    color: var(--text-muted, #a0a0b0) !important;
}

/* Section content */
.cl-profileSectionContent {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* Section item row */
.cl-profileSectionItem {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 36px !important;
}

/* Text inside section items */
.cl-profileSectionItem p {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.875rem !important;
    color: var(--text-headings, #1a1a2e) !important;
    margin: 0 !important;
}

body.dark-mode .cl-profileSectionItem p {
    color: var(--text-headings, #ffffff) !important;
}

/* Ghost action buttons (Update profile, Update username, Add email, Switch plans, etc.)
   Structure (internal spans can only be targeted via direct child / descendant selectors):
     <button.cl-profileSectionPrimaryButton>
       <span>  ← leading icon (+ or ↕ SVG)
       <span>  ← label text
       [<svg>] ← trailing arrow (→) present on some variants
     </button>
*/
.cl-profileSectionPrimaryButton {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--accent-color, #ff5151) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px 0 !important;
    transition: opacity 0.15s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.cl-profileSectionPrimaryButton:hover {
    opacity: 0.75 !important;
}

/* Leading icon span — contains the + or ↕ SVG */
.cl-profileSectionPrimaryButton > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
}

/* Leading icon SVG size */
.cl-profileSectionPrimaryButton > span:first-child svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    color: var(--accent-color, #ff5151) !important;
}

/* Label text span */
.cl-profileSectionPrimaryButton > span:not(:first-child) {
    display: inline-flex !important;
    align-items: center !important;
    /* Inherit button color / font */
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Inner text <span> inside the label span */
.cl-profileSectionPrimaryButton > span:not(:first-child) span {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Trailing arrow SVG (→ on "Add email address", "Add payment method") */
.cl-profileSectionPrimaryButton > svg:last-child {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    color: var(--accent-color, #ff5151) !important;
    margin-left: 2px !important;
    transition: transform 0.15s ease !important;
}

.cl-profileSectionPrimaryButton:hover > svg:last-child {
    transform: translateX(2px) !important;
}

/* Pill badges ("Primary", etc.) */
.cl-badge {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background-color: rgba(var(--accent-color-rgb, 255, 81, 81), 0.12) !important;
    color: var(--accent-color, #ff5151) !important;
}

/* Secured by Clerk footer — completely hidden */
.cl-footer {
    display: none !important;
}