/* ══════════════════════════════════════════════════════════════
   SIDEBAR ENHANCED — MarketLens AI
   ──────────────────────────────────────────────────────────────
   Place in: assets/sidebar_enhanced.css
   Dash auto-loads all CSS files from the assets/ directory.
   
   This file OVERRIDES the sidebar section of glassmorphism.css
   with a more refined, premium feel. No Python changes needed
   unless noted. Drop-in enhancement.
   
   Design system:
     ✅ Ambient glow — subtle radial gradient at top
     ✅ Gradient accent bar on active nav item
     ✅ Icon containers with glass border
     ✅ Hover translateX micro-interaction
     ✅ Gradient dividers
     ✅ JetBrains Mono for data/terminal elements
     ✅ Usage bar with gradient fill
     ✅ Contextual badges (LIVE / NEW / 🔒)
     ✅ Refined typography hierarchy
     ✅ System status card with pulse dot
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   FONT IMPORT — JetBrains Mono for data elements
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');


/* ══════════════════════════════════════════════════════════════
   SIDEBAR CONTAINER — Background + ambient glow
   ══════════════════════════════════════════════════════════════ */

/* Desktop only — do NOT apply position/border on mobile (responsive.css handles drawer) */
@media (min-width: 769px) {
    .sidebar-container {
        background: linear-gradient(
            180deg,
            rgba(8,12,22,1) 0%,
            rgba(6,10,18,1) 100%
        ) !important;
        border-right: 1px solid rgba(99,102,241,0.06) !important;
        position: relative !important;
    }
}

/* Background gradient applies on all sizes (safe — doesn't affect positioning) */
.sidebar-container {
    background: linear-gradient(
        180deg,
        rgba(8,12,22,1) 0%,
        rgba(6,10,18,1) 100%
    ) !important;
}

