/* ============================================================================
   TURIUM THEME - CUSTOM COLOR OVERRIDES
   ============================================================================
   Professional theme customization for Turium ERP
   Overrides Frappe's default gray control backgrounds with light red accents
   Maintains accessibility and supports both light and dark modes
   ============================================================================ */

/*
:root,
[data-theme="light"] {
	-- Custom Turium Ultra-Light Pinkish-White Palette -
	-- These colors are barely noticeable - whitish with subtle warm red undertones -
	--turium-red-50: #FFFCFD;
	-- Base: Manager requested shade -
	--turium-red-100: #FFFAFB;
	-- 99.5% White -
	--turium-red-200: #FFF8F9;
	-- 99% White -
	--turium-red-300: #FFF6F7;
	-- 98.5% White -
	--turium-red-400: #FFF4F5;
	-- 98% White -
	--turium-red-500: #FFF2F3;
	-- 97.5% White -
	--turium-red-600: #FFF0F1;
	-- 97% White -
	--turium-red-700: #FFEEEF;
	-- 96.5% White -
	--turium-red-800: #FFEBEC;
	-- 96% White -
	--turium-red-900: #FFE9EA;
	-- 95.5% White -

	-- Override Frappe's Control & Subtle Backgrounds with Ultra-Light Pinkish-White -
	--subtle-accent: var(--turium-red-50) !important;
	-- Was: #f8f8f8 → Now: #fffafa (99% white) -
	--subtle-fg: var(--turium-red-100) !important;
	-- Was: #f3f3f3 → Now: #fff8f8 (98% white) -
	--control-bg: var(--turium-red-100) !important;
	-- Was: #f3f3f3 → Now: #fff8f8 (98% white) -
	--control-bg-on-gray: var(--turium-red-200) !important;
	-- Was: #ededed → Now: #fff5f5 (97% white) -

	-- Complementary adjustments for visual harmony - barely noticeable transitions -
	--fg-hover-color: var(--turium-red-200) !important;
	-- Hover states - subtle warmth -
	--awesomplete-hover-bg: var(--turium-red-200) !important;
	--btn-default-bg: var(--turium-red-100) !important;
	--btn-default-hover-bg: var(--turium-red-200) !important;

	-- Input field backgrounds - ultra subtle -
	--input-bg: var(--turium-red-100) !important;

	-- Placeholder and disabled states - slightly more visible for contrast -
	--placeholder-color: var(--turium-red-300) !important;
	--disabled-control-bg: var(--turium-red-200) !important;

	-- Skeleton loading states -
	--skeleton-bg: var(--turium-red-200) !important;

	-- Scrollbar and subtle UI elements -
	--scrollbar-track-color: var(--turium-red-200) !important;

	-- Sidebar specific overrides for light red tint -
	--sidebar-select-color: var(--turium-red-100) !important;

	-- CRITICAL: Sidebar background - this is what the .body-sidebar uses -
	--surface-menu-bar: var(--turium-red-50) !important;
	-- Was: #f8f8f8 -

	-- Sidebar state colors -
	--sidebar-hover-color: var(--turium-red-200) !important;
	-- Was: #f3f3f3 -
	--sidebar-active-color: var(--turium-red-100) !important;
	-- Was: white -
	--sidebar-border-color: var(--turium-red-200) !important;
	-- Was: #ededed -

	-- CRITICAL: Card background - THIS IS WHAT ALL WIDGETS USE! -
	--card-bg: var(--turium-red-50) !important;
	-- Was: white - This controls ALL widget backgrounds -

	-- Foreground color - used by many components -
	--fg-color: white !important;
	-- Keep white for main content areas -
}
*/

/* Dark Mode Support - Adjusted Red Tones for Dark Theme */
/*
[data-theme="dark"],
body.dark-theme,
html[data-theme="dark"] {
	-- Dark mode red palette - muted for better contrast -
	--turium-dark-red-800: #2d1515;
	--turium-dark-red-700: #3d1f1f;
	--turium-dark-red-600: #4d2626;
	--turium-dark-red-500: #5d2d2d;

	-- Override dark mode backgrounds with dark red tones -
	--subtle-fg: var(--turium-dark-red-700) !important;
	--control-bg: var(--turium-dark-red-800) !important;
	--control-bg-on-gray: var(--turium-dark-red-700) !important;

	-- Dark mode complementary adjustments -
	--fg-hover-color: var(--turium-dark-red-700) !important;
	--awesomplete-hover-bg: var(--turium-dark-red-800) !important;
	--btn-default-bg: var(--turium-dark-red-800) !important;
	--btn-default-hover-bg: var(--turium-dark-red-700) !important;

	--subtle-accent: var(--turium-dark-red-800) !important;
	--input-bg: var(--turium-dark-red-800) !important;
	--disabled-control-bg: var(--turium-dark-red-700) !important;
	--skeleton-bg: var(--turium-dark-red-800) !important;
	--placeholder-color: var(--turium-dark-red-600) !important;
}
*/

