/* GTPay — styles custom (Phase 0).
   Tout le reste vient de Bootstrap 5.3 (CDN). */

/* --- Couleur principale du site : vert foncé --- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: #14532d;
  --bs-primary-rgb: 20, 83, 45;
  --bs-primary-text-emphasis: #14532d;
  --bs-primary-bg-subtle: #d7e9db;
  --bs-primary-border-subtle: #a9cdb1;
  --bs-link-color: #14532d;
  --bs-link-color-rgb: 20, 83, 45;
  --bs-link-hover-color: #0f3d21;
  --bs-link-hover-color-rgb: 15, 61, 33;
}

/* Bootstrap 5.3 compile .btn-primary/.btn-outline-primary avec des teintes
   figées (pas seulement var(--bs-primary)) — on surcharge ses variables
   locales (API CSS variables des composants) pour que hover/active/focus
   restent cohérents avec le vert. */
.btn-primary {
  --bs-btn-bg: #14532d;
  --bs-btn-border-color: #14532d;
  --bs-btn-hover-bg: #0f3d21;
  --bs-btn-hover-border-color: #0d351d;
  --bs-btn-active-bg: #0d351d;
  --bs-btn-active-border-color: #0b2e19;
  --bs-btn-disabled-bg: #14532d;
  --bs-btn-disabled-border-color: #14532d;
  --bs-btn-focus-shadow-rgb: 20, 83, 45;
}

.btn-outline-primary {
  --bs-btn-color: #14532d;
  --bs-btn-border-color: #14532d;
  --bs-btn-hover-bg: #14532d;
  --bs-btn-hover-border-color: #14532d;
  --bs-btn-active-bg: #14532d;
  --bs-btn-active-border-color: #14532d;
  --bs-btn-disabled-color: #14532d;
  --bs-btn-disabled-border-color: #14532d;
  --bs-btn-focus-shadow-rgb: 20, 83, 45;
}

/* --- Sidebar ---
   Fond vert foncé fixe (comme le topbar), indépendant du thème clair/sombre
   choisi par l'utilisateur — donc les couleurs de texte sont codées en dur
   ici plutôt que dérivées des variables Bootstrap --bs-body-color etc. qui
   basculent avec le thème.
   Responsive : `.offcanvas-md` (Bootstrap 5.3, cf base.html) fait de ce
   même élément un menu glissant avec fond/backdrop sous le breakpoint md
   (mobile) et un simple panneau statique en colonne à partir de md
   (desktop, comportement inchangé) — une seule source de vérité HTML,
   pas de sidebar dupliquée donc pas de risque de doublons d'ID. */
.sidebar {
  /* !important nécessaire : Bootstrap force background-color: transparent
     !important sur .offcanvas-md (et son .offcanvas-body) à partir du
     breakpoint md, précisément pour laisser le conteneur consommateur
     (ici .sidebar) imposer son propre fond en mode "statique". */
  background-color: #14532d !important;
  --bs-offcanvas-bg: #14532d;
  --bs-offcanvas-color: #fff;
  --bs-offcanvas-width: 280px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
  .sidebar {
    min-height: calc(100vh - 56px - 36px); /* 100vh - topbar - footer */
  }
}

.sidebar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
  border-radius: 0;
  padding: 0.5rem 1rem;
}

.sidebar-nav .nav-link:hover:not(.disabled) {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  border-left: 3px solid #fff;
  padding-left: calc(1rem - 3px);
}

.sidebar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
}

.sidebar-nav .nav-section {
  pointer-events: none;
}

.sidebar-nav .nav-section-toggle {
  pointer-events: auto;
  cursor: pointer;
}

.sidebar-nav .nav-section-toggle:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.sidebar-nav .nav-section span,
.sidebar-nav .nav-section-toggle span {
  color: rgba(255, 255, 255, 0.6) !important;
}

.sidebar-nav .nav-chevron {
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease;
}

.sidebar-nav .nav-chevron.rotate-180 {
  transform: rotate(180deg);
}

/* --- Main content --- */
.main-content {
  background-color: var(--bs-body-bg);
}

/* --- Auth card --- */
.auth-card {
  border-radius: 1rem;
}

/* --- Tables --- */
.table-sm-padding td, .table-sm-padding th {
  padding: 0.4rem 0.5rem;
}

/* --- Simple-DataTables : intégration au thème Bootstrap clair/sombre ---
   La lib pose ses propres classes (.datatable-*) avec un style neutre ;
   on les aligne sur les composants Bootstrap (form-control/select, couleurs
   du thème) plutôt que de les laisser avec l'apparence par défaut. */
.datatable-top,
.datatable-bottom {
  padding: 0.5rem 0;
  color: var(--bs-body-color);
}

.datatable-search input,
.datatable-selector {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.datatable-search input:focus,
.datatable-selector:focus {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.datatable-info {
  color: var(--bs-body-secondary-color, var(--bs-secondary-color));
  font-size: 0.8125rem;
}

.datatable-pagination a.datatable-page,
.datatable-pagination button.datatable-page {
  color: var(--bs-body-color);
  border-radius: var(--bs-border-radius-sm);
}

.datatable-pagination a.datatable-page.active,
.datatable-pagination button.datatable-page.active {
  background-color: var(--bs-primary);
  color: #fff;
}

.datatable-pagination a.datatable-page:hover:not(.active),
.datatable-pagination button.datatable-page:hover:not(.active) {
  background-color: var(--bs-primary-bg-subtle);
}

.datatable-table thead th {
  border-bottom-color: var(--bs-border-color);
}

/* Les en-têtes triables sont des <button> — on les remet à l'apparence
   d'un simple libellé de colonne (pas un bouton) tout en gardant le
   curseur pointer et les flèches de tri fournies par la lib. */
.datatable-table button.datatable-sorter {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.datatable-table button.datatable-sorter::before,
.datatable-table button.datatable-sorter::after {
  border-top-color: var(--bs-body-color);
  border-bottom-color: var(--bs-body-color);
  opacity: 0.35;
}

.datatable-ascending button.datatable-sorter::before,
.datatable-descending button.datatable-sorter::after {
  opacity: 1;
}

.datatable-wrapper .datatable-container {
  border: none;
}

.datatable-empty {
  color: var(--bs-body-secondary-color, var(--bs-secondary-color));
}

/* --- Choices.js : intégration au thème Bootstrap clair/sombre ---
   Même logique que pour Simple-DataTables ci-dessus : la lib pose son
   propre style neutre (fond blanc, bordure grise fixe) qu'on aligne sur
   les variables Bootstrap du thème actif. */
.choices__inner {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.choices__list--single .choices__item,
.choices__input {
  color: var(--bs-body-color);
}

.choices__input {
  background-color: transparent;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  z-index: 1056; /* au-dessus des modales Bootstrap */
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--bs-primary);
  color: #fff;
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
  color: var(--bs-body-color);
}

.choices[data-type*="select-one"] .choices__input {
  background-color: var(--bs-body-bg);
  border-bottom-color: var(--bs-border-color);
}

/* --- Utilities --- */
.cursor-pointer { cursor: pointer; }