/* Ambient glow at the top (desktop only — overflows on mobile drawer) */
@media (min-width: 769px) {
    .sidebar-container::before {
        content: '' !important;
        position: absolute !important;
        top: -40px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 180px !important;
        height: 180px !important;
        background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR WRAP — Inner padding + z-index
   ══════════════════════════════════════════════════════════════ */

.sidebar-wrap {
    position: relative !important;
    z-index: 1 !important;
    padding: 20px 16px 16px !important;
    gap: 2px !important;
}


/* ══════════════════════════════════════════════════════════════
   LOGO — Gradient text + refined spacing
   ══════════════════════════════════════════════════════════════ */

.sidebar-logo {
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(135deg, #a5b4fc, #22d3ee, #34d399) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.sidebar-sub {
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #475569 !important;
    margin-top: -2px !important;
}

/* Logo icon box — gradient with shadow */
.sidebar-logo-icon,
.sidebar-wrap > div:first-child > div:first-child[style*="borderRadius"] {
    background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #34d399 100%) !important;
    box-shadow: 0 4px 16px rgba(99,102,241,0.25) !important;
    border-radius: 10px !important;
}


/* ══════════════════════════════════════════════════════════════
   USER BADGE — Glass card with usage bar
   ══════════════════════════════════════════════════════════════ */

/* User badge wrapper */
.sidebar-wrap > div[style*="borderRadius"][style*="background"]:has(#sidebar-logout-btn),
.sidebar-user-badge {
    background: rgba(15,23,42,0.5) !important;
    border: 0.5px solid rgba(99,102,241,0.08) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 12px 0 14px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Plan badge text */
.sidebar-wrap > div[style*="borderRadius"] span[style*="letterSpacing"],
.sidebar-plan-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #22d3ee !important;
    background: rgba(34,211,238,0.08) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

/* Logout / Upgrade buttons — refined */
#sidebar-logout-btn {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    border: 0.5px solid rgba(239,68,68,0.15) !important;
    background: rgba(239,68,68,0.04) !important;
    color: #f87171 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
#sidebar-logout-btn:hover {
    background: rgba(239,68,68,0.08) !important;
    border-color: rgba(239,68,68,0.25) !important;
}

#sidebar-upgrade-btn {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    border: 0.5px solid rgba(99,102,241,0.2) !important;
    background: rgba(99,102,241,0.06) !important;
    color: #818cf8 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
#sidebar-upgrade-btn:hover {
    background: rgba(99,102,241,0.12) !important;
    border-color: rgba(99,102,241,0.3) !important;
}


/* ══════════════════════════════════════════════════════════════
   DIVIDERS — Gradient fade instead of solid line
   ══════════════════════════════════════════════════════════════ */

.sidebar-wrap > div[style*="height: 1px"],
.sidebar-divider {
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(99,102,241,0.1) 50%,
        transparent 100%
    ) !important;
    margin: 10px 0 !important;
    border: none !important;
}


/* ══════════════════════════════════════════════════════════════
   SECTION LABELS — Icon + uppercase tracking
   ══════════════════════════════════════════════════════════════ */

.sidebar-section-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #475569 !important;
    padding: 0 4px !important;
    margin: 8px 0 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}


/* ══════════════════════════════════════════════════════════════
   NAVIGATION BUTTONS — Icon cards + hover slide + active bar
   ══════════════════════════════════════════════════════════════ */

.nav-buttons-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.sidebar-nav-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    width: 100% !important;
    text-align: left !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.sidebar-nav-btn:hover {
    background: rgba(99,102,241,0.06) !important;
    transform: translateX(2px) !important;
}

/* Icon container inside nav button */
.sidebar-nav-btn span:first-child {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    background: rgba(15,23,42,0.5) !important;
    border: 0.5px solid rgba(99,102,241,0.08) !important;
    transition: all 0.2s ease !important;
}

.sidebar-nav-btn:hover span:first-child {
    border-color: rgba(99,102,241,0.18) !important;
    background: rgba(15,23,42,0.7) !important;
}

/* Label text */
.sidebar-nav-btn span:nth-child(2) {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    transition: color 0.2s ease !important;
    flex: 1 !important;
}

.sidebar-nav-btn:hover span:nth-child(2) {
    color: #e2e8f0 !important;
}


/* ── Active state — gradient left accent bar ── */

.sidebar-nav-btn[style*="background: rgba(99,102,241"],
.sidebar-nav-btn[style*="borderLeft: 3px"],
.sidebar-nav-btn.active {
    background: rgba(99,102,241,0.06) !important;
    border-left: none !important;
}

.sidebar-nav-btn[style*="background: rgba(99,102,241"]::before,
.sidebar-nav-btn[style*="borderLeft: 3px"]::before,
.sidebar-nav-btn.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: linear-gradient(180deg, #6366f1, #22d3ee) !important;
    box-shadow: 0 0 8px rgba(99,102,241,0.3) !important;
}

.sidebar-nav-btn[style*="background: rgba(99,102,241"] span:first-child,
.sidebar-nav-btn[style*="borderLeft: 3px"] span:first-child,
.sidebar-nav-btn.active span:first-child {
    background: rgba(99,102,241,0.1) !important;
    border-color: rgba(99,102,241,0.22) !important;
}

.sidebar-nav-btn[style*="background: rgba(99,102,241"] span:nth-child(2),
.sidebar-nav-btn[style*="borderLeft: 3px"] span:nth-child(2),
.sidebar-nav-btn.active span:nth-child(2) {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}


/* ══════════════════════════════════════════════════════════════
   CONTEXTUAL BADGES — LIVE / NEW / LOCKED
   ══════════════════════════════════════════════════════════════ */

/* These need to be added in app.py as extra spans inside nav buttons.
   Example: html.Span("LIVE", className="sidebar-badge sidebar-badge-live")
   Or target existing badge spans: */

.sidebar-badge,
.sidebar-nav-btn span[style*="fontSize: 8px"],
.sidebar-nav-btn span[style*="fontSize: 9px"][style*="letterSpacing"] {
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

.sidebar-badge-live,
.sidebar-nav-btn span[style*="color: #34d399"][style*="fontSize"] {
    background: rgba(52,211,153,0.1) !important;
    color: #34d399 !important;
}

.sidebar-badge-new,
.sidebar-nav-btn span[style*="color: #818cf8"][style*="fontSize"],
.sidebar-nav-btn span[style*="color: #6366f1"][style*="fontSize"] {
    background: rgba(99,102,241,0.1) !important;
    color: #818cf8 !important;
}

.sidebar-badge-lock {
    background: rgba(71,85,105,0.15) !important;
    color: #64748b !important;
}

/* Locked nav items — reduced opacity */
.sidebar-nav-btn.locked,
.sidebar-nav-btn[style*="opacity: 0.5"],
.sidebar-nav-btn[style*="opacity: 0.6"] {
    opacity: 0.45 !important;
}
.sidebar-nav-btn.locked:hover {
    transform: none !important;
    background: transparent !important;
    cursor: not-allowed !important;
}


/* ══════════════════════════════════════════════════════════════
   ASSET DROPDOWN — Polished dark glass
   ══════════════════════════════════════════════════════════════ */

.sidebar-wrap .Select-control,
.sidebar-wrap .dash-dropdown .Select-control {
    background: rgba(15,23,42,0.7) !important;
    border: 0.5px solid rgba(99,102,241,0.08) !important;
    border-radius: 8px !important;
    min-height: 40px !important;
    transition: border-color 0.2s ease !important;
}

.sidebar-wrap .Select-control:hover {
    border-color: rgba(99,102,241,0.18) !important;
}

.sidebar-wrap .Select-control:focus-within {
    border-color: rgba(99,102,241,0.3) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.06) !important;
}

.sidebar-wrap .Select-value-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #e2e8f0 !important;
}

.sidebar-wrap .Select-placeholder {
    color: #475569 !important;
    font-size: 13px !important;
}


