/* 
 * Crypto Compound Custom CSS 
 * Architecture: CSS Variables + Dark Mode Overrides
 * Reference: doc/ui-components-library.md
 */

:root {
    /* 1. Base Colors (Slate) */
    --c-bg-body: #f8fafc;
    /* slate-50 */
    --c-bg-card: #ffffff;
    /* white */
    --c-text-primary: #0f172a;
    /* slate-900 */
    --c-text-secondary: #475569;
    /* slate-600 */
    --c-text-tertiary: #94a3b8;
    /* slate-400 */
    --c-border: #e2e8f0;
    /* slate-200 */
    --c-divider: #cbd5e1;
    /* slate-300 */

    /* 2. Brand Colors */
    --c-primary: #f97316;
    /* orange-500 */
    --c-primary-hover: #ea580c;
    /* orange-600 */
    --c-accent: #8b5cf6;
    /* violet-500 */

    /* 3. Functional Colors (TradingView Standard) */
    --c-bull: #089981;
    --c-bull-bg: rgba(8, 153, 129, 0.1);
    --c-bear: #F23645;
    --c-bear-bg: rgba(242, 54, 69, 0.1);

    /* 4. Alert Colors */
    --c-alert-info-bg: #eff6ff;
    /* blue-50 */
    --c-alert-info-border: #3b82f6;
    /* blue-500 */
    --c-alert-info-text: #1e3a8a;
    /* blue-900 */

    --c-alert-warn-bg: #fffbeb;
    /* amber-50 */
    --c-alert-warn-border: #f59e0b;
    /* amber-500 */
    --c-alert-warn-text: #92400e;
    /* amber-800 */

    --c-alert-error-bg: #fef2f2;
    /* red-50 */
    --c-alert-error-border: #f6465d;
    /* red-500 */
    --c-alert-error-text: #991b1b;
    /* red-800 */

    --c-alert-alpha-bg: #f0fdf4;
    /* green-50 */
    --c-alert-alpha-border: #0ecb81;
    /* green-500 */
    --c-alert-alpha-text: #14532d;
    /* green-900 */

    /* 5. Soft Accent Colors (for cards/sections) */
    --c-bg-soft-orange: #fff7ed;   /* orange-50 */
    --c-border-soft-orange: #ffedd5; /* orange-100 */
    --c-text-soft-orange: #9a3412;   /* orange-900 */
    
    --c-bg-soft-violet: #f5f3ff;   /* violet-50 */
    --c-border-soft-violet: #ede9fe; /* violet-100 */
    --c-text-soft-violet: #5b21b6;   /* violet-900 */

    --c-bg-soft-blue: #eff6ff;     /* blue-50 */
    --c-border-soft-blue: #dbeafe;   /* blue-100 */
    --c-text-soft-blue: #1e3a8a;     /* blue-900 */

    --c-bg-soft-slate: #f8fafc;    /* slate-50 */
    --c-border-soft-slate: #f1f5f9;  /* slate-100 */
    --c-text-soft-slate: #475569;    /* slate-600 */
}

