/* ==========================================================================
   BALOCH SM — COMPLETE APPLICATION COMPONENT SYSTEM
   ==========================================================================

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

   WEBSITE:
   https://investt.online

   PROJECT:
   Baloch SM Trading Intelligence Platform

   VERSION:
   1.0.0

   ==========================================================================
   APPLICATION INTEGRATION

   PUBLIC:
       index.php
       login.php
       signup.php
       dashboard.php
       offline.html

   ADMIN:
       admin/index.php
       admin/login.php
       admin/logout.php

   EXISTING DASHBOARD IDS:
       #market-tabs
       #pair-select
       #tf-select
       #price-chart
       #recent-signals
       #economic-events
       #bell-button
       #notice-panel
       #notice-backdrop
       #receipt-modal

   DESIGN DEPENDENCIES:
       reset.css
       tokens.css
       themes/{active-theme}.css
       layout.css

   SPECIALIZED STYLESHEETS:
       auth.css
       dashboard.css
       admin.css
       notifications.css
       signal-receipt.css
       responsive.css
       accessibility.css
       motion/reduced-motion.css

   ==========================================================================
   CORE PRINCIPLES

   - Accessible, keyboard-friendly interactive controls
   - Responsive touch targets
   - Consistent dark/light theme variables
   - Clear BUY / SELL direction
   - Market-tab clue support
   - Safe notification visibility states
   - Verified chart loading and error states
   - Responsive subscription/payment interfaces
   - Compatible administration components
   - No external CSS imports
   - No inline scripts
   - No fabricated financial information

   IMPORTANT:
   CSS styles data. It never authorizes, creates, or verifies
   trading signals, subscriptions, payment approvals or prices.

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


/* ==========================================================================
   01. COMPONENT FOUNDATIONS
   ========================================================================== */

:where(
    .card,
    .panel,
    .surface,
    .modal,
    .btn,
    .badge,
    .chip,
    .field,
    .alert,
    .dropdown,
    .tooltip,
    .signal-popup,
    .notification-item,
    .plan-card,
    .admin-stat
) {
    min-width: 0;
}

:where(
    .card,
    .panel,
    .surface,
    .modal,
    .alert,
    .notification-item,
    .plan-card
) {
    overflow-wrap: break-word;
}


/* ==========================================================================
   02. SHARED BUTTON COMPONENT
   ==========================================================================

   Existing PHP classes:
       .btn
       .btn-primary
       .btn-ghost
       .btn-danger
       .btn-sm

   Also supports:
       .btn-secondary
       .btn-success
       .btn-outline
       .btn-lg
       .btn-icon
       .full-width
   ========================================================================== */

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

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

    position: relative;

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

    max-width: 100%;

    padding:
        var(--bsm-space-2)
        var(--bsm-button-padding-inline);

    border:
        var(--bsm-border-width)
        solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-button);

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

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

    font-family: var(--bsm-font-sans);

    font-size: var(--bsm-text-base-sm);

    font-weight: var(--bsm-weight-semibold);

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

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

    text-align: center;
    text-decoration: none;

    cursor: pointer;
    user-select: none;

    touch-action: manipulation;

    vertical-align: middle;

    transition:
        background-color var(--bsm-motion-fast)
            var(--bsm-ease-out),
        border-color var(--bsm-motion-fast)
            var(--bsm-ease-out),
        color var(--bsm-motion-fast)
            var(--bsm-ease-out),
        box-shadow var(--bsm-motion-normal)
            var(--bsm-ease-out),
        transform var(--bsm-motion-fast)
            var(--bsm-ease-out);
}

.btn:where(:hover) {
    background-color: var(--bsm-bg-hover);

    border-color: var(--bsm-border-strong);
}

.btn:where(:active) {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline:
        var(--bsm-focus-width)
        solid
        var(--bsm-focus-color);

    outline-offset: var(--bsm-focus-offset);
}

.btn:where(:disabled, [aria-disabled="true"]) {
    opacity: var(--bsm-opacity-disabled);

    cursor: not-allowed;

    box-shadow: none;

    transform: none;
}

.btn[aria-disabled="true"] {
    pointer-events: none;
}


/* ==========================================================================
   03. PRIMARY BUTTON
   ========================================================================== */

.btn-primary {
    border-color: var(--bsm-color-primary);

    background-color: var(--bsm-color-primary);

    color: var(--bsm-text-on-brand);

    box-shadow: var(--bsm-shadow-sm);
}

.btn-primary:not(:disabled):hover {
    border-color: var(--bsm-color-primary-hover);

    background-color: var(--bsm-color-primary-hover);

    color: var(--bsm-text-on-brand);

    box-shadow: var(--bsm-shadow-primary-glow);
}

.btn-primary:not(:disabled):active {
    background-color: var(--bsm-color-primary-pressed);
}


/* ==========================================================================
   04. SECONDARY BUTTON
   ========================================================================== */

.btn-secondary {
    background-color: var(--bsm-bg-surface-raised);

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

    border-color: var(--bsm-border-strong);
}

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


/* ==========================================================================
   05. SUCCESS BUTTON
   ========================================================================== */

.btn-success {
    border-color: var(--bsm-color-success);

    background-color: var(--bsm-color-success);

    color: var(--bsm-navy-950);
}

.btn-success:not(:disabled):hover {
    background-color: var(--bsm-green-300);

    border-color: var(--bsm-green-300);
}


/* ==========================================================================
   06. DANGER BUTTON
   ==========================================================================

   Existing admin/index.php uses .btn-danger for suspension.

   Destructive actions must still require backend authorization.
   ========================================================================== */

.btn-danger {
    border-color: var(--bsm-color-danger);

    background-color: var(--bsm-color-danger);

    color: var(--bsm-navy-950);
}

.btn-danger:not(:disabled):hover {
    background-color: var(--bsm-red-300);

    border-color: var(--bsm-red-300);
}


/* ==========================================================================
   07. GHOST AND OUTLINE BUTTONS
   ========================================================================== */

.btn-ghost {
    border-color: transparent;

    background-color: transparent;

    color: var(--bsm-text-secondary);

    box-shadow: none;
}

