/*! ═══════════════════════════════════════════════════════════
 *  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('/fonts/TTNormsPro/TT_Norms_Pro_Regular.woff2') format('woff2'),
         url('/fonts/TTNormsPro/TT_Norms_Pro_Regular.woff') format('woff'),
         url('/fonts/TTNormsPro/TT_Norms_Pro_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'TT Norms Pro';
    src: url('/fonts/TTNormsPro/TT_Norms_Pro_ExtraBold.woff2') format('woff2'),
         url('/fonts/TTNormsPro/TT_Norms_Pro_ExtraBold.woff') format('woff'),
         url('/fonts/TTNormsPro/TT_Norms_Pro_ExtraBold.ttf') format('truetype');
    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;
}

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 {
    /* ── 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: 36px;
    --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: 15px;
    --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: 15px;
    --tab-font-weight-active: 600;
    --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: 20px;
    --section-title-font-weight: 700;
    --section-title-color: #101828;
    --section-title-margin-bottom: 16px;

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

    /* ── 9. Global Typography ─────────────────────────────────────── */
    --font-family: 'TT Norms Pro', sans-serif;
    --body-font-size: 14px;
    --body-color: #344054;
    --label-font-size: 14px;
    --label-color: #475467;
    --value-font-size: 36px;
    --value-font-weight: 600;
    --value-color: #101828;

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

    /* ── 11. Button System ────────────────────────────────────────── */
    --btn-font-weight: 600;
    --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: 13px;
    /* Sizes: Medium (default) */
    --btn-md-height: 40px;
    --btn-md-padding: 10px 18px;
    --btn-md-font-size: 14px;
    /* Sizes: Large */
    --btn-lg-height: 48px;
    --btn-lg-padding: 12px 24px;
    --btn-lg-font-size: 16px;

    /* 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: 12px;
    --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: 14px;
    --input-border-radius: 8px;
    --input-border-color: #D0D5DD;
    --input-border-focus: #0000FF;
    --input-bg: #FFFFFF;
    --input-placeholder-color: #667085;
    --input-text-color: #101828;

    /* ── 15. Table System ────────────────────────────────────────── */
    --table-header-bg: #FAFAFA;
    --table-header-font-size: 12px;
    --table-header-font-weight: 600;
    --table-header-color: #717680;
    --table-header-height: 44px;
    --table-header-padding: 12px 24px;
    --table-cell-padding: 16px 24px;
    --table-cell-font-size: 14px;
    --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;
}


/* ================================================================
   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;
    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: 600;
}


/* ================================================================
   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: 28px !important;
    }

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

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


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


/* ── 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
   ================================================================ */


/* ── 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: 13px;
    font-weight: 600;
    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: 16px;
  font-weight: 600;
  color: #101828;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-card__subtitle {
  font-size: 14px;
  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: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--page-title-color);
}

.ds-stat-card__value {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 30px;
  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: 14px;
  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: 600;
  font-size: 18px;
  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: 600;
  font-size: 14px;
  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);
}


/* ── 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, 14px);
  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 ─────────────────────────────────────────────────────────── */
.ds-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, 14px);
  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;
  background-image: 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");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  outline: none;
}

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

.ds-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, 14px);
  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: 14px;
  font-weight: 500;
  color: var(--body-color);
  line-height: 20px;
}

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

.ds-form-hint {
  font-size: 13px;
  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: 13px;
  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;
}

.ds-checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--input-border-focus, #0000FF);
  cursor: pointer;
}

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


/* ── 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: 18px;
  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: 600;
  color: #101828;
}

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

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

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

.ds-table-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 4px;
}

.ds-table-empty__description {
  font-size: 14px;
  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: 14px;
  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;
}


/* ── 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: 36px;
  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, 36px);
  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: 24px;
  font-weight: 700;
  line-height: 32px;
  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: 18px;
  font-weight: 600;
  line-height: 28px;
  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: 16px;
  font-weight: 600;
  line-height: 24px;
  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: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--body-color);
}

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

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

/* ── Body Large (prominent text — 16px) ─────────────────────────── */
.ds-text-body-lg {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  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: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #667085;
}

