/* Barre de boutons (optionnel) */
.btn-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Style commun */
.btn {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  cursor: pointer;
  user-select: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

.btn:hover {
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.28);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 rgba(0,0,0,0.06);
}

.btn:focus-visible {
  outline: 3px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
}

.btn--primary {
  background: rgba(0,0,0,0.92);
  color: #fff;
  border-color: rgba(0,0,0,0.92);
}

.btn--primary:hover {
  background: rgba(0,0,0,0.85);
}

.btn--ghost {
  background: transparent;
  box-shadow: none;
}

.btn--ghost:hover {
  background: rgba(0,0,0,0.05);
}

.btn--danger {
  background: #fff;
  border-color: rgba(0,0,0,0.18);
}

.btn--danger:hover {
  border-color: rgba(0,0,0,0.45);
}

/* Si un bouton est "disabled" via attribut HTML */
.btn[disabled],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.container-styled--card {
  border: 1.5px solid rgba(32, 103, 174, 0.20);
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow:
    0 10px 30px rgba(32, 103, 174, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 5px 0;
  margin: 5px 0;
}

.container-no-border {
  border: none;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(32, 103, 174, 0.25);
}

.legal-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 760px;
  margin: 0 auto;
  box-shadow:
    -6px  6px 20px 0px rgba(0, 174, 239, 0.25),
     6px -6px 20px 0px rgba(232, 99,  10, 0.20),
    -4px -4px 16px 0px rgba(141, 198, 63, 0.18),
     4px  4px 16px 0px rgba(139, 63, 150, 0.18);
}

/* ================================================
   CONTENEUR GÉNÉRAL DE LA PAGE
   Gère le padding global, la largeur max et le centrage
   ================================================ */
.stats-page {
  padding: 30px;
  max-width: 1100px;
  margin: 0 auto;
  font-family: inherit;
}

/* Barre du haut — lien retour à gauche, boutons groupés à droite */
.stats-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid #e0e0e0;
  margin-bottom: 24px;
}

/* Le lien prend tout l'espace disponible — pousse les boutons à droite */
.stats-topbar .ab-link,
.stats-topbar .link-element {
  flex: 1;
}

/* Groupe les boutons topbar côte à côte à droite */
.stats-btn-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Tous les boutons principaux — style pill moderne */
.btn-primary,
.quick-btn {
  background: linear-gradient(135deg, #1e6fc7, #185FA5) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 14px rgba(24, 95, 165, 0.35) !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  transition: all 120ms ease !important;
}

.btn-primary:hover,
.quick-btn:hover {
  background: linear-gradient(135deg, #185FA5, #0C447C) !important;
  box-shadow: 0 6px 18px rgba(24, 95, 165, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Titre principal — centré, grand, gras, placé APRÈS la topbar */
.stats-page-title {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 4px;
}

/* Sous-titre / dernière actualisation — centré, petit, gris */
.stats-page-subtitle {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-bottom: 28px;
}

/* Barre de dates — bordure légère, ombre subtile */
.stats-date-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin-bottom: 28px !important;
  border: 1px solid #eaeaea !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Aligne verticalement tous les enfants de la barre de dates */
.stats-date-bar > * {
  align-self: center;
}

/* Masque le label natif "Date début / Date fin" généré automatiquement par Baserow */
.date-start label,
.date-end label {
  display: none !important;
}

/* Supprime toutes les bordures et fonds résiduels natifs Baserow */
.date-start,
.date-end {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 180px !important;
}

.date-start > *,
.date-end > * {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Pousse le groupe de boutons raccourcis à l'extrême droite */
.date-quick-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-left: auto !important;
}

/* Bloc de section — wrapper de chaque groupe thématique */
.stats-section {
  margin-bottom: 28px;
}

/* En-tête de section — titre à gauche, bouton masquer à droite sur la même ligne */
.stats-section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Force le titre à prendre tout l'espace pour pousser le bouton à droite */
.stats-section-header h2,
.stats-section-header h3,
.stats-section-header p,
.stats-section-header div {
  margin: 0;
  flex: 1;
}

/* Titre de section — uppercase, affirmé */
.stats-section-header h2,
.stats-section-header h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Bouton masquer/afficher — cible aussi les classes natives Baserow */
.toggle-btn,
.toggle-btn.ab-button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border: 0.5px solid #d0d0d0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #444 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex: 0 !important;
  opacity: 0 !important;
  transition: opacity 150ms ease !important;
}

.toggle-btn:hover,
.toggle-btn.ab-button:hover {
  background: #f5f5f5 !important;
}

.toggle-btn.ready,
.toggle-btn.ab-button.ready {
  opacity: 1 !important;
}

/* Cible le span à l'intérieur du bouton Baserow */
.toggle-btn.ab-button span {
  color: #444 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* Grilles de métriques — 2, 3 ou 4 colonnes selon le groupe */
/* minmax(0, 1fr) évite le débordement horizontal */
.stats-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.stats-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.stats-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* Carte métrique — fond blanc, bordure gauche bleue, ombre légère */
.stat-card {
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  height: auto !important;
  min-height: unset !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  border: 1px solid #eaeaea !important;
  border-left: 3px solid #185FA5 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Écrase la hauteur imposée par Baserow sur tous les éléments enfants des cartes */
.stat-card,
.stat-card > div,
.stat-card > *,
.stat-card .element,
.stat-card [class*="element"] {
  height: auto !important;
  min-height: unset !important;
  flex-shrink: 0 !important;
}

/* Label de la carte — uppercase, espacement des lettres */
.stat-label {
  font-size: 11px !important;
  color: #999 !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Cible directement le texte natif Baserow dans les cartes de valeur */
.stat-value .ab-text,
.stat-value p,
.stat-value {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #185FA5 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

/* Séparateur — ligne fine très discrète entre chaque groupe thématique */
.stats-divider {
  border: none !important;
  border-top: 1px solid #f0f0f0 !important;
  margin: 0 0 28px 0 !important;
  height: 1px !important;
  background: #f0f0f0 !important;
}

/* Sélecteur de date — style pill moderne, ombre bleue subtile */
.ab-datetime-picker__wrapper {
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid #d0e4f7 !important;
  border-radius: 50px !important;
  padding: 6px 14px !important;
  box-shadow: 0 4px 14px rgba(24, 95, 165, 0.12) !important;
  gap: 8px !important;
  transition: box-shadow 120ms ease, border-color 120ms ease !important;
}

.ab-datetime-picker__wrapper:focus-within {
  border-color: #185FA5 !important;
  box-shadow: 0 4px 18px rgba(24, 95, 165, 0.25) !important;
}

/* Champ texte à l'intérieur — fond transparent, sans bordure */
.ab-datetime-picker__input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  color: #1a1a1a !important;
  outline: none !important;
  padding: 0 !important;
  width: 100px !important;
}

/* Icône calendrier — couleur bleue */
.ab-datetime-picker__wrapper .iconoir-calendar {
  color: #185FA5 !important;
  font-size: 15px !important;
}

/* Notification toast — style personnalisé */
.ab-toast {
  background: #185FA5 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(24, 95, 165, 0.35) !important;
}

/* Icône — blanc */
.ab-toast__icon--info-primary {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

.ab-toast__icon--info-primary i {
  color: #fff !important;
}

/* Titre — blanc, gras */
.ab-toast__title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Message — blanc légèrement transparent */
.ab-toast__message {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
}

/* Bouton fermer — blanc */
.ab-toast__close {
  color: rgba(255, 255, 255, 0.7) !important;
}

.ab-toast__close:hover {
  color: #fff !important;
}