/* Klimer 2026 — Phase B. Load before page CSS; business colour scales stay intact. */
:root {
    --qms-midnight: #052556;
    --qms-primary: #3233cc;
    --qms-primary-hover: #0f1063;
    --qms-focus: #7f81e8;
    --qms-surface: #fff;
    --qms-canvas: #f7f7fc;
    --qms-quiet: #f2f2fa;
    --qms-border: #dcddeb;
    --qms-control-border: #7c809d;
    --qms-muted: #686b86;
    --qms-accent: #fecd04;
    --qms-success-bg: #e5f6ee;
    --qms-success-text: #17634b;
    --qms-warning-bg: #fff8cc;
    --qms-warning-text: #785300;
    --qms-danger-bg: #fee2d7;
    --qms-danger-text: #b42318;
    --qms-danger-strong: #c62828;
    --qms-info-bg: #c9e2f6;
    --qms-info-text: #052556;
    --qms-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --qms-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --qms-radius-control: .375rem;
    --qms-radius-card: .5rem;
}

html:not([data-bs-theme="dark"]) {
    --ins-font-sans-serif: var(--qms-font-ui);
    --ins-body-font-family: var(--qms-font-ui);
    --ins-body-bg: var(--qms-canvas);
    --ins-body-bg-rgb: 247, 247, 252;
    --ins-body-color: var(--qms-midnight);
    --ins-body-color-rgb: 5, 37, 86;
    --ins-secondary-color: var(--qms-muted);
    --ins-secondary-color-rgb: 104, 107, 134;
    --ins-link-color: var(--qms-primary);
    --ins-link-color-rgb: 50, 51, 204;
    --ins-link-hover-color: var(--qms-primary-hover);
    --ins-link-hover-color-rgb: 15, 16, 99;
    /* Do not remap --ins-primary/secondary/success/etc.: data badges use them. */
}

html[data-menu-color="dark"]:not([data-bs-theme="dark"]) {
    --ins-sidenav-bg: var(--qms-midnight);
    --ins-sidenav-border-color: var(--qms-midnight);
    --ins-sidenav-item-color: #c9e2f6;
    --ins-sidenav-item-hover-color: var(--qms-surface);
    --ins-sidenav-item-hover-bg: rgba(255, 255, 255, .08);
    --ins-sidenav-item-active-color: var(--qms-surface);
    --ins-sidenav-item-active-bg: rgba(255, 255, 255, .1);
}

html[data-topbar-color="light"]:not([data-bs-theme="dark"]) {
    --ins-topbar-bg: var(--qms-surface);
    --ins-topbar-item-color: var(--qms-midnight);
    --ins-topbar-item-hover-color: var(--qms-primary);
    --ins-topbar-search-bg: var(--qms-surface);
    --ins-topbar-search-border: var(--qms-control-border);
}

.sidenav-menu .side-nav-link:hover {
    background-color: var(--ins-sidenav-item-hover-bg);
}

html[data-menu-color="dark"] .side-nav > .side-nav-item.active > .side-nav-link {
    box-shadow: inset 3px 0 var(--qms-accent);
}

