/* ═══════════════════════════════════════════════════════════════════════
   BWT Command Center & Performance Lab — Global Styles with Light/Dark Theme Support
   Brand: Blue Wave Trading — #0353A3, #07204a, #1b5bc2
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Theme custom properties ──────────────────────────────────────────── */

/* Light mode (default for data-bs-theme="light") */
:root,
[data-bs-theme="light"] {
    /* Sidebar — always dark navy in both modes */
    --bwt-sidebar-bg: #07204a;
    --bwt-sidebar-text: #ffffff;
    --bwt-sidebar-muted: rgba(255,255,255,0.55);
    --bwt-sidebar-hover: rgba(255,255,255,0.08);
    --bwt-sidebar-active: rgba(255,255,255,0.15);
    --bwt-sidebar-border: rgba(255,255,255,0.12);

    /* Header bar */
    --bwt-header-bg: #ffffff;
    --bwt-header-text: #212327;
    --bwt-header-border: #e2e8f0;

    /* Body / main content */
    --bwt-body-bg: #f7f9fc;
    --bwt-body-text: #212327;

    /* Muted text */
    --bwt-muted: #64748b;

    /* Cards */
    --bwt-card-bg: #ffffff;
    --bwt-card-header-bg: #f1f5f9;
    --bwt-card-border: #e2e8f0;

    /* Accent */
    --bwt-accent: #0353A3;
    --bwt-accent-hover: #1b5bc2;
}

/* Dark mode */
[data-bs-theme="dark"] {
    /* Sidebar — same dark navy */
    --bwt-sidebar-bg: #07204a;
    --bwt-sidebar-text: #ffffff;
    --bwt-sidebar-muted: rgba(255,255,255,0.55);
    --bwt-sidebar-hover: rgba(255,255,255,0.08);
    --bwt-sidebar-active: rgba(255,255,255,0.15);
    --bwt-sidebar-border: rgba(255,255,255,0.12);

    /* Header bar */
    --bwt-header-bg: #0f1d32;
    --bwt-header-text: #e2e8f0;
    --bwt-header-border: #1e3050;

    /* Body / main content */
    --bwt-body-bg: #0b1929;
    --bwt-body-text: #e2e8f0;

    /* Muted text */
    --bwt-muted: #94a3b8;

    /* Cards */
    --bwt-card-bg: #111d2e;
    --bwt-card-header-bg: #152238;
    --bwt-card-border: #1e3050;

    /* Accent */
    --bwt-accent: #3b82f6;
    --bwt-accent-hover: #60a5fa;
}

/* ── Base styles ──────────────────────────────────────────────────────── */

html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    background: var(--bwt-body-bg);
    color: var(--bwt-body-text);
}

/* ── DxDrawer sidebar ────────────────────────────────────────────────── */

.bwt-drawer .dxbl-drawer-panel {
    background: var(--bwt-sidebar-bg) !important;
}

/* Pin footer to bottom of drawer — body scrolls, header+footer stay fixed.
   Target the panel itself as the flex container (not a child div — DevExpress
   may restructure its internal wrapper between versions). */
.bwt-drawer .dxbl-drawer-panel {
    display: flex !important;
    flex-direction: column !important;
}

.bwt-drawer .dxbl-drawer-header {
    flex-shrink: 0 !important;
}

.bwt-drawer .dxbl-drawer-body {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
}

.bwt-drawer .dxbl-drawer-footer {
    flex-shrink: 0 !important;
    border-top: 1px solid var(--bwt-sidebar-border);
}

/* ── Sidebar footer profile link ─────────────────────────────────────── */

.bwt-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--bwt-sidebar-border);
    color: var(--bwt-sidebar-muted);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.bwt-sidebar-profile:hover {
    background: var(--bwt-sidebar-hover);
    color: var(--bwt-sidebar-text);
    text-decoration: none;
}

.bwt-sidebar-profile-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bwt-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Force drawer panel width on mobile — DxDrawer's Width parameter can miss
   the first render when isMobile flips from false→true after JS runs */
@media (max-width: 767.98px) {
    .bwt-drawer .dxbl-drawer-panel {
        width: 210px !important;
        min-width: 210px !important;
    }
}

/* ── DxMenu inside drawer ────────────────────────────────────────────── */

.bwt-sidebar-menu {
    background: transparent !important;
    border: none !important;
    padding: 0.5rem 0;
}

/* ── Sidebar separator + product label ───────────────────────────────── */

.bwt-sidebar-separator {
    height: 1px;
    background: var(--bwt-sidebar-border);
    margin: 0.25rem 1rem;
}

.bwt-sidebar-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--bwt-sidebar-muted);
    padding: 0.4rem 1rem 0.15rem;
}

/* Menu items — bwt-menu-item is applied via CssClass on every DxMenuItem,
   landing on the dxbl-menu-item li element. These rules give items clear,
   readable text at rest and full-white on hover/active. */
.bwt-sidebar-menu .dxbl-menu-item > .dxbl-btn,
.bwt-menu-item > .dxbl-btn {
    color: rgba(255,255,255,0.82) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 4px !important;
    margin: 1px 0.5rem !important;
    transition: background 0.15s, color 0.15s;
    justify-content: flex-start !important;
}

