/* ==========================================================================
   BALOCH SM — GLOBAL RESPONSIVE LAYOUT SYSTEM
   ==========================================================================

   FILE:
   <DOMAIN_ROOT>/public_html/assets/css/layout.css

   WEBSITE:
   https://investt.online

   VERSION:
   1.0.0

   ==========================================================================

   PURPOSE

   Provide the structural layout for:

   01. Public landing page
   02. Member login and registration
   03. Subscription request dashboard
   04. Approved Forex trading dashboard
   05. Market selection tabs
   06. Chart workspaces and toolbars
   07. Economic event panels
   08. Signal history regions
   09. Administrator authentication
   10. Administrator control center
   11. Administrator sidebar/navigation
   12. Mobile and installed PWA layouts
   13. Accessible content containers
   14. Responsive tables and forms
   15. Browser safe-area handling

   ==========================================================================

   LOAD ORDER

   1. reset.css
   2. tokens.css
   3. themes/{active-theme}.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

   ==========================================================================

   SECURITY AND MARKET-DATA RULES

   - Layout never generates financial information.
   - A chart must never show fabricated prices.
   - Hidden private content remains hidden.
   - User market selection is controlled by JavaScript/backend.
   - Subscription authorization remains server-side.
   - CSS does not control real signal validity or delivery.
   - No external fonts or resources are imported.
   - No inline JavaScript is required.

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


/* ==========================================================================
   01. ROOT LAYOUT SAFETY
   ========================================================================== */

html {
    min-width: 0;
    min-height: 100%;
}

body {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

/*
 * Grid and flex children must be allowed to shrink.
 *
 * Without min-width:0, long Forex symbols, prices, tables,
 * and event names can force the entire page to overflow.
 */

:where(
    .page-shell,
    .app-shell,
    .dashboard-shell,
    .dashboard-layout,
    .dashboard-workspace,
    .admin-shell,
    .admin-main-wrap,
    .auth-layout,
    .auth-card,
    .chart-panel,
    .chart-container,
    .dashboard-main,
    .dashboard-content,
    .admin-main,
    .admin-card
) {
    min-width: 0;
}


/* ==========================================================================
   02. MAIN APPLICATION PAGE SHELL
   ==========================================================================

   Existing public/authentication/admin pages use:

   .page-shell
   .app-topbar
   .app-main
   .footer-minimal

   This creates a reliable sticky-footer arrangement without
   requiring absolute positioning.
   ========================================================================== */

.page-shell,
.app-shell {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    position: relative;
    isolation: isolate;
}

.page-shell > .app-main,
.app-shell > .app-main {
    flex: 1 0 auto;
}

.page-shell > footer,
.app-shell > footer {
    flex-shrink: 0;
}


/* ==========================================================================
   03. MOBILE SAFE AREA SUPPORT
   ==========================================================================

   For Android/iOS installed PWA viewports and display cutouts.
   ========================================================================== */

.shell-safe-bottom {
    padding-bottom: var(--bsm-safe-bottom);
}

.shell-safe-top {
    padding-top: var(--bsm-safe-top);
}

.safe-area-inline {
    padding-inline-start:
        var(--bsm-safe-left);

    padding-inline-end:
        var(--bsm-safe-right);
}


/* ==========================================================================
   04. CANONICAL PAGE CONTAINER
   ==========================================================================

   Shared by:

   - Homepage
   - Header
   - Footer
   - Login
   - Signup
   - Offline page
   - Subscription information

   Safe-area padding and responsive gutters are already
   derived from tokens.css.
   ========================================================================== */

.page-container,
.container,
.site-container {
    width: min(
        var(--bsm-page-max-width),
        calc(
            100%
            - var(--bsm-page-gutter)
            - var(--bsm-page-gutter)
            - var(--bsm-safe-left)
            - var(--bsm-safe-right)
        )
    );

    margin-inline: auto;
}

.page-container-wide,
.container-wide {
    width: min(
        var(--bsm-page-wide-max-width),
        calc(
            100%
            - var(--bsm-page-gutter)
            - var(--bsm-page-gutter)
            - var(--bsm-safe-left)
            - var(--bsm-safe-right)
        )
    );

    margin-inline: auto;
}

.page-container-reading,
.container-reading {
    width: min(
        var(--bsm-reading-max-width),
        calc(
            100%
            - var(--bsm-page-gutter)
            - var(--bsm-page-gutter)
        )
    );

    margin-inline: auto;
}


/* ==========================================================================
   05. GENERIC FULL-WIDTH CONTENT REGIONS
   ========================================================================== */

.full-width,
.w-full {
    width: 100%;
}

.full-height {
    min-height: 100%;
}

.min-width-zero {
    min-width: 0;
}

.min-height-zero {
    min-height: 0;
}


/* ==========================================================================
   06. APPLICATION HEADER
   ==========================================================================

   Existing PHP markup:

   <header class="app-topbar">
       <div class="app-topbar-inner page-container">
           ...
       </div>
   </header>

   This header remains usable on small screens and in PWAs.
   ========================================================================== */

.app-topbar {
    position: relative;
    z-index: var(--bsm-z-header);

    width: 100%;

    padding-top: var(--bsm-safe-top);

    background-color: var(--bsm-bg-header);

    border-bottom:
        var(--bsm-border-width)
        solid
        var(--bsm-border-subtle);
}

.app-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap:
        var(--bsm-space-3)
        var(--bsm-space-5);

    min-height: var(--bsm-header-height);

    padding-block: var(--bsm-space-3);
}

