/* ==========================================================================
   BALOCH SM — PREMIUM DARK THEME
   ==========================================================================

   FILE:
   <DOMAIN_ROOT>/public_html/assets/css/themes/baloch-dark.css

   WEBSITE:
   https://investt.online

   THEME CODE:
   baloch-dark

   VERSION:
   1.0.0

   ==========================================================================
   PURPOSE

   Primary dark appearance for:

   01. Public landing pages
   02. Member login and registration
   03. Restricted subscription dashboard
   04. Manual payment interfaces
   05. Approved Forex trading dashboard
   06. Live chart workspaces
   07. Technical indicators
   08. Confirmed BUY / SELL signals
   09. Market-level notification clues
   10. Notification drawers and history
   11. Signal receipt dialogs
   12. CPI / economic news countdowns
   13. Administrator control center
   14. Administrator authentication and MFA
   15. Installed PWA appearance
   16. Mobile and accessible interfaces

   ==========================================================================
   OFFICIAL DESIGN PALETTE

   Midnight Navy:
       #071320

   Electric Cyan:
       #35EAFF

   BUY Green:
       #5CE4C7

   SELL Red:
       #FF697C

   Intelligence Violet:
       #8270FF

   ==========================================================================
   THEME DEPENDENCIES

   1. reset.css
   2. tokens.css
   3. themes/baloch-dark.css
   4. themes/market-colors.css
   5. layout.css
   6. components.css
   7. page-specific stylesheets
   8. responsive.css
   9. accessibility.css
   10. motion/reduced-motion.css

   ==========================================================================
   THEME SELECTION CONTRACT

   This file may be loaded as the current theme stylesheet.

   Supported selectors:

       :root
       :root[data-theme="baloch-dark"]
       html.theme-baloch-dark
       body.theme-baloch-dark
       body[data-theme="baloch-dark"]

   The private BrandSettingsService supplies the approved
   theme code.

   The theme selection service must use an allowlist
   of approved same-origin stylesheets.

   User-controlled arbitrary CSS URLs are prohibited.

   ==========================================================================
   IMPORTANT

   This theme never:

   - Generates trading prices.
   - Creates BUY or SELL signals.
   - Simulates an active data provider.
   - Modifies subscription authorization.
   - Exposes administrator information.
   - Changes receipt ownership.
   - Overrides [hidden] visibility.
   - Changes popup timing logic.
   - Switches the displayed chart pair.

   ========================================================================== */


/* ==========================================================================
   01. BASE COLOR PALETTE
   ==========================================================================

   These are stable color primitives.

   Semantic colors below map the palette to application
   roles.

   Primitive names remain compatible with tokens.css.
   ========================================================================== */

:root {

    /* Midnight Navy */

    --bsm-navy-950: #071320;
    --bsm-navy-900: #0A1929;
    --bsm-navy-850: #0D2032;
    --bsm-navy-800: #10263A;
    --bsm-navy-750: #142C42;
    --bsm-navy-700: #18354D;
    --bsm-navy-650: #203D55;
    --bsm-navy-600: #294860;
    --bsm-navy-500: #3B5A70;


    /* Electric Cyan */

    --bsm-cyan-50:  #E6FCFF;
    --bsm-cyan-100: #C7F9FF;
    --bsm-cyan-200: #A2F5FF;
    --bsm-cyan-300: #76F0FF;
    --bsm-cyan-400: #35EAFF;
    --bsm-cyan-500: #16CFE7;
    --bsm-cyan-600: #08AFC6;
    --bsm-cyan-700: #078A9C;
    --bsm-cyan-800: #0A6473;


    /* BUY Green */

    --bsm-green-50:  #E8FFF8;
    --bsm-green-100: #C6F9EB;
    --bsm-green-200: #9CF0DD;
    --bsm-green-300: #75E9D3;
    --bsm-green-400: #5CE4C7;
    --bsm-green-500: #37CAAA;
    --bsm-green-600: #25A98D;
    --bsm-green-700: #1C826E;


    /* SELL Red */

    --bsm-red-50:  #FFF0F2;
    --bsm-red-100: #FFD9DE;
    --bsm-red-200: #FFAFBA;
    --bsm-red-300: #FF8796;
    --bsm-red-400: #FF697C;
    --bsm-red-500: #EE4B62;
    --bsm-red-600: #CD364D;
    --bsm-red-700: #A9293D;


    /* Intelligence Violet */

    --bsm-violet-50:  #F1EFFF;
    --bsm-violet-100: #E0DBFF;
    --bsm-violet-200: #C5BAFF;
    --bsm-violet-300: #A898FF;
    --bsm-violet-400: #8270FF;
    --bsm-violet-500: #6E5AEF;
    --bsm-violet-600: #5744CA;
    --bsm-violet-700: #4234A0;


    /* Warning Amber */

    --bsm-amber-50:  #FFF7E8;
    --bsm-amber-100: #FFEBC3;
    --bsm-amber-200: #FFDB94;
    --bsm-amber-300: #FFCB69;
    --bsm-amber-400: #F7B955;
    --bsm-amber-500: #DFA041;
    --bsm-amber-600: #B77C24;


    /* Neutral Slate */

    --bsm-slate-50:  #F4F8FC;
    --bsm-slate-100: #E6EDF4;
    --bsm-slate-200: #C9D7E5;
    --bsm-slate-300: #A5B8C9;
    --bsm-slate-400: #849BB0;
    --bsm-slate-500: #677F94;
    --bsm-slate-600: #4D6478;
    --bsm-slate-700: #354B60;

}


