/* ============================================================================
 * SonicEMS V2 - Unified brand primary
 * ----------------------------------------------------------------------------
 * A thin override layer that repaints the app's primary colour from the Clean
 * UI default blue (#01a8fe) to the Sonic EMS brand indigo (#4f46e5), so the
 * marketing site, the light app and the dark app all share one primary.
 *
 * Loaded in globalHead.php AFTER the Clean UI theme (main.css) and the dark
 * theme, but BEFORE ems-a11y.css, so it wins primary-colour specificity ties
 * while leaving accessibility focus styling to have the final say.
 *
 * Deliberately NOT touched: semantic colours (success/warning/danger/info),
 * neutrals, and anything that carries meaning rather than brand. Custom
 * checkboxes/switches colour themselves in JS (switchery) and chart palettes
 * (c3 / Chart.js) are set in JS too - those are handled separately, not here.
 *
 * Rationale and the full palette live in EMS Controls > Brand Guidelines.
 * ========================================================================== */

:root {
    --ems-brand:        #4f46e5; /* indigo - primary                        */
    --ems-brand-hover:  #6366f1; /* lighter, mirrors Clean UI's hover step  */
    --ems-brand-strong: #4338ca; /* darker, for focus / pressed             */
}

/* ---- Primary buttons ----------------------------------------------------- */
.btn.btn-primary,
.open > .btn.btn-primary {
    background-color: var(--ems-brand);
    border-color: var(--ems-brand);
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.open > .btn.btn-primary:hover,
.open > .btn.btn-primary:active {
    background-color: var(--ems-brand-hover);
    border-color: var(--ems-brand-hover);
}
.btn.btn-primary:hover:active,
.btn.btn-primary:focus,
.btn.btn-primary.active,
.open > .btn.btn-primary:hover:active,
.open > .btn.btn-primary:focus,
.open > .btn.btn-primary.active {
    background: var(--ems-brand-strong) !important;
    border-color: var(--ems-brand-strong) !important;
}

/* ---- Outline primary buttons -------------------------------------------- */
.btn.btn-primary-outline,
.open > .btn.btn-primary-outline {
    border-color: var(--ems-brand);
    color: var(--ems-brand);
}
.btn.btn-primary-outline:hover,
.btn.btn-primary-outline:active,
.open > .btn.btn-primary-outline:hover,
.open > .btn.btn-primary-outline:active {
    background-color: var(--ems-brand);
    border-color: var(--ems-brand);
    color: #fff;
}

/* ---- Text / background utilities ---------------------------------------- */
.color-primary { color: var(--ems-brand) !important; }
.bg-primary { background-color: var(--ems-brand) !important; }
.badge-primary, .badge.badge-primary,
.label-primary, .label.label-primary { background-color: var(--ems-brand); }

/* ---- Left-menu active accent bar ---------------------------------------- */
nav.left-menu .left-menu-list-color-primary:hover:before,
nav.left-menu .left-menu-list-color-primary.left-menu-list-opened:before,
nav.left-menu .left-menu-list-color-primary.left-menu-list-active:before {
    background-color: var(--ems-brand);
}

/* ---- Tabs (active / focus indicator) ------------------------------------ */
.nav-tabs-horizontal .nav-tabs .nav-item .nav-link.active,
.nav-tabs-horizontal .nav-tabs .nav-item .nav-link:focus {
    border-bottom-color: var(--ems-brand) !important;
}
.nav-tabs-vertical .nav-tabs .nav-item .nav-link.active,
.nav-tabs-vertical .nav-tabs .nav-item .nav-link:focus {
    border-right-color: var(--ems-brand) !important;
}

/* ---- Pagination active -------------------------------------------------- */
.pagination .page-item.active .page-link {
    background: var(--ems-brand);
    border-color: var(--ems-brand);
}

/* ---- Form focus --------------------------------------------------------- */
.form-control:focus { border-color: var(--ems-brand); }
.form-group.has-focused .form-control { border-color: var(--ems-brand); }

/* ---- Dark mode ----------------------------------------------------------
 * Buttons/utilities above already read as indigo on dark surfaces. The dark
 * accent + link tokens are switched to indigo in ems-theme-dark.css. Here we
 * only lift the `.color-primary` text to a brighter indigo so it keeps AA
 * contrast against the dark panels (the base #4f46e5 is a touch low there). */
.ems-dark .color-primary { color: #818cf8 !important; }

/* ---- Footer alignment with the fixed left menu ---------------------------
 * The Clean UI theme leaves .cwt__footer with a 16px left margin at desktop
 * widths, so its left edge slides UNDER the fixed 240px-wide left menu -
 * the recurring "footer too wide / hidden behind the left nav" symptom.
 * .page-content clears the sidebar with margin-left:240px; make the footer
 * match it. When the sidebar is collapsed (.hidden-left-menu) or on mobile
 * (<=767px, sidebar off-canvas) it falls back to the inset. */
@media (min-width: 768px) {
	.cwt__footer { margin-left: 240px; }
	.hidden-left-menu ~ .cwt__footer { margin-left: 16px; }
}