.app-topbar-inner > * {
    min-width: 0;
}


/* ==========================================================================
   07. BRAND LAYOUT
   ==========================================================================

   Used by existing public and administrator PHP pages.

   Color and decorative effects are controlled by components.css
   and the current theme.

   Keep logo dimensions predictable to prevent layout shifts.
   ========================================================================== */

.brand {
    display: inline-flex;
    align-items: center;

    gap: var(--bsm-space-3);

    min-width: 0;

    max-width: 100%;

    text-decoration: none;
}

.brand-mark {
    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    line-height: 1;
}

.brand-mark img,
.brand-mark svg {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.brand > span:last-child {
    min-width: 0;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   08. HEADER NAVIGATION
   ========================================================================== */

.app-topbar nav {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: var(--bsm-space-2);

    min-width: 0;
}

.app-topbar nav > a,
.app-topbar nav > button {
    flex-shrink: 0;
}


/* ==========================================================================
   09. MAIN PUBLIC CONTENT AREA
   ========================================================================== */

.app-main {
    display: block;

    width: 100%;

    min-width: 0;

    padding-block:
        clamp(
            var(--bsm-space-6),
            4vw,
            var(--bsm-space-12)
        );
}

.app-main > * {
    min-width: 0;
}


/* ==========================================================================
   10. MAIN PAGE SECTIONS
   ========================================================================== */

.page-section,
.content-section {
    min-width: 0;

    padding-block:
        clamp(
            var(--bsm-space-8),
            5vw,
            var(--bsm-space-16)
        );
}

.section-header {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: var(--bsm-space-3);

    min-width: 0;
}

.section-header > * {
    max-width: 100%;
}


/* ==========================================================================
   11. FOOTER LAYOUT
   ========================================================================== */

.footer-minimal,
.app-footer,
.site-footer {
    width: 100%;

    padding-block:
        var(--bsm-space-5)
        calc(
            var(--bsm-space-5)
            + var(--bsm-safe-bottom)
        );

    min-width: 0;
}

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

    flex-wrap: wrap;

    gap: var(--bsm-space-3);
}


/* ==========================================================================
   12. FLEXIBLE ROW UTILITY
   ==========================================================================

   Used in existing HTML:

   .flex-wrap

   Also supports general action rows and badges.
   ========================================================================== */

.flex-wrap,
.inline-group,
.action-group {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: var(--bsm-space-3);

    min-width: 0;
}

.inline-group > *,
.action-group > * {
    min-width: 0;
}


/* ==========================================================================
   13. CENTERED LAYOUT
   ========================================================================== */

.center-content {
    display: grid;
    place-items: center;

    min-width: 0;
}

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


/* ==========================================================================
   14. VERTICAL STACKS
   ========================================================================== */

.stack {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-4);

    min-width: 0;
}

.stack-sm {
    gap: var(--bsm-space-2);
}

.stack-lg {
    gap: var(--bsm-space-6);
}

.stack-xl {
    gap: var(--bsm-space-10);
}


/* ==========================================================================
   15. COMMON SPLIT LAYOUT
   ========================================================================== */

.split-layout,
.two-column-layout {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: start;

    gap: var(--bsm-section-gap);

    min-width: 0;
}

.split-layout > *,
.two-column-layout > * {
    min-width: 0;
}


/* ==========================================================================
   16. RESPONSIVE AUTO GRID
   ========================================================================== */

.auto-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 260px),
                1fr
            )
        );

    gap: var(--bsm-section-gap);

    min-width: 0;
}


/* ==========================================================================
   17. AUTHENTICATION PAGE LAYOUT
   ==========================================================================

   Existing files:

   public_html/login.php
   public_html/signup.php

   public_html/admin/login.php
   public_html/admin/logout.php

   Existing CSS classes:

   .auth-layout
   .auth-hero
   .auth-card
   .auth-form
   .auth-links

   The login and administrator login pages share the same
   structural grid without sharing their authentication logic.
   ========================================================================== */

.auth-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(
            0,
            var(--bsm-form-max-width)
        );

    align-items: center;

    gap:
        clamp(
            var(--bsm-space-8),
            5vw,
            var(--bsm-space-20)
        );

    width: min(
        var(--bsm-auth-max-width),
        calc(
            100%
            - var(--bsm-page-gutter)
            - var(--bsm-page-gutter)
        )
    );

    margin-inline: auto;

    min-width: 0;
}