/* ══════════════════════════════════════════════════════════════
   QUICK-SELECT PILLS — Asset group filter
   ══════════════════════════════════════════════════════════════ */

.sidebar-quick-btn {
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: 0.5px solid rgba(99,102,241,0.08) !important;
    background: transparent !important;
    color: #475569 !important;
    transition: all 0.15s ease !important;
}

.sidebar-quick-btn:hover {
    border-color: rgba(99,102,241,0.18) !important;
    color: #94a3b8 !important;
}

.sidebar-quick-btn[style*="background: rgba(99,102,241"],
.sidebar-quick-btn.active {
    background: rgba(99,102,241,0.06) !important;
    border-color: rgba(99,102,241,0.2) !important;
    color: #6366f1 !important;
}


/* ══════════════════════════════════════════════════════════════
   MTF / TIMEFRAME CHIPS — Monospace terminal feel
   ══════════════════════════════════════════════════════════════ */

.sidebar-mtf-checklist {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.sidebar-mtf-checklist label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #475569 !important;
    border: 0.5px solid rgba(99,102,241,0.08) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.sidebar-mtf-checklist label:hover {
    border-color: rgba(99,102,241,0.18) !important;
    color: #94a3b8 !important;
}

/* Checked state */
.sidebar-mtf-checklist input:checked + span,
.sidebar-mtf-checklist label:has(input:checked) {
    background: rgba(34,211,238,0.06) !important;
    border-color: rgba(34,211,238,0.2) !important;
    color: #22d3ee !important;
}

/* Hide default checkbox — styled purely via label */
.sidebar-mtf-checklist input[type="checkbox"] {
    display: none !important;
}


/* ══════════════════════════════════════════════════════════════
   STATUS BLOCK — Glass card with pulse indicator
   ══════════════════════════════════════════════════════════════ */

.sidebar-status-block {
    padding: 10px 12px !important;
    background: rgba(15,23,42,0.5) !important;
    border: 0.5px solid rgba(99,102,241,0.08) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.sidebar-status-block li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    padding: 4px 0 !important;
    color: #475569 !important;
    list-style: none !important;
}

.sidebar-status-block li span:last-child {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

/* Status value colors — apply via inline style in app.py or className */
.sidebar-status-block .status-ok,
.sidebar-status-block li span[style*="color: #34d399"],
.sidebar-status-block li span[style*="color: rgb(52, 211, 153)"] {
    color: #34d399 !important;
}

/* Pulse dot animation — for "models loaded" indicator */
.sidebar-status-dot,
.sidebar-status-block span[style*="animation"] {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #34d399 !important;
    box-shadow: 0 0 6px rgba(52,211,153,0.4) !important;
    display: inline-block !important;
    animation: sidebar-pulse 2s ease-in-out infinite !important;
}

@keyframes sidebar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* ══════════════════════════════════════════════════════════════
   MODEL CHECKLIST — Refined (admin only, hidden on mobile)
   ══════════════════════════════════════════════════════════════ */

.sidebar-model-checklist label {
    font-size: 11px !important;
    color: #64748b !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    transition: color 0.15s ease !important;
    cursor: pointer !important;
}

.sidebar-model-checklist label:hover {
    color: #94a3b8 !important;
}

.sidebar-model-checklist input:checked + span {
    color: #a5b4fc !important;
}


/* ══════════════════════════════════════════════════════════════
   VERSION TEXT — Monospace, low-key
   ══════════════════════════════════════════════════════════════ */

.sidebar-version,
.sidebar-wrap > div:last-child[style*="textAlign: center"] {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    color: #334155 !important;
    text-align: center !important;
    margin-top: 8px !important;
}


/* ══════════════════════════════════════════════════════════════
   SCROLLBAR — Ultra-thin inside sidebar
   ══════════════════════════════════════════════════════════════ */

.sidebar-container::-webkit-scrollbar { width: 3px; }
.sidebar-container::-webkit-scrollbar-track { background: transparent; }
.sidebar-container::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.15);
    border-radius: 4px;
}
.sidebar-container::-webkit-scrollbar-thumb:hover {
    background: rgba(99,102,241,0.25);
}
.sidebar-container { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.15) transparent; }


/* ══════════════════════════════════════════════════════════════
   USAGE BAR — Optional, add in app.py if desired
   ──────────────────────────────────────────────────────────────
   html.Div(className="sidebar-usage-bar", children=[
       html.Div(className="sidebar-usage-fill", style={"width": f"{pct}%"}),
   ])
   html.Div(f"{used} / {limit} analyses today", className="sidebar-usage-text")
   ══════════════════════════════════════════════════════════════ */

.sidebar-usage-bar {
    height: 3px;
    background: rgba(99,102,241,0.08);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.sidebar-usage-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #22d3ee);
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-usage-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    color: #475569;
    text-align: right;
    margin-top: 3px;
}