/* Dark Mode Overrides */
html.dark {
    /* TradingView Dark Theme Palette */
    --c-bg-body: #131722;
    /* TV Main BG */
    --c-bg-card: #1E222D;
    /* TV Card BG */
    --c-text-primary: #D1D4DC;
    /* TV Primary Text */
    --c-text-secondary: #787B86;
    /* TV Secondary Text */
    --c-text-tertiary: #50535E;
    --c-border: #2A2E39;
    /* TV Border */
    --c-divider: #2A2E39;

    --c-primary: #fdba74;
    /* orange-300 */
    --c-primary-hover: #ffedd5;
    /* orange-100 */
    --c-accent: #a78bfa;
    /* violet-400 */

    --c-alert-info-bg: rgba(41, 98, 255, 0.1);
    --c-alert-info-border: #2962FF;
    --c-alert-info-text: #D1D4DC;

    --c-alert-warn-bg: rgba(245, 158, 11, 0.1);
    --c-alert-warn-border: #F59E0B;
    --c-alert-warn-text: #D1D4DC;

    --c-alert-error-bg: rgba(242, 54, 69, 0.1);
    --c-alert-error-border: #F6465D;
    --c-alert-error-text: #D1D4DC;

    --c-alert-alpha-bg: rgba(14, 203, 129, 0.1);
    --c-alert-alpha-border: #0ECB81;
    --c-alert-alpha-text: #D1D4DC;

    /* 5. Soft Accent Colors (Dark Mode Overrides) */
    --c-bg-soft-orange: rgba(251, 146, 60, 0.15);  /* orange-400 at 15% opacity */
    --c-border-soft-orange: rgba(251, 146, 60, 0.2);
    --c-text-soft-orange: #fdba74;    /* orange-300 */

    --c-bg-soft-violet: rgba(167, 139, 250, 0.15); /* violet-400 at 15% opacity */
    --c-border-soft-violet: rgba(167, 139, 250, 0.2);
    --c-text-soft-violet: #ddd6fe;    /* violet-200 */

    --c-bg-soft-blue: rgba(96, 165, 250, 0.15);   /* blue-400 at 15% opacity */
    --c-border-soft-blue: rgba(96, 165, 250, 0.2);
    --c-text-soft-blue: #bfdbfe;     /* blue-200 */

    --c-bg-soft-slate: rgba(148, 163, 184, 0.1);
    --c-border-soft-slate: rgba(148, 163, 184, 0.2);
    --c-text-soft-slate: #94a3b8;    /* slate-400 */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--c-bg-body);
    color: var(--c-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Layout Containers --- */
section.bg-white,
main.bg-white {
    background-color: var(--c-bg-body) !important;
    /* Override Tailwind utility if needed for mode switch */
    border-color: var(--c-border);
}

.bg-slate-50,
.bg-slate-100 {
    background-color: var(--c-bg-body) !important;
}

/* --- Cards & Components --- */
.article-card,
.topic-card,
.info-cards>div,
.factor-card,
.bg-white {
    background-color: var(--c-bg-card) !important;
    border-color: var(--c-border) !important;
}

/* Dark Mode Border Enhancement */
html.dark .article-card,
html.dark .topic-card,
html.dark .info-cards>div,
html.dark .factor-card,
html.dark .bg-white,
html.dark .bg-white.rounded-2xl {
    border: 1px solid var(--c-border) !important;
}

/* --- Global Tailwind Color Mappings (Dark Mode) --- */
html.dark .bg-orange-50 { background-color: var(--c-bg-soft-orange) !important; }
html.dark .border-orange-100 { border-color: var(--c-border-soft-orange) !important; }
html.dark .text-orange-800, 
html.dark .text-orange-900 { color: var(--c-text-soft-orange) !important; }

html.dark .bg-violet-50 { background-color: var(--c-bg-soft-violet) !important; }
html.dark .border-violet-100 { border-color: var(--c-border-soft-violet) !important; }
html.dark .text-violet-800,
html.dark .text-violet-900 { color: var(--c-text-soft-violet) !important; }

html.dark .bg-blue-50 { background-color: var(--c-bg-soft-blue) !important; }
html.dark .border-blue-100 { border-color: var(--c-border-soft-blue) !important; }
html.dark .text-blue-800,
html.dark .text-blue-900 { color: var(--c-text-soft-blue) !important; }

html.dark .bg-slate-50, 
html.dark .bg-slate-100,
html.dark .bg-slate-200 { background-color: var(--c-bg-body) !important; }
html.dark .border-slate-100,
html.dark .border-slate-200 { border-color: var(--c-border) !important; }
html.dark .text-slate-600,
html.dark .text-slate-700,
html.dark .text-slate-800,
html.dark .text-slate-900 { color: var(--c-text-soft-slate) !important; }

/* --- Grid System for Info Cards --- */
.info-cards,
.risk-group-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 640px) {

    .info-cards,
    .risk-group-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Typography --- */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
    color: var(--c-text-primary) !important;
    scroll-margin-top: 5rem;
    /* Sticky header offset */
}

p,
li,
blockquote {
    color: var(--c-text-secondary) !important;
}

.prose blockquote {
    border-left-color: var(--c-border);
    color: var(--c-text-secondary);
}

hr,
.border-slate-100,
.border-slate-200 {
    border-color: var(--c-border) !important;
}

/* --- Dark Mode Prose Overrides --- */
/* Fixes Tailwind's overly bright prose-invert default colors */
html.dark .prose.dark\:prose-invert h1,
html.dark .prose.dark\:prose-invert h2,
html.dark .prose.dark\:prose-invert h3,
html.dark .prose.dark\:prose-invert h4,
html.dark .prose.dark\:prose-invert th,
html.dark .prose.dark\:prose-invert strong,
html.dark .prose.dark\:prose-invert b {
    color: var(--c-text-primary) !important;
}

html.dark .prose.dark\:prose-invert p,
html.dark .prose.dark\:prose-invert td,
html.dark .prose.dark\:prose-invert li,
html.dark .prose.dark\:prose-invert blockquote {
    color: var(--c-text-secondary) !important;
}

html.dark .prose.dark\:prose-invert table {
    background-color: var(--c-bg-card) !important;
}

html.dark .prose.dark\:prose-invert thead {
    border-bottom-color: var(--c-border) !important;
}

html.dark .prose.dark\:prose-invert th {
    background-color: var(--c-bg-body) !important;
}

html.dark .prose.dark\:prose-invert tbody tr {
    border-bottom-color: var(--c-border) !important;
}

/* --- UI Component: Alert --- */
.alert {
    border-left-width: 4px;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    transition: all 0.3s ease;
}

.alert:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transform: translateY(-1px);
}