/* ==========================================================================
   18. AUTHENTICATION HERO COLUMN
   ========================================================================== */

.auth-hero {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    gap: var(--bsm-space-5);

    min-width: 0;
}

.auth-hero > * {
    max-width: 100%;
}

.auth-hero h1 {
    max-width: 15ch;

    font-size: var(--bsm-heading-hero);

    line-height: var(--bsm-leading-tight);

    letter-spacing: var(--bsm-tracking-tight);

    overflow-wrap: break-word;
}

.auth-hero > img,
.auth-hero > svg {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   19. AUTHENTICATION CARD
   ========================================================================== */

.auth-card {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-5);

    justify-self: end;

    width: 100%;
    max-width: var(--bsm-form-max-width);

    min-width: 0;
}

.auth-card > * {
    min-width: 0;
}


/* ==========================================================================
   20. AUTHENTICATION FORMS
   ==========================================================================

   Labels, inputs, validation messages and buttons are laid
   out consistently.

   Input colors and borders belong to auth.css/components.css.
   ========================================================================== */

.auth-form {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-4);

    width: 100%;
    min-width: 0;
}

.auth-form .field {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-2);

    width: 100%;
    min-width: 0;
}

.auth-form .field > input,
.auth-form .field > select,
.auth-form .field > textarea {
    width: 100%;
    min-width: 0;
}

.auth-links {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap:
        var(--bsm-space-2)
        var(--bsm-space-4);
}


/* ==========================================================================
   21. AUTHENTICATION SUPPORT CONTENT
   ========================================================================== */

.auth-note,
.auth-disclaimer,
.field-help {
    max-width: 100%;

    min-width: 0;

    overflow-wrap: break-word;
}


/* ==========================================================================
   22. PUBLIC / MEMBER DASHBOARD ROOT
   ==========================================================================

   Two structural patterns are supported:

   Pattern A:
       .dashboard-shell
           .dashboard-header
           .dashboard-main

   Pattern B:
       .dashboard-shell
           .dashboard-workspace
               .dashboard-sidebar
               .dashboard-main

   This avoids requiring one hardcoded HTML structure.
   ========================================================================== */

.dashboard-shell {
    display: flex;
    flex-direction: column;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    min-width: 0;

    isolation: isolate;
}

.dashboard-shell > * {
    min-width: 0;
}


/* ==========================================================================
   23. DASHBOARD MAIN CONTENT
   ========================================================================== */

.dashboard-main,
.dashboard-content,
.trading-main {
    min-width: 0;
    min-height: 0;

    width: 100%;
}

.dashboard-main {
    flex: 1 1 auto;
}


/* ==========================================================================
   24. DASHBOARD WORKSPACE
   ==========================================================================

   For layouts with a persistent market information sidebar.

   The workspace stacks automatically on smaller screens.
   ========================================================================== */

.dashboard-workspace,
.dashboard-layout,
.trading-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(
            260px,
            var(--bsm-dashboard-sidebar-width)
        );

    align-items: start;

    gap: var(--bsm-section-gap);

    width: 100%;

    min-width: 0;
}

.dashboard-workspace > *,
.dashboard-layout > *,
.trading-layout > * {
    min-width: 0;
}


/* ==========================================================================
   25. DASHBOARD SIDEBAR
   ========================================================================== */

.dashboard-sidebar,
.trading-sidebar {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-4);

    min-width: 0;
}


/* ==========================================================================
   26. DASHBOARD HEADER AND TOOLBARS
   ========================================================================== */

.dashboard-header,
.dashboard-topbar,
.dashboard-toolbar,
.market-toolbar,
.chart-toolbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap:
        var(--bsm-space-3)
        var(--bsm-space-4);

    width: 100%;
    min-width: 0;
}

.dashboard-header > *,
.dashboard-toolbar > *,
.market-toolbar > *,
.chart-toolbar > * {
    min-width: 0;
}


/* ==========================================================================
   27. MARKET TAB LAYOUT
   ==========================================================================

   CONFIRMED DASHBOARD INTEGRATION:

   #market-tabs

   The current-market state is controlled by JavaScript and
   verified private services.

   This CSS only arranges the tabs.

   Market clues must remain attached to market tabs, never
   exposed at pair level before changing markets.
   ========================================================================== */

.market-tabs,
#market-tabs {
    display: flex;
    align-items: stretch;

    gap: var(--bsm-market-tab-gap);

    width: 100%;
    max-width: 100%;

    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;

    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}

.market-tabs > *,
#market-tabs > * {
    flex: 0 0 auto;

    min-height:
        var(--bsm-market-tab-min-height);
}


