/* Charte graphique ALTHAE EC */

:root {
    --althae-fonce: #0A3C4C;
    --althae-bleu: #2A90B6;
    --althae-turquoise: #04A2A9;
}

body {
    font-family: "Reddit Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.navbar.bg-dark {
    background-color: var(--althae-fonce) !important;
}

a {
    color: var(--althae-bleu);
}

a:hover {
    color: var(--althae-fonce);
}

.btn-primary {
    --bs-btn-bg: var(--althae-turquoise);
    --bs-btn-border-color: var(--althae-turquoise);
    --bs-btn-hover-bg: var(--althae-fonce);
    --bs-btn-hover-border-color: var(--althae-fonce);
    --bs-btn-active-bg: var(--althae-fonce);
    --bs-btn-active-border-color: var(--althae-fonce);
    --bs-btn-disabled-bg: var(--althae-turquoise);
    --bs-btn-disabled-border-color: var(--althae-turquoise);
}

.nav-pills .nav-link.active {
    background-color: var(--althae-turquoise) !important;
}

.badge.text-bg-secondary {
    background-color: var(--althae-bleu) !important;
}

.page-item.active .page-link {
    background-color: var(--althae-turquoise);
    border-color: var(--althae-turquoise);
}

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

/* Astérisque des champs obligatoires (feuilles de paramétrage) : rouge foncé
   pour bien se distinguer du texte du libellé. */
.asteriskField {
    color: #8b0000;
    font-weight: 700;
}

/* Filtres à sélection multiple (Collaborateur(s), Statut, Échéance(s)...) :
   des cases à cocher plutôt qu'une liste déroulante — le Ctrl+clic nécessaire
   sur un <select multiple> n'était pas assez visible/intuitif. La zone
   scrollable/bordée est portée par ".filtres-checkbox" lui-même (le <div> que
   *nous* écrivons dans le template), pas par un <ul> : les pages Échéances
   écrivent leur <ul> à la main, mais sur la page Dossiers {{ field }} laisse
   Django rendre CheckboxSelectMultiple avec son gabarit par défaut (des <div>
   imbriqués, pas de <ul>/<li>) — cibler "ul" ne matchait donc rien là-bas, et
   une liste de 35 échéances s'étalait sans limite sur toute la page. */
