/**
 * Durus Academy LMS — Dark Mode Stylesheet
 *
 * Implements a CSS-variable-based theme system.
 * Zero core logic modifications. Pure style overrides.
 *
 * @package DurusAcademy
 * @since   2.1.0
 */

/* ==========================================================================
   1. Theme Variables Map
   ========================================================================== */

/* Light Theme (Default / Fallback) */
:root {
	--da-bg: #f1f5f9;
	--da-bg-card: #ffffff;
	--da-text: #334155;
	--da-text-muted: #64748b;
	--da-border-color: #e2e8f0;
	--da-header-bg: rgba(255, 255, 255, 0.85);
	--da-sidebar-bg: #ffffff;
	--da-sidebar-hover: rgba(16, 185, 129, 0.08);
	--da-input-bg: #ffffff;
	--da-input-border: #cbd5e1;
	--da-shadow-theme: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
	--da-white: #ffffff;
}

/* Dark Theme overrides (Freeze Rule 3) */
html[data-theme="dark"] {
	/* Core Main Theme overrides (Instantly propagates to main.css components) */
	--da-dark: #f8fafc;
	--da-light-bg: #0f172a;
	--da-border: #334155;
	--da-text: #e2e8f0;
	--da-muted: #94a3b8;
	--da-white: #1e293b;
	--da-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
	--da-shadow-lg: 0 10px 25px rgb(0 0 0 / 0.35);

	/* Theme overrides from implementation_plan */
	--da-bg: #0f172a; /* Slate 900 */
	--da-bg-card: #1e293b; /* Slate 800 */
	--da-text-muted: #94a3b8; /* Slate 400 */
	--da-border-color: #334155; /* Slate 700 */
	--da-header-bg: rgba(15, 23, 42, 0.9);
	--da-sidebar-bg: #1e293b;
	--da-sidebar-hover: rgba(16, 185, 129, 0.15);
	--da-input-bg: #0f172a;
	--da-input-border: #475569;
	--da-shadow-theme: 0 4px 12px rgb(0 0 0 / 0.25);
}

/* ==========================================================================
   2. Core Component Mappings
   ========================================================================== */
body {
	background-color: var(--da-bg) !important;
	color: var(--da-text) !important;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--da-text) !important;
	transition: color 0.25s ease;
}

p, span, li, td, th {
	color: inherit;
}

/* Catalog Cards & Grid items */
.da-course-card {
	background: var(--da-bg-card) !important;
	border: 1px solid var(--da-border-color) !important;
	box-shadow: var(--da-shadow-theme) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease, border-color 0.25s ease !important;
}

.da-course-card:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.da-course-meta-item {
	color: var(--da-text-muted) !important;
}

/* ==========================================================================
   3. Header & Global Nav Overrides
   ========================================================================== */