/* Specific Component Overrides for Consistency */
/*
.form-control,
.input-with-feedback,
.form-in-grid .form-control {
	background-color: var(--control-bg) !important;
}

.frappe-control[data-fieldtype="Select"] select,
.frappe-control[data-fieldtype="Link"] input,
.frappe-control[data-fieldtype="Data"] input,
.frappe-control[data-fieldtype="Int"] input,
.frappe-control[data-fieldtype="Float"] input,
.frappe-control[data-fieldtype="Currency"] input,
.frappe-control[data-fieldtype="Date"] input,
.frappe-control[data-fieldtype="Datetime"] input,
.frappe-control[data-fieldtype="Time"] input {
	background-color: var(--control-bg) !important;
}

-- Button default state -
.btn-default:not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
	background-color: var(--btn-default-bg) !important;
}

.btn-default:not(.btn-primary):not(.btn-secondary):not(.btn-danger):hover {
	background-color: var(--btn-default-hover-bg) !important;
}

-- Awesomplete dropdown backgrounds -
.awesomplete>ul {
	background-color: var(--control-bg) !important;
}

.awesomplete>ul>li:hover,
.awesomplete>ul>li[aria-selected="true"] {
	background-color: var(--awesomplete-hover-bg) !important;
}

-- Grid and table subtle backgrounds -
.grid-row,
.data-row {
	background-color: var(--subtle-fg) !important;
}

-- Modal and form backgrounds in grid -
.modal .form-control,
.form-in-grid .form-control {
	background-color: var(--control-bg) !important;
}

-- Ensure text remains readable on light red backgrounds -
.form-control::placeholder {
	color: var(--text-muted);
	opacity: 0.6;
}
*/

/* ============================================================================
   DIRECT SIDEBAR CLASS OVERRIDES - CRITICAL FOR SIDEBAR BACKGROUND
   ============================================================================ */

/*
-- Main sidebar container - this is the key element from the DOM -
.body-sidebar,
.body-sidebar-container .body-sidebar {
	background: var(--turium-red-50) !important;
	background-color: var(--turium-red-50) !important;
}

-- Sidebar header with logo -
.sidebar-header,
.body-sidebar .sidebar-header {
	background-color: transparent !important;
}

-- Sidebar item states -
.standard-sidebar-item:hover {
	background-color: var(--turium-red-200) !important;
}

.standard-sidebar-item.active-sidebar,
.active-sidebar {
	background-color: var(--turium-red-100) !important;
}

-- Sidebar item container -
.sidebar-item-container {
	background-color: transparent !important;
}

-- Nested sidebar items -
.nested-container {
	background-color: transparent !important;
}

-- Sidebar divider -
.body-sidebar .divider {
	border-color: var(--turium-red-200) !important;
}

-- Collapse sidebar link -
.collapse-sidebar-link:hover {
	background-color: var(--turium-red-200) !important;
}


-- Sidebar and List View Overrides - Apply Ultra-Light Pinkish-White -
.layout-side-section,
.list-sidebar {
	background-color: var(--turium-red-50) !important;
}

.layout-side-section .sidebar-label,
.list-sidebar .sidebar-label {
	background-color: var(--turium-red-100) !important;
}

.layout-side-section .list-link,
.list-sidebar .list-link {
	background-color: transparent !important;
}

.layout-side-section .list-link:hover,
.list-sidebar .list-link:hover {
	background-color: var(--turium-red-200) !important;
}

.layout-side-section .list-link.active,
.list-sidebar .list-link.active {
	background-color: var(--turium-red-200) !important;
}

-- Standard Sidebar -
.standard-sidebar-section {
	background-color: var(--turium-red-50) !important;
}

.standard-sidebar-item:hover {
	background-color: var(--turium-red-200) !important;
}

-- Filter Area -
.filter-area,
.filter-section {
	background-color: var(--turium-red-50) !important;
}

-- List View Rows -
.list-row {
	background-color: var(--turium-red-50) !important;
}

.list-row:hover {
	background-color: var(--turium-red-100) !important;
}

.list-row-container:hover {
	background-color: var(--turium-red-100) !important;
}

-- Page Header and Toolbar -
.page-head {
	background-color: var(--turium-red-50) !important;
}

-- Cards and Widgets -
.widget,
.widget-group,
.frappe-card {
	background-color: var(--turium-red-50) !important;
}

-- Dashboard and Kanban -
.kanban-column,
.kanban-card {
	background-color: var(--turium-red-50) !important;
}

-- Tree View -
.tree-node:hover {
	background-color: var(--turium-red-100) !important;
}

-- Report Builder -
.report-wrapper .page-form {
	background-color: var(--turium-red-50) !important;
}

-- Workspace -
.workspace-sidebar {
	background-color: var(--turium-red-50) !important;
}

.workspace-sidebar-item:hover {
	background-color: var(--turium-red-200) !important;
}

-- Dropdown menus -
.dropdown-menu {
	background-color: white !important;
}

.dropdown-item:hover {
	background-color: var(--turium-red-100) !important;
}

-- Popover -
.popover {
	background-color: white !important;
}

-- Tab content backgrounds -
.tab-content {
	background-color: transparent !important;
}

-- Form sections -
.form-section {
	background-color: transparent !important;
}

.form-section .section-head {
	background-color: var(--turium-red-50) !important;
}

-- Grid form -
.grid-form {
	background-color: var(--turium-red-50) !important;
}

-- Awesomebar (search bar) -
.awesomplete input {
	background-color: var(--turium-red-100) !important;
}

-- Navbar -
.navbar {
	background-color: white !important;
}

-- Control read mode -
.control-value {
	background-color: transparent !important;
}

-- Like count and other badges -
.badge-light {
	background-color: var(--turium-red-100) !important;
}
*/