.btn-ghost:not(:disabled):hover {
    background-color: var(--bsm-bg-hover);

    border-color: var(--bsm-border-subtle);

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

.btn-outline {
    border-color: var(--bsm-color-primary-border);

    background-color: transparent;

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

.btn-outline:not(:disabled):hover {
    background-color: var(--bsm-color-primary-soft);
}


/* ==========================================================================
   08. BUTTON DIMENSIONS
   ========================================================================== */

.btn-sm {
    min-height: var(--bsm-button-height-sm);

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

    font-size: var(--bsm-text-xs);
}

.btn-lg {
    min-height: var(--bsm-button-height-lg);

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

    font-size: var(--bsm-text-base);
}

.btn-icon,
.icon-button {
    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

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

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

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

    border-radius: var(--bsm-radius-md);
}

.btn-icon svg,
.icon-button svg {
    width: var(--bsm-icon-md);
    height: var(--bsm-icon-md);
}

.btn.full-width,
.btn.w-full {
    display: flex;

    width: 100%;
}


/* ==========================================================================
   09. BUTTON LOADING STATE
   ==========================================================================

   Loading must be controlled by the application.

   The state does not imply payment or administrative success.
   ========================================================================== */

.btn.is-loading,
.btn[aria-busy="true"] {
    cursor: progress;
}

.btn.is-loading::after,
.btn[aria-busy="true"]::after {
    content: "";

    display: block;

    width: 15px;
    height: 15px;

    flex: 0 0 auto;

    border: 2px solid currentColor;

    border-inline-end-color: transparent;

    border-radius: 50%;

    animation:
        bsm-component-spin 0.8s linear infinite;
}


/* ==========================================================================
   10. FORM COMPONENT BASE
   ========================================================================== */

.field,
.form-field,
.input-group {
    display: flex;
    flex-direction: column;

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

    min-width: 0;
}

.field label,
.form-field label,
.input-label {
    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-base-sm);

    font-weight: var(--bsm-weight-medium);
}


/* ==========================================================================
   11. TEXT, NUMBER, DATE AND PASSWORD INPUTS
   ==========================================================================

   Covers:

   - Login username
   - Login password
   - Admin MFA code
   - Payment TID
   - Binance payer ID
   - Subscription plan amounts
   - Admin record IDs
   - Search fields

   Native autocomplete and password-manager behavior remain intact.
   ========================================================================== */

input:where(
    [type="text"],
    [type="password"],
    [type="email"],
    [type="tel"],
    [type="number"],
    [type="url"],
    [type="search"],
    [type="date"],
    [type="datetime-local"],
    [type="time"],
    [type="month"],
    [type="week"]
),
textarea,
select {
    display: block;

    width: 100%;

    min-width: 0;

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

    padding:
        var(--bsm-input-padding-block)
        var(--bsm-input-padding-inline);

    border:
        var(--bsm-border-width)
        solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-input);

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

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

    font-family: inherit;

    font-size: max(1rem, var(--bsm-text-base-sm));

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

    box-shadow: none;

    transition:
        border-color var(--bsm-motion-fast)
            var(--bsm-ease-out),
        background-color var(--bsm-motion-fast)
            var(--bsm-ease-out),
        box-shadow var(--bsm-motion-fast)
            var(--bsm-ease-out);
}

input:where(
    [type="text"],
    [type="password"],
    [type="email"],
    [type="tel"],
    [type="number"],
    [type="url"],
    [type="search"]
):hover,
textarea:hover,
select:hover {
    border-color: var(--bsm-border-strong);
}

input:where(
    [type="text"],
    [type="password"],
    [type="email"],
    [type="tel"],
    [type="number"],
    [type="url"],
    [type="search"],
    [type="date"],
    [type="datetime-local"],
    [type="time"],
    [type="month"],
    [type="week"]
):focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: var(--bsm-border-focus);

    outline:
        2px solid
        var(--bsm-border-focus);

    outline-offset: 2px;

    box-shadow: var(--bsm-shadow-focus);
}

input::placeholder,
textarea::placeholder {
    color: var(--bsm-text-placeholder);

    opacity: 1;
}


/* ==========================================================================
   12. TEXTAREA AND SELECT
   ========================================================================== */

textarea {
    min-height: 110px;

    resize: vertical;
}

select {
    padding-inline-end: var(--bsm-space-8);

    cursor: pointer;
}

select[multiple] {
    min-height: 140px;

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

option {
    background-color: var(--bsm-bg-surface);

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


/* ==========================================================================
   13. INVALID AND DISABLED FORM STATES
   ========================================================================== */

:where(input, textarea, select)[aria-invalid="true"] {
    border-color: var(--bsm-border-error);
}

:where(input, textarea, select):disabled {
    opacity: var(--bsm-opacity-disabled);

    cursor: not-allowed;

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

:where(input, textarea, select)[readonly] {
    background-color: var(--bsm-bg-surface-inset);
}


/* ==========================================================================
   14. CHECKBOXES, RADIOS AND FIELD HELP
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

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

.checkbox-row,
.radio-row {
    display: flex;
    align-items: flex-start;

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

    min-width: 0;
}

.checkbox-row label,
.radio-row label {
    cursor: pointer;
}

.field-help,
.form-help,
.help-text {
    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-xs);

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

.field-error,
.form-error {
    color: var(--bsm-color-danger);

    font-size: var(--bsm-text-sm);

    font-weight: var(--bsm-weight-medium);
}


/* ==========================================================================
   15. FILE UPLOAD COMPONENT
   ==========================================================================

   Used for member payment screenshots and research import previews.

   CSS cannot establish file safety.

   Private upload handlers must check MIME signatures,
   file size, storage location and scanning results.
   ========================================================================== */

input[type="file"] {
    display: block;

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

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

    border:
        1px dashed
        var(--bsm-border-strong);

    border-radius: var(--bsm-radius-lg);

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

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-base-sm);
}

input[type="file"]::file-selector-button {
    min-height: 36px;

    margin-inline-end: var(--bsm-space-3);

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-sm);

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

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

    cursor: pointer;
}


/* ==========================================================================
   16. CARDS
   ========================================================================== */

.card,
.panel,
.surface,
.admin-card,
.auth-card,
.plan-card {
    border:
        var(--bsm-border-width)
        solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-card);

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

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

    box-shadow: var(--bsm-shadow-card);
}

.card,
.panel,
.surface {
    padding: var(--bsm-card-padding);
}

.card-compact {
    padding: var(--bsm-space-4);
}

.card-flat {
    box-shadow: none;
}

.card-raised {
    background-color: var(--bsm-bg-surface-raised);

    box-shadow: var(--bsm-shadow-lg);
}

.card-interactive {
    transition:
        transform var(--bsm-motion-normal)
            var(--bsm-ease-out),
        border-color var(--bsm-motion-normal)
            var(--bsm-ease-out),
        box-shadow var(--bsm-motion-normal)
            var(--bsm-ease-out);
}

.card-interactive:hover {
    border-color: var(--bsm-border-interactive);

    box-shadow: var(--bsm-shadow-lg);
}


/* ==========================================================================
   17. GLASS EFFECT SURFACE
   ==========================================================================

   Cosmetic depth only.

   The background remains opaque enough for text readability.
   ========================================================================== */

.glass-panel {
    border:
        1px solid
        var(--bsm-glass-border);

    border-radius: var(--bsm-radius-xl);

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

    box-shadow: var(--bsm-shadow-lg);
}

@supports (
    (backdrop-filter: blur(12px))
    or
    (-webkit-backdrop-filter: blur(12px))
) {
    .glass-panel {
        -webkit-backdrop-filter:
            blur(var(--bsm-backdrop-blur));

        backdrop-filter:
            blur(var(--bsm-backdrop-blur));
    }
}


/* ==========================================================================
   18. CARD HEADERS AND FOOTERS
   ========================================================================== */

.card-header,
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

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

    min-width: 0;
}

.card-header h2,
.card-header h3,
.panel-header h2,
.panel-header h3 {
    font-size: var(--bsm-heading-card);

    font-weight: var(--bsm-weight-bold);
}

