/* Theme variables and base reset */

:root {
	/* Light theme: white backgrounds, black text, black borders */
	--bg-color: #ffffff;
	--text-color: #000000;
	--muted-text-color: #4b5563;
	--card-bg: #ffffff;
	--border-color: #000000;
	--input-bg: #ffffff;
	--input-text: #000000;
	--primary: #0d6efd;
	--success: #198754;
	--danger: #dc3545;
	--warning: #ffc107;
	--info: #0dcaf0;
}


:root[data-theme="dark"] {
	/* Dark theme: black/dark backgrounds, white text, white borders */
	--bg-color: #000000;
	--text-color: #ffffff;
	--muted-text-color: #d1d5db;
	--card-bg: #0a0a0a;
	--border-color: #ffffff;
	--input-bg: #0a0a0a;
	--input-text: #ffffff;
	--primary: #60a5fa;
	--success: #34d399;
	--danger: #f87171;
	--warning: #fbbf24;
	--info: #38bdf8;
}

html, body {
	background: var(--bg-color);
	color: var(--text-color);
}

/* Force structural backgrounds site-wide */
body, main, section, article, aside, header, footer, .container, .container-fluid, .row, .col, .content, .page-wrapper {
	background: var(--bg-color) !important;
}

/* Enforce text color across common tags */
h1, h2, h3, h4, h5, h6,
p, label, span, small, li, dt, dd,
th, td, a, button {
	color: var(--text-color) !important;
}

a { text-decoration-color: var(--text-color); }

/* Common containers */
.card, .content-panel, .panel, .modal-content, .dropdown-menu, .offcanvas, .accordion-item {
	background: var(--card-bg) !important;
	color: var(--text-color) !important;
	border-color: var(--border-color) !important;
	border: 1px solid var(--border-color) !important;
}

hr, .border, .table, .table > :not(caption) > * > * {
	border-color: var(--border-color) !important;
}

/* Inputs */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea, .form-control, .form-select {
	background: var(--input-bg) !important;
	color: var(--input-text) !important;
	border-color: var(--border-color) !important;
	border: 1px solid var(--border-color) !important;
}
.input-group-text { background: var(--card-bg) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }

/* Buttons */
.btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-success { background-color: var(--success) !important; border-color: var(--success) !important; }
.btn-danger { background-color: var(--danger) !important; border-color: var(--danger) !important; }
.btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; color: #111827 !important; }
.btn-info { background-color: var(--info) !important; border-color: var(--info) !important; }

/* Tables */
.table { color: var(--text-color) !important; border-color: var(--border-color) !important; }
.table thead th { color: var(--text-color) !important; }
.table, .table > :not(caption) > * > * { border-color: var(--border-color) !important; }
.table, .table-bordered, .table-bordered > :not(caption) > * { border-width: 1px !important; }

/* Navbars/headers */
.navbar, .topbar, header.site-header, .sidebar, .footer {
	background: var(--card-bg) !important;
	color: var(--text-color) !important;
	border-bottom: 1px solid var(--border-color) !important;
	border-top: 0 !important; border-left: 0 !important; border-right: 0 !important;
}

/* Ensure header links/icons are visible in light theme */
.navbar .navbar-brand, .navbar .nav-link, .navbar .dropdown-item, .navbar .bi {
	color: var(--text-color) !important;
}
.navbar .dropdown-menu {
	background: var(--card-bg) !important;
	color: var(--text-color) !important;
	border: 1px solid var(--border-color) !important;
}

/* Utility */
.text-muted { color: var(--muted-text-color) !important; }

/* Chart containers */
.tradingview-widget-container, #chartContainer, .chart-container {
	background: var(--card-bg) !important;
}

/* Light theme: force Your Assets section to white */
.light-mode .assets-section-custom,
.light-mode .assets-section-custom .panel-header,
.light-mode .assets-section-custom .panel-body,
.light-mode .assets-section-custom .card,
.light-mode .assets-section-custom .content-panel,
.light-mode .assets-section-custom table,
.light-mode .assets-section-custom table thead,
.light-mode .assets-section-custom table thead th,
.light-mode .assets-section-custom table tr,
.light-mode .assets-section-custom table td,
.light-mode .assets-section-custom table th {
	background: #ffffff !important;
	color: #000000 !important;
	border-color: #000000 !important;
}

