/* ============================================================
   Restylage du widget Planity aux couleurs BG Barbershop
   Doc officielle : https://planity.gitbook.io/white-label
   Style « flat dark » inspiré de blackboxparis.com/…/booking :
   pas de bordures parasites, des surfaces sombres et du texte
   clair. Deux familles de sélecteurs :
   1. classes documentées `planity_*`
   2. classes CSS-modules relevées en live — hash variable,
      on cible le PRÉFIXE COMPLET du composant racine uniquement
      (ex. booking_service-module_bookingService) pour ne jamais
      toucher ses sous-éléments (_name, _duration…).
   Complété par assets/js/planity-guard.js (garde-fou).
   ============================================================ */

#planity {
  font-family: var(--font-body, "Manrope", sans-serif);
  color: #f5f5f6;
}

/* ------------------------------------------------------------
   0. Remise à plat : aucune ombre, et toutes les lignes que le
      widget dessine lui-même deviennent quasi invisibles
   ------------------------------------------------------------ */
#planity *,
#planity *::before,
#planity *::after {
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

#planity .planity_ui_appointment_background {
  background: transparent !important;
}

/* ------------------------------------------------------------
   1. Surfaces (conteneurs racines uniquement)
   ------------------------------------------------------------ */

/* Cartes de catégories et lignes de prestation — fond uni, sans bordure */
#planity [class*="service_set-module_card"],
#planity .planity_ui_item-list-element {
  background: #16171b !important;
}

/* Carte « Prestation sélectionnée » (racine seulement) */
#planity [class*="booking_service-module_bookingService"] {
  background: #16171b !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Bouton « Supprimer » de la prestation : gris, plus clair au survol */
#planity [class*="booking_service-module_remove"] {
  color: #9a9da6 !important;
}
#planity [class*="booking_service-module_remove"]:hover {
  color: #f5f5f6 !important;
}

/* Sélecteur « Choisir avec qui ? » et son panneau déroulant */
#planity [class*="select-module_container"] {
  background: #16171b !important;
  border: none !important;
}
#planity [class*="drawer-module_drawer"],
#planity [class*="select-module_drawer"] {
  background: #16171b !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
}

/* Calendrier (racine du composant) */
#planity [class*="datepicker-module_DatePicker"] {
  background: #101114 !important;
  border: none !important;
  border-radius: 14px !important;
}

/* Conteneur des créneaux (page-module_items…) : totalement invisible
   — attention au « s » : ne surtout pas le confondre avec les pastilles */
#planity [class*="page-module_items"],
#planity [class*="page-module_items"]:hover {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Créneaux horaires (pastilles individuelles) — le tiret final évite de
   matcher le conteneur « items ». NB : la classe réelle est
   « availability » (la doc Planity écrit « avaibility », on couvre les 2) */
#planity [class*="page-module_item-"],
#planity [class*="mobile_availabilities_picker-module_item-"],
#planity .planity_appointment_days_slider_hour_availability,
#planity .planity_appointment_days_slider_hour_avaibility {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
}
#planity [class*="page-module_item-"]:hover,
#planity [class*="mobile_availabilities_picker-module_item-"]:hover,
#planity .planity_appointment_days_slider_hour_availability:hover {
  background: #f5f5f6 !important;
  color: #0a0b0d !important;
}

/* Bandeaux d'étapes / accordéons de jours */
#planity [class*="mobile_availabilities_picker-module_selection"],
#planity [class*="mobile_availabilities_picker-module_toggle"],
#planity .planity_appointment_steps_step {
  background: #16171b !important;
  border: none !important;
  border-radius: 12px !important;
  color: #f5f5f6 !important;
}

/* Fenêtres modales */
#planity [class*="modal-module_container"] {
  background: #101114 !important;
  color: #f5f5f6 !important;
}

/* « Plus de détails » : fond sombre OPAQUE obligatoire — replié,
   ce bouton recouvre la 2e ligne de la description tronquée
   (dans le widget d'origine, c'est son fond blanc qui la masque) */
#planity [class*="service-module_toggle"] {
  background: #16171b !important;
  border: none !important;
  color: #9a9da6 !important;
}
#planity [class*="service-module_toggle"]:hover {
  color: #f5f5f6 !important;
}

/* Choix de l'employé : vignettes barbiers bien arrondies */
#planity .planity_ui_action_worker {
  background: #16171b !important;
  border-radius: 18px !important;
}
#planity [class*="radio_picture-module"],
#planity label[class*="planity_ui_action_worker-name"] {
  border-radius: 18px !important;
  overflow: hidden;
}
/* Vignettes barbiers (non sélectionnées) : dégradé sombre, texte
   blanc, sans bordure */
#planity label[class*="radio_picture-module_radio"],
#planity label[class*="planity_ui_action_worker-name"] {
  background: linear-gradient(180deg, rgb(22, 23, 27), rgb(16, 17, 20)) !important;
  color: #f5f5f6 !important;
  border: none !important;
}
#planity [class*="radio_picture-module_border"] {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