/* ==========================================================================
   02. SEMANTIC APPLICATION COLORS
   ==========================================================================

   These values are used throughout the Baloch SM
   component and page stylesheets.

   :root is the default because this file is only
   supposed to be loaded when the dark theme is selected.

   Explicit selectors also support an approved
   data-theme or class-based theme controller.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    color-scheme: dark;


    /* ==============================================================
       02.1. PRIMARY BRAND COLORS
       ============================================================== */

    --bsm-color-primary: #35EAFF;

    --bsm-color-primary-hover: #76F0FF;

    --bsm-color-primary-pressed: #16CFE7;

    --bsm-color-primary-soft:
        rgba(53, 234, 255, 0.09);

    --bsm-color-primary-border:
        rgba(53, 234, 255, 0.32);


    /* ==============================================================
       02.2. SECONDARY BRAND COLORS
       ============================================================== */

    --bsm-color-accent: #8270FF;

    --bsm-color-accent-hover: #A898FF;

    --bsm-color-accent-soft:
        rgba(130, 112, 255, 0.12);

    --bsm-color-accent-border:
        rgba(130, 112, 255, 0.32);


    /* ==============================================================
       02.3. STATUS COLORS
       ============================================================== */

    --bsm-color-success: #5CE4C7;

    --bsm-color-success-soft:
        rgba(92, 228, 199, 0.11);

    --bsm-color-success-border:
        rgba(92, 228, 199, 0.36);


    --bsm-color-danger: #FF697C;

    --bsm-color-danger-soft:
        rgba(255, 105, 124, 0.11);

    --bsm-color-danger-border:
        rgba(255, 105, 124, 0.36);


    --bsm-color-warning: #FFCB69;

    --bsm-color-warning-soft:
        rgba(255, 203, 105, 0.11);

    --bsm-color-warning-border:
        rgba(255, 203, 105, 0.34);


    --bsm-color-info: #76DFFF;

    --bsm-color-info-soft:
        rgba(118, 223, 255, 0.10);

    --bsm-color-info-border:
        rgba(118, 223, 255, 0.32);


    --bsm-color-neutral: #849BB0;


    /* ==============================================================
       02.4. MAIN BACKGROUNDS
       ============================================================== */

    --bsm-bg-page: #071320;

    --bsm-bg-body: #071320;

    --bsm-bg-header: #0A1929;

    --bsm-bg-sidebar: #0A1929;

    --bsm-bg-surface: #10263A;

    --bsm-bg-surface-alt: #142C42;

    --bsm-bg-surface-raised: #18354D;

    --bsm-bg-surface-inset: #0D2032;

    --bsm-bg-card: #0D2032;

    --bsm-bg-modal: #10263A;

    --bsm-bg-input: #0A1929;

    --bsm-bg-tooltip: #203D55;

    --bsm-bg-hover:
        rgba(118, 240, 255, 0.075);

    --bsm-bg-active:
        rgba(53, 234, 255, 0.11);


    /* ==============================================================
       02.5. TEXT COLORS
       ============================================================== */

    --bsm-text-primary: #F4F8FC;

    --bsm-text-secondary: #C9D7E5;

    --bsm-text-muted: #A5B8C9;

    --bsm-text-subtle: #849BB0;

    --bsm-text-placeholder: #A5B8C9;

    --bsm-text-link: #76F0FF;

    --bsm-text-link-hover: #C7F9FF;

    --bsm-text-on-brand: #071320;

    --bsm-text-inverse: #071320;


    /* ==============================================================
       02.6. BORDERS
       ============================================================== */

    --bsm-border-subtle:
        rgba(165, 184, 201, 0.15);

    --bsm-border-default:
        rgba(165, 184, 201, 0.26);

    --bsm-border-strong:
        rgba(201, 215, 229, 0.46);

    --bsm-border-interactive:
        rgba(53, 234, 255, 0.43);

    --bsm-border-focus: #76F0FF;

    --bsm-border-error: #FF697C;

    --bsm-border-warning: #FFCB69;


    /* ==============================================================
       02.7. ACCESSIBILITY FOCUS
       ============================================================== */

    --bsm-focus-color: #76F0FF;

    --bsm-focus-shadow:
        0 0 0 4px rgba(53, 234, 255, 0.19);


    /* ==============================================================
       02.8. OVERLAYS AND GLASS
       ============================================================== */

    --bsm-overlay-default:
        rgba(2, 8, 17, 0.82);

    --bsm-overlay-soft:
        rgba(2, 8, 17, 0.56);

    --bsm-glass-bg:
        rgba(16, 38, 58, 0.92);

    --bsm-glass-border:
        rgba(165, 184, 201, 0.22);


    /* ==============================================================
       02.9. SHADOWS
       ============================================================== */

    --bsm-shadow-xs:
        0 1px 3px rgba(0, 0, 0, 0.16);

    --bsm-shadow-sm:
        0 3px 10px rgba(0, 0, 0, 0.21);

    --bsm-shadow-md:
        0 7px 22px rgba(0, 0, 0, 0.26);

    --bsm-shadow-lg:
        0 15px 38px rgba(0, 0, 0, 0.32);

    --bsm-shadow-xl:
        0 22px 64px rgba(0, 0, 0, 0.40);

    --bsm-shadow-card:
        0 8px 24px rgba(0, 0, 0, 0.19);

    --bsm-shadow-modal:
        0 24px 80px rgba(0, 0, 0, 0.50);

    --bsm-shadow-primary-glow:
        0 0 22px rgba(53, 234, 255, 0.13);

    --bsm-shadow-focus:
        0 0 0 4px rgba(53, 234, 255, 0.19);


    /* ==============================================================
       02.10. GRADIENTS
       ============================================================== */

    --bsm-gradient-primary:
        linear-gradient(
            135deg,
            #35EAFF 0%,
            #16CFE7 100%
        );

    --bsm-gradient-accent:
        linear-gradient(
            135deg,
            #8270FF 0%,
            #5744CA 100%
        );

    --bsm-gradient-page:
        linear-gradient(
            145deg,
            #071320 0%,
            #0A1929 54%,
            #10263A 100%
        );

    --bsm-gradient-card:
        linear-gradient(
            145deg,
            #10263A 0%,
            #0D2032 100%
        );


    /* ==============================================================
       02.11. BRAND HIGHLIGHT COLORS
       ============================================================== */

    --bsm-highlight-primary:
        rgba(53, 234, 255, 0.14);

    --bsm-highlight-accent:
        rgba(130, 112, 255, 0.14);


    /* ==============================================================
       02.12. SELECTION
       ============================================================== */

    --bsm-selection-bg: #35EAFF;

    --bsm-selection-text: #071320;

}