.ds-text-xs {
  font-family: var(--font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  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, 15px);
  font-weight: var(--page-subtitle-font-weight, 400);
  line-height: 22px;
  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: 600;
  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;
  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: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #101828;
  margin: 0;
}

.ds-modal__subtitle {
  font-size: 14px;
  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;
}

/* ── Error Alert inside Modal ───────────────────────────────────── */
.ds-modal__error {
  color: #D92D20;
  background: #FEF3F2;
  border: 1px solid #FEE4E2;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  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;
  }

  .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: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.ds-progress-label__value {
    font-family: var(--font-family, 'TT Norms Pro', sans-serif);
    font-size: 13px;
    font-weight: 600;
    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: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

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

/* Main App Body */
.app-body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  min-height: 100vh;
}

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

/* Sidebar Container */
.app-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 256px;
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid #e8e9eb;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}

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

/* For pages without sidebar */
#app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

#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;
  margin-left: 256px;
  padding: 48px 24px 64px 24px;
  background: #fafafa;
  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: 36px;
  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: 14px;
  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: 600;
  line-height: 1.2;
  color: var(--page-title-color);
}

h1 {
  font-size: 32px;
  line-height: 40px;
}

h2 {
  font-size: 24px;
  line-height: 32px;
}

h3 {
  font-size: 20px;
  line-height: 28px;
}

h4 {
  font-size: 16px;
  line-height: 24px;
}

p {
  font-size: 14px;
  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: 14px;
  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: #ffffff;
  color: var(--page-title-color);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e8e9eb;
}

.btn-secondary:hover {
  background: #f8f9fc;
  border-color: #d1d5db;
}

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

input,
textarea,
select {
  font-family: 'TT Norms Pro', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #e8e9eb;
  border-radius: 8px;
  background: #ffffff;
  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: 14px;
  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 #e8e9eb;
  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
   ================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f8f9fc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

::-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 #e8e9eb;
  }

  .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 View Transitions (SPA-like page navigation) ── */

/* OPT-IN: Enable cross-document view transitions on every page.
   Both the departing and arriving page must declare this rule
   for the browser to run a view transition between them. */
@view-transition {
    navigation: auto;
}

@supports (view-transition-name: none) {
  ::view-transition,
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    pointer-events: none;
  }

  /* Sidebar stays perfectly static during page transitions.
     IMPORTANT: Only ONE element may have a given view-transition-name.
     Use the outermost wrapper to avoid duplicates when .sidebar is nested inside it. */
  #dynamic-sidebar-container {
    view-transition-name: sidebar;
  }

  /* Main content area animates between pages */
  .ds-main {
    view-transition-name: main-content;
  }

  /* ── Sidebar: no animation (stays pinned) ── */
  ::view-transition-old(sidebar),
  ::view-transition-new(sidebar) {
    animation: none;
  }

  /* ── Main content: subtle fade + slide ── */
  ::view-transition-old(main-content) {
    animation: vt-slide-out 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  ::view-transition-new(main-content) {
    animation: vt-slide-in 280ms cubic-bezier(0, 0, 0.2, 1) both;
  }

  /* ── Root fallback (entire page cross-fade) ── */
  ::view-transition-old(root) {
    animation: vt-fade-out 180ms ease-out both;
  }

  ::view-transition-new(root) {
    animation: vt-fade-in 220ms ease-in both;
  }

  @keyframes vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  @keyframes vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes vt-slide-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(6px); }
  }

  @keyframes vt-slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Reduce motion: respect user preference ── */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(main-content),
    ::view-transition-new(main-content),
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 0.01ms !important;
    }
  }
}

