/* ═══════════════════════════════════════════
   LAZY.IO Design Tokens & Shared Components
   ═══════════════════════════════════════════ */

/* ── Design Tokens (CSS Custom Properties) ─── */
:root {
    --color-primary: #3b82f6;
    --color-primary-light: #60a5fa;
    --color-primary-hover: #2563eb;
    --color-accent: #a855f7;
    --color-success: #22c55e;
    --color-success-light: #86efac;
    --color-danger: #ef4444;
    --color-danger-light: #fca5a5;
    --color-warning: #eab308;
    --color-warning-light: #fde047;
    --color-orange: #f97316;
    --color-orange-light: #fdba74;
    --color-long: #10b981;
    --color-short: #ef4444;
    --color-bg-card: rgba(30,41,59,0.6);
    --color-border: rgba(59,130,246,0.2);
    --color-border-hover: rgba(59,130,246,0.4);
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
}

/* ── Status Badges ─── */
.badge-active       { background: rgba(34,197,94,.2);  color: var(--color-success-light); }
.badge-stopped      { background: rgba(239,68,68,.2);  color: var(--color-danger-light); }
.badge-provisioning { background: rgba(234,179,8,.2);  color: var(--color-warning-light); }
.badge-restarting   { background: rgba(249,115,22,.2); color: var(--color-orange-light); }
.badge-long         { background: rgba(16,185,129,0.15); color: var(--color-long); border: 1px solid rgba(16,185,129,0.3); }
.badge-short        { background: rgba(239,68,68,0.15);  color: var(--color-short); border: 1px solid rgba(239,68,68,0.3); }

/* ── Price Flash Animations ─── */
@keyframes flash-green { 0% { background-color: rgba(74,222,128,0.3); } 100% { background-color: transparent; } }
@keyframes flash-red   { 0% { background-color: rgba(248,113,113,0.3); } 100% { background-color: transparent; } }
.price-flash-up   { animation: flash-green 0.6s ease-out; border-radius: var(--radius-sm); }
.price-flash-down { animation: flash-red 0.6s ease-out; border-radius: var(--radius-sm); }

/* ── Slider Thumb ─── */
.slider-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}
.slider-thumb::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    border-color: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
}
.slider-thumb::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.slider-thumb::-moz-range-thumb:hover {
    transform: scale(1.15);
    border-color: #fbbf24;
}

/* ── Sub-tabs ─── */
.sub-tab { color: #93c5fd; border-bottom: 2px solid transparent; transition: all 0.2s; }
.sub-tab:hover { color: white; }
.sub-tab.active { color: white; border-bottom-color: var(--color-primary-light); font-weight: 700; }

/* ── Journal Filter Buttons ─── */
.filter-btn { padding: 6px 16px; border-radius: 8px; cursor: pointer; transition: all .2s; font-size: .85rem; }
.filter-btn.active { background: rgba(59,130,246,.3); border: 1px solid rgba(59,130,246,.6); color: white; }
.filter-btn:not(.active) { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #94a3b8; }
.filter-btn:hover:not(.active) { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); color: white; }

/* ── Journal Row Indicators ─── */
.row-win  { border-left: 3px solid var(--color-long); }
.row-loss { border-left: 3px solid var(--color-short); }

/* ── Compte Navigation ─── */
.nav-item { cursor: pointer; transition: all 0.2s; }
.nav-item:hover { background: rgba(59,130,246,.2); }
.nav-item.active {
    background: rgba(59,130,246,.3);
    border-left: 2px solid rgba(59,130,246,.8);
}

/* ── Section Toggle ─── */
.section-content { display: none; }
.section-content.active { display: block; }

/* ── FAQ Accordion ─── */
.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .2s; }

/* ── CGA Articles ─── */
.cga-article { border-left: 2px solid rgba(59,130,246,.3); }

/* ── Switch Bot Card ─── */
.bot-card { transition: border-color .2s; }
.bot-card.selected { border-color: rgba(59,130,246,.8) !important; }

/* ── Scrollbar Hide (mobile nav) ─── */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }