/* ============================================================================
   31TRADES — Institutional Theme
   Layered obsidian surfaces, ultra-thin borders, monospaced financial numbers,
   pill navigation, blurred modals, ambient glows.
   Loaded LAST on every page so these rules win the cascade over inline styles.

   Design tokens are defined in assets/tokens.css (generated from assets/tokens.json
   by the design-system skill) as a THREE-LAYER system:
       primitive (raw values)  →  semantic (--tm-* aliases)  →  component (--btn-*, --modal-*)
   This file only carries component rules; it must stay after tokens.css in the
   cascade so the --tm-* semantic aliases resolve.
   ============================================================================ */
@import url('tokens.css');

/* ---- Base surface hierarchy --------------------------------------------- */
/* Landing/auth pages opt out with class "tm-landing" (they carry their own
   marketing gradient); every app page inherits the obsidian base. */
html:not(.tm-landing) { background: var(--tm-bg); }
body:not(.tm-landing) {
    background: var(--tm-bg) !important;
    color: var(--tm-text);
    font-family: var(--tm-sans);
}

/* ---- Glass + hairline tokens (canonical) -----------------------------------
   Some pages (ai, dashboard, calendar, …) carry their own local :root copies of
   these tokens; battles/improve/review rely on them without local definitions.
   This block is the source of truth — loaded after page <style> blocks, so the
   values here win the cascade and every page gets the same glass treatment.
   ============================================================================ */
:root {
    --glass-bg: rgba(20, 20, 24, 0.72);
    --glass-bg-strong: rgba(24, 24, 28, 0.88);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-border-strong: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.25);
    --glass-inner: rgba(255, 255, 255, 0.03);
    --hairline: rgba(255, 255, 255, 0.05);
}

/* ---- App shell ----------------------------------------------------------- */
/* ---- App shell ----------------------------------------------------------- */
body:not(.tm-landing) .sidebar,
.sidebar {
    background: var(--tm-bg-elev) !important;
    border-right: 1px solid var(--tm-border);
    flex-shrink: 0 !important;
    width: 253px !important;
    min-width: 253px !important;
}
body.collapsed .sidebar {
    width: 64px !important;
    min-width: 64px !important;
}
body:not(.tm-landing) .topbar {
    background: rgba(10, 12, 16, 0.85) !important;
    border-bottom: 1px solid var(--tm-border);
    backdrop-filter: blur(8px);
    height: 56px;
}
.search-input {
    background: var(--tm-card) !important;
    border: 1px solid var(--tm-border-2) !important;
    border-radius: 8px !important;
    padding: 7px 12px 7px 38px !important;
    font-size: 13.5px !important;
    color: var(--tm-text) !important;
    width: 260px !important;
    outline: none !important;
    transition: border-color 0.15s ease, width 0.2s ease !important;
}
.search-input:focus {
    border-color: rgba(255, 255, 255, 0.25) !important;
    width: 320px !important;
}
.sidebar .logo-text,
.topbar .logo-text {
    color: var(--tm-text);
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}
.logo-badge {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: #000000 url('assets/battlex-logo.png') center / contain no-repeat !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: transparent !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.08) !important;
}

/* ---- Navigation: pill-style active, soft hover --------------------------- */
.nav-item {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    gap: 13px !important;
    color: var(--tm-muted);
    border-radius: 9px !important;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.nav-item svg {
    width: 19px !important;
    height: 19px !important;
    flex-shrink: 0 !important;
}
.nav-item:hover {
    background: var(--tm-hover);
    color: var(--tm-text);
}
.nav-item.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
body.collapsed .nav-item.active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }

/* ---- Luxury Minimalist SOON Badge --------------------------------------- */
.sidebar-soon-badge {
    margin-left: auto;
    font-family: var(--tm-mono, monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2.5px 6.5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--tm-muted);
    border: 1px solid rgba(255, 255, 255, 0.10);
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.sidebar-soon-badge::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #d4af37;
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.6);
}
.nav-item:hover .sidebar-soon-badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tm-text);
    border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="light"] .sidebar-soon-badge {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
[data-theme="light"] .sidebar-soon-badge::before {
    background: #b45309;
    box-shadow: none;
}
body.collapsed .sidebar-soon-badge {
    display: none !important;
}

/* ---- Sidebar Accordion Sections ----------------------------------------- */
.sidebar-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}
.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase;
    color: var(--tm-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.15s ease;
    width: 100%;
}
.sidebar-section-header:hover {
    color: var(--tm-text);
    background: var(--tm-hover);
}
.sidebar-section .chevron-icon {
    width: 14px !important;
    height: 14px !important;
    color: var(--tm-dim);
    transition: transform 0.2s ease;
}
.sidebar-section.open .chevron-icon {
    transform: rotate(180deg);
    color: var(--tm-text);
}
.sidebar-section-items {
    display: none;
    flex-direction: column;
    gap: 2px;
}
.sidebar-section.open .sidebar-section-items {
    display: flex;
}
body.collapsed .sidebar-section-header {
    display: none !important;
}
body.collapsed .sidebar-section-items {
    display: flex !important;
}

/* ---- Cards / panels ------------------------------------------------------- */
.panel,
.metric-mini,
.fcard,
.glass-card,
.opt-card,
.tool-item,
.rank-row,
.report,
.summary-chip,
.auth-card,
.cal-cell,
.cal-day,
.check-row,
.rule-row,
.setup-row,
.secondary-item,
.tl-item {
    background: var(--tm-card) !important;
    border: 1px solid var(--tm-border);
}
.panel:hover,
.metric-mini:hover,
.fcard:hover,
.glass-card:hover,
.opt-card:hover,
.tool-item:hover,
.rank-row:hover,
.cal-day:hover {
    background: var(--tm-hover) !important;
    border-color: var(--tm-border-2);
}
.panel-title { color: var(--tm-text); font-weight: 700; }
.panel-sub  { color: var(--tm-dim); }

