/*! ═══════════════════════════════════════════════════════════
 *  POOOL CSS Bundle (auto-generated — do not edit by hand)
 *  Generated by: build-bundle.sh
 *  Contains: design system tokens, DS components, and common styles
 *  ═══════════════════════════════════════════════════════════ */


/* ── fonts.css ────────────────────────────────── */

/* TT Norms Pro — sole font for the entire POOOL platform */

@font-face {
    font-family: 'TT Norms Pro';
    src: url('/static/design-system/fonts/TT_Norms_Pro_Regular.woff2') format('woff2'),
         url('/static/design-system/fonts/TT_Norms_Pro_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('/static/design-system/fonts/TT_Norms_Pro_Medium.woff2') format('woff2'),
         url('/static/design-system/fonts/TT_Norms_Pro_Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('/static/design-system/fonts/TT_Norms_Pro_Bold.woff2') format('woff2'),
         url('/static/design-system/fonts/TT_Norms_Pro_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('/static/design-system/fonts/TT_Norms_Pro_ExtraBold.woff2') format('woff2'),
         url('/static/design-system/fonts/TT_Norms_Pro_ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Universal font reset — applies TT Norms Pro to every element */
*, *::before, *::after {
    font-family: 'TT Norms Pro', sans-serif;
    font-synthesis: none;
}

html, body {
    font-family: 'TT Norms Pro', sans-serif;
}

/* Form elements need explicit override (browsers use system font by default) */
input, button, select, textarea, optgroup, option {
    font-family: 'TT Norms Pro', sans-serif;
}


/* ── dashboard-tokens.css ────────────────────────────────── */

/* ================================================================
   POOOL Dashboard Design System — Global Tokens
   ================================================================
   This file defines ALL design tokens for the dashboard layout.
   Every dashboard page MUST reference these tokens.
   NO hardcoded pixel values for spacing or typography are allowed.
   ================================================================ */

:root {
    /* ── 0. Type Scale (primitive font-size + weight tokens) ──────────
       Single source of truth for typography. Use these instead of raw
       px values so the app has ONE consistent scale (collapses the many
       1px-apart near-duplicates like 13/15/17 into canonical steps).
       Base: 1rem = 16px. */
    --fs-2xs: 0.6875rem; /* 11px — micro labels, badges */
    --fs-xs:  0.75rem;   /* 12px — captions, meta */
    --fs-sm:  0.875rem;  /* 14px — secondary text, labels, table cells */
    --fs-md:  1rem;      /* 16px — body, inputs, buttons */
    --fs-lg:  1.125rem;  /* 18px — emphasized body, card titles */
    --fs-xl:  1.25rem;   /* 20px — small headings */
    --fs-2xl: 1.5rem;    /* 24px — section titles */
    --fs-3xl: 1.75rem;   /* 28px — large section titles */
    --fs-4xl: 2rem;      /* 32px — page titles */
    --fs-5xl: 2.5rem;    /* 40px — hero / big values */
    --fs-6xl: 3rem;      /* 48px — display */
    --fs-7xl: 4rem;      /* 64px — large display / marketing hero */

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-bold:    700;

    /* ── 1. Page-Level Layout ─────────────────────────────────────── */
    --sidebar-width: 256px;
    --content-bg: #FAFAFA;
    --page-padding-top: 48px;
    --page-padding-bottom: 48px;
    --page-padding-x: 32px;
    --page-max-width: 1200px;

    /* ── 2. KYC / Notification Banner ─────────────────────────────── */
    --banner-padding-y: 12px;
    --banner-padding-x: 16px;
    --banner-margin-bottom: 24px;
    --banner-bg: #EEF4FF;
    --banner-border-radius: 12px;

    /* ── 3. Page Title ────────────────────────────────────────────── */
    --page-title-icon-size: 28px;
    --page-title-icon-gap: 12px;
    --page-title-font-size: 2.25rem;
    --page-title-font-weight: 700;
    --page-title-color: #181D27;
    --page-title-line-height: 1.2;
    --page-title-margin-bottom: 24px;

    /* ── 4. Subtitle / Description ────────────────────────────────── */
    --page-subtitle-font-size: 0.9375rem;
    --page-subtitle-font-weight: 400;
    --page-subtitle-color: #475467;
    --page-subtitle-gap: 8px;
    --subtitle-to-content-gap: 24px;

    /* ── 5. Navigation Tabs ───────────────────────────────────────── */
    --tabs-margin-bottom: 24px;
    --tab-font-size: 0.9375rem;
    --tab-font-weight-active: 700;
    --tab-font-weight-inactive: 400;
    --tab-color-active: #1B2559;
    --tab-color-inactive: #667085;
    --tab-indicator-color: #1B2559;
    --tab-gap: 32px;

    /* ── 6. Section & Card Spacing ────────────────────────────────── */
    --section-gap: 24px;
    --card-padding: 24px;
    --card-border-radius: 12px;
    --card-border-color: #E5E7EB;
    --card-bg: #FFFFFF;
    --card-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    --card-gap-horizontal: 24px;

    /* ── 7. Section Titles (H2) ───────────────────────────────────── */
    --section-title-font-size: 1.25rem;
    --section-title-font-weight: 700;
    --section-title-color: #101828;
    --section-title-margin-bottom: 16px;

    /* ── 8. Breadcrumbs ───────────────────────────────────────────── */
    --breadcrumb-font-size: 0.875rem;
    --breadcrumb-color: #475467;
    --breadcrumb-active-color: #1B2559;
    --breadcrumb-margin-bottom: 12px;

    /* ── 9. Global Typography ─────────────────────────────────────── */
    --font-family: 'TT Norms Pro', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --body-font-size: 0.875rem;
    --body-color: #344054;
    --label-font-size: 0.875rem;
    --label-color: #475467;
    --value-font-size: 2.25rem;
    --value-font-weight: 700;
    --value-color: #101828;

    /* ── 10. Header Action Buttons ────────────────────────────────── */
    --header-action-height: 40px;
    --header-action-font-size: 0.875rem;
    --header-action-border-radius: 8px;

    /* ── 11. Button System ────────────────────────────────────────── */
    --btn-font-weight: 700;
    --btn-border-radius: 8px;
    --btn-transition: all 0.15s ease;
    --btn-icon-gap: 8px;

    /* Sizes: Small */
    --btn-sm-height: 32px;
    --btn-sm-padding: 6px 12px;
    --btn-sm-font-size: 0.8125rem;
    /* Sizes: Medium (default) */
    --btn-md-height: 40px;
    --btn-md-padding: 10px 18px;
    --btn-md-font-size: 0.875rem;
    /* Sizes: Large */
    --btn-lg-height: 48px;
    --btn-lg-padding: 12px 24px;
    --btn-lg-font-size: 1rem;

    /* Primary (electric blue bg, green text) */
    --btn-primary-bg: #0000FF;
    --btn-primary-color: #98FB96;
    --btn-primary-hover-bg: #0000CC;
    --btn-primary-active-bg: #0000AA;
    /* Secondary (green bg, blue text) */
    --btn-secondary-bg: #98FB96;
    --btn-secondary-color: #0000FF;
    --btn-secondary-border: transparent;
    --btn-secondary-hover-bg: #7BE079;
    --btn-secondary-active-bg: #60C85E;
    /* Danger (red filled) */
    --btn-danger-bg: #D92D20;
    --btn-danger-color: #FFFFFF;
    --btn-danger-hover-bg: #B42318;
    --btn-danger-active-bg: #912018;
    /* Ghost (text-only) */
    --btn-ghost-bg: transparent;
    --btn-ghost-color: #475467;
    --btn-ghost-hover-bg: #F2F4F7;
    --btn-ghost-active-bg: #E4E7EC;

    /* ── 12. Card System ──────────────────────────────────────────── */
    /* (tokens already exist in section 6 — kept for reference) */

    /* ── 13. Badge / Status System ────────────────────────────────── */
    --badge-font-size: 0.75rem;
    --badge-font-weight: 500;
    --badge-padding: 2px 8px;
    --badge-border-radius: 16px;
    --badge-success-bg: #ECFDF3;
    --badge-success-color: #027A48;
    --badge-warning-bg: #FFFAEB;
    --badge-warning-color: #B54708;
    --badge-danger-bg: #FEF3F2;
    --badge-danger-color: #B42318;
    --badge-info-bg: #EEF4FF;
    --badge-info-color: #1B2559;
    --badge-neutral-bg: #F2F4F7;
    --badge-neutral-color: #344054;

    /* Property-type badge variants */
    --badge-leasehold-bg: #EEF4FF;
    --badge-leasehold-border: #C7D7FE;
    --badge-leasehold-color: #3538CD;
    --badge-freehold-bg: #FEF6EE;
    --badge-freehold-border: #F9DBAF;
    --badge-freehold-color: #B54708;
    --badge-commercial-bg: #D5D9EB;
    --badge-commercial-border: #3E4784;
    --badge-commercial-color: #3E4784;
    --badge-commodity-bg: #F0F4FF;
    --badge-commodity-border: #C7D7FE;
    --badge-commodity-color: #3538CD;
    --badge-funding-bg: rgba(3, 255, 136, 0.15);
    --badge-funding-border: rgba(3, 255, 136, 0.4);
    --badge-funding-color: #027A48;

    /* ── 14. Form Inputs ──────────────────────────────────────────── */
    --input-height: 44px;
    --input-padding: 10px 14px;
    --input-font-size: 1rem; /* 16px — verhindert iOS-Safari Auto-Zoom (Audit, Mobile P1) */
    --input-font-weight: var(--fw-regular, 400); /* Eingabewert in Regular — bewusst eine Stufe leichter als die 500er-Labels */
    --input-border-radius: 8px;
    --input-border-color: #D0D5DD;
    --input-border-focus: #0000FF;
    --input-bg: #FFFFFF;
    --input-placeholder-color: #667085;
    --input-text-color: #101828;
    --radio-selected-bg: #0000FF;
    --radio-selected-border: #0000FF;
    --radio-selected-dot-color: #03FF88;
    --checkbox-selected-bg: #0000FF;
    --checkbox-selected-border: #0000FF;
    --checkbox-selected-check-color: #03FF88;

    /* ── 15. Table System ────────────────────────────────────────── */
    --table-header-bg: #FAFAFA;
    --table-header-font-size: 0.75rem;
    --table-header-font-weight: 700;
    --table-header-color: #717680;
    --table-header-height: 44px;
    --table-header-padding: 12px 24px;
    --table-cell-padding: 16px 24px;
    --table-cell-font-size: 0.875rem;
    --table-cell-color: #535862;
    --table-border-color: #E9EAEB;
    --table-row-hover-bg: #F8F9FC;

    /* ── 16. Progress Bar System ──────────────────────────────────── */
    --progress-track-bg: #D5D7DA;
    --progress-fill-bg: rgb(152, 251, 150);       /* Brand green */
    --progress-border-radius: 30px;
    /* Sizes */
    --progress-sm-height: 6px;
    --progress-md-height: 8px;
    --progress-lg-height: 12px;

    /* ── 17. Semantic Token Aliases — Design System Bridge ────────────
       These are the canonical semantic names used in Claude Design /
       colors_and_type.css. They alias the primitive values above so
       any CSS written in Claude Design works in production without
       needing a separate token-mapping step.
       Rule: when adding tokens here, ALSO add them to the Claude Design
       project's colors_and_type.css so both systems stay in sync.
       ──────────────────────────────────────────────────────────────── */

    /* Brand palette */
    --brand-blue:          #0000FF;
    --brand-blue-hover:    #0000CC;
    --brand-blue-active:   #0000AA;
    --brand-dark-blue:     #001DCA;   /* wordmark tint */
    --brand-navy:          #1B2559;   /* tab indicator, deep headings */
    --brand-green-mint:    #98FB96;   /* secondary button fill / button text */
    --brand-green-neon:    #03FF88;   /* checks, active dots, accents */

    /* Foreground / text */
    --fg-heading-1:  #181D27;         /* largest headings, hero */
    --fg-heading-2:  #101828;         /* section/card headings */
    --fg-body:       #344054;         /* body text */
    --fg-secondary:  #475467;         /* secondary labels, subtitles */
    --fg-muted:      #667085;         /* placeholders, meta */
    --fg-muted-2:    #717680;         /* table headers, overlines */

    /* Background / surface */
    --bg-page:       #FAFAFA;         /* page background */
    --bg-surface:    #FFFFFF;         /* card / panel backgrounds */
    --bg-subtle:     #F9FAFB;         /* zebra rows, hovered cells */
    --bg-hover:      #F2F4F7;         /* ghost button hover, row hover */

    /* Borders */
    --border:        #E5E7EB;         /* card borders, dividers */
    --border-soft:   #F2F4F7;         /* light internal dividers */
    --border-strong: #D0D5DD;         /* input borders, outline buttons */

    /* Radii */
    --radius-sm:     4px;
    --radius-input:  8px;             /* buttons, inputs */
    --radius-card:   12px;            /* standard cards */
    --radius-card-lg:16px;            /* property/marketing cards */
    --radius-bar:    30px;            /* progress tracks, pills */

    /* Elevation */
    --shadow-card:     0px 1px 2px rgba(10, 13, 18, 0.05);
    --shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-lifted:   0 16px 48px rgba(0, 0, 0, 0.08);

    /* Motion */
    --dur-fast:    0.1s;
    --dur-base:    0.15s;
    --dur-slow:    0.3s;
    --dur-page:    0.6s;
    --ease-out:    ease;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Status colours (semantic aliases for the badge system above) */
    --success-bg:  #ECFDF3;
    --success-fg:  #027A48;
    --warning-bg:  #FFFAEB;
    --warning-fg:  #B54708;
    --danger-bg:   #FEF3F2;
    --danger-fg:   #B42318;
    --info-bg:     #EEF4FF;
    --info-fg:     #1B2559;
    --neutral-bg:  #F2F4F7;
    --neutral-fg:  #344054;
    /* Overlays / dark surfaces (tooltips, dark modals) */
    --bg-overlay:      #101828;
    --bg-overlay-fg:   #FFFFFF;
    /* Warning border (used in inline status banners) */
    --warning-border:  #FEC84B;
}


/* ================================================================
   Dashboard Content Layout — Standard Wrapper
   ================================================================
   Every page's <main> area uses this class. It creates a flex column
   that spaces children correctly. When a banner is hidden, the gap
   collapses naturally — no phantom whitespace.
   ================================================================ */

.dashboard-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh; min-height: 100dvh;
    padding: var(--page-padding-top) var(--page-padding-x) var(--page-padding-bottom);
    background: var(--content-bg);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


/* ================================================================
   Page Banner (KYC / Notification)
   ================================================================ */

.page-banner {
    display: none;
    /* Hidden by default — JS reveals when needed */
    padding: var(--banner-padding-y) var(--banner-padding-x);
    background: var(--banner-bg);
    border-radius: var(--banner-border-radius);
    margin-bottom: var(--banner-margin-bottom);
    align-items: center;
    gap: 12px;
}

.page-banner.visible {
    display: flex;
}


/* ================================================================
   Page Header (Icon + Title + optional actions)
   ================================================================ */

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

.page-header-left {
    display: flex;
    align-items: center;
    gap: var(--page-title-icon-gap);
}

.page-header-icon {
    width: var(--page-title-icon-size);
    height: var(--page-title-icon-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header-icon svg {
    width: 100%;
    height: 100%;
}

.page-title {
    font-family: var(--font-family);
    font-size: var(--page-title-font-size);
    font-weight: var(--page-title-font-weight);
    color: var(--page-title-color);
    line-height: var(--page-title-line-height);
    letter-spacing: -0.02em;
    margin: 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ================================================================
   Page Subtitle
   ================================================================ */

.page-subtitle {
    font-family: var(--font-family);
    font-size: var(--page-subtitle-font-size);
    font-weight: var(--page-subtitle-font-weight);
    color: var(--page-subtitle-color);
    margin: calc(-1 * var(--page-title-margin-bottom) + var(--page-subtitle-gap)) 0 var(--subtitle-to-content-gap);
    line-height: 1.5;
}


/* ================================================================
   Navigation Tabs
   ================================================================ */

.page-tabs {
    display: flex;
    align-items: center;
    gap: var(--tab-gap);
    border-bottom: 1px solid var(--card-border-color);
    margin-top: calc(-1 * var(--page-title-margin-bottom) + var(--page-subtitle-gap));
    margin-bottom: var(--tabs-margin-bottom);
    padding-bottom: 0;
}

.page-tabs .tab {
    font-family: var(--font-family);
    font-size: var(--tab-font-size);
    font-weight: var(--tab-font-weight-inactive);
    color: var(--tab-color-inactive);
    text-decoration: none;
    padding-bottom: 12px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.page-tabs .tab:hover {
    color: var(--tab-color-active);
}

.page-tabs .tab.active {
    font-weight: var(--tab-font-weight-active);
    color: var(--tab-color-active);
    border-bottom-color: var(--tab-indicator-color);
}


/* ================================================================
   Page Body (Content Sections)
   ================================================================ */

.page-body {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

.page-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--section-gap);
}


/* ================================================================
   Breadcrumbs
   ================================================================ */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--breadcrumb-margin-bottom);
    font-size: var(--breadcrumb-font-size);
    color: var(--breadcrumb-color);
}

.breadcrumbs a {
    color: var(--breadcrumb-color);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--breadcrumb-active-color);
}

.breadcrumbs .current {
    color: var(--breadcrumb-active-color);
    font-weight: 700;
}


/* ================================================================
   Section Titles (H2 inside cards)
   ================================================================ */

.section-title-std {
    font-family: var(--font-family);
    font-size: var(--section-title-font-size);
    font-weight: var(--section-title-font-weight);
    color: var(--section-title-color);
    margin: 0 0 var(--section-title-margin-bottom);
    line-height: 1.3;
}


/* ================================================================
   11. UNIVERSAL PAGE TITLE STANDARDIZATION
   ================================================================
   Every page currently uses its own class for H1 titles.
   These rules enforce a single, unified style across ALL pages
   without touching the HTML.
   ================================================================ */

.portfolio-page-title,
.wallet-page-title,
.rewards-title,
.support-page-title,
.settings-topbar__title-h1,
.dashboard-title,
.cart-page-title,
.kyc-title,
.admin-page-title,
.page-title,
.application-form-title,
.document-upload-title,
.add-asset-title,
.property-content-title {
    font-family: var(--font-family) !important;
    font-size: var(--page-title-font-size) !important;
    font-weight: var(--page-title-font-weight) !important;
    color: var(--page-title-color) !important;
    line-height: var(--page-title-line-height) !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}


/* ================================================================
   12. UNIVERSAL PAGE HEADER (Icon + Title) STANDARDIZATION
   ================================================================
   Ensures the icon + title row has consistent gap and alignment
   across portfolio, wallet, rewards, support, settings headers.
   ================================================================ */

.portfolio-header,
.wallet-header,
.rewards-title-wrapper,
.support-page-header,
.settings-topbar__title,
.dashboard-header,
.cart-page-header,
.cart-title-wrapper,
.kyc-page-header,
.kyc-title-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: var(--page-title-icon-gap) !important;
}

/* Standardize page header icons */
.portfolio-page-icon,
.wallet-page-icon,
.rewards-trophy-icon,
.support-page-icon,
.settings-topbar__icon,
.cart-icon,
.kyc-page-icon {
    width: var(--page-title-icon-size) !important;
    height: var(--page-title-icon-size) !important;
    flex-shrink: 0 !important;
}


/* ================================================================
   13. UNIVERSAL MAIN CONTENT AREA STANDARDIZATION
   ================================================================
   All main content areas get consistent padding and background.
   Targets existing page-specific class names.
   ================================================================ */

.portfolio-main,
.wallet-main,
.rewards-main,
.dashboard-main,
.cart-page-main,
.kyc-main {
    padding: var(--page-padding-top) var(--page-padding-x) var(--page-padding-bottom);
    background: var(--content-bg);
    box-sizing: border-box;
}

/* Sidebar standardization — all pages */
.portfolio-sidebar,
.wallet-sidebar,
.rewards-sidebar,
.marketplace-sidebar,
.cart-page-sidebar,
.kyc-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
}


/* ================================================================
   14. UNIVERSAL SECTION SPACING
   ================================================================
   Consistent gaps between sections & cards on every page.
   ================================================================ */

.portfolio-container,
.wallet-container,
.rewards-container,
.dashboard-container,
.support-wrapper,
.cart-page-content,
.kyc-container {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}


/* ================================================================
   15. UNIVERSAL SECTION TITLE (H2) STANDARDIZATION
   ================================================================ */

.section-title,
.wallet-transactions-title,
.wallet-payment-title,
.assets-section-title {
    font-family: var(--font-family);
    font-size: var(--section-title-font-size);
    font-weight: var(--section-title-font-weight);
    color: var(--section-title-color);
    margin: 0 0 var(--section-title-margin-bottom);
    line-height: 1.3;
}


/* ================================================================
   Anti-Flicker: FOUC Prevention
   ================================================================
   Opt-in approach: only hides pages that explicitly use the
   .fouc-guard class. See bundle.css for the canonical rule.
   ================================================================ */

/* Opt-in FOUC guard */
body.fouc-guard:not(.dom-ready) {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.dom-ready {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease-in;
}

/* Legacy support: body.loading class */
body.loading {
    opacity: 0 !important;
}

body {
    transition: opacity 0.15s ease-in;
}


/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 768px) {
    .dashboard-content {
        margin-left: 0;
        width: 100%;
        padding: 16px;
        padding-top: 80px;
    }

    .page-body-grid {
        grid-template-columns: 1fr;
    }

    .page-title,
    .portfolio-page-title,
    .wallet-page-title,
    .rewards-title,
    .support-page-title,
    .settings-topbar__title-h1,
    .dashboard-title,
    .cart-page-title,
    .kyc-title,
    .admin-page-title,
    .application-form-title,
    .document-upload-title,
    .add-asset-title,
    .property-content-title {
        font-size: var(--fs-3xl) !important;
    }

    .portfolio-main,
    .wallet-main,
    .rewards-main,
    .dashboard-main,
    .cart-page-main,
    .kyc-main {
        padding: 16px;
        padding-top: 80px;
    }
}

/* ================================================================
   BREAKPOINT-SKALA — kanonische Konvention (D-light Fundament)
   ================================================================
   CSS erlaubt keine Custom-Properties in @media-Bedingungen, und es
   gibt (bewusst) KEIN Build-Tooling. Breakpoints sind daher keine
   Tokens, sondern eine verbindliche Konvention. Neue @media-Queries
   MÜSSEN exakt diese Werte verwenden — keine 1px-Nachbarn mehr.

     sm    375px   kleine Phones      (Grenze: max 375 / min 376)
     md    768px   Phone <-> Tablet   (Grenze: max 768 / min 769)
     lg   1024px   Tablet <-> Desktop (Grenze: max 1024 / min 1025)
     xl   1280px   große Desktops

   Überlappungsfreie Grenz-Regel: "abwärts" = max-width: Npx,
   "aufwärts" = min-width: (N+1)px. Also Phone = max-width: 768px,
   Desktop = min-width: 769px. NIE max-width:Npx UND min-width:Npx
   für dieselbe Grenze (matcht bei exakt Npx doppelt -> Overlap-Bug).
   Die alten 1px-Nachbarn (767/769, 640/641, 374/376) wurden in
   Phase 0 auf diese Skala vereinheitlicht.

   Sekundär noch in Gebrauch (Phase 2 zu konsolidieren): 480/640/900/1200.
   ================================================================ */

/* ================================================================
   GLOBALES TAP-FEEDBACK (:active)
   ================================================================
   Der globale `-webkit-tap-highlight-color: transparent`-Reset
   unterdrückt das native Touch-Highlight — ohne :active gäbe es auf
   Mobil GAR kein Tap-Feedback (Audit: nur 74 :active vs 1248 :hover).
   Dezenter Press-Default für die zentralen interaktiven Klassen.
   Lädt früh; komponenten-eigene :active-Regeln (z.B. ds-buttons.css)
   laden später und gewinnen -> reiner Fallback, kein Override.

   SPIEGELUNG: identischer Block in bundle.css (direkt nach dem
   tap-highlight-Reset), weil Dashboard-Seiten bundle.css statt
   dashboard-tokens.css laden und kein Build-Step beide synchronisiert.
   Bei Änderung BEIDE Stellen pflegen.
   ================================================================ */
button:active,
.btn:active,
.button:active,
[role="button"]:active,
.tab:active,
.nav-link:active,
a.btn:active,
/* Legacy-Button-Klassen (Phase-2-Konsolidierung): einheitliches Tap-
   Feedback schon vor der vollständigen Migration auf .ds-btn. */
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn--primary:active,
.btn--secondary:active {
    transform: scale(0.97);
    opacity: 0.92;
}

/* ================================================================
   iOS-ZOOM-GUARD — Formularfelder >=16px auf Mobil
   ================================================================
   iOS-Safari zoomt beim Fokus automatisch in jedes Feld mit Schrift
   <16px. Der --input-font-size-Token (16px) deckt nur Felder ab, die
   ihn referenzieren; Render-Verifikation (Phase 0) zeigte, dass viele
   Komponenten 14px hart setzen — u.a. das DS-Component .ds-select, die
   globale .sidebar__search-input und feature-spezifische Suchfelder.
   Diese mobile-only Regel garantiert plattformweit >=16px. !important
   ist nötig, weil Klassen-Selektoren (.ds-select) sonst gewinnen; der
   Scope ist auf <=768px begrenzt, Desktop-Typografie bleibt unberührt.
   ================================================================ */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ================================================================
   GLOBALER htmx-LADEINDIKATOR (Top-Progress-Bar)
   ================================================================
   Erzeugt + gesteuert in components/head.html (htmx:beforeRequest/
   afterRequest). Liefert systematisches Lade-Feedback für ALLE
   htmx-Swaps, ohne jedes Element einzeln mit hx-indicator zu versehen.
   z-index 2000: über Header/Burger (1000-1002). ================ */
#global-htmx-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    background: var(--btn-primary-bg, #0000FF);
    opacity: 0;
    pointer-events: none;
    transition: width 0.2s ease, opacity 0.2s ease;
}

#global-htmx-progress.is-active {
    width: 80%;
    opacity: 1;
    transition: width 8s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s ease;
}

#global-htmx-progress.is-complete {
    width: 100%;
    opacity: 1;
    transition: width 0.2s ease;
}