/* ==========================================================================
   03. BUY / SELL SIGNAL COLORS
   ==========================================================================

   Trading directions are always based on actual
   confirmed backend data.

   BUY:
       Green

   SELL:
       Red

   This theme defines presentation colors only.

   Direction text must remain visible alongside color.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    /* BUY */

    --bsm-signal-buy: #5CE4C7;

    --bsm-signal-buy-text: #A9F5E4;

    --bsm-signal-buy-bg:
        rgba(92, 228, 199, 0.13);

    --bsm-signal-buy-border:
        rgba(92, 228, 199, 0.50);

    --bsm-signal-buy-glow:
        rgba(92, 228, 199, 0.36);


    /* SELL */

    --bsm-signal-sell: #FF697C;

    --bsm-signal-sell-text: #FFB2BC;

    --bsm-signal-sell-bg:
        rgba(255, 105, 124, 0.13);

    --bsm-signal-sell-border:
        rgba(255, 105, 124, 0.50);

    --bsm-signal-sell-glow:
        rgba(255, 105, 124, 0.36);


    /* BUY Popup */

    --bsm-signal-popup-buy-glow:
        0 0 34px rgba(92, 228, 199, 0.20);


    /* SELL Popup */

    --bsm-signal-popup-sell-glow:
        0 0 34px rgba(255, 105, 124, 0.20);


    /* Popup Gradients */

    --bsm-gradient-buy:
        linear-gradient(
            145deg,
            rgba(92, 228, 199, 0.14) 0%,
            rgba(16, 38, 58, 0.96) 48%,
            #10263A 100%
        );

    --bsm-gradient-sell:
        linear-gradient(
            145deg,
            rgba(255, 105, 124, 0.14) 0%,
            rgba(16, 38, 58, 0.96) 48%,
            #10263A 100%
        );


    /* Market-Tab Clues */

    --bsm-clue-buy: #5CE4C7;

    --bsm-clue-sell: #FF697C;


    /* Optional Mixed-Direction State */

    --bsm-signal-mixed:
        #C5BAFF;

    --bsm-signal-mixed-bg:
        rgba(130, 112, 255, 0.12);

}