/* Preserve the theme's logo visibility switches and 235/75px sidebar widths. */
.sidenav-menu .logo-lg img,
.logo-topbar .logo-lg img {
    width: 120px;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

.sidenav-menu .logo-sm img,
.logo-topbar .logo-sm img {
    width: auto;
    height: 36px;
    vertical-align: middle;
}

.app-topbar .topbar-menu {
    border-bottom-color: var(--qms-border);
}

.app-topbar .nav-user h5,
.sidenav-menu .sidenav-user h5,
.btn, .form-control, .form-select, .form-label,
.dropdown-menu, .breadcrumb, .table, .side-nav,
.daterangepicker, .swal2-popup {
    font-family: var(--qms-font-ui);
}

.page-title-head {
    background-color: var(--qms-canvas);
    border-bottom-color: var(--qms-border);
    min-height: 64px;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

h1, h2, h3,
.page-title-head h4,
.card-title,
.card-header > h4,
.card-header > h5,
.modal-title,
.auth-brand h4 {
    font-family: var(--qms-font-heading);
}

.page-title-head h4 {
    font-size: 1.375rem;
    line-height: 1.35;
}

.breadcrumb {
    --ins-breadcrumb-item-active-color: var(--qms-muted);
    --ins-breadcrumb-divider-color: var(--qms-muted);
    flex-wrap: wrap;
}

.card {
    --ins-card-bg: var(--qms-surface);
    --ins-card-border-color: var(--qms-border);
    --ins-card-border-radius: var(--qms-radius-card);
}

.modal-content {
    --ins-modal-bg: var(--qms-surface);
    --ins-modal-border-color: var(--qms-border);
    --ins-modal-header-border-color: var(--qms-border);
    --ins-modal-footer-border-color: var(--qms-border);
    --ins-modal-border-radius: var(--qms-radius-card);
}

.btn {
    --ins-btn-border-radius: var(--qms-radius-control);
}

:is(.btn-primary, .btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light) {
    --ins-btn-focus-shadow-rgb: 127, 129, 232;
}

.btn-primary {
    --ins-btn-color: #fff;
    --ins-btn-bg: var(--qms-primary);
    --ins-btn-border-color: var(--qms-primary);
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--qms-primary-hover);
    --ins-btn-hover-border-color: var(--qms-primary-hover);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--qms-primary-hover);
    --ins-btn-active-border-color: var(--qms-primary-hover);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: var(--qms-primary);
    --ins-btn-disabled-border-color: var(--qms-primary);
}

.btn-outline-primary,
.btn-outline-secondary {
    --ins-btn-color: var(--qms-primary);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--qms-primary);
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--qms-primary);
    --ins-btn-hover-border-color: var(--qms-primary);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--qms-primary-hover);
    --ins-btn-active-border-color: var(--qms-primary-hover);
    --ins-btn-disabled-color: var(--qms-primary);
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: var(--qms-primary);
}

.btn-secondary,
.btn-light {
    --ins-btn-color: var(--qms-midnight);
    --ins-btn-bg: var(--qms-quiet);
    --ins-btn-border-color: var(--qms-border);
    --ins-btn-hover-color: var(--qms-primary-hover);
    --ins-btn-hover-bg: var(--qms-border);
    --ins-btn-hover-border-color: var(--qms-control-border);
    --ins-btn-active-color: var(--qms-primary-hover);
    --ins-btn-active-bg: var(--qms-border);
    --ins-btn-active-border-color: var(--qms-control-border);
    --ins-btn-disabled-color: var(--qms-muted);
    --ins-btn-disabled-bg: var(--qms-quiet);
    --ins-btn-disabled-border-color: var(--qms-border);
}

/* Outline uses an offset so it contrasts with the surrounding light surface,
   including next to a royal button. No change to modal/dropdown positioning. */
html :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--qms-focus);
    outline-offset: 3px;
}

.form-control,
.form-select {
    border-color: var(--qms-control-border);
    border-radius: var(--qms-radius-control);
}

.form-control:not(:disabled):not([readonly]),
.form-select:not(:disabled) {
    background-color: var(--qms-surface);
}

.form-control:where(:not(.is-invalid):not(.is-valid):not(:disabled)):hover,
.form-select:where(:not(.is-invalid):not(.is-valid):not(:disabled)):hover {
    border-color: var(--qms-primary);
}

.form-control:where(:not(.is-invalid):not(.is-valid)):focus,
.form-select:where(:not(.is-invalid):not(.is-valid)):focus {
    border-color: var(--qms-primary);
    box-shadow: 0 0 0 .15rem rgba(127, 129, 232, .18);
}

.form-control::placeholder {
    color: var(--qms-muted);
}

.form-check-input:not(:checked):not(:indeterminate) {
    border-color: var(--qms-control-border);
}

/* Local variable mapping colours selection, without changing status badges. */
.form-check-input {
    --ins-primary: var(--qms-primary);
}

.form-check-input:checked,
.form-check-input:indeterminate {
    background-color: var(--ins-primary);
    border-color: var(--ins-primary);
}

.dropdown-menu {
    --ins-dropdown-bg: var(--qms-surface);
    --ins-dropdown-border-color: var(--qms-border);
    --ins-dropdown-link-hover-bg: var(--qms-quiet);
    --ins-dropdown-link-hover-color: var(--qms-primary-hover);
    --ins-dropdown-link-active-bg: var(--qms-primary);
    --ins-dropdown-link-active-color: #fff;
}

