/* ════════════════════════════════════════════════════════════════
   CHARTE GRAPHIQUE OJRASYS — source unique des couleurs principales
   ════════════════════════════════════════════════════════════════
   Couleur principale : l'orange OjraSys, sur TOUTES les pages (Bootstrap
   et Tailwind). Le bleu n'est jamais une couleur d'interface : ni primaire,
   ni focus, ni fond. Les couleurs d'état (succès, danger, alerte, info)
   restent celles de custom.css (--ojra-txt-*).

     --ojra-primaire        aplats décoratifs : pastilles, coches, liserés
                            (= --pe-primary du Bootstrap compilé du thème)
     --ojra-bouton          fond des BOUTONS PLEINS, sous du texte blanc
                            (#c2410c : 5,2:1, WCAG AA — #f37334 n'offrait que 2,9:1)
     --ojra-bouton-survol   survol / appui des boutons pleins
     --ojra-brand-accessible textes, liens, bordures, contours de focus
                            (#c2410c : 5,2:1 sur blanc, WCAG AA)
     --ojra-primaire-fonce  survol des textes et liens
     --ojra-primaire-doux   fonds légers (sélection, focus de champ)
     --ojra-brand           grands aplats décoratifs uniquement

   Mode sombre : contreparties dans ojra-dark.css.
   Documents PDF (mPDF ignore var()) : mêmes valeurs en dur,
   cf. resources/views/etats/pdf/partials/_styles_ojra.blade.php. */
:root {
    --ojra-primaire: #f37334;
    --ojra-bouton: #c2410c;
    --ojra-bouton-survol: #9a3412;
    --ojra-primaire-fonce: #9a3412;
    --ojra-primaire-doux: rgba(243, 115, 52, 0.1);
    --ojra-brand: #ff6b35;
}

/* Boutons pleins : texte blanc sur l'orange accessible (même teinte sur les deux
   thèmes, le texte reste blanc). Le Bootstrap compilé posait #f37334 (2,9:1). */
.btn-primary {
    --pe-btn-bg: var(--ojra-bouton);
    --pe-btn-border-color: var(--ojra-bouton);
    --pe-btn-hover-bg: var(--ojra-bouton-survol);
    --pe-btn-hover-border-color: var(--ojra-bouton-survol);
    --pe-btn-active-bg: var(--ojra-bouton-survol);
    --pe-btn-active-border-color: var(--ojra-bouton-survol);
    --pe-btn-disabled-bg: var(--ojra-bouton);
    --pe-btn-disabled-border-color: var(--ojra-bouton);
    --pe-btn-focus-shadow-rgb: 194, 65, 12;
}

/* Tout aplat « primary » qui porte du texte blanc suit les boutons pleins (AA) : pastilles de
   compteur et en-têtes de modale .bg-primary, .text-bg-primary, élément actif des menus déroulants,
   onglets « pills », pagination, listes, barres de progression. La variable est redéfinie sur
   l'élément : ses variantes translucides (.bg-opacity-10…) restent des teintes orangées. */
.bg-primary { --pe-primary-rgb: 194, 65, 12; }
.text-bg-primary { background-color: var(--ojra-bouton) !important; color: #fff !important; }
.dropdown-menu { --pe-dropdown-link-active-bg: var(--ojra-bouton); }
.nav-pills { --pe-nav-pills-link-active-bg: var(--ojra-bouton); }
.pagination { --pe-pagination-active-bg: var(--ojra-bouton); --pe-pagination-active-border-color: var(--ojra-bouton); }
.list-group { --pe-list-group-active-bg: var(--ojra-bouton); --pe-list-group-active-border-color: var(--ojra-bouton); }
.progress, .progress-stacked { --pe-progress-bar-bg: var(--ojra-bouton); }

/* Select2 (thème bootstrap-5) : la feuille d'origine pose le BLEU Bootstrap sur l'option choisie
   (#0d6efd), le contour et le halo de focus (#86b7fe) — remplacés par l'orange de la charte. */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--ojra-brand-accessible, #c2410c);
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.25);
}