/* ==========================================================================
   28. TIMEFRAME AND PAIR SELECTORS
   ==========================================================================

   CONFIRMED DASHBOARD INTEGRATIONS:

   #pair-select
   #tf-select

   The available options must be supplied by verified APIs.
   Unsupported provider timeframes must not be invented.
   ========================================================================== */

#pair-select,
#tf-select {
    display: block;

    min-width: 0;

    max-width: 100%;
}

.market-toolbar label,
.chart-toolbar label,
.dashboard-toolbar label {
    min-width: 0;
}

.timeframe-tabs,
.timeframe-list {
    display: flex;
    align-items: center;

    flex-wrap: nowrap;

    gap: var(--bsm-space-1);

    max-width: 100%;

    overflow-x: auto;

    scrollbar-width: thin;

    overscroll-behavior-inline: contain;
}

.timeframe-tabs > *,
.timeframe-list > * {
    flex: 0 0 auto;
}


/* ==========================================================================
   29. MAIN FINANCIAL CHART REGION
   ==========================================================================

   CONFIRMED DASHBOARD INTEGRATION:

   #price-chart

   Chart geometry is owned by chart rendering JavaScript.

   The container provides layout stability only.

   DO NOT:
   - Generate fake candles.
   - Force a chart to show stale values as live.
   - Apply global colors to chart SVG geometry.
   - Stretch the intrinsic drawing buffer of a canvas.
   ========================================================================== */

.chart-panel,
.chart-region,
.chart-container {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-3);

    width: 100%;

    min-width: 0;
    min-height: 0;
}

#price-chart {
    display: block;

    position: relative;

    width: 100%;

    min-width: 0;

    min-height:
        var(--bsm-chart-min-height);

    overflow: hidden;
}


/* ==========================================================================
   30. CHART MEDIA INTEGRITY
   ==========================================================================

   SVG and canvas visualizations require separate sizing rules.

   SVG inherits its viewBox from the chart renderer.

   Canvas pixel density is configured by JavaScript.
   ========================================================================== */

#price-chart svg {
    max-width: 100%;
}

#price-chart canvas {
    display: block;

    max-width: 100%;
}


/* ==========================================================================
   31. DASHBOARD WIDGET GRID
   ==========================================================================

   Can contain:
   - Trading chart
   - Latest signals
   - Economic news
   - Performance
   - Subscription status
   ========================================================================== */

.dashboard-grid,
.dashboard-panels {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: var(--bsm-section-gap);

    min-width: 0;
}

.dashboard-grid > *,
.dashboard-panels > * {
    min-width: 0;
}

.dashboard-grid .full-span,
.dashboard-panels .full-span {
    grid-column: 1 / -1;
}


/* ==========================================================================
   32. RECENT SIGNALS AND ECONOMIC EVENT PANELS
   ==========================================================================

   CONFIRMED DASHBOARD INTEGRATIONS:

   #recent-signals
   #economic-events

   These are layout regions, not market-data generators.
   ========================================================================== */

#recent-signals,
#economic-events {
    min-width: 0;

    max-width: 100%;
}

#recent-signals > *,
#economic-events > * {
    min-width: 0;
}


/* ==========================================================================
   33. DASHBOARD EMPTY / RESTRICTED STATES
   ==========================================================================

   Pending subscription dashboards must stay distinct from
   approved market workspaces.

   Actual access is enforced by PHP and API services.
   ========================================================================== */

.dashboard-restricted,
.access-gate,
.subscription-gate {
    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: var(--bsm-section-gap);

    width: min(
        100%,
        var(--bsm-content-max-width)
    );

    margin-inline: auto;

    min-width: 0;
}

.subscription-grid,
.plan-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 250px),
                1fr
            )
        );

    gap: var(--bsm-section-gap);
}


/* ==========================================================================
   34. MEMBER PAYMENT FORM LAYOUT
   ==========================================================================

   Visual layout only.

   Receipt files must still be scanned and stored privately.
   ========================================================================== */

.payment-form,
.subscription-form {
    display: grid;

    gap: var(--bsm-space-4);

    min-width: 0;

    max-width: var(--bsm-admin-form-max-width);
}

.payment-form > *,
.subscription-form > * {
    min-width: 0;
}


/* ==========================================================================
   35. ECONOMIC COUNTDOWN LAYOUT
   ==========================================================================

   The timer must use verified UTC event time and synchronized
   server time.

   This class merely arranges displayed values.
   ========================================================================== */

.economic-countdown,
.cpi-countdown,
.countdown-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: var(--bsm-space-2);

    min-width: 0;
}

.economic-countdown > *,
.cpi-countdown > *,
.countdown-grid > * {
    min-width: 0;
    text-align: center;
}