/* ==========================================================================
   04. LIVE FINANCIAL CHART PALETTE
   ==========================================================================

   Used by:

   #price-chart
   .chart-panel
   .chart-price
   .chart-status
   Chart JavaScript rendering engines

   Actual candle positions, OHLC data and timeframes
   remain controlled by verified market-data services.

   CSS may define candle colors but cannot create candles.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    --bsm-chart-background: #091A2A;

    --bsm-chart-panel: #0D2032;

    --bsm-chart-grid:
        rgba(165, 184, 201, 0.13);

    --bsm-chart-grid-strong:
        rgba(165, 184, 201, 0.23);

    --bsm-chart-axis:
        rgba(165, 184, 201, 0.24);

    --bsm-chart-axis-text: #A5B8C9;

    --bsm-chart-bull: #5CE4C7;

    --bsm-chart-bear: #FF697C;

    --bsm-chart-candle-up: #5CE4C7;

    --bsm-chart-candle-down: #FF697C;

    --bsm-chart-wick-up: #9CF0DD;

    --bsm-chart-wick-down: #FFAFBA;

    --bsm-chart-volume-up:
        rgba(92, 228, 199, 0.37);

    --bsm-chart-volume-down:
        rgba(255, 105, 124, 0.37);

    --bsm-chart-crosshair:
        rgba(201, 215, 229, 0.66);

    --bsm-chart-crosshair-label: #C9D7E5;

    --bsm-chart-selection:
        rgba(53, 234, 255, 0.12);

    --bsm-chart-last-price: #76F0FF;


    /* Technical Indicator Colors */

    --bsm-indicator-ema: #35EAFF;

    --bsm-indicator-sma: #8270FF;

    --bsm-indicator-vwap: #FFCB69;

    --bsm-indicator-rsi: #76DFFF;

    --bsm-indicator-macd: #A898FF;

    --bsm-indicator-atr: #FFCB69;

    --bsm-indicator-bollinger: #75E9D3;


    /* Missing/Stale Provider Data */

    --bsm-chart-stale-overlay:
        rgba(7, 19, 32, 0.94);

    --bsm-chart-loading-overlay:
        rgba(7, 19, 32, 0.82);

    --bsm-chart-error-border:
        rgba(255, 105, 124, 0.50);

}


/* ==========================================================================
   05. VERIFIED PROVIDER FEED STATES
   ==========================================================================

   IMPORTANT:

   Color does not decide feed health.

   FeedService and frontend application state must supply:

   - Healthy
   - Degraded
   - Disconnected
   - Unverified

   An unverified feed must never be styled as healthy
   merely because it is displayed in a green interface.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    --bsm-feed-healthy: #5CE4C7;

    --bsm-feed-degraded: #FFCB69;

    --bsm-feed-disconnected: #FF697C;

    --bsm-feed-unverified: #A5B8C9;


    /* Feed Status Backgrounds */

    --bsm-feed-healthy-bg:
        rgba(92, 228, 199, 0.11);

    --bsm-feed-degraded-bg:
        rgba(255, 203, 105, 0.11);

    --bsm-feed-disconnected-bg:
        rgba(255, 105, 124, 0.11);

    --bsm-feed-unverified-bg:
        rgba(165, 184, 201, 0.10);

}


