/* Bootstrap override and custom styles */
. .
/* Theme variables */
:root {
	--bg: #f8f9fa;
	--text: #212529;
	--muted: #6c757d;
	--card-bg: #ffffff;
	--navbar-bg: #f8f9fa;
	--footer-bg-start: #222222;
	--footer-bg-end: #111111;
	--footer-text: #f8f9fa;
	--link-color: #0d6efd;
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
	:root { --bg: #0b1220; --text: #e6eef8; --muted: #9aa6b2; --card-bg: #0f1724; --navbar-bg: #071024; --footer-bg-start: #0b1220; --footer-bg-end: #05060a; --footer-text: #e6eef8; --link-color: #66a6ff; }
}

html, body { height: 100%; }
html { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-size: 16px; }
body { background: var(--bg); color: var(--text); display: flex; flex-direction: column; min-height: 100vh; font-size: 18px; line-height: 1.6; }
.navbar-brand { font-weight: bold; }
.table th, .table td { vertical-align: middle; }

/* Make the main content area grow so the footer stays at the bottom */
main#page-content { flex: 1 0 auto; }

/* Readability and form/button improvements */
.container { max-width: 960px; }
body h1, body h2, body h3 { line-height: 1.2; margin-top: 0.5rem; margin-bottom: 0.75rem; }
label { font-weight: 600; color: var(--text); }
input, select, textarea, .form-control { font-size: 1rem; padding: 0.6rem 0.75rem; border-radius: 0.375rem; }
.form-text, .form-help { color: var(--muted); font-size: 0.95rem; }
.btn { font-size: 1rem; padding: 0.55rem 0.9rem; border-radius: 0.4rem; }
.btn-primary { font-weight: 600; }
.table { font-size: 1rem; }
.table thead th { font-weight: 600; }
.card { background: var(--card-bg); }

/* Increase focus visibility for keyboard users */
button:focus, a:focus, input:focus, select:focus, textarea:focus { outline: 3px solid rgba(13,110,253,0.15); outline-offset: 2px; }

/* Make badges visually consistent and centered */
.badge { font-size: 0.9rem; padding: 0.38rem 0.6rem; display: inline-block; min-width: 2.2rem; text-align: center; }
.badge.bg-secondary { background-color: #6c757d !important; color: #fff; }

/* Footer styles (sticky via flexbox) */
footer { width: 100%; margin-top: 0; }
footer .container { max-width: 1100px; }

/* Visual enhancements for footer */
footer { background: linear-gradient(180deg, var(--footer-bg-start) 0%, var(--footer-bg-end) 100%); padding: 1.25rem 0; color: var(--footer-text); }
footer h5 { color: var(--footer-text); }
footer p.small { color: rgba(255,255,255,0.8); }
footer a { color: var(--footer-text); text-decoration: none; }
footer a:hover { color: rgba(255,255,255,0.95); text-decoration: underline; }
footer { box-shadow: 0 -6px 20px rgba(0,0,0,0.08); }

/* Ensure text-body maps to theme text for readable muted/secondary notes */
.text-body { color: var(--text) !important; }

/* Ensure footer is above other content if stacking issues occur */
footer { position: relative; z-index: 20; }

/* Light/dark theme explicit toggles via data-theme attribute */
:root[data-theme='dark'] { --bg: #0b1220; --text: #e6eef8; --muted: #9aa6b2; --card-bg: #0f1724; --navbar-bg: #071024; --footer-bg-start: #0b1220; --footer-bg-end: #05060a; --footer-text: #e6eef8; --link-color: #66a6ff; }
:root[data-theme='light'] { --bg: #f8f9fa; --text: #212529; --muted: #6c757d; --card-bg: #ffffff; --navbar-bg: #f8f9fa; --footer-bg-start: #222222; --footer-bg-end: #111111; --footer-text: #f8f9fa; --link-color: #0d6efd; }

@media (max-width: 768px) {
	.table-responsive { font-size: 0.98em; }
	.navbar { font-size: 1em; }
	h1, h2 { font-size: 1.25em; }
	.container { padding: 12px; }
}

/* Ensure logo remains visible when placed over colored/primary backgrounds (buttons, colored navs) */
.btn img#site-logo,
.btn-primary img#site-logo,
.bg-primary img#site-logo,
.navbar-dark img#site-logo {
	background: #ffffff; /* white backdrop for contrast */
	padding: 2px 6px;    /* small padding so rounded corner shows */
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12);
	display: inline-block;
}

/* Slightly smaller padding on very small screens */
@media (max-width: 420px) {
	.btn img#site-logo,
	.btn-primary img#site-logo,
	.bg-primary img#site-logo,
	.navbar-dark img#site-logo {
		padding: 1px 4px;
		border-radius: 4px;
	}
}

/* Statistic number style: ensure high contrast in both themes */
.stat-number {
	color: var(--text) !important;
	font-weight: 700;
	font-size: 1.05rem;
}

/* If the card uses a dark background and numbers need explicit light color */
:root[data-theme='dark'] .card .stat-number {
	color: var(--text) !important;
}