/* ══════════════════════════════════════════════════════════════
   Layout — sidebars, navigation, shell structure
   ══════════════════════════════════════════════════════════════ */

/* ── 3-Column Layout ── */
.sidebar-left { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
    background: var(--bg-card); border-right: 1px solid var(--border);
    z-index: 100; display: flex; flex-direction: column; overflow: hidden;
    transition: width .2s ease, transform var(--transition-slow) ease; }
.sidebar-left.collapsed { width: var(--sidebar-w-collapsed); }
html.left-collapsed-early .sidebar-left { width: var(--sidebar-w-collapsed); }
html.left-collapsed-early .sidebar-left .brand-text,
html.left-collapsed-early .sidebar-left .sidebar-user-details,
html.left-collapsed-early .sidebar-nav a span { display: none; }
html.left-collapsed-early .sidebar-left .nav-section-label { font-size: 0; }
html.left-collapsed-early .main-content { margin-left: var(--sidebar-w-collapsed); }
html.right-collapsed-early .sidebar-right { width: 0; border-left: none; overflow: hidden; }
html.right-collapsed-early .main-content { margin-right: 0; }

.sidebar-right { position: fixed; top: 0; right: 0; bottom: 0; width: var(--ops-w);
    background: var(--bg-card); border-left: 1px solid var(--border);
    z-index: 100; overflow-y: auto; overflow-x: hidden;
    transition: width .2s ease, transform .2s ease; }
.sidebar-right.collapsed { width: 0; border-left: none; }

.main-content { margin-left: var(--sidebar-w); margin-right: var(--ops-w);
    min-height: 100vh; transition: margin .2s ease; }
body.left-collapsed .main-content { margin-left: var(--sidebar-w-collapsed); }
body.right-collapsed .main-content { margin-right: 0; }

.container { max-width: var(--container-max); margin: 0 auto; padding: var(--space-5); }

/* ── Left Sidebar: Brand ── */
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: var(--space-4);
    border-bottom: 1px solid var(--border); height: 56px; flex-shrink: 0; }
.sidebar-brand .dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--green);
    box-shadow: var(--shadow-glow-green); flex-shrink: 0; }
.sidebar-brand .brand-text { font-weight: 800; font-size: 18px; letter-spacing: -0.8px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; white-space: nowrap; overflow: hidden; }
.sidebar-collapse-btn { background: none; border: none; color: var(--text3); cursor: pointer;
    padding: var(--space-1); margin-left: auto; flex-shrink: 0; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition-base), color var(--transition-base); }
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-left.collapsed .brand-text { display: none; }
.sidebar-left.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.sidebar-left.collapsed .sidebar-brand,
html.left-collapsed-early .sidebar-left .sidebar-brand {
    flex-direction: column; gap: 6px; padding: 8px 4px; height: auto;
}
.sidebar-left.collapsed .sidebar-brand .dot,
html.left-collapsed-early .sidebar-left .sidebar-brand .dot { display: none; }
.sidebar-left.collapsed .sidebar-brand .notif-bell,
.sidebar-left.collapsed .sidebar-brand .sidebar-collapse-btn,
html.left-collapsed-early .sidebar-left .sidebar-brand .notif-bell,
html.left-collapsed-early .sidebar-left .sidebar-brand .sidebar-collapse-btn {
    margin-left: 0; width: 32px; height: 32px;
}

/* ── Notification Bell ── */
.notif-bell { background: none; border: none; color: var(--text3); cursor: pointer;
    padding: 4px; border-radius: var(--radius-sm); position: relative;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transition-base); margin-left: auto; }
.notif-bell:hover { color: var(--text); }
.notif-badge { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px;
    border-radius: var(--radius-full); background: var(--red); color: #fff;
    font-size: 8px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; line-height: 1; }
.notif-panel { position: absolute; top: 56px; left: 0; right: 0; z-index: 300;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,.4); max-height: 360px; overflow: hidden;
    display: flex; flex-direction: column; }
