/* Cotrader - Theme & Minimal CSS */
/* Most styling handled by Tailwind CDN */

/* ── Theme Tokens ────────────────────────────────────────────
   RGB triplets for Tailwind opacity support (bg-base/50, etc.)
   :root = light mode, .dark = dark mode
   ──────────────────────────────────────────────────────────── */

:root {
    /* Backgrounds */
    --color-base: 248 250 252;          /* slate-50 */
    --color-surface: 226 232 240;       /* slate-200 */
    --color-overlay: 203 213 225;       /* slate-300 */
    --color-muted: 148 163 184;         /* slate-400 */

    /* Text */
    --color-on-base: 15 23 42;          /* slate-900 */
    --color-on-surface: 15 23 42;       /* slate-900 */
    --color-on-muted: 30 41 59;         /* slate-800 */
    --color-on-subtle: 51 65 85;        /* slate-700 */

    /* Borders */
    --color-border: 203 213 225;        /* slate-300 */
    --color-border-muted: 226 232 240;  /* slate-200 */

    /* Status colors (darker for light backgrounds) */
    --color-success: 5 150 105;         /* emerald-600 */
    --color-danger: 220 38 38;          /* red-600 */
    --color-warning: 217 119 6;         /* amber-600 */

    /* Chart colors (hex for direct JS use) */
    --chart-bg: #ffffff;
    --chart-text: #334155;
    --chart-grid: #cbd5e1;
    --chart-border: #cbd5e1;
    --chart-up: #0891b2;
    --chart-down: #dc2626;
    --chart-vol-up: rgba(8, 145, 178, 0.3);
    --chart-vol-down: rgba(220, 38, 38, 0.3);
}

.dark {
    /* Backgrounds */
    --color-base: 2 6 23;              /* slate-950 */
    --color-surface: 15 23 42;          /* slate-900 */
    --color-overlay: 30 41 59;          /* slate-800 */
    --color-muted: 51 65 85;            /* slate-700 */

    /* Text */
    --color-on-base: 255 255 255;       /* white */
    --color-on-surface: 203 213 225;    /* slate-300 */
    --color-on-muted: 148 163 184;      /* slate-400 */
    --color-on-subtle: 100 116 139;     /* slate-500 */

    /* Borders */
    --color-border: 30 41 59;           /* slate-800 */
    --color-border-muted: 51 65 85;     /* slate-700 */

    /* Status colors (brighter for dark backgrounds) */
    --color-success: 52 211 153;        /* emerald-400 */
    --color-danger: 248 113 113;        /* red-400 */
    --color-warning: 251 191 36;        /* amber-400 */

    /* Chart colors */
    --chart-bg: #0f172a;
    --chart-text: #94a3b8;
    --chart-grid: #1e293b;
    --chart-border: #1e293b;
    --chart-up: #06b6d4;
    --chart-down: #ef4444;
    --chart-vol-up: rgba(6, 182, 212, 0.3);
    --chart-vol-down: rgba(239, 68, 68, 0.3);
}

/* ── Base Styles ─────────────────────────────────────────── */

/* bg-base utility — defined in CSS instead of Tailwind config because
   naming a color "base" would make Tailwind generate a text-base color
   utility that conflicts with its built-in text-base font-size utility. */
.bg-base {
    background-color: rgb(var(--color-base));
}

/* Prevent flash of unstyled content during Blazor enhanced navigation.
   Browser defaults (purple visited links, white button backgrounds) briefly
   show before Tailwind CDN reprocesses the DOM. */
a {
    color: inherit;
    text-decoration: none;
}

button {
    background-color: transparent;
}

/* Body defaults (safety net) */
body {
    background-color: rgb(var(--color-base));
    color: rgb(var(--color-on-base));
}

/* Prevent horizontal scrolling */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Remove default focus outlines on headings */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
    outline: none;
}

/* Blazor error UI */
#blazor-error-ui {
    display: none;
}

#blazor-error-ui.visible {
    display: block;
}

/* Form validation styling */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #10b981;
}

.invalid {
    outline: 1px solid #ef4444;
}

.validation-message {
    color: #ef4444;
    font-size: 0.875rem;
}

/* ── Markdown Content Styling ────────────────────────────── */

.markdown-content {
    line-height: 1.6;
}

.markdown-content p {
    margin-bottom: 1rem;
}

.markdown-content p:last-child {
    margin-bottom: 0;
}

.markdown-content ul, .markdown-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.markdown-content ul {
    list-style-type: disc;
}

.markdown-content ol {
    list-style-type: decimal;
}

.markdown-content li {
    margin-bottom: 0.25rem;
}

.markdown-content strong {
    font-weight: 600;
}

.markdown-content em {
    font-style: italic;
}

.markdown-content code {
    background-color: rgb(var(--color-overlay));
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
}

.markdown-content pre {
    background-color: rgb(var(--color-overlay));
    padding: 0.75rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown-content pre code {
    background-color: transparent;
    padding: 0;
}

.markdown-content h1, .markdown-content h2, .markdown-content h3,
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.markdown-content h1 { font-size: 1.5rem; }
.markdown-content h2 { font-size: 1.25rem; }
.markdown-content h3 { font-size: 1.125rem; }

.markdown-content blockquote {
    border-left: 3px solid rgb(var(--color-border-muted));
    padding-left: 1rem;
    margin: 0.75rem 0;
    font-style: italic;
}

.markdown-content a {
    color: #3b82f6;
    text-decoration: underline;
}

.markdown-content a:hover {
    color: #2563eb;
}

/* ── Blazor Reconnection UI ─────────────────────────────── */

#components-reconnect-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex !important;
}

#components-reconnect-modal > div,
#components-reconnect-modal div[style] {
    background-color: rgb(var(--color-surface)) !important;
    background: rgb(var(--color-surface)) !important;
    color: rgb(var(--color-on-base)) !important;
    border: 1px solid rgb(var(--color-border)) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
    max-width: 28rem !important;
    margin: 1rem !important;
}

#components-reconnect-modal h5,
#components-reconnect-modal h1,
#components-reconnect-modal h2,
#components-reconnect-modal h3,
#components-reconnect-modal h4 {
    color: rgb(var(--color-on-base)) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

#components-reconnect-modal p,
#components-reconnect-modal span,
#components-reconnect-modal div {
    color: rgb(var(--color-on-muted)) !important;
    font-size: 0.875rem !important;
}

/* Reconnection buttons */
#components-reconnect-modal button {
    margin-top: 1rem !important;
    padding: 0.5rem 1.5rem !important;
    background-color: #06b6d4 !important; /* cyan-500 */
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.2) !important;
}

#components-reconnect-modal button:hover {
    background-color: #22d3ee !important; /* cyan-400 */
}

/* Loading spinner for reconnection */
#components-reconnect-modal .spinner-border {
    border-color: #06b6d4 !important;
    border-right-color: transparent !important;
}