/* ==========================================================================
   36. ADMINISTRATION APPLICATION SHELL
   ==========================================================================

   EXACT PRIOR ADMIN MARKUP:

   .admin-shell
       .admin-sidebar
       .admin-main-wrap
           .admin-topbar
           .admin-mobile-nav
           .admin-main
               .admin-heading
               .admin-card
               .admin-footer

   Desktop:
   Persistent sidebar + primary content.

   Mobile:
   Sidebar becomes a visible horizontal navigation strip.

   This guarantees navigation even if the optional
   admin-menu-toggle JavaScript has not been initialized.
   ========================================================================== */

.admin-shell {
    display: grid;

    grid-template-columns:
        var(--bsm-admin-sidebar-width)
        minmax(0, 1fr);

    align-items: stretch;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    min-width: 0;

    position: relative;
    isolation: isolate;
}


/* ==========================================================================
   37. ADMINISTRATOR SIDEBAR
   ========================================================================== */

.admin-sidebar {
    display: flex;
    flex-direction: column;

    position: sticky;
    top: 0;

    align-self: start;

    height: 100vh;
    height: 100dvh;

    width: 100%;

    min-width: 0;

    gap: var(--bsm-space-6);

    padding:
        var(--bsm-space-6)
        var(--bsm-space-4);

    background-color: var(--bsm-bg-sidebar);

    border-inline-end:
        var(--bsm-border-width)
        solid
        var(--bsm-border-subtle);

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;

    overscroll-behavior: contain;

    z-index: var(--bsm-z-sidebar);
}

.admin-sidebar > * {
    min-width: 0;
}


/* ==========================================================================
   38. ADMINISTRATOR NAVIGATION
   ========================================================================== */

.admin-nav {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-1);

    width: 100%;
    min-width: 0;
}

.admin-nav-link {
    display: flex;
    align-items: center;

    gap: var(--bsm-space-3);

    min-height:
        var(--bsm-touch-target-min);

    width: 100%;

    min-width: 0;

    padding:
        var(--bsm-space-2)
        var(--bsm-space-3);

    text-decoration: none;
}

.admin-nav-link > * {
    min-width: 0;
}

.admin-sidebar > form {
    margin-top: auto;

    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   39. ADMINISTRATOR MAIN WRAPPER
   ========================================================================== */

.admin-main-wrap {
    display: flex;
    flex-direction: column;

    width: 100%;

    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}


/* ==========================================================================
   40. ADMINISTRATOR TOP BAR
   ========================================================================== */

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

    flex-wrap: wrap;

    gap:
        var(--bsm-space-3)
        var(--bsm-space-4);

    position: sticky;
    top: 0;

    z-index: var(--bsm-z-header);

    min-height:
        var(--bsm-admin-topbar-height);

    width: 100%;

    padding:
        var(--bsm-space-3)
        var(--bsm-page-gutter);

    background-color: var(--bsm-bg-header);

    border-bottom:
        var(--bsm-border-width)
        solid
        var(--bsm-border-subtle);
}

.admin-topbar > * {
    min-width: 0;
}

.admin-topbar > strong {
    margin-inline-end: auto;
}

.admin-top-user {
    display: inline-flex;
    align-items: center;

    gap: var(--bsm-space-2);

    min-width: 0;
}


/* ==========================================================================
   41. ADMINISTRATOR MOBILE MENU BASELINE
   ==========================================================================

   The previously generated administrator HTML includes:

   #admin-menu-toggle
   #admin-side-mobile

   This layout does not depend on them.

   The primary .admin-nav remains available on mobile,
   so navigation cannot disappear if app.js has not loaded.

   The optional duplicate menu button remains hidden here.
   ========================================================================== */

.admin-menu-button {
    display: none;
}

.admin-mobile-nav {
    min-width: 0;
}

.admin-mobile-nav:not([hidden]) {
    display: flex;
    flex-wrap: wrap;

    gap: var(--bsm-space-2);

    padding: var(--bsm-space-4);

    background-color: var(--bsm-bg-surface);
}


/* ==========================================================================
   42. ADMINISTRATOR MAIN CONTENT
   ========================================================================== */

.admin-main {
    display: flex;
    flex-direction: column;

    flex: 1 0 auto;

    gap: var(--bsm-section-gap);

    width: min(
        100%,
        var(--bsm-page-wide-max-width)
    );

    margin-inline: auto;

    padding:
        var(--bsm-space-6)
        var(--bsm-page-gutter)
        var(--bsm-space-10);

    min-width: 0;
}

.admin-main > * {
    min-width: 0;
}


/* ==========================================================================
   43. ADMINISTRATOR PAGE HEADING
   ========================================================================== */

.admin-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: var(--bsm-space-4);

    min-width: 0;
}

.admin-heading > * {
    min-width: 0;
    max-width: 100%;
}

.admin-heading h1 {
    font-size: var(--bsm-heading-page);

    line-height: var(--bsm-leading-tight);
}


/* ==========================================================================
   44. ADMINISTRATOR OVERVIEW STATISTICS
   ========================================================================== */

.admin-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 190px),
                1fr
            )
        );

    gap: var(--bsm-space-4);

    min-width: 0;
}

