/* Theme system (global)
   - Uses Bootstrap 5.3 color mode via `data-bs-theme`.
   - Persists override via `data-theme` (localStorage) so custom CSS can react too.
   - Provides shared tokens for dashboard/navbar/components.
*/

/* Defaults (DARK) */
:root {
	color-scheme: dark;

	/* App tokens */
	--app-bg: #0b0f14;
	--app-text: #e9ecef;
	--app-muted: #cbd5e1;
	--app-surface: #161b22;
	--app-surface-2: #0f172a;
	--app-border: rgba(255, 255, 255, 0.10);
	--app-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30);

	/* Navbar / dropdown */
	--nav-bg: rgba(22, 27, 34, 0.72);
	--nav-border: rgba(255, 255, 255, 0.06);
	--quick-bg: rgba(22, 27, 34, 0.95);
	--quick-border: rgba(255, 255, 255, 0.06);
	--quick-btn-bg: rgba(22, 27, 34, 0.60);
	--quick-btn-border: rgba(255, 255, 255, 0.08);

	/* Dashboard tokens (dashboard.css uses these) */
	--dash-bg: var(--app-bg);
	--dash-surface: var(--app-surface);
	--dash-text: var(--app-text);
	--dash-muted: #8b949e;
	--dash-accent: #0d6efd;
	--dash-accent-rgb: 13,110,253;
	--shadow: var(--app-shadow);
	--dash-card-border: rgba(255,255,255,0.08);
	--dash-card-shadow: 0 2px 6px rgba(0,0,0,.40);
	--dash-card-shadow-hover: 0 6px 18px -4px rgba(var(--dash-accent-rgb),.45), 0 3px 10px rgba(0,0,0,.55);
	--dash-control-bg: rgba(22,27,34,0.70);
	--dash-control-border: rgba(255,255,255,0.12);
}

/* LIGHT theme (either attribute works; we set both in JS) */
html[data-bs-theme="light"],
html[data-theme="light"] {
	color-scheme: light;
	--app-bg: #f2f1ef;
	--app-text: #0f172a;
	--app-muted: #475569;
	--app-surface: #ffffff;
	--app-surface-2: #f1f5f9;
	--app-border: rgba(15, 23, 42, 0.12);
	--app-shadow: 0 10px 28px rgba(2, 8, 23, 0.10);

	--nav-bg: rgba(255, 255, 255, 0.78);
	--nav-border: rgba(15, 23, 42, 0.10);
	--quick-bg: rgba(255, 255, 255, 0.96);
	--quick-border: rgba(15, 23, 42, 0.10);
	--quick-btn-bg: rgba(241, 245, 249, 0.80);
	--quick-btn-border: rgba(15, 23, 42, 0.12);

	--dash-bg: var(--app-bg);
	--dash-surface: var(--app-surface);
	--dash-text: var(--app-text);
	--dash-muted: #64748b;
	--shadow: var(--app-shadow);
	--dash-card-border: rgba(15, 23, 42, 0.12);
	--dash-card-shadow: 0 2px 10px rgba(2, 8, 23, 0.08);
	--dash-card-shadow-hover: 0 12px 26px rgba(2, 8, 23, 0.14);
	--dash-control-bg: rgba(241,245,249,0.92);
	--dash-control-border: rgba(15, 23, 42, 0.14);
}

/* Baseline app colors */
html, body { background: var(--app-bg) !important; color: var(--app-text) !important; }

/* Navbar (shared) */
.nav-glass { background: var(--nav-bg) !important; border-color: var(--nav-border) !important; }
.dropdown-quick { background: var(--quick-bg) !important; border-color: var(--quick-border) !important; box-shadow: var(--app-shadow) !important; }
.nav-quick .btn-icon { background: var(--quick-btn-bg) !important; border-color: var(--quick-btn-border) !important; }