/* ================================
   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: 14px;
  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: 12px;
  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: 12px;
  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: 16px;
  font-weight: 600;
  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: 18px;
  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: 12px;
  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: 600;
  font-size: 12px;
  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;
  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;
  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.66667px;
}

.sidebar-search-input {
  width: 204px;
  height: 24px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  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: 600;
  font-size: 14px;
  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: 12px;
  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: 12px;
  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: 600;
  font-size: 14px;
  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: 14px;
  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: 600;
  font-size: 14px;
  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: 600;
  font-size: 14px;
  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: 14px;
  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.66667px;
}

/* 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: 12px;
  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;
  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;
  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;
}

/* ===========================
   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.66667px;
}

/* 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: 14px;
  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: 600;
  font-size: 14px;
  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: 600;
}

/* 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: 12px;
  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: 11px;
  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: 12px;
  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: 600;
  font-size: 14px;
  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: 600;
  font-size: 14px;
  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: 14px;
  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: 14px;
  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: 600;
  font-size: 14px;
  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: 600;
  font-size: 14px;
  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: 12px;
  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: 600;
  font-size: 14px;
  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: 14px;
  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.66667px;
}

/* 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: 12px;
  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: 11px;
  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: 600;
  font-size: 14px;
  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: 14px;
  line-height: 20px;
  color: #414651;
}

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


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

/* 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: 11px;
  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: 11px;
  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: 600;
  font-size: 14px;
  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: 12px;
  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: 600;
  font-size: 14px;
  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: 14px;
  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: 600;
  font-size: 14px;
  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: 600;
  font-size: 14px;
  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;
}


/* ── community-card.css ────────────────────────────────── */

/* Investor Navbar Community Card - Exact Specifications */

/* Nav featured card */
.nav-featured-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px 16px;
  gap: 12px;
  isolation: isolate;
  width: 224px;
  height: auto;
  margin: 0 0px;
  /* Brand Green Accent/25 */
  background: #eafee9;
  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 img {
  width: 20px;
  height: 20px;
}

/* Override for close icon to use SVG with proper color */
.nav-featured-card .featured-card-close svg {
  width: 20px;
  height: 20px;
}

.nav-featured-card .featured-card-close svg path {
  stroke: var(--primary-color);
  stroke-width: 1.66667px;
}

/* Text and supporting text wrapper */
#featured-card-text,
.featured-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;
  width: 192px;
  height: 84px;
  z-index: 1;
}

/* Title wrapper */
.featured-card-title-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px 24px 0px 0px;
  gap: 4px;
  width: 192px;
  height: 20px;
}

/* Title */
#featured-card-title,
.featured-card-title {
  width: 168px;
  height: 20px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  /* Brand/600 */
  color: var(--primary-color);
  margin: 0;
}

/* Description/Supporting text */
#featured-card-description,
.featured-card-description {
  width: 192px;
  height: 60px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  /* Base/Black */
  color: #000000;
  margin: 0;
}

/* Image wrapper - Hidden for investor navbar */
#featured-card-image,
.featured-card-image {
  display: none;
  width: 240px;
  height: 144px;
  /* Gray/200 */
  background: var(--table-border-color);
  border-radius: 6px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Image */
.featured-card-image img:first-child {
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

/* Play button - use image as-is */
.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;
}

/* Actions */
#featured-card-actions,
.featured-card-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
  width: 152px;
  height: 20px;
  z-index: 3;
}

/* Action buttons */
.featured-card-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 8px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

/* Dismiss button */
.featured-card-button.dismiss {
  min-width: 54px;
  white-space: nowrap;
  /* Gray/600 */
  color: var(--text-secondary);
}

/* Action button */
.featured-card-button.action {
  /* Remove fixed width to allow text to fit properly */
  min-width: 86px;
  white-space: nowrap;
  /* Brand/700 */
  color: var(--primary-color);
}

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


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

/* Profile Dropdown Menu - Exact Figma Implementation */

/* Menu container */
.profile-dropdown-menu {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  position: fixed !important;
  width: 264px;
  height: auto;
  max-height: 80vh;
  left: 248px !important;
  bottom: 20px !important;
  /* Gray/50 */
  background: #fafafa;
  /* Gray/200 */
  border: 1px solid var(--table-border-color);
  /* Shadows/shadow-lg */
  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;
  flex: none;
  order: 2;
  flex-grow: 0;
  z-index: 99999;
}

