/* =====================================================================
   Dark-mode coverage for Bootstrap utility/component classes.
   These ship light backgrounds by default and otherwise stay white or
   low-contrast in dark mode (the "white box / unreadable text" bug).
   Loaded after main.css so these win.
   ===================================================================== */

html[data-theme="dark"] .text-muted {
	color: var(--pe-muted) !important;
}

/* Inputs / selects / textareas */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="datetime-local"] {
	background-color: var(--pe-panel-alt);
	color: var(--pe-text);
	border-color: var(--pe-border);
}
html[data-theme="dark"] .form-control::placeholder {
	color: var(--pe-muted);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
	background-color: var(--pe-panel-alt);
	color: var(--pe-text);
	border-color: var(--pe-accent);
	box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.18);
}
html[data-theme="dark"] .form-select option {
	background-color: var(--pe-panel);
	color: var(--pe-text);
}

/* Tables anywhere (not only inside .panel-body) */
html[data-theme="dark"] .table {
	color: var(--pe-text);
	border-color: var(--pe-border);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
	background-color: transparent;
	color: var(--pe-text);
	border-color: var(--pe-border);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: rgba(255, 255, 255, 0.03);
	color: var(--pe-text);
}

/* Alerts: tint instead of solid white/pastel boxes */
html[data-theme="dark"] .alert-light {
	background-color: var(--pe-panel-alt);
	color: var(--pe-text);
	border-color: var(--pe-border);
}
html[data-theme="dark"] .alert-success {
	background-color: rgba(34, 197, 94, 0.14);
	color: #b6f0c6;
	border-color: rgba(34, 197, 94, 0.30);
}
html[data-theme="dark"] .alert-danger {
	background-color: rgba(239, 68, 68, 0.14);
	color: #ffb4b4;
	border-color: rgba(239, 68, 68, 0.30);
}
html[data-theme="dark"] .alert-warning {
	background-color: rgba(245, 158, 11, 0.14);
	color: #ffd48a;
	border-color: rgba(245, 158, 11, 0.30);
}
html[data-theme="dark"] .alert-info {
	background-color: rgba(59, 130, 246, 0.14);
	color: #b6d4ff;
	border-color: rgba(59, 130, 246, 0.30);
}

/* Generic light backgrounds that must not stay white in dark mode */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
	background-color: var(--pe-panel) !important;
	color: var(--pe-text) !important;
}
html[data-theme="dark"] .bg-black,
html[data-theme="dark"] .card.bg-black {
	background-color: var(--pe-panel) !important;
	color: var(--pe-text) !important;
}

/* Badges + secondary chips */
html[data-theme="dark"] .badge.bg-secondary {
	background-color: var(--pe-panel-alt) !important;
	color: var(--pe-text) !important;
}

/* Bootstrap cards */
html[data-theme="dark"] .card {
	background: var(--pe-panel);
	color: var(--pe-text);
	border-color: var(--pe-border);
}
html[data-theme="dark"] hr {
	border-color: var(--pe-border);
}

/* Muted helper text used across the app */
html[data-theme="dark"] .footer-note,
html[data-theme="dark"] small.text-muted {
	color: var(--pe-muted);
}