/* Theme tokens — dark (default) */
:root,
.dark-theme {
    --bg-primary: #000300;
    --bg-secondary: #0c100e;
    --bg-tertiary: #1a1f1c;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-strong: rgba(255, 255, 255, 0.12);
    --accent-color: #00df9a;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;

    --app-bg: #000300;
    --app-surface: #111827;
    --app-surface-hover: #1a2332;
    --app-input-bg: #0f1419;
    --app-sidebar-bg: #060806;
    --app-topbar-bg: rgba(0, 3, 0, 0.98);
    --app-overlay: rgba(0, 0, 0, 0.55);
    --app-modal-backdrop: rgba(0, 0, 0, 0.6);
    --app-shadow: none;
    --app-sidebar-border: rgba(0, 223, 154, 0.18);
    --app-link-hover-bg: rgba(0, 223, 154, 0.08);
    --app-link-active-bg: rgba(0, 223, 154, 0.14);
    --app-ghost-btn-bg: #1f2937;
    --app-ghost-btn-hover: #374151;
    --app-row-hover: rgba(255, 255, 255, 0.02);
    --chart-bg: #131722;
    --bot-status-bg: rgba(0, 0, 0, 0.18);
    --bot-run-item-bg: rgba(55, 65, 81, 0.38);
    --bot-accent-text: #60a5fa;
    --bot-profit-win: #4ade80;
    --bot-profit-loss: #f87171;
    --bot-session-end-win-bg: rgba(34, 197, 94, 0.1);
    --bot-session-end-win-border: rgba(34, 197, 94, 0.28);
    --bot-session-end-loss-bg: rgba(239, 68, 68, 0.1);
    --bot-session-end-loss-border: rgba(239, 68, 68, 0.28);
}

/* Light theme */
.light-theme {
    --bg-primary: #f3f5f4;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef1ef;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --border-color-strong: #cbd5e1;
    --accent-color: #00b377;
    --success-color: #059669;
    --error-color: #dc2626;
    --warning-color: #d97706;
    --info-color: #2563eb;

    --app-bg: #f3f5f4;
    --app-surface: #ffffff;
    --app-surface-hover: #f8fafc;
    --app-input-bg: #ffffff;
    --app-sidebar-bg: #ffffff;
    --app-topbar-bg: rgba(255, 255, 255, 0.98);
    --app-overlay: rgba(15, 23, 42, 0.35);
    --app-modal-backdrop: rgba(15, 23, 42, 0.45);
    --app-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
    --app-sidebar-border: #e2e8f0;
    --app-link-hover-bg: rgba(0, 179, 119, 0.08);
    --app-link-active-bg: rgba(0, 179, 119, 0.12);
    --app-ghost-btn-bg: #eef1ef;
    --app-ghost-btn-hover: #e2e8f0;
    --app-row-hover: rgba(15, 23, 42, 0.03);
    --chart-bg: #ffffff;
    --bot-status-bg: #f8fafc;
    --bot-run-item-bg: #eef2f7;
    --bot-accent-text: #2563eb;
    --bot-profit-win: #059669;
    --bot-profit-loss: #dc2626;
    --bot-session-end-win-bg: rgba(5, 150, 105, 0.08);
    --bot-session-end-win-border: rgba(5, 150, 105, 0.22);
    --bot-session-end-loss-bg: rgba(220, 38, 38, 0.08);
    --bot-session-end-loss-border: rgba(220, 38, 38, 0.22);
}

/* Base */
html {
    color-scheme: dark;
}

html.light-theme {
    color-scheme: light;
}

body {
    background-color: var(--app-bg);
    color: var(--text-primary);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.bg-dark {
    background-color: var(--app-bg) !important;
}

/* Tailwind utility overrides */
.dark-theme .bg-gray-800,
.light-theme .bg-gray-800 {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color);
}

.dark-theme .bg-gray-700,
.light-theme .bg-gray-700 {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color);
}

.dark-theme .text-gray-400,
.light-theme .text-gray-400 {
    color: var(--text-muted) !important;
}

.dark-theme .text-gray-300,
.light-theme .text-gray-300 {
    color: var(--text-secondary) !important;
}

.dark-theme .text-gray-500,
.dark-theme .text-gray-600,
.light-theme .text-gray-500 {
    color: var(--text-muted) !important;
}

.light-theme .text-gray-600 {
    color: var(--text-muted) !important;
}

