/* CSS à ajouter au CSS bootstrap pour l'accorder aux styles de l'administrateur */

/* ------------------------------------------------------------------ */
/* Couleur principale du thème, pilotée par l'environnement.          */
/* L'attribut data-env est posé sur <body> (voir header*.tpl) à       */
/* partir de la variable Smarty $cdf_env (cf. cgi-bin/config).         */
/*   prod    = vert   (production)                                    */
/*   recette = bleu                                                   */
/*   test    = rouge/orange                                           */
/*   local   = violet (développement Docker)                          */
/* ------------------------------------------------------------------ */
:root                    { --cdf-primaire: #a2c231; } /* défaut : vert */
body[data-env="prod"]    { --cdf-primaire: #a2c231; }
body[data-env="recette"] { --cdf-primaire: #1f6fb5; }
body[data-env="test"]    { --cdf-primaire: #e8531f; }
body[data-env="local"]   { --cdf-primaire: #7d3fb8; }

/* Les noms de classes historiques (« vert ») sont conservés pour ne pas
   toucher aux ~120 usages dans les templates ; seule la couleur change. */
.thead-vert, .bg-vert{
  background-color: var(--cdf-primaire);
}

.text-vert{
  color: var(--cdf-primaire);
}

.text-gris{
  color: #666;
}

.thead-gris, .bg-gris {
  background-color: #666;
}

.btn-vert{
  background-color: var(--cdf-primaire);
  color: #fff;
}

.btn-orange{
  background-color: #ff5500;
  color: #fff;
}

.border-vert {
  border-color: var(--cdf-primaire) !important;
}

/* Les lignes des listes (<tr class="row">) et la pagination du bas de liste (enfant direct
   de <body>) ne sont pas dans un conteneur Bootstrap : sans cela, les marges négatives de
   .row (-15 px) les font dépasser à droite de l'écran, et la page défile de côté. Le
   bandeau du haut, lui, est dans un .container-fluid : ses marges restent normales. */
table.table tr.row,
body > nav[aria-label="Pagination"] > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Blocs repliables (<details class="cdf-repliable"><summary>titre</summary>…) : le titre a
   le même rendu que l'ancien bloc (pas de triangle natif) ; un clic le replie. */
details.cdf-repliable > summary {
  display: block;
  list-style: none;
  cursor: pointer;
}
details.cdf-repliable > summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------------------------ */
/* Bandeau d'environnement (affiché hors production).                 */
/* Pastille fixe, discrète, visible sur toutes les pages (y compris    */
/* l'écran de connexion) pour ne jamais confondre les environnements. */
/* ------------------------------------------------------------------ */
.cdf-env-badge{
  position: fixed;
  bottom: 8px;
  left: 8px;
  z-index: 1080;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background-color: var(--cdf-primaire);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  opacity: .92;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Thème sombre (préférence utilisateur, voir www/preferences.php).    */
/* L'attribut data-theme est posé sur <body> par header.tpl :          */
/*   clair  = rendu Bootstrap d'origine (aucune règle ci-dessous) ;    */
/*   sombre = règles ci-dessous ;                                       */
/*   auto   = header.tpl le bascule en « sombre » si l'appareil est    */
/*            réglé en mode sombre (prefers-color-scheme).             */
/* Bootstrap 4 n'a pas de mode sombre : on surcharge ses composants.   */
/* La couleur d'accent (--cdf-primaire, par environnement) ne change pas. */
/* ------------------------------------------------------------------ */
body[data-theme="sombre"] {
  --cdf-fond: #1b1e21;
  --cdf-surface: #262a2e;
  --cdf-surface-inactive: #30353a;
  --cdf-bordure: #454c53;
  --cdf-texte: #e1e4e7;
  --cdf-texte-secondaire: #a3abb3;
  --cdf-lien: #7ab3ff;

  color-scheme: dark; /* barres de défilement, listes déroulantes et champs natifs sombres */
  background-color: var(--cdf-fond);
  color: var(--cdf-texte);
}

body[data-theme="sombre"] a:not(.btn):not(.nav-link):not(.page-link) { color: var(--cdf-lien); }
/* Les traits colorés (bg-vert) gardent la couleur d'accent. */
body[data-theme="sombre"] hr:not(.bg-vert) { border-top-color: var(--cdf-bordure); }

/* Textes et fonds utilitaires (Bootstrap les pose en !important). */
body[data-theme="sombre"] .text-dark:not(.nav-link) { color: var(--cdf-texte) !important; }
body[data-theme="sombre"] .text-gris,
body[data-theme="sombre"] .text-muted,
body[data-theme="sombre"] .text-secondary { color: var(--cdf-texte-secondaire) !important; }
body[data-theme="sombre"] .bg-light,
body[data-theme="sombre"] .bg-white { background-color: var(--cdf-surface) !important; }
body[data-theme="sombre"] .thead-gris,
body[data-theme="sombre"] .bg-gris { background-color: #3b4147; }
body[data-theme="sombre"] .border { border-color: var(--cdf-bordure) !important; }

/* Tableaux. */
body[data-theme="sombre"] .table { color: var(--cdf-texte); }
body[data-theme="sombre"] .table td,
body[data-theme="sombre"] .table th,
body[data-theme="sombre"] .table thead th { border-color: var(--cdf-bordure); }
body[data-theme="sombre"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .04); }
body[data-theme="sombre"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, .08); color: var(--cdf-texte); }

/* Formulaires. */
body[data-theme="sombre"] .form-control,
body[data-theme="sombre"] .custom-select,
body[data-theme="sombre"] .input-group-text {
  background-color: var(--cdf-surface);
  border-color: var(--cdf-bordure);
  color: var(--cdf-texte);
}
body[data-theme="sombre"] .form-control:focus {
  background-color: var(--cdf-surface);
  color: var(--cdf-texte);
}
body[data-theme="sombre"] .form-control:disabled,
body[data-theme="sombre"] .form-control[readonly] { background-color: var(--cdf-surface-inactive); }
body[data-theme="sombre"] .form-control::placeholder { color: var(--cdf-texte-secondaire); }

/* Pagination, cartes, listes, menus déroulants, fenêtres modales. */
body[data-theme="sombre"] .page-link,
body[data-theme="sombre"] .card,
body[data-theme="sombre"] .list-group-item,
body[data-theme="sombre"] .dropdown-menu,
body[data-theme="sombre"] .modal-content {
  background-color: var(--cdf-surface);
  border-color: var(--cdf-bordure);
  color: var(--cdf-texte);
}
body[data-theme="sombre"] .page-item.disabled .page-link { background-color: var(--cdf-surface-inactive); border-color: var(--cdf-bordure); }
body[data-theme="sombre"] .dropdown-item { color: var(--cdf-texte); }
body[data-theme="sombre"] .dropdown-item:hover,
body[data-theme="sombre"] .dropdown-item:focus { background-color: var(--cdf-surface-inactive); color: var(--cdf-texte); }
body[data-theme="sombre"] .close { color: var(--cdf-texte); text-shadow: none; }

/* Bibliothèques tierces : boîtes de confirmation (jquery-confirm), calendrier (gijgo),
   envoi de fichiers (bootstrap-fileinput). */
body[data-theme="sombre"] .jconfirm .jconfirm-box,
body[data-theme="sombre"] .gj-picker,
body[data-theme="sombre"] .file-preview,
body[data-theme="sombre"] .file-preview-frame,
body[data-theme="sombre"] .file-drop-zone {
  background-color: var(--cdf-surface);
  border-color: var(--cdf-bordure);
  color: var(--cdf-texte);
}
body[data-theme="sombre"] .jconfirm .jconfirm-box div.jconfirm-content-pane,
body[data-theme="sombre"] .jconfirm .jconfirm-box div.jconfirm-title-c { color: var(--cdf-texte); }
body[data-theme="sombre"] .gj-picker div[role="navigator"],
body[data-theme="sombre"] .gj-picker table tr td div { color: var(--cdf-texte); }
body[data-theme="sombre"] .gj-picker table tr td.gj-cursor-pointer:hover div { background-color: var(--cdf-surface-inactive); }
body[data-theme="sombre"] .gj-picker [role="header"] { background-color: var(--cdf-surface-inactive); color: var(--cdf-texte-secondaire); }
body[data-theme="sombre"] .gj-picker [role="header"] [role="date"] { color: var(--cdf-texte); }
body[data-theme="sombre"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default { background-color: var(--cdf-surface-inactive); color: var(--cdf-texte); }
body[data-theme="sombre"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover { background-color: var(--cdf-bordure); }