/* ==========================================================================
   06. CPI AND ECONOMIC NEWS COLORS
   ==========================================================================

   News alerts must reflect verified events.

   The calendar provides actual release times, currencies
   and impact classifications.

   CSS never creates event dates or results.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    --bsm-news-impact-low: #5CE4C7;

    --bsm-news-impact-medium: #FFCB69;

    --bsm-news-impact-high: #FF697C;


    /* Countdown Panel */

    --bsm-news-countdown-bg:
        rgba(53, 234, 255, 0.055);

    --bsm-news-countdown-border:
        rgba(53, 234, 255, 0.30);

    --bsm-news-countdown-text: #F4F8FC;


    /* Event States */

    --bsm-news-upcoming: #76DFFF;

    --bsm-news-released: #5CE4C7;

    --bsm-news-delayed: #FFCB69;

    --bsm-news-unverified: #A5B8C9;


    /* High Impact Warning */

    --bsm-news-risk-bg:
        rgba(255, 105, 124, 0.09);

    --bsm-news-risk-border:
        rgba(255, 105, 124, 0.36);

}


/* ==========================================================================
   07. NOTIFICATION AND INBOX COLORS
   ==========================================================================

   Compatible with notifications.css:

   #bell-button
   #bell-count
   #notice-panel
   .notification-item
   .signal-popup

   Full signal notifications belong to the currently
   selected and authorized market.

   Other-market clues belong only to market tabs.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    --bsm-notification-background: #10263A;

    --bsm-notification-surface: #0D2032;

    --bsm-notification-unread-bg:
        rgba(53, 234, 255, 0.10);

    --bsm-notification-unread-border:
        rgba(53, 234, 255, 0.33);

    --bsm-notification-read-bg: #10263A;

    --bsm-notification-error-bg:
        rgba(255, 105, 124, 0.11);

    --bsm-notification-warning-bg:
        rgba(255, 203, 105, 0.11);

    --bsm-notification-count-bg: #FF697C;

    --bsm-notification-count-text: #071320;

}


/* ==========================================================================
   08. SIGNAL RECEIPT COLORS
   ==========================================================================

   Compatible with:

   signal-receipt.css

   The receipt API must provide:

   - Confirmed signal identity
   - Pair
   - Market
   - Timeframe
   - Evidence actually recorded
   - Source timestamps
   - Outcome only where available

   CSS must never fabricate receipt fields.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    --bsm-receipt-background: #10263A;

    --bsm-receipt-surface-bg: #0D2032;

    --bsm-receipt-inset-bg: #0A1929;

    --bsm-receipt-divider:
        rgba(165, 184, 201, 0.17);

    --bsm-receipt-title: #F4F8FC;

    --bsm-receipt-caption: #A5B8C9;

    --bsm-receipt-success: #5CE4C7;

    --bsm-receipt-failure: #FF697C;

    --bsm-receipt-pending: #FFCB69;

}


/* ==========================================================================
   09. ADMINISTRATOR CONTROL CENTER COLORS
   ==========================================================================

   Compatible with:

   admin.css

   The sidebar, topbar, forms and tables use semantic
   Baloch SM colors already defined above.

   These additional variables support administrator-specific
   status presentation and future approved components.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    --bsm-admin-background: #071320;

    --bsm-admin-sidebar-bg: #0A1929;

    --bsm-admin-topbar-bg: #0A1929;

    --bsm-admin-card-bg: #0D2032;

    --bsm-admin-table-header-bg: #18354D;

    --bsm-admin-table-row-alt: #10263A;

    --bsm-admin-table-row-hover:
        rgba(53, 234, 255, 0.06);

    --bsm-admin-active-bg:
        rgba(53, 234, 255, 0.10);

    --bsm-admin-active-border:
        rgba(53, 234, 255, 0.34);

    --bsm-admin-danger-bg:
        rgba(255, 105, 124, 0.12);

    --bsm-admin-success-bg:
        rgba(92, 228, 199, 0.10);

}


/* ==========================================================================
   10. BILLING AND SUBSCRIPTION COLORS
   ==========================================================================

   No real account or payment details are stored here.

   Subscription and payment statuses must come from
   private billing services.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    --bsm-plan-background: #0D2032;

    --bsm-plan-selected-bg:
        rgba(53, 234, 255, 0.06);

    --bsm-plan-selected-border:
        rgba(53, 234, 255, 0.40);

    --bsm-payment-pending: #FFCB69;

    --bsm-payment-approved: #5CE4C7;

    --bsm-payment-rejected: #FF697C;

    --bsm-payment-instructions-bg: #0A1929;

}


/* ==========================================================================
   11. SKELETON AND LOADING COLORS
   ==========================================================================

   Skeletons are placeholders for presentation only.

   They must never display invented candles, signals
   or financial performance values.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    --bsm-loading-track: #294860;

    --bsm-loading-indicator: #35EAFF;

    --bsm-skeleton-base: #18354D;

    --bsm-skeleton-highlight: #294860;

}


/* ==========================================================================
   12. MARKET TAB APPEARANCE
   ==========================================================================

   The selected market is controlled by authenticated
   frontend state.

   These semantic variables are referenced by
   components.css and dashboard.css.
   ========================================================================== */

