/*!
 * Sejour Abidjan - Charte graphique du tableau de bord locataire / proprietaire
 *
 * Portee : gabarits user_dashboard* du theme WpRentals.
 * Source : brand book officiel Sejour Abidjan v2.0.
 *
 * Principe : WpRentals met ces ecrans en page avec des flottants Bootstrap et
 * des largeurs fixes. On neutralise d'abord cette couche, puis on recompose en
 * grille. Sans cette remise a plat, les grilles sont contredites de l'interieur
 * par les largeurs en pixels des elements, et les lignes se chevauchent parce
 * que la hauteur des conteneurs s'effondre sur des enfants flottants.
 *
 * Aucun fichier du theme n'est modifie : tout survit aux mises a jour.
 */

.is_dashboard {
  --sa-marine: #022B61;
  --sa-marine-hover: #01204A;
  --sa-laterite: #9C4A21;
  --sa-laterite-hover: #7E3A19;
  --sa-lagune: #2F7A78;
  --sa-chaux: #FAFAF8;
  --sa-surface: #FFFFFF;
  --sa-muted: #5B6675;
  --sa-line: #DDE1E6;

  --sa-serif: "Playfair Display", Georgia, serif;
  --sa-sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --sa-mono: "IBM Plex Mono", ui-monospace, monospace;

  --sa-1: 8px;
  --sa-2: 16px;
  --sa-3: 24px;
  --sa-4: 40px;

  /* Gabarit commun a l'en-tete et aux lignes. */
  --sa-cols: 6fr 2fr 2fr 2fr;
}

/* ---------------------------------------------------------------
   1. Fondations
   Le theme charge Inter sur le tableau de bord : on le neutralise.
   --------------------------------------------------------------- */

.is_dashboard,
.is_dashboard input,
.is_dashboard select,
.is_dashboard textarea,
.is_dashboard button {
  font-family: var(--sa-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--sa-marine);
}

.is_dashboard {
  background-color: var(--sa-chaux);
}

.is_dashboard h1,
.is_dashboard h2,
.is_dashboard h3,
.is_dashboard h4 {
  font-family: var(--sa-serif);
  font-weight: 600;
  line-height: 1.12;
  color: var(--sa-marine);
  letter-spacing: 0;
}

/* Angles francs partout, sauf avatars ronds. */
.is_dashboard .dasboard-prop-listing,
.is_dashboard .invoice_unit,
.is_dashboard .invoice_unit_title,
.is_dashboard .wpestate_dashboard_table_list_header,
.is_dashboard .form-control,
.is_dashboard input,
.is_dashboard select,
.is_dashboard textarea,
.is_dashboard img,
.is_dashboard .info-container_booking span,
.is_dashboard .wpestate_vc_button {
  border-radius: 0 !important;
}

.is_dashboard .user-profile-picture img,
.is_dashboard .agent_avatar img,
.is_dashboard .profile-image-wrapper img {
  border-radius: 50% !important;
}

/* Aucune ombre : la hierarchie vient du filet et du blanc. */
.is_dashboard .dasboard-prop-listing,
.is_dashboard .invoice_unit,
.is_dashboard .user_dashboard_panel,
.is_dashboard .search_dashborad_header {
  box-shadow: none !important;
}

/* Le theme met la ligne d'accueil en capitales initiales, ce qui produit
   "Bonjour, Ahoussijeanemmanuel@Gmail.Com". Faux en francais. */
.is_dashboard .profile_wellcome,
.is_dashboard .back_to_home {
  text-transform: none;
}

/* ---------------------------------------------------------------
   2. Neutralisation de la couche flottante
   --------------------------------------------------------------- */

