/* Prevent white overscroll flash and set global background */
html, body { background-color: #ffffff; }
#theme-root.dark ~ style, #theme-root.dark ~ link { color-scheme: dark; }
#theme-root.dark body, #theme-root.dark html { background-color: #0f1115 !important; }
#theme-root.dark { background-color: #0f1115; }
/* Subtle Dark Mode Support */
/* Light mode is default (no overrides here). When #theme-root has class 'dark', apply dark palette. */

#theme-root.dark {
	background-color: #0f1115;
	color: #e5e7eb;
}

#theme-root.dark .navbar, #theme-root.dark .glass-nav {
	background-color: #0f131b !important;
	border-bottom-color: rgba(255,255,255,0.08) !important;
}

#theme-root.dark .card {
	background-color: #151925 !important;
	border-color: rgba(255,255,255,0.08) !important;
	color: #e5e7eb;
}

#theme-root.dark .card-header {
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)) !important;
}

#theme-root.dark .list-group-item {
	background-color: #121826 !important;
	border-color: rgba(255,255,255,0.06) !important;
	color: #e5e7eb !important;
}

#theme-root.dark .dropdown-menu, #theme-root.dark .Select-menu-outer, #theme-root.dark .Select-menu, #theme-root.dark .Select-control {
	background-color: #0f131b !important;
	color: #e5e7eb !important;
	border-color: rgba(255,255,255,0.08) !important;
}
#theme-root.dark .Select-placeholder { color: #9aa3b2 !important; }
#theme-root.dark .Select-value, #theme-root.dark .Select-value-label { color: #f3f4f6 !important; }
#theme-root.dark .Select-option { color: #e5e7eb !important; background-color: transparent !important; }
#theme-root.dark .Select-option:hover, #theme-root.dark .Select-option.is-focused { background-color: #1a2132 !important; }
#theme-root.dark .Select-option.is-selected { background-color: #22304a !important; }

#theme-root.dark .form-label, #theme-root.dark label { color: #e5e7eb; }

#theme-root.dark .btn-primary {
	background-color: #2563eb !important;
	border-color: #1d4ed8 !important;
}

#theme-root.dark .text-muted { color: #9ca3af !important; }

#theme-root.dark .table, #theme-root.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
	color: #e5e7eb;
}

/* Plotly graphs: keep backgrounds dark for readability */
#theme-root.dark .js-plotly-plot .plotly .main-svg {
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}

/* Switches (dbc.Switch / Bootstrap) */
#theme-root.dark .form-switch .form-check-input {
	background-color: #1f2937 !important;
	border-color: rgba(255,255,255,0.2) !important;
}
#theme-root.dark .form-switch .form-check-input:checked {
	background-color: #2563eb !important;
	border-color: #2563eb !important;
}
#theme-root.dark .form-switch .form-check-input:focus {
	box-shadow: 0 0 0 0.2rem rgba(37,99,235,0.25) !important;
}

/* Slider (dcc.Slider -> rc-slider) */
#theme-root.dark .rc-slider-rail { background-color: #2b3446 !important; }
#theme-root.dark .rc-slider-track { background-color: #2563eb !important; }
#theme-root.dark .rc-slider-handle {
	border: 2px solid #60a5fa !important;
	background-color: #0f131b !important;
	box-shadow: 0 0 0 2px rgba(37,99,235,0.25) !important;
}
#theme-root.dark .rc-slider-handle:hover,
#theme-root.dark .rc-slider-handle:active,
#theme-root.dark .rc-slider-handle:focus {
	border-color: #93c5fd !important;
	box-shadow: 0 0 0 4px rgba(37,99,235,0.25) !important;
}
#theme-root.dark .rc-slider-dot { border-color: #3b4254 !important; background-color: #1a2132 !important; }
#theme-root.dark .rc-slider-mark-text { color: #cbd5e1 !important; }
#theme-root.dark .rc-slider-mark-text-active { color: #e5e7eb !important; }

/* Slider (disabled state) */
#theme-root.dark .rc-slider.rc-slider-disabled { opacity: 1 !important; }
#theme-root.dark .rc-slider-disabled .rc-slider-rail { background-color: #151a24 !important; }
#theme-root.dark .rc-slider-disabled .rc-slider-track { background-color: #1e2634 !important; }
#theme-root.dark .rc-slider-disabled .rc-slider-handle {
	border: 2px solid #374151 !important;
	background-color: #0f131b !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}