.card-footer,
.panel-footer {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

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

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

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


/* ==========================================================================
   19. ALERTS
   ==========================================================================

   Existing PHP classes:

       .alert
       .alert-success
       .alert-error

   Also supports:
       .alert-warning
       .alert-info

   Accessible markup should use role="alert" for important
   errors and role="status" for nonurgent success messages.
   ========================================================================== */

.alert,
.auth-note,
.admin-alert {
    display: block;

    width: 100%;

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-md);

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

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-base-sm);

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

.alert-success {
    background-color: var(--bsm-color-success-soft);

    border-color: var(--bsm-color-success-border);

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

.alert-error,
.alert-danger {
    background-color: var(--bsm-color-danger-soft);

    border-color: var(--bsm-color-danger-border);

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

.alert-warning {
    background-color: var(--bsm-color-warning-soft);

    border-color: var(--bsm-color-warning-border);

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

.alert-info {
    background-color: var(--bsm-color-info-soft);

    border-color: var(--bsm-color-info-border);

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


/* ==========================================================================
   20. BADGES AND CHIPS
   ========================================================================== */

.badge,
.chip,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

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

    max-width: 100%;

    min-height: 24px;

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-pill);

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

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-semibold);

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

    white-space: normal;
}

.badge-success,
.chip-success,
.status-success {
    background-color: var(--bsm-color-success-soft);

    border-color: var(--bsm-color-success-border);

    color: var(--bsm-color-success);
}

.badge-danger,
.chip-danger,
.status-danger {
    background-color: var(--bsm-color-danger-soft);

    border-color: var(--bsm-color-danger-border);

    color: var(--bsm-color-danger);
}

.badge-warning,
.chip-warning,
.status-warning {
    background-color: var(--bsm-color-warning-soft);

    border-color: var(--bsm-color-warning-border);

    color: var(--bsm-color-warning);
}

.badge-info,
.chip-info,
.status-info {
    background-color: var(--bsm-color-info-soft);

    border-color: var(--bsm-color-info-border);

    color: var(--bsm-color-info);
}


/* ==========================================================================
   21. TRADING DIRECTION BADGES
   ==========================================================================

   BUY and SELL color is presentation only.

   Every notification must also contain a visible textual
   direction generated from the confirmed signal record.
   ========================================================================== */

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

    background-color: var(--bsm-signal-buy-bg);

    color: var(--bsm-signal-buy-text);
}

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

    background-color: var(--bsm-signal-sell-bg);

    color: var(--bsm-signal-sell-text);
}


/* ==========================================================================
   22. SYSTEM STATUS DOTS
   ========================================================================== */

.status-dot,
.admin-status-dot,
.feed-status-dot {
    display: inline-block;

    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background-color: var(--bsm-color-neutral);

    vertical-align: middle;
}

.status-dot.is-healthy,
.status-dot.is-online,
.feed-status-dot.is-healthy,
.admin-status-dot {
    background-color: var(--bsm-color-success);
}

.status-dot.is-degraded,
.status-dot.is-warning {
    background-color: var(--bsm-color-warning);
}

.status-dot.is-offline,
.status-dot.is-error,
.feed-status-dot.is-disconnected {
    background-color: var(--bsm-color-danger);
}

.status-dot.is-unverified,
.feed-status-dot.is-unverified {
    background-color: var(--bsm-feed-unverified);
}


/* ==========================================================================
   23. BRAND COMPONENT
   ==========================================================================

   The layout.css file provides basic brand positioning.

   Here we provide the appearance.
   ========================================================================== */

.brand {
    color: var(--bsm-text-primary);

    font-weight: var(--bsm-weight-bold);

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

.brand:hover {
    color: var(--bsm-text-primary);
}

.brand-mark {
    border:
        1px solid
        var(--bsm-color-primary-border);

    border-radius: var(--bsm-radius-md);

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

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

    box-shadow: var(--bsm-shadow-xs);

    font-weight: var(--bsm-weight-extrabold);
}

.admin-brand-subtitle {
    display: block;

    margin-top: 2px;

    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-2xs);

    font-weight: var(--bsm-weight-semibold);

    letter-spacing: var(--bsm-tracking-label);
}


/* ==========================================================================
   24. TYPOGRAPHY COMPONENTS
   ========================================================================== */

.auth-kicker,
.admin-eyebrow,
.section-eyebrow,
.eyebrow {
    color: var(--bsm-color-primary);

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-bold);

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

    text-transform: uppercase;
}

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

.text-muted,
.muted-text {
    color: var(--bsm-text-muted);
}

.text-secondary {
    color: var(--bsm-text-secondary);
}

.text-success {
    color: var(--bsm-color-success);
}

.text-danger {
    color: var(--bsm-color-danger);
}

.text-warning {
    color: var(--bsm-color-warning);
}

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

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


/* ==========================================================================
   25. DIVIDERS
   ========================================================================== */

.divider,
.separator {
    display: block;

    width: 100%;
    height: 1px;

    margin-block: var(--bsm-space-4);

    border: 0;

    background-color: var(--bsm-border-subtle);
}


/* ==========================================================================
   26. GENERAL LINK COMPONENTS
   ========================================================================== */

.link,
.text-link,
.auth-links a {
    color: var(--bsm-text-link);

    text-decoration: underline;

    text-underline-offset: 3px;

    text-decoration-thickness: 1px;
}

.link:hover,
.text-link:hover,
.auth-links a:hover {
    color: var(--bsm-text-link-hover);
}


/* ==========================================================================
   27. MARKET TAB COMPONENT
   ==========================================================================

   DASHBOARD INTEGRATION:

   #market-tabs

   Important:
   Selected market controls the notification scope.

   Any confirmed signal from ANY PAIR inside the selected
   market may appear as a full popup.

   Other markets display market-level clues only.

   This styling never exposes pair-specific clue data.
   ========================================================================== */

.market-tab,
#market-tabs > button,
#market-tabs > [role="tab"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: relative;

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

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

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-md);

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

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-base-sm);

    font-weight: var(--bsm-weight-semibold);

    text-align: center;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color var(--bsm-motion-fast),
        border-color var(--bsm-motion-fast),
        color var(--bsm-motion-fast);
}

.market-tab:hover,
#market-tabs > button:hover,
#market-tabs > [role="tab"]:hover {
    background-color: var(--bsm-bg-hover);

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

.market-tab.is-active,
.market-tab[aria-selected="true"],
#market-tabs > .is-active,
#market-tabs > [aria-selected="true"] {
    border-color: var(--bsm-market-tab-border);

    background-color: var(--bsm-market-tab-active);

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

.market-tab:focus-visible,
#market-tabs > button:focus-visible {
    outline:
        var(--bsm-focus-width)
        solid
        var(--bsm-focus-color);

    outline-offset: 2px;
}


/* ==========================================================================
   28. MARKET CLUE INDICATORS
   ==========================================================================

   Only aggregate market-level signal presence is represented.

   Visual structure:

   .market-clue
   .market-clue.is-buy
   .market-clue.is-sell

   The notification frontend is responsible for inserting
   authorized clue counts or elements.
   ========================================================================== */