.pagination {
    --ins-pagination-color: var(--qms-primary);
    --ins-pagination-border-color: var(--qms-border);
    --ins-pagination-hover-color: var(--qms-primary-hover);
    --ins-pagination-hover-bg: var(--qms-quiet);
    --ins-pagination-hover-border-color: var(--qms-border);
    --ins-pagination-active-color: #fff;
    --ins-pagination-active-bg: var(--qms-primary);
    --ins-pagination-active-border-color: var(--qms-primary);
    --ins-pagination-focus-color: var(--qms-primary-hover);
    --ins-pagination-focus-bg: var(--qms-quiet);
}

html .daterangepicker {
    font-family: var(--qms-font-ui);
    background-color: var(--qms-surface);
    border-color: var(--qms-border);
}

html .daterangepicker td.active,
html .daterangepicker td.active:hover,
html .daterangepicker .ranges li.active {
    background-color: var(--qms-primary);
    color: #fff;
}

html .dropzone {
    border-color: var(--qms-control-border);
    background-color: var(--qms-surface);
}

.auth-box.qms-auth .auth-brand img {
    width: 240px;
    max-width: 100%;
    height: auto;
}

/* Status labels need room around their existing type. Keep tiny counters and
   fixed-size icon badges compact; report page CSS is loaded after this file. */
.badge:not(.badge-circle):not(.badge-square):not(.badge-label):not(#calibrationNext30) {
    --ins-badge-padding-y: .34rem;
    --ins-badge-padding-x: .66rem;
    line-height: 1.35;
}

.badge.report-status {
    padding: .44rem .88rem;
}

/* Phase B.1: system semantics only. Never remap global --ins semantic values
   or Bootstrap background utilities: catalog badges and report tints use them. */
:is(.alert-success, .btn-success, .btn-outline-success, .qms-badge-success) {
    --qms-state-bg: var(--qms-success-bg);
    --qms-state-text: var(--qms-success-text);
}
:is(.alert-warning, .btn-warning, .btn-outline-warning, .qms-badge-warning) {
    --qms-state-bg: var(--qms-warning-bg);
    --qms-state-text: var(--qms-warning-text);
}
:is(.alert-danger, .btn-danger, .btn-outline-danger, .qms-badge-danger) {
    --qms-state-bg: var(--qms-danger-bg);
    --qms-state-text: var(--qms-danger-text);
}
:is(.alert-info, .btn-info, .btn-outline-info, .qms-badge-info) {
    --qms-state-bg: var(--qms-info-bg);
    --qms-state-text: var(--qms-info-text);
}

:is(.qms-badge-success, .qms-badge-warning, .qms-badge-danger, .qms-badge-info) {
    background-color: var(--qms-state-bg);
    color: var(--qms-state-text);
}

:is(.alert-success, .alert-warning, .alert-danger, .alert-info) {
    --ins-alert-color: var(--qms-state-text);
    --ins-alert-bg: var(--qms-state-bg);
    --ins-alert-border-color: var(--qms-state-text);
    --ins-alert-link-color: var(--qms-state-text);
}

:is(.btn-success, .btn-warning, .btn-danger, .btn-info,
    .btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-info) {
    --ins-btn-color: var(--qms-state-text);
    --ins-btn-bg: var(--qms-state-bg);
    --ins-btn-border-color: var(--qms-state-text);
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--qms-state-text);
    --ins-btn-hover-border-color: var(--qms-state-text);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--qms-state-text);
    --ins-btn-active-border-color: var(--qms-state-text);
    --ins-btn-disabled-color: var(--qms-state-text);
    --ins-btn-disabled-bg: var(--qms-state-bg);
    --ins-btn-disabled-border-color: var(--qms-state-text);
    --ins-btn-focus-shadow-rgb: 127, 129, 232;
}

:is(.btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-info) {
    --ins-btn-bg: transparent;
    --ins-btn-disabled-bg: transparent;
}

.btn-danger {
    --ins-btn-color: #fff;
    --ins-btn-bg: var(--qms-danger-strong);
    --ins-btn-border-color: var(--qms-danger-strong);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: var(--qms-danger-strong);
    --ins-btn-disabled-border-color: var(--qms-danger-strong);
}

