/* Gmaxira — Unified Design System */
/* خطوط عربية: Tajawal للنصوص، Amiri للعناوين، JetBrains Mono للأكواد */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800&family=Amiri:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('blueprint-enhancements.css');
@import url('bp-floating-tip.css');
@import url('bp-design-system.css');

:root {
    color-scheme: dark;
    --font-sans: 'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Amiri', 'Tajawal', serif;
    --bs-font-sans-serif: 'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* تدرج الأزرار والظلال: يتبع الثيم عبر --accent-rgb */
    --accent-rgb: 212, 175, 55;
    --accent-gradient-end: #b8860b;
    --btn-primary-fg: #0a0a0f;
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #16161f;
    --bg-elevated: #1c1c28;
    --accent: #d4af37;
    --accent-soft: rgba(var(--accent-rgb), 0.2);
    --accent-glow: rgba(var(--accent-rgb), 0.15);
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #eab308;
    --info: #0ea5e9;
    /*
     * سلم TP/SL في التقارير ومراقب السوق:
     * «miss» على هدف = السعر لم يصل للمستوى — ليس لون خسارة محفظة.
     * «sl-safe» = الخروج دون ضرب الوقف — ليس تعادلاً مع عمود الربح الأخضر.
     */
    --tp-ladder-tp-hit: #0d9488;
    --tp-ladder-tp-miss: #64748b;
    --tp-ladder-price-hit: #0d9488;
    --tp-ladder-sl-safe-color: #0ea5e9;
    --text-primary: #fafaf9;
    --text-secondary: #a8a29e;
    --text-muted: #78716c;
    /* ── Modern design scale — flat surfaces, square corners ── */
    --radius-control: 0;
    --radius-surface: 0;
    --radius-pill: 0;
    --radius-xs: 0;
    --radius-sm: var(--radius-control);
    --radius-md: var(--radius-surface);
    --radius-lg: var(--radius-surface);
    --radius-xl: var(--radius-surface);
    --radius: var(--radius-surface);
    --surface-border: rgba(255, 255, 255, 0.07);
    --surface-border-strong: rgba(255, 255, 255, 0.12);
    --surface-hover: rgba(255, 255, 255, 0.04);
    --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 6px 18px rgba(0, 0, 0, 0.12);
    --surface-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.2);
    --border-width: 1px;
    --border-subtle: var(--surface-border);
    --border-default: var(--surface-border-strong);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border: var(--surface-border-strong);
    --border-focus: rgba(var(--accent-rgb), 0.45);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-page-x: clamp(0.75rem, 2.5vw, 1.5rem);
    --space-page-y: clamp(1rem, 2vw, 1.5rem);
    --bp-page-gap: var(--space-6);
    --bp-card-pad: var(--space-5);
    --bp-control-h: 40px;
    --bp-control-h-touch: 44px;
    --font-size-caption: 0.72rem;
    --font-size-label: 0.78rem;
    --font-size-sm: 0.82rem;
    --font-size-body: 0.9rem;
    --font-size-title: 1.1rem;
    --font-size-xl: 1.25rem;
    --font-size-lg: 1.05rem;
    --font-size-heading: clamp(1.35rem, 2.2vw, 1.65rem);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-gold: 0 0 40px rgba(var(--accent-rgb), 0.08);
    --shadow-card: 0 18px 46px rgba(0, 0, 0, 0.26);
    --shadow-card-hover: 0 24px 58px rgba(0, 0, 0, 0.34);
    --surface-glass: rgba(255, 255, 255, 0.035);
    --surface-glass-strong: rgba(255, 255, 255, 0.055);
    --bg-tertiary: #1e1e2a;
    --accent-dim: rgba(var(--accent-rgb), 0.4);
    /*
     * تراكب الطبقات (fixed / modals):
     * .layout له z-index منخفض؛ نوافذ الصفحة يجب أن تكون أبناء body أو z-index أعلى من الشات.
     */
    --z-chat-fab: 8000;
    /* الهيدر الثابت + قوائم الحساب/الإشعارات فوق محتوى الصفحات وزر الشات */
    --z-app-header: 8400;
    --z-searchable-select: 8500;
    --z-page-overlay: 9000;
    --z-page-modal-stacked: 9100;
    --z-backtest-blocking: 9200;
    --z-api-key-modal: 9500;
    --z-toast: 10000;
    /* Bootstrap 5: فوق .layout (z-index منخفض) ولوحة الشات — وإلا يبقى backdrop فوق محتوى المودال */
    --z-bs-modal-backdrop: 11500;
    --z-bs-modal: 11550;
    /* عرض عمود المحتوى/الهيدر/الفوتر: عرض كامل — هوامش داخلية فقط */
    --bp-content-max: 100%;
    /* هوامش الصفحة الموحّدة — طبقة واحدة (main-content + nav-bar) */
    --bp-page-pad-x: clamp(0.75rem, 2vw, 1.15rem);
    --bp-page-pad-y: clamp(0.65rem, 1.5vw, 0.9rem);
    --bp-page-pad-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    --bp-shell-gap: clamp(0.75rem, 1.6vw, 1rem);
    --bp-card-pad: clamp(0.85rem, 1.8vw, 1.1rem);
    /* شريط أدوات الهيدر — ارتفاع وحدود موحّدة */
    --bp-header-ctrl-h: 2.375rem;
    --bp-header-ctrl-pad-x: 0.62rem;
    --bp-header-ctrl-border: rgba(var(--accent-rgb), 0.18);
    --bp-header-ctrl-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)), var(--bg-elevated);
    --bp-header-tools-gap: 0.4rem;
}

@media (max-width: 992px) {
    :root {
        --bp-content-max: 100%;
        --bp-page-pad-x: clamp(0.65rem, 4vw, 0.95rem);
        --bp-page-pad-y: clamp(0.6rem, 3vw, 0.8rem);
        --bp-page-pad-bottom: clamp(1rem, 4vw, 1.35rem);
        --bp-shell-gap: clamp(0.65rem, 3vw, 0.85rem);
        --bp-card-pad: clamp(0.75rem, 3.5vw, 0.95rem);
        --bp-mobile-pad-x: var(--bp-page-pad-x);
        --bp-mobile-pad-y: var(--bp-page-pad-y);
    }

    #app-header .nav-bar {
        padding: max(0.45rem, env(safe-area-inset-top, 0px)) var(--bp-page-pad-x) 0.45rem;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
    }

    #app-header .nav-brand {
        font-size: clamp(1rem, 3.8vw, 1.15rem);
        min-width: 0;
    }

    .main-content {
        padding: var(--bp-page-pad-y) var(--bp-page-pad-x) var(--bp-page-pad-bottom);
    }

    .app-footer {
        padding: 0.65rem var(--bp-page-pad-x) max(0.65rem, env(safe-area-inset-bottom, 0px));
    }

    .card {
        padding: clamp(1rem, 2.8vw, 1.2rem);
    }

    #app-header .theme-select {
        height: var(--bp-header-ctrl-h);
        min-height: var(--bp-header-ctrl-h);
        font-size: 0.76rem;
        max-width: min(10rem, 42vw);
        min-width: 0;
    }

    #app-header .lang-toggle {
        height: var(--bp-header-ctrl-h);
        min-height: var(--bp-header-ctrl-h);
        padding: 0 var(--bp-header-ctrl-pad-x);
        font-size: 0.76rem;
    }

    #app-header .nav-clock-pill-time {
        font-size: 0.95rem;
    }

    #app-header .font-size-btn {
        min-width: 2rem;
        min-height: 0;
        height: 100%;
    }

    #app-header .nav-actions-tools {
        padding-inline-start: 0.4rem;
        gap: 0.32rem;
    }

    /* iOS: منع تكبير الصفحة عند التركيز على الحقول */
    textarea.form-control,
    input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select.form-select {
        font-size: max(1rem, 16px);
    }
}

[data-theme="light"] {
    color-scheme: light;
    --bg-tertiary: #e7e5e4;
    --bg-primary: #f5f5f4;
    --bg-secondary: #e7e5e4;
    --bg-card: #ffffff;
    --bg-elevated: #fafaf9;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.14);
    --surface-border: rgba(0, 0, 0, 0.08);
    --surface-border-strong: rgba(0, 0, 0, 0.12);
    --surface-hover: rgba(0, 0, 0, 0.04);
    --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    --surface-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --border: var(--border-default);
    --border-focus: rgba(120, 113, 108, 0.6);
    --text-primary: #1c1917;
    --text-secondary: #57534e;
    --text-muted: #78716c;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 16px 40px rgba(15, 23, 42, 0.08);
    --shadow-card-hover: 0 22px 52px rgba(15, 23, 42, 0.12);
    --surface-glass: rgba(255, 255, 255, 0.78);
    --surface-glass-strong: rgba(255, 255, 255, 0.92);
    --btn-primary-fg: #1c1917;
    --shadow-gold: 0 0 40px rgba(var(--accent-rgb), 0.12);
    --info: #2563eb;
}