.is_dashboard .wpestate_dashboard_table_list_header,
.is_dashboard .wpestate_dashboard_table_list_header > div,
.is_dashboard .dasboard-prop-listing,
.is_dashboard .dasboard-prop-listing > div,
.is_dashboard .blog_listing_image,
.is_dashboard .prop-info,
.is_dashboard .info-container_booking {
  float: none;
  width: auto;
  min-width: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* ---------------------------------------------------------------
   3. En-tete de tableau
   --------------------------------------------------------------- */

.is_dashboard .wpestate_dashboard_table_list_header,
.is_dashboard .invoice_unit_title {
  display: grid;
  grid-template-columns: var(--sa-cols);
  gap: 0 var(--sa-2);
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  margin: 0 0 1px 0;
  padding: var(--sa-2);
  border: 0;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.is_dashboard .wpestate_dashboard_table_list_header > div,
.is_dashboard .invoice_unit_title > div,
.is_dashboard .invoice_unit_title strong {
  color: var(--sa-chaux);
  font-weight: 600;
  font-size: 16px;
}

/* Le theme dessine un trait sous l'en-tete avec un pseudo-element :after.
   Dans un conteneur de grille, un pseudo-element devient une CELLULE : il
   prenait la colonne 1 et decalait les quatre libelles d'un cran, en
   rejetant le dernier a la ligne. On le neutralise. */
.is_dashboard .wpestate_dashboard_table_list_header::after,
.is_dashboard .wpestate_dashboard_table_list_header::before,
.is_dashboard .dasboard-prop-listing::after,
.is_dashboard .dasboard-prop-listing::before {
  content: none;
  display: none;
}

/* La barre d'actions occupe sa propre ligne, sur toute la largeur. */
.is_dashboard .info-container_booking {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------
   4. Ligne de reservation

   Meme gabarit de colonnes que l'en-tete, donc alignement garanti.
   La grille contient aussi les flottants du theme, ce qui supprime le
   chevauchement entre lignes successives.
   --------------------------------------------------------------- */

.is_dashboard .dasboard-prop-listing {
  display: grid;
  grid-template-columns: var(--sa-cols);
  gap: var(--sa-2);
  align-items: start;
  background-color: var(--sa-surface);
  border: 0;
  border-bottom: 1px solid var(--sa-line);
  padding: var(--sa-3) var(--sa-2);
  margin: 0;
  transition: background-color 120ms linear;
}

.is_dashboard .dasboard-prop-listing:hover {
  background-color: var(--sa-chaux);
}

/* Colonne 1 : vignette et informations du bien. */
.is_dashboard .blog_listing_image.my_bookings_image {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--sa-2);
  align-items: start;
}

.is_dashboard .blog_listing_image.book_image {
  margin: 0;
  overflow: hidden;
}

.is_dashboard .blog_listing_image.book_image img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
}

.is_dashboard .listing_title_book,
.is_dashboard .book_listing_user_title {
  font-family: var(--sa-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--sa-1) 0;
  color: var(--sa-marine);
}

.is_dashboard .listing_title_book a {
  color: var(--sa-marine);
  text-decoration: none;
  border-bottom: 1px solid var(--sa-line);
}

.is_dashboard .listing_title_book a:hover {
  border-bottom-color: var(--sa-laterite);
  color: var(--sa-laterite);
}

.is_dashboard .booking_details_title {
  color: var(--sa-muted);
  font-weight: 500;
}

.is_dashboard .user_dashboard_listed {
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

/* Colonnes 2 a 4 : elles doivent pouvoir se casser, sinon une adresse
   de courriel deborde du tableau. */
.is_dashboard .booking_unit_status,
.is_dashboard .booking_unit_period,
.is_dashboard .booking_unit_owner {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.is_dashboard .booking_unit_period {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--sa-marine);
}

.is_dashboard .booking_unit_period strong {
  font-family: var(--sa-sans);
  font-weight: 500;
  color: var(--sa-muted);
}

.is_dashboard .booking_unit_owner,
.is_dashboard .booking_unit_owner a {
  color: var(--sa-muted);
}

/* Solde restant : signale sans recourir a un rouge qui n'existe pas
   dans la charte. */
.is_dashboard .book_listing_user_unit_balance {
  color: var(--sa-marine);
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.is_dashboard .book_listing_user_unit_balance .booking_details_title {
  font-family: var(--sa-sans);
  color: var(--sa-muted);
}

/* ---------------------------------------------------------------
   5. Statuts
   La laterite reste reservee a l'action principale (regle des 3 %).
   --------------------------------------------------------------- */

.is_dashboard .wprentals_status_circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 0;
  margin-right: var(--sa-1);
  vertical-align: middle;
  background-color: var(--sa-muted);
}

.is_dashboard .wprentals_status_circle.booking_confirmed_full_paid {
  background-color: var(--sa-lagune);
}

.is_dashboard .wprentals_status_circle.waiting_payment_status {
  background-color: var(--sa-marine);
}

.is_dashboard .wprentals_status_circle.waiting_payment_status_pending {
  background-color: var(--sa-muted);
}

.is_dashboard .tag-published,
.is_dashboard .waiting_payment_status,
.is_dashboard .waiting_payment_status_pending {
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--sa-marine);
}

.is_dashboard .tag-published.booking_confirmed_full_paid {
  color: var(--sa-lagune);
}

.is_dashboard .waiting_payment_status_pending {
  color: var(--sa-muted);
}

/* ---------------------------------------------------------------
   6. Actions de ligne
   Une seule action en aplat laterite par ligne, les autres en texte.
   --------------------------------------------------------------- */

.is_dashboard .info-container_booking {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-1) var(--sa-3);
  align-items: center;
  padding-top: var(--sa-2);
  margin-top: var(--sa-1);
  border-top: 1px solid var(--sa-line);
}

.is_dashboard .info-container_booking span {
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--sa-marine);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sa-line);
  padding: 0 0 2px 0;
  text-transform: none;
  transition: color 120ms linear, border-color 120ms linear;
}

.is_dashboard .info-container_booking span:hover {
  color: var(--sa-laterite);
  border-bottom-color: var(--sa-laterite);
}

/* Action principale de la ligne : seul aplat laterite. */
.is_dashboard .info-container_booking span.generate_invoice,
.is_dashboard .info-container_booking span.confirmed_booking {
  background-color: var(--sa-laterite);
  color: var(--sa-chaux);
  border: 0;
  padding: 10px var(--sa-2);
  font-weight: 600;
}

.is_dashboard .info-container_booking span.generate_invoice:hover,
.is_dashboard .info-container_booking span.confirmed_booking:hover {
  background-color: var(--sa-laterite-hover);
  color: var(--sa-chaux);
}