/* ------------------------------------------------------------
   2. Textes
   ------------------------------------------------------------ */

#planity h1, #planity h2, #planity h3, #planity h4, #planity h5,
#planity p, #planity span, #planity label, #planity li, #planity legend,
#planity .planity_appointment_service_cell,
#planity .planity_ui_action_action_choose-with,
#planity .planity_ui_action_worker,
#planity .planity_ui_action_worker-name {
  color: #f5f5f6 !important;
}

#planity .planity_appointment_service_small-cell,
#planity [class*="service-module_description"],
#planity small {
  color: #a7abb4 !important;
}

#planity a,
#planity .planity_ui_showMoreservices,
#planity .planity_ui_action_button_root,
#planity .planity_ui_action_cancel-appointment,
#planity .planity_ui_action_edit-password {
  color: #c9ccd3 !important;
}

/* L'inversion ne doit toucher que l'icône (image), jamais le bouton
   entier — le widget pose cette classe sur le bouton « Supprimer » */
#planity img.planity_ui_action_button_icon-remove,
#planity .planity_ui_action_button_icon-remove img,
#planity .planity_ui_action_button_icon-remove svg {
  filter: invert(1);
}

/* ------------------------------------------------------------
   3. Champs de formulaire
   ------------------------------------------------------------ */

#planity input,
#planity select,
#planity textarea {
  background: #101114 !important;
  color: #f5f5f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
}
#planity input::placeholder {
  color: #92959e !important;
}
/* Puces radio/cases : accent blanc, bien visible sur fond sombre */
#planity input[type="radio"],
#planity input[type="checkbox"] {
  background: transparent !important;
  border: none !important;
  accent-color: #f5f5f6 !important;
}

/* ------------------------------------------------------------
   4. Boutons — déclarés EN DERNIER pour reprendre la main
   ------------------------------------------------------------ */

/* Bouton principal (« Choisir », « Valider »…) : blanc, texte noir */
#planity [class*="button-module_primary"],
#planity [class*="button-module_primary"] *,
#planity .planity_appointment_service_button,
#planity .planity_appointment_service_button * {
  background-color: #f5f5f6 !important;
  color: #0a0b0d !important;
  border: none !important;
}
#planity [class*="button-module_primary"],
#planity .planity_appointment_service_button {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
}
#planity [class*="button-module_primary"]:hover,
#planity .planity_appointment_service_button:hover {
  background-color: #ffffff !important;
  transform: translateY(-1px);
}
#planity [class*="button-module_primary"] *,
#planity .planity_appointment_service_button * {
  background-color: transparent !important;
}

/* Boutons blancs (étapes) : clairs, texte noir lisible */
#planity [class*="button-module_white"],
#planity [class*="button-module_white"] * {
  color: #0a0b0d !important;
}
#planity [class*="button-module_white"] * {
  background-color: transparent !important;
}

/* Boutons secondaires (« Ajouter une prestation à la suite »…) :
   dégradé sombre, texte blanc — y compris à l'état désactivé */
#planity [class*="button-module_secondary"],
#planity .planity_ui_button_root {
  background: linear-gradient(180deg, rgb(22, 23, 27), rgb(16, 17, 20)) !important;
  color: #f5f5f6 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
#planity [class*="button-module_secondary"]:hover,
#planity .planity_ui_button_root:hover {
  background: linear-gradient(180deg, rgb(30, 31, 36), rgb(22, 23, 27)) !important;
}
#planity [class*="button-module_secondary"] *,
#planity .planity_ui_button_root * {
  color: #f5f5f6 !important;
  background-color: transparent !important;
}
#planity [class*="button-module_secondary"]:disabled,
#planity .planity_ui_button_root:disabled {
  opacity: 0.75 !important;
}

/* Sélection du barbier : la vignette choisie passe en NOIR SUR BLANC.
   La classe .bg-chip-selected est posée par planity-guard.js dès
   qu'une radio est cochée — fiable quelle que soit la structure DOM. */
#planity .bg-chip-selected {
  background: #f5f5f6 !important;
  opacity: 1 !important;
}
#planity .bg-chip-selected > span,
#planity .bg-chip-selected [class*="radio_picture-module_label"],
#planity .bg-chip-selected p {
  color: #0a0b0d !important;
  opacity: 1 !important;
}
#planity .bg-chip-selected [class*="radio_picture-module_border"] {
  border-color: rgba(10, 11, 13, 0.25) !important;
}
/* L'avatar rond garde son fond sombre et sa lettre blanche */
#planity .bg-chip-selected [class*="avatar-module_avatar"] {
  background: #0a0b0d !important;
  opacity: 1 !important;
}
#planity .bg-chip-selected [class*="avatar-module_initial"] {
  color: #f5f5f6 !important;
}
#planity .bg-chip-selected input[type="radio"] {
  accent-color: #0a0b0d !important;
}