[data-theme="high-contrast"] {
    color-scheme: dark;
    --accent-rgb: 255, 215, 0;
    --accent-gradient-end: #ccaa00;
    --btn-primary-fg: #000000;
    --accent-soft: rgba(255, 215, 0, 0.22);
    --accent-glow: rgba(255, 215, 0, 0.18);
    --accent-dim: rgba(255, 215, 0, 0.45);
    --shadow-gold: 0 0 40px rgba(255, 215, 0, 0.12);
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: #111111;
    --bg-elevated: #1a1a1a;
    --border: #ffffff;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #b0b0b0;
    --accent: #ffd700;
    --success: #00ff00;
    --danger: #ff0000;
    --warning: #ffff00;
    --tp-ladder-tp-miss: #cbd5e1;
    --tp-ladder-sl-safe-color: #38bdf8;
    --info: #38bdf8;
}

[data-theme="gmaxira"] {
    color-scheme: dark;
    /* GMAXIRA — FinTech / Trading Dashboard: Navy + Cyan, with Emerald for live/success states. */
    --gmaxira-navy: #0a0e17;
    --gmaxira-graphite: #121826;
    --gmaxira-surface: #1a2234;
    --gmaxira-border: #2a3548;
    --gmaxira-silver: #c8d0dc;
    --gmaxira-cyan: #38bdf8;
    --gmaxira-emerald: #34d399;
    --gmaxira-red: #f87171;
    --gmaxira-amber: #fbbf24;
    --gmaxira-purple: #a78bfa;
    --gmaxira-pink: #f472b6;
    --gmaxira-orange: #fb923c;
    --gmaxira-cyan-alt: #22d3ee;
    --gmaxira-muted: #64748b;
    --gmaxira-site-meta: #0a1628;
    --accent-rgb: 56, 189, 248;
    --accent: var(--gmaxira-cyan);
    --accent-gradient-end: #2563eb;
    --btn-primary-gradient: linear-gradient(135deg, var(--gmaxira-cyan) 0%, #2563eb 100%);
    --btn-primary-fg: #06111f;
    --bg-primary: var(--gmaxira-navy);
    --bg-secondary: var(--gmaxira-graphite);
    --bg-card: var(--gmaxira-surface);
    --bg-elevated: #172033;
    --bg-tertiary: var(--gmaxira-site-meta);
    --border-subtle: rgba(42, 53, 72, 0.72);
    --border-default: var(--gmaxira-border);
    --border-strong: rgba(56, 189, 248, 0.26);
    --surface-border: rgba(42, 53, 72, 0.88);
    --surface-border-strong: rgba(56, 189, 248, 0.32);
    --surface-hover: rgba(56, 189, 248, 0.08);
    --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 18px 48px rgba(2, 8, 23, 0.38);
    --surface-shadow-lg: 0 20px 60px rgba(2, 8, 23, 0.54);
    --border: var(--border-default);
    --border-focus: rgba(56, 189, 248, 0.72);
    --accent-soft: rgba(var(--accent-rgb), 0.14);
    --accent-glow: rgba(var(--accent-rgb), 0.22);
    --accent-dim: rgba(var(--accent-rgb), 0.52);
    --text-primary: #e2e8f0;
    --text-secondary: var(--gmaxira-silver);
    --text-muted: #94a3b8;
    --shadow: 0 10px 36px rgba(2, 8, 23, 0.56);
    --shadow-gold: 0 0 42px rgba(var(--accent-rgb), 0.13);
    --success: var(--gmaxira-emerald);
    --danger: var(--gmaxira-red);
    --warning: var(--gmaxira-amber);
    --info: var(--gmaxira-cyan-alt);
    --chart-cyan: var(--gmaxira-cyan);
    --chart-emerald: var(--gmaxira-emerald);
    --chart-purple: var(--gmaxira-purple);
    --chart-amber: var(--gmaxira-amber);
    --chart-pink: var(--gmaxira-pink);
    --chart-orange: var(--gmaxira-orange);
}

/* ═══════════════════════════════════════════════════════════
   Unified page shell + nested panel tokens (trade list, dashboards)
   ═══════════════════════════════════════════════════════════ */
.bp-page,
.rpt-report-main,
.gmr-main {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 0 var(--bp-page-pad-bottom);
    box-sizing: border-box;
}

.rpt-hub-back-wrap {
    margin: 0 0 0.65rem;
    padding: 0;
}

.rpt-hub-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.rpt-hub-back-link:hover,
.rpt-hub-back-link:focus-visible {
    text-decoration: underline;
}

.bp-page-hero,
.rpt-report-hero,
.gmr-hero,
.monitor-hero {
    margin-bottom: 1rem;
    padding: clamp(1rem, 2.2vw, 1.35rem);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
        var(--bg-card);
    box-shadow: var(--shadow-card);
}

.bp-page-hero h1,
.rpt-report-hero h1,
.gmr-hero h1 {
    font-size: clamp(1.25rem, 2.5vw, 1.45rem);
    margin: 0;
    font-family: var(--font-display);
    color: var(--text-primary);
}

.bp-page-hero p,
.rpt-report-hero p,
.gmr-hero p {
    color: var(--text-secondary);
    font-size: .85rem;
    margin: .35rem 0 0;
    line-height: 1.45;
}

#tradeListSection,
.tl-themed {
    --tl-bg: var(--bg-secondary);
    --tl-card: var(--bg-card);
    --tl-text: var(--text-primary);
    --tl-muted: var(--text-muted);
    --tl-border: var(--border);
    --tl-primary: var(--accent);
    --tl-primary-soft: var(--accent-soft);
    --tl-success: var(--success);
    --tl-danger: var(--danger);
    --tl-info: var(--info);
    --tl-shadow: var(--shadow-card);
    --tl-surface-alt: color-mix(in srgb, var(--bg-elevated) 90%, var(--accent) 10%);
    --tl-warning-bg: color-mix(in srgb, var(--warning) 14%, var(--tl-card));
    --tl-warning-border: color-mix(in srgb, var(--warning) 45%, var(--tl-border));
    --tl-warning-text: var(--warning);
    --tl-highlight-bg: color-mix(in srgb, var(--warning) 10%, var(--tl-card));
    --tl-highlight-border: color-mix(in srgb, var(--warning) 35%, var(--tl-border));
    --tl-pf-ok-bg: color-mix(in srgb, var(--success) 18%, var(--tl-card));
    --tl-pf-mid-bg: color-mix(in srgb, var(--warning) 18%, var(--tl-card));
    --tl-pf-bad-bg: color-mix(in srgb, var(--danger) 18%, var(--tl-card));
    --tl-on-primary: var(--btn-primary-fg);
}

/* Strategy groups — section category accents (theme-aware) */
:root {
    --sg-cat-rules: var(--accent);
    --sg-cat-tpsl: var(--danger);
    --sg-cat-general: var(--info);
    --sg-cat-crt: #a78bfa;
    --sg-cat-orb: var(--warning);
    --sg-cat-oi: var(--tp-ladder-tp-hit);
    --sg-cat-cvd: var(--success);
    --sg-cat-delta: var(--danger);
    --sg-cat-aggr: var(--warning);
    --sg-cat-absorb: #5eb39e;
    --sg-cat-imbal: #c084fc;
    --sg-cat-vwap: var(--info);
    --sg-nav-condition: var(--tp-ladder-tp-hit);
    --sg-nav-gate: var(--tp-ladder-tp-hit);
    --sg-nav-confirm: var(--info);
    --sg-nav-strategy: var(--warning);
    --sg-nav-rule: var(--info);
    --sg-nav-tpsl: var(--danger);
    --sg-stocks-teal: var(--tp-ladder-tp-hit);
    --sg-stocks-blue: var(--info);
    --sg-stocks-orange: var(--warning);
    --sg-stocks-sky: #38bdf8;
    --sg-stocks-purple: #a78bfa;
}

/*
 * طوابع UTC | TR وحقول التاريخ: في واجهة عربية RTL تُعرض أرقاماً إنجليزية —
 * نفرض LTR ومحاذاة يسار حتى يبقى الترتيب قابلاً للقراءة كما في المصدر.
 */
.bp-datetime,
#app-header .nav-clock-pill-time,
#app-header .nav-clock-pill-date,
.feed-time,
.chat-fab-msg-meta,
.chat-fab-notif-meta,
.ts {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

[data-theme] .table td.bp-datetime,
[data-theme] .table th.bp-datetime,
.data-table td.bp-datetime,
.data-table th.bp-datetime,
.ea-table td.bp-datetime,
.ea-table th.bp-datetime {
    text-align: left;
}

[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="datetime-local"] {
    direction: ltr;
    text-align: left;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input.bp-datepicker-input,
.bt-datetime-input {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    min-width: 13.25rem;
    min-height: 48px;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    padding-inline-start: 2.45rem;
    padding-inline-end: 0.95rem;
}

input.bp-datepicker-input,
.bt-datetime-input {
    padding-inline: 0.95rem;
}

input[type="datetime-local"],
input.bp-datepicker-input[data-bp-datepicker="datetime"],
input.bp-datepicker-input[placeholder*="HH:mm"],
.bt-datetime-input {
    width: 100%;
    min-width: 17.5rem !important;
}

input.bp-datepicker-input[data-bp-datepicker="date"] {
    min-width: 13.25rem;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.72;
    margin-inline-start: -1.65rem;
    margin-inline-end: 0.35rem;
    padding: 0.25rem;
    border-radius: 999px;
    background-color: rgba(var(--accent-rgb), 0.08);
}

.date-row,
.custom-range-row,
.utc-filter-row {
    align-items: flex-end;
    flex-wrap: wrap;
}

.date-row .form-group:has(input.bp-datepicker-input),
.custom-range-row .form-group:has(input.bp-datepicker-input),
.utc-filter-row .form-group:has(input.bp-datepicker-input) {
    flex: 1 1 18rem !important;
    min-width: min(100%, 18rem) !important;
}

.date-row input.bp-datepicker-input,
.custom-range-row input.bp-datepicker-input,
.utc-filter-row input.bp-datepicker-input {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 760px) {
    input[type="datetime-local"],
    input.bp-datepicker-input[data-bp-datepicker="datetime"],
    input.bp-datepicker-input[placeholder*="HH:mm"],
    .bt-datetime-input {
        min-width: 100% !important;
    }
}

[data-theme="dark"] {
    color-scheme: dark;
}

/* Bootstrap 5.3: مزامنة ألوان المكوّنات مع ثيم التطبيق (بعد تعريف [data-theme=*] أعلاه) */
html[data-theme] {
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-bg: var(--bg-secondary);
    --bs-tertiary-color: var(--text-muted);
    --bs-tertiary-bg: var(--bg-tertiary);
    --bs-border-color: var(--border);
    --bs-card-bg: var(--bg-card);
    --bs-card-color: var(--text-primary);
    --bs-card-border-color: var(--border);
    --bs-card-cap-bg: var(--bg-secondary);
    --bs-card-cap-color: var(--text-primary);
    --bs-list-group-bg: var(--bg-card);
    --bs-list-group-color: var(--text-primary);
    --bs-list-group-border-color: var(--border);
    --bs-form-control-bg: var(--bg-elevated);
    --bs-form-control-color: var(--text-primary);
    --bs-form-control-border-color: var(--border);
    --bs-input-bg: var(--bg-elevated);
    --bs-input-color: var(--text-primary);
    --bs-input-border-color: var(--border);
    --bs-primary: var(--accent);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-btn-color: var(--btn-primary-fg);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-gradient-end);
    --bs-btn-hover-border-color: var(--accent-gradient-end);
    --bs-btn-active-bg: var(--accent-gradient-end);
    --bs-btn-active-border-color: var(--accent-gradient-end);
}

/* سلم حجم الخط: الافتراضي 14px (أصغر من المتصفح ~16px) + مستويات تصغير/تكبير */
html {
    font-size: 14px;
}

html[data-font-size="xsmall"] {
    font-size: 12px;
}

html[data-font-size="small"] {
    font-size: 13px;
}

html[data-font-size="large"] {
    font-size: 16px;
}

html[data-font-size="xlarge"] {
    font-size: 18px;
}

/* Focus indicators for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Skip to content — for screen readers */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--accent);
    color: var(--btn-primary-fg);
    font-weight: 600;
    border-radius: var(--radius-sm);
    z-index: 10000;
    transition: top 0.2s;
}