.dark-theme .border-gray-700,
.light-theme .border-gray-700 {
    border-color: var(--border-color) !important;
}

.light-theme .text-white {
    color: var(--text-primary) !important;
}

/* Keep light text on colored buttons & gradient cards */
.light-theme .bg-green-500.text-white,
.light-theme .bg-green-600.text-white,
.light-theme .bg-green-700.text-white,
.light-theme .bg-red-500.text-white,
.light-theme .bg-red-600.text-white,
.light-theme .bg-blue-500.text-white,
.light-theme .bg-blue-600.text-white,
.light-theme .bg-blue-700.text-white,
.light-theme .bg-green-500 .text-white,
.light-theme .bg-red-500 .text-white,
.light-theme .bg-blue-600 .text-white,
.light-theme .bg-blue-700 .text-white,
.light-theme [class*="gradient-to-br"] .text-white,
.light-theme [class*="gradient-to-br"] h2,
.light-theme [class*="gradient-to-br"] h3,
.light-theme [class*="gradient-to-br"] p,
.light-theme [class*="gradient-to-r"] .text-white,
.light-theme [class*="gradient-to-r"] h2,
.light-theme [class*="gradient-to-r"] h3,
.light-theme [class*="gradient-to-r"] p,
.light-theme [class*="gradient-to-br"] .text-white.text-opacity-80,
.light-theme [class*="gradient-to-br"] .text-white.text-opacity-90,
.light-theme [class*="gradient-to-r"] .text-white.text-opacity-80,
.light-theme [class*="gradient-to-r"] .text-white.text-opacity-90 {
    color: #ffffff !important;
}

.light-theme [class*="gradient-to-br"] .text-white.text-opacity-80,
.light-theme [class*="gradient-to-r"] .text-white.text-opacity-80 {
    color: rgba(255, 255, 255, 0.85) !important;
}