.market-clue,
.market-clue-dot {
    display: inline-block;

    position: relative;

    flex: 0 0 auto;

    width: var(--bsm-clue-dot-size);
    height: var(--bsm-clue-dot-size);

    border-radius: 50%;

    background-color: var(--bsm-color-neutral);
}

.market-clue.is-buy,
.market-clue-dot.is-buy,
.market-clue[data-direction="buy"] {
    background-color: var(--bsm-clue-buy);

    box-shadow:
        0 0 10px
        var(--bsm-signal-buy-glow);
}

.market-clue.is-sell,
.market-clue-dot.is-sell,
.market-clue[data-direction="sell"] {
    background-color: var(--bsm-clue-sell);

    box-shadow:
        0 0 10px
        var(--bsm-signal-sell-glow);
}

.market-clue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    min-height: 20px;

    padding-inline: 5px;

    border-radius: var(--bsm-radius-pill);

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

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

    font-size: var(--bsm-text-2xs);

    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   29. PAIR AND TIMEFRAME CONTROL COMPONENTS
   ========================================================================== */

#pair-select,
#tf-select {
    min-height: var(--bsm-input-height);

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

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

    font-variant-numeric: tabular-nums;
}

.timeframe-button,
.timeframe-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: var(--bsm-timeframe-button-min-width);

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

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-sm);

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

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-semibold);

    cursor: pointer;
}

.timeframe-button.is-active,
.timeframe-button[aria-pressed="true"],
.timeframe-tab.is-active,
.timeframe-tab[aria-selected="true"] {
    background-color: var(--bsm-color-primary-soft);

    border-color: var(--bsm-color-primary-border);

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


/* ==========================================================================
   30. CHART PANEL COMPONENT
   ==========================================================================

   #price-chart must receive actual verified OHLCV data.

   No CSS placeholder may imitate a live candle chart.
   ========================================================================== */

.chart-panel,
.chart-card {
    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-xl);

    background-color: var(--bsm-chart-background);

    box-shadow: var(--bsm-shadow-card);
}

.chart-panel {
    padding: var(--bsm-card-padding);
}

#price-chart {
    border:
        1px solid
        var(--bsm-chart-axis);

    border-radius: var(--bsm-radius-md);

    background-color: var(--bsm-chart-background);
}


/* ==========================================================================
   31. CHART STATUS COMPONENTS
   ==========================================================================

   Never label stale or missing feed data as LIVE.

   Status is supplied by authenticated server responses.
   ========================================================================== */

.chart-status,
.feed-indicator,
.chart-feed-badge {
    display: inline-flex;
    align-items: center;

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

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-semibold);
}

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

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

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

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

.chart-empty,
.chart-unavailable,
.chart-error {
    display: grid;
    place-content: center;

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

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

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

    background-color: var(--bsm-chart-background);

    color: var(--bsm-text-secondary);

    text-align: center;
}

.chart-unavailable,
.chart-error {
    border:
        1px dashed
        var(--bsm-border-warning);
}


/* ==========================================================================
   32. CHART VALUE COMPONENTS
   ========================================================================== */

.chart-price,
.price-label,
.market-price {
    font-family: var(--bsm-font-financial);

    font-variant-numeric:
        tabular-nums lining-nums;
}

.price-label {
    color: var(--bsm-chart-axis-text);

    font-size: var(--bsm-text-xs);
}

.price-label.is-buy {
    color: var(--bsm-chart-bull);
}

.price-label.is-sell {
    color: var(--bsm-chart-bear);
}


/* ==========================================================================
   33. NOTIFICATION BELL
   ==========================================================================

   EXISTING DASHBOARD ID:

   #bell-button

   The badge count comes from the authenticated API.
   CSS never generates the number.
   ========================================================================== */

#bell-button,
.notification-bell {
    display: inline-grid;
    place-items: center;

    position: relative;

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

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-md);

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

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

    cursor: pointer;
}

#bell-button:hover,
.notification-bell:hover {
    border-color: var(--bsm-color-primary-border);

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

#bell-button:focus-visible,
.notification-bell:focus-visible {
    outline:
        var(--bsm-focus-width)
        solid
        var(--bsm-focus-color);

    outline-offset: var(--bsm-focus-offset);
}

.bell-count,
.notification-count,
#bell-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: absolute;

    inset-block-start: -7px;
    inset-inline-end: -7px;

    min-width: 19px;
    min-height: 19px;

    padding-inline: 4px;

    border:
        1px solid
        var(--bsm-bg-header);

    border-radius: var(--bsm-radius-pill);

    background-color: var(--bsm-color-danger);

    color: var(--bsm-navy-950);

    font-size: 10px;

    font-weight: var(--bsm-weight-extrabold);

    line-height: 1;

    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   34. NOTIFICATION PANEL BACKDROP
   ==========================================================================

   EXISTING DASHBOARD ID:

   #notice-backdrop

   [hidden] from reset.css remains authoritative.
   ========================================================================== */

#notice-backdrop,
.notice-backdrop,
.notification-backdrop {
    position: fixed;

    inset: 0;

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

    background-color: var(--bsm-overlay-default);
}


/* ==========================================================================
   35. NOTIFICATION PANEL
   ==========================================================================

   EXISTING DASHBOARD ID:

   #notice-panel

   Supports notification history, selected-market signal
   receipts, read acknowledgements and inbox pagination.

   Data remains authenticated and server-owned.
   ========================================================================== */

#notice-panel,
.notice-panel,
.notification-panel {
    position: fixed;

    inset-block: 0;
    inset-inline-end: 0;

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

    display: flex;
    flex-direction: column;

    width: min(
        100%,
        var(--bsm-notification-panel-width)
    );

    max-height: 100vh;
    max-height: 100dvh;

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

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

    border-inline-start:
        1px solid
        var(--bsm-border-default);

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

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

    box-shadow: var(--bsm-shadow-modal);

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

    overscroll-behavior: contain;
}

.notice-panel-header,
.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

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

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

.notice-panel-body,
.notification-panel-body,
.notification-list {
    display: flex;
    flex-direction: column;

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

    min-width: 0;

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


/* ==========================================================================
   36. NOTIFICATION HISTORY ITEMS
   ========================================================================== */

.notification-item,
.notice-item,
.signal-history-item {
    display: flex;
    flex-direction: column;

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

    min-height:
        var(--bsm-notification-row-min-height);

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-lg);

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

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

    background-color: var(--bsm-color-primary-soft);
}

.notification-item.is-buy,
.notice-item.is-buy,
.notification-item[data-direction="buy"] {
    border-inline-start:
        3px solid
        var(--bsm-signal-buy);
}

.notification-item.is-sell,
.notice-item.is-sell,
.notification-item[data-direction="sell"] {
    border-inline-start:
        3px solid
        var(--bsm-signal-sell);
}

.notification-item time,
.notice-item time {
    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-xs);

    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   37. SIGNAL POPUP CONTAINER
   ==========================================================================

   SPECIAL USER REQUIREMENT:

   - Full BUY/SELL popup: selected market only.
   - Any pair within that market is eligible.
   - Other markets: market-tab clue, not full popup.
   - Display duration: 30 seconds.
   - No forced chart switching.

   The authenticated frontend enforces signal scope and
   controls the lifecycle of the popup.

   This CSS provides positioning and visual styling only.
   ========================================================================== */

.signal-popup-stack,
.signal-popup-container,
#signal-popup-stack {
    display: flex;
    flex-direction: column;

    position: fixed;

    inset-block-start:
        calc(
            var(--bsm-header-height)
            + var(--bsm-signal-popup-offset)
            + var(--bsm-safe-top)
        );

    inset-inline-end:
        calc(
            var(--bsm-signal-popup-offset)
            + var(--bsm-safe-right)
        );

    z-index: var(--bsm-z-signal-popup);

    gap: var(--bsm-signal-popup-gap);

    width: min(
        var(--bsm-signal-popup-max-width),
        calc(100vw - 24px)
    );

    max-height: calc(
        100dvh
        - var(--bsm-header-height)
        - 40px
    );

    overflow-y: auto;

    overscroll-behavior: contain;

    pointer-events: none;
}