.skip-to-content:focus {
    top: 0.5rem;
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

[data-theme="gmaxira"] .skip-to-content {
    background: var(--btn-primary-gradient);
    color: var(--btn-primary-fg);
    border: 1px solid rgba(70, 88, 105, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-family: var(--font-sans);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans) !important;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}

::selection {
    background: rgba(var(--accent-rgb), 0.32);
    color: var(--text-primary);
}

html {
    scrollbar-color: rgba(var(--accent-rgb), 0.45) transparent;
}

/* Bootstrap 5: المودال و backdrop خارجياً فوق .layout (له z-index) وإلا يغطي الـ backdrop المحتوى */
.modal-backdrop {
    z-index: var(--z-bs-modal-backdrop) !important;
}

.modal {
    z-index: var(--z-bs-modal) !important;
}

/* عناوين رئيسية بخط Amiri للأناقة */
h1, h2, .hero h1, .card-header {
    font-family: var(--font-sans) !important;
}

.section-title {
    font-family: var(--font-display) !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--accent-rgb), 0.06), transparent),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(var(--accent-rgb), 0.03), transparent);
    pointer-events: none;
    z-index: 0;
}

[data-theme="gmaxira"] body::before {
    background:
        radial-gradient(ellipse 80% 50% at 50% -18%, rgba(56, 189, 248, 0.13), transparent 58%),
        radial-gradient(ellipse 48% 40% at 100% 0%, rgba(34, 211, 238, 0.10), transparent 54%),
        radial-gradient(ellipse 42% 34% at 0% 100%, rgba(52, 211, 153, 0.08), transparent 52%);
}

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    width: 100%;
    position: relative;
    z-index: 1;
    background: var(--bg-primary);
}

/* ═══════════════════════════════════════════════════════════
   هيدر موحد — Unified Header (مصدر واحد، لا يُستبدل)
   جميع الصفحات تستخدم #app-header + header.js
   ═══════════════════════════════════════════════════════════ */
/* sticky على #app-header وليس على .nav-bar فقط — حتى يبقى الشريط ثابتاً مع سكرول الصفحة الطويلة */
#app-header {
    isolation: isolate;
    position: sticky;
    top: 0;
    z-index: var(--z-app-header, 8400);
}

#app-header .nav-bar {
    position: relative;
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    padding: 0.5rem var(--bp-page-pad-x) 0.45rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.35rem;
    max-width: var(--bp-content-max);
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

/* صف واحد: الشعار + الساعات والأدوات — بمحاذاة عمودية واحدة */
#app-header .nav-bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
    width: 100%;
}

#app-header .nav-bar-start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex-shrink: 0;
}

[data-theme="light"] #app-header .nav-bar {
    background: var(--bg-card);
    box-shadow: none;
}

[data-theme="high-contrast"] #app-header .nav-bar {
    background: var(--bg-card);
    border-bottom-color: var(--border);
}

[data-theme="gmaxira"] #app-header .nav-bar {
    background: var(--bg-card);
    box-shadow: none;
    border-bottom-color: var(--border);
}

#app-header .nav-brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#app-header .nav-brand:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

#app-header .nav-brand svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

#app-header .nav-brand .nav-brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 0;
    flex-shrink: 0;
    object-fit: contain;
}

#app-header .nav-links {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.15rem 0 0.28rem;
    margin: 0;
    border-top: 1px solid rgba(var(--accent-rgb), 0.12);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

#app-header .nav-links-compact .nav-link,
#app-header .nav-links-compact a.nav-link {
    font-size: 0.76rem;
    font-weight: 500;
    padding: 0.28rem 0.48rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    line-height: 1.25;
}

#app-header .nav-links-sep {
    display: inline-block;
    width: 1px;
    height: 1rem;
    margin: 0 0.15rem;
    background: rgba(var(--accent-rgb), 0.22);
    flex-shrink: 0;
    align-self: center;
}

#app-header .nav-links .nav-link,
#app-header .nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem 0.85rem;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    cursor: pointer;
    transition: color 0.22s ease, background 0.22s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

#app-header .nav-links .nav-link::after,
#app-header .nav-links a::after {
    content: '';
    position: absolute;
    inset-inline: 0.65rem;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-gradient-end, var(--accent)));
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0.85;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    pointer-events: none;
}

#app-header .nav-links .nav-link:hover,
#app-header .nav-links a:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

@media (hover: hover) and (pointer: fine) {
    #app-header .nav-links .nav-link:hover,
    #app-header .nav-links a:hover {
        transform: translateY(-1px);
    }
}

#app-header .nav-links .nav-link:hover::after,
#app-header .nav-links a:hover::after,
#app-header .nav-links .nav-link.active::after,
#app-header .nav-links a.active::after {
    transform: scaleX(1);
}

#app-header .nav-links .nav-link.active,
#app-header .nav-links a.active {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 600;
}

#app-header .nav-links .nav-link:active,
#app-header .nav-links a:active {
    transform: translateY(0);
    transition-duration: 0.08s;
}

#app-header .nav-brand {
    cursor: pointer;
}

#app-header .nav-menu-toggle,
#app-header .notif-bell-btn,
#app-header .user-profile-trigger {
    cursor: pointer;
}

#app-header .nav-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
    /* لا overflow هنا: overflow-y:hidden كان يقصّ القوائم المطلقة (حساب/إشعارات) */
    overflow: visible;
}