/* ---- Metric / KPI values: Tabular Lining Figures (Inter / Geist) --------- */
.metric,
.metric-mini { background: var(--tm-card); border: 1px solid var(--tm-border); }

.stat-number,
.metric-value,
.metric-mini .val,
.kpi-value,
.sum-value,
.val,
.num,
.card-val,
.tp-card-val,
.status-value,
.secondary-value,
.rank-num,
.dd-marker,
.cal-pnl,
.dayval,
.bar-fill,
.risk-consumed,
.eq-chart text,
table td.num {
    font-family: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    font-feature-settings: "tnum" on, "lnum" on !important;
    font-variant-numeric: tabular-nums lining-nums !important;
}
.metric-value { color: var(--tm-text); }
.metric-label, .metric-sub, .label-xs, .secondary-label {
    color: var(--tm-muted);
}
.metric-sub { font-size: 11.5px; }

/* ---- Buttons: Stealth Luxury Monochrome & Fine Outlines ----------------- */
.btn-primary,
.btn-brand,
.cn-btn-primary,
button[onclick*="openEntryModal"],
button[onclick*="openTradeDrawer"],
#save-trade {
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: 1px solid #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 255, 255, 0.12) !important;
    transition: all 0.15s ease !important;
}
.btn-primary:hover,
.btn-brand:hover,
.cn-btn-primary:hover,
button[onclick*="openEntryModal"]:hover,
button[onclick*="openTradeDrawer"]:hover,
#save-trade:hover {
    background: #e2e8f0 !important;
    color: #0a0a0a !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px);
}
.btn-primary:active,
.btn-brand:active,
.cn-btn-primary:active,
#save-trade:active { transform: translateY(0); }

.btn-secondary,
.btn-outline,
.cn-btn-secondary,
.cn-btn-outline {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.15s ease !important;
}
.btn-secondary:hover,
.btn-outline:hover,
.cn-btn-secondary:hover,
.cn-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--tm-muted) !important;
    border: 1px solid transparent;
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-color: var(--tm-border);
}

.btn-danger {
    background: rgba(244, 63, 94, 0.10) !important;
    color: #f43f5e !important;
    border: 1px solid rgba(244, 63, 94, 0.25);
}
.btn-danger:hover { background: rgba(244, 63, 94, 0.18) !important; }

/* ---- Tabs & Navigation: Charcoal fill + Crisp Left Accent ----------------- */
.nav-item.active,
.tree-item.active,
.tp-nav-item.active {
    background: #18181b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: inset 2px 0 0 0 #ffffff, inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.ins-tab,
.entry-tab,
.auth-tab,
.seg,
.preset-pill,
.view-chip,
.ev-chip,
.period-chip,
.pill {
    border-radius: var(--primitive-radius-full) !important;
    color: var(--tm-muted);
    border: 1px solid transparent;
    transition: all 0.18s ease;
}
.ins-tab:hover, .entry-tab:hover, .auth-tab:hover, .seg:hover {
    color: var(--tm-text);
    background: var(--tm-hover);
}
.ins-tab.active, .entry-tab.active, .auth-tab.active, .seg.active, .seg button.active {
    background: #18181b !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

/* ---- Topbar Chips: Clean horizontal flex layout -------------------------- */
.session-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--tm-muted) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}
.conn-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 9999px !important;
    background: #10B981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.20) !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
.account-select {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    font-size: 12.5px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.account-select:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
}