/* ==========================================================================
   38. SIGNAL POPUP CARD
   ========================================================================== */

.signal-popup,
.trade-signal-popup {
    display: flex;
    flex-direction: column;

    position: relative;

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

    width: 100%;

    min-height:
        var(--bsm-signal-popup-min-height);

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

    border:
        var(--bsm-signal-popup-border-width)
        solid
        var(--bsm-border-default);

    border-radius:
        var(--bsm-signal-popup-radius);

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

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

    box-shadow: var(--bsm-shadow-xl);

    pointer-events: auto;

    overflow: hidden;
}

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

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

    box-shadow:
        var(--bsm-shadow-xl),
        var(--bsm-signal-popup-buy-glow);
}

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

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

    box-shadow:
        var(--bsm-shadow-xl),
        var(--bsm-signal-popup-sell-glow);
}


/* ==========================================================================
   39. SIGNAL POPUP CONTENT
   ========================================================================== */

.signal-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

.signal-popup-title {
    color: var(--bsm-text-primary);

    font-size: var(--bsm-text-lg);

    font-weight: var(--bsm-weight-bold);
}

.signal-popup-symbol,
.signal-popup-price {
    font-family: var(--bsm-font-financial);

    font-variant-numeric: tabular-nums;
}

.signal-popup-meta {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

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

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-xs);
}


/* ==========================================================================
   40. 30-SECOND POPUP VISUAL PROGRESS
   ==========================================================================

   IMPORTANT:

   This animation is visual only.

   The frontend JavaScript is responsible for:
   - Using the confirmed signal's stable inbox ID.
   - Starting a 30-second display period.
   - Preventing repeated popups after acknowledgement.
   - Updating shown/dismissed status through the API.
   - Respecting expiry and visibility conditions.

   CSS does not automatically hide the popup at 30 seconds.

   This avoids falsely treating an animation event as
   confirmation that a financial notification was seen.
   ========================================================================== */

.signal-popup-progress,
.popup-progress {
    position: relative;

    width: 100%;
    height:
        var(--bsm-signal-popup-progress-height);

    border-radius: var(--bsm-radius-pill);

    background-color: var(--bsm-border-subtle);

    overflow: hidden;
}

.signal-popup-progress::after,
.popup-progress::after {
    content: "";

    display: block;

    width: 100%;
    height: 100%;

    background-color: var(--bsm-color-primary);

    transform-origin: left center;
}

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

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

.signal-popup.is-visible
    .signal-popup-progress::after,
.signal-popup.is-active
    .signal-popup-progress::after {
    animation:
        bsm-popup-progress
        var(--bsm-signal-popup-duration)
        linear
        both;
}


/* ==========================================================================
   41. SIGNAL RECEIPT MODAL FOUNDATION
   ==========================================================================

   EXISTING DASHBOARD ID:

   #receipt-modal

   Actual receipt values must be fetched through:

   /api/index.php?action=signal_receipt

   Server validates the user's inbox ownership and
   the current selected market.

   Detailed receipt styling continues in signal-receipt.css.
   ========================================================================== */

#receipt-modal,
.receipt-modal,
.signal-receipt-modal {
    position: fixed;

    inset: 0;

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

    place-items: center;

    padding:
        calc(
            var(--bsm-space-4)
            + var(--bsm-safe-top)
        )
        calc(
            var(--bsm-space-4)
            + var(--bsm-safe-right)
        )
        calc(
            var(--bsm-space-4)
            + var(--bsm-safe-bottom)
        )
        calc(
            var(--bsm-space-4)
            + var(--bsm-safe-left)
        );

    background-color: var(--bsm-overlay-default);

    overflow-y: auto;

    overscroll-behavior: contain;
}

#receipt-modal:not([hidden]),
.receipt-modal:not([hidden]),
.signal-receipt-modal:not([hidden]) {
    display: grid;
}

#receipt-modal[aria-hidden="true"]:not([hidden]),
.receipt-modal[aria-hidden="true"]:not([hidden]) {
    display: none;
}

.receipt-card,
.receipt-content,
.signal-receipt {
    display: flex;
    flex-direction: column;

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

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

    max-height: calc(100dvh - 32px);

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-2xl);

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

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

    box-shadow: var(--bsm-shadow-modal);

    overflow-y: auto;
}


/* ==========================================================================
   42. SIGNAL RECEIPT DIRECTION STYLES
   ==========================================================================

   Both naming patterns are supported:

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

       .receipt.buy
       .receipt.sell

   This preserves compatibility with earlier receipt markup.
   ========================================================================== */

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

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


/* ==========================================================================
   43. RECEIPT DATA ROWS
   ========================================================================== */

.receipt-row,
.receipt-field {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    flex-wrap: wrap;

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

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

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

.receipt-label {
    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-sm);
}