/* تمرير أفقي للساعات فقط — القوائم المنسدلة خارج هذا الغلاف فلا تُقصّ */
#app-header .nav-actions-clock-scroll {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

#app-header .nav-actions > .notif-bell-wrap,
#app-header .nav-actions > .user-profile-dropdown,
#app-header .nav-actions > .nav-actions-tools,
#app-header .nav-actions-tools > .product-line-switch,
#app-header .nav-actions-tools > .lang-toggle,
#app-header .nav-actions-tools > .font-size-controls,
#app-header .nav-actions-tools > .theme-select {
    flex-shrink: 0;
    border-radius: 0;
}

/* تبديل سريع: عملات ↔ أسهم (نفس الصفحة بعد reload) */
#app-header .product-line-switch {
    display: inline-flex;
    align-items: stretch;
    height: var(--bp-header-ctrl-h);
    border: 1px solid var(--bp-header-ctrl-border);
    border-radius: 0;
    overflow: hidden;
    background: var(--bp-header-ctrl-bg);
    box-sizing: border-box;
}

#app-header .product-line-btn {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 0.68rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: var(--bp-header-ctrl-h);
}

#app-header .product-line-btn + .product-line-btn {
    border-inline-start: 1px solid var(--border);
}

#app-header .product-line-btn:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

#app-header .product-line-btn.active {
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end, var(--accent-dim)));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

[data-theme="light"] #app-header .nav-actions-tools > .lang-toggle,
[data-theme="light"] #app-header .nav-actions-tools > .theme-select,
[data-theme="light"] #app-header .nav-actions-tools > .font-size-controls,
[data-theme="light"] #app-header .nav-actions-tools > .product-line-switch,
[data-theme="light"] #app-header .nav-actions-tools > .user-profile-dropdown > .user-avatar-btn {
    background: linear-gradient(180deg, #ffffff, var(--bg-elevated));
    border-color: var(--surface-border);
}

[data-theme="light"] #app-header .product-line-btn.active {
    color: #fff;
}

@media (max-width: 520px) {
    #app-header .product-line-btn {
        font-size: 0.72rem;
        padding-inline: 0.52rem;
    }

    :root {
        --bp-header-ctrl-h: 2.25rem;
        --bp-header-tools-gap: 0.28rem;
    }

    #app-header .nav-actions-tools {
        padding-inline-start: 0.35rem;
        border-inline-start-width: 0;
    }
}

/* Product-line visibility: shared pages show crypto-only or stocks-only blocks */
html[data-product-line="stocks"] .pl-crypto-only,
html[data-product-line="stocks"] [data-product-line="crypto"],
html.product-line-stocks .pl-crypto-only,
html.product-line-stocks [data-product-line="crypto"] {
    display: none !important;
}

html[data-product-line="crypto"] .pl-stocks-only,
html[data-product-line="crypto"] [data-product-line="stocks"],
html.product-line-crypto .pl-stocks-only,
html.product-line-crypto [data-product-line="stocks"] {
    display: none !important;
}

/* ساعتان: تركيا (TRT) + غرينتش (UTC) */
#app-header .nav-clocks {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-inline-end: 0.1rem;
    flex-shrink: 0;
}

#app-header .nav-clock-pill {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border-radius: 0;
    background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#app-header .nav-clock-pill:hover {
    border-color: var(--accent-dim);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 18px rgba(0, 0, 0, 0.18);
}

#app-header .nav-clock-pill-accent {
    width: 3px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-gradient-end) 100%);
    opacity: 0.95;
}

#app-header .nav-clock-gmt .nav-clock-pill-accent {
    background: linear-gradient(180deg, #7dd3fc 0%, #0ea5e9 55%, #0369a1 100%);
}

[data-theme="gmaxira"] #app-header .nav-clock-gmt .nav-clock-pill-accent {
    background: linear-gradient(180deg, #d8e2ea 0%, #8a9bab 48%, #5a6b7a 100%);
}

#app-header .nav-clock-pill-inner {
    padding: 0.22rem 0.5rem 0.28rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    line-height: 1.15;
    min-width: 4.35rem;
}

#app-header .nav-clock-pill-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

#app-header .nav-clock-pill-time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

#app-header .nav-clock-pill-date {
    font-size: 0.58rem;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.92;
    white-space: nowrap;
}

#app-header .nav-clock-pill-sub {
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: 0.08rem;
    opacity: 0.9;
}

[data-theme="light"] #app-header .nav-clock-pill {
    background: linear-gradient(145deg, #ffffff 0%, var(--bg-elevated) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="high-contrast"] #app-header .nav-clock-pill {
    border-width: 2px;
}

@media (max-width: 380px) {
    #app-header .nav-clock-pill-time {
        font-size: 0.8rem;
    }

    #app-header .nav-clock-pill-date {
        display: none;
    }
}

#app-header .lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: var(--bp-header-ctrl-h);
    padding: 0 var(--bp-header-ctrl-pad-x);
    font-size: 0.78rem;
    font-weight: 650;
    background: var(--bp-header-ctrl-bg);
    border: 1px solid var(--bp-header-ctrl-border);
    border-radius: 0;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}

#app-header .lang-toggle-globe {
    flex-shrink: 0;
    opacity: 0.85;
}

#app-header .lang-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

#app-header .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    color: var(--text-primary);
}

#app-header .nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    margin: 0 auto;
    transition: 0.3s;
}

#app-header .nav-toggle-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#app-header .nav-toggle-active span:nth-child(2) {
    opacity: 0;
}

#app-header .nav-toggle-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
    /* صف 1: الشعار + همبرغر — صف 2: الساعات بعرض كامل ثم أدوات بمحاذاة النهاية (أقل ازدحاماً على الجوال) */
    #app-header .nav-bar-top {
        flex-wrap: wrap;
        row-gap: 0.45rem;
        column-gap: 0.5rem;
        align-items: center;
    }

    #app-header .nav-bar-start {
        width: 100%;
        justify-content: space-between;
        box-sizing: border-box;
    }

    #app-header .nav-actions {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        row-gap: 0.4rem;
        column-gap: 0.35rem;
    }

    #app-header .nav-actions-clock-scroll {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    #app-header .nav-clocks {
        width: 100%;
        justify-content: center;
        gap: 0.35rem;
        flex-wrap: nowrap;
    }

    /* ساعات مدمجة: سطر واحد تقريباً، أقل ارتفاعاً */
    #app-header .nav-clock-pill-inner {
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.4rem;
        row-gap: 0;
        padding: 0.12rem 0.4rem 0.14rem 0.45rem;
    }

    #app-header .nav-clock-pill-label {
        font-size: 0.55rem;
        margin: 0;
    }

    #app-header .nav-clock-pill-time {
        font-size: 0.88rem;
    }

    #app-header .nav-clock-pill-date,
    #app-header .nav-clock-pill-sub {
        display: none;
    }

    #app-header .nav-clock-pill {
        flex-shrink: 0;
    }

    #app-header .nav-brand span {
        min-width: 0;
        max-width: min(42vw, 10rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #app-header .nav-toggle {
        display: flex;
        min-width: 44px;
        min-height: 44px;
    }

    #app-header .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        flex-direction: column;
        background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
        padding: 0.8rem clamp(0.75rem, 3.8vw, 1.1rem) max(0.9rem, env(safe-area-inset-bottom, 0px));
        gap: 0.42rem;
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
        max-height: min(70vh, 28rem);
        overflow-x: visible;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: calc(var(--z-app-header, 8400) + 2);
    }

    #app-header .nav-links.nav-links-open {
        display: flex;
        animation: bp-mobile-menu-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    #app-header .nav-links-sep {
        display: none;
    }

    #app-header .nav-links .nav-link,
    #app-header .nav-links a {
        padding: 0.9rem 1rem;
        min-height: 50px;
        width: 100%;
        text-align: right;
        font-size: 0.95rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(var(--accent-rgb), 0.08);
        background: rgba(var(--accent-rgb), 0.035);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    }

    #app-header .nav-links .nav-link::before,
    #app-header .nav-links a::before {
        content: '';
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 999px;
        background: currentColor;
        opacity: 0.42;
        flex: 0 0 auto;
    }

    #app-header .nav-links .nav-link.active,
    #app-header .nav-links a.active {
        border-color: rgba(var(--accent-rgb), 0.32);
        box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.1) inset;
    }

    [dir="ltr"] #app-header .nav-links .nav-link,
    [dir="ltr"] #app-header .nav-links a {
        text-align: left;
    }

    body.nav-menu-open {
        overflow: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════
   Cross-page UX audit polish — clearer hierarchy and utility
   ═══════════════════════════════════════════════════════════ */
.layout {
    min-height: 100vh;
    background: var(--bg-primary);
}

.main-content {
    padding: var(--bp-page-pad-y) var(--bp-page-pad-x) var(--bp-page-pad-bottom);
    box-sizing: border-box;
}

.page-header,
.page-title,
.adm-hero,
.reports-toolbar,
.backtest-form-panel,
.filter-panel,
.dash-page-head,
.dash-block,
.section {
    scroll-margin-top: 7rem;
}

.section,
.dashboard-panel,
.dash-panel-box,
.bt-card,
.backtest-form-panel,
.profile-card,
.reports-card,
.sg-card,
.panel,
.section-card,
.form-section,
.filter-panel,
.summary-card,
.portal-card {
    border-radius: var(--radius-lg);
}

.stat-card,
.dash-hero-kpi-tile,
.stats-card,
.metric-card,
.kpi-card {
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-surface);
    background: var(--bg-card);
    box-shadow: none;
    padding: var(--bp-card-pad);
}