.admin-stat {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: var(--bsm-space-3);

    min-width: 0;

    min-height:
        var(--bsm-admin-stat-min-height);
}


/* ==========================================================================
   45. ADMINISTRATOR CONTENT CARDS
   ========================================================================== */

.admin-card {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-4);

    width: 100%;

    min-width: 0;
}

.admin-card > * {
    min-width: 0;
}


/* ==========================================================================
   46. ADMINISTRATOR TABLE SCROLL REGION
   ==========================================================================

   Critical for mobile:

   Long payment IDs and audit records must scroll inside
   the table region, not force the entire viewport sideways.
   ========================================================================== */

.admin-table-scroll {
    display: block;

    width: 100%;
    max-width: 100%;

    min-width: 0;

    overflow-x: auto;
    overflow-y: visible;

    scrollbar-width: thin;

    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}

.admin-table {
    width: 100%;

    min-width:
        var(--bsm-admin-table-min-width);

    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    min-width: 0;

    padding: var(--bsm-admin-table-cell-padding);

    vertical-align: middle;
}


/* ==========================================================================
   47. ADMINISTRATOR FORMS
   ==========================================================================

   Matches existing admin/index.php forms:

   .admin-form
   .admin-action-row

   Colors and states are provided by components.css/admin.css.
   ========================================================================== */

.admin-form {
    display: grid;

    gap: var(--bsm-space-4);

    width: min(
        100%,
        var(--bsm-admin-form-max-width)
    );

    min-width: 0;
}

.admin-form label {
    display: grid;

    gap: var(--bsm-space-2);

    min-width: 0;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;
    min-width: 0;
}

.admin-action-row {
    display: flex;
    align-items: end;

    flex-wrap: wrap;

    gap: var(--bsm-space-3);

    min-width: 0;
}

.admin-action-row > * {
    min-width: 0;
}

.admin-action-row label {
    display: flex;
    flex-direction: column;

    flex: 1 1 170px;

    gap: var(--bsm-space-2);

    min-width: 0;
}


/* ==========================================================================
   48. ADMINISTRATOR FOOTER
   ========================================================================== */

.admin-footer {
    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: var(--bsm-space-3);

    width: 100%;

    margin-top: auto;

    padding-top: var(--bsm-space-6);

    border-top:
        var(--bsm-border-width)
        solid
        var(--bsm-border-subtle);
}


/* ==========================================================================
   49. GENERIC RESPONSIVE FORM GRID
   ========================================================================== */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: var(--bsm-space-4);

    min-width: 0;
}

.form-grid > * {
    min-width: 0;
}

.form-grid .full-span {
    grid-column: 1 / -1;
}


/* ==========================================================================
   50. GENERIC HORIZONTAL SCROLL REGION
   ========================================================================== */

.scroll-x,
.horizontal-scroll {
    display: block;

    max-width: 100%;
    min-width: 0;

    overflow-x: auto;

    scrollbar-width: thin;

    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   51. CARD COLLECTION LAYOUT
   ========================================================================== */

.card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 280px),
                1fr
            )
        );

    gap: var(--bsm-section-gap);

    min-width: 0;
}


/* ==========================================================================
   52. RESPONSIVE MEDIA WRAPPERS
   ========================================================================== */

.media-frame {
    position: relative;

    width: 100%;

    min-width: 0;

    overflow: hidden;
}

.media-frame > img,
.media-frame > video {
    display: block;

    width: 100%;
    height: auto;
}


/* ==========================================================================
   53. MOBILE-FIRST OVERFLOW SAFETY
   ==========================================================================

   Prevent specific content regions from causing page overflow.

   We intentionally do not apply overflow-x:hidden to body;
   that could interfere with sticky positioning and mask bugs.
   ========================================================================== */

.auth-card,
.admin-card,
.dashboard-content,
.chart-panel,
.section-header {
    overflow-wrap: break-word;
}


/* ==========================================================================
   54. DESKTOP WIDE SCREEN ADJUSTMENTS
   ========================================================================== */

@media (min-width: 1600px) {

    .dashboard-workspace,
    .dashboard-layout,
    .trading-layout {
        gap: var(--bsm-space-8);
    }

    .admin-main {
        padding-block-start: var(--bsm-space-8);
    }

}


/* ==========================================================================
   55. MEDIUM DESKTOP / TABLET
   ========================================================================== */

@media (max-width: 1199px) {

    .auth-layout {
        gap: var(--bsm-space-8);
    }

    .dashboard-workspace,
    .dashboard-layout,
    .trading-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(230px, 260px);
    }

    .admin-shell {
        grid-template-columns:
            minmax(220px, var(--bsm-admin-sidebar-width))
            minmax(0, 1fr);
    }

}


/* ==========================================================================
   56. TABLET / SMALL LAPTOP LAYOUT
   ========================================================================== */