/* Menu items wrapper */
.profile-menu-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 264px;
  height: auto;
  /* Base/White */
  background: #ffffff;
  /* Gray/200 */
  border: 1px solid var(--table-border-color);
  border-radius: 12px 12px 16px 16px;
  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: 0px 6px;
  width: 264px;
  height: 36px;
  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: 600;
  font-size: 14px;
  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: 12px;
  line-height: 18px;
  /* Gray/600 */
  color: var(--text-secondary);
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Switch account section */
.profile-switch-section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 0px;
  gap: 2px;
  width: 264px;
  height: auto;
  /* Gray/200 */
  border-top: 1px solid var(--table-border-color);
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Switch account header */
.profile-switch-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 6px 12px 4px;
  width: 264px;
  height: 28px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Switch account title */
.profile-switch-title {
  width: 240px;
  height: 18px;
  font-family: 'TT Norms Pro', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  /* Gray/600 */
  color: var(--text-secondary);
  flex: none;
  order: 0;
  flex-grow: 1;
}

/* Account item */
.profile-menu-item.account-item {
  height: 52px;
}

/* Account content */
.profile-account-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 8px;
  gap: 12px;
  isolation: isolate;
  width: 252px;
  height: 52px;
  border-radius: 6px;
  flex: none;
  order: 0;
  flex-grow: 1;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover effect for account items */
.profile-menu-item.account-item:hover .profile-account-content {
  background: #f9f9ff;
  transform: translateX(2px);
}

.profile-menu-item.account-item.selected .profile-account-content {
  /* Gray/50 */
  background: #fafafa;
}

/* Hover on selected item */
.profile-menu-item.account-item.selected:hover .profile-account-content {
  background: #f0f0fa;
}

/* 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: 600;
  font-size: 14px;
  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: 14px;
  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: 600;
  font-size: 14px;
  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
   =========================== */

/* Remove tap highlight and text selection */
* {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* 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;
  gap: 119px;
  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: 600;
  font-size: 10px;
  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;
}

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

/* 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: 11px;
  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: 11px;
  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: 600;
  font-size: 16px;
  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: 12px;
  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: 12px;
  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: 12px;
  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: 600;
  font-size: 14px;
  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: 12px;
  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: 600;
  font-size: 14px;
  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: 600;
  font-size: 14px;
  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: 12px;
  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: 600;
  font-size: 14px;
  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: 600;
  font-size: 14px;
  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: 14px;
  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: 600;
  font-size: 14px;
  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;
  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: 600;
  font-size: 14px;
  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: 12px;
  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: 600;
  font-size: 14px;
  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: 14px;
  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 */
  }
}

/* ── poool-dropdown.css ────────────────────────────────── */

/* ================================
   POOOL - Unified Dropdown Component
   Matches the POOOL website design language
   ================================ */

:root {
  /* Design Tokens */
  --pd-primary: var(--primary-color);
  --pd-accent: #98FB96;
  --pd-text-main: var(--page-title-color);
  --pd-text-medium: #414651;
  --pd-text-light: #717680;
  --pd-text-muted: #a4a7ae;
  --pd-border: #d5d7da;
  --pd-border-light: var(--table-border-color);
  --pd-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: 14px;
  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(46, 46, 249, 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: 16px;
  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: 14px;
  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 {
  font-weight: 500;
  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: 14px;
  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: 12px;
  font-weight: 600;
  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: 14px;
  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: 16px;
  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: 12px;
  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: 13px;
  color: var(--pd-text-light);
}

/* ─── Helper / Error Text ─── */
.poool-dropdown__helper {
  font-size: 13px;
  line-height: 18px;
  color: var(--pd-text-light);
  margin-top: 2px;
}

.poool-dropdown__error {
  font-size: 13px;
  line-height: 18px;
  color: #ef4444;
  margin-top: 2px;
}

/* =============================
   SIZE VARIANTS
   ============================= */

/* Small */
.poool-dropdown--sm .poool-dropdown__trigger {
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
}

.poool-dropdown--sm .poool-dropdown__value {
  font-size: 13px;
}

.poool-dropdown--sm .poool-dropdown__option {
  padding: 6px 10px;
  min-height: 32px;
  font-size: 13px;
}

.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: 16px;
}

.poool-dropdown--lg .poool-dropdown__option {
  padding: 10px 16px;
  min-height: 44px;
  font-size: 16px;
}

.poool-dropdown--lg .poool-dropdown__panel {
  border-radius: 10px;
}

/* =============================
   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: 12px;
  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: 16px;
    /* 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;
}

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