/* ═══════════════════════════════════════════
   UL Theme — Standalone App Overrides
   Injected into CRM, Drive, LMS, Gameplan,
   Builder, Insights via Python monkey-patch.
   Overrides frappe-ui CSS variables with the
   same Tailwind gray palette used on the desk.
   ═══════════════════════════════════════════ */

/* ── Light Mode ─────────────────────────── */

:root,
[data-theme="light"] {
	/* Surface (backgrounds) */
	--surface-white: #ffffff;
	--surface-gray-1: #f9fafb;
	--surface-gray-2: #f3f4f6;
	--surface-gray-3: #e5e7eb;
	--surface-gray-4: #d1d5db;
	--surface-gray-5: #6b7280;
	--surface-gray-6: #4b5563;
	--surface-gray-7: #1f2937;
	--surface-menu-bar: #f9fafb;
	--surface-cards: #ffffff;
	--surface-modal: #ffffff;
	--surface-selected: #f3f4f6;

	/* Outline (borders) */
	--outline-gray-1: #e5e7eb;
	--outline-gray-2: #d1d5db;
	--outline-gray-3: #9ca3af;
	--outline-gray-4: #6b7280;
	--outline-gray-modals: #e5e7eb;

	/* Ink (text) */
	--ink-gray-1: #e5e7eb;
	--ink-gray-2: #d1d5db;
	--ink-gray-3: #9ca3af;
	--ink-gray-4: #6b7280;
	--ink-gray-5: #6b7280;
	--ink-gray-6: #4b5563;
	--ink-gray-7: #4b5563;
	--ink-gray-8: #374151;
	--ink-gray-9: #111827;
}

/* ── Dark Mode ──────────────────────────── */

[data-theme="dark"] {
	/* Surface (backgrounds) */
	--surface-white: #1f2937;
	--surface-gray-1: #111827;
	--surface-gray-2: #1f2937;
	--surface-gray-3: #374151;
	--surface-gray-4: #4b5563;
	--surface-gray-5: #9ca3af;
	--surface-gray-6: #d1d5db;
	--surface-gray-7: #f9fafb;
	--surface-menu-bar: #111827;
	--surface-cards: #1f2937;
	--surface-modal: #1f2937;
	--surface-selected: #374151;

	/* Outline (borders) */
	--outline-white: #1f2937;
	--outline-gray-1: #374151;
	--outline-gray-2: #4b5563;
	--outline-gray-3: #6b7280;
	--outline-gray-4: #9ca3af;
	--outline-gray-5: #e5e7eb;
	--outline-gray-modals: #374151;

	/* Ink (text) */
	--ink-white: #111827;
	--ink-gray-1: #1f2937;
	--ink-gray-2: #374151;
	--ink-gray-3: #6b7280;
	--ink-gray-4: #6b7280;
	--ink-gray-5: #9ca3af;
	--ink-gray-6: #d1d5db;
	--ink-gray-7: #e5e7eb;
	--ink-gray-8: #f3f4f6;
	--ink-gray-9: #f9fafb;
}

/* ═══════════════════════════════════════════
   Tailwind utility class overrides (dark mode)
   Some standalone apps (notably Insights v3)
   compile Tailwind to static RGB values instead
   of frappe-ui CSS variables. These overrides
   map them to our theme variables in dark mode.
   ═══════════════════════════════════════════ */

/* ── Backgrounds ─────────────────────────── */
[data-theme="dark"] .bg-white {
	background-color: var(--surface-white) !important;
}
[data-theme="dark"] .bg-gray-50 {
	background-color: var(--surface-gray-1) !important;
}
[data-theme="dark"] .bg-gray-100,
html.bg-gray-100[data-theme="dark"] {
	background-color: var(--surface-gray-2) !important;
}
[data-theme="dark"] .bg-gray-200 {
	background-color: var(--surface-gray-3) !important;
}
[data-theme="dark"] .bg-gray-300 {
	background-color: var(--surface-gray-4) !important;
}

/* Hover backgrounds */
[data-theme="dark"] .hover\:bg-white:hover {
	background-color: var(--surface-white) !important;
}
[data-theme="dark"] .hover\:bg-gray-50:hover {
	background-color: var(--surface-gray-1) !important;
}
[data-theme="dark"] .hover\:bg-gray-100:hover {
	background-color: var(--surface-gray-2) !important;
}

/* ── Text ────────────────────────────────── */
[data-theme="dark"] .text-white {
	color: #ffffff !important;
}
[data-theme="dark"] .text-gray-400 {
	color: var(--ink-gray-4) !important;
}
[data-theme="dark"] .text-gray-500 {
	color: var(--ink-gray-5) !important;
}
[data-theme="dark"] .text-gray-600 {
	color: var(--ink-gray-6) !important;
}
[data-theme="dark"] .text-gray-700 {
	color: var(--ink-gray-7) !important;
}
[data-theme="dark"] .text-gray-800 {
	color: var(--ink-gray-8) !important;
}
[data-theme="dark"] .text-gray-900 {
	color: var(--ink-gray-9) !important;
}
[data-theme="dark"] .text-black {
	color: #f9fafb !important;
}