.bwt-sidebar-menu .dxbl-menu-item > .dxbl-btn:hover,
.bwt-menu-item > .dxbl-btn:hover {
    color: var(--bwt-sidebar-text) !important;
    background: var(--bwt-sidebar-hover) !important;
}

/* Active / selected menu item */
.bwt-sidebar-menu .dxbl-menu-item.dxbl-active > .dxbl-btn,
.bwt-sidebar-menu .dxbl-menu-item > .dxbl-btn.dxbl-active,
.bwt-menu-item.dxbl-active > .dxbl-btn {
    color: var(--bwt-sidebar-text) !important;
    background: var(--bwt-sidebar-active) !important;
    font-weight: 600 !important;
}

/* Remove default DevExpress menu borders/backgrounds */
.bwt-sidebar-menu .dxbl-menu-item,
.bwt-menu-item {
    border: none !important;
}

/* ── Hamburger toggle button ─────────────────────────────────────────── */

.bwt-hamburger {
    background: transparent;
    border: none;
    color: var(--bwt-header-text);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    line-height: 1;
    display: none; /* hidden on desktop */
}

.bwt-hamburger:hover {
    background: rgba(0,0,0,0.05);
}

@media (max-width: 767.98px) {
    .bwt-hamburger {
        display: inline-flex;
    }
}

/* ── Profit/loss coloring helpers ─────────────────────────────────────── */
.text-profit { color: #28a745; }
.text-loss   { color: #dc3545; }

/* ── Sticky journal panel ─────────────────────────────────────────────── */
.sticky-top { top: 80px; }

/* ── DevExpress grid tweaks ───────────────────────────────────────────── */
.dxbl-grid {
    border-radius: 6px;
    overflow: hidden;
}

/* Center all grid column headers */
.dxbl-grid .dxbl-grid-header-content {
    justify-content: center;
    text-align: center;
}

/* Stacked icon + abbreviation for indicator column headers */
.bwt-grid-icon-hdr {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    gap: 1px;
}
.bwt-grid-icon-hdr .bwt-icon-label {
    font-size: 0.6rem;
    opacity: 0.7;
    letter-spacing: 0.02em;
}

/* Center all items in trade detail header card */
.bwt-trade-header > .col-auto {
    text-align: center;
}

/* Fix oversized sort arrow icon in grid column headers */
.dxbl-grid-sort-desc svg,
.dxbl-grid-sort-asc svg {
    width: 12px;
    height: 12px;
}

/* Safety cap: prevent DevExtreme icon font from inheriting large font sizes */
.dx-icon,
.dxd-icon,
.dx-button-content .dx-icon {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
}

/* ── Theme toggle button ──────────────────────────────────────────────── */
.bwt-theme-toggle {
    background: transparent;
    border: 1px solid var(--bwt-sidebar-border);
    color: var(--bwt-sidebar-muted);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bwt-theme-toggle:hover {
    background: var(--bwt-sidebar-hover);
    color: var(--bwt-sidebar-text);
}

/* ── Card theming ─────────────────────────────────────────────────────── */
.card {
    background: var(--bwt-card-bg);
    border-color: var(--bwt-card-border);
}

/* ── Header bar theming ───────────────────────────────────────────────── */
.bwt-header {
    background: var(--bwt-header-bg);
    border-bottom: 1px solid var(--bwt-header-border);
    color: var(--bwt-header-text);
}

/* ── Daily Journal Calendar (custom grid, replaces DxScheduler) ─────────── */

.bwt-jcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr) 12px 1fr;
    gap: 5px;
}

/* Weekly summary cell */
.bwt-jcal-week-summary {
    border-radius: 7px;
    padding: 7px 8px 9px;
    min-height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: default;
    pointer-events: none;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
}

.bwt-jcal-week-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bwt-muted);
    line-height: 1;
}

.bwt-jcal-week-pnl {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: auto;
    padding-top: 4px;
}

.bwt-jcal-week-trades {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 3px;
    line-height: 1;
}

.bwt-jcal-week-wl {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.40);
    margin-top: 2px;
    line-height: 1;
}

.bwt-jcal-dow {
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bwt-muted);
    padding: 4px 0 6px;
}

.bwt-jcal-cell {
    border-radius: 7px;
    padding: 7px 8px 9px;
    min-height: 95px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: filter 0.15s, transform 0.12s;
    border: 1.5px solid transparent;
    position: relative;
    overflow: hidden;
}

.bwt-jcal-cell:hover {
    filter: brightness(1.18);
    transform: scale(1.025);
    z-index: 1;
}

.bwt-jcal-empty {
    background: transparent !important;
    border-color: transparent !important;
    cursor: default;
    pointer-events: none;
}

/* Cell color variants */
.bwt-jcal-no-trade {
    background: var(--bwt-card-header-bg);
    border-color: rgba(255, 255, 255, 0.05);
}

.bwt-jcal-win {
    background: rgba(28, 85, 45, 0.60);
    border-color: rgba(76, 175, 80, 0.70);
}

.bwt-jcal-win-strong {
    background: rgba(20, 100, 40, 0.90);
    border-color: rgba(76, 175, 80, 1.00);
}

.bwt-jcal-loss {
    background: rgba(110, 18, 18, 0.60);
    border-color: rgba(229, 57, 53, 0.65);
}