/* ---- Badges / status: Ice slate & contained organic accents -------------- */
.tag-emerald, .st-healthy { background: rgba(16, 185, 129, 0.10) !important; color: #10b981 !important; }
.tag-red, .st-breached, .risk-level-critical { background: rgba(244, 63, 94, 0.10) !important; color: #f43f5e !important; }
.tag-amber, .st-approaching, .risk-level-high { background: rgba(245, 158, 11, 0.10) !important; color: #f59e0b !important; }
.tag-blue, .risk-level-caution { background: rgba(148, 163, 184, 0.10) !important; color: #94a3b8 !important; }
.tag-purple { background: rgba(226, 232, 240, 0.08) !important; color: #cbd5e1 !important; }
.tag-gray, .st-noteval, .risk-level-normal { background: rgba(148, 163, 184, 0.08) !important; color: #94a3b8 !important; }
.tag { border-radius: var(--primitive-radius-full); }
.state-pill { border-radius: var(--primitive-radius-full); }
.badge-dot { box-shadow: none; }

/* ---- Modals / drawers: blurred backdrop, rounded ----------------------------- */
.modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(6px);
}
.modal,
.modal-box {
    background: #111215 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}
.drawer {
    background: #111215 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.7) !important;
}
.modal-header { border-bottom: 1px solid var(--tm-border); }

/* ---- Tables ---------------------------------------------------------------- */
.tbl th {
    color: var(--tm-dim);
    border-bottom: 1px solid var(--tm-border-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10.5px;
}
.tbl td {
    border-bottom: 1px solid var(--tm-border);
    color: var(--tm-text);
}
.tbl tbody tr { transition: background 0.12s ease; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.tbl-wrap { border: 1px solid var(--tm-border); border-radius: var(--primitive-radius-lg); }

/* ---- Inputs ----------------------------------------------------------------- */
.search-input,
.field-input,
.finput,
.fselect,
.ftext,
.limit-input,
select, input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], input[type="email"], textarea {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--tm-text) !important;
    border-radius: var(--input-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-input:focus,
.field-input:focus,
.finput:focus,
.fselect:focus,
.ftext:focus,
.limit-input:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: var(--input-focus-ring);
    outline: none;
}
::placeholder { color: var(--tm-dim); }

/* ---- Calendar ---------------------------------------------------------------- */
.cal-grid { gap: 6px; }
.cal-cell, .cal-day {
    background: var(--tm-card) !important;
    border: 1px solid var(--tm-border);
    border-radius: var(--primitive-radius-lg);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cal-cell:hover, .cal-day:hover {
    background: var(--tm-hover) !important;
    border-color: var(--tm-border-2);
    transform: translateY(-1px);
}
.cal-day.empty, .cal-day.other { background: transparent !important; border-color: transparent; }
.cal-day.empty:hover { background: transparent !important; transform: none; }
.cal-daynum { color: var(--tm-dim); }

/* ---- Narrow-desktop topbar: drop secondary status chips so the Log Trade
   button and account selector never clip (they overflow at ~1024–1280px when
   the sidebar is still expanded). Below 1024px the shell already hides them
   via the pages' own hide-when-collapsed rules. -------------------------------- */
@media (max-width: 1280px) {
    .topbar .session-chip { display: none !important; }
}

/* ---- Toast / misc ------------------------------------------------------------- */
.toast {
    background: var(--tm-card-2) !important;
    border: 1px solid var(--tm-border-2);
    color: var(--tm-text);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    border-radius: var(--primitive-radius-lg);
    backdrop-filter: blur(8px);
}
.divider, .divider-line { background: var(--tm-border); }
.avatar { background: var(--tm-accent-2) !important; color: #ffffff; }
.conn-dot { background: var(--tm-green); box-shadow: none; }

/* ---- Landing pages keep their own card/panel surfaces ---------------------------- */
body.tm-landing .panel,
body.tm-landing .metric-mini,
body.tm-landing .fcard,
body.tm-landing .glass-card,
body.tm-landing .auth-card,
body.tm-landing .hero-card { background: inherit !important; border: inherit; }

/* ---- Log Trade Modal & Structured Sections (Wider & Compact) ---------------- */
.modal-box,
#entry-modal .modal-box {
    max-width: 860px !important;
    width: min(860px, 95vw) !important;
    max-height: 86vh !important;
    overflow-y: auto;
}

.tm-sec {
    border: 1px solid var(--tm-border);
    border-radius: var(--primitive-radius-md);
    background: rgba(18, 22, 32, 0.55);
    padding: 10px 14px 9px;
    margin-bottom: 9px;
}
.tm-sec-head {
    display: flex; align-items: center; gap: var(--primitive-space-2);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--tm-muted);
    margin-bottom: 7px;
}
.tm-sec-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: var(--primitive-radius-xs);
    background: rgba(255, 255, 255, 0.06);
    color: var(--tm-muted);
    font-family: var(--tm-mono); font-size: 9.5px; font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.tm-sec .field-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--tm-muted) !important;
    margin-bottom: 3.5px !important;
}
.tm-sec .field,
.tm-sec input.field,
.tm-sec select.field {
    padding: 7px 11px !important;
    font-size: 12.5px !important;
    border-radius: 7px !important;
}
.tm-readout {
    background: var(--tm-bg);
    border: 1px solid var(--tm-border);
    border-radius: var(--primitive-radius-md);
    padding: 7px 10px;
}
.tm-sec-readout { background: rgba(18, 22, 32, 0.35); }

/* ---- Asset picker (pill bar + flags/logos) --------------------------------------- */
.tm-picker { position: relative; }
.tm-cat-bar {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 4px 6px;
    margin-bottom: 5px;
    background: var(--tm-bg);
    border: 1px solid var(--tm-border);
    border-radius: var(--primitive-radius-md);
}
.tm-cat-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--primitive-radius-full);
    font-size: 11px; font-weight: 600;
    color: var(--tm-muted); background: transparent; border: 1px solid transparent;
    cursor: pointer; transition: all 0.15s ease; white-space: nowrap;
}
.tm-cat-pill svg { flex-shrink: 0; opacity: 0.75; transition: opacity 0.15s ease; }
.tm-cat-pill:hover { color: var(--tm-text); background: var(--tm-hover); }
.tm-cat-pill:hover svg { opacity: 1; }
.tm-cat-pill.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff; border-color: rgba(255, 255, 255, 0.22);
}
.tm-cat-pill.active svg { opacity: 1; color: #ffffff; }
.tm-picker-trigger {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 12px;
    background: var(--tm-bg);
    border: 1px solid var(--tm-border-2); border-radius: var(--primitive-radius-md);
    color: var(--tm-text); cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tm-picker-trigger:hover { border-color: var(--tm-border-2); }
.tm-picker-trigger:focus-visible {
    outline: none; border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-ring);
}
.tm-picker-value { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tm-picker-sym { font-weight: 700; font-family: var(--tm-mono); font-size: 13px; }
.tm-picker-cat {
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--tm-muted); background: rgba(148, 163, 184, 0.10);
    border-radius: var(--primitive-radius-full); padding: 2px 8px;
}
.tm-picker-chevron { color: var(--tm-dim); margin-left: auto; flex-shrink: 0; transition: transform 0.18s ease; }
.tm-picker.dropdown-open .tm-picker-chevron { transform: rotate(180deg); }

.tm-picker-dropdown {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
    background: var(--tm-card-2);
    border: 1px solid var(--tm-border-2); border-radius: var(--primitive-radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.tm-picker-dropdown.open { display: block; }
.tm-picker-search {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; color: var(--tm-dim);
    border-bottom: 1px solid var(--tm-border);
}
.tm-picker-q {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--tm-text); font-size: 12.5px;
}
.tm-picker-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.tm-asset-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 7px 9px; border-radius: var(--primitive-radius-sm);
    background: transparent; border: none; cursor: pointer; text-align: left;
    transition: background 0.12s ease;
}
.tm-asset-row:hover { background: var(--tm-hover); }
.tm-asset-flags { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; width: 30px; flex-shrink: 0; }
.tm-asset-icon { font-size: 15px; line-height: 1; width: 30px; text-align: center; flex-shrink: 0; }
.tm-asset-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    font-family: var(--tm-mono); font-size: 12.5px; font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.tm-asset-logo { border-radius: var(--primitive-radius-xs); }
.tm-asset-logo-img {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.tm-asset-logo-img img {
    width: 100%; height: 100%; object-fit: contain;
    display: block;
}
.tm-asset-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tm-asset-sym { font-family: var(--tm-mono); font-size: 12.5px; font-weight: 700; color: var(--tm-text); }
.tm-asset-name { font-size: 11px; color: var(--tm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-asset-cat {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--tm-muted); background: rgba(148, 163, 184, 0.10);
    border-radius: var(--primitive-radius-full); padding: 2px 8px; flex-shrink: 0;
}
.tm-picker-empty { padding: 18px; text-align: center; color: var(--tm-dim); font-size: 12px; }

/* ---- Journal symbol column: flags/logos ------------------------------------------ */
.tm-sym-cell {
    display: flex; align-items: center; gap: 9px;
    font-weight: 600; color: var(--tm-text);
}
.tm-sym-badge {
    display: inline-flex; flex-shrink: 0;
}
.tm-sym-cell .tm-asset-logo { width: 24px; height: 24px; font-size: 11.5px; }
.tm-sym-cell .tm-asset-flags { font-size: 14px; width: 28px; }
.tm-sym-cell .tm-asset-icon { font-size: 14px; width: 28px; }
.tm-sym-name { font-family: var(--tm-mono); font-size: 12.5px; letter-spacing: -0.01em; }

/* ---- Keyboard focus: visible rings on ALL interactive elements ------------------ */
/* Only inputs define their own focus ring above; every other control gets one here
   so keyboard users always see where focus is (HIGH a11y requirement). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-item:focus-visible,
.ins-tab:focus-visible,
.entry-tab:focus-visible,
.auth-tab:focus-visible,
.seg:focus-visible,
.preset-pill:focus-visible,
.view-chip:focus-visible,
.ev-chip:focus-visible,
.session-chip:focus-visible,
.period-chip:focus-visible,
.pill:focus-visible,
.tm-cat-pill:focus-visible,
.tm-asset-row:focus-visible,
.tbl tbody tr[tabindex]:focus-visible,
.cal-day[tabindex]:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.35) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}
input:focus-visible:not([type="hidden"]) {
    outline: 1px solid rgba(129, 140, 248, 0.55) !important;
    outline-offset: 0;
}

/* ---- Reduced motion: respect user preference (HIGH a11y requirement) ------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .btn-primary:hover,
    .btn-primary,
    .nav-item.active,
    .logo-badge,
    .badge-dot,
    .conn-dot {
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }
    .cal-day:hover { transform: none !important; }
    .tm-picker-dropdown,
    .modal-overlay,
    .drawer { backdrop-filter: none !important; }
}

/* ---- Scrollbars ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.18);
    border-radius: var(--primitive-radius-full);
    border: 2px solid var(--tm-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.30); }

/* ---- First-run tour (assets/tour.js) -------------------------------------- */
#tm-tour-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(4, 5, 8, 0.72);
    backdrop-filter: blur(2px);
}
body.tm-tour-lock { overflow: hidden; }
#tm-tour-card {
    position: fixed; z-index: 1002; width: 300px;
    background: var(--tm-card); border: 1px solid var(--tm-border-2);
    border-radius: var(--primitive-radius-xl); padding: 18px 18px 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    font-family: var(--tm-sans);
    color: var(--tm-text);
}
#tm-tour-close {
    position: absolute; top: 10px; right: 10px;
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: #6E6E78; background: transparent; border: none; cursor: pointer;
}
#tm-tour-close:hover { background: #1d212b; color: #fff; }
.tm-tour-kicker {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
    color: #34D399; text-transform: uppercase; margin-bottom: 6px;
}
.tm-tour-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.tm-tour-desc { font-size: 12.5px; line-height: 1.55; color: #9aa1ad; margin-bottom: 16px; }
.tm-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tm-tour-btn-ghost {
    background: transparent; border: 1px solid #2a3040; color: #9aa1ad;
    padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tm-tour-btn-ghost:hover { border-color: #3a4256; color: #fff; }
.tm-tour-btn {
    background: #fff; color: #0A0A0C; border: none;
    padding: 8px 18px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.tm-tour-btn:hover { background: #e8ecef; }
.tm-tour-dots { display: flex; gap: 5px; align-items: center; }
.tm-tour-dot {
    width: 6px; height: 6px; border-radius: 999px; background: #2a3040;
}
.tm-tour-dot.active { background: #34D399; }

/* ============================================================================
   MINIMAL CLEANUP — remove AI-slop effects app-wide
   Flat page backgrounds, restrained glass, no glow, no animated conic borders.
   Loaded after every page <style> block, so these rules win the cascade.
   ============================================================================ */

/* ---- Ambient radial page backgrounds → flat surface -------------------- */
.ai-bg, .cal-bg, .im-bg, .rv-bg {
    background: var(--tm-bg) !important;
}

/* ---- Glass: subtle surface, minimal blur -------------------------------- */
.glass, .glass-strong, .glass-card {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ---- Calendar: disable the mouse-follow conic glow, keep flat cells ----- */
.cal-shell { --glow-green: transparent; --glow-red: transparent; }
.cal-cell::after { display: none !important; }
.cal-cell.is-win::before,
.cal-cell.is-loss::before { display: none !important; }
.cal-cell.is-selected {
    box-shadow: inset 0 0 0 1px var(--tm-accent) !important;
}
.cal-risk-fill {
    background: var(--tm-amber) !important;
}

/* ---- Landing spin rings / pulsing glows: quiet them --------------------- */
@keyframes tm-pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.06); } 50% { box-shadow: 0 0 0 0 rgba(255,255,255,0.06); } }

/* ============================================================================
   LIGHT THEME — html[data-theme="light"]
   One flip point for the entire app: the semantic token layer is re-pointed at
   a light palette, and the shared structural classes (which pages hardcode as
   hex) are overridden here with higher-specificity selectors so the toggle
   flips every shell page without touching the pages themselves.
   ============================================================================ */
html[data-theme="light"] {
    --tm-bg: #f6f8fb;
    --tm-bg-elev: #ffffff;
    --tm-card: #ffffff;
    --tm-card-2: #f1f5f9;
    --tm-hover: #e8eef5;
    --tm-border: rgba(15, 23, 42, 0.08);
    --tm-border-2: rgba(15, 23, 42, 0.15);
    --tm-text: #0f172a;
    --tm-muted: #475569;
    --tm-dim: #64748b;
    --tm-accent: #4f46e5;
    --tm-accent-2: #6366f1;
    --tm-green: #059669;
    --tm-red: #dc2626;
    --tm-amber: #d97706;
    --tm-purple: #7c3aed;
    --tm-blue: #2563eb;
    --glass-bg: rgba(255, 255, 255, 0.66);
    --glass-bg-strong: rgba(255, 255, 255, 0.86);
    --glass-border: rgba(15, 23, 42, 0.12);
    --glass-border-strong: rgba(148, 163, 184, 0.35);
    --glass-shadow: 0 10px 34px rgba(31, 41, 55, 0.10), 0 2px 8px rgba(31, 41, 55, 0.06);
    --glass-inner: rgba(255, 255, 255, 0.5);
    --hairline: rgba(15, 23, 42, 0.07);
}

html[data-theme="light"],
html[data-theme="light"] body {
    background: #f8fafc !important;
    color: #09090b !important;
}

/* Sidebar in Light Mode */
html[data-theme="light"] .sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .sidebar .logo-badge {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: #000000 url('assets/battlex-logo.png') center / contain no-repeat !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: transparent !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="light"] .sidebar-section-header {
    color: #64748b !important;
}
html[data-theme="light"] .sidebar-section-header:hover {
    color: #09090b !important;
}
html[data-theme="light"] .nav-item {
    color: #475569 !important;
}
html[data-theme="light"] .nav-item:hover {
    background: #f1f5f9 !important;
    color: #09090b !important;
}
html[data-theme="light"] .nav-item.active {
    background: #09090b !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] .nav-item.active svg {
    color: #ffffff !important;
}

/* Topbar in Light Mode */
html[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(12px) !important;
}
html[data-theme="light"] .topbar .search-input {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #09090b !important;
}
html[data-theme="light"] .topbar .search-input:focus {
    border-color: rgba(15, 23, 42, 0.25) !important;
    background: #ffffff !important;
}
html[data-theme="light"] .session-chip {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
}
html[data-theme="light"] .account-select {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #09090b !important;
}
html[data-theme="light"] .account-select:hover {
    background: #f1f5f9 !important;
    border-color: rgba(15, 23, 42, 0.20) !important;
}

/* Primary Button in Light Mode: Pitch Black with White Text */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] button[onclick*="openEntryModal"],
html[data-theme="light"] #save-trade {
    background: #09090b !important;
    color: #ffffff !important;
    border: 1px solid #09090b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] button[onclick*="openEntryModal"]:hover,
html[data-theme="light"] #save-trade:hover {
    background: #27272a !important;
    color: #ffffff !important;
    border-color: #27272a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}
html[data-theme="light"] .btn-ghost {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #09090b !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] .btn-ghost:hover {
    background: rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(15, 23, 42, 0.20) !important;
}

/* Cards & Panels in Light Mode */
html[data-theme="light"] .panel,
html[data-theme="light"] .glass,
html[data-theme="light"] .fcard,
html[data-theme="light"] .card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .stat-tile,
html[data-theme="light"] .seat-row,
html[data-theme="light"] .trade-row {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

/* Numbers & Metrics in Light Mode */
html[data-theme="light"] .stat-number,
html[data-theme="light"] .num,
html[data-theme="light"] .kpi-value,
html[data-theme="light"] .sum-value,
html[data-theme="light"] .val,
html[data-theme="light"] .card-val {
    color: #09090b;
}

/* Tables in Light Mode */
html[data-theme="light"] .tbl th,
html[data-theme="light"] table th {
    background: #f8fafc !important;
    color: #64748b !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .tbl td,
html[data-theme="light"] table td {
    color: #334155 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .tbl tbody tr:hover,
html[data-theme="light"] table tbody tr:hover {
    background: #f8fafc !important;
}

/* Modals & Drawers in Light Mode */
html[data-theme="light"] .modal-box,
html[data-theme="light"] .modal-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme="light"] .drawer {
    background: #ffffff !important;
    border-left: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: -10px 0 40px rgba(15, 23, 42, 0.10) !important;
    color: #09090b !important;
}
html[data-theme="light"] .field,
html[data-theme="light"] .ctrl,
html[data-theme="light"] select.field,
html[data-theme="light"] input.ctrl {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #09090b !important;
}
html[data-theme="light"] .field:focus,
html[data-theme="light"] .ctrl:focus {
    border-color: #09090b !important;
    background: #ffffff !important;
}
html[data-theme="light"] .view-chip {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #64748b !important;
}
html[data-theme="light"] .view-chip:hover {
    color: #09090b !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
}
html[data-theme="light"] .view-chip.active {
    background: #09090b !important;
    color: #ffffff !important;
    border-color: #09090b !important;
}
html[data-theme="light"] .collapse-btn:hover {
    background: #f1f5f9;
    color: #09090b;
}
html[data-theme="light"] .bmini {
    background: rgba(15, 23, 42, 0.2);
}

/* ============================================================================
   MOBILE OPTIMIZATION (BREAKPOINTS: < 768px & < 640px)
   ============================================================================ */

.mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.mobile-sidebar-open .mobile-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 767px) {
    /* Full height and fluid width without horizontal scrolling */
    html, body {
        height: 100%;
        overflow-x: hidden;
    }

    /* Off-canvas mobile slide-over sidebar drawer */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 100 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.85) !important;
        background: #0d0e12 !important;
    }
    body.mobile-sidebar-open .sidebar {
        transform: translateX(0) !important;
    }
    
    /* Ensure sidebar elements stay properly visible in the mobile drawer */
    body.collapsed .sidebar {
        width: 280px !important;
    }
    body.collapsed .hide-when-collapsed {
        display: flex !important;
    }
    body.collapsed .nav-label {
        display: inline !important;
    }
    body.collapsed .sidebar .logo-text,
    body.collapsed .profile-text {
        display: block !important;
    }

    /* Mobile Hamburger Menu Toggle Button */
    .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    /* Topbar responsive adjustments */
    .topbar {
        height: 52px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 6px !important;
    }
    .topbar .search-input {
        width: 130px !important;
        min-width: 100px !important;
        padding-left: 32px !important;
        font-size: 12px !important;
    }
    .topbar .search-input:focus {
        width: 160px !important;
    }
    
    /* Hide session chip on narrow mobile screens to guarantee no horizontal overflow */
    .session-chip {
        display: none !important;
    }
    
    /* Keep Log Trade & Account selector compact and touch friendly */
    .topbar .btn-primary {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .topbar .account-select {
        padding: 5px 8px !important;
        font-size: 11.5px !important;
        max-width: 120px !important;
    }
    .topbar .account-select span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Content Area & Padding */
    main {
        padding: 0 !important;
    }
    main > div {
        padding: 12px 12px 24px 12px !important;
        gap: 12px !important;
    }

    /* Responsive Headers */
    h1 {
        font-size: 20px !important;
    }

    /* Cards & Panels */
    .panel,
    .glass,
    .fcard {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    /* Multi-column KPI & metric grids wrap cleanly */
    .grid-cols-5,
    .grid-cols-4,
    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .sum-cell {
        padding: 10px !important;
    }
    .sum-value,
    .kpi-value,
    .metric-value {
        font-size: 18px !important;
    }

    /* Tables: smooth horizontal touch scrolling */
    .tbl-wrap,
    .table-container,
    .overflow-x-auto {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    table th, table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    /* Modal / Log Trade Bottom Sheet on Mobile */
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .modal,
    .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
        border-bottom: none !important;
    }
    
    /* Touch friendly tap targets */
    button, input, select, textarea, .nav-item {
        min-height: 40px;
    }
}

/* ============================================================================
   NATIVE TOUCH ENGINE & IPHONE HARDWARE ACCELERATION
   ============================================================================ */

/* Zero 300ms tap delay + remove gray tap box on iOS/Android */
html, body, button, a, input, select, textarea, .nav-item, .btn-primary, .btn-ghost, .collapse-btn, .sidebar-section-header, .account-select {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
}

/* Instant tactile touch feedback */
button:active,
.btn-primary:active,
.btn-ghost:active,
.nav-item:active,
.sidebar-section-header:active,
.account-select:active,
.mobile-menu-btn:active {
    transform: scale(0.97) !important;
    opacity: 0.88;
    transition: transform 0.06s ease, opacity 0.06s ease !important;
}

/* Hardware accelerated 60-120fps GPU layers */
.topbar,
.modal,
.modal-box,
.mobile-sidebar-backdrop {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
}

/* ---- Drawers & Overlays ---- */
.drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(560px, 94vw) !important;
    z-index: 50 !important;
    background: var(--tm-bg-elev) !important;
    border-left: 1px solid var(--tm-border-2) !important;
    transform: translateX(100%) !important;
    -webkit-transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.drawer.open {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
}

.overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 45 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
}
.overlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Smooth momentum touch scrolling for iOS/Android */
main,
.overflow-y-auto,
.overflow-x-auto,
.tbl-wrap {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
}

/* iPhone Dynamic Island & Home Indicator safe area insets */
@media (max-width: 767px) {
    .topbar {
        padding-top: max(env(safe-area-inset-top, 0px), 6px) !important;
        height: calc(54px + env(safe-area-inset-top, 0px)) !important;
    }
    .sidebar {
        padding-top: max(env(safe-area-inset-top, 0px), 8px) !important;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px) !important;
    }
    main {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px) !important;
    }
    .modal-box, .modal {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px) !important;
    }
}

@media (min-width: 768px) {
    .mobile-menu-btn {
        display: none !important;
    }
    .mobile-sidebar-backdrop {
        display: none !important;
    }
}
html[data-theme="light"] .toast { background: #ffffff; border: 1px solid rgba(15,23,42,0.12); }

/* ---- Sidebar Profile Popover Card ---------------------------------------- */
#sidebar-profile-popover {
    position: fixed;
    z-index: 9999;
    background: #0f1013;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.85), 0 0 1px 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
    font-family: var(--tm-sans);
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
#sidebar-profile-popover.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
#sidebar-profile-popover .spp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}
#sidebar-profile-popover .spp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--tm-accent-2), var(--tm-green));
    color: #ffffff;
    font-weight: 800;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sidebar-profile-popover .spp-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}
#sidebar-profile-popover .spp-role {
    font-size: 11px;
    color: #71717a;
    margin-top: 1px;
}
#sidebar-profile-popover .spp-menu {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#sidebar-profile-popover .spp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #a1a1aa;
    text-decoration: none;
    transition: all 0.12s ease;
}
#sidebar-profile-popover .spp-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
#sidebar-profile-popover .spp-item svg {
    color: #71717a;
    transition: color 0.12s ease;
}
#sidebar-profile-popover .spp-item:hover svg {
    color: #ffffff;
}
#sidebar-profile-popover .spp-foot {
    padding: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#sidebar-profile-popover .spp-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #f87171;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.12s ease;
}
#sidebar-profile-popover .spp-logout:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Light mode support */
html[data-theme="light"] #sidebar-profile-popover {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.15), 0 0 1px 1px rgba(15, 23, 42, 0.06) !important;
    color: #09090b !important;
}
html[data-theme="light"] #sidebar-profile-popover .spp-head {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
    background: #f8fafc !important;
}
html[data-theme="light"] #sidebar-profile-popover .spp-name {
    color: #09090b !important;
}
html[data-theme="light"] #sidebar-profile-popover .spp-role {
    color: #64748b !important;
}
html[data-theme="light"] #sidebar-profile-popover .spp-item {
    color: #475569 !important;
}
html[data-theme="light"] #sidebar-profile-popover .spp-item:hover {
    background: #f1f5f9 !important;
    color: #09090b !important;
}
html[data-theme="light"] #sidebar-profile-popover .spp-item svg {
    color: #64748b !important;
}
html[data-theme="light"] #sidebar-profile-popover .spp-item:hover svg {
    color: #09090b !important;
}
html[data-theme="light"] #sidebar-profile-popover .spp-foot {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