/* Bootstrap navbar vars for our shared nav (so markup doesn't need navbar-dark/light) */
html[data-bs-theme="dark"] .nav-glass.navbar,
html[data-theme="dark"] .nav-glass.navbar {
	--bs-navbar-color: rgba(233, 236, 239, 0.85);
	--bs-navbar-hover-color: rgba(233, 236, 239, 1);
	--bs-navbar-active-color: rgba(233, 236, 239, 1);
	--bs-navbar-brand-color: rgba(233, 236, 239, 1);
	--bs-navbar-brand-hover-color: rgba(233, 236, 239, 1);
	--bs-navbar-toggler-border-color: rgba(233, 236, 239, 0.20);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28233%2c236%2c239%2c0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html[data-bs-theme="light"] .nav-glass.navbar,
html[data-theme="light"] .nav-glass.navbar {
	--bs-navbar-color: rgba(15, 23, 42, 0.85);
	--bs-navbar-hover-color: rgba(15, 23, 42, 1);
	--bs-navbar-active-color: rgba(15, 23, 42, 1);
	--bs-navbar-brand-color: rgba(15, 23, 42, 1);
	--bs-navbar-brand-hover-color: rgba(15, 23, 42, 1);
	--bs-navbar-toggler-border-color: rgba(15, 23, 42, 0.20);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815%2c23%2c42%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Navbar vars: some pages still use `navbar-dark` markup.
   In light mode we override Bootstrap navbar CSS vars so text/toggler render correctly. */
html[data-bs-theme="light"] .nav-glass.navbar-dark,
html[data-theme="light"] .nav-glass.navbar-dark {
	--bs-navbar-color: rgba(15, 23, 42, 0.85);
	--bs-navbar-hover-color: rgba(15, 23, 42, 1);
	--bs-navbar-active-color: rgba(15, 23, 42, 1);
	--bs-navbar-brand-color: rgba(15, 23, 42, 1);
	--bs-navbar-brand-hover-color: rgba(15, 23, 42, 1);
	--bs-navbar-toggler-border-color: rgba(15, 23, 42, 0.20);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815%2c23%2c42%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Theme toggle button */
.btn-theme-toggle { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }

/* Theme switch (slider with moon/sun) */
.ccg-theme-switch{
	--switch-w: 58px;
	--switch-h: 30px;
	--pad: 3px;
	--travel: calc(var(--switch-w) - var(--switch-h));
	--ccg-thumb-x: 0px;
	width: var(--switch-w);
	height: var(--switch-h);
	border-radius: 999px;
	border: 1px solid var(--app-border);
	background: rgba(255,255,255,0.08);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
	box-shadow: 0 8px 18px rgba(0,0,0,0.25);
	touch-action: pan-y;
}

/* Theme switch fixed at bottom (requested) */
.ccg-theme-fab-wrap{
	position: fixed;
	right: calc(16px + env(safe-area-inset-right));
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 1080;
}
.ccg-theme-switch-inner{ position: absolute; inset: 0; }
.ccg-theme-switch-moon,
.ccg-theme-switch-sun{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.95rem;
	opacity: 0.75;
}
.ccg-theme-switch-moon{ left: 9px; }
.ccg-theme-switch-sun{ right: 9px; }
.ccg-theme-switch-thumb{
	position: absolute;
	top: var(--pad);
	left: var(--pad);
	width: calc(var(--switch-h) - (var(--pad) * 2));
	height: calc(var(--switch-h) - (var(--pad) * 2));
	border-radius: 999px;
	background: rgba(255,255,255,0.88);
	box-shadow: 0 6px 14px rgba(2, 8, 23, 0.25);
	transform: translateX(var(--ccg-thumb-x));
	transition: transform .18s ease, background .18s ease;
}

.ccg-theme-switch.is-dragging .ccg-theme-switch-thumb{ transition: none; }

/* Light vs dark positioning + highlight */
.ccg-theme-switch[data-theme-active="light"] .ccg-theme-switch-thumb{
	--ccg-thumb-x: var(--travel);
	background: rgba(255,255,255,0.98);
}
.ccg-theme-switch[data-theme-active="light"] .ccg-theme-switch-sun{ opacity: 1; color: #b45309; }
.ccg-theme-switch[data-theme-active="light"] .ccg-theme-switch-moon{ opacity: .45; }

.ccg-theme-switch[data-theme-active="dark"] .ccg-theme-switch-thumb{ transform: translateX(0); background: rgba(255,255,255,0.90); }
.ccg-theme-switch[data-theme-active="dark"] .ccg-theme-switch-thumb{ --ccg-thumb-x: 0px; background: rgba(255,255,255,0.90); }
.ccg-theme-switch[data-theme-active="dark"] .ccg-theme-switch-moon{ opacity: 1; color: #c7d2fe; }
.ccg-theme-switch[data-theme-active="dark"] .ccg-theme-switch-sun{ opacity: .45; }

/* Fallback before JS runs */
html[data-bs-theme="light"] .ccg-theme-switch .ccg-theme-switch-thumb,
html[data-theme="light"] .ccg-theme-switch .ccg-theme-switch-thumb{ transform: translateX(calc(var(--switch-w) - var(--switch-h))); }

html[data-bs-theme="light"] .ccg-theme-switch,
html[data-theme="light"] .ccg-theme-switch{ background: rgba(245, 158, 11, 0.14); }
html[data-bs-theme="dark"] .ccg-theme-switch,
html[data-theme="dark"] .ccg-theme-switch{ background: rgba(59, 130, 246, 0.12); }

/* Theme toggle feedback (glow + icon color) */
/* Prefer data-theme-active (set by theme.js). Fallback to html theme attributes for first paint. */
.btn-theme-toggle[data-theme-active="light"],
html[data-bs-theme="light"] .btn-theme-toggle,
html[data-theme="light"] .btn-theme-toggle {
	color: #b45309 !important; /* amber-700 */
	border-color: rgba(245, 158, 11, 0.55) !important;
	background: rgba(245, 158, 11, 0.18) !important;
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 10px 24px rgba(2, 8, 23, 0.10);
}

.btn-theme-toggle[data-theme-active="dark"],
html[data-bs-theme="dark"] .btn-theme-toggle,
html[data-theme="dark"] .btn-theme-toggle {
	color: #c7d2fe !important; /* indigo-200 */
	border-color: rgba(59, 130, 246, 0.45) !important;
	background: rgba(59, 130, 246, 0.14) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18), 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Make muted text behave consistently */
html[data-bs-theme="dark"],
html[data-theme="dark"] {
	color-scheme: dark;
}
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--app-muted) !important; }

/* Task detail modal helper (let theme decide) */
.task-detail-modal {
	border: 1px solid var(--app-border);
	background: var(--app-surface-2);
	color: var(--app-text);
}
html[data-bs-theme="light"] .task-detail-modal,
html[data-theme="light"] .task-detail-modal { background: var(--app-surface); }