.stat-card .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.stat-card .value {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s;
}

.stat-card .value.positive {
    color: var(--success);
}

.stat-card .value.negative {
    color: var(--danger);
}

.stat-card .value,
.dash-hero-kpi-value,
.metric-value,
.kpi-value,
.num {
    font-variant-numeric: tabular-nums;
}

.tabs,
.reports-page-tabs,
.dash-pages,
.dash-period-pills,
.admin-tabs,
.sg-tabs {
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    border-radius: 999px;
    padding: 0.28rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.tab,
.reports-page-tab,
.dash-page-btn,
.dash-period-pill,
.admin-tab,
.sg-tab {
    border-radius: 999px;
    font-weight: 850;
}

.tab.active,
.reports-page-tab.active,
.dash-page-btn.is-active,
.dash-period-pill.active,
.admin-tab.active,
.sg-tab.active {
    color: var(--btn-primary-fg);
    background: var(--btn-primary-gradient, linear-gradient(135deg, var(--accent), var(--accent-gradient-end)));
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.14);
}

.table-wrap,
.dash-table-scroll,
.data-table-wrap,
.reports-table-wrap,
.bt-table-wrap {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent),
        var(--bg-card);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

th,
.dash-data-table th {
    font-weight: 850;
    letter-spacing: 0.035em;
}

.form-section,
details.form-section,
.panel-collapsible,
.bt-section,
.filter-panel {
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.045), transparent 60%),
        var(--bg-card);
}

details > summary,
.panel-collapsible > summary,
.dash-details-summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 850;
}

.error-msg,
.success-msg,
.warning-msg,
.info-msg,
.dash-callout-analytics,
.pnl-series-footnote {
    border-radius: var(--radius-md);
    line-height: 1.65;
}

@media (max-width: 760px) {
    .tabs,
    .reports-page-tabs,
    .dash-pages,
    .dash-period-pills,
    .admin-tabs,
    .sg-tabs {
        border-radius: var(--radius-lg);
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar,
    .reports-page-tabs::-webkit-scrollbar,
    .dash-pages::-webkit-scrollbar,
    .dash-period-pills::-webkit-scrollbar,
    .admin-tabs::-webkit-scrollbar,
    .sg-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab,
    .reports-page-tab,
    .dash-page-btn,
    .dash-period-pill,
    .admin-tab,
    .sg-tab {
        white-space: nowrap;
    }
}

@keyframes bp-mobile-menu-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════
   Header UX refresh — cleaner brand, actions, and navigation
   ═══════════════════════════════════════════════════════════ */
#app-header {
    padding: max(0.35rem, env(safe-area-inset-top, 0px)) 0 0;
}

#app-header .nav-bar {
    max-width: 100%;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: 0;
    padding: 0.5rem var(--bp-page-pad-x) 0.45rem;
    gap: 0.5rem;
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.085), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        color-mix(in srgb, var(--bg-card) 92%, transparent);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

[data-theme="light"] #app-header .nav-bar {
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.09), transparent 35%),
        rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="gmaxira"] #app-header .nav-bar {
    background:
        radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.16), transparent 36%),
        rgba(10, 14, 23, 0.86);
}

#app-header .nav-bar-top {
    padding: 0;
    gap: 0.75rem;
}

#app-header .nav-brand {
    min-height: 46px;
    padding: 0.36rem 0.72rem;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: 0;
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.11), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#app-header .nav-brand::after {
    content: '';
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10);
    flex: 0 0 auto;
}

#app-header .nav-brand .nav-brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 0;
    box-shadow: none;
}

#app-header .nav-brand span {
    font-weight: 850;
    letter-spacing: -0.02em;
}

#app-header .nav-actions {
    gap: 0.55rem;
}

/* مجموعة أدوات العرض — فصل بصري عن الساعات */
#app-header .nav-actions-tools {
    display: inline-flex;
    align-items: center;
    gap: var(--bp-header-tools-gap);
    flex-shrink: 0;
    margin-inline-start: 0.15rem;
    padding-inline-start: 0.55rem;
    border-inline-start: 1px solid rgba(var(--accent-rgb), 0.14);
}

#app-header .nav-actions-tools > .lang-toggle,
#app-header .nav-actions-tools > .theme-select,
#app-header .nav-actions-tools > .font-size-controls,
#app-header .nav-actions-tools > .product-line-switch,
#app-header .nav-actions > .notif-bell-wrap > .notif-bell-btn,
#app-header .nav-actions-tools > .user-profile-dropdown > .user-avatar-btn {
    height: var(--bp-header-ctrl-h);
    min-height: var(--bp-header-ctrl-h);
    border-radius: 0;
    border-color: var(--bp-header-ctrl-border);
    background: var(--bp-header-ctrl-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
}

#app-header .nav-actions-tools .theme-select {
    padding-inline: var(--bp-header-ctrl-pad-x) 1.85rem;
    font-weight: 700;
    line-height: 1.2;
}

#app-header .nav-actions-tools .font-size-controls {
    display: inline-flex;
    align-items: stretch;
    height: var(--bp-header-ctrl-h);
    padding: 0;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--bp-header-ctrl-border);
    background: var(--bp-header-ctrl-bg);
    box-sizing: border-box;
}

#app-header .nav-actions-tools .font-size-btn {
    border-radius: 0;
    border: 0;
    background: transparent;
    height: 100%;
    min-width: 2.15rem;
    padding: 0 0.48rem;
}

#app-header .nav-clock-pill {
    border-radius: 0;
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.075), rgba(255, 255, 255, 0.02)),
        var(--bg-elevated);
    border-color: rgba(var(--accent-rgb), 0.16);
}

#app-header .nav-clock-pill-inner {
    min-width: 4.8rem;
    padding: 0.28rem 0.58rem 0.32rem 0.62rem;
}

#app-header .nav-clock-pill-time {
    font-size: 0.98rem;
    font-weight: 750;
}

#app-header .nav-links {
    gap: 0.22rem;
    padding: 0.42rem 0.1rem 0.08rem;
    border-top-color: rgba(var(--accent-rgb), 0.11);
    scrollbar-width: none;
}

#app-header .nav-links::-webkit-scrollbar {
    display: none;
}

#app-header .nav-links-compact .nav-link,
#app-header .nav-links-compact a.nav-link,
#app-header .nav-links .nav-link,
#app-header .nav-links a {
    border: 1px solid transparent;
    border-radius: 0;
    padding: 0.44rem 0.72rem;
    font-weight: 800;
    color: var(--text-secondary);
}

#app-header .nav-links .nav-link::after,
#app-header .nav-links a::after {
    display: none;
}

#app-header .nav-links .nav-link:hover,
#app-header .nav-links a:hover,
#app-header .nav-links .nav-link.active,
#app-header .nav-links a.active {
    border-color: rgba(var(--accent-rgb), 0.18);
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0.055));
    color: var(--text-primary);
}

#app-header .nav-links .nav-link.active,
#app-header .nav-links a.active {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 8px 22px rgba(0, 0, 0, 0.10);
}

#app-header .nav-toggle {
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.11), rgba(var(--accent-rgb), 0.035));
    border-color: rgba(var(--accent-rgb), 0.22);
}

@media (max-width: 900px) {
    #app-header {
        padding-inline: var(--bp-mobile-pad-x, 0.7rem);
    }

    #app-header .nav-bar {
        border-radius: 0;
        padding: 0.45rem var(--bp-page-pad-x) 0.4rem;
    }

    #app-header .nav-actions {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.1rem;
        scrollbar-width: none;
    }

    #app-header .nav-actions::-webkit-scrollbar {
        display: none;
    }

    #app-header .nav-actions-clock-scroll {
        flex: 0 0 auto;
        max-width: none;
        overflow: visible;
    }

    #app-header .nav-clocks {
        width: auto;
        justify-content: flex-start;
    }

    #app-header .nav-actions-tools .theme-select {
        max-width: 9.2rem;
    }

    #app-header .nav-actions-tools {
        flex-shrink: 0;
    }

    #app-header .nav-links {
        inset-inline: 0;
        top: calc(100% + 0.45rem);
        border: 1px solid rgba(var(--accent-rgb), 0.18);
        border-radius: 0;
        background:
            radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 16rem),
            linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
        padding: 0.7rem;
        gap: 0.48rem;
    }

    #app-header .nav-links .nav-link,
    #app-header .nav-links a {
        border-radius: 0;
        background: rgba(255, 255, 255, 0.032);
        border-color: rgba(var(--accent-rgb), 0.10);
        font-weight: 850;
    }
}