.light-theme [class*="gradient-to-br"] .text-white.text-opacity-90,
.light-theme [class*="gradient-to-r"] .text-white.text-opacity-90 {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Labels on colored chart/pie segments */
.light-theme div[style*="background"] > .text-white,
.light-theme div[style*="background"] > .absolute.text-white {
    color: #ffffff !important;
}

.light-theme .border-gray-600 {
    border-color: var(--border-color) !important;
}

.light-theme .bg-gray-900 {
    background-color: var(--app-input-bg) !important;
}

/* App shell */
.app-shell {
    background: var(--app-bg);
}

.app-sidebar {
    background: var(--app-sidebar-bg);
    border-right-color: var(--app-sidebar-border);
    box-shadow: var(--app-shadow);
}

.sidebar-header,
.sidebar-footer {
    border-color: var(--border-color);
}

.sidebar-close {
    color: var(--text-muted);
}

.sidebar-close:hover {
    color: var(--text-primary);
}

.sidebar-link {
    color: var(--text-muted);
}

.sidebar-link:hover {
    color: var(--text-primary);
    background: var(--app-link-hover-bg);
}

.sidebar-link-active {
    color: var(--accent-color) !important;
    background: var(--app-link-active-bg) !important;
}

.app-topbar {
    background: var(--app-topbar-bg);
    border-bottom-color: var(--border-color);
}

.app-topbar-menu {
    color: var(--text-primary);
}

.app-topbar-icon {
    color: var(--text-muted);
}

.app-topbar-icon:hover {
    color: var(--text-primary);
}

.sidebar-backdrop {
    background: var(--app-overlay);
}

/* App components */
.app-page-header p {
    color: var(--text-muted);
}

.app-card,
.stat-card {
    background: var(--app-surface);
    border-color: var(--border-color);
    box-shadow: var(--app-shadow);
}

.app-card-title,
.app-card h2,
.app-modal h2 {
    color: var(--text-primary);
}

.app-label {
    color: var(--text-secondary);
}

.app-input {
    background: var(--app-input-bg);
    border-color: var(--border-color-strong);
    color: var(--text-primary);
}

.app-input::placeholder {
    color: var(--text-muted);
}

.app-btn-ghost {
    background: var(--app-ghost-btn-bg);
    color: var(--text-secondary);
}

.app-btn-ghost:hover {
    background: var(--app-ghost-btn-hover);
    color: var(--text-primary);
}

.app-table th {
    color: var(--text-muted);
    border-bottom-color: var(--border-color);
}

.app-table td {
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

.app-table tbody tr:hover {
    background: var(--app-row-hover);
}

.app-modal-backdrop {
    background: var(--app-modal-backdrop);
}

.app-modal {
    background: var(--app-surface);
    border-color: var(--border-color);
    box-shadow: var(--app-shadow);
}

.app-modal-balance p:first-child {
    color: var(--text-muted);
}

/* Navigation */
.dark-theme nav,
.light-theme nav {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.site-header {
    background-color: var(--app-topbar-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

/* Charts */
.dark-theme #tradingChart,
.dark-theme .chart-container {
    background: #131722;
}

.light-theme #tradingChart,
.light-theme .chart-container {
    background: #ffffff;
    border: 1px solid var(--border-color);
}

/* Sentiment colors */
.dark-theme .text-green-400,
.light-theme .text-green-400 {
    color: var(--success-color) !important;
}

.dark-theme .text-red-400,
.light-theme .text-red-400 {
    color: var(--error-color) !important;
}

.dark-theme .text-orange-400,
.light-theme .text-orange-400 {
    color: var(--warning-color) !important;
}

.dark-theme .text-blue-400,
.light-theme .text-blue-400 {
    color: var(--info-color) !important;
}

.dark-theme .text-yellow-400,
.light-theme .text-yellow-400 {
    color: var(--warning-color) !important;
}

/* Links */
.dark-theme a:hover,
.light-theme a:hover {
    color: var(--accent-color);
}

/* Mobile menu */
.dark-theme #mobile-menu,
.light-theme #mobile-menu {
    background-color: var(--app-sidebar-bg);
    border-right: 1px solid var(--border-color);
}

.light-theme #mobile-menu {
    box-shadow: var(--app-shadow);
}

.light-theme #mobile-menu-backdrop {
    background-color: var(--app-overlay) !important;
}

/* Forms */
.dark-theme input,
.dark-theme select,
.dark-theme textarea,
.light-theme input,
.light-theme select,
.light-theme textarea {
    background-color: var(--app-input-bg);
    border: 1px solid var(--border-color-strong);
    color: var(--text-primary);
}

/* Modals (legacy) */
.dark-theme .modal,
.light-theme .modal {
    background-color: var(--app-surface);
    border: 1px solid var(--border-color);
}

.light-theme .modal {
    box-shadow: var(--app-shadow);
}

/* Tables (legacy) */
.dark-theme table,
.light-theme table {
    background-color: var(--app-surface);
}

.dark-theme th,
.dark-theme td,
.light-theme th,
.light-theme td {
    border-color: var(--border-color);
}

/* Scrollbar */
.dark-theme ::-webkit-scrollbar-track,
.light-theme ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.dark-theme ::-webkit-scrollbar-thumb,
.light-theme ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.dark-theme ::-webkit-scrollbar-thumb:hover,
.light-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Auth pages — light theme (layout shadows) */
.light-theme .auth-layout {
    box-shadow: var(--app-shadow);
}

/* Footer */
.light-theme footer {
    background-color: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}

.light-theme footer h6 {
    color: var(--text-muted) !important;
}

/* ─── Chart surfaces ─── */
.chart-surface,
#marketChart,
#tradingChart {
    background: var(--chart-bg) !important;
}

.light-theme .chart-surface,
.light-theme #marketChart,
.light-theme #tradingChart {
    border: 1px solid var(--border-color);
}

.crypto-table {
    background: var(--bg-secondary);
    border-radius: 8px;
}

.crypto-row:hover {
    background: var(--bg-tertiary);
}

.chart-container {
    background: var(--chart-bg);
    border-radius: 8px;
}

.light-theme .chart-container {
    border: 1px solid var(--border-color);
}

/* ─── Extended Tailwind overrides (light) ─── */
.light-theme .text-gray-200 {
    color: var(--text-secondary) !important;
}

.light-theme .bg-gray-600 {
    background-color: var(--bg-tertiary) !important;
}

.light-theme .bg-gray-700\/50 {
    background-color: rgba(238, 241, 239, 0.85) !important;
}

.light-theme .bg-gray-700\/30 {
    background-color: rgba(238, 241, 239, 0.65) !important;
}

.light-theme .bg-gray-600\/50 {
    background-color: rgba(226, 232, 240, 0.75) !important;
}

.light-theme .hover\:bg-gray-700\/70:hover {
    background-color: var(--bg-tertiary) !important;
}