/* Actions destructives : jamais en aplat. */
.is_dashboard .info-container_booking span.delete_booking,
.is_dashboard .info-container_booking span.delete_invoice,
.is_dashboard .info-container_booking span.cancel_user_booking,
.is_dashboard .info-container_booking span.cancel_own_booking {
  color: var(--sa-muted);
}

.is_dashboard .info-container_booking span:focus-visible,
.is_dashboard a:focus-visible,
.is_dashboard input:focus-visible,
.is_dashboard select:focus-visible {
  outline: 2px solid var(--sa-marine);
  outline-offset: 2px;
}

/* Le document Facture est insere dans la ligne : il occupe toute la
   largeur, sinon il tombe dans la premiere colonne de la grille. */
.is_dashboard .dasboard-prop-listing .create_invoice_form,
.is_dashboard .dasboard-prop-listing .trip_details_wrapper {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------
   7. Recherche, filtres, totaux
   --------------------------------------------------------------- */

.is_dashboard .search_dashborad_header,
.is_dashboard .invoice_filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-2);
  align-items: center;
  background-color: var(--sa-surface);
  border: 1px solid var(--sa-line);
  padding: var(--sa-2);
  margin-bottom: var(--sa-3);
}

.is_dashboard .search_dashborad_header form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-2);
  align-items: center;
  width: 100%;
  margin: 0;
}

.is_dashboard .search_dashborad_header form > div {
  float: none;
  width: auto;
  padding: 0;
  margin: 0;
}

.is_dashboard .search_dashborad_header form > div:first-of-type {
  flex: 1 1 260px;
}

.is_dashboard .form-control,
.is_dashboard input[type="text"],
.is_dashboard select {
  width: 100%;
  background-color: var(--sa-surface);
  border: 1px solid var(--sa-line);
  box-shadow: none;
  height: auto;
  padding: 10px var(--sa-2);
  color: var(--sa-marine);
}

.is_dashboard .form-control::placeholder,
.is_dashboard input[type="text"]::placeholder {
  color: var(--sa-muted);
  opacity: 1;
}

.is_dashboard .form-control:focus,
.is_dashboard select:focus {
  border-color: var(--sa-marine);
  box-shadow: none;
  outline: 2px solid var(--sa-marine);
  outline-offset: 0;
}

.is_dashboard .wpestate_vc_button,
.is_dashboard input[type="submit"] {
  width: auto;
  background-color: var(--sa-marine);
  border: 0;
  color: var(--sa-chaux);
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 600;
  padding: 10px var(--sa-3);
  text-transform: none;
  transition: background-color 120ms linear;
}

.is_dashboard .wpestate_vc_button:hover,
.is_dashboard input[type="submit"]:hover {
  background-color: var(--sa-marine-hover);
  color: var(--sa-chaux);
}

.is_dashboard .invoice_totals {
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  padding: var(--sa-2);
  margin-top: var(--sa-3);
}

.is_dashboard .invoice_totals strong,
.is_dashboard .invoice_totals #invoice_confirmed,
.is_dashboard .invoice_totals #invoice_issued {
  color: var(--sa-chaux);
  font-weight: 500;
}

.is_dashboard .invoice_totals #invoice_confirmed,
.is_dashboard .invoice_totals #invoice_issued {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  margin-right: var(--sa-4);
}

.is_dashboard .invoices_explanation {
  color: var(--sa-muted);
  font-size: 16px;
  margin-bottom: var(--sa-2);
}

/* ---------------------------------------------------------------
   8. Etat vide et pagination
   --------------------------------------------------------------- */

.is_dashboard .no_favorites {
  font-family: var(--sa-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--sa-marine);
  background-color: var(--sa-surface);
  border: 1px solid var(--sa-line);
  padding: var(--sa-4) var(--sa-3);
  margin: 0;
}

.is_dashboard .pagination a,
.is_dashboard .pagination span {
  border-radius: 0;
  border: 1px solid var(--sa-line);
  color: var(--sa-marine);
  background-color: var(--sa-surface);
}

.is_dashboard .pagination .current,
.is_dashboard .pagination a:hover {
  background-color: var(--sa-marine);
  border-color: var(--sa-marine);
  color: var(--sa-chaux);
}

/* ---------------------------------------------------------------
   9. Repli responsive
   --------------------------------------------------------------- */

@media (max-width: 1199px) {
  .is_dashboard {
    --sa-cols: 5fr 2fr 2fr 3fr;
  }
}

@media (max-width: 991px) {
  /* Empile : l'en-tete de colonnes n'a plus de sens, chaque ligne
     redevient un bloc lisible. */
  .is_dashboard .wpestate_dashboard_table_list_header,
  .is_dashboard .invoice_unit_title {
    display: none;
  }

  .is_dashboard .dasboard-prop-listing {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sa-1);
    padding: var(--sa-3) var(--sa-2);
  }

  .is_dashboard .booking_unit_status,
  .is_dashboard .booking_unit_period,
  .is_dashboard .booking_unit_owner {
    padding: 0;
  }

  .is_dashboard .info-container_booking {
    flex-direction: column;
    align-items: stretch;
  }

  .is_dashboard .info-container_booking span {
    text-align: left;
  }

  .is_dashboard .info-container_booking span.generate_invoice,
  .is_dashboard .info-container_booking span.confirmed_booking {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .is_dashboard .blog_listing_image.my_bookings_image {
    grid-template-columns: minmax(0, 1fr);
  }

  .is_dashboard .blog_listing_image.book_image img {
    width: 100%;
    height: 180px;
  }
}