#app-header .font-size-controls {
    display: flex;
    align-items: stretch;
    gap: 0;
}

#app-header .font-size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 0.5rem;
    font-size: 0.76rem;
    font-weight: 650;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    height: 100%;
    box-sizing: border-box;
}

#app-header .font-size-btn + .font-size-btn {
    border-inline-start: 1px solid var(--bp-header-ctrl-border);
}

#app-header .font-size-btn svg {
    display: none;
}

#app-header .font-size-btn .font-size-btn-label {
    line-height: 1;
}

#app-header .font-size-btn:hover {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
}

#app-header .font-size-btn.active {
    color: var(--accent);
    background: var(--accent-soft);
}

#app-header .font-size-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

#app-header .theme-select {
    min-width: 7.25rem;
    max-width: 10rem;
    height: var(--bp-header-ctrl-h);
    min-height: var(--bp-header-ctrl-h);
    padding: 0 var(--bp-header-ctrl-pad-x);
    padding-inline-end: 1.85rem;
    font-size: 0.76rem;
    font-weight: 650;
    font-family: inherit;
    background: var(--bp-header-ctrl-bg);
    border: 1px solid var(--bp-header-ctrl-border);
    border-radius: 0;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
    text-align: start;
    line-height: 1.2;
    box-sizing: border-box;
}

#app-header .theme-select:hover,
#app-header .theme-select:focus {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-soft);
}

#app-header .theme-select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="gmaxira"] #app-header .theme-select {
    background-color: var(--gmaxira-graphite);
    border-color: var(--gmaxira-border);
    color: var(--gmaxira-silver);
}

[data-theme="gmaxira"] #app-header .theme-select:hover,
[data-theme="gmaxira"] #app-header .theme-select:focus {
    border-color: rgba(56, 189, 248, 0.72);
    color: var(--gmaxira-cyan);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18), 0 8px 26px rgba(56, 189, 248, 0.08);
}

[data-theme="gmaxira"] #app-header .theme-select option {
    background-color: #0b111b;
    color: var(--gmaxira-silver);
}

/* User profile dropdown in header */
#app-header .user-profile-dropdown {
    position: relative;
}

#app-header .user-avatar-btn {
    min-width: var(--bp-header-ctrl-h);
    width: auto;
    height: var(--bp-header-ctrl-h);
    padding: 0 0.55rem;
    border-radius: 0;
    border: 1px solid var(--bp-header-ctrl-border);
    background: var(--bp-header-ctrl-bg);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.74rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}

#app-header .user-avatar-btn .user-avatar-hint-ic {
    opacity: 0.7;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

#app-header .user-avatar-btn .user-avatar-initials {
    line-height: 1;
    letter-spacing: -0.02em;
}

#app-header .user-avatar-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

#app-header .user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 0.35rem 0;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

#app-header .user-profile-dropdown.open .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

#app-header .user-profile-dropdown.open .user-avatar-btn {
    background: var(--accent-soft);
}

#app-header .user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    transition: background 0.15s;
    pointer-events: auto;
}

#app-header .user-dropdown-item[href] {
    cursor: pointer;
}

#app-header .user-dropdown-item:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

#app-header .user-dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.8;
}

#app-header .user-dropdown-logout {
    color: var(--danger);
}

#app-header .user-dropdown-logout:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

[dir="ltr"] #app-header .user-dropdown-menu {
    right: auto;
    left: 0;
}

[dir="ltr"] #app-header .user-dropdown-item {
    text-align: left;
}

.main-content {
    flex: 1;
    min-width: 0; /* flex child: allow inner overflow-x (tables) to scroll on narrow viewports */
    padding: clamp(1rem, 2vw, 1.65rem);
    max-width: var(--bp-content-max);
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.card {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-surface);
    padding: var(--bp-card-pad);
    box-shadow: var(--surface-shadow);
}

[data-theme="gmaxira"] .card {
    box-shadow: var(--surface-shadow);
}

.card-header {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Unified section styling across all pages */
.section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.section-title svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
    flex-shrink: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    min-height: 40px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* زر أساسي مع أيقونة + نص */
.btn-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.btn-inline-icon svg {
    flex-shrink: 0;
    width: 1.05em;
    height: 1.05em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
    color: var(--btn-primary-fg);
}

[data-theme="gmaxira"] .btn-primary {
    background: var(--btn-primary-gradient) !important;
    color: var(--btn-primary-fg) !important;
    border: 1px solid transparent !important;
    box-shadow: 0 10px 28px rgba(56, 189, 248, 0.20) !important;
    filter: none;
}

[data-theme="gmaxira"] .btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 14px 36px rgba(56, 189, 248, 0.26) !important;
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* حقول Bootstrap على جميع الثيمات */
.form-control,
.form-select {
    background-color: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    min-height: 40px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-glow);
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.input, .select {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    min-height: 40px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.input:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    display: block;
}

.form-group {
    margin-bottom: 1rem;
}

.err-msg {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.success-msg {
    color: var(--success);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

th, td {
    padding: 0.6rem 0.9rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    background: rgba(var(--accent-rgb), 0.04);
    position: sticky;
    top: 0;
    z-index: 1;
}

tr:hover td {
    background: var(--accent-soft);
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.badge-warning {
    background: rgba(234, 179, 8, 0.2);
    color: var(--warning);
}

[data-theme="gmaxira"] .badge-success {
    background: rgba(94, 179, 158, 0.2);
    color: var(--success);
}

[data-theme="gmaxira"] .badge-danger {
    background: rgba(196, 122, 130, 0.2);
    color: var(--danger);
}

[data-theme="gmaxira"] .badge-warning {
    background: rgba(190, 160, 102, 0.22);
    color: var(--warning);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* ═══════════════════════════════════════════════════════════
   2026 UX refresh — shared polish for static pages
   ═══════════════════════════════════════════════════════════ */
.dashboard-panel,
.dash-panel-box,
.bt-card,
.backtest-form-panel,
.adm-hero,
.adm-nav,
.profile-card,
.reports-card,
.sg-card,
.panel,
.section-card {
    border-color: rgba(var(--accent-rgb), 0.18);
    box-shadow: var(--shadow-card);
}

.dashboard-panel,
.dash-panel-box,
.bt-card,
.adm-hero,
.profile-card,
.reports-card,
.sg-card,
.panel,
.section-card {
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.055), transparent 58%),
        var(--bg-card);
}

.card-header,
.section-title,
.dash-page-title,
.dash-block-label,
.bt-card-title {
    letter-spacing: -0.01em;
}

.btn,
button,
a.nav-link {
    touch-action: manipulation;
}

.btn-primary,
.dash-btn-refresh,
.dash-page-btn.is-active {
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.18);
}

.btn-secondary,
.btn-outline-secondary,
.dash-page-btn,
.adm-nav__link {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
}

.form-control:hover,
.form-select:hover,
.input:hover,
.select:hover {
    border-color: rgba(var(--accent-rgb), 0.34);
}

.badge,
.dash-pill,
.adm-status-pill {
    border: 1px solid rgba(var(--accent-rgb), 0.18);
}

@media (max-width: 700px) {
    .main-content {
        padding-inline: var(--bp-mobile-pad-x, 0.8rem);
    }

    .card,
    .dashboard-panel,
    .dash-panel-box,
    .bt-card,
    .backtest-form-panel,
    .adm-hero,
    .panel,
    .section-card {
        border-radius: var(--radius-lg);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
    }

    .btn,
    .form-control,
    .form-select,
    .input,
    .select {
        min-height: 44px;
    }

    th, td {
        padding: 0.58rem 0.7rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   Gmaxira UX System — stronger page hierarchy and details
   ═══════════════════════════════════════════════════════════ */
.main-content {
    gap: clamp(1rem, 2vw, 1.4rem);
}

.main-content > h1:first-child,
.main-content > .page-title:first-child,
.main-content > .page-header:first-child,
.main-content > .h4:first-child {
    position: relative;
    margin-bottom: 1rem;
    padding: clamp(1rem, 2.2vw, 1.35rem);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
        var(--bg-card);
    box-shadow: var(--shadow-card);
}

.section,
.dashboard-panel,
.dash-panel-box,
.bt-card,
.adm-hero,
.adm-nav,
.profile-card,
.reports-card,
.sg-card,
.panel,
.section-card,
.form-section,
.filter-panel,
.summary-card {
    position: relative;
    overflow: clip;
}

.section::before,
.dashboard-panel::before,
.dash-panel-box::before,
.bt-card::before,
.panel::before,
.section-card::before,
.filter-panel::before,
.summary-card::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.38), transparent);
    opacity: 0.72;
    pointer-events: none;
}

.card,
.dashboard-panel,
.dash-panel-box,
.bt-card,
.panel,
.section-card,
.summary-card {
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .card:hover,
    .dashboard-panel:hover,
    .dash-panel-box:hover,
    .bt-card:hover,
    .panel:hover,
    .section-card:hover,
    .summary-card:hover {
        border-color: rgba(var(--accent-rgb), 0.32);
        box-shadow: var(--shadow-card-hover);
    }
}

.card-header,
.section-title,
.dash-zone-title,
.dash-page-title,
.dash-block-label,
.bt-card-title,
.adm-hero__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.2;
}