.receipt-value {
    color: var(--bsm-text-primary);

    font-size: var(--bsm-text-sm);

    font-weight: var(--bsm-weight-semibold);

    font-variant-numeric: tabular-nums;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   44. ECONOMIC EVENT COMPONENTS
   ==========================================================================

   EXISTING DASHBOARD ID:

   #economic-events

   Verified event sources and timestamps are required.

   CSS must not imply an unverified event is confirmed.
   ========================================================================== */

.economic-event,
.economic-event-card,
.news-event {
    display: flex;
    flex-direction: column;

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

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-lg);

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

.economic-event-header,
.news-event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

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

.economic-event-title {
    font-weight: var(--bsm-weight-semibold);

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

.economic-event-time {
    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-sm);

    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   45. ECONOMIC IMPACT LEVELS
   ========================================================================== */

.impact-low,
[data-impact="low"] {
    color: var(--bsm-news-impact-low);
}

.impact-medium,
[data-impact="medium"] {
    color: var(--bsm-news-impact-medium);
}

.impact-high,
[data-impact="high"] {
    color: var(--bsm-news-impact-high);
}


/* ==========================================================================
   46. CPI DIGITAL COUNTDOWN
   ==========================================================================

   Countdown time is calculated in JavaScript from verified
   UTC event time and synchronized server time.

   The clock must transition to released/delayed states based
   on verified data and must not invent an actual CPI result.
   ========================================================================== */

.cpi-countdown,
.economic-countdown {
    padding: var(--bsm-space-4);

    border:
        1px solid
        var(--bsm-news-countdown-border);

    border-radius: var(--bsm-radius-lg);

    background-color: var(--bsm-news-countdown-bg);
}

.countdown-unit,
.countdown-cell {
    display: flex;
    flex-direction: column;

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

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

    min-width: 0;

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

    border-radius: var(--bsm-radius-sm);

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

.countdown-value {
    color: var(--bsm-news-countdown-text);

    font-family: var(--bsm-font-financial);

    font-size:
        clamp(
            1.25rem,
            3vw,
            2rem
        );

    font-weight: var(--bsm-weight-bold);

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

    font-variant-numeric: tabular-nums;
}

.countdown-label {
    color: var(--bsm-text-muted);

    font-size: var(--bsm-text-2xs);

    font-weight: var(--bsm-weight-semibold);

    text-transform: uppercase;

    letter-spacing: var(--bsm-tracking-wide);
}


/* ==========================================================================
   47. SUBSCRIPTION PLAN COMPONENT
   ==========================================================================

   Duration and price are always supplied by private billing
   services and actual subscription_plans records.
   ========================================================================== */

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

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

    padding: var(--bsm-card-padding);
}

.plan-card.is-selected,
.plan-card[aria-selected="true"] {
    border-color: var(--bsm-color-primary-border);

    box-shadow:
        var(--bsm-shadow-card),
        var(--bsm-shadow-primary-glow);
}

.plan-title,
.plan-name {
    color: var(--bsm-text-primary);

    font-size: var(--bsm-text-xl);

    font-weight: var(--bsm-weight-bold);
}

.plan-price {
    color: var(--bsm-text-primary);

    font-size: var(--bsm-text-3xl);

    font-weight: var(--bsm-weight-extrabold);

    font-variant-numeric: tabular-nums;
}

.plan-duration {
    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-sm);
}

.plan-card .btn {
    margin-top: auto;
}


/* ==========================================================================
   48. SUBSCRIPTION ACCESS STATUS
   ========================================================================== */

.access-status,
.subscription-status,
.payment-status {
    display: inline-flex;
    align-items: center;

    flex-wrap: wrap;

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

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-md);

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

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-sm);
}

.access-status[data-status="approved"],
.subscription-status[data-status="active"],
.payment-status[data-status="verified"] {
    border-color: var(--bsm-color-success-border);

    background-color: var(--bsm-color-success-soft);

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

.access-status[data-status="pending"],
.subscription-status[data-status="pending"],
.payment-status[data-status="review"] {
    border-color: var(--bsm-color-warning-border);

    background-color: var(--bsm-color-warning-soft);

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

.access-status[data-status="expired"],
.access-status[data-status="suspended"],
.subscription-status[data-status="expired"],
.payment-status[data-status="rejected"] {
    border-color: var(--bsm-color-danger-border);

    background-color: var(--bsm-color-danger-soft);

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


/* ==========================================================================
   49. PAYMENT INSTRUCTIONS AND TRANSACTION VALUES
   ========================================================================== */

.payment-instructions,
.payment-details {
    padding: var(--bsm-space-4);

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-lg);

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

.transaction-id,
.payment-reference,
.payment-number {
    font-family: var(--bsm-font-financial);

    font-variant-numeric: tabular-nums;

    overflow-wrap: anywhere;

    user-select: text;
}


/* ==========================================================================
   50. ADMINISTRATOR CARD APPEARANCE
   ==========================================================================

   Matches the classes used by admin/index.php.
   ========================================================================== */

.admin-card {
    padding: var(--bsm-card-padding);
}

.admin-card h2 {
    color: var(--bsm-text-primary);

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

    font-weight: var(--bsm-weight-bold);

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

.admin-card > p {
    color: var(--bsm-text-secondary);

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


/* ==========================================================================
   51. ADMINISTRATOR SIDEBAR NAVIGATION
   ========================================================================== */

.admin-nav-link {
    border:
        1px solid transparent;

    border-radius: var(--bsm-radius-md);

    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-base-sm);

    font-weight: var(--bsm-weight-medium);

    transition:
        background-color var(--bsm-motion-fast),
        border-color var(--bsm-motion-fast),
        color var(--bsm-motion-fast);
}

.admin-nav-link:hover {
    background-color: var(--bsm-bg-hover);

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

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

    background-color: var(--bsm-color-primary-soft);

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

    font-weight: var(--bsm-weight-semibold);
}

.admin-nav-link:focus-visible {
    outline:
        var(--bsm-focus-width)
        solid
        var(--bsm-focus-color);

    outline-offset: 2px;
}


/* ==========================================================================
   52. ADMINISTRATOR METRIC CARDS
   ========================================================================== */

.admin-stat {
    padding: var(--bsm-space-4);

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-lg);

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

    box-shadow: var(--bsm-shadow-sm);
}

.admin-stat > span {
    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-medium);
}

.admin-stat > strong {
    color: var(--bsm-text-primary);

    font-size: var(--bsm-text-2xl);

    font-weight: var(--bsm-weight-bold);

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

    font-variant-numeric: tabular-nums;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   53. ADMINISTRATOR TABLE COMPONENT
   ==========================================================================

   Actual rows must come from permission-filtered repositories.

   Payment proof links are not generated by CSS.
   ========================================================================== */

.admin-table {
    color: var(--bsm-text-primary);

    font-size: var(--bsm-text-base-sm);
}

.admin-table thead {
    background-color: var(--bsm-bg-surface-raised);
}

.admin-table th {
    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-xs);

    font-weight: var(--bsm-weight-semibold);

    text-transform: none;

    white-space: nowrap;
}

.admin-table th,
.admin-table td {
    border-bottom:
        1px solid
        var(--bsm-border-subtle);
}

.admin-table tbody tr:nth-child(even) {
    background-color: var(--bsm-bg-surface-inset);
}

.admin-table tbody tr:hover {
    background-color: var(--bsm-bg-hover);
}

.admin-table td {
    vertical-align: top;

    overflow-wrap: anywhere;
}

.admin-empty {
    padding: var(--bsm-space-6);

    color: var(--bsm-text-muted);

    text-align: center;
}


/* ==========================================================================
   54. ADMINISTRATOR TOP BAR
   ========================================================================== */

.admin-topbar {
    color: var(--bsm-text-primary);
}

.admin-topbar > strong {
    font-size: var(--bsm-text-lg);

    font-weight: var(--bsm-weight-bold);
}

.admin-top-user {
    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-sm);
}


/* ==========================================================================
   55. ADMINISTRATOR FORM ACTIONS
   ========================================================================== */

.admin-form .btn,
.admin-action-row .btn {
    align-self: start;
}

.admin-form textarea {
    max-width: 100%;
}

.admin-form label,
.admin-action-row label {
    color: var(--bsm-text-secondary);

    font-size: var(--bsm-text-sm);

    font-weight: var(--bsm-weight-medium);
}


/* ==========================================================================
   56. ADMINISTRATOR MOBILE NAVIGATION
   ==========================================================================

   Primary admin navigation stays usable through the CSS-only
   fallback already implemented in layout.css.
   ========================================================================== */

.admin-mobile-nav {
    background-color: var(--bsm-bg-surface);

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

.admin-mobile-nav a {
    display: inline-flex;
    align-items: center;

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

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

    border-radius: var(--bsm-radius-sm);

    color: var(--bsm-text-secondary);

    text-decoration: none;
}

.admin-mobile-nav a[aria-current="page"] {
    background-color: var(--bsm-color-primary-soft);

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


/* ==========================================================================
   57. MODAL AND DIALOG CLOSE BUTTON
   ========================================================================== */

.modal-close,
.dialog-close,
.receipt-close {
    display: inline-grid;
    place-items: center;

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

    flex: 0 0 auto;

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-md);

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

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

    cursor: pointer;
}

.modal-close:hover,
.dialog-close:hover,
.receipt-close:hover {
    background-color: var(--bsm-bg-hover);
}


/* ==========================================================================
   58. GENERAL MODAL BACKDROP
   ========================================================================== */

.modal-backdrop,
.dialog-backdrop {
    position: fixed;

    inset: 0;

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

    background-color: var(--bsm-overlay-default);
}

.modal-content,
.dialog-content {
    width: min(
        100%,
        var(--bsm-receipt-modal-max-width)
    );

    max-height: calc(100dvh - 32px);

    padding: var(--bsm-card-padding);

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-2xl);

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

    box-shadow: var(--bsm-shadow-modal);

    overflow-y: auto;
}


/* ==========================================================================
   59. LOADING SPINNER
   ========================================================================== */

.spinner,
.loading-spinner {
    display: inline-block;

    width: 24px;
    height: 24px;

    border:
        3px solid
        var(--bsm-loading-track);

    border-top-color:
        var(--bsm-loading-indicator);

    border-radius: 50%;

    animation:
        bsm-component-spin 0.8s linear infinite;
}


/* ==========================================================================
   60. LOADING SKELETONS
   ==========================================================================

   Skeleton placeholders must never display invented price
   values or fabricated performance statistics.
   ========================================================================== */

.skeleton,
.loading-skeleton {
    display: block;

    border-radius: var(--bsm-radius-sm);

    background-color: var(--bsm-skeleton-base);

    animation:
        bsm-skeleton-pulse
        1.8s ease-in-out infinite;
}

.skeleton-line {
    height: 12px;
}

.skeleton-title {
    height: 24px;

    max-width: 65%;
}

.skeleton-card {
    min-height: 100px;
}


/* ==========================================================================
   61. EMPTY AND ERROR STATES
   ========================================================================== */

.empty-state,
.error-state,
.unavailable-state {
    display: flex;
    flex-direction: column;

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

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

    min-height: 150px;

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

    border:
        1px dashed
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-lg);

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

    color: var(--bsm-text-secondary);

    text-align: center;
}