/* ============================================================================
   END TURIUM THEME OVERRIDES
   ============================================================================ */

.layout-side-section,
.list-sidebar {
	position: relative !important;
}

.layout-side-section[data-collapsed="true"]>*:not(.turium-sidebar-toggle),
.layout-side-section[data-collapsed="true"]>*:not(.turium-sidebar-toggle) *,
.list-sidebar[data-collapsed="true"]>*:not(.turium-sidebar-toggle),
.list-sidebar[data-collapsed="true"]>*:not(.turium-sidebar-toggle) * {
	display: none !important;
}

.turium-sidebar-toggle {
	cursor: pointer;
	transition: opacity 0.2s ease;
	display: flex !important;
	visibility: visible !important;
	pointer-events: auto !important;
	z-index: 1000 !important;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.turium-sidebar-toggle:hover {
	opacity: 0.7 !important;
}

.turium-sidebar-toggle .icon {
	transition: all 0.2s ease;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	color: #6b7280;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.turium-sidebar-toggle .toggle-text {
	white-space: nowrap;
}

body.dark-theme .turium-sidebar-toggle .icon,
html[data-theme="dark"] .turium-sidebar-toggle .icon,
body[data-theme="dark"] .turium-sidebar-toggle .icon {
	color: #9ca3af !important;
}

body.dark-theme .turium-sidebar-toggle,
html[data-theme="dark"] .turium-sidebar-toggle,
body[data-theme="dark"] .turium-sidebar-toggle {
	color: #d1d5db !important;
}

body.dark-theme .turium-sidebar-toggle .toggle-text,
html[data-theme="dark"] .turium-sidebar-toggle .toggle-text,
body[data-theme="dark"] .turium-sidebar-toggle .toggle-text {
	color: #d1d5db !important;
}

img.app-logo[src*="/assets/frappe"],
img.brand-logo[src*="/assets/frappe"] {
	opacity: 0 !important;
	visibility: hidden !important;
	display: none !important;
}

img.app-logo[src*="/assets/turium_erp"],
img.brand-logo[src*="/assets/turium_erp"] {
	opacity: 1 !important;
	visibility: visible !important;
	display: inline-block !important;
}

/* ============================================================================
   ICON CONTAINER BACKGROUND OVERRIDE
   ============================================================================ */

/* Target ONLY the icon-container (the box around the icon, not the caption) */
/*
.icon-container,
div.icon-container,
.desktop-icon .icon-container,
a.desktop-icon .icon-container {
	background-color: var(--turium-red-50) !important;
}
*/

/* Target app-icon images - remove any background they might have */
.app-icon,
img.app-icon,
.icon-container .app-icon,
.icon-container img.app-icon {
	background-color: transparent !important;
}

/* Apply grayscale filter ONLY to Frappe/ERPNext default icons and Turium Framework */
/* This targets only icons from Frappe's default paths and Turium theme, leaving other custom apps untouched */
.app-icon[src*="/assets/erpnext/"],
.app-icon[src*="/assets/frappe/"],
.app-icon[src*="/assets/turium_theme/"],
img.app-icon[src*="/assets/erpnext/"],
img.app-icon[src*="/assets/frappe/"],
.icon-container .app-icon[src*="/assets/erpnext/"],
.icon-container .app-icon[src*="/assets/frappe/"],
.icon-container img.app-icon[src*="/assets/erpnext/"],
.icon-container img.app-icon[src*="/assets/frappe/"] {
	/* Match the lighter, thinner look of the inline SVG icons (System, Data, etc.) */
	/* 1. Neutralize color to gray */
	/* 2. Reduce opacity to 0.7 to match the 'ink-gray-7' look */
	/* 3. Scale down to 0.75 to match the visual weight/size */
	/* COLOR-RELATED: Commented out - filter and opacity changes */
	/* filter: grayscale(100%) contrast(0.8) brightness(1.2); */
	/* opacity: 0.7; */
	transform: scale(0.75);
	transform-origin: center;
}

/* Turium Framework icon - keep slightly stronger but still grayscale */
.app-icon[src*="/assets/turium_theme/"],
img.app-icon[src*="/assets/turium_theme/"],
.icon-container .app-icon[src*="/assets/turium_theme/"],
.icon-container img.app-icon[src*="/assets/turium_theme/"] {
	/* COLOR-RELATED: Commented out - filter changes */
	/* filter: brightness(0) saturate(100%) invert(27%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%); */
	transform: scale(0.8);
	transform-origin: center;
}


/* Keep colored SVG icons but remove their background containers */
.icon-container svg,
.app-icon svg {
	background: transparent !important;
}

/* Hover state for icon container */
/*
.desktop-icon:hover .icon-container,
a.desktop-icon:hover .icon-container {
	background-color: var(--turium-red-100) !important;
}
*/

/* Ensure consistency across all icon types */
.desktop-icon .icon-container *[class*="icon"],
.icon-container *[class*="icon"] {
	background-color: transparent !important;
}

/* Make Turium Framework icons smaller */
.app-icon[src*="/assets/turium_theme/"],
img.app-icon[src*="/assets/turium_theme/"] {
	transform: scale(0.8);
	transform-origin: center;
}

/* Hide Onboarding Widget (Get Started Card) */
.onboarding-widget-box,
[data-widget-type="onboarding"],
.widget.onboarding {
	display: none !important;
}

/* ============================================================================
   UNIVERSAL ONBOARDING DISABLER - ALL APPS
   ============================================================================
   Hides "Getting Started" cards across Frappe Desk, CRM, LMS, and all custom apps
   ============================================================================ */

/* Frappe Desk Onboarding */
.onboarding-widget-box,
[data-widget-type="onboarding"],
.widget.onboarding,
.ce-block:has(.onboarding-widget-box) {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Vue SPA Onboarding (CRM, LMS, etc.) */
.bg-surface-modal.shadow-sm.rounded-lg:has([class*="Getting started"]),
.bg-surface-modal.shadow-sm.rounded-lg:has([class*="Welcome to"]),
.flex.flex-col.gap-3.shadow-sm.rounded-lg.bg-surface-modal,
div.flex.flex-col.gap-3.shadow-sm.rounded-lg[class*="py-"],
.bg-surface-modal.text-base:has([class*="Getting started"]),
.bg-surface-modal.text-base:has([class*="Welcome to"]) {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Wildcard patterns for any onboarding-related classes */
[class*="onboarding"],
div[class*="getting-started"],
div[class*="get-started"],
div[class*="welcome-card"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Content-based hiding (most aggressive) */
div:has(> div:contains("Getting started")),
div:has(> div:contains("Welcome to Frappe")),
div:has(> div:contains("steps completed")) {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Ultra-specific selectors for LMS and other Vue SPAs */
/* Broad targeting of modal-like structures that could be onboarding */
div.bg-surface-modal.shadow-sm.rounded-lg,
div.flex.flex-col.gap-3.shadow-sm.rounded-lg.bg-surface-modal,
div.flex.flex-col.gap-3.shadow-sm.rounded-lg.text-base {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	z-index: -1 !important;
}