/* ==========================================================================
   Xaler — Metronic brand override
   --------------------------------------------------------------------------
   The dashboard ships with Metronic's stock blue (#1B84FF), which is close to
   but not the same as the Logiciel brand azure. Re-pointing these variables
   makes the console carry the actual brand rather than the vendor default.

   Re-pointing Metronic's own theme variables re-themes every button, badge,
   link, tab, active nav item and light-primary surface at once — no per-page
   restyling and no markup changes.

   Load AFTER style.bundle.css.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
	/* ---- Core brand ------------------------------------------------------ */
	--bs-primary: #1b84ff;
	--bs-primary-rgb: 27, 132, 255;
	--bs-primary-active: #006ae6;
	--bs-primary-light: #e9f3ff;
	--bs-primary-inverse: #ffffff;
	--bs-primary-clarity: rgba(27, 132, 255, 0.20);

	/* Bootstrap 5.3 subtle/emphasis ramp */
	--bs-primary-text-emphasis: #006ae6;
	--bs-primary-bg-subtle: #e9f3ff;
	--bs-primary-border-subtle: #a4ceff;

	/* ---- Links ----------------------------------------------------------- */
	/* #006AE6 rather than the logo azure: #4A9CFF only reaches ~2.5:1 on white,
	   which fails contrast for body-size text. */
	--bs-link-color: #006ae6;
	--bs-link-color-rgb: 0, 106, 230;
	--bs-link-hover-color: #0057bd;
	--bs-link-hover-color-rgb: 0, 87, 189;
	--bs-text-primary: #006ae6;

	/* ---- Active component states (tabs, pagination, menu) ---------------- */
	--bs-component-active-bg: #1b84ff;
	--bs-component-active-color: #ffffff;

	/* ---- Info tone aligned to the brand azure ---------------------------- */
	--bs-info: #1b84ff;
	--bs-info-rgb: 27, 132, 255;
	--bs-info-active: #1b84ff;
	--bs-info-light: #e9f3ff;
	--bs-info-inverse: #ffffff;
	--bs-info-clarity: rgba(27, 132, 255, 0.2);

	/* ---- Menu / aside / misc component variables -------------------------
	   Metronic defines these separately from --bs-primary, so they keep the
	   stock blue unless re-pointed here (sidebar active icon, menu link
	   states, ribbons, scroll-to-top, focus rings). */
	--bs-menu-link-color-active: #006ae6;
	--bs-menu-link-color-here: #006ae6;
	--bs-menu-link-color-hover: #006ae6;
	--bs-menu-link-color-show: #006ae6;

	--bs-aside-menu-icon-bg-color-active: #1b84ff;
	--bs-aside-menu-icon-icon-color-hover: #1b84ff;

	--bs-component-checked-bg: #1b84ff;
	--bs-component-hover-color: #006ae6;

	--bs-ribbon-label-bg: #1b84ff;
	--bs-scrolltop-bg-color: #1b84ff;
	--bs-scrolltop-bg-color-hover: #006ae6;

	--bs-focus-ring-color: rgba(27, 132, 255, 0.25);

	/* ---- Typography ------------------------------------------------------ */
	--bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Component-scoped variables (defined on the component, not on :root). */
.btn.btn-primary {
	--bs-btn-bg: #1b84ff;
	--bs-btn-border-color: #1b84ff;
	--bs-btn-color: #ffffff;
	--bs-btn-hover-bg: #006ae6;
	--bs-btn-hover-border-color: #006ae6;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-active-bg: #006ae6;
	--bs-btn-active-border-color: #006ae6;
	--bs-btn-active-color: #ffffff;
	--bs-btn-disabled-bg: #1b84ff;
	--bs-btn-disabled-border-color: #1b84ff;
	--bs-btn-disabled-color: #ffffff;
}

.nav-pills {
	--bs-nav-pills-link-active-bg: #1b84ff;
	--bs-nav-pills-link-active-color: #ffffff;
}

.progress,
.progress-stacked {
	--bs-progress-bar-bg: #1b84ff;
}