.card-header::before,
.section-title::before,
.dash-zone-title::before,
.dash-page-title::before,
.dash-block-label::before,
.bt-card-title::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08);
    flex: 0 0 auto;
}

[dir="ltr"] .card-header,
[dir="ltr"] .section-title,
[dir="ltr"] .dash-zone-title,
[dir="ltr"] .dash-page-title,
[dir="ltr"] .dash-block-label,
[dir="ltr"] .bt-card-title {
    text-align: left;
}

.table-wrap table,
.data-table,
.ea-table,
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrap th:first-child,
.table-wrap td:first-child {
    padding-inline-start: 1rem;
}

.table-wrap th:last-child,
.table-wrap td:last-child {
    padding-inline-end: 1rem;
}

.table-wrap tbody tr,
.data-table tbody tr,
.ea-table tbody tr,
.table tbody tr {
    transition: background 0.16s ease, transform 0.16s ease;
}

.table-wrap tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) td,
.ea-table tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.012);
}

.form-group,
.mb-3,
.input-group,
.strategy-group-controls {
    min-width: 0;
}

label,
.label,
.form-label {
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.form-control,
.form-select,
.input,
.select,
textarea {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline-secondary,
button[type="button"],
button[type="submit"] {
    border-radius: 0 !important;
    font-weight: 800;
}

.btn-danger {
    border-radius: 0 !important;
}

.badge,
.dash-pill,
.adm-status-pill,
.status-pill,
.chip,
.tag {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.empty-state,
.notif-empty {
    border: 1px dashed rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-rgb), 0.035);
}

@media (max-width: 760px) {
    .main-content > h1:first-child,
    .main-content > .page-title:first-child,
    .main-content > .page-header:first-child,
    .main-content > .h4:first-child {
        padding: 0.95rem;
        border-radius: var(--radius-lg);
    }

    .table-wrap {
        margin-inline: calc(-1 * var(--bp-mobile-pad-x, 0.8rem));
        border-inline: 0;
        border-radius: 0;
    }

    .table-wrap table {
        min-width: 720px;
    }

    .btn,
    button[type="button"],
    button[type="submit"] {
        min-height: 46px;
    }
}

@media (max-width: 900px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .grid-4, .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* API Key Modal & Logout */
.api-key-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: var(--z-api-key-modal);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.api-key-modal-overlay.show {
    display: flex;
}

.api-key-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: 100%;
    max-width: 420px;
}

.api-key-modal h3 {
    margin-bottom: 0.75rem;
    color: var(--accent);
}

.api-key-modal-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.api-key-modal input {
    width: 100%;
    margin-bottom: 1rem;
}

.api-key-modal-actions {
    display: flex;
    gap: 0.5rem;
}

.api-key-modal-divider {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 1rem 0 0.75rem;
}

.api-key-telegram-link {
    display: inline-block;
    text-align: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.api-key-telegram-link:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.api-key-logout {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
}

.api-key-logout:hover {
    color: var(--danger);
    border-color: var(--danger);
}

/* Shared toast */
.blueprint-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    z-index: var(--z-toast);
    box-shadow: var(--shadow);
    animation: blueprint-toast-in 0.3s ease;
}

.blueprint-toast.success {
    background: var(--success);
    color: #fff;
}

.blueprint-toast.error {
    background: var(--danger);
    color: #fff;
}

.blueprint-toast-snack {
    min-width: 280px;
    max-width: 90vw;
    padding: 1rem 1.5rem;
}

/* Smart alerts (SSE) — in-page only, softer than success/danger trade toasts */
.blueprint-toast.smart-alert-snack {
    background: var(--accent-soft, rgba(99, 102, 241, 0.12));
    color: var(--text, #1e293b);
    border: 1px solid rgba(99, 102, 241, 0.28);
}

.blueprint-toast-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.blueprint-toast-body {
    font-size: 0.85rem;
    opacity: 0.95;
}

@keyframes blueprint-toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Code/mono */
code, .mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.empty-state {
    text-align: center;
    padding: 2rem 3rem;
    color: var(--text-muted);
}

.users-container {
    min-height: 60px;
}

/* ═══════════════════════════════════════════════════════════
   فوتر موحد — Unified Footer
   ═══════════════════════════════════════════════════════════ */
.app-footer {
    margin-top: auto;
    padding: 0.65rem var(--bp-page-pad-x) max(0.65rem, env(safe-area-inset-bottom, 0px));
    border: 0;
    background: transparent;
    text-align: center;
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.footer-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    min-height: 38px;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
        rgba(255, 255, 255, 0.018);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.footer-brand {
    color: var(--accent);
    font-weight: 850;
}

.footer-sep {
    opacity: 0.42;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-link:hover {
    color: var(--accent);
}

@media (max-width: 560px) {
    .footer-inner {
        border-radius: var(--radius-lg);
        width: 100%;
        gap: 0.3rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   Notification Bell — جرس الإشعارات
   ═══════════════════════════════════════════════════════════ */
.notif-bell-wrap {
    position: relative;
}

.notif-bell-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 8px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: color 0.2s, background 0.2s;
}

.notif-bell-btn:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 1100;
    overflow: hidden;
}

[dir="rtl"] .notif-dropdown {
    right: auto;
    left: 0;
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    font-weight: 600;
}

.notif-read-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--accent);
    padding: 0;
    font-family: inherit;
}

.notif-read-all-btn svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.notif-read-all-btn:hover {
    text-decoration: underline;
}

.notif-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: var(--accent-soft);
}

.notif-item.unread {
    background: var(--accent-glow);
}

.notif-item.unread::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 0 4px 4px 0;
}

[dir="ltr"] .notif-item.unread::before {
    right: auto;
    left: 0;
    border-radius: 4px 0 0 4px;
}

.notif-item-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.notif-item-body {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item-time {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.notif-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-bottom: 0.1rem;
}

.notif-type-TRADE_OPENED {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.notif-type-NO_TRADE {
    background: rgba(234, 179, 8, 0.2);
    color: var(--warning);
}

.notif-type-ADMIN_MESSAGE {
    background: var(--accent-soft);
    color: var(--accent);
}

.notif-type-SYSTEM {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.notif-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════
   Floating Chat Button — زر المحادثة العائم (شبيه تيليجرام)
   ═══════════════════════════════════════════════════════════ */
.chat-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--btn-primary-fg);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-chat-fab);
    transition: transform 0.2s, box-shadow 0.2s;
}

[dir="rtl"] .chat-fab {
    right: auto;
    left: 1.5rem;
}

.chat-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.5);
}

[data-theme="gmaxira"] .chat-fab {
    background: var(--btn-primary-gradient);
    color: var(--btn-primary-fg);
    border: 1px solid rgba(70, 88, 105, 0.48);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

[data-theme="gmaxira"] .chat-fab:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.chat-fab svg {
    width: 28px;
    height: 28px;
}

.chat-fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

[dir="rtl"] .chat-fab-badge {
    right: auto;
    left: -2px;
}

.chat-fab-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 95vw;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    z-index: calc(var(--z-chat-fab) + 1);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

[dir="rtl"] .chat-fab-panel {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
}

.chat-fab-panel.open {
    transform: translateX(0);
}

[dir="rtl"] .chat-fab-panel.open {
    transform: translateX(0);
}

.chat-fab-panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.chat-fab-panel-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.chat-fab-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem;
    color: var(--text-muted);
    border-radius: 6px;
}