/* ── unified-styles.css ────────────────────────────────── */

/* Standard Unified Component Styles for POOOL */

:root {
    /* Brand Colors */
    --brand-deep-blue: #0000FF;
    --brand-soft-blue: #FFFFFF;
    --brand-bright-lime: #DBE2E9;
    /* Light blue-gray from user specs */
    --brand-greeny-green: #03FF88;
    /* Brand Lime */
    --brand-dark-blue: #08232F;
    --primary-color: #0000FF;
    --accent-color: #D4FFE9;
    --bg-secondary: #FAFAFA;
    --border-color: #E9EAEB;
    --text-primary: #181D27;
    --text-secondary: #535862;
    --text-tertiary: #717680;
}

/* Glassmorphism Icon Style - standardized */
.glass-icon-container {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-icon-bg {
    position: absolute;
    width: 46px;
    height: 46px;
    left: 2px;
    top: -2px;
    border-radius: 12px;
    transform: rotate(15deg);
    opacity: 0.35;
}

.glass-icon-front {
    position: relative;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.glass-icon-front img,
.glass-icon-front svg {
    width: 24px;
    height: 24px;
}

/* Color variants for the rotated background */
.glass-purple-bg {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
}

.glass-green-bg {
    background: linear-gradient(135deg, #059669 0%, #34D399 100%);
}

.glass-blue-bg {
    background: linear-gradient(135deg, #0000FF 0%, #60A5FA 100%);
}

.glass-brand-green-bg {
    background: linear-gradient(135deg, #03FF88 0%, #00CC6F 100%);
}

.glass-dark-bg {
    background: linear-gradient(135deg, #181D27 0%, #2E3440 100%);
}

.glass-duo-bg {
    background: linear-gradient(135deg, #0000FF 0%, #03FF88 100%);
}

/* Section title shared style */
.section-title {
    font-family: 'TT Norms Pro', sans-serif;
    font-weight: 700;
    font-size: var(--fs-2xl);
    line-height: 32px;
    color: #181d27;
    margin: 0 0 16px;
}

/* ── ds-page-layout.css ────────────────────────────────── */

/* ================================================================
   POOOL Design System — Page Layout
   ================================================================
   Shared layout classes for ALL dashboard pages.
   
   Usage:
     <main class="ds-main">
       {% include 'components/kyc-banner.html' %}
       <div class="ds-page-header">
         <div class="ds-page-header__title-row">
           <svg class="ds-page-header__icon">...</svg>
           <h1 class="ds-page-header__title">Page Title</h1>
         </div>
         <div class="ds-page-header__actions">
           <button class="ds-btn ds-btn--primary">Action</button>
         </div>
       </div>
       <!-- page content -->
     </main>

   RULES:
   - No !important in this file (ever)
   - All values use CSS custom properties
   - This file is the SINGLE source of truth for page layout
   ================================================================ */


/* ── CSS Custom Properties ────────────────────────────────────── */
:root {
    /* Page layout */
    --ds-sidebar-width: 256px;
    --ds-page-bg: #FAFAFA;
    --ds-page-pt: 48px;
    --ds-page-pb: 64px;
    --ds-page-px: 24px;
    --ds-page-gap: 24px;

    /* Page header */
    --ds-header-icon-size: 28px;
    --ds-header-icon-gap: 12px;
    --ds-header-title-size: 36px;
    --ds-header-title-weight: 700;
    --ds-header-title-color: var(--page-title-color);
    --ds-header-title-lh: 1.2;

    /* Font stack */
    --ds-font: 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Semantic color tokens ────────────────────────────────────
       Previously these were referenced ~130× by the community pages
       (and a handful elsewhere) but NEVER defined, so every usage fell
       back to its inline literal — which drifted file-to-file and made
       --ds-color-primary render green in some places and blue in others.
       Defining them here gives one source of truth and lets the
       [data-theme="dark"] block below recolor the whole surface at once.
       Light values match the dominant inline fallback that was in use. */
    --ds-color-primary: var(--btn-primary-bg, #0000FF); /* unify green/blue mix → brand blue */
    --ds-color-error-200: #FECDCA;

    --ds-text-primary: #181D27;
    --ds-text-secondary: #475467;
    --ds-text-tertiary: #667085;
    /* #98A2B3 fails WCAG AA as text on white (~2.5:1); use an AA-safe muted gray. */
    --ds-text-muted: #6B7280;

    --ds-surface: #FFFFFF;
    --ds-surface-hover: #F2F4F7;
    --ds-bg-secondary: #F9FAFB;
    --ds-bg-elevated: #FFFFFF;

    --ds-border: #E5E7EB;
    --ds-border-subtle: #F2F4F7;
}

/* Dark-mode values for the semantic tokens above. These only take effect
   when an ancestor carries data-theme="dark"; the investor/community shell
   does not toggle that yet, so this is the foundation for dark mode (and
   keeps the existing community [data-theme="dark"] rules coherent) rather
   than a switch that is already flipped on. */
[data-theme="dark"] {
    --ds-color-primary: #03FF88; /* brand green reads better than electric blue on dark */
    --ds-color-error-200: #7A271A;

    --ds-text-primary: #F5F7FA;
    --ds-text-secondary: #C2C7D0;
    --ds-text-tertiary: #98A2B3;
    --ds-text-muted: #707888;

    --ds-surface: #1A1D29;
    --ds-surface-hover: #232735;
    --ds-bg-secondary: #14171F;
    --ds-bg-elevated: #1A1D29;

    --ds-border: #2A2F3C;
    --ds-border-subtle: #1F232E;
}


/* ── Main Content Area ────────────────────────────────────────── */
/* Every page's <main> should use this class.
   Creates a flex column with consistent padding and gap. */

.ds-main {
    margin-left: var(--ds-sidebar-width);
    width: calc(100% - var(--ds-sidebar-width));
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--ds-page-pt) var(--ds-page-px) var(--ds-page-pb);
    background: var(--ds-page-bg);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--ds-page-gap);
}


/* ── Page Header ──────────────────────────────────────────────── */
/* Flex row: title-row on left, optional actions on right.
   margin-bottom ensures consistent spacing to content regardless
   of parent layout (works inside wrappers, flex containers, etc.) */

.ds-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0 0 var(--ds-page-gap) 0;
    width: 100%;
}


/* ── Title Row (icon + h1) ────────────────────────────────────── */

.ds-page-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--ds-header-icon-gap);
}


/* ── Page Header Icon ─────────────────────────────────────────── */

.ds-page-header__icon {
    width: var(--ds-header-icon-size);
    height: var(--ds-header-icon-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.ds-page-header__icon svg,
.ds-page-header__icon img {
    width: 100%;
    height: 100%;
}

.ds-page-header__icon.poool-icon-custom {
    background-color: var(--btn-primary-bg, #0000FF) !important;
    border-radius: 10px !important;
    padding: 9px !important;
    width: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
}

.ds-page-header__icon.poool-icon-custom svg path,
.ds-page-header__icon.poool-icon-custom path,
.ds-page-header__icon.poool-icon-custom circle,
.ds-page-header__icon.poool-icon-custom rect,
.ds-page-header__icon.poool-icon-custom polyline,
.ds-page-header__icon.poool-icon-custom line,
.ds-page-header__icon.poool-icon-custom polygon {
    stroke: #03FF88 !important;
}


/* ── Page Title (h1) ──────────────────────────────────────────── */

.ds-page-header__title {
    font-family: var(--ds-font);
    font-size: var(--ds-header-title-size);
    font-weight: var(--ds-header-title-weight);
    color: var(--ds-header-title-color);
    line-height: var(--ds-header-title-lh);
    letter-spacing: -0.02em;
    margin: 0;
}


/* ── Page Header Divider ──────────────────────────────────────── */
/* The HR fills 100% of whatever container it's in.
   Layout width constraints belong on the container, not the HR. */

.page-header-divider {
    border: none;
    height: 1px;
    background: var(--table-border-color);
    margin: 0 0 24px 0;
    width: 100%;
}


/* ── Header Actions (buttons on the right) ────────────────────── */

.ds-page-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}


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

@media (max-width: 768px) {
    .ds-main {
        margin-left: 0;
        width: 100%;
        padding: 80px 16px 48px;
    }

    .ds-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ds-page-header__title {
        font-size: var(--fs-3xl);
    }
}


/* ── ds-buttons.css ────────────────────────────────── */

/* ================================================================
   POOOL Design System — Buttons
   ================================================================
   Standardised button classes for the entire dashboard.

   Usage:
     <button class="ds-btn ds-btn--primary">Deposit</button>
     <button class="ds-btn ds-btn--secondary">Cancel</button>
     <button class="ds-btn ds-btn--primary ds-btn--sm">Small</button>
     <button class="ds-btn ds-btn--primary ds-btn--lg">Large</button>
     <button class="ds-btn ds-btn--primary ds-btn--full">Full Width</button>
     <button class="ds-btn ds-btn--danger">Delete</button>
     <button class="ds-btn ds-btn--ghost">Cancel</button>
     <button class="ds-btn ds-btn--icon ds-btn--secondary">
       <svg>...</svg>
     </button>

   RULES:
   - No !important in this file
   - All values use CSS custom properties from dashboard-tokens.css
   - Every button on the platform should use these classes

   KANONISCHER BUTTON-STANDARD (Phase 2 — Konsolidierung):
   `.ds-btn` + Modifier (`--primary/--secondary/--danger/--ghost/--icon/
   --sm/--lg/--full/--loading`) ist der EINZIGE zukünftige Button-Standard.
   DEPRECATED (Alt-Konventionen, nur noch Bestand, nicht neu verwenden,
   schrittweise migrieren): klassische `.btn-primary/.btn-secondary/.btn-
   outline/.btn-text/.btn-blue/.btn-invest/.btn-nav/.btn-signin/...` sowie
   die BEM-Doppelung `.btn--primary/.btn--secondary`. Migration ist
   inkrementell (kein Big-Bang) — Tracking in der Audit-CHECKLIST. Das
   globale Tap-Feedback (:active) in dashboard-tokens.css deckt Legacy-
   Primär/Sekundär-Klassen bereits mit ab, damit die Interaktion schon
   VOR der vollständigen Migration einheitlich ist.
   ================================================================ */


/* ── Base Reset ──────────────────────────────────────────────── */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-icon-gap);
    height: var(--btn-md-height);
    padding: var(--btn-md-padding);
    font-family: var(--font-family, 'TT Norms Pro', sans-serif);
    font-size: var(--btn-md-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    border-radius: var(--btn-border-radius);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--btn-transition);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.ds-btn:focus-visible {
    outline: 2px solid var(--btn-primary-bg);
    outline-offset: 2px;
}

.ds-btn:disabled,
.ds-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ds-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* ── Variants ────────────────────────────────────────────────── */

/* Primary — solid blue */
.ds-btn--primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
}

.ds-btn--primary:hover {
    background: var(--btn-primary-hover-bg);
}

.ds-btn--primary:active {
    background: var(--btn-primary-active-bg);
}


/* Secondary — white with border */
.ds-btn--secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-color);
    border: 1px solid var(--btn-secondary-border);
}

.ds-btn--secondary:hover {
    background: var(--btn-secondary-hover-bg);
}

.ds-btn--secondary:active {
    background: var(--btn-secondary-active-bg);
}


/* Danger — solid red */
.ds-btn--danger {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-color);
}

.ds-btn--danger:hover {
    background: var(--btn-danger-hover-bg);
}

.ds-btn--danger:active {
    background: var(--btn-danger-active-bg);
}


/* Ghost — transparent, text-only */
.ds-btn--ghost {
    background: var(--btn-ghost-bg);
    color: var(--btn-ghost-color);
}

.ds-btn--ghost:hover {
    background: var(--btn-ghost-hover-bg);
}

.ds-btn--ghost:active {
    background: var(--btn-ghost-active-bg);
}


/* ── Sizes ───────────────────────────────────────────────────── */

.ds-btn--sm {
    height: var(--btn-sm-height);
    padding: var(--btn-sm-padding);
    font-size: var(--btn-sm-font-size);
}

.ds-btn--sm svg {
    width: 16px;
    height: 16px;
}

.ds-btn--lg {
    height: var(--btn-lg-height);
    padding: var(--btn-lg-padding);
    font-size: var(--btn-lg-font-size);
}

.ds-btn--lg svg {
    width: 20px;
    height: 20px;
}


/* ── Modifiers ───────────────────────────────────────────────── */

/* Full-width */
.ds-btn--full {
    width: 100%;
}

/* Icon-only (square) */
.ds-btn--icon {
    padding: 0;
    width: var(--btn-md-height);
    gap: 0;
}

.ds-btn--icon.ds-btn--sm {
    width: var(--btn-sm-height);
}

.ds-btn--icon.ds-btn--lg {
    width: var(--btn-lg-height);
}


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

@media (max-width: 768px) {
    .ds-btn--lg {
        height: var(--btn-md-height);
        padding: var(--btn-md-padding);
        font-size: var(--btn-md-font-size);
    }
}


/* ── ds-badges.css ────────────────────────────────── */

/* ================================================================
   POOOL Design System — Badges
   ================================================================
   Standardised badge/status pill classes for the entire dashboard.

   Usage:
     <span class="ds-badge ds-badge--success">Completed</span>
     <span class="ds-badge ds-badge--warning">Pending</span>
     <span class="ds-badge ds-badge--danger">Declined</span>
     <span class="ds-badge ds-badge--info">New</span>
     <span class="ds-badge ds-badge--neutral">Draft</span>

     With dot indicator:
     <span class="ds-badge ds-badge--success">
       <span class="ds-badge__dot"></span> Active
     </span>

   RULES:
   - No !important in this file
   - All values use CSS custom properties from dashboard-tokens.css
   ================================================================ */


/* ── Base ────────────────────────────────────────────────────── */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--badge-padding);
    font-family: var(--font-family, 'TT Norms Pro', sans-serif);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: 1.4;
    border-radius: var(--badge-border-radius);
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}


/* ── Dot Indicator ───────────────────────────────────────────── */

.ds-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}


/* ── Variants ────────────────────────────────────────────────── */

.ds-badge--success {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
}

.ds-badge--warning {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}

.ds-badge--danger {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-color);
}

.ds-badge--info {
    background: var(--badge-info-bg);
    color: var(--badge-info-color);
}

.ds-badge--neutral {
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-color);
}


/* ── Property-Type Variants ──────────────────────────────────── */

.ds-badge--leasehold {
    background: var(--badge-leasehold-bg);
    color: var(--badge-leasehold-color);
    border: 1px solid var(--badge-leasehold-border);
}

.ds-badge--freehold {
    background: var(--badge-freehold-bg);
    color: var(--badge-freehold-color);
    border: 1px solid var(--badge-freehold-border);
}

.ds-badge--commercial {
    background: var(--badge-commercial-bg);
    color: var(--badge-commercial-color);
    border: 1.5px solid var(--badge-commercial-border);
}

.ds-badge--commodity {
    background: var(--badge-commodity-bg);
    color: var(--badge-commodity-color);
    border: 1px solid var(--badge-commodity-border);
}

.ds-badge--funding {
    background: var(--badge-funding-bg);
    color: var(--badge-funding-color);
    border: 1px solid var(--badge-funding-border);
}

.ds-badge--shortterm {
    background: #ECFDF3;
    color: #027A48;
    border: 1px solid #ABEFC6;
}

.ds-badge--flipping {
    background: #FEF3F2;
    color: #B42318;
    border: 1px solid #FECDCA;
}

.ds-badge--offplan {
    background: #E5E5FF;
    color: #3538CD;
    border: 1px solid #A7A7FF;
}


/* ── Overlay Modifier ────────────────────────────────────────── */