/* ── Borders ─────────────────────────────── */
[data-theme="dark"] .border-gray-100 {
	border-color: var(--outline-gray-1) !important;
}
[data-theme="dark"] .border-gray-200 {
	border-color: var(--outline-gray-1) !important;
}
[data-theme="dark"] .border-gray-300 {
	border-color: var(--outline-gray-2) !important;
}
[data-theme="dark"] .border-gray-400 {
	border-color: var(--outline-gray-3) !important;
}
[data-theme="dark"] .border-white {
	border-color: var(--outline-gray-1) !important;
}
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
	border-color: var(--outline-gray-1) !important;
}

/* ── Ring ────────────────────────────────── */
[data-theme="dark"] .ring-gray-200 {
	--tw-ring-color: var(--outline-gray-1) !important;
}
[data-theme="dark"] .ring-gray-300 {
	--tw-ring-color: var(--outline-gray-2) !important;
}

/* ── Placeholder ─────────────────────────── */
[data-theme="dark"] .placeholder-gray-500::placeholder {
	color: var(--ink-gray-4) !important;
}

/* ═══════════════════════════════════════════
   ERPel Sidebar Link (standalone apps)
   Injected by standalone-theme.js at the top
   of every standalone app sidebar.
   ═══════════════════════════════════════════ */

.erpel-sidebar-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	margin-bottom: 2px;
	text-decoration: none !important;
	border-top: none !important;
	border-bottom: 1px solid var(--outline-gray-1, #e5e7eb);
	transition: background 0.15s ease;
}

.erpel-sidebar-link:hover {
	background: var(--surface-gray-2, #f3f4f6);
	text-decoration: none !important;
}

.erpel-sidebar-text {
	font-weight: 600;
	font-size: 14px;
	color: var(--ink-gray-8, #374151);
}

/* Dark mode adjustments */
[data-theme="dark"] .erpel-sidebar-link {
	border-bottom-color: var(--outline-gray-1, #374151);
}

[data-theme="dark"] .erpel-sidebar-link:hover {
	background: var(--surface-gray-3, #374151);
}

[data-theme="dark"] .erpel-sidebar-text {
	color: var(--ink-gray-8, #f3f4f6);
}

/* Collapsed sidebar (LMS lesson view uses w-14 = 56px) */
.w-14 .erpel-sidebar-link {
	justify-content: center;
	padding: 8px 0;
	border-bottom: none !important;
	margin-bottom: 0;
}
.w-14 .erpel-sidebar-text {
	display: none;
}

/* ═══════════════════════════════════════════
   Helpdesk-specific dark mode overrides
   Helpdesk uses static Tailwind classes like
   Insights, plus some custom classes.
   ═══════════════════════════════════════════ */

/* Shadow overrides */
[data-theme="dark"] .shadow-sm {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .shadow-md {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .shadow-lg {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important;
}

/* Focus ring overrides */
[data-theme="dark"] .focus\:ring-gray-200:focus {
	--tw-ring-color: var(--outline-gray-1) !important;
}
[data-theme="dark"] .focus\:ring-gray-300:focus {
	--tw-ring-color: var(--outline-gray-2) !important;
}
[data-theme="dark"] .focus\:border-gray-300:focus {
	border-color: var(--outline-gray-2) !important;
}

/* Active/selected states */
[data-theme="dark"] .hover\:bg-gray-200:hover {
	background-color: var(--surface-gray-3) !important;
}
[data-theme="dark"] .hover\:bg-gray-300:hover {
	background-color: var(--surface-gray-4) !important;
}
[data-theme="dark"] .hover\:text-gray-700:hover {
	color: var(--ink-gray-7) !important;
}
[data-theme="dark"] .hover\:text-gray-800:hover {
	color: var(--ink-gray-8) !important;
}
[data-theme="dark"] .hover\:text-gray-900:hover {
	color: var(--ink-gray-9) !important;
}

/* Border variants */
[data-theme="dark"] .border-r {
	border-right-color: var(--outline-gray-1, #374151) !important;
}
[data-theme="dark"] .border-b {
	border-bottom-color: var(--outline-gray-1, #374151) !important;
}
[data-theme="dark"] .border-t {
	border-top-color: var(--outline-gray-1, #374151) !important;
}
[data-theme="dark"] .border-l {
	border-left-color: var(--outline-gray-1, #374151) !important;
}

/* ═══════════════════════════════════════════
   Root backgrounds for standalone apps.
   html/body/#app have no classes in standalone
   apps — transparent falls through to white.
   Set explicit dark backgrounds.
   ═══════════════════════════════════════════ */

html[data-theme="dark"] {
	background-color: var(--surface-gray-1, #111827) !important;
}
html[data-theme="dark"] body {
	background-color: var(--surface-gray-1, #111827) !important;
	color: var(--ink-gray-8, #f3f4f6) !important;
}
html[data-theme="dark"] #app {
	background-color: var(--surface-gray-1, #111827) !important;
}