/* Panel header adjustments (fix black header in light theme) */
.light-mode .panel-header, .light-mode .content-panel .panel-header, .light-mode .card .panel-header {
	background: #ffffff !important;
	color: #000000 !important;
	border-bottom: 1px solid #000000 !important;
}
.dark-mode .panel-header, .dark-mode .content-panel .panel-header, .dark-mode .card .panel-header {
	background: #0a0a0a !important;
	color: #ffffff !important;
	border-bottom: 1px solid rgba(255,255,255,.28) !important;
}

/* User dashboard specific cards */
.light-mode .summary-card,
.light-mode .main-balance-card,
.light-mode .quick-stats-card,
.light-mode .content-panel.assets-section-custom {
	background: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #000000 !important;
	box-shadow: none !important;
}

.dark-mode .summary-card,
.dark-mode .main-balance-card,
.dark-mode .quick-stats-card,
.dark-mode .content-panel.assets-section-custom {
	background: #0a0a0a !important;
	color: #ffffff !important;
	border: 1px solid rgba(255,255,255,.28) !important; /* subtle white */
	box-shadow: 0 8px 30px rgba(0,0,0,.45) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Force dashboard sections to white bg + black text in light mode */
.light-mode .card, .light-mode .content-panel, .light-mode .panel, .light-mode .modal-content, .light-mode .dropdown-menu {
	background: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #000000 !important;
}
.light-mode .bg-dark, .light-mode .text-white, .light-mode .bg-secondary, .light-mode .bg-gradient {
	background: #ffffff !important;
	color: #000000 !important;
	border-color: #000000 !important;
}
.light-mode .table, .light-mode .table > :not(caption) > * > * { color: #000000 !important; border-color: #000000 !important; }
.light-mode .form-control, .light-mode .form-select { background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; }
.light-mode .input-group-text { background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; }

/* Notification badge red */
.badge, .badge-notification, .notification-badge, .alert-count {
	background-color: #dc2626 !important; /* red-600 */
	color: #ffffff !important;
}

/* Header notification label text */
.navbar .notification-label, .navbar .notif-label, .navbar .nav-link .label, .navbar .badge-label {
	color: #dc2626 !important;
}
.navbar .nav-link .badge, .navbar .btn .badge, .navbar .badge { background-color: #dc2626 !important; color: #ffffff !important; border-color: #dc2626 !important; }

/* Dark mode smooth white border across cards site-wide */
.dark-mode .card, .dark-mode .content-panel, .dark-mode .panel, .dark-mode .modal-content, .dark-mode .dropdown-menu, .dark-mode .offcanvas, .dark-mode .accordion-item {
	border: 1px solid rgba(255,255,255,.28) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,.45) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Light mode enforce assets section white */
.light-mode .assets-section-custom, .light-mode .assets-section-custom .card, .light-mode .assets-section-custom .content-panel {
	background: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #000000 !important;
}

/* Links */
a, a:hover, a:focus { color: var(--text-color) !important; }

/* Form states */
.form-control:focus, .form-select:focus { box-shadow: none !important; outline: 2px solid var(--border-color) !important; }

/* Badges/alerts adapt text color */
.alert, .badge, .list-group-item { color: var(--text-color) !important; background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; }

/* Map Bootstrap utility backgrounds to theme */
.bg-light, .bg-white, .text-bg-light { background-color: var(--bg-color) !important; color: var(--text-color) !important; }
.bg-dark, .text-bg-dark { background-color: var(--card-bg) !important; color: var(--text-color) !important; }
.text-dark { color: var(--text-color) !important; }

/* Borders */
.border, .border-top, .border-end, .border-bottom, .border-start, .modal-header, .modal-footer, .dropdown-divider { border-color: var(--border-color) !important; }

/* Floating theme toggle */

.theme-toggle-btn {
	position: fixed;
	right: 84px; /* closer to the bell */
	top: 12px;
	z-index: 100000;
	background: var(--card-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(0,0,0,.2);
	cursor: pointer;
}
.theme-toggle-btn:hover { filter: brightness(1.05); }