/* Use on card image overlays — adds absolute positioning + glass effect */
.ds-badge--overlay {
    position: absolute;
    left: 16px;
    top: 16px;
    height: 32px;
    padding: 5px 12px 5px 10px;
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

/* When --overlay is used with a type variant, keep the border but use glass bg */
.ds-badge--overlay.ds-badge--leasehold,
.ds-badge--overlay.ds-badge--freehold,
.ds-badge--overlay.ds-badge--commercial,
.ds-badge--overlay.ds-badge--commodity,
.ds-badge--overlay.ds-badge--funding,
.ds-badge--overlay.ds-badge--shortterm,
.ds-badge--overlay.ds-badge--flipping,
.ds-badge--overlay.ds-badge--offplan {
    background: rgba(255, 255, 255, 0.92);
}



/* ── ds-cards.css ────────────────────────────────── */

/* =========================================================================
 * DESIGN SYSTEM — CARDS (.ds-card)
 * =========================================================================
 * Base card component using design tokens. Page-specific classes should
 * handle layout only; the ds-card family owns the visual surface.
 *
 * Dependencies: dashboard-tokens.css
 * ========================================================================= */

.ds-card {
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--card-border-color, #E5E7EB);
  border-radius: 16px;
  padding: var(--card-padding, 24px);
  box-shadow: var(--card-shadow, 0px 1px 2px rgba(10, 13, 18, 0.05));
  transition:
      transform 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  position: relative;
  overflow: hidden; /* Contains inner content like images flush to borders */
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
}

.ds-card::before {
  display: none;
}

.ds-card > * {
  position: relative;
  z-index: 1;
}

/* ── Modifiers ──────────────────────────────────────────────────────── */

/* Elevated cards for primary summary panels. */
.ds-card--elevated {
  box-shadow:
      0 1px 3px rgba(10, 13, 18, 0.04),
      0 8px 24px rgba(10, 13, 18, 0.05);
}

/* Small padding for tighter layouts (e.g. key financials) */
.ds-card--sm {
  padding: 16px !important;
}

/* No padding for full-bleed content (e.g. image galleries or tables) */
.ds-card--flush {
  padding: 0 !important;
}

/* Glass is opt-in for rare premium surfaces; default dashboards stay flat. */
.ds-card--glass,
.ds-card.holo-card {
  background-color: transparent;
  background: linear-gradient(160deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 100%);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(0,0,0,0.03);
  border-radius: 24px;
  padding: 28px;
  box-shadow:
      0 4px 6px -2px rgba(0,0,0,0.02),
      0 12px 32px -4px rgba(0,0,0,0.04),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 2px rgba(0,0,0,0.01);
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, backdrop-filter;
}

.ds-card--glass::before,
.ds-card.holo-card::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 24px 24px 0 0;
  z-index: 0;
}

/* Interactive cards (e.g. property cards in marketplace) */
.ds-card--interactive {
  cursor: pointer;
}

.ds-card--interactive:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
      0 1px 3px rgba(10, 13, 18, 0.06),
      0 8px 20px rgba(10, 13, 18, 0.06);
}

.ds-card--glass.ds-card--interactive:hover,
.ds-card.holo-card.ds-card--interactive:hover {
  transform: translateY(-3px) scale(1.003);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow:
      0 12px 20px -4px rgba(0, 0, 0, 0.04),
      0 24px 48px -12px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 2px rgba(0, 0, 0, 0.01);
}

.ds-card--glass.ds-card--interactive:hover::before,
.ds-card.holo-card.ds-card--interactive:hover::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%);
}

.ds-card--interactive:active {
  transform: translateY(0) scale(1);
}

/* ── Card Elements ──────────────────────────────────────────────────── */

.ds-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ds-card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #101828;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-card__subtitle {
  font-size: var(--fs-sm);
  color: #475467;
  margin: 4px 0 0 0;
  font-weight: 400;
}

/* Body wrapper for spacing */
.ds-card__body {
  flex: 1; /* Pushes footer down if used in flex grid */
}

/* Footer spanning full width, usually bordered off from body */
.ds-card__footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border-color, #E5E7EB);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Divider inside card body */
.ds-card__divider {
  height: 1px;
  background-color: var(--card-border-color, #E5E7EB);
  margin: 16px 0;
  border: none;
}

/* ── Stat Card Pattern ─────────────────────────────────────────────── */

.ds-stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ds-stat-card__label {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 24px;
  color: var(--page-title-color);
}

.ds-stat-card__value {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 38px;
  color: var(--page-title-color);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ds-stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--label-color, #475467);
}

/* ── Chart Card Pattern ────────────────────────────────────────────── */

.ds-chart-card {
  gap: 24px;
}

.ds-chart-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.ds-chart-card__title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 28px;
  color: var(--page-title-color);
  margin: 0;
}

.ds-chart-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
  padding: 2px;
  background: #F9FAFB;
  border: 1px solid var(--table-border-color, #E9EAEB);
  border-radius: 10px;
}

.ds-chart-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #717680;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  white-space: nowrap;
}

.ds-chart-tab.active,
.ds-chart-tab[aria-selected="true"] {
  background: #FFFFFF;
  color: #414651;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

/* ─────────────────────────────────────────────────────────────────────
   Segmented control primitive
   Shared rounded-pill container for binary/ternary toggles. Children
   should be plain <button class="ds-segmented__item">; pair with
   role="group" + aria-pressed on each item. Page-specific styling
   (e.g. .feed-toggle-btn) layers on top of the item class.
   ───────────────────────────────────────────────────────────────────── */
.ds-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #F2F4F7;
  border-radius: 10px;
}
.ds-segmented__item {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 8px 14px;
  font-family: var(--font-family, inherit);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #475467;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  min-height: 36px;
}
.ds-segmented__item:hover:not(.active):not([aria-pressed="true"]) {
  color: #101828;
}
.ds-segmented .ds-segmented__item.active,
.ds-segmented .ds-segmented__item[aria-pressed="true"] {
  /* Higher specificity so page-specific button rules (e.g. legacy
     .feed-toggle-btn.active) don't override the primitive surface. */
  background: #FFFFFF;
  color: #101828;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}
.ds-segmented__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--btn-primary-bg, #001DCA);
}
@media (max-width: 768px) {
  .ds-segmented__item { min-height: 44px; }
}

/* ─── ds-steps: shared 3-step empty-state component ───────────── */
.ds-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ds-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: 12px;
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--card-border-color, #E5E7EB);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ds-step:hover {
  border-color: var(--btn-primary-bg, #0000FF);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 255, 0.35);
  transform: translateY(-1px);
}

