/* TOPCHAIN GLOBAL USER THEME */

html,
body {
    transition:
        background-color .2s ease,
        color .2s ease;
}

/* =========================================================
   PAGE BACKGROUND
   ========================================================= */

html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"] {
    background-color: #0b1220 !important;
    color: #e5e7eb !important;
    color-scheme: dark;
}

html[data-theme="light"],
html[data-theme="light"] body,
body[data-theme="light"] {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
    color-scheme: light;
}

/* =========================================================
   DARK MODE — FORCE USER PAGES DARK
   ========================================================= */

body[data-theme="dark"] header,
body[data-theme="dark"] nav,
body[data-theme="dark"] aside,
body[data-theme="dark"] main,
body[data-theme="dark"] footer {
    border-color: #263244 !important;
}

/* White and light backgrounds */
body[data-theme="dark"] .bg-white,
body[data-theme="dark"] .bg-gray-50,
body[data-theme="dark"] .bg-gray-100,
body[data-theme="dark"] .bg-slate-50,
body[data-theme="dark"] .bg-slate-100 {
    background-color: #111827 !important;
}

/* Medium light backgrounds */
body[data-theme="dark"] .bg-gray-200,
body[data-theme="dark"] .bg-gray-300,
body[data-theme="dark"] .bg-slate-200,
body[data-theme="dark"] .bg-slate-300 {
    background-color: #172033 !important;
}

/* Main dark containers */
body[data-theme="dark"] .bg-\[\#0b1220\],
body[data-theme="dark"] .bg-\[\#0B1220\],
body[data-theme="dark"] .bg-gray-950,
body[data-theme="dark"] .bg-slate-950 {
    background-color: #0b1220 !important;
}

body[data-theme="dark"] .bg-\[\#111827\],
body[data-theme="dark"] .bg-gray-900,
body[data-theme="dark"] .bg-slate-900 {
    background-color: #111827 !important;
}

body[data-theme="dark"] .bg-\[\#131d2e\],
body[data-theme="dark"] .bg-\[\#172033\],
body[data-theme="dark"] .bg-gray-800,
body[data-theme="dark"] .bg-slate-800 {
    background-color: #172033 !important;
}

/* Dark text */
body[data-theme="dark"] .text-black,
body[data-theme="dark"] .text-gray-900,
body[data-theme="dark"] .text-gray-800,
body[data-theme="dark"] .text-gray-700,
body[data-theme="dark"] .text-slate-900,
body[data-theme="dark"] .text-slate-800,
body[data-theme="dark"] .text-slate-700 {
    color: #f3f4f6 !important;
}

body[data-theme="dark"] .text-gray-600,
body[data-theme="dark"] .text-gray-500,
body[data-theme="dark"] .text-slate-600,
body[data-theme="dark"] .text-slate-500 {
    color: #9ca3af !important;
}

/* Dark borders */
body[data-theme="dark"] .border-gray-100,
body[data-theme="dark"] .border-gray-200,
body[data-theme="dark"] .border-gray-300,
body[data-theme="dark"] .border-slate-100,
body[data-theme="dark"] .border-slate-200,
body[data-theme="dark"] .border-slate-300 {
    border-color: #374151 !important;
}

/* Inputs */
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
}

body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
    color: #6b7280 !important;
}

/* Tables */
body[data-theme="dark"] table,
body[data-theme="dark"] thead,
body[data-theme="dark"] tbody,
body[data-theme="dark"] tr,
body[data-theme="dark"] th,
body[data-theme="dark"] td {
    border-color: #374151 !important;
}

body[data-theme="dark"] thead,
body[data-theme="dark"] th {
    background-color: #172033 !important;
    color: #e5e7eb !important;
}

body[data-theme="dark"] tbody,
body[data-theme="dark"] td {
    background-color: #111827 !important;
    color: #d1d5db !important;
}

/* Common cards and dialogs */
body[data-theme="dark"] [role="dialog"],
body[data-theme="dark"] [role="menu"],
body[data-theme="dark"] .modal,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .card {
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

/* =========================================================
   LIGHT MODE — FORCE USER PAGES LIGHT
   ========================================================= */

body[data-theme="light"] header,
body[data-theme="light"] nav,
body[data-theme="light"] aside,
body[data-theme="light"] footer {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}

body[data-theme="light"] main {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

body[data-theme="light"] .bg-\[\#0b1220\],
body[data-theme="light"] .bg-\[\#0B1220\],
body[data-theme="light"] .bg-\[\#111827\],
body[data-theme="light"] .bg-\[\#131d2e\],
body[data-theme="light"] .bg-\[\#172033\],
body[data-theme="light"] .bg-gray-950,
body[data-theme="light"] .bg-gray-900,
body[data-theme="light"] .bg-gray-800,
body[data-theme="light"] .bg-slate-950,
body[data-theme="light"] .bg-slate-900,
body[data-theme="light"] .bg-slate-800 {
    background-color: #ffffff !important;
}

body[data-theme="light"] .border-gray-900,
body[data-theme="light"] .border-gray-800,
body[data-theme="light"] .border-gray-700,
body[data-theme="light"] .border-slate-900,
body[data-theme="light"] .border-slate-800,
body[data-theme="light"] .border-slate-700 {
    border-color: #e5e7eb !important;
}

body[data-theme="light"] .text-white,
body[data-theme="light"] .text-gray-100,
body[data-theme="light"] .text-gray-200,
body[data-theme="light"] .text-gray-300,
body[data-theme="light"] .text-slate-100,
body[data-theme="light"] .text-slate-200,
body[data-theme="light"] .text-slate-300 {
    color: #111827 !important;
}

body[data-theme="light"] .text-gray-400,
body[data-theme="light"] .text-gray-500,
body[data-theme="light"] .text-slate-400,
body[data-theme="light"] .text-slate-500 {
    color: #6b7280 !important;
}

body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

body[data-theme="light"] [role="dialog"],
body[data-theme="light"] [role="menu"],
body[data-theme="light"] .modal,
body[data-theme="light"] .modal-content,
body[data-theme="light"] .dropdown-menu,
body[data-theme="light"] .card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}

/* =========================================================
   THEME BUTTON
   ========================================================= */

#topchain-theme-toggle {
    display: inline-flex !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 60 !important;
}

html[data-theme="dark"] #topchain-theme-toggle {
    background-color: #172033 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

html[data-theme="light"] #topchain-theme-toggle {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

/* TradingView outer wrappers only */
body[data-theme="dark"] .tradingview-widget-container,
body[data-theme="dark"] .tradingview-widget-container__widget {
    background-color: #111827 !important;
}

body[data-theme="light"] .tradingview-widget-container,
body[data-theme="light"] .tradingview-widget-container__widget {
    background-color: #ffffff !important;
}