/* --- Color Definitions --- */
:root {
	--accent-color: #E65100; /* Darker, richer orange */
	--accent-color-hover: #BF4300; /* Even darker for hover/active */
	--light-text-color: #fff; /* White text for contrast on dark background */
	--dark-text-color: #212529; /* Standard dark text color */

	/* Retheme Bootstrap's own "primary" system to match the site's orange accent */
	--bs-primary: var(--accent-color);
	--bs-primary-rgb: 230, 81, 0;
}

body {
	padding-top: 70px;
}

/* --- Custom Filled Button (.custom-btn) --- */
.custom-btn {
	color: var(--light-text-color); /* Default text is white */
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

.custom-btn:hover, .custom-btn:focus, .custom-btn:active, .custom-btn.active {
	color: var(--light-text-color); /* Ensure text remains white */
	background-color: var(--accent-color-hover);
	border-color: var(--accent-color-hover);
}

/* --- Custom Outline Button (.custom-outline-btn) --- */
.custom-outline-btn {
	color: var(--accent-color); /* Default text is accent color */
	border-color: var(--accent-color);
	background-color: transparent;
}

.custom-outline-btn:hover, .custom-outline-btn:focus, .custom-outline-btn:active, .custom-outline-btn.active {
	color: var(--light-text-color); /* Text switches to white on hover/active */
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

/* --- Accent text/badge utilities (use instead of Bootstrap's text-warning/bg-warning
   for brand-color decoration; keep warning/success/danger for actual status colors) --- */
.text-accent {
	color: var(--accent-color) !important;
}

.bg-accent {
	background-color: var(--accent-color) !important;
	color: var(--light-text-color) !important;
}

/* --- Footer Links (Overrides) --- */
/* Ensure navigation links use the accent color */
.footer .link-secondary {
	color: var(--accent-color) !important;
}

.footer .link-secondary:hover {
	color: var(--accent-color-hover) !important;
}

/* --- Rounded pagination (used by app/UI/Accessory/paginator.latte) --- */
.page-link.rounded-circle {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-color: #dee2e6;
	color: var(--accent-color);
}

.page-link.rounded-circle:hover {
	color: var(--accent-color-hover);
}

.page-item.disabled .page-link.rounded-circle {
	color: #adb5bd;
}

.page-item.active .page-link.rounded-circle {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--light-text-color);
}

/* --- Bootstrap's .btn-primary (used in the Admin module) --- */
/* Bootstrap bakes each button variant's colors into its own --bs-btn-* custom
   properties rather than reading --bs-primary, so it needs its own override. */
.btn-primary {
	--bs-btn-bg: var(--accent-color);
	--bs-btn-border-color: var(--accent-color);
	--bs-btn-hover-bg: var(--accent-color-hover);
	--bs-btn-hover-border-color: var(--accent-color-hover);
	--bs-btn-active-bg: var(--accent-color-hover);
	--bs-btn-active-border-color: var(--accent-color-hover);
	--bs-btn-disabled-bg: var(--accent-color);
	--bs-btn-disabled-border-color: var(--accent-color);
	--bs-btn-focus-shadow-rgb: 230, 81, 0;
}