.bwt-jcal-loss-strong {
    background: rgba(140, 10, 10, 0.90);
    border-color: rgba(229, 57, 53, 1.00);
}

.bwt-jcal-breakeven {
    background: rgba(100, 100, 120, 0.22);
    border-color: rgba(160, 160, 180, 0.35);
}

.bwt-jcal-holiday-cell {
    background: rgba(255, 152, 0, 0.07);
    border-color: rgba(255, 152, 0, 0.22);
    cursor: pointer;
}

/* Top row: indicators left, day number right */
.bwt-jcal-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2px;
}

.bwt-jcal-indicators {
    display: flex;
    gap: 2px;
    font-size: 0.78rem;
    line-height: 1;
    min-width: 0;
}

.bwt-jcal-daynum {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
    flex-shrink: 0;
}

/* Today: circled day number */
.bwt-jcal-today-badge {
    background: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.80rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* P&L amount — large, bold, white */
.bwt-jcal-pnl {
    font-size: 1.28rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin-top: auto;
    padding-top: 4px;
}

/* Trade count — second row, smaller, muted white */
.bwt-jcal-trade-count {
    font-size: 0.80rem;
    color: rgba(255, 255, 255, 0.60);
    margin-top: 3px;
    line-height: 1;
}

/* Holiday label */
.bwt-jcal-holiday-label {
    font-size: 0.70rem;
    color: rgba(255, 152, 0, 0.85);
    font-style: italic;
    margin-top: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .bwt-jcal-cell         { min-height: 72px; padding: 5px 6px 7px; }
    .bwt-jcal-pnl          { font-size: 1.04rem; }
    .bwt-jcal-trade-count  { font-size: 0.70rem; }
    .bwt-jcal-week-summary { min-height: 72px; padding: 5px 6px 7px; }
    .bwt-jcal-week-pnl     { font-size: 0.92rem; }
    .bwt-jcal-week-trades  { font-size: 0.68rem; }
}

@media (max-width: 575.98px) {
    .bwt-jcal-grid         { grid-template-columns: repeat(7, 1fr) 6px 1fr; }
    .bwt-jcal-cell         { min-height: 54px; padding: 3px 4px 5px; }
    .bwt-jcal-pnl          { font-size: 0.75rem; }
    .bwt-jcal-trade-count  { display: none; }
    .bwt-jcal-indicators   { display: none; }
    .bwt-jcal-week-summary { min-height: 54px; padding: 3px 4px 5px; }
    .bwt-jcal-week-pnl     { font-size: 0.68rem; }
    .bwt-jcal-week-trades  { display: none; }
    .bwt-jcal-week-wl      { display: none; }
}

/* ── Trading Rules Scorecard ───────────────────────────────────────── */
.bwt-rules-overall {
    border-top: 3px solid var(--bwt-accent, #6366f1);
}

/* ── Avatar circle (header) ─────────────────────────────────────────── */
.bwt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bwt-accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: opacity 0.15s;
}
.bwt-avatar:hover {
    opacity: 0.85;
    color: #fff;
}

/* ── Notification bell toggle ───────────────────────────────────────── */

.bwt-notification-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--bwt-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}
.bwt-notification-bell:hover:not(:disabled) {
    color: var(--bwt-header-text);
    background: var(--bwt-card-bg);
}
.bwt-notification-bell.active {
    color: var(--bwt-accent);
}
.bwt-notification-bell.active:hover {
    color: var(--bwt-accent);
    opacity: 0.85;
}
.bwt-notification-bell:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Notification Bell + Dropdown ──────────────────────────────────── */
.bwt-notif-wrapper {
    position: relative;
    display: inline-flex;
}
.bwt-notif-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--bwt-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    padding: 0;
    position: relative;
}
.bwt-notif-bell:hover { color: var(--bwt-header-text); background: var(--bwt-card-bg); }
.bwt-notif-bell.active { color: var(--bwt-accent); }