.ds-step__num {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--btn-primary-bg, #0000FF);
  background: var(--badge-info-bg, #EEF4FF);
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.ds-step__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ds-step__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--page-title-color, #181D27);
  margin: 0;
}

.ds-step__desc {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--page-subtitle-color, #475467);
  margin: 0;
}

.ds-step__link {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--btn-primary-bg, #0000FF);
  text-decoration: none;
  margin-top: 4px;
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-block;
}
.ds-step__link:hover { text-decoration: underline; }
.ds-step__link--muted { color: var(--page-subtitle-color, #667085); opacity: 0.6; cursor: default; }
.ds-step__link--muted:hover { text-decoration: none; }

.ds-step[data-complete="true"] {
  background: #F0FDF4;
  border-color: #BBF7D0;
}
.ds-step[data-complete="true"] .ds-step__num {
  color: var(--badge-success-color, #027A48);
  background: var(--badge-success-bg, #ECFDF3);
}
.ds-step[data-complete="true"] .ds-step__link {
  color: var(--badge-success-color, #027A48);
}

@media (max-width: 768px) {
  .ds-steps { grid-template-columns: 1fr; }
}


/* ── ds-forms.css ────────────────────────────────── */

/* =========================================================================
 * DESIGN SYSTEM — FORM CONTROLS (.ds-input, .ds-select, .ds-textarea)
 * =========================================================================
 * Standardised form field components driven by dashboard-tokens.css.
 * Provides consistent height, padding, border, radius, and focus state
 * across all pages (settings, checkout, support, admin).
 *
 * Dependencies: dashboard-tokens.css (section 14 — Form Input tokens)
 * ========================================================================= */

/* ── Base Input ─────────────────────────────────────────────────────── */
.ds-input {
  width: 100%;
  height: var(--input-height, 44px);
  padding: var(--input-padding, 10px 14px);
  font-size: var(--input-font-size, 16px);
  font-weight: var(--input-font-weight, 400);
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--input-text-color, #101828);
  background-color: var(--input-bg, #FFFFFF);
  border: 1px solid var(--input-border-color, #D0D5DD);
  border-radius: var(--input-border-radius, 8px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  outline: none;
}

.ds-input::placeholder {
  color: var(--input-placeholder-color, #667085);
}

.ds-input:focus {
  border-color: var(--input-border-focus, #0000FF);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08);
}

.ds-input:disabled,
.ds-input[readonly] {
  background-color: #F9FAFB;
  color: #667085;
  cursor: not-allowed;
}

/* ── Select ─────────────────────────────────────────────────────────── */
:root {
  --select-chevron-icon: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23667085' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --select-chevron-position: right 14px center;
  --select-chevron-size: 12px 8px;
}

select:where(.ds-select, .ds-input, .settings-input, .form-select, .dropdown-select, .support-select, .ad-select, .commissions-select, .mp-sec__sort-select, .mp-filter-select):not([multiple]),
body:not(.admin-body) :where(select:not([multiple]):not(.admin-select):not(.admin-input):not(.dat-select):not(.dat-select--compact):not(.lb-select-mini):not(.dops-type-select):not([data-native-select])) {
  width: 100%;
  height: var(--input-height, 44px);
  padding: var(--input-padding, 10px 14px);
  padding-right: 36px; /* room for dropdown arrow */
  font-size: var(--input-font-size, 16px);
  font-weight: var(--input-font-weight, 400);
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--input-text-color, #101828);
  background-color: var(--input-bg, #FFFFFF);
  border: 1px solid var(--input-border-color, #D0D5DD);
  border-radius: var(--input-border-radius, 8px);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: var(--select-chevron-icon);
  background-repeat: no-repeat;
  background-position: var(--select-chevron-position);
  background-size: var(--select-chevron-size);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  outline: none;
  line-height: 20px;
}

select:where(.ds-select, .ds-input, .settings-input, .form-select, .dropdown-select, .support-select, .ad-select, .commissions-select, .mp-sec__sort-select, .mp-filter-select):not([multiple]):focus,
body:not(.admin-body) :where(select:not([multiple]):not(.admin-select):not(.admin-input):not(.dat-select):not(.dat-select--compact):not(.lb-select-mini):not(.dops-type-select):not([data-native-select])):focus {
  border-color: var(--input-border-focus, #0000FF);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08);
}

select:where(.ds-select, .ds-input, .settings-input, .form-select, .dropdown-select, .support-select, .ad-select, .commissions-select, .mp-sec__sort-select, .mp-filter-select):not([multiple]):disabled,
body:not(.admin-body) :where(select:not([multiple]):not(.admin-select):not(.admin-input):not(.dat-select):not(.dat-select--compact):not(.lb-select-mini):not(.dops-type-select):not([data-native-select])):disabled {
  background-color: #F9FAFB;
  color: #667085;
  cursor: not-allowed;
}

/* ── Textarea ───────────────────────────────────────────────────────── */
.ds-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--input-padding, 10px 14px);
  font-size: var(--input-font-size, 16px);
  font-weight: var(--input-font-weight, 400);
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--input-text-color, #101828);
  background-color: var(--input-bg, #FFFFFF);
  border: 1px solid var(--input-border-color, #D0D5DD);
  border-radius: var(--input-border-radius, 8px);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  outline: none;
  line-height: 1.5;
}

.ds-textarea::placeholder {
  color: var(--input-placeholder-color, #667085);
}

.ds-textarea:focus {
  border-color: var(--input-border-focus, #0000FF);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08);
}

.ds-textarea:disabled {
  background-color: #F9FAFB;
  color: #667085;
  cursor: not-allowed;
}

/* ── Form Group (label + input wrapper) ─────────────────────────────── */
.ds-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-form-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--body-color);
  line-height: 20px;
}

.ds-form-label--required::after {
  content: ' *';
  color: #D92D20;
}

.ds-form-hint {
  font-size: var(--fs-sm);
  color: #667085;
  margin-top: 2px;
}

/* ── Error State ────────────────────────────────────────────────────── */
.ds-input--error,
.ds-select--error,
.ds-textarea--error {
  border-color: #FDA29B;
}

.ds-input--error:focus,
.ds-select--error:focus,
.ds-textarea--error:focus {
  border-color: #F04438;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1);
}

.ds-form-error {
  font-size: var(--fs-sm);
  color: #D92D20;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

/* ── Input with Icon ────────────────────────────────────────────────── */
.ds-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ds-input-wrapper .ds-input {
  padding-left: 40px;
}

.ds-input-wrapper__icon {
  position: absolute;
  left: 12px;
  color: #667085;
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* ── Checkbox / Toggle (small helper) ───────────────────────────────── */
.ds-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Checkbox visuals come from the canonical checkbox.css (bundled). This
   group only owns layout now. */

.ds-checkbox-label {
  font-size: var(--fs-sm);
  color: var(--body-color);
  user-select: none;
}

/* ── Radio (shared custom indicator) ───────────────────────────────── */
.ds-radio-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ds-radio-group--inline {
  flex-direction: row;
  gap: 24px;
}

.ds-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.ds-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ds-radio-custom {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--input-border-color, #D0D5DD);
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ds-radio-custom::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--radio-selected-dot-color, #03FF88);
  transform: scale(0);
  transition: transform 0.15s ease;
}

.ds-radio-label:hover .ds-radio-input:not(:disabled) ~ .ds-radio-custom {
  border-color: var(--radio-selected-border, var(--input-border-focus, #0000FF));
}

.ds-radio-input:checked ~ .ds-radio-custom {
  border-color: var(--radio-selected-border, var(--input-border-focus, #0000FF));
  background: var(--radio-selected-bg, var(--input-border-focus, #0000FF));
}

.ds-radio-input:checked ~ .ds-radio-custom::after {
  transform: scale(1);
}

.ds-radio-input:focus-visible ~ .ds-radio-custom {
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08), 0 0 0 6px rgba(3, 255, 136, 0.12);
}

.ds-radio-text {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--body-color, #344054);
  line-height: 20px;
  margin-top: 2px;
}


/* ── checkbox.css ────────────────────────────────── */

/* =========================================================================
 * DESIGN SYSTEM — CHECKBOX (single source of truth)
 * =========================================================================
 * One canonical, brand-consistent checkbox used on EVERY page. Built the
 * modern, industry-standard way: the real <input type="checkbox"> is styled
 * directly via `appearance: none`, and the tick is a centered SVG — no
 * sibling <span> hacks, no hardcoded left/top pixel magic. The checkmark is
 * therefore pixel-perfectly centered at any size and crisp on any DPI.
 *
 * Covers :hover, :focus-visible (keyboard ring), :disabled and :indeterminate.
 *
 * --- IMPORTANT: low specificity is intentional -------------------------
 * The base selector is the plain `input[type="checkbox"]` (specificity 0,1,1)
 * with NO :not() clauses. This file is bundled BEFORE every page-specific
 * stylesheet, so any control that re-styles its own checkbox — toggle
 * switches (`.ccs-switch input`, `.mp-toggle input`, `.lb-toggle-label input`)
 * or bespoke wrappers — wins purely by the cascade and is left untouched.
 * Adding :not([role="switch"]) etc. would RAISE specificity and start
 * overriding those hidden switch inputs (shrinking their hit area / shifting
 * layout), so do not add it. A control that wants the native OS checkbox can
 * simply set `appearance: auto` in its own (later) rule.
 *
 * Everything is token-driven so a page can theme it by overriding the
 * --pl-checkbox-* custom properties on a container.
 * ========================================================================= */

:root {
  --pl-checkbox-size: 16px;
  --pl-checkbox-radius: 4px;
  --pl-checkbox-border: #d0d5dd;
  --pl-checkbox-bg: #ffffff;
  /* Brand blue — falls back across the token names used by auth vs app pages */
  --pl-checkbox-accent: var(--primary-color, var(--btn-primary-bg, #0000ff));
  --pl-checkbox-check: #ffffff;
  --pl-checkbox-focus-ring: rgba(0, 0, 255, 0.2);
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--pl-checkbox-size);
  height: var(--pl-checkbox-size);
  margin: 0;
  padding: 0;
  border: 1px solid var(--pl-checkbox-border);
  border-radius: var(--pl-checkbox-radius);
  background-color: var(--pl-checkbox-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--pl-checkbox-accent);
}

input[type="checkbox"]:checked {
  background-color: var(--pl-checkbox-accent);
  border-color: var(--pl-checkbox-accent);
  /* White checkmark, geometrically centered in a 16×16 viewBox */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M4%208.5L6.8%2011.3L12%205%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
}

input[type="checkbox"]:indeterminate {
  background-color: var(--pl-checkbox-accent);
  border-color: var(--pl-checkbox-accent);
  /* Horizontal dash, centered */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M4%208H12%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pl-checkbox-focus-ring);
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}


/* ── ds-tables.css ────────────────────────────────── */

/* =========================================================================
 * DESIGN SYSTEM — TABLES (.ds-table)
 * =========================================================================
 * Standardised data table component driven by dashboard-tokens.css.
 * Works with both native <table> elements and flex-based row layouts.
 *
 * Dependencies: dashboard-tokens.css (section 15 — Table tokens)
 * ========================================================================= */

/* ── Container ──────────────────────────────────────────────────────── */
.ds-table-container {
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--table-border-color, var(--table-border-color));
  border-radius: var(--card-border-radius, 12px);
  overflow: hidden;
  box-shadow: var(--card-shadow, 0px 1px 2px rgba(10, 13, 18, 0.05));
}

.ds-table-container__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--table-border-color, var(--table-border-color));
}

.ds-table-container__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #101828;
  margin: 0;
}

.ds-table-container__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Base Table ─────────────────────────────────────────────────────── */
.ds-table {
  width: 100%;
  border-collapse: collapse;
}

/* ── Table Head ─────────────────────────────────────────────────────── */
.ds-table thead th,
.ds-table-th {
  padding: var(--table-header-padding, 12px 24px);
  text-align: left;
  font-size: var(--table-header-font-size, 12px);
  font-weight: var(--table-header-font-weight, 600);
  color: var(--table-header-color, #717680);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--table-header-bg, #FAFAFA);
  border-bottom: 1px solid var(--table-border-color, var(--table-border-color));
  white-space: nowrap;
  font-family: var(--font-family, 'TT Norms Pro', sans-serif);
  line-height: 18px;
}

/* ── Table Body ─────────────────────────────────────────────────────── */
.ds-table tbody td,
.ds-table-td {
  padding: var(--table-cell-padding, 16px 24px);
  font-size: var(--table-cell-font-size, 14px);
  color: var(--table-cell-color, var(--text-secondary));
  border-bottom: 1px solid var(--table-border-color, var(--table-border-color));
  line-height: 20px;
  font-family: var(--font-family, 'TT Norms Pro', sans-serif);
}

.ds-table tbody tr,
.ds-table-row {
  transition: background-color 0.15s ease;
}

.ds-table tbody tr:hover,
.ds-table-row:hover {
  background-color: var(--table-row-hover-bg, #F8F9FC);
}

.ds-table tbody tr:last-child td,
.ds-table-row:last-child .ds-table-td {
  border-bottom: none;
}

/* ── Sortable Headers ───────────────────────────────────────────────── */
.ds-table-th--sortable {
  cursor: pointer;
  user-select: none;
}

.ds-table-th--sortable:hover {
  color: var(--body-color);
}

.ds-table-sort-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.ds-table-th--sortable:hover .ds-table-sort-icon {
  opacity: 1;
}

/* ── Cell Alignment Modifiers ───────────────────────────────────────── */
.ds-table-th--right,
.ds-table-td--right {
  text-align: right;
}

.ds-table-th--center,
.ds-table-td--center {
  text-align: center;
}

/* ── Cell Value Styling ─────────────────────────────────────────────── */
.ds-table-td--bold {
  font-weight: 700;
  color: #101828;
}

.ds-table-td--mono {
  font-variant-numeric: tabular-nums;
}

.ds-table-td--muted {
  color: var(--table-header-color, #717680);
  font-size: var(--fs-sm);
}

/* ── Flex-Based Table (for wallet/portfolio custom layouts) ──────── */
.ds-table-flex {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ds-table-flex__head {
  display: flex;
  background: var(--table-header-bg, #FAFAFA);
  border-bottom: 1px solid var(--table-border-color, var(--table-border-color));
}

.ds-table-flex__head .ds-table-th {
  display: flex;
  align-items: center;
  height: var(--table-header-height, 44px);
}

.ds-table-flex__body {
  display: flex;
  flex-direction: column;
}

.ds-table-flex__row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--table-border-color, var(--table-border-color));
  transition: background-color 0.15s ease;
}

.ds-table-flex__row:hover {
  background-color: var(--table-row-hover-bg, #F8F9FC);
}

.ds-table-flex__row:last-child {
  border-bottom: none;
}

/* ── Empty State ────────────────────────────────────────────────────── */
.ds-table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.ds-table-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #F9FAFB;
  border: 1px solid var(--table-border-color, var(--table-border-color));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: var(--fs-3xl);
}

.ds-table-empty__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #101828;
  margin: 0 0 4px;
}

.ds-table-empty__description {
  font-size: var(--fs-sm);
  color: #667085;
  margin: 0;
  max-width: 300px;
}

/* ── Table Footer (pagination, show-all) ────────────────────────────── */
.ds-table-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-top: 1px solid var(--table-border-color, var(--table-border-color));
}

.ds-table-footer__link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #0000FF;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.ds-table-footer__link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ── Responsive: horizontal scroll ──────────────────────────────────── */
.ds-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Responsive: Card-Stacking (Phase 2, OPT-IN) ─────────────────────────
   Wandelt eine dichte Tabelle auf Mobil (<=768px) in gestapelte Karten:
   jede Zeile = Karte, jede Zelle = "Label: Wert"-Reihe. Standard-Fallback
   für dichte Tabellen ist weiterhin .ds-table-scroll (horizontaler Scroll);
   .ds-table--cards ist die UX-bessere, opt-in Alternative.

   NUTZUNG (Markup muss data-label je <td> liefern):
     <table class="ds-table ds-table--cards"> ...
       <td data-label="Asset">Villa Uluwatu</td>
       <td data-label="Anteile">244</td> ...
   Migration der bestehenden dichten Tabellen erfolgt inkrementell
   (Tracking in der Audit-CHECKLIST). */
@media (max-width: 768px) {
  .ds-table--cards thead {
    /* Header visuell ausblenden, aber für Screenreader erhalten */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ds-table--cards tbody tr,
  .ds-table--cards .ds-table-row {
    display: block;
    margin-bottom: 12px;
    padding: 4px 14px;
    border: 1px solid #EAECF0;
    border-radius: 12px;
    background: var(--input-bg, #FFFFFF);
  }

  .ds-table--cards tbody td,
  .ds-table--cards .ds-table-td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border: none;
    text-align: right;
    min-height: 44px;
  }

  .ds-table--cards tbody td:not(:last-child),
  .ds-table--cards .ds-table-td:not(:last-child) {
    border-bottom: 1px solid #F2F4F7;
  }

  /* Label aus data-label (links), Wert rechts */
  .ds-table--cards tbody td::before,
  .ds-table--cards .ds-table-td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #717680;
    text-align: left;
    flex: 0 0 auto;
    padding-right: 12px;
  }
}


/* ── ds-typography.css ────────────────────────────────── */

/* =========================================================================
 * DESIGN SYSTEM — TYPOGRAPHY (.ds-text-*)
 * =========================================================================
 * Standardised text styles driven by dashboard-tokens.css.
 * Provides a consistent type scale across all pages.
 *
 * Dependencies: dashboard-tokens.css (sections 3, 4)
 * ========================================================================= */

/* ── Display (hero numbers, big values) ─────────────────────────── */
.ds-text-display {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--page-title-color, var(--page-title-color));
  letter-spacing: -0.02em;
}

/* ── Heading XL (page titles — 36px) ────────────────────────────── */
.ds-text-xl {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--page-title-font-size, 2.25rem);
  font-weight: var(--page-title-font-weight, 700);
  line-height: var(--page-title-line-height, 1.2);
  color: var(--page-title-color, var(--page-title-color));
  letter-spacing: -0.02em;
}

/* ── Heading LG (section titles — 24px) ─────────────────────────── */
.ds-text-lg {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.33333333;
  color: var(--page-title-color, var(--page-title-color));
}

/* ── Heading MD (card titles — 18px) ────────────────────────────── */
.ds-text-md {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.55555556;
  color: var(--page-title-color, var(--page-title-color));
}

/* ── Heading SM (sub-sections — 16px semibold) ──────────────────── */
.ds-text-sm-heading {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--page-title-color, var(--page-title-color));
}

/* ── Body (default text — 14px) ─────────────────────────────────── */
.ds-text-body {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.42857143;
  color: var(--body-color);
}

.ds-text-body--medium {
  font-weight: 500;
}

.ds-text-body--semibold {
  font-weight: 700;
}

/* ── Body Large (prominent text — 16px) ─────────────────────────── */
.ds-text-body-lg {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--body-color);
}

/* ── Caption / Small (labels, hints — 12/13px) ──────────────────── */
.ds-text-caption {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.38461538;
  color: #667085;
}

.ds-text-xs {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #667085;
}

/* ── Subtitle/Description ───────────────────────────────────────── */
.ds-text-subtitle {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--page-subtitle-font-size, 0.9375rem);
  font-weight: var(--page-subtitle-font-weight, 400);
  line-height: 1.46666667;
  color: var(--page-subtitle-color, #475467);
}

/* ── Color Modifiers ────────────────────────────────────────────── */
.ds-text--primary   { color: var(--page-title-color, var(--page-title-color)); }
.ds-text--secondary { color: var(--text-secondary); }
.ds-text--muted     { color: #667085; }
.ds-text--accent    { color: var(--primary-color, #0000FF); }
.ds-text--success   { color: #027A48; }
.ds-text--warning   { color: #B54708; }
.ds-text--danger    { color: #D92D20; }
.ds-text--white     { color: #FFFFFF; }

/* ── Alignment Modifiers ────────────────────────────────────────── */
.ds-text--center { text-align: center; }
.ds-text--right  { text-align: right; }

/* ── Financial Numbers (tabular, monospace-ish) ─────────────────── */
.ds-text-money {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--page-title-color, var(--page-title-color));
}

/* ── Truncation ─────────────────────────────────────────────────── */
.ds-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Line Clamp (multi-line truncation) ─────────────────────────── */
.ds-text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ds-text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ── ds-modals.css ────────────────────────────────── */

/* =========================================================================
 * DESIGN SYSTEM — MODALS (.ds-modal)
 * =========================================================================
 * Standardised modal/dialog component.
 * Can be applied alongside existing per-page modal classes.
 *
 * Usage (HTML):
 *   <div class="ds-modal-overlay" id="my-modal">
 *     <div class="ds-modal">
 *       <div class="ds-modal__header">
 *         <h3 class="ds-modal__title">Title</h3>
 *         <button class="ds-modal__close">×</button>
 *       </div>
 *       <div class="ds-modal__body">…</div>
 *       <div class="ds-modal__footer">…</div>
 *     </div>
 *   </div>
 *
 * Toggle: add/remove .active class on .ds-modal-overlay
 * ========================================================================= */

/* ── Overlay ────────────────────────────────────────────────────── */
.ds-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(52, 64, 84, 0.6);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px;
  animation: ds-modal-overlay-in 0.2s ease-out;
}

.ds-modal-overlay.active {
  display: flex;
}

@keyframes ds-modal-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal Container ────────────────────────────────────────────── */
.ds-modal {
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0px 8px 8px -4px rgba(16, 24, 40, 0.03),
    0px 20px 24px -4px rgba(16, 24, 40, 0.08);
  animation: ds-modal-slide-in 0.25s ease-out;
  overflow: hidden;
}

.ds-modal--sm { max-width: 360px; }
.ds-modal--lg { max-width: 640px; }
.ds-modal--xl { max-width: 800px; }

@keyframes ds-modal-slide-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ─────────────────────────────────────────────────────── */
.ds-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 0;
  gap: 16px;
}

.ds-modal__header--bordered {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--table-border-color, var(--table-border-color));
}

.ds-modal__title {
  font-family: var(--font-family, 'TT Norms Pro', sans-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 28px;
  color: #101828;
  margin: 0;
}

.ds-modal__subtitle {
  font-size: var(--fs-sm);
  color: #667085;
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ── Close Button ───────────────────────────────────────────────── */
.ds-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #98A2B3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.ds-modal__close:hover {
  color: var(--body-color);
  background: #F2F4F7;
}

.ds-modal__close svg {
  width: 20px;
  height: 20px;
}

/* ── Body ───────────────────────────────────────────────────────── */
.ds-modal__body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.ds-modal__body--flush {
  padding: 0;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.ds-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 24px;
}

.ds-modal__footer--bordered {
  border-top: 1px solid var(--table-border-color, var(--table-border-color));
  padding-top: 20px;
}

.ds-modal__footer--spread {
  justify-content: space-between;
}

.ds-modal__body-text {
  margin: 0;
  color: var(--text-tertiary, #475467);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ── Error Alert inside Modal ───────────────────────────────────── */
.ds-modal__error {
  color: #D92D20;
  background: #FEF3F2;
  border: 1px solid #FEE4E2;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  margin-bottom: 16px;
  display: none;
  line-height: 1.4;
}

.ds-modal__error:not(:empty) {
  display: block;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ds-modal-overlay {
    padding: 16px;
    align-items: flex-end;
  }

  .ds-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
    max-height: 85dvh;
  }

  .ds-modal--sm,
  .ds-modal--lg,
  .ds-modal--xl {
    max-width: 100%;
  }
}


/* ── ds-utilities.css ────────────────────────────────── */

/* =========================================================================
 * DESIGN SYSTEM — UTILITIES (.ds-*)
 * =========================================================================
 * Common utility classes for spacing, layout, visibility, and responsive.
 * ========================================================================= */

/* ── Spacing ────────────────────────────────────────────────────── */
.ds-mt-0  { margin-top: 0 !important; }
.ds-mt-8  { margin-top: 8px !important; }
.ds-mt-16 { margin-top: 16px !important; }
.ds-mt-24 { margin-top: 24px !important; }
.ds-mt-32 { margin-top: 32px !important; }
.ds-mt-48 { margin-top: 48px !important; }

.ds-mb-0  { margin-bottom: 0 !important; }
.ds-mb-8  { margin-bottom: 8px !important; }
.ds-mb-16 { margin-bottom: 16px !important; }
.ds-mb-24 { margin-bottom: 24px !important; }

.ds-gap-8  { gap: 8px; }
.ds-gap-12 { gap: 12px; }
.ds-gap-16 { gap: 16px; }
.ds-gap-24 { gap: 24px; }

/* ── Layout ─────────────────────────────────────────────────────── */
.ds-flex { display: flex; }
.ds-flex-col { flex-direction: column; }
.ds-flex-row { flex-direction: row; }
.ds-items-center { align-items: center; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-center { justify-content: center; }
.ds-flex-1 { flex: 1; }
.ds-flex-wrap { flex-wrap: wrap; }
.ds-w-full { width: 100%; }

/* ── Responsive Container ───────────────────────────────────────── */
.ds-container {
  width: 100%;
  max-width: var(--page-max-width, 1200px);
  margin: 0 auto;
}

/* ── Visibility ─────────────────────────────────────────────────── */
.ds-hidden { display: none !important; }
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Divider ────────────────────────────────────────────────────── */
.ds-divider {
  width: 100%;
  height: 1px;
  background: var(--table-border-color, var(--table-border-color));
  border: none;
  margin: 0;
}

/* ── Responsive Breakpoints ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .ds-hide-md { display: none !important; }
}

@media (max-width: 768px) {
  .ds-hide-sm { display: none !important; }
}

@media (min-width: 769px) {
  .ds-show-sm-only { display: none !important; }
}

@media (min-width: 1025px) {
  .ds-show-md-only { display: none !important; }
}


/* ── ds-progress.css ────────────────────────────────── */

/* ================================================================
   POOOL Design System — Progress Bars (.ds-progress)
   ================================================================
   Standardised progress bar for the entire dashboard.
   Used for funding bars, upload progress, tier progress, 
   investment limits, etc.

   Usage:
     <div class="ds-progress">
       <div class="ds-progress__fill" style="width: 65%"></div>
     </div>

     <!-- Small variant (e.g. inside table rows) -->
     <div class="ds-progress ds-progress--sm">
       <div class="ds-progress__fill" style="width: 40%"></div>
     </div>

     <!-- Large variant (e.g. investment limit) -->
     <div class="ds-progress ds-progress--lg">
       <div class="ds-progress__fill" style="width: 80%"></div>
     </div>

     <!-- With label -->
     <div class="ds-progress-wrapper">
       <div class="ds-progress-label">
         <span class="ds-progress-label__text">Funded</span>
         <span class="ds-progress-label__value">65%</span>
       </div>
       <div class="ds-progress">
         <div class="ds-progress__fill" style="width: 65%"></div>
       </div>
     </div>

   RULES:
   - No !important in this file
   - All values use CSS custom properties from dashboard-tokens.css
   - Every progress bar on the platform should use these classes
   ================================================================ */


/* ── Track (background) ──────────────────────────────────────── */

.ds-progress {
    width: 100%;
    height: var(--progress-md-height);
    background: var(--progress-track-bg);
    border-radius: var(--progress-border-radius);
    overflow: hidden;
    position: relative;
}


/* ── Fill (foreground bar) ───────────────────────────────────── */

.ds-progress__fill {
    height: 100%;
    background: var(--progress-fill-bg);
    border-radius: var(--progress-border-radius);
    min-width: 0;
    transition: width 0.6s ease;
}


/* ── Size Variants ───────────────────────────────────────────── */

/* Small — compact tables, file uploads */
.ds-progress--sm {
    height: var(--progress-sm-height);
}

/* Large — investment limits, hero progress */
.ds-progress--lg {
    height: var(--progress-lg-height);
}


/* ── Color Variants ──────────────────────────────────────────── */

/* Default is green (--progress-fill-bg). These override for special cases. */

/* Legacy alias. Normal progress stays green per DESIGN.md. */
.ds-progress--blue .ds-progress__fill {
    background: var(--progress-fill-bg);
}

/* Warning — approaching limits */
.ds-progress--warning .ds-progress__fill {
    background: var(--badge-warning-color, #B54708);
}

/* Danger — exceeded or error states */
.ds-progress--danger .ds-progress__fill {
    background: var(--btn-danger-bg, #D92D20);
}


/* ── Progress Label Wrapper ──────────────────────────────────── */

.ds-progress-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.ds-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ds-progress-label__text {
    font-family: var(--font-family, 'TT Norms Pro', sans-serif);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.ds-progress-label__value {
    font-family: var(--font-family, 'TT Norms Pro', sans-serif);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--page-title-color);
}


/* ── Animated Indeterminate (optional — for unknown progress) ── */

.ds-progress--indeterminate .ds-progress__fill {
    width: 30%;
    animation: ds-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes ds-progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}


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

@media (max-width: 768px) {
    .ds-progress--lg {
        height: var(--progress-md-height);
    }
}


/* ── main.css ────────────────────────────────── */

/* Typography Setup — fonts.css is now included in bundle.css */
/* @import url("./fonts.css"); */

/* Import Unified Component Styles — now in bundle.css */
/* @import url("./unified-styles.css"); */

/* ================================
   POOOL - Main CSS
   Base styles for the application
   ================================ */

/* CSS Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'TT Norms Pro', sans-serif;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  margin: 0;
  padding: 0;
  /* `clip`, not `hidden`: overflow-x:hidden forces the computed overflow-y to
     `auto`, turning <body> into a scroll container. On mobile the real scroller
     is <html>, so this dead container silently breaks every `position: sticky`
     descendant (e.g. the settings section nav). `clip` prevents horizontal
     overflow identically without establishing a scroll container. */
  overflow-x: clip;
}

/* ================================
   App Layout Structure
   ================================ */

/* Main App Body */
.app-body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  min-height: 100vh;
  min-height: 100dvh;
}

/* App Wrapper - Contains Sidebar + Content */
.app-wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

/* Sidebar Container */
.app-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 256px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Main Content Area */
.app-content {
  margin-left: 256px;
  width: calc(100% - 256px);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-page);
  position: relative;
}

/* For pages without sidebar */
#app-container {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}

/* Keep the generic standalone layout tied to its explicit wrapper.
   `skip-link.js` assigns `id="main-content"` to every main landmark at
   runtime. A global `#main-content` selector therefore overrode `.app-content`
   on sidebar pages, centering a 1440px main region underneath the 256px
   sidebar and clipping the left edge. */
#app-container > #main-content {
  flex: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* ================================
   Unified Dashboard Page Layout
   Used for pages without page-specific CSS
   ================================ */

/* Core main content layout - consistent across all dashboard pages */
.dashboard-main {
  width: calc(100% - 256px);
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: 256px;
  padding: 48px 24px 64px 24px;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 0;
  box-sizing: border-box;
}

/* Inner container - constrains content to consistent width */
.dashboard-container {
  width: 100%;
  max-width: 1096px;
  margin: 0;
}

@media (max-width: 768px) {
  .dashboard-main {
    width: 100%;
    margin-left: 0;
    padding: 16px;
    padding-top: 80px;
  }
}

/* ================================
   Standard Page Header Pattern
   Icon + Title row (used by support, 
   and any other dashboard-main pages)
   ================================ */
.support-page-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.support-page-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.support-page-title {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: 44px;
  letter-spacing: -0.02em;
  color: var(--page-title-color);
  margin: 0;
}

.support-page-subtitle {
  font-family: 'TT Norms Pro', sans-serif;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--text-secondary);
  margin: 0;
}

/* ================================
   Typography
   ================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'TT Norms Pro', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--page-title-color);
}

h1 {
  font-size: var(--fs-4xl);
  line-height: 40px;
}

h2 {
  font-size: var(--fs-2xl);
  line-height: 32px;
}

h3 {
  font-size: var(--fs-xl);
  line-height: 28px;
}

h4 {
  font-size: var(--fs-md);
  line-height: 24px;
}

p {
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--text-secondary);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  filter: brightness(0.85);
}

/* ================================
   Buttons
   ================================ */

button {
  font-family: 'TT Norms Pro', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  border: none;
}

.btn-primary {
  background: var(--primary-color);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--primary-color);
}

.btn-primary:hover {
  filter: brightness(0.85);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--page-title-color);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

/* ================================
   Forms
   ================================ */

input,
textarea,
select {
  font-family: 'TT Norms Pro', sans-serif;
  font-size: var(--fs-sm);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  transition: all 0.2s ease;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.1);
}

label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--page-title-color);
  margin-bottom: 6px;
}

/* ================================
   Cards
   ================================ */

.card {
  /* Sophisticated Apple HIG frosted glass with physical depth */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.85) 100%);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 
      0 4px 6px -2px rgba(0, 0, 0, 0.02),
      0 12px 32px -4px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 2px rgba(0, 0, 0, 0.01);
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
  will-change: transform, backdrop-filter;
  transform: translateZ(0);
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 24px 24px 0 0;
  z-index: 0;
}

.card > * {
  position: relative;
  z-index: 1;
}

/* ================================
   Utility Classes
   ================================ */

.container {
  width: 100%;
  max-width: 1144px;
  margin: 0 auto;
  padding: 0 24px;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid {
  display: grid;
}

.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mt-1 {
  margin-top: 8px;
}

.mt-2 {
  margin-top: 16px;
}

.mt-3 {
  margin-top: 24px;
}

.mt-4 {
  margin-top: 32px;
}

.mb-1 {
  margin-bottom: 8px;
}

.mb-2 {
  margin-bottom: 16px;
}

.mb-3 {
  margin-bottom: 24px;
}

.mb-4 {
  margin-bottom: 32px;
}

.p-1 {
  padding: 8px;
}

.p-2 {
  padding: 16px;
}

.p-3 {
  padding: 24px;
}

.p-4 {
  padding: 32px;
}

/* ================================
   HTMX Indicators
   ================================ */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Loading States */
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ================================
   Alpine.js Utilities
   ================================ */

[x-cloak] {
  display: none !important;
}

/* ================================
   Scrollbar Styling
   ================================ */

/* Hide main page scrollbar — replaced by branded custom scrollbar (scrollbar.js) */
html, body {
  -ms-overflow-style: none;  /* IE 10+ and old EdgeHTML */
  scrollbar-width: none;     /* Firefox, Chrome 121+, Safari 17+, Edge 121+ */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera, Brave, new Edge (Chromium) */
  width: 0;
  height: 0;
}

/* Hide the custom scrollbar on mobile */
@media (max-width: 768px) {
  #poool-scrollbar { display: none !important; }
}

/* Internal scrollbars (tables, dropdowns, modals) stay subtle */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-subtle);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ================================
   Responsive Design
   ================================ */

@media (max-width: 1440px) {
  .app-content {
    width: calc(100% - 256px);
  }
}

@media (max-width: 1024px) {
  .app-sidebar {
    width: 240px;
  }

  .app-content {
    margin-left: 240px;
    width: calc(100% - 240px);
  }
}

@media (max-width: 768px) {
  .app-wrapper {
    flex-direction: column;
  }

  .app-sidebar {
    position: relative;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .app-content {
    margin-left: 0;
    width: 100%;
  }
}

/* ================================
   Transitions & View Transitions API
   ================================ */

/* Removed global transition rule that was interfering with specific component animations */
/* Components should define their own transition rules for better control */

/* Cross-document snapshot transitions are deliberately disabled.
   Chrome Mobile and Firefox Desktop both produced correct visible button
   hit-targets whose real pointer actions were delayed or swallowed while a
   cross-document snapshot remained active. Navigation animation is cosmetic;
   deterministic input, accessibility and transaction safety take priority. */
@view-transition {
  navigation: none;
}

@supports (view-transition-name: none) {
  :root,
  #dynamic-sidebar-container,
  .ds-main {
    view-transition-name: none;
  }

  ::view-transition,
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
    pointer-events: none;
  }
}

/* ================================
   Z-Index Scale
   ================================ */

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-100 {
  z-index: 100;
}


/* ── property-item-card.css ────────────────────────────────── */

/* Unified Property Item Card Styles */
/* Used across Cart, Checkout, and other pages */

.property-item-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  gap: 20px;
  width: 669px;
  height: 174px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border-color, var(--table-border-color));
  border-radius: var(--card-border-radius, 12px);
}

.property-item-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  gap: 41px;
  width: 637px;
  height: 92px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.property-item-image-info {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  width: 361px;
  height: 92px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.property-item-image {
  width: 128px;
  height: 91px;
  border-radius: 12px;
  flex: none;
  order: 0;
  flex-grow: 0;
  overflow: hidden;
}

.property-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-item-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
  width: 217px;
  height: 92px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.property-item-title {
  width: 217px;
  height: 40px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--page-title-color);
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0;
}

.property-item-metrics {
  width: 200px;
  height: 40px;
  flex: none;
  order: 1;
  flex-grow: 0;
  position: relative;
}

/* Two column metrics layout */
.property-item-metric:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  position: absolute;
  width: 88px;
  height: 40px;
  left: 0px;
  top: 0px;
}

.property-item-metric:last-child:not(.single-metric) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  position: absolute;
  width: 88px;
  height: 40px;
  left: 120px;
  top: 0px;
}

/* Single metric layout */
.property-item-metric.single-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  position: absolute;
  width: 154px;
  height: 40px;
  left: 0px;
  top: 0px;
}

.metric-label-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 4px;
  height: 18px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.metric-label {
  height: 18px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: #414651;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.property-item-metric.single-metric .metric-label {
  width: 138px;
  white-space: nowrap;
}

.property-item-metric:not(.single-metric) .metric-label {
  width: 72px;
}

.help-icon {
  width: 12px;
  height: 12px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.metric-value {
  height: 18px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: #000000;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Pricing section */
.property-item-pricing {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0px;
  margin: 0 auto;
  width: 235px;
  height: 92px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.property-item-price-section {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  margin: 0 auto;
  width: 235px;
  height: 36px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Quantity controls */
.quantity-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 36px;
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  flex: none;
  flex-grow: 0;
  transition: all 0.2s ease;
}

.quantity-btn:hover {
  background: #f5f5f6;
  border-color: var(--primary-color);
}

.quantity-btn:active {
  transform: scale(0.95);
}

.quantity-btn.minus {
  padding: 18px 12px;
  gap: 10px;
  order: 0;
}

.quantity-btn.minus .icon-line {
  width: 14px;
  height: 0px;
  border: 2px solid var(--primary-color);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.quantity-btn.plus {
  padding: 11px 12px;
  gap: 10px;
  order: 2;
}

.quantity-display {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--page-title-color);
  min-width: 20px;
  text-align: center;
}

/* Price box */
.property-item-price-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px 20px;
  gap: 10px;
  min-width: 143px;
  width: auto;
  height: 36px;
  border: 1px solid var(--table-border-color);
  border-radius: 12px;
  background: white;
  flex: none;
  order: 1;
  flex-grow: 0;
  box-sizing: border-box;
}

.property-item-price-box.standalone {
  margin: 0 auto;
}

.property-item-price {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px;
  gap: 4px;
  width: 100%;
  min-width: 79px;
  height: 28px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 28px;
  text-align: center;
  color: var(--page-title-color);
  white-space: nowrap;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Progress bar */
.property-item-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 12px;
  margin: 0 auto;
  width: 225px;
  height: 18px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.progress-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 1px;
  gap: 10px;
  width: 144px;
  height: 8px;
  background: var(--progress-track-bg, #D5D7DA);
  border-radius: var(--progress-border-radius, 30px);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.progress-bar-fill {
  height: 8px;
  background: var(--progress-fill-bg, #98FB96);
  border-radius: var(--progress-border-radius, 30px);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.funded-text {
  width: 69px;
  height: 18px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: right;
  color: var(--text-secondary);
  flex: none;
  order: 1;
  flex-grow: 0;
  white-space: nowrap;
}

/* Footer */
.property-item-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 10px;
  width: 637px;
  height: 30px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  border: none;
}

.property-item-remove-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 4px;
  width: 89px;
  height: 30px;
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  background: white;
  flex: none;
  order: 0;
  flex-grow: 0;
  cursor: pointer;
}

.property-item-remove-btn .remove-icon {
  width: 16px;
  height: 16px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.property-item-remove-btn .remove-text {
  width: 47px;
  height: 18px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: #a4a7ae;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Checkout and cart specifics will go here when implemented */


/* ── sidebar-navigation.css ────────────────────────────────── */

/* ===========================
   POOOL Sidebar Navigation
   Exact Figma Design Implementation
   =========================== */

/* Import TT Norms Pro Font */

/* ===========================
   Sidebar Container
   =========================== */
.sidebar-navigation {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  position: fixed;
  width: 256px;
  height: 100vh;
  height: 100dvh;
  left: 0;
  top: 0;
  background: #ffffff;
  border-right: 1px solid var(--table-border-color);
  z-index: 1000;
  overflow: hidden;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  width: 256px;
  height: 100vh;
  height: 100dvh;
  flex: 1;
  order: 0;
  align-self: stretch;
}

/* ===========================
   Navigation Section
   =========================== */
.sidebar-navigation-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 0px 0px;
  gap: 16px;
  isolation: isolate;
  width: 256px;
  flex: 1 1 auto;
  min-height: 0;
  order: 0;
  align-self: stretch;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===========================
   Header Section
   =========================== */
.sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 16px;
  gap: 16px;
  width: 256px;
  min-height: 96.4px;
  flex: 0 0 auto;
  order: 0;
  align-self: stretch;
  z-index: 1;
}

/* Logo */
.sidebar-logo {
  display: block;
  width: 139px;
  height: 37px;
  flex: none;
  order: 0;
  flex-grow: 0;
  position: relative;
}

.sidebar-logo img {
  width: 139px;
  height: 37px;
  display: block;
}

/* ===========================
   Search Input
   =========================== */
.sidebar-search-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: 216px;
  height: 34px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.sidebar-search {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 10px;
  gap: 8px;
  width: 216px;
  height: 34px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.sidebar-search-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 232px;
  height: 24px;
  flex: none;
  order: 0;
  flex-grow: 1;
}

.sidebar-search-icon {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.sidebar-search-icon svg {
  width: 20px;
  height: 20px;
}

.sidebar-search-icon path {
  stroke: #717680;
  stroke-width: 1.4px;
}

.sidebar-search-input {
  width: 204px;
  height: 24px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--page-title-color);
  border: none;
  outline: none;
  background: transparent;
  flex: none;
  order: 1;
  flex-grow: 1;
}

.sidebar-search-input::placeholder {
  color: #717680;
}

/* ===========================
   Navigation Menu
   =========================== */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 16px;
  width: 224px;
  height: auto;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  z-index: 0;
}

/* Nav Item Base */
.nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 0px;
  width: 224px;
  height: 38px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
  position: relative;
}

.nav-item-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 10px;
  gap: 8px;
  width: 224px;
  height: 36px;
  background: #ffffff;
  border-radius: 6px;
  flex: none;
  order: 0;
  flex-grow: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
}

.nav-item-content:hover {
  background: #f5f5f6;
}

/* Active State */
.nav-item.active .nav-item-content {
  background: rgba(3, 255, 136, 0.15);
  /* Light version of brand lime */
}

/* Text and Icon Container */
.nav-text-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 184px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 1;
}

/* Icon Wrapper */
.nav-icon-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 2px 0px 0px;
  width: 22px;
  height: 20px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
  display: block;
}

/* Icon image filters for active state */
.nav-item.active .nav-icon {
  filter: brightness(0) saturate(100%) invert(11%) sepia(97%) saturate(7484%) hue-rotate(247deg) brightness(94%) contrast(148%);
}

/* Default icon color filter */
.nav-item:not(.active) .nav-icon {
  filter: brightness(0) saturate(100%) invert(46%) sepia(7%) saturate(568%) hue-rotate(185deg) brightness(92%) contrast(86%);
}

/* Nav Text */
.nav-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #414651;
  /* Gray/700 */
  flex: none;
  order: 2;
  flex-grow: 0;
}

.nav-item.active .nav-text {
  color: var(--brand-dark-blue);
  /* Text Dark Blue */
}

/* Badge (base styles) */
.nav-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  height: 22px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  margin-left: auto;
  flex-shrink: 0;
  order: 1;
}

/* ===========================
   Footer Section
   =========================== */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 16px 16px;
  gap: 16px;
  margin-top: auto;
  width: 256px;
  flex: 0 0 auto;
  order: 1;
  align-self: stretch;
}

/* Footer Navigation */
.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 256px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Support Badge with Status */
.support-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 6px;
  gap: 4px;
  width: 61px;
  height: 22px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 6px;
  margin-left: auto;
  flex-shrink: 0;
  order: 1;
}

.support-status-dot {
  width: 8px;
  height: 8px;
  position: relative;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.support-status-dot::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 1px;
  top: 1px;
  background: #17b26a;
  border-radius: 50%;
}

.support-badge-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  color: #414651;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* ===========================
   Community Card
   =========================== */
.nav-featured-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px 16px;
  gap: 12px;
  isolation: isolate;
  width: 224px;
  height: auto;
  background: rgba(3, 255, 136, 0.1);
  /* Light brand lime */
  border-radius: 12px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  position: relative;
}

/* Close Button */
.featured-card-close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 36px;
  height: 36px;
  right: 8px;
  top: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}

.featured-card-close img {
  width: 36px;
  height: 36px;
}

/* Card Text Content */
.featured-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  width: 232px;
  height: 84px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  z-index: 1;
}

