/* ── Modals ───────────────────────────────────────────────────────── */
.modal-content {
	background-color: var(--color-bg-elevated) !important;
	border: none;
	border-radius: var(--radius-xl);
	color: var(--color-text) !important;
	overflow: hidden;
}

.modal-header {
	background-color: var(--color-bg-subtle);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-3) 15px;
	border-top-left-radius: var(--radius-xl);
	border-top-right-radius: var(--radius-xl);
	color: var(--color-text);
}

.modal-header .modal-title {
	color: inherit;
	font-weight: 700;
	margin: 0;
}

.modal-header .btn-close {
	filter: none;
}

.modal-body {
	padding: var(--space-5);
	color: var(--color-text) !important;
	background-color: var(--color-bg-elevated);
}

.modal-body input,
.modal-body select,
.modal-body textarea {
	color: var(--color-text) !important;
	background-color: var(--color-bg-elevated) !important;
	border-color: var(--color-border) !important;
}

.modal-body input::placeholder {
	color: var(--color-text-muted) !important;
}

.modal-body .text-muted,
.modal-body p {
	color: var(--color-text-muted) !important;
}

.modal-body .card {
	background-color: var(--color-bg-elevated) !important;
}

.modal-body .card-body {
	color: var(--color-text) !important;
}

.modal-body strong {
	color: var(--color-text) !important;
}

.modal-body small {
	color: var(--color-text-muted) !important;
}

.modal-body .alert-info {
	background-color: rgba(84, 128, 192, 0.1) !important;
	color: var(--color-primary) !important;
	border-color: rgba(84, 128, 192, 0.3) !important;
}

.modal-footer {
	background-color: var(--color-bg-subtle);
	border-top: 1px solid var(--color-border);
	padding: var(--space-3) 15px;
}

.modal-visible {
	display: block;
}

.modal-wide {
	max-width: 1180px;
	width: calc(100vw - 2rem);
}

.modal-standard {
	max-width: 800px;
	width: calc(100vw - 2rem);
}

.modal-backdrop-block {
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-header-primary {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.modal-client-name {
	opacity: 0.9;
}

/* ── Light Modal Overrides ────────────────────────────────────────── */
.modal-light .modal-content {
	background-color: var(--color-bg-elevated) !important;
	color: var(--color-text) !important;
}

.modal-light .modal-header {
	border-bottom-color: var(--color-border) !important;
}

.modal-light .modal-title {
	color: var(--color-text) !important;
}

.modal-light .modal-body {
	color: var(--color-text) !important;
}

.modal-light .modal-footer {
	border-top-color: var(--color-border) !important;
}

.modal-light .form-label {
	color: var(--color-text) !important;
	opacity: 1 !important;
}

.modal-light .form-control,
.modal-light .form-select {
	background-color: var(--color-bg-elevated) !important;
	color: var(--color-text) !important;
	border-color: var(--color-border) !important;
}

.modal-light label {
	color: var(--color-text) !important;
	opacity: 1 !important;
}

.modal-light span {
	color: inherit;
}

.modal-light p {
	color: var(--color-text-muted) !important;
}

.modal-light small {
	color: var(--color-text-muted) !important;
}

.modal-light strong {
	color: var(--color-text) !important;
}

/* ── EmployeeBulkNotificationModal z-index stack ─────────────────── */
.modal-bulk-overlay {
	background-color: rgba(0, 0, 0, 0.5);
	z-index: var(--z-modal);
}

.modal-bulk-content {
	position: relative;
	z-index: calc(var(--z-modal) + 1);
}

.modal-bulk-footer {
	position: relative;
	z-index: calc(var(--z-modal) + 2);
}

.modal-bulk-btn {
	position: relative;
	z-index: calc(var(--z-modal) + 3);
}

/* ── ShiftDetailsModal ────────────────────────────────────────────── */
.shift-details-scrollable {
	height: min(52vh, 460px);
	overflow-y: auto;
	white-space: pre-wrap;
}

/* ── Radzen Dialog ────────────────────────────────────────────────── */
.rz-dialog {
	background-color: var(--color-bg-elevated) !important;
	color: var(--color-text) !important;
}

.rz-dialog-content {
	background-color: var(--color-bg-elevated) !important;
	color: var(--color-text) !important;
}

.rz-dialog-titlebar {
	background-color: var(--color-bg-subtle) !important;
	color: var(--color-text) !important;
	border-bottom: 1px solid var(--color-border);
}

.rz-dialog .rz-text,
.rz-dialog .rz-text-body1,
.rz-dialog .rz-text-body2,
.rz-dialog .rz-text-subtitle2 {
	color: var(--color-text) !important;
}

.rz-dialog .rz-textarea {
	background-color: var(--color-bg-elevated) !important;
	color: var(--color-text) !important;
	border-color: var(--color-border) !important;
}

.rz-dialog .rz-alert {
	color: var(--color-text) !important;
}

.rz-dialog .rz-alert-warning {
	background-color: rgba(244, 233, 73, 0.15) !important;
	color: var(--color-warning-text) !important;
	border-color: var(--color-warning) !important;
}

/* ── Page filters (light context) ────────────────────────────────── */
.page-filters .form-control,
.page-filters .form-control:focus,
.page-filters .form-select,
.page-filters .form-select:focus {
	color: var(--color-text) !important;
	background-color: rgba(255, 255, 255, 0.95);
	border-color: rgba(48, 53, 90, 0.25);
}

.page-filters .form-control::placeholder {
	color: rgba(48, 53, 90, 0.5);
}

.page-filters input[type="date"].form-control::-webkit-datetime-edit,
.page-filters input[type="date"].form-control::-webkit-datetime-edit-fields-wrapper {
	color: var(--color-text);
}

.page-filters input[type="date"].form-control::-webkit-calendar-picker-indicator {
	filter: invert(0.4);
}

/* ── Scrollable list panel (inside dropdowns/modals) ─────────────── */
.dropdown-panel {
	background-color: var(--color-bg-elevated) !important;
	color: var(--color-text) !important;
	max-height: 240px;
	overflow-y: auto;
}

.dropdown-checkbox-label {
	color: var(--color-text) !important;
	opacity: 1 !important;
}

.filter-section-label {
	color: var(--color-text) !important;
	opacity: 1 !important;
}

.list-scrollable-modal {
	max-height: 500px;
	overflow-y: auto;
}