.bwt-notif-badge {
    position: absolute;
    top: 0; right: -2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #dc3545;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

.bwt-notif-dropdown {
    position: fixed;
    width: 350px;
    max-height: 480px;
    background: var(--bwt-card-bg);
    border: 1px solid var(--bwt-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bwt-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bwt-border);
    font-size: 0.85rem;
}
.bwt-notif-settings-btn {
    background: none; border: none; padding: 2px;
    color: var(--bwt-muted); cursor: pointer; border-radius: 4px;
}
.bwt-notif-settings-btn:hover { color: var(--bwt-header-text); background: var(--bwt-border); }
@media (max-width: 767px) {
    .bwt-notif-settings-btn {
        padding: 10px;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


@media (max-width: 599px) {
    .bwt-notif-prefs-popup {
        right: 8px !important;
        left: auto !important;
        transform: none !important;
    }
}

.bwt-notif-list {
    overflow-y: auto;
    flex: 1;
}
.bwt-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 8px;
}
.bwt-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--bwt-border);
}
.bwt-notif-item:last-child { border-bottom: none; }
.bwt-notif-item:hover { background: var(--bwt-bg); }
.bwt-notif-item.unread {
    border-left: 3px solid var(--bwt-accent);
    padding-left: 11px;
}
.bwt-notif-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    padding-top: 1px;
}
.bwt-notif-content {
    flex: 1;
    min-width: 0;
}
.bwt-notif-title {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bwt-notif-body {
    font-size: 0.72rem;
    color: var(--bwt-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bwt-notif-time {
    font-size: 0.65rem;
    color: var(--bwt-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

/* ── Mentee pages ────────────────────────────────────────────────────── */

.bwt-mentee-banner {
    background: var(--bwt-accent);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.bwt-mentee-card {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.bwt-mentee-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}

/* ── Blazor reconnect modal ──────────────────────────────────────────── */

/* Hidden by default; Blazor adds state classes to show */
#components-reconnect-modal {
    display: none;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

/* Full-screen backdrop */
.bwt-reconnect-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Centered dialog card — hardcoded dark so it works regardless of theme state/CSS-var timing */
.bwt-reconnect-dialog {
    background: #1e2d42;
    color: #e2e8f0;
    border: 1px solid #1e3050;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    padding: 2rem 2.5rem;
    min-width: 280px;
    max-width: 380px;
    text-align: center;
}

/* State sections — show only the relevant one */
.bwt-reconnect-body { display: none; }

#components-reconnect-modal.components-reconnect-show    .bwt-reconnect-body.reconnecting { display: flex; flex-direction: column; align-items: center; }
#components-reconnect-modal.components-reconnect-failed  .bwt-reconnect-body.failed      { display: flex; flex-direction: column; align-items: center; }
#components-reconnect-modal.components-reconnect-rejected .bwt-reconnect-body.rejected   { display: flex; flex-direction: column; align-items: center; }

.bwt-reconnect-icon {
    color: inherit;
}
.bwt-reconnect-title {
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.25rem;
}
.bwt-reconnect-sub {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}
.bwt-reconnect-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* Blazor .NET 9 may inject its own reconnect overlay element — style it dark too.
   Targets the default Blazor reconnect UI when #components-reconnect-modal is not used. */
blazor-reconnect-overlay,
[id^="blazor-reconnect"] {
    --blazor-reconnect-overlay-background: rgba(0, 0, 0, 0.65) !important;
    --blazor-reconnect-dialog-background: #1e2d42 !important;
    --blazor-reconnect-dialog-color: #e2e8f0 !important;
    --blazor-reconnect-dialog-border: #1e3050 !important;
}

/* ── EcoNews Panel ───────────────────────────────────────────────────── */

.eco-impact-high {
    background: #E53935;
    color: #ffffff;
}

.eco-impact-medium {
    background: #FFC107;
    color: #1A1A1A;
}

.eco-impact-low {
    background: #2196F3;
    color: #ffffff;
}

.eco-impact-holiday {
    background: var(--bwt-card-border);
    color: var(--bwt-muted);
}

/* News list item hover */
.eco-news-item:hover {
    background: var(--bwt-card-header-bg);
}

/* Slim scrollbar for the news list */
.eco-news-list::-webkit-scrollbar {
    width: 6px;
}
.eco-news-list::-webkit-scrollbar-thumb {
    background: var(--bwt-card-border);
    border-radius: 3px;
}

/* ── Market Status Panel ─────────────────────────────────────────────── */

.mkt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mkt-dot.mkt-status-open     { background: #4CAF50; box-shadow: 0 0 4px rgba(76, 175, 80, 0.5); }
.mkt-dot.mkt-status-extended { background: #FFC107; box-shadow: 0 0 4px rgba(255, 193, 7, 0.4); }
.mkt-dot.mkt-status-closed   { background: #9E9E9E; }
.mkt-dot.mkt-status-holiday  { background: #E53935; }

.mkt-status-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.mkt-status-badge.mkt-status-open {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
}

.mkt-status-badge.mkt-status-extended {
    background: rgba(255, 193, 7, 0.15);
    color: #d4a017;
}

[data-bs-theme="dark"] .mkt-status-badge.mkt-status-extended {
    color: #FFC107;
}

.mkt-status-badge.mkt-status-closed {
    background: rgba(158, 158, 158, 0.12);
    color: var(--bwt-muted);
}

.mkt-status-badge.mkt-status-holiday {
    background: rgba(229, 57, 53, 0.12);
    color: #E53935;
}

.mkt-region-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bwt-muted);
    padding: 4px 0 2px 0;
    border-bottom: 1px solid var(--bwt-card-border);
    margin-bottom: 2px;
}

.mkt-region-label:not(:first-child) {
    margin-top: 6px;
}

.mkt-row {
    padding: 3px 0;
    font-size: 0.8rem;
}

.mkt-row:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .mkt-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Sticky sidebar — only on lg+ when the column layout is active */
@media (min-width: 992px) {
    .position-lg-sticky {
        position: sticky !important;
        top: 1rem;
    }
}

/* ── Chart expand / collapse buttons ─────────────────────────────────── */

.bwt-chart-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--bwt-card-border);
    border-radius: 6px;
    background: transparent;
    color: var(--bwt-body-text);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.bwt-chart-expand-btn:hover {
    background: var(--bwt-accent);
    color: #ffffff;
    border-color: var(--bwt-accent);
}

.bwt-chart-expand-btn svg {
    width: 18px;
    height: 18px;
}

/* ── Stop loosening indicator (red pill in trade grids) ───────────── */
.bwt-stop-loosening-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #dc3545;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: help;
}

/* ── Target reduction indicator (orange pill in trade grids) ─────── */
.bwt-target-reduction-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #fd7e14;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: help;
}

/* ── Manual intervention indicator (yellow pill in trade grids) ──── */
.bwt-intervention-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #FFC107;
    color: #1A1A1A;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: help;
}

/* ── Dark-theme contrast fixes ──────────────────────────────────────
   Ensure buttons, close icons, badges, and read-only panels remain
   readable against dark card backgrounds.
   ──────────────────────────────────────────────────────────────────── */

/* Close button (X) — Bootstrap 5.3 dark mode already uses a white SVG fill;
   just raise opacity (default 0.5 is too faint on dark card headers) */
[data-bs-theme="dark"] .btn-close {
    filter: none !important;
    opacity: 0.75 !important;
}
[data-bs-theme="dark"] .btn-close:hover {
    opacity: 1 !important;
}

/* Disabled outline-secondary buttons (read-only rating buttons) */
[data-bs-theme="dark"] .btn-outline-secondary:disabled,
[data-bs-theme="dark"] .btn-outline-secondary.disabled {
    color: var(--bwt-muted);
    border-color: #334155;
    opacity: 0.8;
}

/* Disabled outline-danger buttons (clear ✕) */
[data-bs-theme="dark"] .btn-outline-danger:disabled,
[data-bs-theme="dark"] .btn-outline-danger.disabled {
    color: #f87171;
    border-color: #7f1d1d;
    opacity: 0.6;
}

/* Disabled tag buttons (custom inline-styled tag chips) */
[data-bs-theme="dark"] .btn:disabled:not(.btn-primary):not(.btn-warning):not(.btn-outline-secondary):not(.btn-outline-danger) {
    opacity: 0.65;
}

/* bg-light panels (read-only journal notes) — use card surface in dark mode */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bwt-card-header-bg) !important;
    color: var(--bwt-body-text) !important;
}

/* card-header text color for dark theme */
[data-bs-theme="dark"] .card-header {
    color: var(--bwt-body-text);
}

/* form-label text color for dark theme */
[data-bs-theme="dark"] .form-label {
    color: var(--bwt-body-text);
}

/* ── PWA standalone mode ─────────────────────────────────────────────
   Safe area insets for notched phones (iPhone, Galaxy) and
   adjustments when running as an installed home screen app.
   ──────────────────────────────────────────────────────────────────── */

/* Respect notch / home indicator safe areas */
html {
    padding: env(safe-area-inset-top)
             env(safe-area-inset-right)
             env(safe-area-inset-bottom)
             env(safe-area-inset-left);
}

/* When installed as PWA (no browser chrome), tighten header padding */
@media (display-mode: standalone) {
    .bwt-header {
        padding-top: env(safe-area-inset-top);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Dashboard — KPI Cards, Progress Bars, Calendar Heatmap
   ═══════════════════════════════════════════════════════════════════════ */

/* ── KPI Card base styling ─────────────────────────────────────────── */

.bwt-kpi-card {
    border: 1px solid var(--bwt-card-border);
    transition: transform 0.15s, box-shadow 0.15s;
}

.bwt-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.08) !important;
}

[data-bs-theme="dark"] .bwt-kpi-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3) !important;
}