/* Toutes les listes déroulantes sont des Select2 : même gabarit que les champs de saisie voisins
   (hauteur, corps du texte, arrondi, bordure) — le thème d'origine posait 16 px, 4 px d'arrondi et
   38 px de haut à côté de champs de 14 px / 8 px / 39 px. La variante compacte (.select2--small)
   garde ses propres mesures (sélecteur plus précis dans le thème). */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 0.75rem;
    font-size: inherit;
    border-color: var(--ojra-c-bordure, #dee2e6);
    border-radius: 0.5rem;
}
.select2-container--bootstrap-5 .select2-selection--single { padding: 0.5rem 2.25rem 0.5rem 0.75rem; }
.select2-container--bootstrap-5 .select2--small.select2-selection { border-radius: 0.5rem; }
.select2-container--bootstrap-5 .select2--small.select2-selection--single { padding: 0.25rem 1.75rem 0.25rem 0.5rem; background-position: right 0.5rem center; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container--bootstrap-5 .select2-dropdown { border-radius: 0.5rem; overflow: hidden; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { font-size: inherit; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { padding: 0.4rem 0.75rem; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__message { color: var(--ojra-c-moyen, #5c636a); }

/* Erreur de validation et avertissement : la bordure est portée par l'habillage, voisin immédiat
   de la liste d'origine (masquée). */
select[aria-invalid="true"] + .select2-container--bootstrap-5 .select2-selection { border-color: var(--ojra-txt-danger, #b02a37); }
select[data-avertissement] + .select2-container--bootstrap-5 .select2-selection { border-color: var(--ojra-txt-warning, #856404); }
select:disabled + .select2-container--bootstrap-5 .select2-selection { cursor: not-allowed; }
.select2-container--bootstrap-5 .select2-dropdown { border-color: var(--ojra-brand-accessible, #c2410c); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #fff;
    background-color: var(--ojra-bouton);
}

/* « Secondary » = gris neutre (valeurs Bootstrap), pas le bleu #007bff du thème
   compilé : btn-secondary, btn-outline-secondary, badges bg-secondary,
   text-secondary et border-secondary passent tous par ces variables.
   Contreparties sombres des teintes -emphasis/-subtle : ojra-dark.css. */
:root {
    --pe-secondary: #6c757d;
    --pe-secondary-rgb: 108, 117, 125;
}
:root:not([data-bs-theme="dark"]) {
    --pe-secondary-text-emphasis: #2b2f32;
    --pe-secondary-bg-subtle: #e2e3e5;
    --pe-secondary-border-subtle: #c4c8cb;
}

/* Balises <code> (codes, noms de colonnes) : le thème les colorait en rose #e91e63
   (4,1:1 sur un fond gris clair, sous le seuil AA). Elles prennent l'orange des textes,
   sur les deux thèmes (4,9:1 sur fond gris clair ; #ff9057 en sombre). */
:root,
[data-bs-theme="dark"] {
    --pe-code-color: var(--ojra-brand-accessible, #c2410c);
}

/* Un seul orange pour les TEXTES en thème clair : liens et .text-primary
   passent de #f37334 (2,9:1, illisible) à l'orange accessible, comme le menu
   actif, .text-brand et .btn-outline-primary. Le thème sombre garde ses
   propres valeurs (ojra-dark.css) — d'où le :not(). */
:root:not([data-bs-theme="dark"]) {
    --pe-link-color: #c2410c;
    --pe-link-color-rgb: 194, 65, 12;
    --pe-link-hover-color: #9a3412;
    --pe-link-hover-color-rgb: 154, 52, 18;
}
:root:not([data-bs-theme="dark"]) .text-primary {
    color: var(--ojra-brand-accessible, #c2410c) !important;
}

/* Couleurs personnalisées — module Personnel et partagées */

/* ---- Boutons outline + badges pour les couleurs hors Bootstrap 5 ---- */
.btn-outline-pink { color: #e83e8c; border-color: #e83e8c; }
.btn-outline-pink:hover { background-color: #e83e8c; color: #fff; }
.bg-pink { background-color: #e83e8c !important; }

.btn-outline-teal { color: #20c997; border-color: #20c997; }
.btn-outline-teal:hover { background-color: #20c997; color: #fff; }
.bg-teal { background-color: #20c997 !important; }

.btn-outline-indigo { color: #6610f2; border-color: #6610f2; }
.btn-outline-indigo:hover { background-color: #6610f2; color: #fff; }
.bg-indigo { background-color: #6610f2 !important; }

.btn-outline-purple { color: #6f42c1; border-color: #6f42c1; }
.btn-outline-purple:hover { background-color: #6f42c1; color: #fff; }
.bg-purple { background-color: #6f42c1 !important; }

.btn-outline-orange { color: #fd7e14; border-color: #fd7e14; }
.btn-outline-orange:hover { background-color: #fd7e14; color: #fff; }
.bg-orange { background-color: #fd7e14 !important; }

.btn-outline-blue { color: #0d6efd; border-color: #0d6efd; }
.btn-outline-blue:hover { background-color: #0d6efd; color: #fff; }
.bg-blue { background-color: #0d6efd !important; }

.btn-outline-cyan { color: #0dcaf0; border-color: #0dcaf0; }
.btn-outline-cyan:hover { background-color: #0dcaf0; color: #fff; }
.bg-cyan { background-color: #0dcaf0 !important; }

.btn-outline-red { color: #dc3545; border-color: #dc3545; }
.btn-outline-red:hover { background-color: #dc3545; color: #fff; }
.bg-red { background-color: #dc3545 !important; }

/* ---- Variantes subtle ---- */
.bg-danger-subtle  { background-color: rgba(220, 53, 69, 0.1) !important; }
.bg-warning-subtle { background-color: rgba(255, 193, 7, 0.1) !important; }
.bg-success-subtle { background-color: rgba(25, 135, 84, 0.1) !important; }

/* ---- Badges de section ---- */
.badge.bg-light {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}

/* ---- Variantes subtle supplémentaires ---- */
.bg-primary-subtle  { background-color: var(--ojra-primaire-doux) !important; }
.bg-secondary-subtle { background-color: rgba(108, 117, 125, 0.1) !important; }
.bg-info-subtle     { background-color: rgba(13, 202, 240, 0.1) !important; }
.bg-pink-subtle     { background-color: rgba(214, 51, 132, 0.15) !important; }
.bg-indigo-subtle   { background-color: rgba(102, 16, 242, 0.15) !important; }
.text-pink   { color: #d63384 !important; }
.text-indigo { color: #6610f2 !important; }

/* ---- Uniformisation des icônes dans les boutons ---- */
.btn-sm i.bi       { font-size: 0.9em; }
.btn-sm i.bi.small { font-size: 0.8em; }

/* ---- Layout commun ---- */
.card { border-radius: 12px; }
.cursor-pointer { cursor: pointer; }

.icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-circle {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.avatar-circle-sm {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ---- Tables ---- */
.table thead th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table > :not(caption) > * > * { padding: 1rem 0.75rem; }

/* ---- Badges ---- */
.badge { font-weight: 500; }
.badge-padded { padding: 0.375rem 0.75rem; }

/* ---- Formulaires ---- */
.form-control:focus,
.form-select:focus {
    border-color: var(--ojra-primaire);
    box-shadow: 0 0 0 0.25rem rgba(243, 115, 52, 0.2);
}
.input-group-text { background-color: #f8f9fa; }

/* ---- Cartes interactives (sélection rôle, etc.) ---- */
.hover-card {
    transition: all 0.3s ease;
    cursor: pointer;
}
.hover-card:hover {
    background-color: #f8f9fa;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}
.role-checkbox:checked ~ label .hover-card {
    background-color: var(--ojra-primaire-doux) !important;
    border-color: var(--ojra-primaire) !important;
}

/* ---- Gradient utilitaire (orange de la charte, texte blanc lisible) ---- */
.bg-gradient-primary {
    background: linear-gradient(135deg, #e8622a 0%, #c2410c 100%);
}

/* Utilitaire texte */
.text-pre-line { white-space: pre-line; }

/* ════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ (UX) — contraste marque, focus clavier, skip-link
   ════════════════════════════════════════════════════════════════ */

/* Orange de marque accessible (≥ 4.5:1 sur blanc — WCAG AA).
   #ff6b35 reste réservé aux grands aplats décoratifs ; pour tout TEXTE
   ou bordure de lien sur fond clair, on utilise la version foncée. */
:root { --ojra-brand-accessible: #c2410c; }

.text-brand,
.app-header .pe-dropdown-button,
a.forgot-password {
    color: var(--ojra-brand-accessible) !important;
}
.app-header .pe-dropdown-button:hover,
a.forgot-password:hover { color: #9a3412 !important; }

/* Focus clavier visible et homogène sur tous les éléments interactifs.
   (Auparavant l'orange clair du thème était à peine perceptible.) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
[tabindex]:focus-visible,
.pe-nav-link:focus-visible {
    outline: 3px solid var(--ojra-brand-accessible, #c2410c) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Lien d'évitement « Aller au contenu » : masqué jusqu'au focus clavier. */
.ojra-skip-link {
    position: fixed;
    top: -60px;
    left: 12px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--ojra-brand-accessible, #c2410c);
    color: #fff !important;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.ojra-skip-link:focus { top: 0; }

/* ── Recherche dans la sidebar ──────────────────────────────── */
.ojra-sidebar-search { padding: 8px 12px 4px; }
.ojra-sidebar-search .form-control {
    font-size: 0.875rem;
    border-radius: 8px;
}
/* Masquage des entrées de menu filtrées par la recherche. */
.ojra-hide { display: none !important; }

/* État actif/survol de la sidebar : l'orange clair du thème (#f27333) tombe à
   2,89:1 sur fond blanc (échec AA). On force la variante foncée accessible. */
.pe-app-sidebar {
    --pe-app-sidebar-menu-item-color-active: #c2410c;
    --pe-app-sidebar-menu-item-color-hover: #c2410c;
}

/* ════════════════════════════════════════════════════════════════
   LISIBILITÉ LISTES & BOUTONS — palette harmonisée (WCAG AA)
   Les textes colorés clairs (jaune #ffc107, cyan #0dcaf0…) sur fonds
   subtils sont quasi illisibles. On bascule tous les textes de badges
   et boutons outline sur les nuances foncées de la même teinte :
   même harmonie, contraste ≥ 4,5:1 sur fond clair.
   ════════════════════════════════════════════════════════════════ */
:root {
    --ojra-txt-primary:   var(--ojra-brand-accessible, #c2410c);  /* orange foncé (charte) */
    --ojra-txt-secondary: #495057;  /* gris ardoise  */
    --ojra-txt-success:   #146c43;  /* vert foncé    */
    --ojra-txt-danger:    #b02a37;  /* rouge foncé   */
    --ojra-txt-warning:   #856404;  /* ambre foncé   */
    --ojra-txt-info:      #087990;  /* cyan foncé    */
}

/* ── Jaune : jamais de texte jaune clair ni de blanc sur jaune ──
   #ffc107 en texte sur fond clair = 1,6:1 (illisible) ; le blanc sur
   badge jaune plein = 1,6:1 aussi. Partout : ambre foncé sur clair,
   texte ardoise sur aplat jaune. */
.text-warning { color: var(--ojra-txt-warning) !important; }
.badge.bg-warning,
.text-bg-warning { color: #1e293b !important; }

/* ── Badges des listes (bg-*-subtle + text-*) ── */
.badge.text-primary   { color: var(--ojra-txt-primary)   !important; }
.badge.text-secondary { color: var(--ojra-txt-secondary) !important; }
.badge.text-success   { color: var(--ojra-txt-success)   !important; }
.badge.text-danger    { color: var(--ojra-txt-danger)    !important; }
.badge.text-warning   { color: var(--ojra-txt-warning)   !important; }
.badge.text-info      { color: var(--ojra-txt-info)      !important; }

/* Fonds subtils un peu plus présents pour porter le texte foncé */
.badge.bg-warning-subtle { background-color: rgba(255, 193, 7, 0.18)  !important; }
.badge.bg-info-subtle    { background-color: rgba(13, 202, 240, 0.16) !important; }

/* ── Texte des tableaux : ardoise foncée au lieu du gris pâle ── */
.table > tbody > tr > td { color: #1e293b; }
.table thead th { color: #475569; }

/* ── Boutons outline : mêmes teintes foncées (texte + bordure) ── */
.btn-outline-warning {
    color: var(--ojra-txt-warning);
    border-color: #d39e00;
}
.btn-outline-warning:hover, .btn-outline-warning:active {
    background-color: #d39e00 !important;
    border-color: #d39e00 !important;
    color: #fff !important;
}
.btn-outline-info {
    color: var(--ojra-txt-info);
    border-color: var(--ojra-txt-info);
}
.btn-outline-info:hover, .btn-outline-info:active {
    background-color: var(--ojra-txt-info) !important;
    border-color: var(--ojra-txt-info) !important;
    color: #fff !important;
}
.btn-outline-secondary { color: var(--ojra-txt-secondary); }

/* Boutons pleins jaune/cyan : texte foncé lisible garanti */
.btn-warning, .btn-info { color: #1e293b; }

/* Outline-primary : l'orange clair du thème (#f27333, 2,9:1) passe à
   l'orange de marque accessible — cohérent avec sidebar et liens. */
.btn-outline-primary {
    color: var(--ojra-brand-accessible, #c2410c);
    border-color: #e85a2c;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--ojra-brand-accessible, #c2410c) !important;
    border-color: var(--ojra-brand-accessible, #c2410c) !important;
    color: #fff !important;
}