/* ============================================================================
   BATTLEXJOURNAL — DEFINITIVE DUAL-MODE (DESKTOP + MOBILE) RESPONSIVE SYSTEM
   ============================================================================ */

/* Mobile Trigger Button (Default hidden on desktop) */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    margin-right: 8px;
    flex-shrink: 0;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:active {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(0.95);
}

/* Mobile Close Button Inside Sidebar Header */
.mobile-sidebar-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mobile-sidebar-close-btn:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.20);
}

/* Mobile Sidebar Backdrop */
.mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99990 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.mobile-sidebar-open .mobile-sidebar-backdrop {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #0b0d14;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    z-index: 9000;
    padding: 0 8px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
    justify-content: space-around;
    align-items: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #71717a;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.15s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mbn-item svg {
    width: 18px;
    height: 18px;
}
.mbn-item.active {
    color: #ffffff !important;
}
.mbn-item:active {
    transform: scale(0.92);
}

/* ============================================================================
   1. DESKTOP SCREENS (> 1024px)
   ============================================================================ */
@media (min-width: 1025px) {
    .sidebar {
        position: relative !important;
        width: 253px !important;
        min-width: 253px !important;
        max-width: 253px !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        -webkit-transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 40 !important;
        background: var(--tm-bg-elev) !important;
        border-right: 1px solid var(--tm-border) !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
    }
    body.collapsed .sidebar {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }
    .mobile-menu-btn,
    .mobile-sidebar-close-btn,
    .mobile-sidebar-backdrop,
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* ============================================================================
   BATTLEXJOURNAL — COMPREHENSIVE INSTITUTIONAL DUAL-MODE RESPONSIVE ENGINE
   Fully audited for mobile viewport, 100dvh, GPU acceleration, and glass fallbacks
   ============================================================================ */

/* Global Glass System with Mobile GPU Acceleration & Solid Fallbacks */
.glass,
.glass-strong,
.panel,
.kpi,
.modal-box,
.dialog-content {
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Fallback solid backgrounds for low-end mobile devices without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .glass { background: #131722 !important; }
    .glass-strong { background: #0e121a !important; }
    .mobile-sidebar-backdrop { background: rgba(0, 0, 0, 0.92) !important; }
    .sidebar { background: #0c0f17 !important; }
}

/* Mobile Trigger Button (Default hidden on desktop) */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    margin-right: 6px;
    flex-shrink: 0;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:active {
    background: rgba(255, 255, 255, 0.20);
    transform: scale(0.95);
}

/* Mobile Close Button Inside Sidebar Header */
.mobile-sidebar-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mobile-sidebar-close-btn:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.20);
}

/* Mobile Topbar Logo */
.mobile-topbar-logo {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    object-fit: contain;
    background: #000000;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Mobile Sidebar Backdrop */
.mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 99990 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
body.mobile-sidebar-open .mobile-sidebar-backdrop {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(11, 14, 20, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    z-index: 9000;
    padding: 0 6px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
    justify-content: space-around;
    align-items: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #71717a;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.15s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mbn-item svg { width: 18px; height: 18px; }
.mbn-item.active { color: #ffffff !important; }
.mbn-item:active { transform: scale(0.92); }

/* ============================================================================
   1. DESKTOP SCREENS (> 1024px) — 100% UNTOUCHED & CRISP
   ============================================================================ */
@media (min-width: 1025px) {
    .sidebar {
        position: relative !important;
        width: 253px !important;
        min-width: 253px !important;
        max-width: 253px !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        -webkit-transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 40 !important;
        background: var(--tm-bg-elev) !important;
        border-right: 1px solid var(--tm-border) !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
    }
    body.collapsed .sidebar {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }
    .mobile-menu-btn,
    .mobile-sidebar-close-btn,
    .mobile-topbar-logo,
    .mobile-sidebar-backdrop,
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* ============================================================================
   BATTLEXJOURNAL — MASTER DUAL-MODE RESPONSIVE ENGINE (PC & MOBILE 100% PERFECT)
   ============================================================================ */

/* Mobile Trigger Button (Default hidden on desktop) */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    margin-right: 6px;
    flex-shrink: 0;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:active {
    background: rgba(255, 255, 255, 0.20);
    transform: scale(0.95);
}

/* Mobile Close Button Inside Sidebar Header */
.mobile-sidebar-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mobile-sidebar-close-btn:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.20);
}

/* Mobile Topbar Logo */
.mobile-topbar-logo {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    object-fit: contain;
    background: #000000;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Mobile Sidebar Backdrop */
.mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 99990 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
body.mobile-sidebar-open .mobile-sidebar-backdrop {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58px;
    background: #0b0e14;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 9000;
    padding: 0 6px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.7);
    justify-content: space-around;
    align-items: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #71717a;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 8px;
    transition: all 0.15s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    flex: 1;
    max-width: 75px;
}
.mbn-item svg { width: 18px; height: 18px; }
.mbn-item.active { color: #ffffff !important; font-weight: 700 !important; }
.mbn-item:active { transform: scale(0.92); }

/* ============================================================================
   1. DESKTOP SCREENS (> 1024px) — 100% PRESERVED BLOOMBERG PC EXPERIENCE
   ============================================================================ */
@media (min-width: 1025px) {
    .sidebar {
        position: relative !important;
        width: 253px !important;
        min-width: 253px !important;
        max-width: 253px !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        -webkit-transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 40 !important;
        background: var(--tm-bg-elev) !important;
        border-right: 1px solid var(--tm-border) !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
    }
    body.collapsed .sidebar {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }
    .mobile-menu-btn,
    .mobile-sidebar-close-btn,
    .mobile-topbar-logo,
    .mobile-sidebar-backdrop,
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* ============================================================================
   2. MOBILE & TABLET SCREENS (<= 1024px)
   ============================================================================ */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    /* 100dvh Support */
    .h-screen,
    .min-h-screen,
    div[class*="h-screen"] {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    /* Off-Canvas Slide Drawer */
    body.collapsed .sidebar,
    body:not(.tm-landing) .sidebar,
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 285px !important;
        min-width: 285px !important;
        max-width: 82vw !important;
        height: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 100000 !important;
        transform: translate3d(-100%, 0, 0) !important;
        -webkit-transform: translate3d(-100%, 0, 0) !important;
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
        -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
        box-shadow: none !important;
        background: #0c0f17 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        pointer-events: none !important;
        will-change: transform;
        -webkit-transform: translateZ(0);
    }

    /* Ensure text labels inside mobile drawer are always visible */
    .sidebar .nav-label,
    .sidebar .logo-text,
    .sidebar .profile-text,
    .sidebar .sidebar-section-header span {
        display: inline !important;
    }

    .sidebar .nav-item {
        justify-content: flex-start !important;
        padding: 10px 14px !important;
    }

    body.mobile-sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        pointer-events: auto !important;
        box-shadow: 16px 0 60px rgba(0, 0, 0, 0.95) !important;
    }

    .mobile-menu-btn { display: inline-flex !important; }
    .mobile-sidebar-close-btn { display: inline-flex !important; }
    .mobile-topbar-logo { display: inline-block !important; }
    .mobile-bottom-nav { display: flex !important; }

    /* Topbar on Mobile */
    .topbar {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100vw !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    /* Hide heavy search bar and non-essential chips on mobile */
    .topbar .relative:has(#global-search),
    .topbar #global-search,
    .search-input,
    .session-chip,
    .hide-when-collapsed {
        display: none !important;
    }

    /* Compact Topbar Action Buttons */
    .topbar .btn-primary {
        padding: 6px 10px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }
    .topbar .account-select,
    .topbar #acc-chip {
        display: inline-flex !important;
        padding: 5px 8px !important;
        font-size: 11.5px !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Padding for bottom nav bar */
    .app-main, main, .main-content, .flex-1.flex.flex-col, .flex-1.overflow-y-auto {
        padding-bottom: 76px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* 2-Column KPI Cards on Mobile */
    .grid-cols-4, .lg\:grid-cols-4, .xl\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .grid-cols-3, .lg\:grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .kpi {
        padding: 10px !important;
    }
    .kpi-value {
        font-size: 18px !important;
    }

    /* Notes Studio & Split Panes Stack Vertically with 100% Max Width */
    .notes-feed-pane,
    div[class*="w-[360px]"],
    div[class*="w-[410px]"],
    div[class*="w-[500px]"],
    div[class*="w-[600px]"] {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .flex-1.flex.overflow-hidden {
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    /* Horizontal Table Overflow Scroller */
    .table-container,
    .overflow-x-auto,
    div[class*="overflow-x"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Dialogs & Drawers on Mobile */
    .modal-box, .dialog-content, .drawer-body,
    div[class*="max-w-[500px]"], div[class*="max-w-[600px]"],
    div[class*="max-w-[700px]"], div[class*="max-w-[800px]"] {
        max-width: 94vw !important;
        width: 94vw !important;
        margin: 8px auto !important;
    }
}

@media (max-width: 480px) {
    .p-6, .p-5 { padding: 10px !important; }
    .grid-cols-4, .lg\:grid-cols-4, .xl\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    #dash-h1 { font-size: 18px !important; }
}