[data-bs-theme="dark"] {
	--bs-primary: #1b84ff;
	--bs-primary-rgb: 27, 132, 255;
	--bs-primary-active: #4a9cff;
	--bs-primary-light: #0c2337;
	--bs-primary-inverse: #ffffff;
	--bs-primary-clarity: rgba(27, 132, 255, 0.20);

	--bs-primary-text-emphasis: #76b5ff;
	--bs-primary-bg-subtle: #0a1c2c;
	--bs-primary-border-subtle: #006ae6;

	--bs-link-color: #4a9cff;
	--bs-link-color-rgb: 74, 156, 255;
	--bs-link-hover-color: #76b5ff;
	--bs-link-hover-color-rgb: 118, 181, 255;
	--bs-text-primary: #4a9cff;

	--bs-component-active-bg: #1b84ff;
	--bs-component-active-color: #ffffff;

	--bs-info: #1b84ff;
	--bs-info-rgb: 27, 132, 255;
	--bs-info-active: #4a9cff;
	--bs-info-light: #0a1c2c;
	--bs-info-inverse: #ffffff;
}

/* --------------------------------------------------------------------------
   Polish that the variable swap alone cannot reach
   -------------------------------------------------------------------------- */

/* Primary buttons get the brand gradient + a soft brand-tinted shadow. */
.btn.btn-primary:not(.btn-outline):not(.btn-light) {
	background-image: linear-gradient(135deg, #1b84ff 0%, #1b84ff 100%);
	border-color: transparent;
	box-shadow: 0 2px 10px rgba(27, 132, 255, 0.22);
}

.btn.btn-primary:not(.btn-outline):not(.btn-light):hover,
.btn.btn-primary:not(.btn-outline):not(.btn-light):focus,
.btn.btn-primary:not(.btn-outline):not(.btn-light):active {
	background-image: linear-gradient(135deg, #1b84ff 0%, #006ae6 100%);
	box-shadow: 0 4px 16px rgba(27, 132, 255, 0.30);
}

/* Consistent focus ring across every control. */
.form-control:focus,
.form-select:focus {
	border-color: #4a9cff;
	box-shadow: 0 0 0 3px rgba(27, 132, 255, 0.18);
}

/* --------------------------------------------------------------------------
   Metronic hardcoded-blue patches
   --------------------------------------------------------------------------
   A handful of rules in the compiled style.bundle.css bake in the literal
   #1B84FF instead of reading var(--bs-primary), so the variable swap above
   cannot reach them. Without these, checkboxes, radios and range sliders
   would still render the vendor blue instead of the brand azure.
   -------------------------------------------------------------------------- */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-check.form-check-solid .form-check-input[type="checkbox"]:indeterminate {
	background-color: #1b84ff;
	border-color: #1b84ff;
}

.form-check-input:focus {
	border-color: #4a9cff;
	box-shadow: 0 0 0 3px rgba(27, 132, 255, 0.18);
}

.form-range::-webkit-slider-thumb {
	background-color: #1b84ff;
}

.form-range::-moz-range-thumb {
	background-color: #1b84ff;
}

.separator.separator-content.border-primary::before,
.separator.separator-content.border-primary::after {
	border-color: #1b84ff !important;
}

.dt-hasChild.dtr-expanded .dtr-control::before {
	background-color: #1b84ff;
}

[data-kt-sticky-landing-header="on"] .landing-header .menu .menu-link.active {
	color: #006ae6;
}

/* --------------------------------------------------------------------------
   Site-wide responsive safety net for dashboard pages
   --------------------------------------------------------------------------
   Wide tables are the number-one source of horizontal page scroll here. Any
   table left outside a .table-responsive wrapper still scrolls inside its own
   card instead of dragging the whole document sideways.
   -------------------------------------------------------------------------- */
.card-body > .table:not(.table-responsive .table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Long unbroken values (request ids, tokens, URLs) must wrap, not overflow. */
.xa-break {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Bootstrap has no min-width utility; flex/grid children need it to shrink. */
.min-w-0 {
	min-width: 0;
}

@media (max-width: 575.98px) {
	/* Card headers stack their title and toolbar rather than colliding. */
	.card > .card-header {
		flex-wrap: wrap;
		row-gap: 0.75rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.card > .card-header .card-toolbar {
		width: 100%;
	}

	.card > .card-body {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Oversized display type is unreadable on a 375px screen. */
	.fs-2x {
		font-size: 1.75rem !important;
	}
}