#theme-root.dark .rc-slider-disabled .rc-slider-handle:hover,
#theme-root.dark .rc-slider-disabled .rc-slider-handle:active,
#theme-root.dark .rc-slider-disabled .rc-slider-handle:focus {
	border-color: #374151 !important;
	box-shadow: none !important;
}
#theme-root.dark .rc-slider-disabled .rc-slider-dot { border-color: #202533 !important; background-color: #141a26 !important; }
#theme-root.dark .rc-slider-disabled .rc-slider-mark-text { color: #6b7280 !important; }

/* Tabs (dbc.Tabs) – soften hover/active backgrounds in dark mode */
#theme-root.dark .nav-tabs {
	border-bottom-color: rgba(255,255,255,0.08) !important;
}
#theme-root.dark .nav-tabs .nav-link {
	color: #e5e7eb !important;
	border-color: transparent !important;
}
#theme-root.dark .nav-tabs .nav-link:hover {
	background-color: #1a2132 !important;
	color: #e5e7eb !important;
	border-color: rgba(255,255,255,0.12) rgba(255,255,255,0.12) #0f131b !important;
}
#theme-root.dark .nav-tabs .nav-link.active,
#theme-root.dark .nav-tabs .nav-item.show .nav-link {
	color: #ffffff !important;
	background-color: #0f131b !important;
	border-color: rgba(255,255,255,0.12) rgba(255,255,255,0.12) transparent !important;
}
/* Optional: tab content on dark */
#theme-root.dark .tab-content {
	background-color: transparent;
}

/* Brand logo brightness per theme */
.brand-logo { display: inline-block; }
.brand-logo.dark-only { display: none; }
.brand-logo.light-only { display: inline-block; }
#theme-root.dark .brand-logo.light-only { display: none; }
#theme-root.dark .brand-logo.dark-only { display: inline-block; }
/* Only invert if class 'invert' is present (fallback case) */
#theme-root.dark .brand-logo.dark-only.invert { filter: invert(1) saturate(120%) contrast(105%); }

/* Language flags: ensure crisp scaling and comfortable click target */
.lang-btn {
	padding: 0.125rem 0.375rem !important; /* slim but clickable */
	line-height: 1 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
.lang-btn:hover {
	background: rgba(0,0,0,0.06) !important;
}
.lang-btn:focus, .lang-btn:active {
	box-shadow: none !important;
}
.lang-btn.btn-outline-secondary {
	border: none !important;
}
.lang-flag {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; /* legacy */
	border-radius: 0; /* remove edge */
	display: block;
}
#theme-root.dark .lang-btn {
	color: #e5e7eb !important;
}
#theme-root.dark .lang-btn:hover {
	background-color: #1a2132 !important;
}

/* Daily date picker compact styling */
.daily-date-picker {
	font-size: 12px;
	position: relative;
}
.daily-date-picker input {
	padding: 4px 12px !important;
	height: 30px !important;
	line-height: 20px !important;
	border-radius: 999px !important; /* pill */
	border: 1px solid rgba(0,0,0,0.2) !important;
	background: rgba(255,255,255,0.85) !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
	backdrop-filter: blur(4px) !important;
	cursor: pointer !important;
	caret-color: transparent !important; /* hide caret */
	user-select: none !important; /* discourage typing */
}
.daily-date-picker input:hover {
	box-shadow: 0 3px 12px rgba(0,0,0,0.25) !important;
}
.daily-date-picker input:focus {
	outline: none !important;
	border-color: #2563eb !important;
	box-shadow: 0 0 0 2px rgba(37,99,235,0.35), 0 3px 12px rgba(0,0,0,0.25) !important;
}
.daily-date-picker .DateInput, .daily-date-picker .SingleDatePickerInput {
	background: transparent !important;
	border: none !important;
}

/* Dark theme for date picker */
#theme-root.dark .daily-date-picker input {
	background: rgba(0,0,0,0.5) !important;
	color: #e5e7eb !important;
	border: 1px solid rgba(255,255,255,0.28) !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
	backdrop-filter: blur(4px) !important;
}
#theme-root.dark .daily-date-picker input:hover {
	box-shadow: 0 3px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
}
#theme-root.dark .daily-date-picker input:focus {
	border-color: #60a5fa !important;
	box-shadow: 0 0 0 2px rgba(96,165,250,0.4), 0 3px 16px rgba(0,0,0,0.6) !important;
}