/* Zebrage du theme : incompatible avec le survol et le rythme au filet. */
.is_dashboard .dasboard-prop-listing:nth-child(even) {
  background-color: var(--sa-surface);
}

.is_dashboard .dasboard-prop-listing:nth-child(even):hover {
  background-color: var(--sa-chaux);
}

/* Boutons verts restants : formulaire de facture et actions de paiement.
   Le theme les sort en #45b37e, absent du brand book. */
.is_dashboard #add_inv_expenses,
.is_dashboard #add_inv_discount,
.is_dashboard .send_invoice,
.is_dashboard .issue_final_invoice,
.is_dashboard .proceed-payment,
.is_dashboard .proceed-payment_full,
.is_dashboard .woo_pay_submit,
.is_dashboard .activate_payments,
.is_dashboard .pay_owner,
.is_dashboard .refund_buyer {
  background-color: var(--sa-laterite);
  color: var(--sa-chaux);
  border: 0;
  border-radius: 0;
  padding: 10px var(--sa-2);
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms linear;
}

.is_dashboard #add_inv_expenses:hover,
.is_dashboard #add_inv_discount:hover,
.is_dashboard .send_invoice:hover,
.is_dashboard .issue_final_invoice:hover,
.is_dashboard .proceed-payment:hover,
.is_dashboard .proceed-payment_full:hover,
.is_dashboard .woo_pay_submit:hover,
.is_dashboard .activate_payments:hover,
.is_dashboard .pay_owner:hover,
.is_dashboard .refund_buyer:hover {
  background-color: #7E3A19;
  color: var(--sa-chaux);
}

/* ---------------------------------------------------------------
   12. Page Demandes recues

   Le gabarit des reservations empile TOUTES les classes sur le meme
   div : col-md-6 blog_listing_image my_bookings_image book_image.
   Les regles prevues pour la vignette (overflow cache, image de
   120x90) s'appliquaient donc a la colonne entiere et rognaient le
   titre. On rend l'overflow a la colonne et on cadre l'image par son
   lien parent.
   --------------------------------------------------------------- */

.is_dashboard .blog_listing_image.my_bookings_image {
  overflow: visible;
}

.is_dashboard .blog_listing_image.my_bookings_image > a {
  display: block;
  width: 120px;
  height: 90px;
  overflow: hidden;
}

.is_dashboard .blog_listing_image.my_bookings_image > a > img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
}

/* Le titre et les mentions doivent pouvoir occuper toute leur hauteur. */
.is_dashboard .prop-info {
  min-width: 0;
  overflow: visible;
}

.is_dashboard .book_listing_user_unit_title {
  font-family: var(--sa-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--sa-1) 0;
  color: var(--sa-marine);
}

.is_dashboard .book_listing_user_unit_invoice strong,
.is_dashboard .book_listing_user_unit_guests strong {
  color: var(--sa-muted);
  font-weight: 500;
}

.is_dashboard .invoice_list_id {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--sa-marine);
}

/* Mentions d'avis : information, pas action. */
.is_dashboard .you_already_review,
.is_dashboard .post_review_later {
  color: var(--sa-muted);
  border-bottom: 0;
  cursor: default;
}

/* ---------------------------------------------------------------
   13. Page Factures

   La liste des factures a SIX colonnes (titre, date, type, facturation,
   statut, prix), pas quatre comme les listes de reservations. Le gabarit
   de colonnes commun les faisait passer a la ligne : l'en-tete affichait
   STATUT et PRIX sur une deuxieme rangee.
   --------------------------------------------------------------- */

.is_dashboard .invoice_unit_title,
.is_dashboard .invoice_unit {
  display: grid;
  grid-template-columns:
    minmax(0, 1.6fr)
    minmax(0, 1.1fr)
    minmax(0, 1.6fr)
    minmax(0, 1.1fr)
    minmax(0, 1.8fr)
    minmax(0, 1.4fr);
  gap: 0 var(--sa-2);
  align-items: start;
}