.featured-card-title {
  width: 224px;
  height: 20px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--primary-color);
  flex: none;
  order: 0;
  flex-grow: 1;
}

.featured-card-description {
  width: 232px;
  height: 60px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #000000;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Card Image */
.featured-card-image {
  width: 232px;
  height: 144px;
  border-radius: 6px;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
  z-index: 2;
  position: relative;
}

.featured-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Play button using image */
.featured-card-play-button {
  position: absolute !important;
  width: 48px !important;
  height: 48px !important;
  left: 12px !important;
  bottom: 12px !important;
  cursor: pointer;
  z-index: 10;
  object-fit: contain;
}

/* Card Actions */
.featured-card-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 10px;
  width: 152px;
  height: 20px;
  flex: none;
  order: 3;
  flex-grow: 0;
  z-index: 3;
}

.featured-card-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 8px;
  height: 20px;
  flex: none;
  flex-grow: 0;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
}

.featured-card-button.dismiss {
  color: var(--text-secondary);
}

.featured-card-button.action {
  color: var(--primary-color);
}

.featured-card-button:hover {
  opacity: 0.8;
}

/* ===========================
   Account Card
   =========================== */
.nav-account-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 12px;
  gap: 16px;
  isolation: isolate;
  width: 224px;
  height: 64px;
  margin: 0 16px;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 12px;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
  position: relative;
  overflow: hidden;
}

/* Avatar label group */
.account-avatar-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  max-width: calc(100% - 28px);
  height: 40px;
  flex: 1;
  min-width: 0;
  order: 0;
  z-index: 0;
}

.account-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 200px;
  object-fit: cover;
  display: block;
}

/* Contrast border */
.account-avatar::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  opacity: 0.08;
  border: 0.75px solid #000000;
  border-radius: 200px;
  pointer-events: none;
}

/* Avatar online indicator */
.account-online-indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  bottom: 0px;
  background: #17b26a;
  border: 1.5px solid #ffffff;
  border-radius: 5px;
}

/* Text and supporting text */
.account-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0px;
  height: 40px;
  flex: 1;
  min-width: 0;
  order: 1;
  overflow: hidden;
}

.account-name {
  width: 100%;
  height: 20px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--page-title-color);
  flex: none;
  order: 0;
  flex-grow: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-email {
  width: 100%;
  height: 20px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--primary-color);
  flex: none;
  order: 1;
  flex-grow: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Account Menu Button */
.account-menu-button {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  position: absolute;
  width: 32px;
  height: 32px;
  right: 6px;
  top: 6px;
  flex: none;
  order: 1;
  flex-grow: 0;
  z-index: 1;
}

.account-menu-button-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 6px;
  row-gap: 0px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex: none;
  order: 0;
  flex-grow: 0;
  cursor: pointer;
  background: transparent;
  border: none;
}

.account-menu-button-inner:hover {
  background: #f5f5f6;
}

.account-menu-icon {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.account-menu-icon path {
  stroke: #a4a7ae;
  stroke-width: 1.4px;
}

/* Soon badge for Rewards and Leaderboard - Investor sidebar */
/* Position relative removed - badges now use flexbox */

.soon-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  gap: 4px;
  width: 42px;
  height: 22px;
  background: #e5e5ff;
  border: 1px solid #a7a7ff;
  border-radius: 6px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  color: var(--primary-color);
  margin-left: auto;
  flex-shrink: 0;
  z-index: 1;
}


/* ── bem/sidebar.css ────────────────────────────────── */

/* ===========================
   POOOL Sidebar - Complete BEM Implementation
   This file contains ALL styles from sidebar-navigation.css and sidebar-developer.css
   Mapped to BEM naming convention
   =========================== */

/* Import TT Norms Pro Font */

/* ===========================
   Sidebar Wrapper — ALL page-specific sidebar wrapper divs must have
   width: 0 so they don't push content in flex layouts.
   The inner <aside class="sidebar"> is position:fixed (out of flow),
   so these wrappers should consume zero space.
   =========================== */
#dynamic-sidebar-container,
.marketplace-sidebar,
.portfolio-sidebar,
.rewards-sidebar,
.wallet-sidebar,
.cart-page-sidebar,
.commodity-page-sidebar,
.property-page-sidebar,
.kyc-sidebar,
.developer-dashboard-sidebar,
.developer-assets-sidebar,
.submission-success-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  flex-shrink: 0;
  overflow: visible;
  padding: 0;
}

/* ===========================
   Block: Sidebar Container
   From: .sidebar-navigation (sidebar-navigation.css:12-27)
   =========================== */
.sidebar {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  position: fixed;
  width: 256px;
  height: 100vh; height: 100dvh;
  left: 0;
  top: 0;
  background: #ffffff;
  border-right: 1px solid var(--table-border-color);
  z-index: 1000;
  overflow: hidden;
}

/* From: .sidebar-content (sidebar-navigation.css:29-41) */
.sidebar__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  width: 256px;
  height: 100vh; height: 100dvh;
  flex: 1;
  order: 0;
  align-self: stretch;
}

/* ===========================
   Navigation Section
   From: .sidebar-navigation-section (sidebar-navigation.css:46-60)
   =========================== */
.sidebar__nav-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 0px 0px;
  gap: 16px;
  isolation: isolate;
  width: 256px;
  flex: 1 1 auto;
  /* Allow to grow and shrink */
  min-height: 0;
  /* Important for overflow to work */
  order: 0;
  align-self: stretch;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===========================
   Header Section
   From: .sidebar-header (sidebar-navigation.css:65-78)
   =========================== */
.sidebar__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 16px;
  gap: 16px;
  width: 256px;
  min-height: 96.4px;
  flex: 0 0 auto;
  /* Don't grow or shrink */
  order: 0;
  align-self: stretch;
  z-index: 1;
}

/* Logo
   From: .sidebar-logo (sidebar-navigation.css:81-89) */
.sidebar__logo {
  display: block;
  width: 143px;
  height: 45px;
  flex: none;
  order: 0;
  flex-grow: 0;
  position: relative;
}

.sidebar__logo img {
  width: 143px;
  height: 45px;
  display: block;
}

.sidebar__logo--with-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
}

.sidebar__logo--with-badge img {
  width: auto;
  height: 28px;
  flex-shrink: 0;
}

.sidebar__role-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.sidebar__role-badge--developer {
  background: #EEF4FF;
  border: 1px solid rgba(0, 0, 255, 0.15);
  color: #0000FF;
}

.sidebar__role-badge--investor {
  background: #ECFDF3;
  border: 1px solid rgba(2, 122, 72, 0.2);
  color: #027A48;
}

/* ===========================
   Search Input
   From: .sidebar-search-wrapper (sidebar-navigation.css:100-112)
   =========================== */
.sidebar__search-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: 216px;
  height: 30px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* From: .sidebar-search (sidebar-navigation.css:114-131) */
.sidebar__search {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 8px;
  gap: 6px;
  width: 216px;
  height: 34px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  overflow: hidden;
}

/* Remove focus outline on search container */
.sidebar__search:focus-within {
  outline: none !important;
  border: 1px solid #d5d7da !important;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05) !important;
}

/* From: .sidebar-search-content (sidebar-navigation.css:133-144) */
.sidebar__search-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 6px;
  width: calc(100% - 4px);
  height: 24px;
  flex: none;
  order: 0;
  flex-grow: 1;
}

/* From: .sidebar-search-icon (sidebar-navigation.css:146-162) */
.sidebar__search-icon {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.sidebar__search-icon svg {
  width: 20px;
  height: 20px;
}

.sidebar__search-icon path {
  stroke: #717680;
  stroke-width: 1.4px;
}

/* From: .sidebar-search-input (sidebar-navigation.css:164-183) */
.sidebar__search-input {
  width: 100%;
  height: 24px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--page-title-color);
  border: none;
  outline: none;
  background: transparent;
  flex: none;
  order: 1;
  flex-grow: 1;
}

/* Remove focus styles from search input */
.sidebar__search-input:focus {
  outline: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sidebar__search-input::placeholder {
  color: #717680;
}

/* ===========================
   Navigation Menu
   From: .sidebar-nav (sidebar-navigation.css:188-200)
   =========================== */
.sidebar__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 16px;
  width: 224px;
  height: auto;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  z-index: 0;
}

/* Nav Item Base
   From: .nav-item (sidebar-navigation.css:203-214) */
.sidebar__nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 0px;
  width: 224px;
  height: 38px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

/* From: .nav-item-content (sidebar-navigation.css:216-233) */
.sidebar__nav-item-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  gap: 8px;
  width: 224px;
  height: 36px;
  background: #ffffff;
  border-radius: 6px;
  flex: none;
  order: 0;
  flex-grow: 1;
  cursor: pointer;
  transition: color 0s ease, background-color 0s ease, filter 0s ease;
  text-decoration: none;
}

/* From: .nav-item-content:hover (sidebar-navigation.css:235-237) */
.sidebar__nav-item-content:hover {
  background: rgba(3, 255, 136, 0.08);
}

.sidebar__nav-item-content:active {
  background: rgba(3, 255, 136, 0.15);
}

/* Icon turns blue on hover (matching active state) */
.sidebar__nav-item-content:hover .nav-icon {
  filter: brightness(0) saturate(100%) invert(11%) sepia(97%) saturate(7484%) hue-rotate(247deg) brightness(94%) contrast(148%);
}

/* Prevent hover effect on disabled items */
.sidebar__nav-item-content--disabled:hover {
  background: #ffffff;
}

/* Active State
   From: .nav-item.active .nav-item-content (sidebar-navigation.css:240-242) */
.sidebar__nav-item--active .sidebar__nav-item-content {
  background: rgba(3, 255, 136, 0.15);
  /* Light green for investor navbar */
}

/* Disabled State for navigation items */
.sidebar__nav-item-content--disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* Apply opacity only to text and icons, not badges */
.sidebar__nav-item-content--disabled .sidebar__nav-text,
.sidebar__nav-item-content--disabled .sidebar__nav-icon-wrapper,
.sidebar__nav-item-content--disabled .nav-icon {
  opacity: 0.6;
}

/* Keep badges normal (full opacity) in disabled items */
.sidebar__nav-item-content--disabled .soon-badge,
.sidebar__nav-item-content--disabled .support-badge,
.sidebar__nav-item-content--disabled .nav-badge,
.sidebar__nav-item-content--disabled .notifications-badge,
.sidebar__nav-item-content--disabled .sidebar__nav-badge {
  opacity: 1;
}

/* Dashboard specific active state for developer
   From: #nav-item-dashboard.active .nav-item-content (sidebar-developer.css:4-8) */
#nav-item-dashboard.sidebar__nav-item--active .sidebar__nav-item-content {
  background: rgba(3, 255, 136, 0.15);
  /* Light green for developer dashboard */
  border-radius: 6px;
}

/* Developer navbar active states */
.sidebar--developer .sidebar__nav-item--active .sidebar__nav-item-content {
  background: rgba(3, 255, 136, 0.15);
  /* Light green for all developer navbar items */
}

/* Investor navbar active states */
.sidebar--investor .sidebar__nav-item--active .sidebar__nav-item-content {
  background: rgba(3, 255, 136, 0.15);
  /* Different green for investor navbar items */
}

/* Text and Icon Container
   From: .nav-text-icon (sidebar-navigation.css:245-256) */
.sidebar__nav-text-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  height: 20px;
  flex: 1;
  order: 0;
}

/* Icon Wrapper
   From: .nav-icon-wrapper (sidebar-navigation.css:259-269) */
.sidebar__nav-icon-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 2px 0px 0px;
  width: 22px;
  height: 20px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* From: .nav-icon (sidebar-navigation.css:271-278) */
.nav-icon {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
  display: block;
}

/* Icon filters for active state
   From: .nav-item.active .nav-icon (sidebar-navigation.css:281-283) */
.sidebar__nav-item--active .nav-icon {
  filter: brightness(0) saturate(100%) invert(11%) sepia(97%) saturate(7484%) hue-rotate(247deg) brightness(94%) contrast(148%);
}

/* Default icon color filter
   From: .nav-item:not(.active) .nav-icon (sidebar-navigation.css:286-288) */
.sidebar__nav-item:not(.sidebar__nav-item--active) .nav-icon {
  filter: brightness(0) saturate(100%) invert(46%) sepia(7%) saturate(568%) hue-rotate(185deg) brightness(92%) contrast(86%);
}

/* Nav Text
   From: .nav-text (sidebar-navigation.css:291-301) */
.sidebar__nav-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #414651;
  flex: none;
  order: 2;
  flex-grow: 0;
}

/* From: .nav-item.active .nav-text (sidebar-navigation.css:303-305) */
.sidebar__nav-item--active .sidebar__nav-text {
  color: var(--brand-dark-blue);
}

/* Dashboard specific active text for developer
   From: #nav-item-dashboard.active .nav-text (sidebar-developer.css:10-14) */
#nav-item-dashboard.sidebar__nav-item--active .nav-text {
  color: var(--brand-dark-blue);
  font-weight: 700;
}

/* Badge base styles
   From: .nav-badge (sidebar-navigation.css:308-329) */