:root,
:root[data-theme="baloch-dark"],
html.theme-baloch-dark,
body.theme-baloch-dark,
body[data-theme="baloch-dark"] {

    --bsm-market-tab-active:
        rgba(53, 234, 255, 0.10);

    --bsm-market-tab-border:
        rgba(53, 234, 255, 0.48);

    --bsm-market-tab-hover:
        rgba(53, 234, 255, 0.06);

    --bsm-market-tab-unavailable:
        rgba(165, 184, 201, 0.08);

}


/* ==========================================================================
   13. DARK-THEME DOCUMENT APPEARANCE
   ==========================================================================

   Apply appearance only when this stylesheet is selected.

   These selectors do not modify data or user permissions.
   ========================================================================== */

html {
    background-color: var(--bsm-bg-page);

    color-scheme: dark;
}

body {
    background-color: var(--bsm-bg-page);

    color: var(--bsm-text-primary);
}


/* ==========================================================================
   14. DARK THEME NATIVE CONTROLS
   ==========================================================================

   Native controls should match the dark environment.

   Existing components.css and auth.css supply the
   final component geometry and interaction states.
   ========================================================================== */

input,
select,
textarea {
    color-scheme: dark;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--bsm-color-primary);
}


/* ==========================================================================
   15. AUTOFILL COMPATIBILITY
   ==========================================================================

   Preserve user password managers.

   Do not suppress browser autofill or reveal passwords.

   Theme-specific autofill colors match the dark input.
   ========================================================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--bsm-text-primary);

    -webkit-box-shadow:
        0 0 0 1000px
        var(--bsm-bg-input)
        inset;

    caret-color: var(--bsm-text-primary);
}


/* ==========================================================================
   16. NATIVE SVG / CANVAS BACKGROUND SUPPORT
   ==========================================================================

   The chart renderer remains responsible for:

   - Candle geometry
   - Price scale
   - Time scale
   - OHLC rendering
   - Source validation
   - Supported timeframe calculations

   This theme provides only its background surface.
   ========================================================================== */

#price-chart {
    background-color: var(--bsm-chart-background);

    color: var(--bsm-chart-axis-text);
}


/* ==========================================================================
   17. SYSTEM STATUS INDICATORS
   ==========================================================================

   Actual data-state values must come from the
   application rather than being assumed by CSS.
   ========================================================================== */

.feed-indicator[data-status="healthy"],
.chart-status[data-status="healthy"],
.feed-status[data-status="healthy"] {
    color: var(--bsm-feed-healthy);
}

.feed-indicator[data-status="degraded"],
.chart-status[data-status="degraded"],
.feed-status[data-status="degraded"] {
    color: var(--bsm-feed-degraded);
}

.feed-indicator[data-status="disconnected"],
.chart-status[data-status="disconnected"],
.feed-status[data-status="disconnected"] {
    color: var(--bsm-feed-disconnected);
}

.feed-indicator[data-status="unverified"],
.chart-status[data-status="unverified"],
.feed-status[data-status="unverified"] {
    color: var(--bsm-feed-unverified);
}


/* ==========================================================================
   18. BRAND HIGHLIGHT APPEARANCE
   ========================================================================== */

.text-accent,
.auth-hero .accent {
    color: var(--bsm-color-primary);
}


/* ==========================================================================
   19. LINKS AND FOCUS
   ==========================================================================

   Use the shared accessibility stylesheet for geometry.

   This theme supplies readable dark-mode focus colors.
   ========================================================================== */

a[href] {
    text-decoration-color: currentColor;
}

:where(
    button,
    a[href],
    input,
    select,
    textarea,
    summary,
    [role="tab"]
):focus-visible {
    outline-color: var(--bsm-focus-color);
}


/* ==========================================================================
   20. DARK MODE TEXT SELECTION
   ========================================================================== */

::selection {
    background-color: var(--bsm-selection-bg);

    color: var(--bsm-selection-text);
}


/* ==========================================================================
   21. NATIVE SCROLLBAR COLORS
   ==========================================================================

   CSS scrollbars should be subtle but still visible.

   Avoid using display:none on scrollbar tracks.
   ========================================================================== */

:root {
    scrollbar-color:
        #3B5A70
        #0A1929;
}

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

::-webkit-scrollbar-track {
    background-color: #0A1929;
}