.notif-panel-header { display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item { padding: 8px 16px; border-bottom: 1px solid rgba(48,54,61,.3);
    font-size: 12px; display: flex; gap: 8px; }
.notif-item:last-child { border-bottom: none; }
.notif-time { color: var(--text3); font-size: 10px; min-width: 100px; flex-shrink: 0; }
.notif-action { font-weight: 600; font-size: 10px; padding: 1px 5px; border-radius: 3px;
    min-width: 60px; text-align: center; }
.sidebar-left.collapsed .notif-bell { margin-left: 0; }
.sidebar-left.collapsed .notif-panel { left: var(--sidebar-w-collapsed); right: auto; width: 320px; }

/* ── Strategy Selector (in sidebar) ── */
.strat-selector { border-bottom: 1px solid var(--border); padding: 8px 12px; flex-shrink: 0; position: relative; }
.strat-selector-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text); cursor: pointer; font-size: var(--font-size-base); font-weight: 600;
    transition: all var(--transition-base); }
.strat-selector-btn:hover { border-color: var(--blue); background: var(--bg-hover); }
.strat-selector-name { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strat-chevron { flex-shrink: 0; transition: transform .2s; opacity: .5; }
.strat-chevron-open { transform: rotate(180deg); }
.strat-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }
.strat-dot-ok, .strat-dot-green { background: var(--green); box-shadow: 0 0 4px var(--green); }
.strat-dot-warn, .strat-dot-orange { background: var(--orange); box-shadow: 0 0 4px var(--orange); }
.strat-dot-red { background: var(--red); box-shadow: 0 0 4px var(--red); }
.strat-mode-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    background: rgba(210,153,34,.15); color: var(--orange); margin-left: 4px; }
.strat-item-detail { font-size: 11px; color: var(--text3); margin-left: auto; display: flex; align-items: center; }
.strat-dropdown { position: absolute; top: 100%; left: 8px; right: 8px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown); z-index: 200; overflow: hidden; margin-top: 4px; }
.strat-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px;
    background: none; border: none; color: var(--text2); cursor: pointer; font-size: var(--font-size-base);
    transition: all var(--transition-fast); text-align: left; }
.strat-dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
.strat-dropdown-item.active { color: var(--text); background: rgba(88,166,255,.06); }
.strat-item-name { flex: 1; font-weight: 500; }
.strat-item-equity { font-size: var(--font-size-sm); color: var(--text3); font-variant-numeric: tabular-nums; }
.strat-dropdown-link { display: block; padding: 8px 12px; font-size: var(--font-size-sm);
    color: var(--blue); text-align: center; border-top: 1px solid var(--border);
    text-decoration: none; transition: background var(--transition-fast); }
.strat-dropdown-link:hover { background: var(--bg-hover); }
.sidebar-left.collapsed .strat-selector { padding: 6px; }
.sidebar-left.collapsed .strat-selector-btn { padding: 6px; justify-content: center; }
.sidebar-left.collapsed .strat-selector-name,
.sidebar-left.collapsed .strat-chevron,
.sidebar-left.collapsed .strat-mode-tag,
.sidebar-left.collapsed .strat-item-name,
.sidebar-left.collapsed .strat-item-equity,
.sidebar-left.collapsed .strat-dropdown-link { display: none; }

/* ── Left Sidebar: Navigation ── */
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-2) 0;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.nav-section { padding: var(--space-1) 0; }
.nav-section-label { font-size: var(--font-size-xs); color: var(--text3); text-transform: uppercase;
    letter-spacing: 1.5px; font-weight: 600; padding: 8px 16px 4px; white-space: nowrap; overflow: hidden; }
.sidebar-left.collapsed .nav-section-label { font-size: 0; padding: 4px 0; }
.sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 16px;
    font-size: var(--font-size-base); color: var(--text2); font-weight: 500; white-space: nowrap;
    transition: all var(--transition-fast); border-left: 2px solid transparent; text-decoration: none; }