.sidebar__nav-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  height: 22px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  margin-left: auto;
  flex-shrink: 0;
  order: 1;
}

/* Notifications badge - green
   From: .notifications-badge (sidebar-developer.css:17-39) */
.sidebar__nav-badge--notifications,
.notifications-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  width: 28px;
  height: 20px;
  background: #fafafa;
  border: 1px solid var(--table-border-color);
  border-radius: 16px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-2xs);
  line-height: 16px;
  text-align: center;
  color: #17b26a;
  margin-left: auto;
  flex-shrink: 0;
  order: 1;
}

/* Support online badge
   From: .nav-badge.support-online-badge (sidebar-developer.css:74-84) */
.sidebar__nav-badge--support {
  padding: 2px 6px;
  gap: 4px;
  width: auto;
  min-width: 61px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 6px;
  color: #414651;
}

/* ===========================
   Footer Section
   From: .sidebar-footer (sidebar-navigation.css:334-346)
   =========================== */
.sidebar__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 16px 16px;
  gap: 16px;
  margin-top: auto;
  /* Push to bottom */
  width: 256px;
  flex: 0 0 auto;
  /* Don't grow or shrink */
  order: 1;
  align-self: stretch;
}

/* Footer Navigation
   From: .footer-nav (sidebar-navigation.css:349-359) */
.sidebar__footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 256px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Support Badge with Status
   From: .support-badge (sidebar-navigation.css:362-379) */
.support-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 6px;
  gap: 4px;
  min-width: 61px;
  height: 22px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* From: .support-status-dot (sidebar-navigation.css:381-399) */
.support-status-dot {
  width: 8px;
  height: 8px;
  position: relative;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.support-status-dot::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 1px;
  top: 1px;
  background: #17b26a;
  border-radius: 50%;
}

/* From: .support-badge-text (sidebar-navigation.css:401-412) */
.support-badge-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  color: #414651;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* ===========================
   Featured Card (Community/Support Chat)
   From: .nav-featured-card (sidebar-navigation.css:417-433)
   =========================== */
.sidebar__featured-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px 16px;
  gap: 12px;
  isolation: isolate;
  width: 224px;
  height: auto;
  background: rgba(3, 255, 136, 0.1);
  /* Brand lime - community card */
  border-radius: 12px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  position: relative;
}

/* Developer Support Chat Card specific
   From: .nav-featured-card.support-chat-card (sidebar-developer.css:181-197) */
.sidebar__featured-card--support {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 16px;
  isolation: isolate;
  width: 224px;
  height: 182px;
  margin: 0 0px 16px 0px;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 12px;
  position: relative;
}

/* Close Button
   From: .featured-card-close (sidebar-navigation.css:436-455) */
.sidebar__featured-close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 36px;
  height: 36px;
  right: 8px;
  top: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}

.sidebar__featured-close img {
  width: 36px;
  height: 36px;
}

/* Developer specific close button
   From: .nav-featured-card .featured-card-close (sidebar-developer.css:200-225) */
.sidebar__featured-card--support .sidebar__featured-close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  position: absolute;
  width: 36px;
  height: 36px;
  right: 8px;
  top: 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 0;
}

.sidebar__featured-card--support .sidebar__featured-close:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sidebar__featured-card--support .sidebar__featured-close svg {
  width: 20px;
  height: 20px;
}

/* Card Text Content
   From: .featured-card-text (sidebar-navigation.css:458-471) */
.sidebar__featured-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  width: 232px;
  height: auto;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  z-index: 1;
}

/* Developer specific featured text
   From: .featured-card-text (sidebar-developer.css:285-293) */
.sidebar__featured-card--support .sidebar__featured-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  width: 192px;
  height: 64px;
}

/* From: .featured-card-title (sidebar-navigation.css:473-485) */
.sidebar__featured-title {
  width: 224px;
  height: 20px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--primary-color);
  flex: none;
  order: 0;
  flex-grow: 1;
}

/* Developer specific title
   From: .featured-card-title (sidebar-developer.css:295-305) */
.sidebar__featured-card--support .sidebar__featured-title {
  width: 113px;
  height: 20px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--primary-color);
  margin: 0;
}

/* From: .featured-card-description (sidebar-navigation.css:487-500) */
.sidebar__featured-description {
  width: 232px;
  height: 60px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #000000;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Developer specific description
   From: .featured-card-description (sidebar-developer.css:307-317) */
.sidebar__featured-card--support .sidebar__featured-description {
  width: 192px;
  height: 40px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--text-secondary);
  margin: 0;
}

/* Card Image
   From: .featured-card-image (sidebar-navigation.css:503-520) */
.sidebar__featured-image {
  width: 100%;
  height: auto;
  max-height: 140px;
  border-radius: 6px;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
  z-index: 2;
  position: relative;
  overflow: hidden;
}

.sidebar__featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Play button
   From: .featured-card-play-button (sidebar-navigation.css:523-532) */
.sidebar__featured-play {
  position: absolute !important;
  width: 48px !important;
  height: 48px !important;
  left: 12px !important;
  bottom: 12px !important;
  cursor: pointer;
  z-index: 10;
  object-fit: contain;
}

/* Card Actions
   From: .featured-card-actions (sidebar-navigation.css:536-548) */
.sidebar__featured-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 10px;
  width: 152px;
  height: 20px;
  flex: none;
  order: 3;
  flex-grow: 0;
  z-index: 3;
}

/* From: .featured-card-button (sidebar-navigation.css:550-581) */
.sidebar__featured-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 8px;
  height: 20px;
  flex: none;
  flex-grow: 0;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
}

.sidebar__featured-button--dismiss {
  color: var(--text-secondary);
}

.sidebar__featured-button--action {
  color: var(--primary-color);
}

.sidebar__featured-button:hover {
  opacity: 0.8;
}

/* Chat support button (developer specific)
   From: .featured-card-button.chat-support-btn (sidebar-developer.css:320-354) */
.sidebar__featured-button--chat {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 4px;
  width: 192px;
  height: 36px;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
}

.sidebar__featured-button--chat:hover {
  background: #f8f9fc;
}

.sidebar__featured-button--chat svg {
  width: 20px;
  height: 20px;
}

.sidebar__featured-button--chat span {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #414651;
}

/* Developer Badge and content wrapper
   From: .featured-card-content (sidebar-developer.css:228-237) */
.sidebar__featured-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
  width: 192px;
  height: 98px;
  z-index: 1;
}

/* Online badge
   From: .featured-card-badge.online-badge (sidebar-developer.css:240-253) */
.sidebar__featured-badge--online {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 6px;
  gap: 4px;
  width: 61px;
  height: 22px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 6px;
}

.sidebar__featured-badge--online .support-status-dot {
  width: 8px;
  height: 8px;
  position: relative;
}

.sidebar__featured-badge--online .support-status-dot::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 1px;
  top: 1px;
  background: #17b26a;
  border-radius: 50%;
}

.sidebar__featured-badge--online .support-badge-text {
  width: 37px;
  height: 18px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  color: #414651;
}

/* ===========================
   Account Card
   From: .nav-account-card (sidebar-navigation.css:586-606)
   =========================== */
.sidebar__account-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 12px;
  gap: 16px;
  isolation: isolate;
  width: 224px;
  height: 64px;
  margin: 0 0;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 12px;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
  position: relative;
  overflow: hidden;
}

/* Avatar label group
   From: .account-avatar-group (sidebar-navigation.css:609-621) */
.sidebar__account-avatar-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  /* Leave room for the 32px menu button + 6px offset on the right */
  max-width: calc(100% - 28px);
  height: 40px;
  flex: 1;
  min-width: 0;
  order: 0;
  z-index: 0;
}

/* From: .account-avatar (sidebar-navigation.css:623-653) */
.sidebar__account-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.sidebar__account-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 200px;
  object-fit: cover;
  display: block;
}

/* Contrast border */
.sidebar__account-avatar::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  opacity: 0.08;
  border: 0.75px solid #000000;
  border-radius: 200px;
  pointer-events: none;
}

/* Avatar online indicator
   From: .account-online-indicator (sidebar-navigation.css:656-665) */
.sidebar__account-online {
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  bottom: 0px;
  background: #17b26a;
  border: 1.5px solid #ffffff;
  border-radius: 5px;
}

/* Text and supporting text
   From: .account-text-wrapper (sidebar-navigation.css:668-678) */
.sidebar__account-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0px;
  height: 40px;
  flex: 1;
  min-width: 0;
  order: 1;
  overflow: hidden;
}

/* From: .account-name (sidebar-navigation.css:680-692) */
.sidebar__account-name {
  display: block;
  width: 100%;
  height: 20px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--page-title-color);
  flex: none;
  order: 0;
  flex-grow: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* From: .account-email (sidebar-navigation.css:694-706) */
.sidebar__account-email {
  display: block;
  width: 100%;
  height: 20px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--primary-color);
  flex: none;
  order: 1;
  flex-grow: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Account Menu Button
   From: .account-menu-button (sidebar-navigation.css:709-723) */
.sidebar__account-menu {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  position: absolute;
  width: 32px;
  height: 32px;
  right: 6px;
  top: 6px;
  flex: none;
  order: 1;
  flex-grow: 0;
  z-index: 1;
}

/* From: .account-menu-button-inner (sidebar-navigation.css:725-747) */
.sidebar__account-menu-button {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 6px;
  row-gap: 0px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex: none;
  order: 0;
  flex-grow: 0;
  cursor: pointer;
  background: transparent;
  border: none;
}

.sidebar__account-menu-button:hover {
  background: rgba(3, 255, 136, 0.08);
}

/* From: .account-menu-icon (sidebar-navigation.css:749-760) */
.sidebar__account-menu-icon {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.sidebar__account-menu-icon path {
  stroke: #a4a7ae;
  stroke-width: 1.4px;
}

/* Soon badge
   From: .soon-badge (sidebar-navigation.css:768-793 and sidebar-developer.css:46-71) */
.soon-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  gap: 4px;
  min-width: 42px;
  height: 22px;
  background: #e5e5ff;
  border: 1px solid #a7a7ff;
  border-radius: 6px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  color: var(--primary-color);
  margin-left: auto;
  flex-shrink: 0;
  z-index: 1;
}

/* Developer specific soon badge
   From: #nav-item-reports .soon-badge (sidebar-developer.css:42-71) */
#nav-item-reports .soon-badge {
  width: 38px;
  height: 20px;
  font-size: var(--fs-2xs);
  line-height: 16px;
}

/* Position for specific nav items
   From: #nav-item-rewards, #nav-item-leaderboard (sidebar-navigation.css:763-766) */
#nav-item-rewards,
#nav-item-leaderboard,
#nav-item-reports {
  position: relative;
}

/* ===========================
   Developer Specific: Add Asset Button
   From: .add-asset-section (sidebar-developer.css:104-111)
   =========================== */
.add-asset-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 0px 0px;
  width: 224px;
  margin: 0;
  box-sizing: border-box;
}

/* From: .add-asset-btn (sidebar-developer.css:114-143) */
.add-asset-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 6px;
  width: 100%;
  height: 38px;
  background: #0000FF;
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.add-asset-btn:hover {
  background: #0000a0;
}

.add-asset-btn:active {
  background: #000050;
}

/* From: .add-asset-btn svg (sidebar-developer.css:146-157) */
.add-asset-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.add-asset-btn svg path {
  stroke: #98FB96;
  stroke-width: 1.66667px;
}

/* From: .add-asset-text (sidebar-developer.css:160-178) */
.add-asset-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px 2px;
  width: 100px;
  height: 24px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #98FB96;
  white-space: nowrap;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* ===========================
   Profile Dropdown Animation
   =========================== */

/* Smooth dropdown animation */
#profile-dropdown-menu {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  transform-origin: bottom left;
}

/* Animation keyframes for dropdown */
@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes dropdownSlideOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
}

/* Active state for menu button */
.sidebar__account-menu-button.active {
  background: rgba(3, 255, 136, 0.15);
}

/* ===========================
   Backwards Compatibility
   Templates currently use both old and new classes
   Old styles are handled by the original CSS files
   =========================== */
/* ===========================
   Expandable Navigation Styles
   Parent items with dropdowns
   =========================== */

/* Disable transitions during page load to prevent animation flash */
.sidebar--no-transition .sidebar__nav-children {
  transition: none !important;
}

.sidebar--no-transition .sidebar__nav-chevron {
  transition: none !important;
}

/* Nav item containing expandable parent - stack vertically */
.sidebar__nav-item:has(.sidebar__nav-item--parent) {
  flex-direction: column;
  align-items: flex-start;
  height: auto;
}

/* Parent item with chevron */
.sidebar__nav-item--parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

/* Chevron icon */
.sidebar__nav-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  margin-left: auto;
}

/* Rotated chevron when expanded */
.sidebar__nav-chevron--expanded {
  transform: rotate(180deg);
}

/* Children container */
.sidebar__nav-children {
  display: flex;
  flex-direction: column;
  padding: 4px 0px 4px 28px;
  gap: 2px;
  width: 100%;
  overflow: hidden;
  transition:
    height 0.3s ease,
    padding 0.3s ease;
}

/* Collapsed state */
.sidebar__nav-children--collapsed {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Individual child item */
.sidebar__nav-child {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 10px;
  height: 32px;
  background: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0s ease, color 0s ease;
}

.sidebar__nav-child:hover {
  background: rgba(3, 255, 136, 0.08);
}

.sidebar__nav-child:active {
  background: rgba(3, 255, 136, 0.15);
}

/* Active child item */
.sidebar__nav-child--active {
  background: #e8ffe8;
}

.sidebar__nav-child--active:hover {
  background: #e8ffe8;
}

/* Child item text */
.sidebar__nav-child-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #414651;
}

.sidebar__nav-child--active .sidebar__nav-child-text {
  color: var(--brand-dark-blue);
  font-weight: 700;
}


/* ── sidebar-developer.css ────────────────────────────────── */

/* Developer Sidebar Specific Styles */

/* Dashboard - Active state */
#nav-item-dashboard.active .nav-item-content {
  /* Brand Green Accent/25 */
  background: rgba(3, 255, 136, 0.1);
  border-radius: 6px;
}

#nav-item-dashboard.active .nav-text {
  /* Test Dark Blue */
  color: var(--brand-dark-blue);
  font-weight: 700;
}

/* All developer navbar items active state */
.nav-item.active .nav-item-content {
  background: rgba(3, 255, 136, 0.1);
}

/* Notifications badge - green */
.notifications-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  width: 28px;
  height: 20px;
  background: #fafafa;
  border: 1px solid var(--table-border-color);
  border-radius: 16px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-2xs);
  line-height: 16px;
  text-align: center;
  color: #17b26a;
  margin-left: auto;
  flex-shrink: 0;
  order: 1;
}

/* Soon badge - blue */

.soon-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  gap: 4px;
  height: 20px;
  background: #EEF4FF;
  border: 1px solid #C7D7FE;
  border-radius: 16px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-2xs);
  line-height: 16px;
  text-align: center;
  color: #1B2559;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 1;
}

/* Support online badge - specific styling */
.nav-badge.support-online-badge {
  padding: 2px 6px;
  gap: 4px;
  width: auto;
  min-width: 61px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 6px;
  color: #414651;
}

.support-status-dot {
  width: 8px;
  height: 8px;
  position: relative;
}

.support-status-dot::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 1px;
  top: 1px;
  background: #17b26a;
  border-radius: 50%;
}

/* Add Asset Button Section */
.add-asset-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 0px 0px;
  gap: 10px;
  width: 224px;
  box-sizing: border-box;
}

/* Add Asset Button - Exact Design Specifications */
.add-asset-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 6px;
  width: 100%;
  height: 38px;
  background: #0000FF;
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}

.add-asset-btn:hover {
  background: #0000CC;
}

.add-asset-btn:active {
  background: #0000AA;
}

/* Plus Icon */
.add-asset-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.add-asset-btn svg path {
  stroke: #98FB96;
  stroke-width: 1.66667px;
}

/* Text */
.add-asset-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px 2px;
  width: 100px;
  height: 24px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #98FB96;
  white-space: nowrap; /* Prevent text wrapping */
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Developer Support Chat Card - Exact specifications */
.nav-featured-card.support-chat-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 16px;
  isolation: isolate;
  width: 224px;
  height: 182px;
  margin: 0 0px 16px 0px;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 12px;
  position: relative;
}

/* Close button */
.nav-featured-card .featured-card-close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  position: absolute;
  width: 36px;
  height: 36px;
  right: 8px;
  top: 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 0;
}

.nav-featured-card .featured-card-close:hover {
  background: rgba(0, 0, 0, 0.04);
}

.nav-featured-card .featured-card-close svg {
  width: 20px;
  height: 20px;
}

/* Badge and text wrapper */
.featured-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
  width: 192px;
  height: 98px;
  z-index: 1;
}

/* Online badge */
.featured-card-badge.online-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 6px;
  gap: 4px;
  width: 61px;
  height: 22px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 6px;
}

.featured-card-badge .support-status-dot {
  width: 8px;
  height: 8px;
  position: relative;
}

.featured-card-badge .support-status-dot::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 1px;
  top: 1px;
  background: #17b26a;
  border-radius: 50%;
}

.featured-card-badge .support-badge-text {
  width: 37px;
  height: 18px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  color: #414651;
}

/* Text and supporting text */
.featured-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  width: 192px;
  height: 64px;
}

.featured-card-title {
  width: 113px;
  height: 20px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--primary-color);
  margin: 0;
}

.featured-card-description {
  width: 192px;
  height: 40px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--text-secondary);
  margin: 0;
}

/* Chat support button */
.featured-card-button.chat-support-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 4px;
  width: 192px;
  height: 36px;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
}

.featured-card-button.chat-support-btn:hover {
  background: #f8f9fc;
}

.featured-card-button.chat-support-btn svg {
  width: 20px;
  height: 20px;
}

.featured-card-button.chat-support-btn span {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #414651;
}

/* Developer nav specific overrides */
.sidebar-navigation .nav-item .nav-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #414651;
}

.sidebar-navigation .nav-item.active .nav-text {
  color: var(--brand-dark-blue);
}

/* Account card - Developer profile styling */
#account-email {
  color: var(--primary-color) !important;
}

/* Reduce footer gap for developer sidebar to bring profile badge closer */
.sidebar__footer {
  gap: 8px !important;
}


/* ── profile-dropdown.css ────────────────────────────────── */

/* Profile Dropdown Menu - Exact Figma Implementation */

/* Menu container — brand chrome (gradient bar atop, soft brand shadow). */
.profile-dropdown-menu {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  position: fixed !important;
  width: 280px;
  height: auto;
  max-height: 80vh;
  max-height: 80dvh;
  left: 248px !important;
  bottom: 20px !important;
  background: #ffffff;
  border: 1px solid var(--card-border-color, #E5E7EB);
  box-shadow:
    0px 18px 36px -12px rgba(0, 0, 255, 0.14),
    0px 8px 16px -8px rgba(10, 13, 18, 0.08),
    0px 2px 4px -2px rgba(10, 13, 18, 0.05);
  border-radius: 14px;
  flex: none;
  order: 2;
  flex-grow: 0;
  z-index: 99999;
  overflow: hidden;
  position: relative;
}

.profile-dropdown-menu::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #0000FF 0%, #03FF88 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
  display: block;
  z-index: 1;
}

/* Menu items wrapper */
.profile-menu-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 100%;
  height: auto;
  background: #ffffff;
  border: 0;
  border-radius: 0 0 14px 14px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Menu items sections */
.profile-menu-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 0px;
  gap: 2px;
  width: 264px;
  min-height: 0;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Individual menu item */
.profile-menu-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
  width: 100%;
  height: 40px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

/* Menu item content */
.profile-menu-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  gap: 12px;
  width: 252px;
  height: 36px;
  border-radius: 6px;
  flex: none;
  order: 0;
  flex-grow: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-menu-content:hover {
  background: #f5f5f5;
  transform: translateX(2px);
}

/* Icon and text group */
.profile-icon-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  flex: none;
  order: 0;
  flex-grow: 1;
  overflow: hidden;
}

/* Menu icon */
.profile-menu-icon {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Menu text */
.profile-menu-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  /* Gray/700 */
  color: #414651;
  flex: none;
  order: 1;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shortcut wrapper */
.profile-shortcut-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 1px 4px;
  mix-blend-mode: multiply;
  /* Gray/200 */
  border: 1px solid var(--table-border-color);
  border-radius: 4px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Shortcut text */
.profile-shortcut {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  /* Gray/600 */
  color: var(--text-secondary);
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Switch account section (now the topmost section since Docs is removed). */
.profile-switch-section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 0 6px;
  gap: 2px;
  width: 100%;
  height: auto;
  border-top: 0;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.profile-switch-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 4px 14px 8px;
  width: 100%;
  height: auto;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.profile-switch-title {
  width: 100%;
  height: 18px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 18px;
  color: var(--text-secondary);
  flex: none;
  order: 0;
  flex-grow: 1;
}

/* Account item */
.profile-menu-item.account-item {
  height: 56px;
}

/* Account content */
.profile-account-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 10px;
  gap: 12px;
  isolation: isolate;
  width: 100%;
  height: 56px;
  border-radius: 10px;
  flex: none;
  order: 0;
  flex-grow: 1;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.profile-menu-item.account-item:hover .profile-account-content {
  background: rgba(0, 0, 255, 0.04);
  transform: none;
}

.profile-menu-item.account-item.selected .profile-account-content {
  background: rgba(0, 0, 255, 0.06);
}

.profile-menu-item.account-item.selected:hover .profile-account-content {
  background: rgba(0, 0, 255, 0.08);
}

/* Avatar group */
.profile-avatar-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 236px;
  height: 40px;
  flex: none;
  order: 0;
  flex-grow: 1;
  z-index: 0;
}

/* Avatar container */
.profile-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 200px;
  flex: none;
  order: 0;
  flex-grow: 0;
  overflow: visible;
  transition: transform 0.2s ease;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 200px;
  object-fit: cover;
  transition: transform 0.2s ease;
  /* Prevent broken image Alt text from overflowing and overlapping */
  display: block;
  font-size: 0;
  overflow: hidden;
  text-indent: -9999px;
}