::-webkit-scrollbar-thumb {
    border:
        2px solid
        #0A1929;

    border-radius: 10px;

    background-color: #3B5A70;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #677F94;
}


/* ==========================================================================
   22. DARK-THEME ADMINISTRATOR NAVIGATION
   ==========================================================================

   Compatible with permission-filtered navigation
   rendered by admin/index.php.
   ========================================================================== */

.admin-app .admin-nav-link[aria-current="page"],
.admin-app .admin-nav-link.is-active {
    color: var(--bsm-text-primary);

    background-color: var(--bsm-admin-active-bg);

    border-color: var(--bsm-admin-active-border);
}


/* ==========================================================================
   23. DARK-THEME NOTIFICATION INBOX
   ==========================================================================

   Maintain consistent surface depth.

   Notification ownership and read states remain controlled
   by the authenticated frontend and private services.
   ========================================================================== */

#notice-panel {
    background-color: var(--bsm-notification-background);
}

.notification-item.is-unread,
.notice-item.is-unread {
    background-color: var(--bsm-notification-unread-bg);

    border-color: var(--bsm-notification-unread-border);
}


/* ==========================================================================
   24. DARK-THEME CONFIRMED SIGNALS
   ==========================================================================

   Green and red visual treatments are supplementary
   to actual BUY / SELL text.

   No signal is generated here.
   ========================================================================== */

.signal-popup.is-buy,
.signal-popup[data-direction="buy"] {
    border-color: var(--bsm-signal-buy-border);

    background-image: var(--bsm-gradient-buy);
}

.signal-popup.is-sell,
.signal-popup[data-direction="sell"] {
    border-color: var(--bsm-signal-sell-border);

    background-image: var(--bsm-gradient-sell);
}


/* ==========================================================================
   25. RECEIPT DIRECTION COMPATIBILITY
   ==========================================================================

   Supports both earlier class patterns:

   .receipt.buy / .receipt.sell

   .receipt.is-buy / .receipt.is-sell

   Full receipt styling remains in signal-receipt.css.
   ========================================================================== */

#receipt-modal .receipt.buy,
#receipt-modal .receipt.is-buy {
    border-color: var(--bsm-signal-buy-border);
}

#receipt-modal .receipt.sell,
#receipt-modal .receipt.is-sell {
    border-color: var(--bsm-signal-sell-border);
}


/* ==========================================================================
   26. ACCESSIBLE DARK-MODE ALERTS
   ==========================================================================

   Alert text remains light for readability.

   Alert meaning must also be communicated in HTML text.
   ========================================================================== */

.alert-success,
.alert-error,
.alert-danger,
.alert-warning,
.alert-info {
    color: var(--bsm-text-primary);
}


/* ==========================================================================
   27. COLOR CONTRAST AND TEXT HIERARCHY
   ==========================================================================

   Muted text is still intended to remain readable.

   Do not make financial risk disclaimers nearly invisible.
   ========================================================================== */

.auth-disclaimer,
.receipt-disclaimer,
.performance-disclaimer,
.payment-security-note {
    color: var(--bsm-text-muted);
}


/* ==========================================================================
   28. THEME-SPECIFIC MOBILE BACKGROUND
   ==========================================================================

   Lower-complexity background rendering on mobile.

   No expensive fixed full-page image is used.
   ========================================================================== */

@media (max-width: 767px) {

    body.auth-page {
        background-attachment: scroll;
    }

    .glass-panel {
        background-color: var(--bsm-bg-surface);
    }

    #price-chart {
        background-color: var(--bsm-chart-background);
    }

}


/* ==========================================================================
   29. REDUCED MOTION
   ==========================================================================

   Only decorative motion is affected.

   The actual 30-second signal popup timer remains
   controlled by JavaScript.

   CPI countdown calculations are not paused.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .glass-panel {
        -webkit-backdrop-filter: none;

        backdrop-filter: none;
    }

    .signal-popup.is-buy,
    .signal-popup.is-sell {
        transition-duration: 0ms;
    }

}


/* ==========================================================================
   30. HIGH CONTRAST
   ==========================================================================

   Retain the dark palette while strengthening borders
   and supporting text readability.
   ========================================================================== */

@media (prefers-contrast: more) {

    :root,
    :root[data-theme="baloch-dark"],
    body.theme-baloch-dark {

        --bsm-text-secondary: #E6EDF4;

        --bsm-text-muted: #C9D7E5;

        --bsm-text-placeholder: #C9D7E5;

        --bsm-border-subtle:
            rgba(230, 237, 244, 0.36);

        --bsm-border-default:
            rgba(230, 237, 244, 0.52);

        --bsm-border-strong:
            rgba(244, 248, 252, 0.76);

        --bsm-focus-color: #C7F9FF;

    }

}