@media (max-width: 1024px) {

    .auth-layout {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1fr);
    }

    .auth-hero h1 {
        font-size: clamp(
            1.9rem,
            3.8vw,
            3rem
        );
    }

    .dashboard-workspace,
    .dashboard-layout,
    .trading-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-sidebar,
    .trading-sidebar {
        width: 100%;
    }

    .dashboard-grid,
    .dashboard-panels {
        gap: var(--bsm-space-4);
    }

}


/* ==========================================================================
   57. MOBILE ADMINISTRATION NAVIGATION
   ==========================================================================

   Important integration requirement:

   The admin/index.php source already contains a sidebar
   navigation and an optional mobile navigation toggle.

   Until the corresponding JavaScript enhancement is available,
   the sidebar MUST remain usable on mobile.

   The primary admin nav becomes a horizontal scroll strip.

   This provides:
   - No hidden-only navigation
   - No required JavaScript toggle
   - Keyboard-accessible links
   - Touch-friendly section switching
   - Visible admin sign-out control
   ========================================================================== */

@media (max-width: 900px) {

    .admin-shell {
        display: flex;
        flex-direction: column;
    }

    .admin-sidebar {
        position: relative;
        top: auto;

        height: auto;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: center;

        gap: var(--bsm-space-3);

        width: 100%;

        padding:
            calc(
                var(--bsm-space-3)
                + var(--bsm-safe-top)
            )
            var(--bsm-page-gutter)
            var(--bsm-space-3);

        overflow: visible;

        border-inline-end: 0;

        border-bottom:
            var(--bsm-border-width)
            solid
            var(--bsm-border-subtle);
    }

    .admin-sidebar > .brand {
        grid-column: 1;
        grid-row: 1;
    }

    .admin-sidebar > form {
        grid-column: 2;
        grid-row: 1;

        width: auto;

        margin-top: 0;
    }

    .admin-nav {
        display: flex;
        flex-direction: row;

        grid-column: 1 / -1;
        grid-row: 2;

        gap: var(--bsm-space-1);

        width: 100%;

        min-width: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: thin;

        overscroll-behavior-inline: contain;

        -webkit-overflow-scrolling: touch;
    }

    .admin-nav-link {
        flex: 0 0 auto;

        width: auto;

        min-height:
            var(--bsm-touch-target-min);

        white-space: nowrap;
    }

    .admin-main-wrap {
        min-height: 0;

        flex: 1 1 auto;
    }

    .admin-topbar {
        top: 0;

        min-height:
            var(--bsm-mobile-header-height);

        padding-inline:
            var(--bsm-page-gutter);
    }

    .admin-main {
        padding-block: var(--bsm-space-5);
    }

}


/* ==========================================================================
   58. COMPACT TABLET AUTHENTICATION LAYOUT
   ========================================================================== */