/* ── KPI Progress Bar (Profit Factor) ──────────────────────────────── */

.bwt-kpi-bar {
    position: relative;
    height: 6px;
    background: var(--bwt-card-border);
    border-radius: 3px;
    overflow: visible;
}

.bwt-kpi-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.bwt-kpi-bar-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 10px;
    background: var(--bwt-body-text);
    opacity: 0.4;
    border-radius: 1px;
}

/* ── KPI Comparison Bar (Avg Win / Avg Loss) ───────────────────────── */

.bwt-kpi-comparison-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    gap: 2px;
}

.bwt-kpi-comparison-win {
    background: #4CAF50;
    border-radius: 4px 0 0 4px;
    transition: width 0.6s ease;
}

.bwt-kpi-comparison-loss {
    background: #E53935;
    border-radius: 0 4px 4px 0;
    transition: width 0.6s ease;
}

/* ── KPI Circular Progress (Day Win %) ─────────────────────────────── */

.bwt-kpi-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(
        #4CAF50 calc(var(--pct) * 1%),
        var(--bwt-card-border) calc(var(--pct) * 1%)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bwt-kpi-circle-value {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bwt-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bwt-body-text);
}

/* ── Dashboard Calendar Heatmap ────────────────────────────────────── */

.bwt-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.bwt-cal-header {
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--bwt-muted);
    padding: 2px 0 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bwt-cal-cell {
    border-radius: 5px;
    padding: 4px 5px 5px;
    display: flex;
    flex-direction: column;
    cursor: default;
    transition: transform 0.1s;
    min-height: 56px;
    border: 1.5px solid transparent;
}

.bwt-cal-cell:not(.bwt-cal-empty):hover {
    transform: scale(1.06);
    z-index: 1;
}

.bwt-cal-empty {
    background: transparent;
    border-color: transparent;
}

/* Day number — top-right corner, small, muted */
.bwt-cal-day-num {
    font-weight: 600;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.40);
    line-height: 1;
    text-align: right;
    align-self: flex-end;
}