/* Avatar hover effect */
.profile-menu-item.account-item:hover .profile-avatar {
  transform: scale(1.05);
}

.profile-menu-item.account-item:hover .profile-avatar img {
  transform: scale(1.1);
}

/* Avatar contrast border */
.profile-avatar-border {
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  opacity: 0.08;
  /* Base/Black */
  border: 0.75px solid #000000;
  border-radius: 200px;
}

/* Online indicator */
.profile-online-indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  bottom: 0px;
  /* Success/500 */
  background: #17b26a;
  /* Base/White */
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  z-index: 3;
}

/* Text wrapper */
.profile-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  flex: 1;
  order: 1;
  min-width: 0;
  overflow: hidden;
}

/* Account name */
.profile-account-name {
  display: block;
  min-height: 20px;
  min-width: 120px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  /* Gray/900 */
  color: var(--page-title-color);
  flex: none;
  order: 0;
  align-self: stretch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Account type */
.profile-account-type {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  flex: none;
  order: 1;
  align-self: stretch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Account type colors */
.profile-menu-item.account-item.selected .profile-account-type {
  color: var(--primary-color);
}

.profile-menu-item.account-item:not(.selected) .profile-account-type {
  color: var(--text-secondary);
}

/* Checkbox */
.profile-checkbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  position: absolute;
  width: 16px;
  height: 16px;
  right: 8px;
  top: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  flex: none;
  order: 1;
  flex-grow: 0;
  z-index: 1;
  transition: all 0.2s ease;
}

/* Selected checkbox */
.profile-checkbox.selected {
  /* Brand/600 */
  background: var(--primary-color);
  /* Brand/600 */
  border: 1px solid var(--primary-color);
}

/* Unselected checkbox */
.profile-checkbox:not(.selected) {
  /* Gray/300 */
  border: 1px solid #d5d7da;
  background: transparent;
}

/* Hover effect on unselected checkbox */
.profile-menu-item.account-item:hover .profile-checkbox:not(.selected) {
  border-color: #a7a7ff;
  background: #f9f9ff;
}

/* Hover effect on selected checkbox */
.profile-menu-item.account-item:hover .profile-checkbox.selected {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* Checkbox check mark */
.profile-checkbox.selected .profile-checkbox-check {
  position: absolute;
  left: 31.25%;
  right: 31.25%;
  top: 31.25%;
  bottom: 31.25%;
  /* Base/White */
  background: #ffffff;
  border-radius: 9999px;
}

/* Add account section */
.profile-add-account {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2px 8px 8px;
  gap: 8px;
  width: 264px;
  height: 46px;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
}

/* Add account button */
.profile-add-button {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 4px;
  width: 248px;
  height: 36px;
  /* Base/White */
  background: #ffffff;
  /* Gray/300 */
  border: 1px solid #d5d7da;
  /* Shadows/shadow-xs-skeuomorphic */
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  flex: none;
  order: 0;
  flex-grow: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-add-button:hover {
  background: #f9f9ff;
  border-color: #a7a7ff;
  transform: translateY(-1px);
  box-shadow:
    0px 2px 4px rgba(16, 24, 40, 0.08),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

/* Add button text */
.profile-add-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  /* Gray/700 */
  color: #414651;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Footer items */
.profile-footer-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 0px 6px;
  gap: 2px;
  width: 264px;
  height: auto;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* ── mobile-header.css ────────────────────────────────── */

/* ===========================
   Mobile Header Component
   Based on reference specifications
   =========================== */

/* Suppress tap-highlight flash globally; safe — does not block selection */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* Disable text selection ONLY on the mobile header chrome (logo, icon
   buttons, badges) to prevent accidental highlight when tapping. Page
   content remains selectable so users can copy property names, prices,
   etc. */
.mobile-header,
.mobile-header * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Mobile Header Container */
.mobile-header {
  box-sizing: border-box;
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 7px 12px 16px;
  /* `space-between` already separates logo and icons; a fixed 119px gap (a
     Figma-export artifact) forced a min logo+119+icons width that overflowed
     narrow phones (~5px past a 360px viewport). Use a small safe min gap. */
  gap: 12px;
  position: fixed;
  width: 100%;
  max-width: 375px;
  height: 64px;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  background: #ffffff;
  border-bottom: 1px solid var(--table-border-color);
  z-index: 1000;
}

/* Logo - Reusing desktop logo but scaled for mobile */
.mobile-header__logo {
  width: 94px;
  height: 24px;
  flex: none;
  order: 0;
  flex-grow: 0;
  display: flex;
  align-items: center;
}

.mobile-header__logo img {
  width: 94px;
  height: 24px;
  object-fit: contain;
}

/* Icons Container */
.mobile-header__icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 136px;
  height: 40px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Icon Buttons - Reusing existing icon styles */
.mobile-header__icon-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  gap: 8px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  flex: none;
  flex-grow: 0;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.mobile-header__icon-btn:hover {
  background: #f5f5f5;
}

.mobile-header__icon-btn:active {
  background: var(--table-border-color);
}

/* Icon Styling */
.mobile-header__icon {
  width: 24px;
  height: 24px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Notification Button */
.mobile-header__icon-btn--notification {
  order: 0;
}

/* Cart Button */
.mobile-header__icon-btn--cart {
  order: 1;
}

/* Burger Menu Button */
.mobile-header__icon-btn--burger {
  order: 2;
}

/* Notification Badge - Reusing existing badge styles */
.mobile-header__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ff0000;
  color: #ffffff;
  border-radius: 8px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Burger Menu Icon Lines */
.mobile-header__burger-line {
  width: 18px;
  height: 2px;
  background: #000000;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.mobile-header__burger-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 24px;
  height: 24px;
  position: relative;
}

.mobile-header__burger-icon .mobile-header__burger-line:nth-child(1) {
  position: absolute;
  top: 5px;
}

.mobile-header__burger-icon .mobile-header__burger-line:nth-child(2) {
  position: absolute;
  top: 11px;
}

.mobile-header__burger-icon .mobile-header__burger-line:nth-child(3) {
  position: absolute;
  top: 17px;
}

/* Burger Active State (X) */
.mobile-header__icon-btn--burger.active
  .mobile-header__burger-line:nth-child(1) {
  transform: rotate(45deg);
  top: 11px;
}

.mobile-header__icon-btn--burger.active
  .mobile-header__burger-line:nth-child(2) {
  opacity: 0;
}

.mobile-header__icon-btn--burger.active
  .mobile-header__burger-line:nth-child(3) {
  transform: rotate(-45deg);
  top: 11px;
}

/* Media Query - Show mobile header only on mobile devices */
@media (max-width: 768px) {
  .mobile-header {
    display: flex;
  }

  /* Adjust body padding to account for fixed header */
  body {
    padding-top: 0px;
  }

  /* Hide desktop sidebar on mobile */
  .sidebar,
  .app-sidebar,
  #sidebar-navigation,
  .wallet-sidebar,
  .marketplace-sidebar,
  .developer-dashboard-sidebar,
  #developer-dashboard-sidebar {
    display: none !important;
  }

  /* Adjust main content */
  .marketplace-main,
  .wallet-main,
  .app-content,
  .developer-dashboard-main,
  #developer-dashboard-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 29px !important; /* Account for fixed mobile header */
  }
}

/* Tablet specific adjustments */
@media (min-width: 376px) and (max-width: 768px) {
  .mobile-header {
    max-width: 100%;
  }
}


/* ── mobile-burger-menu.css ────────────────────────────────── */

/* ===========================
   Mobile Burger Menu (Slide-out Navigation)
   Based on reference specifications
   Reusing desktop sidebar components with mobile dimensions
   =========================== */

/* Burger Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  /* Above header (1000) */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Off-canvas drawers (and their `right: -282px` parking position) used to
   inflate `documentElement.scrollWidth` past the viewport on mobile, which
   caused real horizontal jiggle when users panned. Clip horizontally on
   the body/html so the parked menu never contributes to scroll area.

   `clip`, not `hidden`: `overflow-x: hidden` forces the computed `overflow-y`
   to `auto`, turning <body> into a dead scroll container (the real scroller is
   <html>) that silently breaks every `position: sticky` descendant on mobile —
   e.g. the settings section nav. `clip` prevents the horizontal jiggle just as
   well without establishing a scroll container. */
@media (max-width: 1024px) {
  html, body {
    overflow-x: clip;
  }
}

/* Burger Menu Container */
.mobile-burger-menu {
  box-sizing: border-box;
  position: fixed;
  width: 282px;
  right: -282px;
  /* Hidden off-screen initially */
  top: 0;
  bottom: 0;
  background: #ffffff;
  border-left: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  z-index: 1002;
  /* Above overlay (1001) */
  transition: right 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-burger-menu.active {
  right: 0;
  /* Slide in from right */
}

/* Burger Menu Header */
.mobile-burger-menu__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px 0px 0px;
  width: 282px;
  height: 56px;
  flex: 0 0 auto;
  /* Header should not grow or shrink */
}

.mobile-burger-menu__header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 24px 0px 32px;
  width: 282px;
  height: 40px;
}

/* Logo in Burger Menu */
.mobile-burger-menu__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  margin: 0 auto;
  width: 155px;
  height: 28px;
  order: 0;
  flex-grow: 0;
}

.mobile-burger-menu__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===========================
   Developer-Specific Mobile Menu Styles
   =========================== */

/* Add Asset Button - Developer Special Feature */
.mobile-burger-menu__add-asset-item {
  background: var(--primary-color) !important;
  border-radius: 6px;
  color: #ffffff !important;
  margin: 8px 12px !important;
  padding: 0px 24px !important;
  justify-content: center !important;
  width: calc(100% - 24px) !important;
}

.mobile-burger-menu__add-asset-item:hover {
  background: #0000cc !important;
}

.mobile-burger-menu__add-asset-icon {
  background: transparent !important;
  border: none !important;
}

.mobile-burger-menu__add-asset-text {
  color: #ffffff !important;
  font-weight: 700;
}

/* Disabled Navigation Items */
.mobile-burger-menu__nav-item--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.mobile-burger-menu__nav-item--disabled .mobile-burger-menu__nav-text {
  color: #717680;
}

/* Developer Navigation Badges */
.mobile-burger-menu__nav-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 16px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-2xs);
  line-height: 16px;
  text-align: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* Notifications Badge - Green */
.notifications-badge {
  background: #fafafa;
  border: 1px solid var(--table-border-color);
  color: #17b26a;
  min-width: 28px;
  height: 20px;
}

/* Soon Badge - Blue */
.soon-badge {
  background: #eff4ff;
  border: 1px solid #b2ddff;
  color: var(--primary-color);
  min-width: 40px;
  height: 20px;
}

/* Support Badge Adjustments for Developer */
.mobile-burger-menu__support-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.mobile-burger-menu__support-dot {
  width: 8px;
  height: 8px;
  background: #17b26a;
  border-radius: 50%;
}

.mobile-burger-menu__support-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-2xs);
  line-height: 16px;
  color: #17b26a;
}

/* Close Button */
.mobile-burger-menu__close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  gap: 8px;
  margin: 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  order: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mobile-burger-menu__close:hover {
  background: #f5f5f5;
}

.mobile-burger-menu__close-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

.mobile-burger-menu__close-icon::before,
.mobile-burger-menu__close-icon::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--primary-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mobile-burger-menu__close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-burger-menu__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Navigation Menu - Reusing desktop nav items with mobile styles */
.mobile-burger-menu__nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0px 0px 20px 0px;
  gap: 4px;
  width: 282px;
  flex: 1 1 auto;
  /* Navigation should take remaining space and scroll */
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  margin-top: 24px;
}

/* Nav Item Button - Reusing desktop nav structure */
.mobile-burger-menu__nav-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 0px 0px 24px;
  gap: 8px;
  width: 100%;
  /* Ensure nav items don't have weird margins */
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
  position: relative;
  margin: 0;
  /* Ensure nav items don't have weird margins */
}

.mobile-burger-menu__nav-item:hover {
  background: #f5f5f5;
}

.mobile-burger-menu__nav-item.active {
  background: #f0f0ff;
}

/* Icon Wrapper */
.mobile-burger-menu__nav-icon-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 2px 0px 0px;
  width: 22px;
  height: 20px;
  order: 0;
  flex-grow: 0;
}

.mobile-burger-menu__nav-icon {
  width: 20px;
  height: 20px;
  order: 0;
  flex-grow: 0;
  /* Default grey filter for non-active icons */
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(100%);
}

/* Active state icon color */
.mobile-burger-menu__nav-item.active .mobile-burger-menu__nav-icon {
  filter: brightness(0) saturate(100%) invert(13%) sepia(94%) saturate(7466%) hue-rotate(247deg) brightness(94%) contrast(143%);
}

/* Nav Text */
.mobile-burger-menu__nav-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 24px;
  display: flex;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  color: #000000;
  order: 1;
  flex-grow: 0;
}

.mobile-burger-menu__nav-item.active .mobile-burger-menu__nav-text {
  color: var(--primary-color);
}

/* Badge for nav items */
.mobile-burger-menu__nav-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 8px;
  position: absolute;
  right: 24px;
  height: 22px;
  background: #fafafa;
  border: 1px solid var(--table-border-color);
  border-radius: 16px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  color: #414651;
}

/* Support Badge with Online Status */
.mobile-burger-menu__support-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 6px;
  gap: 4px;
  position: absolute;
  right: 24px;
  height: 22px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 6px;
}

.mobile-burger-menu__support-dot {
  width: 6px;
  height: 6px;
  background: #17b26a;
  border-radius: 3px;
  order: 0;
}

.mobile-burger-menu__support-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  color: #414651;
  order: 1;
}

/* Footer Section */
.mobile-burger-menu__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0px 20px;
  gap: 16px;
  width: 282px;
  flex: 0 0 auto;
  /* Footer should stick to bottom */
  border-top: 1px solid var(--table-border-color);
  background: #ffffff;
  margin-top: auto;
  position: relative;
  bottom: auto;
}

/* Featured Card - Reusing desktop community card */
.mobile-burger-menu__featured-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 16px;
  isolation: isolate;
  width: calc(100% - 28px);
  /* Ensure footer content is properly sized */
  background: rgba(3, 255, 136, 0.1);
  border-radius: 12px;
  position: relative;
  margin: 0 auto;
}

/* Support Chat Card - Developer specific */
.mobile-burger-menu__featured-card--support {
  box-sizing: border-box;
  width: calc(100% - 28px);
  height: 160px;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 12px;
}

/* Support Card Content Container */
.mobile-burger-menu__featured-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
  width: 100%;
  height: auto;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  z-index: 1;
}

/* Support Card Badge (Online status) */
.mobile-burger-menu__featured-badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 6px;
  gap: 4px;
  width: 61px;
  height: 22px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 6px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.mobile-burger-menu__featured-badge--online .mobile-burger-menu__support-dot {
  width: 8px;
  height: 8px;
  background: #17b26a;
  border-radius: 50%;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.mobile-burger-menu__featured-badge--online .mobile-burger-menu__support-text {
  width: 37px;
  height: 18px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
  color: #414651;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Support Card Title and Description */
.mobile-burger-menu__featured-card--support .mobile-burger-menu__featured-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  width: 100%;
  height: auto;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.mobile-burger-menu__featured-card--support .mobile-burger-menu__featured-title {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--primary-color);
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0;
}

.mobile-burger-menu__featured-card--support .mobile-burger-menu__featured-description {
  width: 100%;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--text-secondary);
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  margin: 0;
}

/* Support Card Button */
.mobile-burger-menu__featured-button--chat {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 4px;
  width: 100%;
  height: 35px;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
  z-index: 2;
  cursor: pointer;
}

.mobile-burger-menu__featured-button--chat img {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.mobile-burger-menu__featured-button--chat span {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #414651;
  flex: none;
  order: 1;
  flex-grow: 0;
  text-align: center;
}

/* Featured Card Close Button */
.mobile-burger-menu__featured-close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  position: absolute;
  width: 36px;
  height: 36px;
  right: 8px;
  top: 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex: none;
  order: 0;
  flex-grow: 0;
  z-index: 0;
}

.mobile-burger-menu__featured-close-icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.mobile-burger-menu__featured-close-icon::before,
.mobile-burger-menu__featured-close-icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 1.67px;
  background: var(--primary-color);
  top: 9px;
  left: 5px;
}

/* Support card close button - gray color */
.mobile-burger-menu__featured-card--support .mobile-burger-menu__featured-close-icon::before,
.mobile-burger-menu__featured-card--support .mobile-burger-menu__featured-close-icon::after {
  background: #a4a7ae;
}

.mobile-burger-menu__featured-close-icon::before {
  transform: rotate(45deg);
}

.mobile-burger-menu__featured-close-icon::after {
  transform: rotate(-45deg);
}

/* Featured Card Content */
.mobile-burger-menu__featured-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  width: 202px;
  z-index: 1;
}

.mobile-burger-menu__featured-title {
  width: 178px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--primary-color);
  margin: 0;
}

.mobile-burger-menu__featured-description {
  width: 202px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: #000000;
  margin: 0;
}

/* Featured Card Image */
.mobile-burger-menu__featured-image {
  width: 202px;
  height: 94px;
  background: var(--table-border-color);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.mobile-burger-menu__featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Featured Card Actions */
.mobile-burger-menu__featured-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
  height: 20px;
}

.mobile-burger-menu__featured-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 8px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
}

.mobile-burger-menu__featured-button--dismiss {
  color: var(--text-secondary);
}

.mobile-burger-menu__featured-button--action {
  color: var(--primary-color);
}

/* Account Card - Reusing desktop account card */
.mobile-burger-menu__account-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 12px;
  gap: 16px;
  isolation: isolate;
  width: calc(100% - 28px);
  /* Ensure footer content is properly sized */
  height: 64px;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
}

/* Avatar Group */
.mobile-burger-menu__avatar-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  flex: 1;
  z-index: 0;
}

.mobile-burger-menu__avatar {
  width: 40px;
  height: 40px;
  border-radius: 200px;
  position: relative;
  overflow: hidden;
}

.mobile-burger-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-burger-menu__avatar-online {
  position: absolute;
  width: 10px;
  height: 10px;
  right: -2px;
  bottom: -2px;
  background: #17b26a;
  border: 2px solid #ffffff;
  border-radius: 50%;
  z-index: 1;
}

/* Account Text */
.mobile-burger-menu__account-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
}

.mobile-burger-menu__account-name {
  display: block;
  min-height: 20px;
  min-width: 120px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--page-title-color);
}

.mobile-burger-menu__account-email {
  display: block;
  min-height: 20px;
  min-width: 120px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--primary-color);
}

/* Account Menu Button */
.mobile-burger-menu__account-menu {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  position: absolute;
  width: 32px;
  height: 32px;
  right: 6px;
  top: 6px;
}

.mobile-burger-menu__account-menu-button {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 6px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.mobile-burger-menu__account-menu-icon {
  width: 20px;
  height: 20px;
}

/* ===========================
   Mobile Dropdown Navigation (Marketplace)
   =========================== */

/* Parent Item with Chevron */
.mobile-burger-menu__nav-item--parent {
  flex-direction: row;
  align-items: center;
  padding: 0px 0px 0px 24px;
  background: transparent;
  cursor: pointer;
}

.mobile-burger-menu__nav-item--parent .mobile-burger-menu__nav-text-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* Chevron Icon */
.mobile-burger-menu__nav-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 24px;
  transition: transform 0.2s ease;
}

.mobile-burger-menu__nav-chevron--expanded {
  transform: rotate(180deg);
}

/* Children Container */
.mobile-burger-menu__nav-children {
  display: flex;
  flex-direction: column;
  padding: 4px 0px 4px 48px;
  gap: 2px;
  width: 100%;
  overflow: hidden;
  transition:
    height 0.3s ease,
    padding 0.3s ease;
}

.mobile-burger-menu__nav-children--collapsed {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Child Item Link */
.mobile-burger-menu__nav-child {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  height: 40px;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mobile-burger-menu__nav-child:hover {
  background: #f5f5f5;
}

.mobile-burger-menu__nav-child--active {
  background: #f0f0ff;
}

.mobile-burger-menu__nav-child-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  text-transform: uppercase;
  color: #000000;
}

.mobile-burger-menu__nav-child--active .mobile-burger-menu__nav-child-text {
  color: var(--primary-color);
}

/* Show burger menu elements only on mobile */
@media (max-width: 768px) {
  /* Overlay should only show when active, not by default! */
  /* .mobile-menu-overlay - removed display: block - it should only show when active */
  /* mobile-burger-menu already has display: flex from main styles */
}

/* ── mobile-profile-dropdown.css ────────────────────────────────── */

/* Mobile Profile Dropdown Menu */

/* Menu container */
.mobile-profile-dropdown-menu {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  position: fixed !important;
  width: calc(100% - 32px);
  max-width: 320px;
  height: auto;
  max-height: 60vh; max-height: 60dvh;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px);
  bottom: 20px !important;
  background: #fafafa;
  border: 1px solid var(--table-border-color);
  box-shadow:
    0px 12px 16px -4px rgba(10, 13, 18, 0.08),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 2px 2px -1px rgba(10, 13, 18, 0.04);
  border-radius: 12px;
  z-index: 100000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s;
}

