/*
 * Brand colour of the Easy Solutions unified template (version 1.4), taken from easyexploit's
 * app.css.
 *
 * The chrome (notification and initials badges, current project, theme switch) and the
 * Bootstrap primary colour are tinted with the application's logo colour, selected by
 * `data-application` on <html> and <body> (`monithor` or `support`, see
 * SuiteApplicationsExtension). Business stylesheets use these tokens rather than literals:
 * var(--marque), rgba(var(--marque-rgb), alpha), var(--primary-light).
 *
 *   --marque          the ink of the logo hexagon;
 *   --marque-survol   the same, 18 % darker (hover);
 *   --marque-claire   a variant readable on the dark chrome (#1a1d20), above 4.5:1.
 *
 * Loaded by <link> after app.css and main.css, before chrome.css.
 */
:root {
    --marque: #086672;
    --marque-survol: #07545D;
    --marque-claire: #69C7D3;
    --marque-rgb: 8, 102, 114;
    --marque-texte: var(--marque);
    --primary-light: color-mix(in srgb, var(--marque) 8%, white);
}

[data-application="monithor"] {
    --marque: #83509B;
    --marque-survol: #6B427F;
    --marque-claire: #A97FBD;
}

/* Support instance: orange, as its logo. */
[data-application="support"] {
    --marque: #E07B1A;
    --marque-survol: #B86515;
    --marque-claire: #F0A35C;
}

/* Bootstrap primary = brand colour. Declared on the elements carrying data-application (<html>
   and <body>) and not on a bare `:root`: a var() nested in a custom property is resolved on the
   element that declares it. On <html>, the tokens also reach what lives outside <body> (Turbo's
   progress bar). Same specificity as Bootstrap's :root, brand.css is loaded later and wins.
   The *-rgb variables only accept literals, hence one block per application. */
[data-application] {
    --bs-primary: var(--marque);
    --bs-link-color: var(--marque);
    --bs-link-hover-color: var(--marque-survol);
    /* Legacy tokens of the business stylesheets (.btn-primary-theme, .text-primary…). */
    --primary-color: var(--marque);
    --primary-light: color-mix(in srgb, var(--marque) 8%, white);
    /* Brand-coloured text: the ink itself is too dark on dark surfaces. */
    --marque-texte: var(--marque);
}

[data-application="monithor"] {
    --bs-primary-rgb: 131, 80, 155;
    --bs-link-color-rgb: 131, 80, 155;
    --bs-link-hover-color-rgb: 107, 66, 127;
    --marque-rgb: 131, 80, 155;
}

[data-application="support"] {
    --bs-primary-rgb: 224, 123, 26;
    --bs-link-color-rgb: 224, 123, 26;
    --bs-link-hover-color-rgb: 184, 101, 21;
    --marque-rgb: 224, 123, 26;
}

/* Dark theme: the brand ink is too dark on dark surfaces, links and text use the light
   variant. data-bs-theme and data-application are both on <html>, body inherits. */
[data-bs-theme="dark"][data-application],
[data-bs-theme="dark"] body {
    /* Brand tint of surfaces (selected rows, active cards): mixed into the dark background. */
    --primary-light: color-mix(in srgb, var(--marque) 22%, #212529);
    --marque-texte: var(--marque-claire);
    --bs-link-color: var(--marque-claire);
    --bs-link-hover-color: color-mix(in srgb, var(--marque-claire) 80%, white);
    --bs-primary-text-emphasis: var(--marque-claire);
}

/* .btn-primary: the plain Bootstrap button, recoloured (the blue is compiled into its
   --bs-btn-* variables). */
.btn-primary {
    --bs-btn-bg: var(--marque);
    --bs-btn-border-color: var(--marque);
    --bs-btn-hover-bg: var(--marque-survol);
    --bs-btn-hover-border-color: var(--marque-survol);
    --bs-btn-active-bg: var(--marque-survol);
    --bs-btn-active-border-color: var(--marque-survol);
    --bs-btn-disabled-bg: var(--marque);
    --bs-btn-disabled-border-color: var(--marque);
    --bs-btn-focus-shadow-rgb: var(--marque-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--marque);
    --bs-btn-border-color: var(--marque);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--marque);
    --bs-btn-hover-border-color: var(--marque);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--marque-survol);
    --bs-btn-active-border-color: var(--marque-survol);
    --bs-btn-disabled-color: var(--marque);
    --bs-btn-disabled-border-color: var(--marque);
    --bs-btn-focus-shadow-rgb: var(--marque-rgb);
}

[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--marque);
    --bs-btn-border-color: var(--marque);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--marque) 85%, white);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--marque) 85%, white);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--marque) 75%, white);
    --bs-btn-active-border-color: color-mix(in srgb, var(--marque) 75%, white);
}

.form-check-input:checked {
    background-color: var(--marque);
    border-color: var(--marque);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: color-mix(in srgb, var(--marque) 50%, white);
    box-shadow: 0 0 0 0.25rem rgba(var(--marque-rgb), 0.25);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--marque);
}

.pagination {
    --bs-pagination-active-bg: var(--marque);
    --bs-pagination-active-border-color: var(--marque);
    --bs-pagination-color: var(--marque);
}

/* Application logo: the white variant is shown in dark theme. Both images are in the DOM,
   the theme picks the visible one; only the hidden variant carries a rule, so the visible
   one keeps the display of its context. */
html:not([data-bs-theme="dark"]) .logo-sombre {
    display: none;
}

[data-bs-theme="dark"] .logo-clair {
    display: none;
}