/* P&L amount — larger, bold, colored */
.bwt-cal-pnl {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: auto;
    padding-top: 2px;
}

/* Trade count — second row, muted */
.bwt-cal-trades {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1;
    margin-top: 2px;
}

/* Heatmap color classes — stronger backgrounds + colored borders */
.bwt-cal-profit-strong { background: rgba(28, 85, 45, 0.55);  border-color: rgba(76, 175, 80, 0.70); }
.bwt-cal-profit-light  { background: rgba(28, 85, 45, 0.25);  border-color: rgba(76, 175, 80, 0.40); }
.bwt-cal-loss-strong   { background: rgba(110, 18, 18, 0.55); border-color: rgba(229, 57, 53, 0.65); }
.bwt-cal-loss-light    { background: rgba(110, 18, 18, 0.22); border-color: rgba(229, 57, 53, 0.38); }
.bwt-cal-breakeven     { background: rgba(100, 100, 120, 0.18); border-color: rgba(160, 160, 180, 0.30); }
.bwt-cal-no-trade      { background: var(--bwt-card-header-bg); border-color: rgba(255, 255, 255, 0.04); }

/* Calendar legend swatches */
.bwt-cal-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
}

/* ── Recent Trades table ───────────────────────────────────────────── */

.cursor-pointer { cursor: pointer; }

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td {
    background-color: var(--bwt-card-header-bg);
}

/* ── Dashboard responsive adjustments ──────────────────────────────── */

@media (max-width: 767.98px) {
    .bwt-cal-cell {
        min-height: 38px;
        padding: 3px;
    }
    .bwt-cal-pnl    { font-size: 0.62rem; }
    .bwt-cal-trades { display: none; }
    .bwt-kpi-circle { width: 44px; height: 44px; }
    .bwt-kpi-circle-value { width: 34px; height: 34px; font-size: 0.6rem; }
}

/* ── Dashboard Stats Tabs (Summary / Days / Trades) ────────────────── */

.bwt-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1px;
    background: var(--bwt-card-border);
    border-radius: 6px;
    overflow: hidden;
}

.bwt-stat-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bwt-card-bg);
    min-height: 44px;
}

.bwt-stat-label {
    font-size: 0.78rem;
    color: var(--bwt-muted);
    white-space: nowrap;
}

.bwt-stat-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bwt-body-text);
    text-align: right;
    white-space: nowrap;
}

/* Win/loss scale bar */
.bwt-scale-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    max-width: 200px;
}

