/* ========================================================================== BALOCH SM — COMPLETE RESPONSIVE DESIGN SYSTEM ========================================================================== FILE: /public_html/assets/css/responsive.css WEBSITE: https://investt.online PROJECT: Baloch SM Trading Intelligence Platform VERSION: 1.0.0 ========================================================================== PURPOSE Final responsive coordination for: 01. Public website 02. Member registration 03. Member login 04. Administrator password login 05. Administrator MFA verification 06. Secure logout pages 07. Pending subscription dashboard 08. Payment instructions 09. Payment screenshot submission 10. Approved Forex dashboard 11. Market navigation 12. Pair and timeframe selectors 13. Verified candlestick chart 14. Technical indicator panels 15. Confirmed BUY/SELL signal history 16. Notification bell 17. Notification drawer 18. Thirty-second signal popups 19. Market-level notification clues 20. Signal receipt dialogs 21. Economic calendar and CPI countdown 22. Administrator sidebar 23. Administrator record tables 24. Administrator action forms 25. Installed PWA interfaces 26. Accessibility and touch interactions ========================================================================== EXACT EXISTING DASHBOARD IDS #market-tabs #pair-select #tf-select #price-chart #recent-signals #economic-events #bell-button #bell-count #notice-panel #notice-backdrop #signal-popup-stack #receipt-modal ========================================================================== ADMINISTRATOR INTEGRATION .admin-shell .admin-sidebar .admin-nav .admin-nav-link .admin-main-wrap .admin-topbar .admin-main .admin-card .admin-stat-grid .admin-table-scroll .admin-table .admin-action-row ========================================================================== STYLESHEET LOAD ORDER 01. reset.css 02. tokens.css 03. themes/{approved-theme}.css 04. themes/market-colors.css 05. layout.css 06. components.css 07. auth.css OR dashboard.css OR admin.css 08. notifications.css 09. signal-receipt.css 10. responsive.css 11. accessibility.css 12. motion/reduced-motion.css This file is designed to load AFTER all page-specific and component stylesheets. ========================================================================== IMPORTANT SECURITY PRINCIPLES - Responsive CSS never bypasses subscription access. - Administrator permissions remain enforced by PHP. - The hidden attribute remains authoritative. - CSS never generates fictional financial information. - Chart data must originate from verified APIs. - Notification routing belongs to the authenticated frontend. - No chart pair is switched automatically by CSS. - Other-market clues never expose pair details. - Reduced motion does not change signal timing. - CSS does not determine successful payment verification. ========================================================================== */ /* ========================================================================== 01. FOUNDATION — RESPONSIVE WIDTH SAFETY ========================================================================== Prevent long financial identifiers, dashboard rows, and nested grids from forcing the viewport wider. Do not globally hide horizontal overflow on html/body: doing so can mask layout errors and interfere with sticky headers or interactive browser behavior. ========================================================================== */ :where( .page-shell, .app-shell, .dashboard-shell, .dashboard-main, .dashboard-content, .dashboard-workspace, .dashboard-layout, .trading-layout, .admin-shell, .admin-main-wrap, .admin-main, .admin-card, .auth-layout, .auth-card, .chart-panel, .chart-region, .notification-panel, .notice-panel, .receipt-card, .receipt-content, .signal-receipt ) { min-width: 0; max-width: 100%; } /* ========================================================================== 02. GRID CHILD SHRINKING ========================================================================== Grid children that contain charts, tables or long symbols must be allowed to shrink within their own columns. ========================================================================== */ :where( .dashboard-grid, .dashboard-panels, .dashboard-workspace, .dashboard-layout, .trading-layout, .subscription-grid, .plan-grid, .admin-stat-grid, .form-grid, .card-grid, .receipt-grid, .receipt-details-grid ) > * { min-width: 0; } /* ========================================================================== 03. RESPONSIVE ASSET INTEGRITY ========================================================================== Preserve image aspect ratios. SVG and canvas drawing geometry remain under the control of the relevant renderer. Never stretch an OHLCV canvas drawing buffer in CSS to fabricate a chart size or change financial coordinates. ========================================================================== */ :where( .auth-hero, .dashboard-card, .admin-card, .receipt-card, .receipt-content, .notification-item ) img { max-width: 100%; height: auto; } :where( .auth-hero, .dashboard-card, .admin-card, .receipt-card ) svg { max-width: 100%; } /* ========================================================================== 04. HIDDEN ELEMENT PROTECTION ========================================================================== Existing reset.css declares [hidden] with !important. Preserve that rule in the final responsive layer. This protects notification drawers, dialogs and other intentionally hidden UI states from display overrides. Actual security authorization is server-side. ========================================================================== */ [hidden], #notice-panel[hidden], #notice-backdrop[hidden], #receipt-modal[hidden], #signal-popup-stack[hidden], .admin-mobile-nav[hidden] { display: none !important; } /* ========================================================================== 05. RESPONSIVE MEDIA AND EMBEDDED CONTENT ========================================================================== */ :where( .page-shell, .dashboard-shell, .admin-shell ) :where( img, video, iframe, embed, object ) { max-width: 100%; } iframe { border: 0; } /* ========================================================================== 06. RESPONSIVE FINANCIAL NUMBERS ========================================================================== Financial numbers should remain selectable and readable. Wrapping is preferable to clipping or silent truncation. Precision and rounding are determined by actual instrument metadata, never by CSS. ========================================================================== */ :where( .market-price, .chart-price, .receipt-price, .receipt-entry, .receipt-stop-loss, .receipt-take-profit, .transaction-id, .payment-reference, .signal-symbol, .audit-reference ) { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* ========================================================================== 07. AUTHENTICATED EMPTY-STATE SAFETY ========================================================================== An empty DOM node during API loading does not prove there are no signals or no economic events. Earlier dashboard styles include :empty fallback messages. Only show those messages when the application explicitly marks the response state as empty. This avoids presenting "no events" while data is loading or the network connection has failed. The frontend should use an actual state indicator such as: data-state="loading" data-state="empty" data-state="error" data-state="ready" ========================================================================== */ #recent-signals:empty:not([data-state="empty"])::before, #economic-events:empty:not([data-state="empty"])::before { content: none; display: none; } /* ========================================================================== 08. RESPONSIVE TABLE SAFETY ========================================================================== Wide administrator records must scroll inside an explicit table viewport. Never scale the table text to unreadably small sizes merely to force every column into a phone viewport. ========================================================================== */ .admin-table-scroll, .horizontal-scroll, .scroll-x { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; } .admin-table { border-collapse: collapse; } /* ========================================================================== 09. RESPONSIVE INPUT BEHAVIOR ========================================================================== Inputs must stay usable on mobile and under browser zoom. A font size of at least 16px is retained for phone inputs to avoid unwanted automatic Safari input zoom. Form values and validation remain server-controlled. ========================================================================== */ :where( .auth-form, .payment-form, .subscription-form, .admin-form, .admin-action-row ) :where( input, select, textarea ) { max-width: 100%; min-width: 0; } /* ========================================================================== 10. WIDE DESKTOP — 1600px AND ABOVE ========================================================================== Larger displays should gain better spacing, not giant uncontrolled text and stretched financial charts. ========================================================================== */ @media (min-width: 1600px) { .page-container-wide, .container-wide { max-width: var(--bsm-page-wide-max-width); } .dashboard-main { gap: var(--bsm-space-8); } .dashboard-workspace, .dashboard-layout, .trading-layout { gap: var(--bsm-space-8); } .dashboard-grid, .dashboard-panels { gap: var(--bsm-space-6); } .auth-layout { gap: var(--bsm-space-16); } .admin-main { gap: var(--bsm-space-8); } .admin-stat-grid { gap: var(--bsm-space-5); } .chart-panel { padding: var(--bsm-space-6); } #price-chart { min-height: 440px; } #signal-popup-stack { inset-inline-end: calc( var(--bsm-space-8) + var(--bsm-safe-right) ); } } /* ========================================================================== 11. STANDARD DESKTOP — 1200px TO 1599px ========================================================================== */ @media ( min-width: 1200px ) and ( max-width: 1599px ) { .dashboard-main, .admin-main { gap: var(--bsm-space-6); } .dashboard-grid, .dashboard-panels { gap: var(--bsm-space-5); } .chart-panel { padding: var(--bsm-space-5); } .auth-layout { gap: var(--bsm-space-10); } } /* ========================================================================== 12. SMALL DESKTOP — 1199px AND BELOW ========================================================================== */ @media (max-width: 1199px) { .page-container, .container, .site-container { max-width: 100%; } .dashboard-main { gap: var(--bsm-space-5); } .dashboard-workspace, .dashboard-layout, .trading-layout { gap: var(--bsm-space-4); } .dashboard-card, .dashboard-widget, .market-panel, .admin-card { padding: var(--bsm-space-5); } .auth-layout { gap: var(--bsm-space-8); } .auth-hero > img, .auth-hero > svg { max-width: min(100%, 360px); } .admin-stat-grid { grid-template-columns: repeat( auto-fit, minmax( min(100%, 180px), 1fr ) ); } } /* ========================================================================== 13. TABLET / COMPACT LAPTOP — 1024px AND BELOW ========================================================================== A trading chart should take the full available width rather than being squeezed alongside a sidebar. ========================================================================== */ @media (max-width: 1024px) { .dashboard-workspace, .dashboard-layout, .trading-layout { grid-template-columns: minmax(0, 1fr); } .dashboard-sidebar, .trading-sidebar { width: 100%; min-width: 0; } .dashboard-grid, .dashboard-panels { gap: var(--bsm-space-4); } .dashboard-header, .dashboard-topbar { align-items: flex-start; } .chart-panel, .chart-card { max-width: 100%; } #price-chart { width: 100%; min-width: 0; min-height: 350px; } #pair-select { max-width: min(100%, 280px); } #tf-select { max-width: min(100%, 170px); } .auth-card { max-width: var(--bsm-form-max-width); } .admin-main { gap: var(--bsm-space-5); } .admin-table-scroll { width: 100%; } #signal-popup-stack, .signal-popup-stack, .signal-popup-container { width: min( 400px, calc(100vw - 32px) ); } } /* ========================================================================== 14. MOBILE ADMINISTRATION NAVIGATION — 900px AND BELOW ========================================================================== COMPATIBLE WITH: .admin-shell .admin-sidebar .admin-nav .admin-nav-link .admin-main-wrap Existing admin.css already implements a visible horizontal navigation fallback. This final layer preserves and reinforces it. Administrator navigation must not depend on an unfinished JavaScript menu toggle. All actual links remain permission-filtered by PHP. ========================================================================== */ @media (max-width: 900px) { .admin-app .admin-shell { display: flex; flex-direction: column; } .admin-app .admin-sidebar { position: relative; top: auto; height: auto; min-height: 0; width: 100%; overflow: visible; border-inline-end: 0; border-bottom: 1px solid var(--bsm-border-subtle); } .admin-app .admin-nav { display: flex; flex-direction: row; align-items: stretch; gap: var(--bsm-space-1); 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; } .admin-app .admin-nav-link { flex: 0 0 auto; width: auto; min-height: var(--bsm-touch-target-min); white-space: nowrap; } .admin-app .admin-main-wrap { flex: 1 1 auto; min-height: 0; } .admin-app .admin-topbar { min-height: var(--bsm-mobile-header-height); } .admin-app #admin-menu-toggle, .admin-app #admin-side-mobile { display: none !important; } } /* ========================================================================== 15. COMPACT TABLET — 820px AND BELOW ========================================================================== Auth forms become single-column. Charts and dashboards remain vertically stacked. ========================================================================== */ @media (max-width: 820px) { .auth-page .auth-layout, .auth-layout { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--bsm-space-6); } .auth-page .auth-hero, .auth-hero { width: 100%; max-width: 680px; margin-inline: auto; } .auth-page .auth-card, .auth-card { justify-self: center; width: min( 100%, var(--bsm-form-max-width) ); } .auth-hero h1 { max-width: 100%; font-size: var(--bsm-heading-page); } .auth-hero > img, .auth-hero > svg { max-width: min(100%, 260px); } .split-layout, .two-column-layout { grid-template-columns: minmax(0, 1fr); } .dashboard-workspace, .dashboard-layout, .trading-layout { grid-template-columns: minmax(0, 1fr); } .dashboard-header h1 { font-size: var(--bsm-heading-section); } .dashboard-card, .dashboard-widget, .market-panel { padding: var(--bsm-space-4); } .admin-app .admin-main { padding-block: var(--bsm-space-5); } .admin-app .admin-card { padding: var(--bsm-space-4); } .admin-app .admin-heading { align-items: stretch; } .admin-app .admin-heading h1 { font-size: var(--bsm-heading-section); } .receipt-card, .receipt-content, .signal-receipt { max-width: 100%; } } /* ========================================================================== 16. PRIMARY MOBILE BREAKPOINT — 767px AND BELOW ========================================================================== This is the main mobile layout. It coordinates all previous page-specific stylesheets. ========================================================================== */ @media (max-width: 767px) { /* -------------------------------------------------------------- 16.1. MOBILE DOCUMENT CONTAINERS -------------------------------------------------------------- */ .page-container, .container, .site-container, .page-container-wide, .container-wide { width: calc( 100% - var(--bsm-page-gutter) - var(--bsm-page-gutter) - var(--bsm-safe-left) - var(--bsm-safe-right) ); max-width: 100%; } /* -------------------------------------------------------------- 16.2. HEADER -------------------------------------------------------------- */ .app-topbar-inner { min-height: var(--bsm-mobile-header-height); gap: var(--bsm-space-3); } .app-topbar .brand { min-width: 0; } .app-topbar .brand-mark { width: 36px; height: 36px; } .app-topbar nav { max-width: 100%; gap: var(--bsm-space-2); } /* -------------------------------------------------------------- 16.3. MAIN CONTENT -------------------------------------------------------------- */ .app-main { padding-block: var(--bsm-space-5) var(--bsm-space-8); } .page-section, .content-section { padding-block: var(--bsm-space-8); } /* -------------------------------------------------------------- 16.4. AUTHENTICATION PAGES -------------------------------------------------------------- */ .auth-page .app-main { align-items: flex-start; } .auth-page .auth-layout { grid-template-columns: minmax(0, 1fr); gap: var(--bsm-space-5); } .auth-page .auth-hero { gap: var(--bsm-space-3); } .auth-page .auth-hero h1 { font-size: var(--bsm-heading-page); } .auth-page .auth-hero > p { font-size: var(--bsm-text-base-sm); } .auth-page .auth-card { width: 100%; max-width: 100%; padding: var(--bsm-space-5); } .auth-page .auth-form { width: 100%; } /* -------------------------------------------------------------- 16.5. MOBILE INPUT FONT SIZES -------------------------------------------------------------- */ .auth-form input:where( [type="text"], [type="password"], [type="email"], [type="tel"], [type="number"] ), .auth-form select, .payment-form :where( input, select, textarea ), .subscription-form :where( input, select ), .admin-form :where( input, select, textarea ) { font-size: 16px; min-height: var(--bsm-touch-target-min); } /* -------------------------------------------------------------- 16.6. MEMBERSHIP AND BILLING -------------------------------------------------------------- */ .dashboard-restricted, .subscription-gate, .access-gate { width: 100%; gap: var(--bsm-space-4); } .subscription-grid, .plan-grid { grid-template-columns: repeat( auto-fit, minmax( min(100%, 240px), 1fr ) ); gap: var(--bsm-space-3); } .access-status-card, .subscription-status-card { padding: var(--bsm-space-4); } .payment-form, .subscription-form, .payment-submission-form { width: 100%; max-width: 100%; } .payment-form input[type="file"], .payment-upload input[type="file"] { max-width: 100%; } /* -------------------------------------------------------------- 16.7. DASHBOARD HEADER -------------------------------------------------------------- */ .dashboard-main, .trading-main { gap: var(--bsm-space-4); padding-block: var(--bsm-space-4); } .dashboard-header, .dashboard-topbar { flex-direction: column; align-items: stretch; gap: var(--bsm-space-3); } .dashboard-actions, .dashboard-header-actions { justify-content: flex-start; width: 100%; } /* -------------------------------------------------------------- 16.8. DASHBOARD PANELS -------------------------------------------------------------- */ .dashboard-grid, .dashboard-panels { grid-template-columns: minmax(0, 1fr); gap: var(--bsm-space-3); } .dashboard-grid .full-span, .dashboard-panels .full-span { grid-column: auto; } .dashboard-card, .dashboard-widget, .market-panel { padding: var(--bsm-space-4); } /* -------------------------------------------------------------- 16.9. MARKET TABS -------------------------------------------------------------- Keep every entitled market reachable. Do not hide markets behind a decorative carousel that lacks accessible navigation. -------------------------------------------------------------- */ #market-tabs, .market-tabs { display: flex; flex-wrap: nowrap; width: 100%; min-width: 0; gap: var(--bsm-market-tab-gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; } #market-tabs > button, #market-tabs > [role="tab"], .market-tab { flex: 0 0 auto; min-height: var(--bsm-touch-target-min); padding-inline: var(--bsm-space-3); } /* -------------------------------------------------------------- 16.10. MARKET CLUES -------------------------------------------------------------- Other-market indicators stay inside market tabs. No clue styling is added to #pair-select. -------------------------------------------------------------- */ #market-tabs .market-clue, .market-tabs .market-clue { flex: 0 0 auto; } #market-tabs .market-clue-group, #market-tabs .market-clues { flex: 0 0 auto; } /* -------------------------------------------------------------- 16.11. TRADING CONTROLS -------------------------------------------------------------- */ .market-toolbar, .chart-toolbar, .dashboard-toolbar { justify-content: flex-start; align-items: stretch; gap: var(--bsm-space-2); } #pair-select, #tf-select { flex: 1 1 130px; min-width: 0; width: 100%; max-width: 100%; min-height: var(--bsm-touch-target-min); } .timeframe-tabs, .timeframe-list { width: 100%; overflow-x: auto; flex-wrap: nowrap; } /* -------------------------------------------------------------- 16.12. CHART WORKSPACE -------------------------------------------------------------- */ .chart-panel { padding: var(--bsm-space-3); border-radius: var(--bsm-radius-lg); } .chart-header, .chart-panel-header { flex-wrap: wrap; gap: var(--bsm-space-2); } #price-chart { width: 100%; min-width: 0; min-height: var(--bsm-chart-mobile-height); border-radius: var(--bsm-radius-md); } #price-chart svg, #price-chart canvas { max-width: 100%; } /* -------------------------------------------------------------- 16.13. METRICS AND INDICATORS -------------------------------------------------------------- */ .market-metrics, .market-stat-grid, .dashboard-metrics { grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: var(--bsm-space-3); } .indicator-panel, .technical-panel { padding: var(--bsm-space-3); } /* -------------------------------------------------------------- 16.14. SIGNAL HISTORY -------------------------------------------------------------- */ #recent-signals, .recent-signals, .signal-history { width: 100%; min-width: 0; } .signal-history-item, .recent-signal, .signal-list-item { padding: var(--bsm-space-3); } /* -------------------------------------------------------------- 16.15. ECONOMIC EVENTS -------------------------------------------------------------- */ #economic-events, .economic-events, .economic-calendar { width: 100%; min-width: 0; } .economic-event, .economic-event-card, .news-event { padding: var(--bsm-space-3); } .cpi-panel, .cpi-event, .high-impact-news { padding: var(--bsm-space-4); } .economic-event-details, .event-values { grid-template-columns: repeat( 3, minmax(0, 1fr) ); } /* -------------------------------------------------------------- 16.16. FOUR-UNIT CPI COUNTDOWN -------------------------------------------------------------- Days / Hours / Minutes / Seconds Actual values are calculated by frontend JavaScript from verified timestamps. -------------------------------------------------------------- */ .economic-countdown, .cpi-countdown, .countdown-grid { grid-template-columns: repeat( 4, minmax(0, 1fr) ); gap: var(--bsm-space-2); } .countdown-cell, .countdown-unit { min-width: 0; padding: var(--bsm-space-2); } .countdown-value { font-size: clamp( 1rem, 4.5vw, 1.6rem ); } .countdown-label { overflow-wrap: anywhere; } /* -------------------------------------------------------------- 16.17. NOTIFICATION DRAWER -------------------------------------------------------------- */ #notice-panel, .notice-panel, .notification-panel { inset-block: 0; inset-inline: 0; width: 100%; max-width: 100%; max-height: 100vh; max-height: 100dvh; padding-top: var(--bsm-safe-top); padding-bottom: var(--bsm-safe-bottom); border-inline-start: 0; } .notice-panel-body, .notification-panel-body, .notification-list { padding: var(--bsm-space-3); } /* -------------------------------------------------------------- 16.18. FULL BUY/SELL SIGNAL POPUPS -------------------------------------------------------------- Popup ownership and the 30-second lifecycle are implemented in JavaScript. CSS keeps the popup stack inside the mobile viewport. -------------------------------------------------------------- */ #signal-popup-stack, .signal-popup-stack, .signal-popup-container { position: fixed; inset-block-start: calc( var(--bsm-mobile-header-height) + var(--bsm-safe-top) + var(--bsm-space-3) ); inset-inline-start: calc( var(--bsm-space-3) + var(--bsm-safe-left) ); inset-inline-end: calc( var(--bsm-space-3) + var(--bsm-safe-right) ); width: auto; max-width: none; max-height: calc( 100dvh - var(--bsm-mobile-header-height) - var(--bsm-safe-top) - var(--bsm-safe-bottom) - 24px ); overflow-y: auto; pointer-events: none; } #signal-popup-stack > .signal-popup, .signal-popup-stack > .signal-popup { width: 100%; pointer-events: auto; } /* -------------------------------------------------------------- 16.19. SIGNAL RECEIPT MODAL -------------------------------------------------------------- */ #receipt-modal, .receipt-modal, .signal-receipt-modal { padding: calc( var(--bsm-space-3) + var(--bsm-safe-top) ) calc( var(--bsm-space-3) + var(--bsm-safe-right) ) calc( var(--bsm-space-3) + var(--bsm-safe-bottom) ) calc( var(--bsm-space-3) + var(--bsm-safe-left) ); overflow-y: auto; } #receipt-modal .receipt-card, #receipt-modal .receipt-content, #receipt-modal .signal-receipt, #receipt-modal > .receipt { width: 100%; max-width: 100%; max-height: calc( 100dvh - var(--bsm-safe-top) - var(--bsm-safe-bottom) - 24px ); padding: var(--bsm-space-4); overflow-y: auto; } /* -------------------------------------------------------------- 16.20. ADMINISTRATOR CONTENT -------------------------------------------------------------- */ .admin-app .admin-main { gap: var(--bsm-space-4); padding: var(--bsm-space-4) var(--bsm-page-gutter) var(--bsm-space-8); } .admin-app .admin-heading { flex-direction: column; align-items: stretch; } .admin-app .admin-card { padding: var(--bsm-space-4); } .admin-app .admin-action-row { align-items: stretch; } .admin-app .admin-action-row label { flex: 1 1 160px; } .admin-app .admin-table-scroll { max-width: 100%; } } /* ========================================================================== 17. COMPACT PHONE — 600px AND BELOW ========================================================================== */ @media (max-width: 600px) { .page-container, .container, .site-container { max-width: 100%; } .auth-hero > img, .auth-hero > svg { max-width: 190px; } .dashboard-header h1, .dashboard-heading h1 { font-size: var(--bsm-text-2xl); } .dashboard-actions, .dashboard-header-actions { gap: var(--bsm-space-2); } .dashboard-card, .dashboard-widget, .market-panel { border-radius: var(--bsm-radius-lg); } .subscription-grid, .plan-grid { grid-template-columns: minmax(0, 1fr); } .payment-form > button, .subscription-form > button, .payment-submission-form > button { width: 100%; } .admin-app .admin-topbar { position: relative; top: auto; } .admin-app .admin-form { width: 100%; max-width: 100%; } .admin-app .admin-action-row label { flex: 1 1 100%; } .admin-app .admin-action-row > .btn, .admin-app .admin-action-row > button { flex: 1 1 100%; } .admin-app .admin-table { min-width: var(--bsm-admin-table-min-width); } } /* ========================================================================== 18. SMALL MOBILE — 480px AND BELOW ========================================================================== */ @media (max-width: 480px) { /* -------------------------------------------------------------- 18.1. HEADER AND NAVIGATION -------------------------------------------------------------- */ .app-topbar-inner { flex-direction: column; align-items: stretch; gap: var(--bsm-space-2); } .app-topbar .brand { align-self: flex-start; } .app-topbar nav { display: flex; flex-wrap: wrap; width: 100%; gap: var(--bsm-space-2); } .app-topbar nav .btn { min-height: 40px; } /* -------------------------------------------------------------- 18.2. AUTHENTICATION -------------------------------------------------------------- */ .auth-page .auth-layout { gap: var(--bsm-space-4); } .auth-page .auth-card { padding: var(--bsm-space-4); } .auth-page .auth-hero h1 { font-size: clamp( 1.65rem, 7vw, 2.15rem ); } .auth-card h2 { font-size: var(--bsm-text-xl); } #admin-authenticator-code { min-height: 62px; font-size: 1.35rem; letter-spacing: 0.2em; } /* -------------------------------------------------------------- 18.3. DASHBOARD -------------------------------------------------------------- */ .dashboard-main, .trading-main { gap: var(--bsm-space-3); } .dashboard-header h1, .dashboard-heading h1 { font-size: var(--bsm-text-xl); } .dashboard-card, .dashboard-widget, .market-panel { padding: var(--bsm-space-3); } /* -------------------------------------------------------------- 18.4. MARKET CONTROLS -------------------------------------------------------------- */ #market-tabs > button, #market-tabs > [role="tab"], .market-tab { padding-inline: var(--bsm-space-3); font-size: var(--bsm-text-xs); } #pair-select, #tf-select { width: 100%; max-width: 100%; } /* -------------------------------------------------------------- 18.5. CHART -------------------------------------------------------------- */ .chart-panel { padding: var(--bsm-space-2); } #price-chart { min-height: 290px; } /* -------------------------------------------------------------- 18.6. METRIC CARDS -------------------------------------------------------------- */ .market-metrics, .market-stat-grid, .dashboard-metrics { gap: var(--bsm-space-2); } .market-metric, .metric-card { padding: var(--bsm-space-3); } .market-metric-value, .metric-value { font-size: var(--bsm-text-lg); } /* -------------------------------------------------------------- 18.7. ECONOMIC COUNTDOWN -------------------------------------------------------------- */ .economic-countdown, .cpi-countdown, .countdown-grid { gap: var(--bsm-space-1); } .countdown-cell, .countdown-unit { padding: var(--bsm-space-1); } .countdown-value { font-size: clamp( 1rem, 5vw, 1.4rem ); } .countdown-label { font-size: var(--bsm-text-2xs); } /* -------------------------------------------------------------- 18.8. NOTIFICATION DRAWER -------------------------------------------------------------- */ .notice-panel-header, .notification-panel-header { gap: var(--bsm-space-2); padding: var(--bsm-space-3); } .notification-item, .notice-item { padding: var(--bsm-space-3); } .notification-actions, .notice-actions { align-items: stretch; } /* -------------------------------------------------------------- 18.9. FULL SIGNAL POPUPS -------------------------------------------------------------- */ #signal-popup-stack, .signal-popup-stack, .signal-popup-container { inset-inline-start: calc( var(--bsm-space-2) + var(--bsm-safe-left) ); inset-inline-end: calc( var(--bsm-space-2) + var(--bsm-safe-right) ); } .signal-popup, .trade-signal-popup { padding: var(--bsm-space-3); border-radius: var(--bsm-radius-lg); } .signal-popup-title { font-size: var(--bsm-text-base); } .signal-popup-actions { align-items: stretch; } /* -------------------------------------------------------------- 18.10. SIGNAL RECEIPTS -------------------------------------------------------------- */ #receipt-modal .receipt-card, #receipt-modal .receipt-content, #receipt-modal .signal-receipt, #receipt-modal > .receipt { gap: var(--bsm-space-3); padding: var(--bsm-space-3); } .receipt-grid, .receipt-details-grid, .signal-receipt-grid { grid-template-columns: minmax(0, 1fr); } .receipt-definition-list, .receipt-details-list { grid-template-columns: minmax(0, 1fr); } .receipt-actions, .receipt-footer-actions { flex-direction: column; align-items: stretch; } .receipt-actions > *, .receipt-footer-actions > * { width: 100%; } /* -------------------------------------------------------------- 18.11. ADMINISTRATION -------------------------------------------------------------- */ .admin-app .admin-sidebar { grid-template-columns: minmax(0, 1fr); } .admin-app .admin-sidebar > .brand { grid-column: 1; grid-row: 1; } .admin-app .admin-sidebar > form { grid-column: 1; grid-row: 2; width: 100%; } .admin-app .admin-nav { grid-column: 1; grid-row: 3; } .admin-app .admin-stat-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } .admin-app .admin-stat { min-height: 95px; padding: var(--bsm-space-3); } .admin-app .admin-topbar > strong { flex: 1 1 100%; } } /* ========================================================================== 19. EXTRA SMALL MOBILE — 420px AND BELOW ========================================================================== */ @media (max-width: 420px) { .auth-page .auth-card { padding: var(--bsm-space-3); } .brand-mark { width: 36px; height: 36px; } .dashboard-header h1, .dashboard-heading h1 { font-size: var(--bsm-text-lg); } .market-metric, .metric-card { padding: var(--bsm-space-2); } .economic-event-details, .event-values { grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: var(--bsm-space-1); } .notification-item-title, .notice-item-title { font-size: var(--bsm-text-sm); } .notification-item-message, .notice-item-message { font-size: var(--bsm-text-xs); } .notification-receipt-summary, .notice-receipt-summary { grid-template-columns: minmax(0, 1fr); } .signal-popup-header { align-items: flex-start; } .signal-popup-meta { gap: var(--bsm-space-1); } .receipt-title, .receipt-heading { font-size: var(--bsm-text-lg); } .admin-app .admin-heading h1 { font-size: var(--bsm-text-xl); } } /* ========================================================================== 20. VERY NARROW PHONES — 360px AND BELOW ========================================================================== */ @media (max-width: 360px) { .app-topbar nav { gap: var(--bsm-space-1); } .app-topbar nav .btn { padding-inline: var(--bsm-space-2); } .auth-page .auth-hero h1 { font-size: var(--bsm-text-2xl); } .auth-page .auth-card { padding: var(--bsm-space-3); } #admin-authenticator-code { letter-spacing: 0.12em; } .market-metrics, .market-stat-grid, .dashboard-metrics { grid-template-columns: minmax(0, 1fr); } #price-chart { min-height: 250px; } .chart-header, .chart-panel-header { align-items: flex-start; } .signal-history-header, .recent-signal-header { align-items: flex-start; } .receipt-brand { font-size: var(--bsm-text-xs); } .receipt-symbol, .receipt-pair { font-size: var(--bsm-text-base); } .admin-app .admin-stat-grid { grid-template-columns: minmax(0, 1fr); } .admin-app .admin-topbar > a.btn { width: 100%; } } /* ========================================================================== 21. ULTRA-NARROW VIEWPORTS — BELOW 320px ========================================================================== Extreme browser zoom or split-screen windows may produce viewports narrower than a conventional mobile phone. Preserve readability and horizontal scrolling where needed. ========================================================================== */ @media (max-width: 319px) { .page-container, .container, .site-container { width: calc(100% - 16px); } .auth-card, .admin-card, .dashboard-card { padding: var(--bsm-space-2); } .auth-hero h1 { font-size: var(--bsm-text-xl); } .dashboard-header h1 { font-size: var(--bsm-text-base); } #market-tabs > button, .market-tab { padding-inline: var(--bsm-space-2); } .countdown-value { font-size: 0.9rem; } .countdown-label { font-size: 0.625rem; } .receipt-direction, .receipt-direction-badge { font-size: var(--bsm-text-xs); } } /* ========================================================================== 22. MOBILE LANDSCAPE ORIENTATION ========================================================================== Charts remain reachable in short-height landscape viewports. Do not force the chart to occupy the entire height when other trading controls must remain accessible. ========================================================================== */ @media ( max-width: 900px ) and ( orientation: landscape ) and ( max-height: 540px ) { .app-main { padding-block: var(--bsm-space-3); } .auth-layout { align-items: start; } .auth-hero { gap: var(--bsm-space-2); } .auth-hero > img, .auth-hero > svg { max-height: 110px; width: auto; } .dashboard-main, .trading-main { padding-block: var(--bsm-space-3); } #price-chart { min-height: 220px; } .chart-panel, .dashboard-card { padding: var(--bsm-space-3); } .admin-app .admin-topbar { position: relative; top: auto; } .admin-app .admin-main { padding-block: var(--bsm-space-3); } #signal-popup-stack, .signal-popup-stack, .signal-popup-container { inset-block-start: calc( var(--bsm-space-2) + var(--bsm-safe-top) ); max-height: calc( 100dvh - var(--bsm-safe-top) - var(--bsm-safe-bottom) - 16px ); } #receipt-modal, .receipt-modal { place-items: start center; } } /* ========================================================================== 23. SHORT VIEWPORT HEIGHTS ========================================================================== Important for: - Mobile browser toolbars - Split-screen windows - Landscape phones - On-screen keyboards - Installed PWA windows The viewport may be short even when its width is large. ========================================================================== */ @media (max-height: 600px) { .auth-page .app-main { align-items: flex-start; } .auth-card { max-height: none; } #notice-panel, .notification-panel, .notice-panel { overflow-y: auto; } #receipt-modal, .receipt-modal, .signal-receipt-modal { overflow-y: auto; } .receipt-card, .receipt-content, .signal-receipt { overflow-y: auto; } } /* ========================================================================== 24. VERY SHORT VIEWPORT HEIGHTS ========================================================================== */ @media (max-height: 450px) { .app-main { padding-block: var(--bsm-space-3); } .auth-hero > img, .auth-hero > svg { max-height: 90px; } #signal-popup-stack, .signal-popup-stack, .signal-popup-container { inset-block-start: calc( var(--bsm-space-2) + var(--bsm-safe-top) ); max-height: calc( 100dvh - var(--bsm-safe-top) - var(--bsm-safe-bottom) - 16px ); } #receipt-modal, .receipt-modal { padding-block: var(--bsm-space-2); } } /* ========================================================================== 25. TOUCHSCREEN DEVICE INTEGRATION ========================================================================== Touchscreen users must be able to operate all essential controls without hover. Do not use touch-action:none globally. Interactive chart gestures are controlled by the chart renderer and its JavaScript interaction module. ========================================================================== */ @media (pointer: coarse) { :where( .auth-page, .dashboard-shell, .admin-shell ) :where( button, select, summary, .btn ) { min-height: var(--bsm-touch-target-min); } #market-tabs > button, .market-tab, .timeframe-button, .timeframe-tab, .admin-nav-link { min-height: var(--bsm-touch-target-min); } #bell-button, .notification-close, .notice-close, .signal-popup-close, .receipt-close { min-width: var(--bsm-touch-target-min); min-height: var(--bsm-touch-target-min); } #market-tabs, .timeframe-tabs, .admin-nav, .admin-table-scroll { -webkit-overflow-scrolling: touch; } } /* ========================================================================== 26. DEVICES WITHOUT HOVER SUPPORT ========================================================================== Essential labels and actions must remain discoverable even when hover does not exist. ========================================================================== */ @media (hover: none) { .tooltip-content { pointer-events: none; } .card-interactive:hover { transform: none; } .signal-popup:hover { transform: none; } } /* ========================================================================== 27. DEVICES WITH PRECISE POINTERS ========================================================================== Decorative hover is optional and must never be the only way to access information. ========================================================================== */ @media (hover: hover) and (pointer: fine) { .dashboard-card.card-interactive:hover, .admin-card.card-interactive:hover { border-color: var(--bsm-border-interactive); } .market-tab:hover, .admin-nav-link:hover { cursor: pointer; } } /* ========================================================================== 28. INSTALLED PWA / SAFE-AREA LAYOUT ========================================================================== Tokens from tokens.css: --bsm-safe-top --bsm-safe-right --bsm-safe-bottom --bsm-safe-left The browser handles actual device insets. We never hardcode iPhone-specific notch dimensions. ========================================================================== */ .page-shell.shell-safe-bottom { padding-bottom: var(--bsm-safe-bottom); } .mobile-bottom-nav, .dashboard-bottom-nav { padding-bottom: calc( var(--bsm-space-3) + var(--bsm-safe-bottom) ); } #notice-panel, .notification-panel, .notice-panel { padding-bottom: var(--bsm-safe-bottom); } #receipt-modal, .receipt-modal, .signal-receipt-modal { scroll-padding-bottom: calc( var(--bsm-space-4) + var(--bsm-safe-bottom) ); } /* ========================================================================== 29. ON-SCREEN KEYBOARD AND FORM USABILITY ========================================================================== Avoid fixed-height authentication cards. The browser must remain able to scroll focused inputs above the virtual keyboard. Do not disable page scrolling on login/signup pages. ========================================================================== */ .auth-page .auth-card, .auth-page .auth-form, .admin-auth-page .auth-card { max-height: none; } .auth-page input, .auth-page select, .auth-page textarea, .admin-app input, .admin-app select, .admin-app textarea { scroll-margin-block: var(--bsm-space-6); } /* ========================================================================== 30. NOTIFICATION MODAL SCROLL LOCK SUPPORT ========================================================================== Frontend JavaScript may apply .notice-open when the drawer is open. The class must be removed when the drawer closes. This is a presentation convention only. ========================================================================== */ body.notice-open, body.notification-drawer-open { overflow: hidden; } /* ========================================================================== 31. MODAL LAYER ORDER ========================================================================== IMPORTANT: Notification popup: --bsm-z-signal-popup Notification backdrop: --bsm-z-backdrop Notification panel: --bsm-z-modal Receipt dialog: --bsm-z-dialog This prevents a popup from covering an open receipt. ========================================================================== */ #signal-popup-stack { z-index: var(--bsm-z-signal-popup); } #notice-backdrop { z-index: var(--bsm-z-backdrop); } #notice-panel { z-index: var(--bsm-z-modal); } #receipt-modal { z-index: var(--bsm-z-dialog); } /* ========================================================================== 32. NOTIFICATION POPUP POINTER BEHAVIOR ========================================================================== The stack should not intercept interactions in empty space. Individual signal cards remain interactive. ========================================================================== */ #signal-popup-stack, .signal-popup-stack, .signal-popup-container { pointer-events: none; } #signal-popup-stack > .signal-popup, .signal-popup-stack > .signal-popup, .signal-popup-container > .signal-popup { pointer-events: auto; } /* ========================================================================== 33. RESPONSIVE RECEIPT SCROLLING ========================================================================== Receipt content can be long when many verified indicators and supporting evidence fields are present. Never clip the lower portion of a receipt on mobile. ========================================================================== */ #receipt-modal .receipt-card, #receipt-modal .receipt-content, #receipt-modal .signal-receipt, #receipt-modal > .receipt { overscroll-behavior: contain; scrollbar-width: thin; } /* ========================================================================== 34. RESPONSIVE NOTIFICATION DRAWER SCROLLING ========================================================================== */ #notice-panel, .notice-panel, .notification-panel { overscroll-behavior: contain; scrollbar-width: thin; } .notice-panel-body, .notification-panel-body, .notification-list { min-width: 0; } /* ========================================================================== 35. RESPONSIVE MARKET SELECTION SAFETY ========================================================================== All entitled markets remain navigable. Market-level clues are attached to actual market tabs. A pair selector must not inherit market clue styling. ========================================================================== */ #market-tabs, .market-tabs { overscroll-behavior-inline: contain; } #market-tabs > *, .market-tabs > * { min-width: 0; } #market-tabs .market-clue, #market-tabs .market-clue-count { flex-shrink: 0; } /* ========================================================================== 36. RESPONSIVE ECONOMIC EVENT SAFETY ========================================================================== Economic event names, currencies and timestamps may be longer than the available phone width. Wrapping is preferred to hiding information. ========================================================================== */ #economic-events :where( .economic-event, .economic-event-title, .economic-event-time, .event-value, .event-currency ) { min-width: 0; overflow-wrap: anywhere; } /* ========================================================================== 37. RESPONSIVE ADMINISTRATION AUDIT SAFETY ========================================================================== Administrator audit records may include long event references. Preserve complete values where possible and allow horizontal table scrolling instead of clipping columns. ========================================================================== */ .admin-audit-record, .audit-record, .admin-payment-reference, .admin-payment-tid, .admin-payment-id { min-width: 0; overflow-wrap: anywhere; } /* ========================================================================== 38. BROWSER ZOOM AND TEXT SCALING ========================================================================== Do not: - Set user-scalable=no. - Force a maximum-scale viewport value. - Disable text zoom. - Hide overflowing text globally. - Replace accessible labels with icons only. Application elements must continue to wrap under browser zoom and larger text settings. ========================================================================== */ :where( .auth-card, .dashboard-card, .admin-card, .notification-item, .receipt-card ) { overflow-wrap: break-word; } /* ========================================================================== 39. REDUCED MOTION COORDINATION ========================================================================== The dedicated motion/reduced-motion.css file is loaded afterward and will provide final accessible motion rules. These are only minimal responsive safeguards. CRITICAL: The logical 30-second signal popup duration remains unchanged even when the user disables animations. ========================================================================== */ @media (prefers-reduced-motion: reduce) { #market-tabs, .timeframe-tabs, .admin-nav, .notification-list { scroll-behavior: auto; } .market-tab, .admin-nav-link, .timeframe-button, .signal-popup, .receipt-card { transition-duration: 0ms; } .signal-popup.is-new, .signal-popup.is-exiting { animation: none !important; } .signal-popup-progress::after, .popup-progress::after { animation: none !important; } } /* ========================================================================== 40. HIGH-CONTRAST RESPONSIVE COORDINATION ========================================================================== */ @media (prefers-contrast: more) { .dashboard-card, .admin-card, .auth-card, .chart-panel, .notification-item, .signal-popup, .receipt-card { border-width: 2px; } .market-tab, .admin-nav-link[aria-current="page"] { border-width: 2px; } .countdown-label, .metric-label, .receipt-label { color: var(--bsm-text-secondary); } } /* ========================================================================== 41. FORCED-COLORS RESPONSIVE COORDINATION ========================================================================== Preserve Windows and other system high-contrast modes. Background gradients must not be required to understand a trading direction or component state. ========================================================================== */ @media (forced-colors: active) { .dashboard-card, .admin-card, .auth-card, .notification-item, .receipt-card, .signal-popup { border-color: CanvasText; background-image: none; box-shadow: none; } .market-tab[aria-selected="true"], .admin-nav-link[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; } .market-clue, .status-dot { border: 1px solid CanvasText; } } /* ========================================================================== 42. PRINT RESPONSIVENESS ========================================================================== Print only information already present in the authorized HTML document. Do not reveal hidden dashboard regions. Do not attempt to bypass protected receipt APIs. ========================================================================== */ @media print { .page-shell, .app-shell, .dashboard-shell, .admin-shell { min-height: 0; } .page-container, .container, .site-container, .dashboard-content { width: 100%; max-width: none; margin: 0; } .dashboard-workspace, .dashboard-layout, .trading-layout, .dashboard-grid, .dashboard-panels { display: block; } .admin-app .admin-shell { display: block; } .admin-app .admin-main { width: 100%; max-width: none; padding: 0; } .admin-app .admin-table-scroll { overflow: visible; } .admin-app .admin-table { width: 100%; min-width: 0; } .dashboard-card, .admin-card, .chart-panel, .plan-card { box-shadow: none; } #signal-popup-stack, #notice-panel, #notice-backdrop, #bell-button { display: none !important; } [hidden] { display: none !important; } } /* ========================================================================== 43. RESPONSIVE INTEGRATION CHECKLIST ========================================================================== PUBLIC WEBSITE -------------- [x] Responsive containers [x] Header navigation [x] Brand sizing [x] Footer layout [x] Images and SVG [x] Browser zoom compatibility AUTHENTICATION -------------- [x] Login page [x] Signup page [x] One-password registration [x] Administrator login [x] Six-digit MFA [x] Admin logout [x] Accessible mobile inputs [x] Virtual keyboard scrolling SUBSCRIPTION DASHBOARD ---------------------- [x] Restricted membership presentation [x] Subscription plan cards [x] Payment forms [x] Transaction identifiers [x] File upload controls [x] Review status presentation [x] Expired access presentation FOREX DASHBOARD --------------- [x] Trading workspace [x] Market tabs [x] Other-market clue positioning [x] Pair selector [x] Timeframe selector [x] Chart container [x] SVG/canvas layout [x] Indicator panels [x] Signal history [x] Feed error states NOTIFICATIONS ------------- [x] Notification bell [x] Unread count [x] Full-screen mobile drawer [x] Multiple signal popups [x] BUY and SELL popup presentation [x] Thirty-second visual foundation [x] Market clue positioning [x] Correct stacking layers [x] Independent popup scrolling RECEIPTS -------- [x] Receipt overlay [x] Receipt content scrolling [x] Narrow-screen receipt grid [x] Touch-friendly close and action buttons [x] Safe-area padding [x] Landscape support CPI AND ECONOMIC NEWS --------------------- [x] Event cards [x] Currency labels [x] Four-unit digital countdown [x] Impact and risk presentation [x] Narrow-screen readability ADMINISTRATION -------------- [x] Desktop sidebar [x] Tablet horizontal navigation [x] Mobile navigation without JS [x] Administrator metrics [x] Management tables [x] Payment review forms [x] Subscription plan editors [x] Audit record presentation [x] Mobile action controls VIEWPORT SUPPORT ---------------- [x] Wide desktop [x] Standard desktop [x] Laptop [x] Tablet [x] Mobile [x] Compact mobile [x] Extra-small mobile [x] Narrow zoomed viewports [x] Landscape phones [x] Short-height windows [x] Touchscreens [x] PWA safe areas [x] Reduced motion [x] High contrast [x] Forced colors [x] Print layout ========================================================================== FINAL RUNTIME REQUIREMENTS ========================================================================== RESPONSIVE CSS DOES NOT REPLACE APPLICATION LOGIC. The authenticated frontend must still: 01. Maintain selected market identity. 02. Request verified pairs and available timeframes. 03. Render real OHLCV candles. 04. Show accurate feed connection status. 05. Consume authorized SSE events. 06. Deduplicate notification inbox IDs. 07. Show same-market confirmed signals. 08. Display other-market aggregate clues only. 09. Maintain each popup for its logical 30 seconds. 10. Open authorized signal receipts. 11. Record shown/read/dismissed acknowledgements. 12. Display verified CPI countdowns. 13. Never force chart-pair switching. 14. Never show disconnected data as LIVE. The private PHP backend must still enforce: 01. Authentication. 02. Subscription eligibility. 03. Market authorization. 04. Administrator permissions. 05. Payment review. 06. Receipt ownership. 07. Signal confirmation. 08. Audit logging. ========================================================================== END OF BALOCH SM RESPONSIVE STYLESHEET ========================================================================== */