.chat-fab-panel-close:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.chat-fab-panel-feed {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-fab-msg {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    max-width: 90%;
}

.chat-fab-msg.in {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
    align-self: flex-start;
}

.chat-fab-msg.out {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    align-self: flex-end;
}

.chat-fab-notif {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.chat-fab-notif.unread {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.chat-fab-notif-smart {
    border-inline-start: 4px solid var(--accent);
}

.chat-fab-msg-meta, .chat-fab-notif-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* تنسيق محتوى الرسائل (HTML آمن) */
.chat-fab-msg-body, .chat-fab-notif-body, .chat-msg-body {
    word-wrap: break-word;
    line-height: 1.5;
}

.chat-fab-msg-body code, .chat-fab-notif-body code, .chat-msg-body code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.85em;
    padding: 0.15em 0.4em;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 4px;
    border: 1px solid var(--border);
}

.chat-fab-msg-body pre, .chat-fab-notif-body pre, .chat-msg-body pre {
    margin: 0.5rem 0;
    padding: 0.75rem;
    overflow-x: auto;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.85rem;
}

.chat-fab-msg-body a, .chat-fab-notif-body a, .chat-msg-body a {
    color: var(--accent);
    text-decoration: none;
}

.chat-fab-msg-body a:hover, .chat-fab-notif-body a:hover, .chat-msg-body a:hover {
    text-decoration: underline;
}

.chat-fab-panel-input-row {
    padding: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    position: relative;
}

.chat-fab-panel-input-row input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.chat-fab-panel-input-row input:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-fab-panel-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.chat-fab-no-linked {
    padding: 1rem;
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.chat-fab-panel-suggestions {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex-shrink: 0;
}

.chat-fab-sugg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: start;
}

.chat-fab-sugg-chip svg {
    flex-shrink: 0;
    opacity: 0.75;
}

.chat-fab-sugg-chip-text {
    min-width: 0;
}

.chat-fab-sugg-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.chat-fab-msg-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.chat-fab-copy-btn {
    padding: 0.2rem 0.35rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    font-size: 0.85rem;
}

.chat-fab-copy-btn:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.chat-fab-quality-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.chat-fab-quality-high {
    background: color-mix(in srgb, var(--success) 25%, transparent);
    color: var(--success);
}

.chat-fab-quality-medium {
    background: color-mix(in srgb, var(--warning) 25%, transparent);
    color: var(--warning);
}

.chat-fab-quality-low {
    background: color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--danger);
}

.chat-fab-slash-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-family: 'JetBrains Mono', monospace;
}

.chat-fab-slash-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.chat-fab-cmd-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    z-index: 10;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

.chat-fab-cmd-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.chat-fab-cmd-item:last-child {
    border-bottom: none;
}

.chat-fab-cmd-item:hover,
.chat-fab-cmd-item.active {
    background: var(--accent-soft);
}

.chat-fab-cmd-icon {
    font-size: 1rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.chat-fab-cmd-text {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.35;
}

.chat-fab-cmd-text strong {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}

.chat-fab-cmd-desc {
    color: var(--text-secondary);
    margin-inline-start: 0.4rem;
}

/* ─── Back-to-top floating button (global) ─── */
.bp-back-to-top {
    position: fixed;
    bottom: 1.4rem;
    inset-inline-start: 1.4rem;
    z-index: 998;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
    background: var(--bg-elevated, #fff);
    color: var(--accent, #2563eb);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.bp-back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.bp-back-to-top:hover,
.bp-back-to-top:focus-visible {
    background: var(--accent, #2563eb);
    color: #fff;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
    outline: none;
    transform: translateY(-1px) scale(1);
}

.bp-back-to-top svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 640px) {
    .bp-back-to-top {
        bottom: 5.2rem; /* keep clear of chat-fab on mobile */
        width: 40px;
        height: 40px;
    }
}

@media print {
    .bp-back-to-top { display: none !important; }
}

/* Trade id + Binance entry order id (reports, market-monitor, …) */
.bp-trade-id-stack {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    line-height: 1.25;
}

.bp-binance-order-id {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.bp-binance-order-id.paper {
    color: var(--accent);
    font-weight: 600;
}

.bp-trade-id-sep {
    color: var(--text-muted);
    font-weight: 400;
}

/* Shared list/table search + filter toolbar (BpListFilter) */
.bp-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.bp-list-toolbar__search {
    display: grid;
    gap: 0.25rem;
    flex: 1 1 12rem;
    min-width: 10rem;
    margin: 0;
}

.bp-list-toolbar__filter {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    min-width: 8rem;
}

.bp-list-toolbar__label {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.2;
}

.bp-list-toolbar__search input[type="search"] {
    width: 100%;
}

.bp-list-toolbar__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-inline-start: auto;
    align-self: center;
    white-space: nowrap;
}

.bp-list-hidden,
.is-row-hidden {
    display: none !important;
}

/* ===== Searchable Select (bp-ss) ===== */
.bp-ss-wrap,
.bp-ms-wrap {
    position: relative;
}

.bp-ss-wrap > select,
.bp-ms-wrap > select {
    display: none !important;
}

.bp-ss-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.82rem;
    min-height: 2.05rem;
    user-select: none;
    transition: border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

.bp-ss-trigger:hover,
.bp-ss-wrap.open .bp-ss-trigger {
    border-color: var(--accent);
}

.bp-ss-wrap.open .bp-ss-trigger {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.bp-ss-trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-ss-arrow {
    font-size: 0.65rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.bp-ss-wrap.open .bp-ss-arrow {
    transform: rotate(180deg);
}

.bp-ss-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    z-index: var(--z-searchable-select, 8500);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    max-height: 260px;
    overflow: hidden;
    min-width: 100%;
    width: max-content;
}

.bp-ss-wrap.open .bp-ss-dropdown {
    display: flex;
}

.bp-ss-search {
    padding: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.bp-ss-search input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-primary);
    font-size: 0.78rem;
}

.bp-ss-search input:focus {
    border-color: var(--accent);
    outline: none;
}

.bp-ss-options {
    max-height: 14rem;
    overflow-y: auto;
}

.bp-ss-option {
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
}

.bp-ss-option:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.04));
}

.bp-ss-option.selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.bp-ss-no-match {
    padding: 0.6rem 0.7rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

/* ===== Multi Searchable Select (bp-ms) ===== */
.bp-ms-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.82rem;
    min-height: 2.05rem;
    user-select: none;
    transition: border-color 0.15s;
}

.bp-ms-trigger:hover,
.bp-ms-wrap.open .bp-ms-trigger {
    border-color: var(--accent);
}

.bp-ms-wrap.open .bp-ms-trigger {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.bp-ms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    align-items: center;
}

.bp-ms-placeholder {
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.bp-ms-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 9rem;
}

.bp-ms-chip-remove {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.75;
}

.bp-ms-chip-remove:hover {
    opacity: 1;
}

.bp-ms-arrow {
    font-size: 0.65rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.bp-ms-wrap.open .bp-ms-arrow {
    transform: rotate(180deg);
}

.bp-ms-dropdown {
    display: none;
    position: absolute;
    z-index: var(--z-searchable-select, 8500);
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 12rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md, 0 6px 20px rgba(0, 0, 0, 0.14));
    overflow: hidden;
}

.bp-ms-wrap.open .bp-ms-dropdown {
    display: block;
}

.bp-ms-search {
    padding: 0.45rem;
    border-bottom: 1px solid var(--border);
}

.bp-ms-search input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-primary);
    font-size: 0.78rem;
}

.bp-ms-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid var(--border);
}

.bp-ms-clear {
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
}

.bp-ms-options {
    max-height: 14rem;
    overflow-y: auto;
}

.bp-ms-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
}

.bp-ms-option:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.04));
}

.bp-ms-option.selected {
    background: var(--accent-soft);
}

.bp-ms-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

.bp-ms-no-match {
    padding: 0.6rem 0.7rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

.tl-filter-grid .bp-ms-trigger,
.tl-filter-grid .bp-ss-trigger {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
}

/* Portal: dropdown rendered on body so it is not clipped by cards/overflow */
.bp-select-portal-host {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-searchable-select, 8500);
}

.bp-select-dropdown--portal {
    pointer-events: auto;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.bp-select-dropdown--portal.bp-ss-dropdown {
    display: flex !important;
}

.bp-select-dropdown--portal.bp-ms-dropdown {
    display: block !important;
}

.bp-ss-wrap.open,
.bp-ms-wrap.open {
    z-index: calc(var(--z-searchable-select, 8500) - 1);
}

.card:has(.bp-ss-wrap.open),
.card:has(.bp-ms-wrap.open),
details:has(.bp-ss-wrap.open),
details:has(.bp-ms-wrap.open) {
    position: relative;
    z-index: calc(var(--z-searchable-select, 8500) - 2);
    overflow: visible !important;
}

.card:has(.bp-ss-wrap.open) > .card-body,
.card:has(.bp-ms-wrap.open) > .card-body,
.tl-filter-panel:has(.bp-ss-wrap.open),
.tl-filter-panel:has(.bp-ms-wrap.open) {
    overflow: visible !important;
}

.modal-overlay:has(.bp-ss-wrap.open),
.modal-overlay:has(.bp-ms-wrap.open) {
    overflow: visible;
}

.modal-overlay.show:has(.bp-ss-wrap.open) .sg-modal,
.modal-overlay.show:has(.bp-ms-wrap.open) .sg-modal,
.modal-overlay.show:has(.bp-ss-wrap.open) .members-modal,
.modal-overlay.show:has(.bp-ms-wrap.open) .members-modal {
    overflow: visible;
}