.alert-analyst {
    background-color: var(--c-alert-info-bg);
    border: 1px solid transparent;
    border-left-color: var(--c-alert-info-border);
    color: var(--c-alert-info-text);
}

.alert-warning {
    background-color: var(--c-alert-warn-bg);
    border: 1px solid transparent;
    border-left-color: var(--c-alert-warn-border);
    color: var(--c-alert-warn-text);
}

.alert-risk,
.alert-error {
    background-color: var(--c-alert-error-bg);
    border: 1px solid transparent;
    border-left-color: var(--c-alert-error-border);
    color: var(--c-alert-error-text);
}

.alert-alpha {
    background-color: var(--c-alert-alpha-bg);
    border: 1px solid transparent;
    border-left-color: var(--c-alert-alpha-border);
    color: var(--c-alert-alpha-text);
}

.alert h4,
.alert strong {
    color: inherit !important;
    display: block;
    margin-bottom: 0.25rem;
}

/* --- UI Component: Bull/Bear Analysis --- */
.bull-bear-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .bull-bear-container {
        flex-direction: row;
    }
}

.case-bull,
.case-bear {
    flex: 1;
    background-color: var(--c-bg-card);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--c-border);
    /* Default border */
}

.case-bull {
    border-top: 4px solid var(--c-bull);
}

.case-bear {
    border-top: 4px solid var(--c-bear);
}

/* --- UI Component: Cards --- */
.info-card {
    background-color: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 0.75rem;
    /* rounded-xl */
    padding: 1.5rem;
    /* p-6 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* shadow-sm */
}

/* --- UI Component: Tables --- */
.responsive-table-wrapper {
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--c-border);
    margin: 1.5rem 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--c-bg-card);
}

th {
    background-color: var(--c-bg-body);
    color: var(--c-text-primary);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--c-border);
}

td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-secondary);
}

/* --- Interactive Elements --- */
.filter-btn {
    transition: all 0.2s;
    background-color: var(--c-bg-card);
    /* was #fff */
    color: var(--c-text-secondary);
    /* was #334155 */
}

.filter-btn.active,
.active-filter {
    background-color: var(--c-primary) !important;
    color: white !important;
}

/* --- Animations --- */
#rocket {
    animation: fly 5s linear infinite;
    offset-path: path('M 150 200 Q 250 50, 400 100 T 650 200');
}

@keyframes fly {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}

.factor-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.factor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Micro-interactions */
button,
.filter-btn,
summary {
    transition: transform 0.1s ease, background-color 0.2s ease, color 0.2s ease;
}

button:active,
.filter-btn:active {
    transform: scale(0.98);
}