/* These text utilities are verified system elements, not catalog output.
   Local RGB mapping respects existing Bootstrap utility !important rules. */
.qms-dashboard .kpi-value.text-success,
#modalMeasurementEquipment .ti-circle-check.text-success {
    --ins-success-rgb: 23, 99, 75;
}
.qms-dashboard .kpi-value.text-warning { --ins-warning-rgb: 120, 83, 0; }
.qms-dashboard .kpi-value.text-danger,
.form-label > .text-danger,
#modalMeasurementEquipment .text-danger {
    --ins-danger-rgb: 180, 35, 24;
}
.invalid-feedback { color: var(--qms-danger-text); }

/* Plugin icons are system feedback; their geometry/animation stays owned by
   SweetAlert. The popup scope also beats the later plugin colour defaults. */
.swal2-popup .swal2-icon.swal2-success { --qms-feedback-color: var(--qms-success-text); }
.swal2-popup .swal2-icon.swal2-warning { --qms-feedback-color: var(--qms-warning-text); }
.swal2-popup .swal2-icon.swal2-error { --qms-feedback-color: var(--qms-danger-text); }
.swal2-popup .swal2-icon.swal2-info { --qms-feedback-color: var(--qms-info-text); }
.swal2-popup .swal2-icon:is(.swal2-success, .swal2-warning, .swal2-error, .swal2-info) {
    color: var(--qms-feedback-color);
    border-color: var(--qms-feedback-color);
}
.swal2-popup .swal2-success .swal2-success-ring { border-color: var(--qms-success-text); }
.swal2-popup .swal2-success [class^="swal2-success-line"] { background-color: var(--qms-success-text); }
.swal2-popup .swal2-error [class^="swal2-x-mark-line"] { background-color: var(--qms-danger-text); }

/* Transient feedback has a stronger accent than persistent status badges.
   SweetAlert owns timing, placement, dismissal, icon geometry and animation. */
.swal2-popup.swal2-toast.swal2-icon-success {
    --qms-toast-accent: #198754;
    --qms-toast-surface: var(--qms-success-bg);
}
.swal2-popup.swal2-toast.swal2-icon-warning {
    --qms-toast-accent: #9A6700;
    --qms-toast-surface: var(--qms-warning-bg);
}
.swal2-popup.swal2-toast.swal2-icon-error {
    --qms-toast-accent: var(--qms-danger-strong);
    --qms-toast-surface: var(--qms-danger-bg);
}
.swal2-popup.swal2-toast.swal2-icon-info {
    --qms-toast-accent: var(--qms-primary);
    --qms-toast-surface: var(--qms-info-bg);
}
.swal2-popup.swal2-toast {
    background: var(--qms-toast-surface, var(--qms-surface));
    color: var(--qms-midnight);
    border-inline-start: 4px solid var(--qms-toast-accent, var(--qms-primary));
}
.swal2-popup.swal2-toast .swal2-icon {
    color: var(--qms-toast-accent);
    border-color: var(--qms-toast-accent);
}
.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
    border-color: var(--qms-toast-accent);
}
.swal2-popup.swal2-toast .swal2-success [class^="swal2-success-line"],
.swal2-popup.swal2-toast .swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--qms-toast-accent);
}

/* Existing custom.css/Bootstrap declarations are important. These bounded
   overrides affect copy confirmation and the users' lock badge only. */
#datatables_buttons_info,
#datatables_buttons_info h2 {
    background: var(--qms-success-bg) !important;
    color: var(--qms-success-text) !important;
}
#usersTable .badge.bg-danger {
    background-color: var(--qms-danger-bg) !important;
    color: var(--qms-danger-text);
}

@media (max-width: 767.98px) {
    .page-title-head h4 { font-size: 1.25rem; }
    .page-title-head > .text-end { max-width: 100%; }
    .page-title-head .breadcrumb { text-align: start; }
}

@media (max-width: 575.98px) {
    .auth-box.qms-auth { padding: 24px 8px; }
    .qms-auth .d-flex.justify-content-between { flex-wrap: wrap; gap: .75rem; }
}