.light-theme .hover\:bg-gray-600:hover,
.light-theme .hover\:bg-gray-700:hover {
    background-color: var(--bg-tertiary) !important;
}

.light-theme .hover\:bg-gray-500:hover {
    background-color: var(--border-color) !important;
}

.light-theme .border-gray-600,
.light-theme .border-gray-800 {
    border-color: var(--border-color-strong) !important;
}

.light-theme .border-gray-700\/50 {
    border-color: var(--border-color) !important;
}

.light-theme .divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-color) !important;
}

.light-theme .hover\:text-white:hover {
    color: var(--text-primary) !important;
}

.light-theme .hover\:bg-gray-700:hover {
    background-color: var(--bg-tertiary) !important;
}

.light-theme .fixed.inset-0.bg-black,
.light-theme .fixed.inset-0.bg-black.bg-opacity-50 {
    background-color: var(--app-modal-backdrop) !important;
}

.light-theme h1:not(.text-gradient),
.light-theme h2:not(.text-gradient),
.light-theme h3:not(.text-gradient),
.light-theme .font-bold:not(.text-primary):not(.text-green-400):not(.text-red-400):not(.text-blue-400):not(.text-yellow-400):not(.text-orange-400):not(.text-gradient) {
    color: var(--text-primary);
}

.light-theme .page-container > .mb-8 p,
.light-theme .app-page-header p {
    color: var(--text-muted);
}

/* History tabs */
.light-theme .tab-btn {
    color: var(--text-muted);
}

.light-theme .tab-btn.text-blue-500,
.light-theme .tab-btn.border-blue-500 {
    color: var(--info-color) !important;
    border-color: var(--info-color) !important;
}

.light-theme .nav-tabs-scroll {
    border-color: var(--border-color) !important;
}

/* Bot cards */
.bot-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.light-theme .bot-card:hover {
    box-shadow: var(--app-shadow);
}

/* Index / marketing cards */
.light-theme .bg-gradient {
    background: linear-gradient(to right, rgba(0, 179, 119, 0.12), rgba(255, 255, 255, 0)) !important;
}

/* Settings phone prefix */
.light-theme .bg-gray-700\/80 {
    background-color: var(--bg-tertiary) !important;
}

/* Definition lists */
.light-theme dt.text-gray-500 {
    color: var(--text-muted) !important;
}

.light-theme dd.text-white {
    color: var(--text-primary) !important;
}

/* Select options */
.light-theme option {
    background-color: var(--app-surface);
    color: var(--text-primary);
}

/* Status / alert boxes */
.light-theme .bg-green-500.bg-opacity-10 {
    background-color: rgba(5, 150, 105, 0.1) !important;
}

.light-theme .bg-red-500.bg-opacity-10 {
    background-color: rgba(220, 38, 38, 0.1) !important;
}