.error-state {
    border-color: var(--bsm-color-danger-border);
}

.unavailable-state {
    border-color: var(--bsm-color-warning-border);
}


/* ==========================================================================
   62. DROPDOWN COMPONENT
   ========================================================================== */

.dropdown {
    position: relative;

    display: inline-block;

    min-width: 0;
}

.dropdown-menu {
    position: absolute;

    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;

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

    min-width: 190px;
    max-width: min(320px, calc(100vw - 24px));

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-lg);

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

    box-shadow: var(--bsm-shadow-lg);
}

.dropdown-menu a,
.dropdown-menu button {
    display: flex;
    align-items: center;

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

    width: 100%;

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

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

    border-radius: var(--bsm-radius-sm);

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

    text-align: start;
    text-decoration: none;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover {
    background-color: var(--bsm-bg-hover);
}


/* ==========================================================================
   63. TOOLTIP COMPONENT
   ==========================================================================

   Accessible descriptions should also exist in the DOM
   or be provided through appropriate ARIA relationships.

   Tooltips must not contain private data inserted through
   untrusted HTML.
   ========================================================================== */

.tooltip {
    position: relative;

    display: inline-flex;
}

.tooltip-content {
    position: absolute;

    inset-block-end: calc(100% + 8px);
    inset-inline-start: 50%;

    transform: translateX(-50%);

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

    width: max-content;
    max-width: min(280px, 80vw);

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

    border:
        1px solid
        var(--bsm-border-default);

    border-radius: var(--bsm-radius-sm);

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

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

    font-size: var(--bsm-text-xs);

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

    box-shadow: var(--bsm-shadow-md);

    pointer-events: none;
}


/* ==========================================================================
   64. SCROLLBAR COMPONENT
   ==========================================================================

   Apply only to scrollable application regions.

   Avoid forcing a particular scrollbar style globally.
   ========================================================================== */

.admin-table-scroll,
.notification-panel,
#notice-panel,
#market-tabs,
.timeframe-tabs,
.horizontal-scroll {
    scrollbar-width: thin;

    scrollbar-color:
        var(--bsm-border-strong)
        transparent;
}


/* ==========================================================================
   65. SCROLLBAR WEBKIT FALLBACK
   ========================================================================== */

.admin-table-scroll::-webkit-scrollbar,
#notice-panel::-webkit-scrollbar,
#market-tabs::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.admin-table-scroll::-webkit-scrollbar-thumb,
#notice-panel::-webkit-scrollbar-thumb,
#market-tabs::-webkit-scrollbar-thumb {
    border-radius: var(--bsm-radius-pill);

    background-color: var(--bsm-border-strong);
}


/* ==========================================================================
   66. KEYFRAME: BUTTON / LOADING SPINNER
   ========================================================================== */

@keyframes bsm-component-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================================
   67. KEYFRAME: SIGNAL POPUP PROGRESS
   ==========================================================================

   Animation is visual.

   The popup lifecycle is controlled by application logic.
   ========================================================================== */

@keyframes bsm-popup-progress {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }

}


/* ==========================================================================
   68. KEYFRAME: SKELETON PULSE
   ========================================================================== */

@keyframes bsm-skeleton-pulse {

    0%,
    100% {
        opacity: 0.65;
    }

    50% {
        opacity: 1;
    }

}