.filtres-checkbox {
    max-height: 8rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 0.35rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: var(--bs-body-bg, #fff);
    /* Pas de largeur minimale imposée : une liste courte (ex. "Statut" —
       Actifs/Sortis) doit rester étroite, la largeur suit le libellé le plus
       long (voir "white-space: nowrap" ci-dessous) plutôt qu'un forfait
       unique qui gaspille de la place sur les petites listes. */
    width: fit-content;
}

.filtres-checkbox ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filtres-checkbox label {
    display: block;
    font-size: 0.8rem;
    white-space: nowrap;
}

.filtres-checkbox input[type="checkbox"] {
    margin-right: 0.3rem;
}

/* Volets repliables (filtres, colonnes affichées...) : <details>/<summary>
   natifs plutôt qu'un JS de plus à maintenir — juste une flèche qui tourne
   pour que l'affordance "cliquable pour ouvrir/fermer" soit visible, avec le
   même traitement partout (Candice, 22/09/2026 : "prévoir la possibilité de
   replier"). */
.volet-repliable > summary {
    cursor: pointer;
    list-style: none;
}
.volet-repliable > summary::-webkit-details-marker { display: none; }
.volet-repliable > summary .bi-chevron-down { transition: transform 0.15s ease; }
.volet-repliable[open] > summary .bi-chevron-down { transform: rotate(180deg); }

/* Fiche dossier (paramétrage) : les champs sont regroupés par grande
   catégorie (voir apps.dossiers.forms.CHAMPS_PAR_GROUPE), avec un bandeau de
   couleur par catégorie pour repérer d'un coup d'œil de quoi on parle — même
   nomenclature/couleurs que les groupes de colonnes de la liste des dossiers. */
.categorie-parametrage {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left-width: 6px;
    border-radius: 0.375rem;
}

.categorie-parametrage legend {
    float: none;
    width: auto;
    margin-bottom: 0.75rem;
    padding: 0.15rem 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.375rem;
}

.categorie-identification { border-left-color: #0d6efd; }
.categorie-identification legend { background-color: #cfe2ff; color: #0a3577; }
.categorie-fiscal { border-left-color: #fd7e14; }
.categorie-fiscal legend { background-color: #ffe5d0; color: #7a3b00; }
.categorie-affectation { border-left-color: #6f42c1; }
.categorie-affectation legend { background-color: #e2d9f3; color: #3d2170; }
.categorie-mission { border-left-color: #198754; }
.categorie-mission legend { background-color: #d1e7dd; color: #0a3622; }
.categorie-facturation { border-left-color: #0dcaf0; }
.categorie-facturation legend { background-color: #cff4fc; color: #055160; }
.categorie-autres { border-left-color: #6c757d; }
.categorie-autres legend { background-color: #e2e3e5; color: #41464b; }

/* Champ "à traiter" (fiche dossier) : même code couleur que la case
   "⚠️ err. paramétrage" des pages Échéances (voir tables.css,
   .anomalie-parametrage) — corriger ici fait disparaître l'alerte partout. */
.champ-a-traiter {
    background-color: #fff700 !important;
    border: 2px solid #dc3545 !important;
}

/* Montants en euros (page Facturation) : chiffres à largeur fixe pour que les
   unités tombent sous les unités et les centaines sous les centaines d'une
   ligne à l'autre — sans ça, une police à chasse variable (ex. "1" plus étroit
   que "8") aligne mal les colonnes de nombres même avec un simple text-end. */
.montant {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* --- Couleur (07/09/2026) : la première passe de refonte visuelle laissait
   les tableaux et les titres en noir/blanc pur, trop plat au goût de Candice
   ("ça manque de couleur de police ou de couleur de fond"). Ajouts ci-dessous,
   volontairement globaux (une seule fois ici) pour retomber sur toutes les
   pages plutôt que de retoucher chaque template un par un. */

h1, h2, h3 {
    color: var(--althae-fonce);
}

/* Cellules d'en-tête de tableau : un fond teinté partout, qu'il s'agisse d'un
   vrai <thead> (Dirigeants, Contacts, Exercices...) ou d'un <th> de ligne
   servant de libellé (tableaux clé/valeur de la fiche dossier, ex. "Groupe"). */
.table th {
    background-color: rgba(10, 60, 76, 0.06);
    color: var(--althae-fonce);
}

/* Sur les tableaux redimensionnables (Dossiers/Échéances/Facturation),
   l'en-tête est figé au défilement (position: sticky) : le fond doit rester
   opaque au-dessus des lignes qui défilent en dessous, donc une couleur unie
   plutôt que "background-color: var(--bs-body-bg)" (blanc) d'origine. */
table[data-resizable] thead th {
    background-color: #dbe9ee;
}

/* Lignes alternées + survol, sur tous les tableaux "table-sm" de contenu —
   sans passer par la classe Bootstrap .table-striped (à ajouter partout),
   plus simple à faire d'un coup ici. */
.table-sm tbody tr:nth-child(odd) {
    background-color: rgba(10, 60, 76, 0.02);
}

.table-sm tbody tr:hover {
    background-color: rgba(4, 162, 169, 0.08);
}

/* Cartes de section (fiche dossier) : une pointe de couleur dans le corps,
   pas seulement sur le bandeau de titre déjà coloré — un dégradé très léger
   du blanc vers la teinte de la carte, plutôt qu'un blanc uniforme. */
.carte-section--identification .carte-section__corps { background-color: #fbfdff; }
.carte-section--fiscal .carte-section__corps { background-color: #fffaf5; }
.carte-section--affectation .carte-section__corps { background-color: #fbf9fe; }
.carte-section--mission .carte-section__corps { background-color: #f8fcfa; }
.carte-section--facturation .carte-section__corps { background-color: #f6fdfe; }
.carte-section--autres .carte-section__corps { background-color: #fafafb; }

/* Badge Pennylane : signale qu'un champ a été rempli automatiquement depuis
   Pennylane (jamais affiché sur un champ saisi/corrigé à la main — voir
   Dossier.identite_pennylane, apps.pennylane.pennylane_synchroniser_identite).
   Image réelle (static/img/badge-pennylane.png, PNG fond transparent,
   source 256x256), affichée en petit format inline. */
.badge-pennylane {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
}