@media (max-width: 820px) {

    .auth-layout {
        grid-template-columns: minmax(0, 1fr);

        gap: var(--bsm-space-8);
    }

    .auth-hero {
        width: 100%;

        max-width: 680px;

        margin-inline: auto;
    }

    .auth-hero h1 {
        max-width: 20ch;
    }

    .auth-card {
        justify-self: center;

        width: 100%;

        max-width: var(--bsm-form-max-width);
    }

    .split-layout,
    .two-column-layout {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================================
   59. MOBILE PHONE LAYOUT
   ========================================================================== */

@media (max-width: 767px) {

    .app-topbar-inner {
        min-height:
            var(--bsm-mobile-header-height);

        gap: var(--bsm-space-3);
    }

    .app-main {
        padding-block:
            var(--bsm-space-6);
    }

    .auth-layout {
        width: min(
            100%,
            calc(
                100%
                - var(--bsm-page-gutter)
                - var(--bsm-page-gutter)
            )
        );

        gap: var(--bsm-space-6);
    }

    .auth-hero {
        gap: var(--bsm-space-3);
    }

    .auth-hero h1 {
        max-width: 100%;

        font-size: var(--bsm-heading-page);
    }

    .auth-card {
        max-width: 100%;
    }

    .dashboard-header,
    .dashboard-topbar,
    .dashboard-toolbar,
    .market-toolbar,
    .chart-toolbar {
        align-items: stretch;

        gap: var(--bsm-space-2);
    }

    .dashboard-grid,
    .dashboard-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-grid .full-span,
    .dashboard-panels .full-span {
        grid-column: auto;
    }

    #price-chart {
        min-height:
            var(--bsm-chart-mobile-height);
    }

    .economic-countdown,
    .cpi-countdown,
    .countdown-grid {
        gap: var(--bsm-space-1);
    }

    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-grid .full-span {
        grid-column: auto;
    }

    .admin-main {
        gap: var(--bsm-space-4);
    }

    .admin-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-action-row {
        align-items: stretch;
    }

    .admin-action-row > button,
    .admin-action-row > .btn {
        min-height:
            var(--bsm-touch-target-min);
    }

}


/* ==========================================================================
   60. SMALL PHONE LAYOUT
   ========================================================================== */

@media (max-width: 480px) {

    .app-topbar-inner {
        align-items: flex-start;
    }

    .app-topbar nav {
        width: 100%;

        justify-content: flex-start;
    }

    .auth-layout {
        gap: var(--bsm-space-5);
    }

    .auth-hero h1 {
        font-size: clamp(
            1.75rem,
            8vw,
            2.25rem
        );
    }

    .admin-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-sidebar > .brand {
        grid-column: 1;
        grid-row: 1;
    }

    .admin-sidebar > form {
        grid-column: 1;
        grid-row: 2;
    }

    .admin-nav {
        grid-column: 1;
        grid-row: 3;
    }

    .admin-topbar {
        gap: var(--bsm-space-2);
    }

    .admin-topbar > strong {
        flex: 1 1 100%;
    }

    .admin-stat-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .admin-stat {
        min-height: 95px;
    }

    .countdown-grid,
    .cpi-countdown,
    .economic-countdown {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}


/* ==========================================================================
   61. VERY NARROW MOBILE DEVICES
   ========================================================================== */

@media (max-width: 360px) {

    .admin-stat-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .app-topbar-inner {
        gap: var(--bsm-space-2);
    }

    .auth-hero h1 {
        font-size: var(--bsm-text-2xl);
    }

}


/* ==========================================================================
   62. LANDSCAPE MOBILE LAYOUT
   ==========================================================================

   Avoid forcing chart and authentication panels to consume
   excessive vertical space in landscape orientation.
   ========================================================================== */

@media (
    max-width: 900px
) and (
    orientation: landscape
) and (
    max-height: 540px
) {

    .auth-layout {
        align-items: start;
    }

    .auth-hero {
        gap: var(--bsm-space-3);
    }

    #price-chart {
        min-height: 220px;
    }

    .app-main {
        padding-block: var(--bsm-space-4);
    }

}


/* ==========================================================================
   63. ACCESSIBLE ANCHOR POSITIONING
   ==========================================================================

   Prevent sticky headers from covering sections reached
   through in-page anchor links.
   ========================================================================== */

[id] {
    scroll-margin-top:
        calc(
            var(--bsm-header-height)
            + var(--bsm-space-4)
        );
}


/* ==========================================================================
   64. PRINT LAYOUT
   ==========================================================================

   Print only what the authenticated page already contains.

   These rules do not request private data or bypass access checks.
   ========================================================================== */

@media print {

    .page-shell,
    .app-shell,
    .dashboard-shell,
    .admin-shell {
        display: block;

        min-height: 0;
    }

    .admin-shell {
        grid-template-columns: none;
    }

    .admin-sidebar,
    .admin-topbar,
    .admin-mobile-nav {
        display: none !important;
    }

    .admin-main,
    .app-main {
        width: 100%;

        max-width: none;

        padding: 0;
    }

    .admin-table-scroll,
    .horizontal-scroll,
    .scroll-x {
        overflow: visible;
    }

    .dashboard-grid,
    .dashboard-panels,
    .admin-stat-grid,
    .card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-layout {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================================
   65. FINAL PROJECT INTEGRATION RULES
   ==========================================================================

   THE FOLLOWING EXISTING ELEMENTS ARE COVERED:

   PUBLIC PAGES
   ------------
   .page-shell
   .page-container
   .app-topbar
   .app-topbar-inner
   .app-main
   .footer-minimal
   .brand
   .brand-mark

   AUTHENTICATION
   --------------
   .auth-layout
   .auth-hero
   .auth-card
   .auth-form
   .auth-links

   MEMBER DASHBOARD
   ----------------
   .dashboard-shell
   .dashboard-main
   .dashboard-workspace
   .dashboard-grid
   #market-tabs
   #pair-select
   #tf-select
   #price-chart
   #recent-signals
   #economic-events

   ADMINISTRATION
   --------------
   .admin-shell
   .admin-sidebar
   .admin-nav
   .admin-nav-link
   .admin-main-wrap
   .admin-topbar
   .admin-main
   .admin-heading
   .admin-card
   .admin-stat-grid
   .admin-table-scroll
   .admin-table
   .admin-form
   .admin-action-row
   .admin-footer

   ==========================================================================
   SECURITY REQUIREMENTS
   ==========================================================================

   - No hidden element should be forced visible.
   - No private data is generated by CSS.
   - Market authorization remains server-side.
   - Signal notifications remain backend verified.
   - Live charts must never display invented market values.
   - Admin navigation must remain accessible on mobile.
   - Financial values must retain their original precision.
   - Responsive layout must not break keyboard navigation.

   ==========================================================================
   END OF BALOCH SM RESPONSIVE LAYOUT SYSTEM
   ========================================================================== */