/* --- UI Component: Unlock Schedule --- */
.unlock-schedule-container {
    background-color: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

/* --- UI Component: Professional Insight --- */
.professional-insight-card {
    background-color: var(--c-bg-card);
    border: 1px dashed var(--c-accent);
    /* Dashed border for insight */
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.professional-insight-card[open] {
    border-style: solid;
    /* Solid when open */
    background-color: var(--c-alert-info-bg);
    /* Slight tint when open */
}

/* --- TradingView Utilities --- */
.text-up,
.text-green-600 {
    color: var(--c-bull) !important;
}

.text-down,
.text-red-600 {
    color: var(--c-bear) !important;
}

/* --- Special Sections --- */
.section-divider {
    display: flex;
    align-items: center;
    color: var(--c-divider);
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--c-border);
}

/* Chart Container */
.chart-container {
    position: relative;
    width: 100%;
    height: 450px;
    max-height: 55vh;
}

@media (min-width: 768px) {
    .chart-container {
        height: 500px;
    }
}

/* --- UI Component: Comparison Table --- */
.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
}

.comparison-table thead th {
    font-weight: 600;
    color: var(--c-text-secondary);
}

.comparison-table tbody tr {
    background-color: var(--c-bg-body);
}

.comparison-table tbody tr td:first-child {
    text-align: left;
    font-weight: 500;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.comparison-table tbody tr td:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.tick-mark {
    color: var(--c-bull);
}

.cross-mark {
    color: var(--c-bear);
}

/* Image Filter for Dark Mode */
.dark img:not([src*=".svg"]) {
    filter: brightness(0.85) contrast(1.1);
}

.dark .dark-invert {
    filter: invert(1);
}

/* --- UI Component: Article Heading Hierarchy --- */
.indicator-h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 4px solid var(--c-border);
    margin: 4.5rem 0 2.5rem 0 !important;
    scroll-margin-top: 6rem;
}

@media (min-width: 640px) {
    .indicator-h2 {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

.indicator-h2 .number-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #2563eb;
    /* blue-600 */
    color: white !important;
    font-size: 1.125rem;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.indicator-h2 .title-main {
    font-size: 1.875rem;
    /* 3xl */
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--c-text-primary);
}

.indicator-h2 .title-sub {
    font-size: 1.125rem;
    /* xl */
    color: var(--c-text-tertiary);
    font-weight: 500;
}

@media (min-width: 640px) {
    .indicator-h2 .title-sub {
        margin-left: auto;
    }
}

.analysis-h3 {
    font-weight: 700;
    font-size: 1.25rem;
    /* xl */
    color: var(--c-text-primary);
    border-bottom: 2px solid var(--c-border);
    padding-bottom: 0.25rem;
    margin: 3.5rem 0 1.5rem 0 !important;
}

/* --- Custom Scrollbar --- */
/* Premium Components Added */

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--c-text-tertiary);
}

/* --- UI Component: Strategy Advice Card --- */
.strategy-advice-card {
    background-color: var(--c-bg-soft-slate);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: 1rem;
    padding: 2.5rem;
    margin: 3rem 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.strategy-advice-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* Decorative background safe for all modes */
.strategy-advice-card::after {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--c-primary) 0%, transparent 70%);
    opacity: 0.03;
    pointer-events: none;
}

.strategy-advice-card h4 {
    color: var(--c-primary) !important;
    font-size: 1.35rem;
    font-weight: 800;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 2px solid var(--c-border);
    padding-bottom: 0.75rem;
    display: inline-block;
}

.strategy-advice-card ol, 
.strategy-advice-card ul {
    margin-bottom: 0 !important;
}

.strategy-advice-card li {
    color: var(--c-text-primary) !important;
    margin-bottom: 1rem !important;
    line-height: 1.7;
}

.strategy-advice-card li:last-child {
    margin-bottom: 0 !important;
}

.strategy-advice-card strong {
    color: var(--c-primary) !important;
    font-weight: 800;
}

/* Glassmorphism enhancement for dark mode */
html.dark .strategy-advice-card {
    background-color: rgba(30, 34, 45, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.05);
}

/* Premium CSS Added */
/* Premium UI Patterns */