.bwt-scale-win  { background: #4CAF50; }
.bwt-scale-loss { background: #E53935; }

/* Tab active accent */
.bwt-stats-tabs .nav-link.active {
    border-bottom: 2px solid var(--bwt-accent) !important;
    color: var(--bwt-accent) !important;
    font-weight: 600;
}

.bwt-stats-tabs .nav-link {
    color: var(--bwt-muted);
    font-size: 0.85rem;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    transition: color 0.15s, border-color 0.15s;
}

.bwt-stats-tabs .nav-link:hover {
    color: var(--bwt-body-text);
}

/* ── AI Insights page ───────────────────────────────────────────────── */

.ai-disclaimer-scroll {
    max-height: 320px;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--bwt-card-border);
    border-radius: 6px;
    background: var(--bwt-body-bg);
    font-size: 0.875rem;
    line-height: 1.6;
}

.ai-disclaimer-scroll h6 {
    color: var(--bwt-body-text);
}

.ai-disclaimer-scroll p {
    color: var(--bwt-muted);
    margin-bottom: 12px;
}

.ai-insights-content {
    font-size: 0.9rem;
    line-height: 1.7;
}

.ai-insights-content h5 {
    border-bottom: 1px solid var(--bwt-card-border);
    padding-bottom: 6px;
}

.ai-insights-content ul {
    padding-left: 1.25rem;
}

.ai-insights-content li {
    margin-bottom: 4px;
}

.ai-insights-content strong {
    color: var(--bwt-accent);
}

.ai-insights-content code {
    background: var(--bwt-body-bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}

/* ══════════════════════════════════════════════════════════════════════════
   AI Chat — "Ask the AI" page styles
   ══════════════════════════════════════════════════════════════════════════ */

.ai-chat-container {
    display: flex;
    height: calc(100vh - 64px);
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.ai-chat-sidebar {
    width: 260px;
    min-width: 260px;
    border-right: 1px solid var(--bwt-border-color, rgba(255,255,255,0.1));
    display: flex;
    flex-direction: column;
    background: var(--bwt-card-bg, #1a1a2e);
    overflow: hidden;
}

.ai-chat-sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bwt-border-color, rgba(255,255,255,0.1));
    flex-shrink: 0;
}

.ai-chat-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.ai-chat-session-item {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 2px;
    transition: background 0.15s;
    font-size: 0.85rem;
}

.ai-chat-session-item:hover {
    background: rgba(255,255,255,0.06);
}

.ai-chat-session-item.active {
    background: var(--bwt-accent, #2196F3);
    color: #fff;
}

.ai-chat-session-item .session-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
    line-height: 1.3;
}

.ai-chat-session-item .session-date {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 2px;
}

/* ── Main Chat Area ──────────────────────────────────────────────────── */

.ai-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    scroll-behavior: smooth;
}

/* ── Message Bubbles ─────────────────────────────────────────────────── */

.ai-msg {
    margin-bottom: 16px;
    display: flex;
}

.ai-msg-user {
    justify-content: flex-end;
}

.ai-msg-user .ai-msg-bubble {
    background: var(--bwt-accent, #2196F3);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
    padding: 10px 16px;
    max-width: 70%;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ai-msg-assistant {
    justify-content: flex-start;
}

.ai-msg-assistant .ai-msg-bubble {
    background: var(--bwt-card-bg, #1a1a2e);
    border: 1px solid var(--bwt-border-color, rgba(255,255,255,0.1));
    border-radius: 16px 16px 16px 4px;
    padding: 12px 16px;
    max-width: 85%;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Markdown content inside assistant bubbles */
.ai-msg-assistant .ai-msg-bubble h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 6px;
    color: var(--bwt-accent, #2196F3);
}

.ai-msg-assistant .ai-msg-bubble h2:first-child {
    margin-top: 0;
}

.ai-msg-assistant .ai-msg-bubble strong {
    color: var(--bwt-accent, #2196F3);
}

.ai-msg-assistant .ai-msg-bubble ul,
.ai-msg-assistant .ai-msg-bubble ol {
    margin: 4px 0;
    padding-left: 20px;
}

.ai-msg-assistant .ai-msg-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.85rem;
}

.ai-msg-assistant .ai-msg-bubble th,
.ai-msg-assistant .ai-msg-bubble td {
    border: 1px solid var(--bwt-border-color, rgba(255,255,255,0.15));
    padding: 4px 8px;
    text-align: left;
}

.ai-msg-assistant .ai-msg-bubble th {
    background: rgba(255,255,255,0.05);
    font-weight: 600;
}

/* ── Tool Call Indicator ─────────────────────────────────────────────── */

.ai-msg-tool {
    justify-content: flex-start;
}

.ai-msg-tool .ai-tool-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bwt-border-color, rgba(255,255,255,0.08));
    font-size: 0.8rem;
    color: var(--bwt-text-muted, #999);
}

.ai-msg-tool .ai-tool-indicator .spinner-border {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* ── Typing Cursor ───────────────────────────────────────────────────── */

.ai-typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--bwt-accent, #2196F3);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: bwtCursorBlink 0.8s step-end infinite;
}

@keyframes bwtCursorBlink {
    50% { opacity: 0; }
}

/* ── Chat Input Area ─────────────────────────────────────────────────── */

.ai-chat-input-area {
    padding: 12px 24px 16px;
    border-top: 1px solid var(--bwt-border-color, rgba(255,255,255,0.1));
    background: var(--bwt-body-bg, #0f0f1a);
    flex-shrink: 0;
}

.ai-chat-input-wrap {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 900px;
    margin: 0 auto;
}

.ai-chat-input-wrap textarea {
    flex: 1;
    resize: none;
    min-height: 44px;
    max-height: 160px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.9rem;
    background: var(--bwt-card-bg, #1a1a2e);
    border: 1px solid var(--bwt-border-color, rgba(255,255,255,0.15));
    color: inherit;
    line-height: 1.4;
    overflow-y: auto;
}

.ai-chat-input-wrap textarea:focus {
    outline: none;
    border-color: var(--bwt-accent, #2196F3);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
}

.ai-chat-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--bwt-accent, #2196F3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    flex-shrink: 0;
}

.ai-chat-send-btn:hover:not(:disabled) {
    background: #1976D2;
}

.ai-chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Welcome Screen / Prompt Cards ───────────────────────────────────── */

.ai-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 32px 24px;
    text-align: center;
}

.ai-chat-welcome h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.ai-chat-welcome .subtitle {
    font-size: 0.9rem;
    opacity: 0.6;
    margin-bottom: 28px;
}

.ai-prompt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    max-width: 800px;
    width: 100%;
}

.ai-prompt-card {
    background: var(--bwt-card-bg, #1a1a2e);
    border: 1px solid var(--bwt-border-color, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    text-align: left;
    font-size: 0.88rem;
    line-height: 1.4;
}

.ai-prompt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-color: var(--bwt-accent, #2196F3);
}

/* ── Chart Containers (inside messages) ──────────────────────────────── */

.ai-chart-container {
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    max-height: 380px;
    background: var(--bwt-body-bg, #0f0f1a);
    border: 1px solid var(--bwt-border-color, rgba(255,255,255,0.08));
}

/* ── Responsive: hide sidebar on mobile ──────────────────────────────── */

@media (max-width: 991.98px) {
    .ai-chat-sidebar {
        display: none;
    }
    .ai-chat-container {
        height: calc(100vh - 56px);
    }
    .ai-msg-user .ai-msg-bubble {
        max-width: 85%;
    }
    .ai-msg-assistant .ai-msg-bubble {
        max-width: 95%;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Gamification: BWT Score Gauge, Radar Charts, Streaks, Badges
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Radar Chart ──────────────────────────────────────────────────────── */

.bwt-radar-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bwt-radar-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: var(--bwt-body-text);
}

.bwt-radar-svg {
    width: 100%;
    max-width: 280px;
    height: auto;
}

/* ── BWT Score Gauge (CSS semicircle) ─────────────────────────────────── */

.bwt-gauge-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.bwt-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 220px;
}

.bwt-gauge-arc {
    position: relative;
    width: 200px;
    height: 110px;
    overflow: hidden;
    border-radius: 200px 200px 0 0;
    background: conic-gradient(
        from 0.75turn,
        #ef4444 0deg,
        #ef4444 36deg,
        #f59e0b 36deg,
        #f59e0b 72deg,
        #22c55e 72deg,
        #22c55e 126deg,
        #3b82f6 126deg,
        #3b82f6 180deg
    );
}

.bwt-gauge-arc::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 0;
    background: var(--bwt-card-bg, #ffffff);
    border-radius: 180px 180px 0 0;
}

.bwt-gauge-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 80px;
    transform-origin: bottom center;
    z-index: 3;
    margin-left: -1px;
}

.bwt-gauge-needle-line {
    width: 2px;
    height: 80px;
    background: var(--bwt-body-text, #212327);
    border-radius: 1px;
}

.bwt-gauge-score-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 4;
}

.bwt-gauge-score {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.bwt-gauge-label {
    font-size: 0.7rem;
    color: var(--bwt-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.bwt-gauge-score-low    { color: #ef4444; }
.bwt-gauge-score-mid    { color: #f59e0b; }
.bwt-gauge-score-good   { color: #22c55e; }
.bwt-gauge-score-elite  { color: #3b82f6; }

.bwt-gauge-legend {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--bwt-body-text);
}

.bwt-gauge-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bwt-gauge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* ── Streak Cards ─────────────────────────────────────────────────────── */

.bwt-streak-card {
    flex: 1 1 0;
    min-width: 100px;
    text-align: center;
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--bwt-card-bg, #ffffff);
    border: 1px solid var(--bwt-border-color, #e2e8f0);
    transition: transform 0.15s, box-shadow 0.15s;
}

.bwt-streak-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.bwt-streak-emoji {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.bwt-streak-count {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bwt-body-text);
    line-height: 1;
}

.bwt-streak-label {
    font-size: 0.72rem;
    color: var(--bwt-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.bwt-streak-best {
    font-size: 0.68rem;
    color: var(--bwt-muted);
    margin-top: 4px;
    opacity: 0.7;
}

/* ── Badge Pills (Recent Badges on Dashboard) ─────────────────────────── */

.bwt-badge-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--bwt-border-color, #e2e8f0);
    background: var(--bwt-card-bg, #ffffff);
    font-size: 0.82rem;
}

.bwt-badge-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.bwt-badge-name {
    font-weight: 600;
    flex: 1;
}

.bwt-badge-date {
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Tier colors */
.bwt-badge-tier-bronze  { border-left: 3px solid #cd7f32; }
.bwt-badge-tier-silver  { border-left: 3px solid #a8a8a8; }
.bwt-badge-tier-gold    { border-left: 3px solid #ffd700; }
.bwt-badge-tier-platinum { border-left: 3px solid #e5e4e2; }

/* ── Badge Gallery (Achievements Page) ─────────────────────────────────── */

.bwt-badge-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.bwt-badge-card {
    text-align: center;
    padding: 16px 12px;
    border-radius: 12px;
    border: 1px solid var(--bwt-border-color, #e2e8f0);
    background: var(--bwt-card-bg, #ffffff);
    transition: transform 0.15s, box-shadow 0.15s;
}

.bwt-badge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.bwt-badge-card-unearned {
    opacity: 0.45;
    filter: grayscale(100%);
}

.bwt-badge-card-unearned:hover {
    opacity: 0.6;
}

.bwt-badge-card-icon {
    font-size: 2.4rem;
    margin-bottom: 8px;
}

.bwt-badge-card-name {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 4px;
}

.bwt-badge-card-desc {
    font-size: 0.75rem;
    color: var(--bwt-muted);
    margin-bottom: 6px;
}

.bwt-badge-card-earned-date {
    font-size: 0.7rem;
    color: var(--bwt-accent, #0353A3);
    font-weight: 500;
}

.bwt-badge-card-locked {
    font-size: 0.7rem;
    color: var(--bwt-muted);
}

/* Tier background accents */
.bwt-badge-card-bronze  { border-bottom: 3px solid #cd7f32; }
.bwt-badge-card-silver  { border-bottom: 3px solid #a8a8a8; }
.bwt-badge-card-gold    { border-bottom: 3px solid #ffd700; }
.bwt-badge-card-platinum { border-bottom: 3px solid #e5e4e2; }

/* ── Tier Section Headers (Achievements Page) ──────────────────────────── */

.bwt-tier-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    margin-top: 20px;
}

.bwt-tier-header:first-child {
    margin-top: 0;
}

.bwt-tier-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bwt-tier-badge-bronze   { background: #cd7f32; color: #fff; }
.bwt-tier-badge-silver   { background: #a8a8a8; color: #fff; }
.bwt-tier-badge-gold     { background: #ffd700; color: #333; }
.bwt-tier-badge-platinum { background: linear-gradient(135deg, #e5e4e2, #b8b8b8); color: #333; }

.bwt-tier-line {
    flex: 1;
    height: 1px;
    background: var(--bwt-border-color, #e2e8f0);
}