/* ==========================================================================
   69. HOVER-CAPABLE DEVICE ENHANCEMENTS
   ==========================================================================

   Touchscreen users should not depend on hover states
   to discover controls or read essential information.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

    .card-interactive:hover {
        transform: translateY(-2px);
    }

    .signal-popup:hover {
        box-shadow: var(--bsm-shadow-xl);
    }

}


/* ==========================================================================
   70. TABLET COMPONENT ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1024px) {

    .signal-popup-stack,
    .signal-popup-container,
    #signal-popup-stack {
        width: min(
            400px,
            calc(100vw - 32px)
        );
    }

    .receipt-card,
    .receipt-content {
        max-width: 100%;
    }

}


/* ==========================================================================
   71. MOBILE COMPONENT ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {

    .btn {
        min-height: var(--bsm-touch-target-min);
    }

    .btn-sm {
        min-height: 40px;
    }

    .card,
    .panel,
    .surface,
    .auth-card,
    .admin-card,
    .plan-card {
        border-radius: var(--bsm-radius-lg);
    }

    #notice-panel,
    .notice-panel,
    .notification-panel {
        width: min(
            100%,
            100vw
        );
    }

    .signal-popup-stack,
    .signal-popup-container,
    #signal-popup-stack {
        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-height: calc(
            100dvh
            - var(--bsm-mobile-header-height)
            - var(--bsm-safe-top)
            - var(--bsm-safe-bottom)
            - 24px
        );
    }

    .signal-popup,
    .trade-signal-popup {
        padding: var(--bsm-space-3);
    }

    .signal-popup-title {
        font-size: var(--bsm-text-base);
    }

    .receipt-card,
    .receipt-content,
    .signal-receipt {
        padding: var(--bsm-space-4);
    }

    .countdown-value {
        font-size: clamp(
            1.125rem,
            5vw,
            1.6rem
        );
    }

    .admin-stat > strong {
        font-size: var(--bsm-text-xl);
    }

}


/* ==========================================================================
   72. SMALL MOBILE COMPONENT ADJUSTMENTS
   ========================================================================== */

@media (max-width: 420px) {

    .badge,
    .chip,
    .status-badge {
        font-size: var(--bsm-text-2xs);
    }

    .notification-item,
    .notice-item {
        padding: var(--bsm-space-3);
    }

    .receipt-row,
    .receipt-field {
        align-items: flex-start;
    }

    .signal-popup-meta {
        gap: var(--bsm-space-1);
    }

    .plan-price {
        font-size: var(--bsm-text-2xl);
    }

}


/* ==========================================================================
   73. REDUCED MOTION INTEGRATION
   ==========================================================================

   IMPORTANT:

   Reduced motion must not:
   - Hide popup text.
   - Cancel required API acknowledgements.
   - Change verified signal timestamps.
   - Stop an actual CPI countdown.
   - Modify the 30-second logical notification duration.

   Disable only visual movement.
   ========================================================================== */

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

    .btn,
    .card-interactive,
    .market-tab,
    .timeframe-button,
    .admin-nav-link {
        transition-duration: 0ms;
    }

    .btn.is-loading::after,
    .btn[aria-busy="true"]::after,
    .spinner,
    .loading-spinner,
    .skeleton,
    .loading-skeleton {
        animation: none;
    }

    .signal-popup-progress::after,
    .popup-progress::after {
        animation: none !important;

        transform: none;
    }

    .card-interactive:hover {
        transform: none;
    }

}


/* ==========================================================================
   74. HIGH-CONTRAST PREFERENCE
   ========================================================================== */

@media (prefers-contrast: more) {

    .btn,
    .card,
    .panel,
    .auth-card,
    .admin-card,
    .signal-popup,
    .notification-item,
    .market-tab {
        border-width: 2px;
    }

    .badge,
    .chip,
    .status-badge {
        border-width: 2px;
    }

    .market-clue {
        outline:
            1px solid
            currentColor;

        outline-offset: 2px;
    }

}


/* ==========================================================================
   75. FORCED COLORS SUPPORT
   ==========================================================================

   Preserve operating-system accessibility colors.
   ========================================================================== */

@media (forced-colors: active) {

    .btn,
    .card,
    .panel,
    .alert,
    .badge,
    .chip,
    .market-tab,
    .notification-item,
    .signal-popup,
    .admin-card {
        border-color: CanvasText;
    }

    .btn:focus-visible,
    .market-tab:focus-visible,
    .admin-nav-link:focus-visible {
        outline-color: Highlight;
    }

    .market-tab[aria-selected="true"],
    .admin-nav-link[aria-current="page"] {
        outline:
            2px solid
            Highlight;

        outline-offset: -2px;
    }

    .status-dot,
    .market-clue {
        border:
            1px solid
            CanvasText;

        forced-color-adjust: auto;
    }

}


/* ==========================================================================
   76. PRINT COMPONENT RULES
   ==========================================================================

   Printing must not reveal private data that was not already
   authorized and rendered.

   Do not automatically expose [hidden] elements.
   ========================================================================== */

@media print {

    .btn,
    .notification-bell,
    #bell-button,
    .signal-popup-stack,
    .signal-popup-container,
    #signal-popup-stack,
    #notice-backdrop,
    .notice-backdrop {
        display: none !important;
    }

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

        break-inside: avoid;
    }

    .admin-table {
        color: #111827;
    }

}


/* ==========================================================================
   77. INTEGRATION COMPLETION CHECKLIST
   ==========================================================================

   REUSABLE CONTROLS
   -----------------
   [x] Buttons
   [x] Primary / secondary / ghost / danger actions
   [x] Loading buttons
   [x] Form inputs
   [x] Select and textarea
   [x] File uploads
   [x] Checkbox and radio controls
   [x] Validation and disabled states
   [x] Cards and surfaces
   [x] Alerts
   [x] Badges and chips
   [x] Status dots
   [x] Dropdowns
   [x] Tooltips
   [x] Empty/error/loading states

   TRADING DASHBOARD
   -----------------
   [x] Market tabs
   [x] Market-level BUY/SELL clue styles
   [x] Pair selector
   [x] Timeframe buttons
   [x] Chart container
   [x] Verified feed-state presentation
   [x] Signal popup cards
   [x] BUY/SELL popup styling
   [x] 30-second visual progress
   [x] Notification bell
   [x] Notification panel
   [x] Notification history
   [x] Signal receipt modal foundation
   [x] Economic event cards
   [x] CPI countdown display

   BILLING
   -------
   [x] Subscription plan cards
   [x] Access-status badges
   [x] Payment-status badges
   [x] Payment instructions
   [x] Transaction-ID presentation

   ADMINISTRATION
   --------------
   [x] Admin navigation
   [x] Admin cards
   [x] Admin metrics
   [x] Admin tables
   [x] Admin form layout
   [x] Mobile navigation presentation

   ACCESSIBILITY
   -------------
   [x] Keyboard focus
   [x] Native form controls
   [x] Touch targets
   [x] Reduced-motion behavior
   [x] High-contrast styling
   [x] Forced-colors compatibility

   ==========================================================================
   IMPORTANT RUNTIME CONTRACTS
   ==========================================================================

   This stylesheet is integrated with the current visual
   system, but it does not implement application behavior.

   The corresponding JavaScript and private PHP services
   must perform:

   - Authenticated market selection
   - Selected-market notification routing
   - Same-market all-pair signal delivery
   - Other-market aggregate clue delivery
   - Exact popup display timing and deduplication
   - Notification read/shown/dismissed acknowledgements
   - Server-verified signal receipts
   - Actual OHLCV candle rendering
   - Economic release countdown calculations
   - Server-enforced subscription access
   - Administrator authorization and audit logging

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

   END OF BALOCH SM COMPONENT SYSTEM

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