.da-header {
	background: var(--da-header-bg) !important;
	border-bottom: 1px solid var(--da-border-color) !important;
	box-shadow: var(--da-shadow-theme) !important;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.da-brand-name {
	background: linear-gradient(to right, var(--da-text), var(--da-text-muted)) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.da-nav-link {
	color: var(--da-text-muted) !important;
	transition: all 0.2s ease !important;
}

.da-nav-link:hover, 
.da-nav-link.active {
	color: var(--da-primary, #10b981) !important;
	background-color: var(--da-sidebar-hover) !important;
}

.da-user-badge {
	background: var(--da-bg) !important;
	border-color: var(--da-border-color) !important;
	color: var(--da-text) !important;
	transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

.da-user-name {
	color: var(--da-text) !important;
}

/* ==========================================================================
   4. Sidebar Drawer & Syllabus Tree Overrides
   ========================================================================== */
.da-study-sidebar {
	background-color: var(--da-sidebar-bg) !important;
	border-right: 1px solid var(--da-border-color) !important;
	transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

.da-study-sidebar-header {
	border-bottom: 1px solid var(--da-border-color) !important;
	transition: border-color 0.25s ease !important;
}

.da-syllabus-link {
	color: var(--da-text-muted) !important;
}

.da-syllabus-link:hover {
	color: var(--da-text) !important;
	background-color: var(--da-sidebar-hover) !important;
}

.da-active-item .da-syllabus-link {
	color: var(--da-primary, #10b981) !important;
	background-color: var(--da-sidebar-hover) !important;
	font-weight: 700 !important;
}

.da-sidebar-progress-bar {
	background: var(--da-border-color) !important;
}

.da-sidebar-progress-text {
	color: var(--da-text-muted) !important;
}

.da-progress-stat-row {
	border-bottom: 1px solid var(--da-border-color) !important;
	color: var(--da-text-muted) !important;
}

.da-progress-stat-row strong {
	color: var(--da-text) !important;
}

/* ==========================================================================
   5. Study Layout Components
   ========================================================================== */
.da-study-content {
	background-color: var(--da-bg) !important;
}

.da-study-lesson-header {
	border-bottom: 1px solid var(--da-border-color) !important;
}

.da-study-lesson-body {
	color: var(--da-text) !important;
}

/* Form controls & inputs */
textarea, 
input[type="text"], 
input[type="email"], 
input[type="password"], 
select {
	background-color: var(--da-input-bg) !important;
	border-color: var(--da-input-border) !important;
	color: var(--da-text) !important;
	transition: all 0.2s ease !important;
}

textarea:focus, 
input[type="text"]:focus, 
select:focus {
	border-color: var(--da-primary, #10b981) !important;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important;
}

/* Panel & Tabs overrides (F.2 compatibility) */
.da-study-tabs {
	background: var(--da-bg-card) !important;
	border: 1px solid var(--da-border-color) !important;
}

.da-study-tab-bar {
	background: var(--da-bg) !important;
	border-bottom: 1px solid var(--da-border-color) !important;
}

.da-tab-btn {
	color: var(--da-text-muted) !important;
}

.da-tab-btn:hover {
	color: var(--da-text) !important;
}

.da-tab-btn.da-tab-active {
	color: var(--da-primary, #10b981) !important;
}

.da-note-item {
	background: rgba(255, 255, 255, 0.01) !important;
	border: 1px solid var(--da-border-color) !important;
}

html[data-theme="dark"] .da-note-item {
	background: rgba(0, 0, 0, 0.15) !important;
}

.da-note-text {
	color: var(--da-text) !important;
}

.da-note-action-btn {
	color: var(--da-text-muted) !important;
}

.da-note-action-btn:hover {
	color: var(--da-text) !important;
}

/* Quiz Active Bar Overrides */
html[data-theme="dark"] .da-quiz-active-bar {
	background-color: rgba(59, 130, 246, 0.1) !important;
	border-color: rgba(59, 130, 246, 0.25) !important;
}

/* Dashboard & Notifications Boxes */
.da-table-box {
	background: var(--da-bg-card) !important;
	border: 1px solid var(--da-border-color) !important;
	box-shadow: var(--da-shadow-theme) !important;
}

.da-notifications-header {
	border-bottom: 1px solid var(--da-border-color) !important;
}

.da-notification-item {
	border-bottom: 1px solid var(--da-border-color) !important;
}

html[data-theme="dark"] .da-notification-item.unread {
	background-color: rgba(16, 185, 129, 0.05) !important;
}

/* Certificate Cards & Assets on Dashboard */
.da-certificate-card {
	background: var(--da-bg-card) !important;
	border-color: var(--da-border-color) !important;
	box-shadow: var(--da-shadow-theme) !important;
}

.da-cert-card-title {
	color: var(--da-text) !important;
}

.da-cert-meta-val {
	color: var(--da-text) !important;
}

.da-cert-card-uid code {
	background: var(--da-bg) !important;
	color: var(--da-text) !important;
}

.da-cert-thumbnail-placeholder {
	background: var(--da-bg) !important;
	border-color: var(--da-border-color) !important;
	color: var(--da-text-muted) !important;
}

/* ==========================================================================
   6. Plyr HTML overrides (Freeze Rule 6)
   ========================================================================== */
html[data-theme="dark"] .plyr--video {
	--plyr-color-main: var(--da-primary, #10b981);
	--plyr-video-control-background-hover: rgba(255, 255, 255, 0.12);
	--plyr-menu-background: #1e293b;
	--plyr-menu-color: #f8fafc;
	--plyr-tooltip-background: #1e293b;
	--plyr-tooltip-color: #f8fafc;
}

/* Plyr Menu container overrides for hardcoded colors in some versions */
html[data-theme="dark"] .plyr__menu__container {
	background: #1e293b !important;
	color: #f8fafc !important;
	border: 1px solid var(--da-border-color) !important;
	box-shadow: var(--da-shadow-theme) !important;
}

html[data-theme="dark"] .plyr__menu__container [role="menuitemradio"] {
	color: #f8fafc !important;
}

html[data-theme="dark"] .plyr__menu__container [role="menuitemradio"]:hover {
	background: var(--da-sidebar-hover) !important;
}

/* ==========================================================================
   7. Theme Switcher Toggle button (Desktop & Mobile)
   ========================================================================== */
.da-theme-toggle {
	background: transparent;
	border: 1px solid var(--da-border-color);
	color: var(--da-text-muted);
	cursor: pointer;
	padding: 8px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	min-width: 36px;
	min-height: 36px;
}

.da-theme-toggle:hover {
	color: var(--da-text);
	background: var(--da-sidebar-hover);
	border-color: var(--da-text-muted);
}

.da-theme-toggle svg {
	display: none;
}

/* Toggle icon display mapping */
html[data-theme="dark"] .da-theme-icon-sun {
	display: block;
}

html:not([data-theme="dark"]) .da-theme-icon-moon {
	display: block;
}

/* Course single detail block styling overrides */
.da-course-details-card,
.da-curriculum-section,
.da-review-card {
	background-color: var(--da-bg-card) !important;
	border-color: var(--da-border-color) !important;
}

.da-sidebar-card {
	background-color: var(--da-bg-card) !important;
	border-color: var(--da-border-color) !important;
}