/* ==========================================================================
   31. FORCED COLORS
   ==========================================================================

   Allow the operating system to use accessible
   high-contrast colors.

   Theme gradients must not interfere with system colors.
   ========================================================================== */

@media (forced-colors: active) {

    :root,
    :root[data-theme="baloch-dark"],
    body.theme-baloch-dark {
        color-scheme: normal;
    }

    body,
    .auth-card,
    .dashboard-card,
    .admin-card,
    .notification-item,
    .receipt-card,
    .signal-popup {
        background-image: none;

        box-shadow: none;
    }

    .signal-popup.is-buy,
    .signal-popup.is-sell {
        background-image: none;

        border-color: CanvasText;
    }

    :where(
        a[href],
        button,
        input,
        select,
        textarea
    ):focus-visible {
        outline-color: Highlight;
    }

}


/* ==========================================================================
   32. REDUCED TRANSPARENCY
   ==========================================================================

   Opaque background fallback for accessibility.
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {

    .glass-panel {
        background-color: var(--bsm-bg-surface);

        -webkit-backdrop-filter: none;

        backdrop-filter: none;
    }

    #notice-panel {
        background-color: var(--bsm-bg-modal);
    }

}


/* ==========================================================================
   33. PRINTING
   ==========================================================================

   A dark theme should not waste ink when printing
   ordinary authorized reports.

   Hidden or unauthorized elements must stay hidden.

   Signal receipts retain the dedicated print handling
   from signal-receipt.css.
   ========================================================================== */

@media print {

    html,
    body {
        color-scheme: light;

        background: #FFFFFF !important;

        color: #111827 !important;
    }

    .card,
    .panel,
    .dashboard-card,
    .admin-card,
    .plan-card {
        box-shadow: none;
    }

    [hidden] {
        display: none !important;
    }

}


/* ==========================================================================
   34. FINAL DARK THEME INTEGRATION CHECKLIST
   ==========================================================================

   BRAND
   -----
   [x] Midnight Navy
   [x] Electric Cyan
   [x] BUY Green
   [x] SELL Red
   [x] Intelligence Violet

   SEMANTIC TOKENS
   ---------------
   [x] Primary / accent colors
   [x] Success / danger / warning / info
   [x] Page and header surfaces
   [x] Cards and panels
   [x] Sidebar
   [x] Inputs
   [x] Modal backgrounds
   [x] Text hierarchy
   [x] Borders
   [x] Focus colors
   [x] Shadows
   [x] Gradients

   TRADING
   -------
   [x] BUY signal colors
   [x] SELL signal colors
   [x] Popup gradients
   [x] Popup glow
   [x] Market-level clues
   [x] Chart backgrounds
   [x] Candle colors
   [x] Chart grid and axes
   [x] Indicator colors
   [x] Healthy feed
   [x] Degraded feed
   [x] Disconnected feed
   [x] Unverified feed

   MEMBER INTERFACE
   ----------------
   [x] Login
   [x] Registration
   [x] Subscription plans
   [x] Manual payment forms
   [x] Restricted access
   [x] Dashboard
   [x] Economic events
   [x] CPI countdown
   [x] Notifications
   [x] Signal receipts

   ADMINISTRATION
   --------------
   [x] Sidebar
   [x] Topbar
   [x] Overview cards
   [x] Tables
   [x] Search / input controls
   [x] Payment review status
   [x] Administrative warnings

   ACCESSIBILITY
   -------------
   [x] Accessible focus palette
   [x] Text hierarchy
   [x] Dark native controls
   [x] High contrast
   [x] Forced colors
   [x] Reduced transparency
   [x] Reduced motion
   [x] Responsive mobile presentation
   [x] Print handling

   ==========================================================================
   SECURITY / INTEGRATION NOTES

   BrandSettingsService:
       Returns the approved public theme code.

   Frontend ThemeManager:
       Loads only approved same-origin theme stylesheets.

   MarketController:
       Returns available authorized markets.

   CandleController:
       Supplies verified financial chart data.

   NotificationController:
       Routes authorized selected-market notifications.

   EconomicController:
       Supplies verified economic events.

   ReceiptService:
       Provides only member-owned receipt information.

   AdminController:
       Enforces administrator permissions independently
       of the selected theme.

   ==========================================================================
   END OF BALOCH SM PREMIUM DARK THEME
   ========================================================================== */