/* Floating theme toggle (guest / auth pages) */
.theme-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color-strong);
    background: var(--app-surface);
    color: var(--text-secondary);
    box-shadow: var(--app-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.theme-fab:hover {
    color: var(--accent-color);
    transform: translateY(-1px);
}

/* Auth — dark tokens via variables */
.auth-panel {
    background: var(--app-surface);
}

.auth-brand {
    background: linear-gradient(145deg, rgba(0, 223, 154, 0.18) 0%, var(--app-bg) 55%);
    border-right-color: var(--border-color);
}

.auth-brand p,
.auth-mobile-brand__tagline,
.auth-panel-header p,
.auth-footer-text,
.auth-brand-list li {
    color: var(--text-muted);
}

.auth-brand-list li {
    color: var(--text-secondary);
}

.auth-panel-header h1,
.auth-brand h2 {
    color: var(--text-primary);
}

.auth-field label {
    color: var(--text-secondary);
}

.auth-input {
    background: var(--app-input-bg);
    border-color: var(--border-color-strong);
    color: var(--text-primary);
}

.auth-input::placeholder {
    color: var(--text-muted);
}

.auth-phone-prefix {
    background: var(--bg-tertiary);
    border-color: var(--border-color-strong);
    color: var(--text-muted);
}

.auth-remember-row label {
    color: var(--text-muted);
}

.auth-shell {
    background:
        radial-gradient(ellipse at top, rgba(0, 223, 154, 0.08) 0%, transparent 55%),
        var(--app-bg);
}

.auth-layout {
    border-color: var(--border-color);
}

.password-toggle-btn {
    color: var(--text-muted);
}

.light-theme tr.hover\:bg-gray-700:hover {
    background-color: var(--app-row-hover) !important;
}

.light-theme .bg-gray-800.rounded-lg,
.light-theme .bg-gray-800.p-6 {
    box-shadow: var(--app-shadow);
}

.light-theme footer a {
    color: var(--text-secondary);
}

.light-theme footer a:hover {
    color: var(--accent-color);
}

/* Headings & metrics */
.app-page-header h1,
.page-container > .mb-8 > h1,
.stat-card__value,
.app-card .metric-lg,
.app-card .metric-md {
    color: var(--text-primary);
}

/* Alerts & badges — stronger contrast in light mode */
.light-theme .app-alert-success {
    color: #047857 !important;
    background: rgba(5, 150, 105, 0.1) !important;
    border-color: rgba(5, 150, 105, 0.35) !important;
}

.light-theme .app-alert-error {
    color: #b91c1c !important;
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}

.light-theme .app-badge-success {
    color: #047857 !important;
    background: rgba(5, 150, 105, 0.12) !important;
}

.light-theme .app-badge-warning {
    color: #b45309 !important;
    background: rgba(217, 119, 6, 0.12) !important;
}

.light-theme .app-badge-danger {
    color: #b91c1c !important;
    background: rgba(220, 38, 38, 0.1) !important;
}

.light-theme .app-badge-muted {
    color: #475569 !important;
    background: rgba(100, 116, 139, 0.12) !important;
}

.light-theme .bg-yellow-500.bg-opacity-10 {
    background-color: rgba(217, 119, 6, 0.1) !important;
    border-color: rgba(217, 119, 6, 0.35) !important;
    color: #92400e !important;
}

.light-theme .bg-yellow-500.bg-opacity-10 .text-yellow-500,
.light-theme .bg-yellow-500.bg-opacity-10 .text-yellow-400 {
    color: #b45309 !important;
}

/* Primary CTA buttons — keep dark text on green */
.light-theme .bg-primary.text-black,
.light-theme .bg-primary.text-white,
.light-theme button.bg-primary,
.light-theme a.bg-primary {
    color: #000000 !important;
}

.light-theme .bg-yellow-500.text-black,
.light-theme button.bg-yellow-500 {
    color: #000000 !important;
}

/* Modal & overlay content */
.light-theme .app-dialog,
.light-theme .app-dialog__header,
.light-theme .app-dialog__footer {
    background: var(--app-surface);
    border-color: var(--border-color);
}

.light-theme .app-dialog__header h2,
.light-theme .app-dialog__header h3,
.light-theme .bg-gray-800.rounded-lg h2,
.light-theme .bg-gray-800.rounded-lg h3,
.light-theme .bg-gray-800.p-6 h2,
.light-theme .bg-gray-800.p-6 h3,
.light-theme #tradeModal h2,
.light-theme #tradeModal h3 {
    color: var(--text-primary);
}

.light-theme .bg-gray-800.rounded-lg label,
.light-theme .bg-gray-800.p-6 label {
    color: var(--text-secondary);
}

/* Table header rows */
.light-theme thead.bg-gray-700 th {
    color: var(--text-secondary) !important;
    background-color: var(--bg-tertiary) !important;
}

.light-theme tbody td {
    color: var(--text-secondary);
}

/* Account switcher inactive pill */
.light-theme .bg-gray-700.rounded button.text-gray-300 {
    color: var(--text-secondary) !important;
}

.light-theme .bg-gray-700.rounded button.bg-primary {
    color: #000000 !important;
}

/* Select inside gray wrapper */
.light-theme .bg-gray-700.rounded select,
.light-theme .bg-gray-700.rounded select option {
    background-color: var(--app-input-bg);
    color: var(--text-primary);
}

/* Crypto table */
.light-theme .crypto-table th {
    color: var(--text-muted);
}

.light-theme .crypto-table td {
    color: var(--text-secondary);
}

/* Stat icon colors in light mode */
.light-theme .stat-card__icon--blue {
    color: #2563eb !important;
}

.light-theme .stat-card__icon--yellow {
    color: #d97706 !important;
}

.light-theme .stat-card__icon--purple {
    color: #7c3aed !important;
}

.light-theme .stat-card__icon--red {
    color: #dc2626 !important;
}

.light-theme .sidebar-link-active:hover {
    color: var(--accent-color) !important;
}

.password-toggle-btn:hover {
    color: var(--text-primary);
}