.sidebar-nav a:hover { color: var(--text); background: var(--bg-hover); }
.sidebar-nav a.active { color: var(--text); border-left-color: var(--blue); background: rgba(88,166,255,.06); }
.sidebar-nav a svg { flex-shrink: 0; opacity: .6; }
.sidebar-nav a.active svg { opacity: 1; }
.sidebar-left.collapsed .sidebar-nav a span { display: none; }
.sidebar-left.collapsed .sidebar-nav a { justify-content: center; padding: 10px 0; border-left: none; }
.sidebar-left.collapsed .sidebar-nav a.active { background: rgba(88,166,255,.1); }
.nav-badge { background: var(--orange); color: #fff; font-size: var(--font-size-xs); font-weight: 700;
    padding: 1px 6px; border-radius: var(--radius-lg); margin-left: auto; }
.sidebar-left.collapsed .nav-badge { display: none; }

/* ── Left Sidebar: User ── */
.sidebar-user { border-top: 1px solid var(--border); flex-shrink: 0; position: relative; }
.sidebar-user-info { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    cursor: pointer; transition: background var(--transition-fast); }
.sidebar-user-info:hover { background: var(--bg-hover); }
.user-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--blue);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-base); font-weight: 700; user-select: none; flex-shrink: 0; }
.sidebar-user-details { overflow: hidden; }
.sidebar-left.collapsed .sidebar-user-details { display: none; }
.sidebar-left.collapsed .sidebar-user-info { justify-content: center; padding: 12px 0; }
.sidebar-user-dropdown { display: none; position: absolute; bottom: 100%; left: 8px; right: 8px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown); z-index: 200; overflow: hidden; }
.sidebar-user.open .sidebar-user-dropdown { display: block; }
.sidebar-user-dropdown a { display: block; padding: 10px 16px; font-size: var(--font-size-base);
    color: var(--text2); transition: background .1s; text-decoration: none; }
.sidebar-user-dropdown a:hover { background: var(--bg-hover); color: var(--text); }

/* ── Right Sidebar: Operations Panel ── */
.ops-header { display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4); height: 56px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ops-title { font-size: var(--font-size-base); font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text2); }
.sidebar-right.collapsed .ops-header,
.sidebar-right.collapsed .ops-section { display: none; }
.ops-section { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ops-section-label { font-size: var(--font-size-xs); color: var(--text3); text-transform: uppercase;
    letter-spacing: 1.2px; font-weight: 600; margin-bottom: var(--space-2);
    display: flex; align-items: center; gap: 6px; }
.ops-count { background: var(--orange); color: #fff; font-size: var(--font-size-xs); font-weight: 700;
    padding: 0 5px; border-radius: 6px; min-width: 16px; text-align: center; }
.ops-count.zero { background: var(--green); }
.ops-mode-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 6px; }
.ops-mode-buttons { display: flex; gap: 3px; margin-bottom: 6px; }
.ops-mode-btn { padding: 3px 0; flex: 1; border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg); color: var(--text3); font-size: 9px; font-weight: 700;
    cursor: pointer; transition: all .12s; letter-spacing: 0.5px; text-align: center; }