.is_dashboard .invoice_unit_title {
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  padding: var(--sa-2);
  margin: 0 0 1px 0;
  border: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.is_dashboard .invoice_unit_title > div,
.is_dashboard .invoice_unit_title strong {
  float: none;
  width: auto;
  padding: 0;
  color: var(--sa-chaux);
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.is_dashboard .invoice_unit {
  float: none;
  width: auto;
  background-color: var(--sa-surface);
  border: 0;
  border-bottom: 1px solid var(--sa-line);
  border-radius: 0;
  padding: var(--sa-3) var(--sa-2);
  margin: 0;
  cursor: pointer;
  transition: background-color 120ms linear;
}

.is_dashboard .invoice_unit:hover {
  background-color: var(--sa-chaux);
}

.is_dashboard .invoice_unit > div {
  float: none;
  width: auto;
  padding: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--sa-marine);
  font-size: 16px;
}

/* Titre de la facture et montant : donnees chiffrees en mono. */
.is_dashboard .invoice_unit_title_wrapper,
.is_dashboard .invoice_unit > div:nth-child(2),
.is_dashboard .invoice_unit > div:last-child {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.is_dashboard .invoice_unit > div:last-child {
  text-align: right;
}

.is_dashboard .invoice_unit_title > div:last-child {
  text-align: right;
}

/* Le document Facture est insere A L'INTERIEUR de la ligne cliquee, et non
   apres elle. Dans une grille il devient donc une cellule supplementaire,
   large d'une seule colonne : tout le texte se brisait a une lettre par
   ligne. Il doit occuper la rangee entiere. Meme precaution sur les lignes
   de reservation, ou le meme script insere le formulaire de facture. */
.is_dashboard .invoice_unit > .create_invoice_form,
.is_dashboard .invoice_unit > .trip_details_wrapper,
.is_dashboard .dasboard-prop-listing > .create_invoice_form,
.is_dashboard .dasboard-prop-listing > .trip_details_wrapper,
.is_dashboard .invoice_unit_title > .create_invoice_form {
  grid-column: 1 / -1;
  width: auto;
  min-width: 0;
  margin: var(--sa-3) 0 0 0;
}

/* Bandeau des totaux et filtres. */
.is_dashboard .invoice_totals {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sa-1) var(--sa-2);
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  padding: var(--sa-2);
  margin: 0 0 var(--sa-3) 0;
}

.is_dashboard .invoice_totals strong {
  color: var(--sa-chaux);
  font-weight: 500;
}

.is_dashboard .invoice_totals #invoice_confirmed,
.is_dashboard .invoice_totals #invoice_issued {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--sa-chaux);
  margin-right: var(--sa-4);
}

.is_dashboard .invoice_filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sa-2);
  background-color: var(--sa-surface);
  border: 1px solid var(--sa-line);
  padding: var(--sa-2);
  margin: 0 0 var(--sa-2) 0;
}

.is_dashboard .invoice_filters > div {
  float: none;
  width: auto;
  padding: 0;
}

.is_dashboard .invoices_explanation {
  max-width: 68ch;
  margin: 0 0 var(--sa-3) 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sa-muted);
}

/* ---------------------------------------------------------------
   14. Menu lateral

   Correctifs de surface uniquement : couleur, taille, angles francs.
   NE PAS toucher a display, float, width, margin ni padding sur ces
   elements. Le theme les positionne avec .user_tab_menu en absolu et
   des ancres inline-block a width: calc(100% - 20px) ; toute reprise
   structurelle fait sortir les entrees de la carte.
   --------------------------------------------------------------- */

.is_dashboard .user_tab_menu a,
.is_dashboard .user_dashboard_links a {
  font-family: var(--sa-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--sa-muted);
  border-radius: 0;
}

.is_dashboard .user_dashboard_links a:hover {
  background-color: var(--sa-chaux);
  color: var(--sa-marine);
  font-weight: 500;
}

.is_dashboard .user_dashboard_links a:hover i {
  color: var(--sa-laterite);
}

/* Actif : le theme le met en violet #806AE6. */
.is_dashboard .user_dashboard_links .user_tab_active {
  background-color: var(--sa-chaux);
  color: var(--sa-marine);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sa-laterite);
}

.is_dashboard .user_dashboard_links .user_tab_active i {
  color: var(--sa-laterite);
}

.is_dashboard .user_tab_menu {
  border-radius: 0;
}

/* ---------------------------------------------------------------
   16. Tableau de bord principal

   Composition en bento : indicateurs du compte, graphique en pleine
   largeur, deux panneaux apparies, historique en colonne laterale.
   Variance basse : aucun debord, aucune acrobatie. La force vient de
   l'echelle typographique et du contraste marine / blanc chaux.
   --------------------------------------------------------------- */

.is_dashboard .dashboad_widgets_wrapper,
.is_dashboard .wpestate_dashboard_content_wrapper {
  background-color: var(--sa-surface);
  border: 1px solid var(--sa-line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sa-3);
  margin-bottom: var(--sa-3);
}

.is_dashboard .user_dashboard_panel_title_widget {
  margin: 0 0 var(--sa-3) 0;
  padding-bottom: var(--sa-2);
  border-bottom: 2px solid var(--sa-marine);
  font-family: var(--sa-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sa-marine);
  text-transform: none;
}

/* Resume du compte : le libelle et la valeur sont dans le meme noeud de
   texte, separes par deux points. On ne peut pas cibler le chiffre seul,
   on compose donc la ligne entiere en Plex Mono a l'echelle. */
.is_dashboard .widget_summary .dasboard_widget_row {
  display: block;
  padding: var(--sa-2) 0;
  border-bottom: 1px solid var(--sa-line);
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 500;
  color: var(--sa-marine);
}

.is_dashboard .widget_summary .dasboard_widget_row:last-child {
  border-bottom: 0;
}

/* Chart.js calcule la hauteur du canevas sur son parent. Sans hauteur
   declaree, le canevas vaut zero et la zone reste blanche. */
