/**
 * REFINED PREMIUM GLASSY (UNIFIED NAV & TOPBAR)
 * Path: public/css/glassy.css
 */

:root {
	--bg-main: #020617;
	--glass-sidebar: rgba(10, 10, 10, 0.6);
	--glass-topbar: rgba(10, 10, 10, 0.4);
	--glass-card: rgba(15, 23, 42, 0.6);
	--glass-border: rgba(255, 255, 255, 0.06);
	--glass-blur: 16px;
	--neon-accent: #06b6d4;
}

/* Light Mode Override - Clean & Crisp */
:root:not(.dark) {
	--bg-main: #f8fafc;
	--glass-sidebar: rgba(255, 255, 255, 0.8);
	--glass-topbar: rgba(255, 255, 255, 0.6);
	--glass-card: rgba(255, 255, 255, 0.7);
	--glass-border: rgba(0, 0, 0, 0.05);
}

/* Background - Deep & Smooth */
body.fi-body {
	background-color: var(--bg-main) !important;
	background-image:
		radial-gradient(circle at 0% 0%, rgba(6, 182, 212, 0.05) 0%, transparent 40%),
		radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.05) 0%, transparent 40%) !important;
	background-attachment: fixed !important;
}

/* Sidebar - Deep Glass */
.fi-sidebar {
	background-color: var(--glass-sidebar) !important;
	backdrop-filter: blur(20px) !important;
	border-right: 1px solid var(--glass-border) !important;
	box-shadow: none !important;
}

/* Remove step-by-step connector lines/dots in sidebar groups */
.fi-sidebar-item-grouped-border {
	display: none !important;
}

/* Sidebar Items - Clean */
.fi-sidebar-item {
	margin: 4px 12px !important;
	border-radius: 8px !important;
	transition: all 0.15s ease !important;
}

/* Indent items within navigation groups */
.fi-sidebar-group .fi-sidebar-item {
	margin-left: 24px !important;
	padding-left: 8px !important;
}

/* Active item with left accent bar */
.fi-sidebar-item.fi-active {
	background-color: rgba(245, 158, 11, 0.1) !important;
	border-left: 3px solid var(--primary-600, #d97706) !important;
}

/* Group header styling */
.fi-sidebar-group-btn {
	padding: 8px 16px !important;
	margin-bottom: 2px !important;
}

.fi-sidebar-group-label {
	font-weight: 700 !important;
	font-size: 0.7rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	opacity: 0.6 !important;
}

/* Hover state */
.fi-sidebar-item:not(.fi-active):hover {
	background-color: rgba(128, 128, 128, 0.05) !important;
}

/* Topbar - Seamless Glass */
.fi-topbar {
	background-color: var(--glass-topbar) !important;
	backdrop-filter: blur(12px) !important;
	border-bottom: 1px solid var(--glass-border) !important;
	box-shadow: none !important;
}

/* ------ Glass Card Pattern (shared across components) ------ */

.fi-section,
.fi-card,
.fi-ta-ctn,
.fi-modal-window,
.fi-wi-stats-overview-stat {
	background-color: var(--glass-card) !important;
	backdrop-filter: blur(var(--glass-blur)) !important;
	border: 1px solid var(--glass-border) !important;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2) !important;
	border-radius: 1rem !important;
	margin-bottom: 1rem !important;
}

.fi-fo-date-time-picker-panel {
	position: fixed !important;
	z-index: 999 !important;
}

/* Fix for stacked backgrounds in Widgets/Sections */
.fi-section .fi-section-content .fi-wi-stats-overview-stat,
.fi-section .fi-card,
.fi-section .fi-ta-ctn {
	background-color: transparent !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	border: 1px solid var(--glass-border) !important;
}

.dark .fi-section,
.dark .fi-card,
.dark .fi-wi-stats-overview-stat {
	box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* ------ Form Controls ------ */

.fi-input-wrp {
	background-color: rgba(0, 0, 0, 0.1) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: 8px !important;
}

:root:not(.dark) .fi-input-wrp {
	background-color: rgba(255, 255, 255, 0.5) !important;
}

.fi-input-wrp:focus-within {
	border-color: var(--neon-accent) !important;
	box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.2) !important;
}

/* ------ Buttons ------ */

.fi-btn-color-primary {
	background: linear-gradient(135deg, #0891b2, #06b6d4) !important;
	border: none !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.3) !important;
}

/* ------ Scrollbar ------ */

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(4px);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(6, 182, 212, 0.3);
	border: 1px solid rgba(6, 182, 212, 0.5);
}

.dark ::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.03);
}

* {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}