/* Dark mode DatePicker input text and placeholder visibility */
#theme-root.dark .daily-date-picker .DateInput_input {
	color: #e5e7eb !important; /* input text */
}
#theme-root.dark .daily-date-picker .DateInput_input::placeholder {
	color: #cbd5e1 !important; /* brighter placeholder for contrast */
	opacity: 0.95 !important; /* ensure it doesn't fade too much */
}
#theme-root.dark .daily-date-picker input::placeholder {
	color: #cbd5e1 !important;
	opacity: 0.95 !important;
}
#theme-root.dark .daily-date-picker .SingleDatePicker_picker,
#theme-root.dark .daily-date-picker .DayPicker,
#theme-root.dark .daily-date-picker .DayPicker__withBorder,
#theme-root.dark .daily-date-picker .CalendarMonth,
#theme-root.dark .daily-date-picker .CalendarMonthGrid,
#theme-root.dark .daily-date-picker .DayPicker_weekHeader,
#theme-root.dark .daily-date-picker .CalendarMonth_caption {
	background-color: #0f131b !important;
	color: #e5e7eb !important;
	border-color: rgba(255,255,255,0.18) !important;
}
#theme-root.dark .daily-date-picker .DayPicker__withBorder {
	box-shadow: 0 6px 24px rgba(0,0,0,0.6) !important;
}
#theme-root.dark .daily-date-picker .CalendarDay__default {
	background: #0f131b !important;
	color: #e5e7eb !important;
	border: 1px solid #1f2937 !important;
}
#theme-root.dark .daily-date-picker .CalendarDay__hovered_span,
#theme-root.dark .daily-date-picker .CalendarDay__hovered,
#theme-root.dark .daily-date-picker .CalendarDay__selected_span {
	background: #1a2132 !important;
	color: #fff !important;
}
#theme-root.dark .daily-date-picker .DayPickerNavigation__horizontalDefault {
	background: transparent !important;
}
#theme-root.dark .daily-date-picker .DayPickerNavigation_button,
#theme-root.dark .daily-date-picker .DayPickerNavigation__horizontal,
#theme-root.dark .daily-date-picker .DayPickerNavigation__horizontalDefault {
	background-color: #0f131b !important;
	border-color: rgba(255,255,255,0.18) !important;
}
#theme-root.dark .daily-date-picker .DayPickerNavigation_button__default {
	border: 1px solid rgba(255,255,255,0.18) !important;
	background-color: #121826 !important;
	color: #e5e7eb !important;
}
#theme-root.dark .daily-date-picker .DayPickerNavigation_button__default:hover {
	background-color: #1a2132 !important;
}
#theme-root.dark .daily-date-picker {
	/* subtle dark halo when over images */
	filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45));
}

/* Role WR badges: avoid text cursor and selection */
.role-badge {
	cursor: default !important; /* arrow cursor */
	user-select: none !important; /* no text selection */
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
}

/* Dark mode: make outside/disabled (grayed out) dates visible */
#theme-root.dark .daily-date-picker .CalendarDay__outside {
	color: #9aa3b2 !important; /* softer gray for contrast on dark */
	opacity: 0.7 !important;
	background: #0f131b !important;
	border-color: #243047 !important;
}
#theme-root.dark .daily-date-picker .CalendarDay__outside:hover {
	background: #151a24 !important;
	color: #e5e7eb !important;
}
#theme-root.dark .daily-date-picker .CalendarDay__blocked_out_of_range,
#theme-root.dark .daily-date-picker .CalendarDay__blocked_calendar {
	color: #6b7280 !important; /* disabled */
	background: #0f131b !important;
	border-color: #2b3446 !important;
	cursor: not-allowed !important;
}
#theme-root.dark .daily-date-picker .CalendarDay__blocked_out_of_range:hover,
#theme-root.dark .daily-date-picker .CalendarDay__blocked_calendar:hover {
	background: #121826 !important;
	color: #9aa3b2 !important;
}

/* Light mode calendar container tweak to soften white box */
.daily-date-picker .SingleDatePicker_picker,
.daily-date-picker .DayPicker,
.daily-date-picker .DayPicker__withBorder,
.daily-date-picker .CalendarMonth,
.daily-date-picker .CalendarMonthGrid,
.daily-date-picker .DayPicker_weekHeader,
.daily-date-picker .CalendarMonth_caption {
	background-color: #ffffff !important;
	border-color: rgba(0,0,0,0.12) !important;
}
.daily-date-picker .DayPicker__withBorder {
	box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important;
}