.is_dashboard .visits_per_listing .wpestate_dashboard_content_wrapper {
  position: relative;
}

.is_dashboard #myChart_widget_total {
  display: block;
  width: 100% !important;
  height: 300px !important;
  max-height: 300px;
}

/* Panneaux apparies : listes les plus vues et les plus reservees. */
.is_dashboard .dashboard_widget_unit {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sa-2);
  align-items: center;
  padding: var(--sa-2) 0;
  border-bottom: 1px solid var(--sa-line);
}

.is_dashboard .dashboard_widget_unit:last-child {
  border-bottom: 0;
}

.is_dashboard .dashbard_unit_image {
  display: block;
  width: 96px;
  height: 72px;
  overflow: hidden;
}

.is_dashboard .dashbard_unit_image img {
  display: block;
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 0;
}

.is_dashboard .dashbard_unit_title {
  display: block;
  font-family: var(--sa-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sa-marine);
  text-decoration: none;
}

.is_dashboard .dashbard_unit_title:hover {
  color: var(--sa-laterite);
}

.is_dashboard .property_dashboard_location {
  margin-top: 2px;
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 500;
  color: var(--sa-muted);
}

.is_dashboard .wpestate_dashboard_no_listings {
  padding: var(--sa-3) 0;
  font-size: 16px;
  color: var(--sa-muted);
}

/* Historique : ligne de temps sobre, marqueur lateritique. */
.is_dashboard .account_history_widget .dashboard_history_wrapper {
  max-height: 640px;
  overflow-y: auto;
}

.is_dashboard .wpestate_dash_history_unit {
  position: relative;
  padding: var(--sa-2) 0 var(--sa-2) var(--sa-3);
  border-bottom: 1px solid var(--sa-line);
}

.is_dashboard .wpestate_dash_history_unit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 8px;
  background-color: var(--sa-laterite);
}

.is_dashboard .wpestate_dash_history_unit:last-child {
  border-bottom: 0;
}

.is_dashboard .wpestat_dash_history_date {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 500;
  color: var(--sa-muted);
}

.is_dashboard .wpestat_dash_history_label {
  margin-top: 2px;
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sa-marine);
}

.is_dashboard .wpestat_dash_history_label a {
  color: var(--sa-marine);
  text-decoration: none;
  border-bottom: 1px solid var(--sa-line);
}

.is_dashboard .wpestat_dash_history_label a:hover {
  color: var(--sa-laterite);
  border-bottom-color: var(--sa-laterite);
}

/* ---------------------------------------------------------------
   17. Menu lateral : chevauchement des entrees

   Les ancres sont en inline-block et heritent d'une hauteur de ligne de
   1,55 du conteneur. Une ancre plus haute que sa ligne deborde et
   recouvre la suivante : « Calendrier general » passait sous « Mes
   reservations ». On annule la hauteur de ligne du conteneur et on la
   redonne aux ancres. Aucune propriete de mise en page n'est touchee.
   --------------------------------------------------------------- */

.is_dashboard .user_dashboard_links {
  line-height: 0;
}

.is_dashboard .user_tab_menu a,
.is_dashboard .user_dashboard_links a {
  line-height: 1.35;
  vertical-align: top;
}

/* ---------------------------------------------------------------
   19. Defilement, boutons, transitions de page

   Tout ce qui suit repose sur des primitives CSS natives : timelines de
   defilement, transitions de vue, :has. Aucun JavaScript, aucun
   IntersectionObserver, aucune bibliotheque. Ce qui n'est pas supporte
   par un navigateur retombe sur la cascade d'entree deja en place :
   la page reste correcte, elle est simplement moins vivante.
   --------------------------------------------------------------- */

/* --- Boutons : la couleur se remplit depuis la gauche ---------------
   On anime background-size sur un degrade plutot qu'un pseudo-element :
   le texte reste au-dessus sans avoir a le rehausser, et aucun element
   de structure n'est ajoute au balisage du theme. */