.ops-mode-btn:hover { border-color: var(--text2); color: var(--text); }
.ops-mode-btn.active { color: #fff; }
.ops-mode-normal.active { background: var(--green); border-color: var(--green); }
.ops-mode-cautious.active { background: var(--orange); border-color: var(--orange); }
.ops-mode-manual.active { background: var(--blue); border-color: var(--blue); }
.ops-mode-paused.active { background: var(--purple); border-color: var(--purple); }
.ops-mode-emergency.active { background: var(--red); border-color: var(--red); }
.ops-mode-text { font-weight: 700; font-size: var(--font-size-lg); }
.ops-level-text { font-size: var(--font-size-sm); color: var(--text3); }
.ops-link { font-size: var(--font-size-sm); color: var(--text3); text-decoration: none; transition: color var(--transition-fast); }
.ops-link:hover { color: var(--blue); }
.ops-ok-text { font-size: var(--font-size-sm); color: var(--green); font-weight: 600; }
.ops-breaker-item { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); padding: 3px 0; color: var(--red); font-weight: 600; }
.ops-breaker-item .status-dot { width: 6px; height: 6px; }
.ops-approval-item { padding: 6px 0; border-bottom: 1px solid rgba(48,54,61,.4); font-size: var(--font-size-sm); }
.ops-approval-item:last-child { border-bottom: none; }
.ops-approval-row { display: flex; justify-content: space-between; align-items: center; }
.ops-approval-actions { margin-top: var(--space-1); display: flex; gap: var(--space-1); }
.ops-approval-actions button { font-size: var(--font-size-xs); padding: 2px 8px; border: 1px solid var(--border);
    background: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; transition: all var(--transition-fast); }
.ops-approval-actions .btn-approve { color: var(--green); }
.ops-approval-actions .btn-approve:hover { background: rgba(63,185,80,.12); border-color: var(--green); }
.ops-approval-actions .btn-reject { color: var(--red); }
.ops-approval-actions .btn-reject:hover { background: rgba(248,81,73,.12); border-color: var(--red); }
.ops-trade-item { display: flex; align-items: center; gap: 6px; padding: 3px 0;
    font-size: var(--font-size-sm); border-bottom: 1px solid rgba(48,54,61,.3); }
.ops-trade-item:last-child { border-bottom: none; }
.ops-trade-side { font-size: var(--font-size-xs); font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.ops-trade-side.buy { background: rgba(63,185,80,.12); color: var(--green); }
.ops-trade-side.sell { background: rgba(248,81,73,.12); color: var(--red); }
.ops-health-item { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); padding: 2px 0; }
.ops-health-item .status-dot { width: 6px; height: 6px; }
.ops-health-detail { color: var(--text3); font-size: var(--font-size-xs); margin-left: auto; }

/* ── Right sidebar toggle tab ── */
.ops-toggle-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    width: 24px; height: 48px; background: var(--bg-card); border: 1px solid var(--border);
    border-right: none; border-radius: 6px 0 0 6px; cursor: pointer;
    display: none; align-items: center; justify-content: center; z-index: 99;
    color: var(--text3); transition: color var(--transition-base); }
.ops-toggle-tab:hover { color: var(--text); }
body.right-collapsed .ops-toggle-tab { display: flex; }

/* ── Mobile Top Bar ── */
.topbar-mobile { display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px;
    background: var(--bg-card); border-bottom: 1px solid var(--border); z-index: 90;
    padding: 0 12px; align-items: center; gap: var(--space-2); }
.brand-text-mobile { font-weight: 800; font-size: 18px; letter-spacing: -0.8px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; display: flex; align-items: center; gap: var(--space-2); }
.brand-text-mobile .dot { width: 8px; height: 8px; border-radius: var(--radius-full);
    background: var(--green); box-shadow: var(--shadow-glow-green); }
.global-status { display: flex; align-items: center; gap: 6px; margin-left: auto;
    font-size: var(--font-size-sm); flex-shrink: 0; }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); flex-shrink: 0; }
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--text2); margin: 4px 0; border-radius: 1px; transition: .2s; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; }

/* ── Mobile Bottom Bar ── */
.bottom-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 60px;
    background: var(--bg-card); border-top: 1px solid var(--border);
    z-index: 800; padding: 4px 0; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
.bottom-bar a { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; color: var(--text3); font-size: var(--font-size-xs);
    font-weight: 500; text-decoration: none; min-height: 44px; transition: color var(--transition-base); }
.bottom-bar a:hover { color: var(--text); }
.bottom-bar a.active { color: var(--blue); }
.bottom-bar a svg { opacity: .7; }
.bottom-bar a.active svg { opacity: 1; }