.mobile-profile-dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Menu items wrapper */
.mobile-profile-menu-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 100%;
  height: auto;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  border-radius: 12px 12px 16px 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Menu items sections */
.mobile-profile-menu-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 0px;
  gap: 2px;
  width: 100%;
  min-height: 0;
}

/* Individual menu item */
.mobile-profile-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 6px;
  width: 100%;
  min-height: 36px;
}

/* Menu item content */
.mobile-profile-menu-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-profile-menu-content:active {
  background: #f5f5f5;
  transform: scale(0.98);
}

/* Icon and text group */
.mobile-profile-icon-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  flex: 1;
}

/* Menu icon */
.mobile-profile-menu-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Menu text */
.mobile-profile-menu-text {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #414651;
  flex: 1;
}

/* Switch account section */
.mobile-profile-switch-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 0px 6px;
  gap: 0px;
  width: 100%;
}

/* Switch header */
.mobile-profile-switch-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 14px 4px;
  width: 100%;
  height: 28px;
}

.mobile-profile-switch-title {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 20px;
  color: #717680;
}

/* Account item specific styling */
.mobile-profile-menu-item.account-item {
  min-height: 56px;
}

/* Account content */
.mobile-profile-account-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-profile-account-content:active {
  background: #f5f5f5;
  transform: scale(0.98);
}

/* Avatar group */
.mobile-profile-avatar-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 12px;
  flex: 1;
}

/* Avatar container */
.mobile-profile-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.mobile-profile-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Avatar border */
.mobile-profile-avatar-border {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

/* Online indicator */
.mobile-profile-online-indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  right: -2px;
  bottom: -2px;
  background: #17b26a;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

/* Text wrapper */
.mobile-profile-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 0px;
  flex: 1;
  min-width: 0;
}

.mobile-profile-account-name {
  display: block;
  min-height: 20px;
  min-width: 120px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--page-title-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.mobile-profile-account-type {
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #717680;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Checkbox */
.mobile-profile-checkbox {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 1.5px solid #d5d7da;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.mobile-profile-checkbox.selected {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.mobile-profile-checkbox-check {
  width: 0;
  height: 0;
  opacity: 0;
  transition: all 0.15s ease;
}

.mobile-profile-checkbox.selected .mobile-profile-checkbox-check {
  width: 8px;
  height: 6px;
  opacity: 1;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translateY(-1px);
}

/* Selected state for account item */
.mobile-profile-menu-item.account-item.selected {
  background: transparent;
}

/* Footer items */
.mobile-profile-footer-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 0px;
  gap: 2px;
  width: 100%;
  border-top: 1px solid var(--table-border-color);
}

/* Ensure dropdown works only on mobile */
@media (max-width: 768px) {
  .mobile-profile-dropdown-menu {
    /* Let opacity and visibility handle the show/hide */
  }
}

/* ── mobile-bottom-nav.css ────────────────────────────────── */

/* ================================================================
   Mobile Bottom Navigation  (Phase 1 — Nav-Ergonomie)
   ================================================================
   Daumenzonen-Primärnavigation für Investor-Seiten. ERGÄNZT das
   Burger-Menü (ersetzt es nicht): die 4 meistgenutzten Ziele direkt
   erreichbar, "Mehr" öffnet das vorhandene Burger-Menü (toggleMobileMenu).

   - Nur Mobil (<=768px, kanonische Breakpoint-Konvention).
   - Nur gerendert auf Investor-Seiten ({% if not is_developer %} im
     Template) -> Desktop/Developer/Admin/Auth sehen sie nicht.
   - Touch-Targets >=44px (min-height 56px), :active + :focus-visible.
   - z-index 999: unter Header (1000) und Burger-Overlay (1001), damit
     das Burger-Menü sauber darüber liegt.
   ================================================================ */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background: var(--input-bg, #FFFFFF);
        border-top: 1px solid #EAECF0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -1px 8px rgba(16, 24, 40, 0.04);
    }

    .mobile-bottom-nav__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 56px;            /* >=44px Touch-Target */
        padding: 6px 4px;
        margin: 0;
        border: none;
        background: none;
        cursor: pointer;
        text-decoration: none;
        color: #717680;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav__icon {
        width: 22px;
        height: 22px;
        opacity: 0.65;
    }

    .mobile-bottom-nav__label {
        font-size: 11px;
        line-height: 1;
        font-weight: 500;
    }

    /* Aktiver Tab: Label + Indikatorbalken in Brand-Blau (Icon-SVGs sind
       img mit fest eingebackener Farbe -> Aktiv-Signal via Label/Balken/
       Opazität, nicht via Icon-Recolor). */
    .mobile-bottom-nav__item.is-active {
        color: var(--btn-primary-bg, #0000FF);
    }

    .mobile-bottom-nav__item.is-active .mobile-bottom-nav__icon {
        opacity: 1;
    }

    .mobile-bottom-nav__item.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--btn-primary-bg, #0000FF);
    }

    /* Tap-Feedback + Tastatur-Fokus */
    .mobile-bottom-nav__item:active {
        transform: scale(0.94);
    }

    .mobile-bottom-nav__item:focus-visible {
        outline: 2px solid var(--btn-primary-bg, #0000FF);
        outline-offset: -2px;
        border-radius: 8px;
    }

    /* "Mehr"-Burger-Glyph (currentColor, folgt dem Item-Farbzustand) */
    .mobile-bottom-nav__more-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 22px;
        height: 22px;
    }

    .mobile-bottom-nav__more-icon span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        opacity: 0.65;
    }

    /* Inhalt nicht hinter der fixen Nav verstecken. Klassen-basiert
       (Script setzt body.has-bottom-nav, nur auf Investor-Seiten) statt
       :has() — deterministisch, unabhängig von Engine-/Seiten-Eigenheiten. */
    body.has-bottom-nav {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
}


/* ── poool-dropdown.css ────────────────────────────────── */

/* ================================
   POOOL - Unified Dropdown Component
   Matches the POOOL website design language
   ================================ */

:root {
  /* Design Tokens */
  --pd-primary: var(--input-border-focus, var(--primary-color, #0000FF));
  --pd-accent: var(--brand-green, #03FF88);
  --pd-text-main: var(--input-text-color, var(--page-title-color, #101828));
  --pd-text-medium: var(--body-color, #414651);
  --pd-text-light: var(--input-placeholder-color, #667085);
  --pd-text-muted: #98A2B3;
  --pd-border: var(--input-border-color, #D0D5DD);
  --pd-border-light: var(--table-border-color, #EAECF0);
  --pd-bg: var(--input-bg, #FFFFFF);
  --pd-bg-hover: #F5F5FF;
  --pd-bg-subtle: #F9FAFB;
  --pd-shadow:
    0px 4px 6px -2px rgba(16, 24, 40, 0.03),
    0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}

/* Admin Theme Overrides (Respects admin.css variables) */
.admin-body,
.admin-dark,
[class*="admin-"] {
  --pd-primary: var(--admin-accent, var(--primary-color));
  --pd-text-main: var(--admin-text-primary, #111827);
  --pd-text-medium: var(--admin-text-secondary, #4b5563);
  --pd-text-light: var(--admin-text-muted, #9ca3af);
  --pd-text-muted: var(--admin-text-muted, #9ca3af);
  --pd-border: var(--admin-border, #e5e7eb);
  --pd-border-light: var(--admin-border, #e5e7eb);
  --pd-bg: var(--admin-bg-card, #ffffff);
  --pd-bg-hover: var(--admin-hover-overlay, rgba(0, 0, 0, 0.03));
  --pd-bg-subtle: var(--admin-bg, #f7f8fa);
}

/* ─── Container ─── */
.poool-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  font-family: 'TT Norms Pro', sans-serif;
  transition: z-index 0.3s ease;
}

/* Ensure open dropdown is above EVERYTHING */
.poool-dropdown--open {
  z-index: 9999999 !important;
  overflow: visible !important;
}

/* ─── Label ─── */
.poool-dropdown__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 20px;
  color: var(--pd-text-medium);
  user-select: none;
}

.poool-dropdown__label--required::after {
  content: " *";
  color: #ef4444;
}

.poool-dropdown__label-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: help;
  color: var(--pd-text-muted);
}

/* ─── Trigger (the clickable dropdown button) ─── */
.poool-dropdown__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--pd-bg);
  border: 1px solid var(--pd-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  position: relative;
  font-family: inherit;
}

.poool-dropdown__trigger:hover {
  border-color: var(--pd-text-muted);
}

.poool-dropdown__trigger:focus,
.poool-dropdown__trigger--active {
  border-color: var(--pd-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08);
}

.poool-dropdown__trigger--error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.poool-dropdown__trigger--disabled {
  background: var(--pd-bg-subtle);
  border-color: var(--pd-border-light);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ─── Icon (left side, optional) ─── */
.poool-dropdown__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--pd-text-light);
  pointer-events: none;
  font-size: var(--fs-md);
  line-height: 1;
}

.poool-dropdown__icon img,
.poool-dropdown__icon svg {
  width: 20px;
  height: 20px;
}

/* ─── Selected Value Text ─── */
.poool-dropdown__value {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 24px;
  color: var(--pd-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.poool-dropdown__value--placeholder {
  color: var(--pd-text-light);
}

.poool-dropdown__value--selected {
  /* Selected vs placeholder is signalled by COLOR (--pd-text-main, darker than
     the --pd-text-light placeholder). Weight stays at the base 400 so the value
     reads one step below the 500-weight label — matches the app-wide input
     standard (see --input-font-weight). */
  color: var(--pd-text-main);
}

/* ─── Chevron (right side) ─── */
.poool-dropdown__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--pd-text-light);
  pointer-events: none;
  transition: transform 0.2s ease;
}

.poool-dropdown__trigger--active .poool-dropdown__chevron {
  transform: rotate(180deg);
}

/* ─── Options Panel (dropdown menu) ─── */
.poool-dropdown__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999999;
  background: var(--pd-bg);
  border: 1px solid var(--pd-border-light);
  border-radius: 8px;
  box-shadow: var(--pd-shadow);
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
  -webkit-overflow-scrolling: touch;
}

.poool-dropdown__panel--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Panel opening upward */
.poool-dropdown__panel--up {
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateY(4px);
}

.poool-dropdown__panel--up.poool-dropdown__panel--open {
  transform: translateY(0);
}

/* ─── Scrollbar Styling ─── */
.poool-dropdown__panel::-webkit-scrollbar {
  width: 6px;
}

.poool-dropdown__panel::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.poool-dropdown__panel::-webkit-scrollbar-thumb {
  background: var(--pd-border);
  border-radius: 3px;
}

.poool-dropdown__panel::-webkit-scrollbar-thumb:hover {
  background: var(--pd-text-muted);
}

/* ─── Search within dropdown ─── */
.poool-dropdown__search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--pd-border-light);
  position: sticky;
  top: 0;
  background: var(--pd-bg);
  z-index: 1;
}

.poool-dropdown__search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--pd-border-light);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: 'TT Norms Pro', sans-serif;
  color: var(--pd-text-main);
  background: var(--pd-bg);
  outline: none;
  transition: border-color 0.2s ease;
}

.poool-dropdown__search-input:focus {
  border-color: var(--pd-primary);
}

.poool-dropdown__search-input::placeholder {
  color: var(--pd-text-muted);
}

.poool-dropdown__search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--pd-text-muted);
  pointer-events: none;
}

/* ─── Option Group Label ─── */
.poool-dropdown__group-label {
  padding: 8px 14px 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 16px;
  color: var(--pd-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── Option Item ─── */
.poool-dropdown__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 20px;
  color: var(--pd-text-main);
  user-select: none;
}

.poool-dropdown__option:hover {
  background: var(--pd-bg-hover);
}

.poool-dropdown__option--focused {
  background: var(--pd-bg-hover);
}

.poool-dropdown__option--selected {
  background: var(--pd-bg-hover);
  font-weight: 500;
  color: var(--pd-primary);
}

.poool-dropdown__option--selected:hover {
  background: var(--pd-bg-hover);
}

.poool-dropdown__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Option Icon / Emoji ─── */
.poool-dropdown__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: var(--fs-md);
  line-height: 1;
}

.poool-dropdown__option-icon img,
.poool-dropdown__option-icon svg {
  width: 20px;
  height: 20px;
}

/* ─── Option Text ─── */
.poool-dropdown__option-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Option Description (secondary text) ─── */
.poool-dropdown__option-desc {
  font-size: var(--fs-xs);
  color: var(--pd-text-light);
  margin-top: 2px;
}

/* ─── Checkmark (for selected option) ─── */
.poool-dropdown__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--pd-primary);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.poool-dropdown__option--selected .poool-dropdown__check {
  opacity: 1;
}

/* ─── Divider ─── */
.poool-dropdown__divider {
  height: 1px;
  background: var(--pd-border-light);
  margin: 4px 0;
}

/* ─── No Results ─── */
.poool-dropdown__empty {
  padding: 16px 14px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--pd-text-light);
}

/* ─── Helper / Error Text ─── */
.poool-dropdown__helper {
  font-size: var(--fs-sm);
  line-height: 18px;
  color: var(--pd-text-light);
  margin-top: 2px;
}

.poool-dropdown__error {
  font-size: var(--fs-sm);
  line-height: 18px;
  color: #ef4444;
  margin-top: 2px;
}

/* =============================
   SIZE VARIANTS
   ============================= */

/* Sizes: xs (28) · sm (36) · md/default (44) · lg (52) · xl (60) */

/* Extra small */
.poool-dropdown--xs .poool-dropdown__trigger {
  height: 28px;
  padding: 0 8px;
  border-radius: 5px;
}

.poool-dropdown--xs .poool-dropdown__value {
  font-size: var(--fs-xs);
}

.poool-dropdown--xs .poool-dropdown__chevron {
  width: 16px;
  height: 16px;
}

.poool-dropdown--xs .poool-dropdown__option {
  padding: 5px 8px;
  min-height: 28px;
  font-size: var(--fs-xs);
}

.poool-dropdown--xs .poool-dropdown__panel {
  border-radius: 5px;
}

/* Small */
.poool-dropdown--sm .poool-dropdown__trigger {
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
}

.poool-dropdown--sm .poool-dropdown__value {
  font-size: var(--fs-sm);
}

.poool-dropdown--sm .poool-dropdown__option {
  padding: 6px 10px;
  min-height: 32px;
  font-size: var(--fs-sm);
}

.poool-dropdown--sm .poool-dropdown__panel {
  border-radius: 6px;
}

/* Large */
.poool-dropdown--lg .poool-dropdown__trigger {
  height: 52px;
  padding: 0 16px;
  border-radius: 10px;
}

.poool-dropdown--lg .poool-dropdown__value {
  font-size: var(--fs-md);
}

.poool-dropdown--lg .poool-dropdown__option {
  padding: 10px 16px;
  min-height: 44px;
  font-size: var(--fs-md);
}

.poool-dropdown--lg .poool-dropdown__panel {
  border-radius: 10px;
}

/* Extra large */
.poool-dropdown--xl .poool-dropdown__trigger {
  height: 60px;
  padding: 0 18px;
  border-radius: 12px;
}

.poool-dropdown--xl .poool-dropdown__value {
  font-size: var(--fs-lg);
}

.poool-dropdown--xl .poool-dropdown__option {
  padding: 12px 18px;
  min-height: 48px;
  font-size: var(--fs-lg);
}

.poool-dropdown--xl .poool-dropdown__panel {
  border-radius: 12px;
}

/* =============================
   STYLE VARIANTS
   ============================= */

/* Ghost (no border) */
.poool-dropdown--ghost .poool-dropdown__trigger {
  border-color: transparent;
  background: transparent;
}

.poool-dropdown--ghost .poool-dropdown__trigger:hover {
  background: var(--pd-bg-hover);
  border-color: transparent;
}

.poool-dropdown--ghost .poool-dropdown__trigger:focus,
.poool-dropdown--ghost .poool-dropdown__trigger--active {
  background: var(--pd-bg-hover);
  border-color: var(--pd-primary);
}

/* Filled */
.poool-dropdown--filled .poool-dropdown__trigger {
  background: var(--pd-bg-subtle);
  border-color: var(--pd-border-light);
}

.poool-dropdown--filled .poool-dropdown__trigger:hover {
  background: var(--pd-bg-hover);
}

.poool-dropdown--filled .poool-dropdown__trigger:focus,
.poool-dropdown--filled .poool-dropdown__trigger--active {
  background: var(--pd-bg);
  border-color: var(--pd-primary);
}

/* =============================
   FULL WIDTH (for form layouts)
   ============================= */
.poool-dropdown--full {
  width: 100%;
}

/* =============================
   INLINE DROPDOWN (compact)
   ============================= */
.poool-dropdown--inline {
  display: inline-flex;
  width: auto;
}

.poool-dropdown--inline .poool-dropdown__trigger {
  width: auto;
  min-width: 120px;
}

.poool-dropdown--inline .poool-dropdown__panel {
  min-width: 180px;
}

/* =============================
   MULTI-SELECT TAGS
   ============================= */
.poool-dropdown__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  align-items: center;
}

.poool-dropdown__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--pd-bg-hover);
  border: 1px solid var(--pd-primary);
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--pd-primary);
  line-height: 20px;
}

.poool-dropdown__tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--primary-color);
  transition: all 0.12s ease;
}

.poool-dropdown__tag-remove:hover {
  background: var(--primary-color);
  color: #ffffff;
}

/* =============================
   ANIMATIONS
   ============================= */
@keyframes pooolDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pooolDropdownFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* =============================
   MOBILE RESPONSIVE
   ============================= */
@media (max-width: 768px) {
  .poool-dropdown__trigger {
    height: 48px;
    padding: 0 12px;
  }

  .poool-dropdown__option {
    padding: 10px 12px;
    min-height: 40px;
  }

  .poool-dropdown__panel {
    max-height: 240px;
  }

  .poool-dropdown__value {
    font-size: var(--fs-md);
    /* Prevent iOS zoom */
  }
}

/* =============================
   LEGACY OVERRIDES
   Auto-hides old absolute icons and chevrons
   ONLY inside already-converted poool-dropdown wrappers.
   We must NOT destroy the marketplace filter bar layout.
   ============================= */

/* Hide old icons/chevrons only when a poool-dropdown has replaced the select */
.poool-dropdown .dropdown-chevron,
.poool-dropdown .select-chevron,
.poool-dropdown .dropdown-icon,
.poool-dropdown .settings-select-wrapper__icon-left,
.poool-dropdown .settings-select-wrapper__icon-right {
  display: none !important;
}

/* The marketplace filter bar keeps the legacy icon/chevron as a SIBLING of the
   poool-dropdown (inside .dropdown-wrapper), so the descendant rule above misses
   it. That leftover <img> renders on top of the cloned poool-dropdown__icon,
   double-drawing the glyph and making it look bold. Hide the sibling copies. */
.dropdown-wrapper:has(.poool-dropdown) > .dropdown-icon,
.dropdown-wrapper:has(.poool-dropdown) > .dropdown-chevron,
.dropdown-wrapper:has(.poool-dropdown) > .select-chevron {
  display: none !important;
}

/* Reset parent wrappers ONLY in settings / non-filter contexts */
.settings-select-wrapper {
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
  height: auto !important;
}

/* When a dropdown-wrapper contains a converted poool-dropdown, strip its old shell */
.dropdown-wrapper:has(.poool-dropdown) {
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0 !important;
}

/* Fallback for browsers without :has() — the :has() rules above cover modern browsers */

/* Ensure filter-dropdown containers keep their structure but allow poool-dropdown to size naturally */
.filter-dropdown:has(.poool-dropdown) {
  height: auto !important;
  min-height: 70px;
}

/* Keep filter labels visible above the dropdown — prevent clipping */
.filter-label {
  overflow: visible;
  position: relative;
  z-index: 10;
}

/* ──────────────────────────────────────────────────────────
   PREVENT PARENT CLIPPING (The "Hidden Dropdown" Fix)
   ────────────────────────────────────────────────────────── */

/* If any of these containers have an open dropdown, they MUST be overflow: visible */
.admin-card:has(.poool-dropdown--open),
.admin-card-body:has(.poool-dropdown--open),
.dropdown-wrapper:has(.poool-dropdown--open),
.settings-form-row__content:has(.poool-dropdown--open),
.filter-dropdown:has(.poool-dropdown--open),
.settings-select-wrapper:has(.poool-dropdown--open),
.ds-card:has(.poool-dropdown--open),
.settings-card:has(.poool-dropdown--open),
.settings-form-row:has(.poool-dropdown--open),
.settings-sections:has(.poool-dropdown--open) {
  overflow: visible !important;
  z-index: 1000000 !important;
}

/* Ensure the open dropdown is above EVERY other UI element */
.poool-dropdown--open {
  z-index: 2147483647 !important;
}

.poool-dropdown--open .poool-dropdown__panel {
  z-index: 2147483647 !important;
}