.is_dashboard .info-container_booking span.generate_invoice,
.is_dashboard .info-container_booking span.confirmed_booking,
.is_dashboard .woo_pay,
.is_dashboard .woo_pay_submit,
.is_dashboard #add_inv_expenses,
.is_dashboard #add_inv_discount,
.is_dashboard .send_invoice,
.is_dashboard .proceed-payment,
.is_dashboard .proceed-payment_full {
  background-image: linear-gradient(to right, var(--sa-marine) 0 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:
    background-size 340ms cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 90ms ease-out;
}

.is_dashboard .info-container_booking span.generate_invoice:hover,
.is_dashboard .info-container_booking span.confirmed_booking:hover,
.is_dashboard .woo_pay:hover,
.is_dashboard .woo_pay_submit:hover,
.is_dashboard #add_inv_expenses:hover,
.is_dashboard #add_inv_discount:hover,
.is_dashboard .send_invoice:hover,
.is_dashboard .proceed-payment:hover,
.is_dashboard .proceed-payment_full:hover {
  background-size: 100% 100%;
  background-color: var(--sa-laterite);
  color: var(--sa-chaux);
}

/* --- Actions en texte : le soulignement lateritique se trace --------- */

.is_dashboard .info-container_booking span:not(.generate_invoice):not(.confirmed_booking) {
  background-image: linear-gradient(var(--sa-laterite) 0 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition:
    background-size 260ms cubic-bezier(0.2, 0.7, 0.3, 1),
    color 160ms linear;
}

.is_dashboard .info-container_booking span:not(.generate_invoice):not(.confirmed_booking):hover {
  background-size: 100% 2px;
}

/* --- En-tetes de liste collants -------------------------------------
   Sur une liste longue, on perd le nom des colonnes. L'en-tete marine
   reste en haut pendant le defilement. */

.is_dashboard .wpestate_dashboard_table_list_header,
.is_dashboard .invoice_unit_title {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* --- Equilibre des titres ------------------------------------------- */

.is_dashboard h1,
.is_dashboard .user_dashboard_panel_title_widget,
.is_dashboard .listing_title_book,
.is_dashboard .dashbard_unit_title {
  text-wrap: balance;
}

/* --- Animations pilotees par le defilement --------------------------- */

@keyframes sa-scroll-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes sa-reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sa-reveal-side {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Jauge de progression du defilement, 2px de laterite en haut de
       l'ecran. Elle ne consomme aucun evenement de defilement : le
       navigateur la calcule lui-meme. */
    .is_dashboard::before {
      content: "";
      position: fixed;
      inset: 0 0 auto 0;
      height: 2px;
      background-color: var(--sa-laterite);
      transform: scaleX(0);
      transform-origin: left center;
      z-index: 999;
      animation: sa-scroll-progress linear both;
      animation-timeline: scroll(root block);
    }

    /* Les panneaux se revelent a leur entree dans la fenetre, et non
       plus tous au chargement. La cascade fixe est neutralisee. */
    .is_dashboard .wpestate_dashboard_holder > div {
      animation: sa-reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
      animation-delay: 0s;
    }

    /* Lignes de reservation, factures, annonces : meme geste, plus court,
       pour que le defilement reste rapide sur une longue liste. */
    .is_dashboard .dasboard-prop-listing,
    .is_dashboard .invoice_unit,
    .is_dashboard .dashboard_widget_unit {
      animation: sa-reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }

    /* Historique : les entrees arrivent par la gauche au defilement de
       leur propre colonne. */
    .is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit {
      animation: sa-reveal-side linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 35%;
      animation-delay: 0s;
    }
  }
}

/* --- Transition entre les pages du tableau de bord -------------------
   Une page du tableau de bord succede a une autre : le fond doit rester
   stable et seul le contenu se substituer. Deux declarations. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .is_dashboard::before {
    display: none;
  }
}

/* ---------------------------------------------------------------
   18. Vocabulaire de mouvement du tableau de bord

   Curseur de mouvement releve a 0,35 sur demande. Le principe reste :
   le mouvement raconte la structure, il ne decore pas. Quatre gestes,
   quatre seulement, reutilises partout :
     - monter et apparaitre  : un bloc entre dans la page
     - tracer                : un filet lateritique se deploie
     - devoiler              : un chiffre se decouvre par un masque
     - se rapprocher         : une cible reagit au survol
   Aucune boucle, aucune revelation au defilement, aucun compteur.
   --------------------------------------------------------------- */

@keyframes sa-panel-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sa-rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes sa-unmask {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes sa-entry-enter {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

/* 1. Entree echelonnee des panneaux. La cascade suit l'ordre de lecture. */
.is_dashboard .wpestate_dashboard_holder > div {
  animation: sa-panel-enter 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.is_dashboard .wpestate_dashboard_holder > div:nth-child(2) { animation-delay: 70ms; }
.is_dashboard .wpestate_dashboard_holder > div:nth-child(3) { animation-delay: 140ms; }
.is_dashboard .wpestate_dashboard_holder > div:nth-child(4) { animation-delay: 210ms; }
.is_dashboard .account_history_widget > div { animation-delay: 280ms; }

/* 2. Le filet lateritique se trace sous chaque titre de panneau.
   C'est la signature : le seul emploi de la laterite sur cette page. */
.is_dashboard .user_dashboard_panel_title_widget {
  position: relative;
}

.is_dashboard .user_dashboard_panel_title_widget::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 72px;
  height: 2px;
  background-color: var(--sa-laterite);
  transform-origin: left center;
  animation: sa-rule-draw 520ms 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* 3. Les chiffres du compte se devoilent par un masque qui balaie de la
   gauche vers la droite. Le nombre est present des le depart : on ne le
   fait jamais defiler, on le decouvre. */
.is_dashboard .widget_summary div.dasboard_widget_row {
  animation: sa-unmask 560ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.is_dashboard .widget_summary div.dasboard_widget_row:nth-of-type(1) { animation-delay: 300ms; }
.is_dashboard .widget_summary div.dasboard_widget_row:nth-of-type(2) { animation-delay: 370ms; }
.is_dashboard .widget_summary div.dasboard_widget_row:nth-of-type(3) { animation-delay: 440ms; }

/* 4. Vignettes : la photo se rapproche dans son cadre fixe, le titre
   passe en laterite. Le cadre ne bouge pas, seule l'image respire. */
.is_dashboard .dashbard_unit_image img {
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.is_dashboard .dashboard_widget_unit:hover .dashbard_unit_image img {
  transform: scale(1.06);
}

.is_dashboard .dashbard_unit_title {
  transition: color 160ms linear;
}

.is_dashboard .dashboard_widget_unit:hover .dashbard_unit_title {
  color: var(--sa-laterite);
}

/* 5. Historique : les entrees arrivent par la gauche, dans l'ordre.
   Au survol, l'entree avance de 4px et son marqueur grandit. */
.is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit {
  animation: sa-entry-enter 360ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  transition: background-color 180ms linear, padding-left 180ms ease-out;
}

.is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit:nth-child(1) { animation-delay: 320ms; }
.is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit:nth-child(2) { animation-delay: 365ms; }
.is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit:nth-child(3) { animation-delay: 410ms; }
.is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit:nth-child(4) { animation-delay: 455ms; }
.is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit:nth-child(5) { animation-delay: 500ms; }
.is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit:nth-child(6) { animation-delay: 545ms; }
.is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit:nth-child(7) { animation-delay: 590ms; }
.is_dashboard .dashboard_history_wrapper .wpestate_dash_history_unit:nth-child(n + 8) { animation-delay: 635ms; }

.is_dashboard .wpestate_dash_history_unit:hover {
  background-color: var(--sa-chaux);
  padding-left: calc(var(--sa-3) + 4px);
}

.is_dashboard .wpestate_dash_history_unit::before {
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.is_dashboard .wpestate_dash_history_unit:hover::before {
  transform: scale(1.6);
}

/* 6. Menu lateral : un filet lateritique se deploie du haut vers le bas.
   Le theme place deja les ancres en position relative : aucune propriete
   de mise en page n'est modifiee ici. */
.is_dashboard .user_dashboard_links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--sa-laterite);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.is_dashboard .user_dashboard_links a:hover::before,
.is_dashboard .user_dashboard_links .user_tab_active::before {
  transform: scaleY(1);
}

.is_dashboard .user_dashboard_links .user_tab_active {
  box-shadow: none;
}

/* Mouvement reduit : on coupe tout, et on redonne les reperes fixes que
   les transformations portaient, sinon le filet du menu s'afficherait
   sur toutes les entrees au lieu de la seule entree active. */
@media (prefers-reduced-motion: reduce) {
  .is_dashboard .user_dashboard_links a::before {
    display: none;
  }

  .is_dashboard .user_dashboard_links .user_tab_active {
    box-shadow: inset 3px 0 0 var(--sa-laterite);
  }

  .is_dashboard .user_dashboard_panel_title_widget::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   15. Mouvement

   Curseur de mouvement de la direction : 0,1. Le mouvement n'est admis
   ici que comme retour d'information : attente, prise en compte d'un
   clic. Aucune animation decorative, aucune revelation au defilement,
   aucun compteur sur un montant.
   --------------------------------------------------------------- */

/* Attente : le theme se contente de remplacer le libelle par un mot.
   On ajoute un filet lateritique qui progresse sous la ligne cliquee. */
.is_dashboard .wprentals_invoce_processing {
  margin-top: var(--sa-1);
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--sa-muted);
}

.is_dashboard .wprentals_invoce_processing::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 6px;
  background-image: linear-gradient(
    90deg,
    var(--sa-line) 0 38%,
    var(--sa-laterite) 38% 62%,
    var(--sa-line) 62% 100%
  );
  background-size: 260% 100%;
  animation: sa-progress 1100ms linear infinite;
}

@keyframes sa-progress {
  from { background-position: 100% 0; }
  to   { background-position: -60% 0; }
}

/* Prise en compte du clic : leger enfoncement sur les actions en aplat.
   Compte surtout sur mobile, ou il n'y a pas de survol. */
.is_dashboard .info-container_booking span.generate_invoice,
.is_dashboard .info-container_booking span.confirmed_booking,
.is_dashboard .woo_pay,
.is_dashboard .woo_pay_submit,
.is_dashboard .wpestate_vc_button,
.is_dashboard input[type="submit"],
.is_dashboard #add_inv_expenses,
.is_dashboard #add_inv_discount,
.is_dashboard .send_invoice,
.is_dashboard .proceed-payment,
.is_dashboard .proceed-payment_full {
  transition: background-color 120ms linear, transform 90ms ease-out;
}

.is_dashboard .info-container_booking span.generate_invoice:active,
.is_dashboard .info-container_booking span.confirmed_booking:active,
.is_dashboard .woo_pay:active,
.is_dashboard .woo_pay_submit:active,
.is_dashboard .wpestate_vc_button:active,
.is_dashboard input[type="submit"]:active,
.is_dashboard #add_inv_expenses:active,
.is_dashboard #add_inv_discount:active,
.is_dashboard .send_invoice:active,
.is_dashboard .proceed-payment:active,
.is_dashboard .proceed-payment_full:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .is_dashboard .wprentals_invoce_processing::after {
    animation: none;
    background-image: none;
    background-color: var(--sa-laterite);
  }

  .is_dashboard *,
  .is_dashboard *::before,
  .is_dashboard *::after {
    animation: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is_dashboard * {
    transition: none !important;
  }
}