/*!
 * Sejour Abidjan - Document Facture
 *
 * Cible : .create_invoice_form, produit par wpestate_print_create_form_invoice()
 * (wprentals-core), enrichi par sejour-abidjan-brand.php qui y injecte
 * .sa-invoice-head et .sa-invoice-foot a la place du <h3> du theme.
 *
 * Le pied est injecte juste apres l'en-tete dans le balisage : c'est l'ordre
 * flex ci-dessous qui le renvoie en bas du document.
 *
 * Portee racine : .create_invoice_form, car le document apparait aussi seul
 * dans la fenetre d'impression (body.print_body), hors de .is_dashboard.
 */

.create_invoice_form {
  --sa-marine: #022B61;
  --sa-marine-hover: #01204A;
  --sa-laterite: #9C4A21;
  --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;

  --sa-pad: var(--sa-4);
}

/* ---------------------------------------------------------------
   1. La feuille
   --------------------------------------------------------------- */

.create_invoice_form {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 780px;
  margin: var(--sa-3) 0;
  padding: 0;
  background-color: var(--sa-surface);
  border: 1px solid var(--sa-line);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--sa-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--sa-marine);
}

.create_invoice_form *,
.create_invoice_form *::before,
.create_invoice_form *::after {
  box-sizing: border-box;
}

/* Ordre de lecture : en-tete, corps, pied. */
.create_invoice_form .sa-invoice-head { order: 1; }
.create_invoice_form .invoice_table   { order: 2; }
.create_invoice_form .sa-invoice-foot { order: 3; }

/* Le logo est rendu par l'en-tete : celui du mode impression fait doublon. */
.create_invoice_form .printlogo {
  display: none;
}

.create_invoice_form .sa-mono {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.create_invoice_form .sa-label {
  font-family: var(--sa-sans);
  font-weight: 500;
  color: var(--sa-muted);
}

/* ---------------------------------------------------------------
   1 bis. Neutralisation de la couche float du theme

   WpRentals met ce document en page avec des floats et des largeurs
   fixes : .invoice_table est bloque a 500px, .inv_legend a 130px,
   .inv_data a 100px, .inv_exp a 210px. Ces largeurs s'appliquent aux
   elements de grille et empechent toute colonne de s'aligner. Il faut
   donc les remettre a plat AVANT de composer.
   --------------------------------------------------------------- */

.create_invoice_form {
  float: none;
}

.create_invoice_form .invoice_table,
.create_invoice_form .invoice_data,
.create_invoice_form .invoice_details,
.create_invoice_form .invoice_row,
.create_invoice_form .invoice_data > span,
.create_invoice_form .invoice_data_legend,
.create_invoice_form .inv_legend,
.create_invoice_form .inv_data,
.create_invoice_form .inv_exp,
.create_invoice_form .inv_depozit,
.create_invoice_form .total_inv_span,
.create_invoice_form .deposit_show_wrapper,
.create_invoice_form .invoice_explantions,
.create_invoice_form .price_custom_explained {
  float: none;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  font-size: 16px;
  color: var(--sa-marine);
}

.create_invoice_form .invoice_details {
  border: 0;
}

/* ---------------------------------------------------------------
   2. En-tete : emetteur a gauche, mention Facture a droite
   --------------------------------------------------------------- */

.create_invoice_form .sa-invoice-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--sa-3);
  align-items: start;
  padding: var(--sa-pad) var(--sa-pad) var(--sa-3) var(--sa-pad);
  border-bottom: 4px solid var(--sa-laterite);
}

.create_invoice_form .sa-issuer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.create_invoice_form .sa-issuer-logo {
  display: block;
  width: auto;
  max-width: 200px;
  max-height: 56px;
  height: auto;
  margin-bottom: var(--sa-2);
  object-fit: contain;
  object-position: left center;
}

.create_invoice_form .sa-issuer-name {
  font-family: var(--sa-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sa-marine);
}

.create_invoice_form .sa-issuer-tagline,
.create_invoice_form .sa-issuer-line,
.create_invoice_form .sa-issuer-legal {
  font-size: 16px;
  line-height: 1.45;
  color: var(--sa-muted);
}

.create_invoice_form .sa-issuer-legal {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
}

.create_invoice_form .sa-invoice-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sa-1);
  text-align: right;
}

.create_invoice_form .sa-wordmark {
  font-family: var(--sa-serif);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--sa-marine);
  margin-bottom: var(--sa-1);
}

.create_invoice_form .sa-meta-row {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--sa-2);
  align-items: baseline;
  white-space: nowrap;
}

.create_invoice_form .sa-meta-row .sa-mono {
  color: var(--sa-marine);
  text-align: right;
}

/* ---------------------------------------------------------------
   3. Corps
   --------------------------------------------------------------- */

.create_invoice_form .invoice_table {
  position: relative;
  width: auto;
  padding: var(--sa-pad);
  margin: 0;
  background: none;
  border: 0;
}

/* Bouton d'impression : le theme le sort en vert arrondi. */
.create_invoice_form #print_invoice {
  position: absolute;
  top: var(--sa-3);
  right: var(--sa-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--sa-marine);
  border-radius: 0;
  color: var(--sa-marine);
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}

.create_invoice_form #print_invoice:hover,
.create_invoice_form #print_invoice:focus-visible {
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
}

.create_invoice_form #print_invoice i {
  font-size: 16px;
  line-height: 1;
}

/* ---------------------------------------------------------------
   4. Facture a / details du sejour

   Le plugin sort une suite de <span> a plat. Le placement en grille
   dense repartit le client a gauche et le sejour a droite sans
   dependre de l'ordre du balisage, et sans trouer la colonne quand
   une ligne est absente (invites a zero, telephone vide).
   --------------------------------------------------------------- */

.create_invoice_form .invoice_data {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-flow: row dense;
  gap: var(--sa-1) var(--sa-4);
  padding-bottom: var(--sa-4);
  margin: 0;
}

.create_invoice_form .invoice_data > span {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Colonne gauche : le client. */
.create_invoice_form .invoice_date_renter_name_wrapper,
.create_invoice_form .invoice_date_renter_email_wrapper,
.create_invoice_form .invoice_date_renter_phone_wrapper {
  grid-column: 1;
}

/* Colonne droite : le sejour.
   Deux jeux de classes coexistent dans WpRentals : show_invoice_* pour la
   facture emise, invoice_date_*_wrapper pour le formulaire de creation. */
.create_invoice_form .show_invoice_period,
.create_invoice_form .show_invoice_no_nights,
.create_invoice_form .show_invoice_guests,
.create_invoice_form .show_invoice_price_per_night,
.create_invoice_form .show_invoice_price_per_quest,
.create_invoice_form .invoice_date_period_wrapper,
.create_invoice_form .invoice_date_nights_wrapper,
.create_invoice_form .invoice_date_guest_wrapper,
.create_invoice_form .invoice_date_label_wrapper,
.create_invoice_form .invoice_date_price_guest_wrapper,
.create_invoice_form .invoice_date_property_name_wrapper,
.create_invoice_form .show_invoice_price_details {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sa-2);
  align-items: baseline;
  text-align: right;
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--sa-marine);
}

.create_invoice_form .invoice_date_property_name_wrapper {
  font-family: var(--sa-sans);
}

.create_invoice_form .invoice_data_legend {
  font-family: var(--sa-sans);
  font-weight: 500;
  color: var(--sa-muted);
  text-align: left;
}

/* Bloc client : intitule genere, puis nom en vedette. */
.create_invoice_form .invoice_date_renter_name_wrapper::before {
  content: "Factur\00e9\0020\00e0";
  display: block;
  margin-bottom: var(--sa-1);
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--sa-muted);
}

.create_invoice_form .invoice_date_renter_name_wrapper {
  font-family: var(--sa-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sa-marine);
}
.create_invoice_form .invoice_date_renter_email_wrapper,
.create_invoice_form .invoice_date_renter_phone_wrapper {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sa-muted);
}

/* Ces trois lignes n'ont pas d'intitule sur un document : le nom, le
   courriel et le telephone se lisent seuls. */
.create_invoice_form .invoice_date_renter_name_wrapper .invoice_data_legend,
.create_invoice_form .invoice_date_renter_email_wrapper .invoice_data_legend,
.create_invoice_form .invoice_date_renter_phone_wrapper .invoice_data_legend {
  display: none;
}

/* Informations de paiement du compte : interne, hors document client. */
.create_invoice_form .invoice_date_renter_payment_info_wrapper,
.create_invoice_form .invoice_date_renter_payments_to_wrapper {
  display: none;
}

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

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

.create_invoice_form .price_custom_explained {
  grid-column: 2;
  font-family: var(--sa-mono);
  font-size: 16px;
  text-align: right;
  color: var(--sa-muted);
}

/* ---------------------------------------------------------------
   5. Tableau des couts
   --------------------------------------------------------------- */

.create_invoice_form .invoice_row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(110px, auto) minmax(0, 1.1fr);
  gap: var(--sa-1) var(--sa-2);
  align-items: baseline;
  padding: 14px var(--sa-2);
  margin: 0;
  border: 0;
}

.create_invoice_form .invoice_row.header_legend {
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.create_invoice_form .invoice_row.header_legend .inv_legend,
.create_invoice_form .invoice_row.header_legend .inv_data,
.create_invoice_form .invoice_row.header_legend .inv_exp {
  color: var(--sa-chaux);
  font-family: var(--sa-sans);
  font-weight: 600;
}

.create_invoice_form .invoice_row.header_legend .inv_data {
  text-align: right;
}

.create_invoice_form .invoice_row.invoice_content {
  border-bottom: 1px solid var(--sa-line);
  color: var(--sa-marine);
}

.create_invoice_form .inv_legend {
  font-weight: 500;
}

.create_invoice_form .inv_data {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.create_invoice_form .inv_exp {
  font-size: 16px;
  color: var(--sa-muted);
}

/* ---------------------------------------------------------------
   6. Totaux, alignes a droite comme sur un bordereau
   --------------------------------------------------------------- */

/* Le plugin imbrique .invoice_totalx (revenu proprietaire) DANS
   .invoice_total, et laisse .create_invoice_form non ferme. On ne peut
   donc pas contraindre .invoice_total a une colonne etroite : elle est
   pleine largeur, et seules les cellules de total occupent la droite. */
.create_invoice_form .invoice_row.invoice_total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px) minmax(130px, auto);
  gap: 0;
  width: 100%;
  margin-top: var(--sa-3);
  padding: 0;
  border-bottom: 0;
}

/* Acompte et solde se lisent avant le total, quel que soit l'ordre
   du balisage : placement explicite en premiere ligne. */
.create_invoice_form .invoice_total .deposit_show_wrapper {
  grid-row: 1;
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  gap: var(--sa-1) var(--sa-2);
  padding: 0 var(--sa-2) var(--sa-2) var(--sa-2);
}

.create_invoice_form .invoice_total .deposit_show_wrapper br {
  display: none;
}

.create_invoice_form .invoice_total .deposit_show_wrapper .inv_legend {
  color: var(--sa-muted);
  font-weight: 500;
}

.create_invoice_form .inv_depozit {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  color: var(--sa-marine);
}

/* La ligne de total forme un aplat marine continu : les deux cellules
   portent le meme fond et la gouttiere est nulle. */
.create_invoice_form .invoice_total .inv_legend_total,
.create_invoice_form .invoice_total #total_amm {
  grid-row: 2;
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  padding: var(--sa-2);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.create_invoice_form .invoice_total .inv_legend_total,
.create_invoice_form .invoice_total .inv_legend_total strong {
  grid-column: 2;
  font-family: var(--sa-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sa-chaux);
}

.create_invoice_form .invoice_total #total_amm {
  grid-column: 3;
  font-family: var(--sa-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   7. Revenu proprietaire
   Information interne : ce n'est pas ce que paie le client.
   --------------------------------------------------------------- */

.create_invoice_form .invoice_row.invoice_totalx {
  grid-row: 3;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, auto);
  gap: var(--sa-1) var(--sa-2);
  clear: both;
  width: auto;
  margin-top: var(--sa-4);
  padding: var(--sa-3);
  background-color: var(--sa-chaux);
  border: 1px solid var(--sa-line);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.create_invoice_form .invoice_totalx > .inv_legend,
.create_invoice_form .invoice_totalx > .inv_legend strong {
  font-family: var(--sa-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sa-marine);
}

.create_invoice_form .invoice_totalx #youearned,
.create_invoice_form .invoice_totalx #youearned strong {
  font-family: var(--sa-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
  color: var(--sa-lagune);
}

.create_invoice_form .invoice_explantions {
  grid-column: 1 / -1;
  max-width: 62ch;
  margin-top: var(--sa-1);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sa-muted);
}

.create_invoice_form .invoice_totalx .total_inv_span {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  gap: var(--sa-1) var(--sa-2);
  margin-top: var(--sa-2);
  padding-top: var(--sa-2);
  border-top: 1px solid var(--sa-line);
}

/* Le theme insere un <div style="width:100%"> pour forcer un retour a
   la ligne : la grille s'en charge. */
.create_invoice_form .invoice_totalx .total_inv_span > div[style] {
  display: none;
}

.create_invoice_form .invoice_totalx .total_inv_span .inv_legend {
  color: var(--sa-muted);
  font-weight: 500;
}

/* Le theme genere ici des id contenant un espace
   (id="inv_depozit show_invoice_service_fee") : selection par mot. */
.create_invoice_form [id~="show_invoice_service_fee"],
.create_invoice_form [id~="show_invoice_taxes"],
.create_invoice_form [id~="inv_depozit"],
.create_invoice_form [id~="inv_balance"] {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  color: var(--sa-marine);
}

/* ---------------------------------------------------------------
   8. Pied de document
   --------------------------------------------------------------- */

.create_invoice_form .sa-invoice-foot {
  padding: var(--sa-3) var(--sa-pad) var(--sa-pad) var(--sa-pad);
  border-top: 1px solid var(--sa-line);
}

.create_invoice_form .sa-thanks {
  margin: 0 0 var(--sa-3) 0;
  font-family: var(--sa-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sa-marine);
}

.create_invoice_form .sa-foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sa-3) var(--sa-4);
}

.create_invoice_form .sa-foot-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.create_invoice_form .sa-foot-heading {
  margin-bottom: var(--sa-1);
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sa-marine);
}

.create_invoice_form .sa-foot-line {
  font-size: 16px;
  line-height: 1.45;
  color: var(--sa-muted);
}

.create_invoice_form .sa-legal {
  margin-top: var(--sa-3);
  padding-top: var(--sa-2);
  border-top: 1px solid var(--sa-line);
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sa-muted);
}

/* ---------------------------------------------------------------
   9. Repli mobile
   --------------------------------------------------------------- */

@media (max-width: 720px) {
  .create_invoice_form {
    --sa-pad: var(--sa-3);
  }

  .create_invoice_form .sa-invoice-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .create_invoice_form .sa-invoice-meta {
    align-items: flex-start;
    text-align: left;
  }

  .create_invoice_form .sa-wordmark {
    font-size: 32px;
  }

  .create_invoice_form .invoice_data {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sa-2);
  }

  .create_invoice_form .invoice_date_renter_name_wrapper,
  .create_invoice_form .invoice_date_renter_email_wrapper,
  .create_invoice_form .invoice_date_renter_phone_wrapper,
  .create_invoice_form .show_invoice_period,
  .create_invoice_form .show_invoice_no_nights,
  .create_invoice_form .show_invoice_guests,
  .create_invoice_form .show_invoice_price_per_night,
  .create_invoice_form .show_invoice_price_per_quest,
  .create_invoice_form .invoice_date_period_wrapper,
  .create_invoice_form .invoice_date_nights_wrapper,
  .create_invoice_form .invoice_date_guest_wrapper,
  .create_invoice_form .invoice_date_label_wrapper,
  .create_invoice_form .invoice_date_price_guest_wrapper,
  .create_invoice_form .invoice_date_property_name_wrapper,
  .create_invoice_form .price_custom_explained {
    grid-column: 1;
    text-align: left;
  }

  .create_invoice_form .invoice_row {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  }

  .create_invoice_form .inv_exp {
    grid-column: 1 / -1;
  }

  .create_invoice_form .invoice_row.header_legend .inv_exp {
    display: none;
  }

  .create_invoice_form .invoice_row.invoice_total {
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  }

  .create_invoice_form .invoice_total .deposit_show_wrapper {
    grid-column: 1 / -1;
  }

  .create_invoice_form .invoice_total .inv_legend_total {
    grid-column: 1;
  }

  .create_invoice_form .invoice_total #total_amm {
    grid-column: 2;
  }
}

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

/* ---------------------------------------------------------------
   9 bis. Formulaire de creation de facture

   Ce n'est pas le document final mais l'ecran de saisie : pas de
   lettrage d'en-tete, mais la meme charte.
   --------------------------------------------------------------- */

.create_invoice_form > h3 {
  margin: 0 0 var(--sa-3) 0;
  padding: 0;
  font-family: var(--sa-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sa-marine);
}

.create_invoice_form h4,
.create_invoice_form label {
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--sa-marine);
  margin-bottom: var(--sa-1);
}

.create_invoice_form input[type="text"],
.create_invoice_form input[type="password"],
.create_invoice_form input[type="email"],
.create_invoice_form input[type="url"],
.create_invoice_form input[type="number"],
.create_invoice_form textarea {
  width: 100%;
  max-width: 340px;
  margin: 0 0 var(--sa-2) 0;
  padding: 10px var(--sa-2);
  font-family: var(--sa-sans);
  font-size: 16px;
  color: var(--sa-marine);
  background-color: var(--sa-surface);
  border: 1px solid var(--sa-line);
  border-radius: 0;
  box-shadow: none;
}

.create_invoice_form input::placeholder,
.create_invoice_form textarea::placeholder {
  color: var(--sa-muted);
  opacity: 1;
}

.create_invoice_form input:focus,
.create_invoice_form textarea:focus {
  border-color: var(--sa-marine);
  outline: 2px solid var(--sa-marine);
  outline-offset: 0;
  box-shadow: none;
}

/* Dans le tableau de bord la feuille occupe la largeur de la ligne ;
   la largeur de lecture de 780px ne vaut que pour l'impression. */
.is_dashboard .create_invoice_form {
  max-width: none;
}

/* Le formulaire de creation ne nomme pas son libelle de total
   inv_legend_total : on vise l'enfant direct pour couvrir les deux cas. */
.create_invoice_form .invoice_row.invoice_total:not(.total_invoice_for_payment) > .inv_legend {
  grid-row: 2;
  grid-column: 2;
  padding: var(--sa-2);
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  font-family: var(--sa-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.create_invoice_form .invoice_row.invoice_total:not(.total_invoice_for_payment) > .inv_legend strong {
  color: var(--sa-chaux);
  font-weight: 600;
}

@media (max-width: 720px) {
  .create_invoice_form .invoice_row.invoice_total > .inv_legend {
    grid-column: 1;
  }
}

/* Reponse affichee quand la reservation n'a pas encore de facture. */
.create_invoice_form.sa-invoice-empty .sa-empty-title {
  margin: 0 0 var(--sa-1) 0;
  font-family: var(--sa-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sa-marine);
}

.create_invoice_form.sa-invoice-empty .sa-empty-text {
  margin: 0;
  max-width: 62ch;
  font-family: var(--sa-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sa-muted);
}

/* ---------------------------------------------------------------
   9 ter. Variante « payer la facture » (page Demandes recues)

   Le gestionnaire de paiement sort une structure differente : trois
   couples libelle/montant dans le MEME .invoice_total, separes par des
   balises </br> invalides que le navigateur transforme en <br>. Sans
   placement explicite, les trois libelles se superposent dans la meme
   cellule et les <br> comptent comme des cellules parasites.
   --------------------------------------------------------------- */

.create_invoice_form .invoice_row.total_invoice_for_payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px) minmax(140px, auto);
  gap: 0;
  width: 100%;
  margin-top: var(--sa-3);
  padding: 0;
  border-bottom: 0;
}

.create_invoice_form .invoice_row.total_invoice_for_payment br {
  display: none;
}

.create_invoice_form .invoice_reseration_fee_req {
  grid-row: 1;
  grid-column: 2;
  padding: 0 var(--sa-2) var(--sa-1) var(--sa-2);
  color: var(--sa-muted);
  font-weight: 500;
}

.create_invoice_form .total_invoice_for_payment .depozit_show {
  grid-row: 1;
  grid-column: 3;
  padding: 0 var(--sa-2) var(--sa-1) 0;
}

.create_invoice_form .invoice_balance_owed {
  grid-row: 2;
  grid-column: 2;
  padding: 0 var(--sa-2) var(--sa-2) var(--sa-2);
  color: var(--sa-muted);
  font-weight: 500;
}

.create_invoice_form .total_invoice_for_payment .balance_show {
  grid-row: 2;
  grid-column: 3;
  padding: 0 var(--sa-2) var(--sa-2) 0;
}

/* Ligne de total : aplat marine continu sur les deux cellules. */
.create_invoice_form .total_invoice_for_payment > .inv_legend:first-child,
.create_invoice_form .total_invoice_for_payment > #total_amm {
  grid-row: 3;
  padding: var(--sa-2);
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.create_invoice_form .total_invoice_for_payment > .inv_legend:first-child {
  grid-column: 2;
  font-family: var(--sa-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
}

.create_invoice_form .total_invoice_for_payment > .inv_legend:first-child strong {
  color: var(--sa-chaux);
  font-weight: 600;
}

.create_invoice_form .total_invoice_for_payment > #total_amm {
  grid-column: 3;
  font-family: var(--sa-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}

/* Mentions de paiement et bouton de reglement. */
.create_invoice_form .invoice_pay_status_note {
  max-width: 62ch;
  margin-top: var(--sa-2);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sa-muted);
}

.create_invoice_form .pay_notice_booking {
  display: block;
  margin: var(--sa-3) 0 var(--sa-1) 0;
  font-family: var(--sa-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sa-marine);
}

.create_invoice_form .woo_pay,
.create_invoice_form .woo_pay_submit,
.is_dashboard .woo_pay,
.is_dashboard .woo_pay_submit {
  display: inline-block;
  margin-top: var(--sa-1);
  padding: 12px var(--sa-3);
  background-color: var(--sa-laterite);
  color: var(--sa-chaux);
  border: 0;
  border-radius: 0;
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms linear;
}

.create_invoice_form .woo_pay:hover,
.create_invoice_form .woo_pay_submit:hover,
.is_dashboard .woo_pay:hover,
.is_dashboard .woo_pay_submit:hover {
  background-color: #7E3A19;
  color: var(--sa-chaux);
}

@media (max-width: 720px) {
  .create_invoice_form .invoice_row.total_invoice_for_payment {
    grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  }

  .create_invoice_form .invoice_reseration_fee_req,
  .create_invoice_form .invoice_balance_owed,
  .create_invoice_form .total_invoice_for_payment > .inv_legend:first-child {
    grid-column: 1;
  }

  .create_invoice_form .total_invoice_for_payment .depozit_show,
  .create_invoice_form .total_invoice_for_payment .balance_show,
  .create_invoice_form .total_invoice_for_payment > #total_amm {
    grid-column: 2;
  }
}

/* ---------------------------------------------------------------
   9 quater. Neutralisation des largeurs de admin.css

   Le theme charge css/admin.css sur le tableau de bord. Cette feuille
   impose .invoice_total .inv_legend.inv_legend_total { width:100px } et
   .inv_data { width:100px }. Sa specificite depassait celle de la remise
   a plat : le libelle « A payer » se repliait sur deux lignes dans un
   pave de 100px et le montant etait tronque.
   --------------------------------------------------------------- */

.create_invoice_form .invoice_total .inv_legend,
.create_invoice_form .invoice_total .inv_legend.inv_legend_total,
.create_invoice_form .invoice_total .inv_data,
.create_invoice_form .invoice_total .inv_exp,
.create_invoice_form .invoice_total .inv_depozit,
.create_invoice_form .invoice_totalx .inv_legend,
.create_invoice_form .invoice_totalx .inv_data,
.create_invoice_form .total_inv_span .inv_legend {
  width: auto;
  min-width: 0;
  max-width: none;
  float: none;
}

/* Le libelle du total ne doit jamais se replier. */
.create_invoice_form .invoice_total .inv_legend_total,
.create_invoice_form .total_invoice_for_payment > .inv_legend:first-child,
.create_invoice_form .invoice_totalx > .inv_legend {
  white-space: nowrap;
}

/* Le bouton d'impression est en position absolue en haut a droite :
   la premiere ligne de la colonne de droite doit lui laisser la place. */
.create_invoice_form .show_invoice_period {
  padding-right: 56px;
}

/* ---------------------------------------------------------------
   14. Bloc de total : passage du gabarit de grille au flux flexible

   Les pistes de grille a largeur fixe rognaient le montant : « 1 440 0 »
   au lieu de « 1 440 000 F CFA », et le libelle passait a la ligne
   (« À / payer »). En flux flexible, chaque bloc prend la largeur de son
   contenu : un montant plus long ne peut plus etre coupe.
   --------------------------------------------------------------- */

.create_invoice_form .invoice_row.invoice_total:not(.total_invoice_for_payment) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin-top: var(--sa-3);
  padding: 0;
  border-bottom: 0;
}

.create_invoice_form .invoice_total:not(.total_invoice_for_payment) .deposit_show_wrapper {
  order: 1;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sa-1) var(--sa-3);
  padding: 0 var(--sa-2) var(--sa-2) var(--sa-2);
}

.create_invoice_form .invoice_total:not(.total_invoice_for_payment) > .inv_legend {
  order: 2;
  flex: 0 0 auto;
  white-space: nowrap;
}

.create_invoice_form .invoice_total:not(.total_invoice_for_payment) > #total_amm {
  order: 3;
  flex: 0 0 auto;
  min-width: 160px;
  white-space: nowrap;
}

/* Le revenu proprietaire est une section a part entiere : pleine largeur,
   sous la ligne de total. */
.create_invoice_form .invoice_row.invoice_totalx {
  order: 4;
  width: 100%;
  flex: 0 0 100%;
}

.create_invoice_form .invoice_totalx > .inv_legend,
.create_invoice_form .invoice_totalx > .inv_legend strong {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .create_invoice_form .invoice_row.invoice_total:not(.total_invoice_for_payment) {
    justify-content: space-between;
  }

  .create_invoice_form .invoice_total:not(.total_invoice_for_payment) .deposit_show_wrapper {
    max-width: none;
  }

  .create_invoice_form .invoice_total:not(.total_invoice_for_payment) > #total_amm {
    min-width: 0;
  }
}

/* Document injecte au milieu de la liste des factures : il doit se
   detacher du tableau, pas se confondre avec une ligne. */
.is_dashboard #container-invoices .create_invoice_form,
.is_dashboard .invoices-wrapper .create_invoice_form {
  margin: var(--sa-3) 0;
  border: 1px solid var(--sa-line);
}

/* ---------------------------------------------------------------
   9 quinquies. Apparition du document

   Le script du theme injecte le document dans la page apres coup et le
   contenu se decale d'un bloc. Une entree de 180 ms rend l'insertion
   lisible : on voit d'ou sort le document. L'animation se declenche a
   l'insertion, sans une ligne de JavaScript ajoutee au theme.
   --------------------------------------------------------------- */

/* Le document arrive de la ligne cliquee : il monte et se decouvre. */
@keyframes sa-document-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}

/* Le bandeau de titre se trace, puis le corps se devoile. */
@keyframes sa-head-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.is_dashboard .create_invoice_form .sa-invoice-head {
  position: relative;
}

.is_dashboard .create_invoice_form .sa-invoice-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background-color: var(--sa-laterite);
  transform-origin: left center;
  animation: sa-head-rule 520ms 160ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Survol des lignes de cout : la ligne se detache sur blanc chaux. */
.is_dashboard .create_invoice_form .invoice_row.invoice_content {
  transition: background-color 160ms linear;
}

.is_dashboard .create_invoice_form .invoice_row.invoice_content:hover {
  background-color: var(--sa-chaux);
}

.is_dashboard .create_invoice_form,
.is_dashboard .trip_details_wrapper {
  animation: sa-document-enter 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* La fenetre d'impression declenche print() au chargement : le document
   doit y etre opaque immediatement. */
body.print_body .create_invoice_form {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .is_dashboard .create_invoice_form,
  .is_dashboard .trip_details_wrapper,
  .create_invoice_form *,
  .create_invoice_form *::before,
  .create_invoice_form *::after {
    animation: none !important;
    transform: none !important;
  }
}

/* --- Le bouton d'impression se remplit depuis le bas ---------------- */
.create_invoice_form #print_invoice {
  background-image: linear-gradient(to top, var(--sa-marine) 0 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
  transition:
    background-size 300ms cubic-bezier(0.2, 0.7, 0.3, 1),
    color 160ms linear;
}

.create_invoice_form #print_invoice:hover,
.create_invoice_form #print_invoice:focus-visible {
  background-size: 100% 100%;
  color: var(--sa-chaux);
}

/* --- Les lignes de cout se revelent au defilement du document -------- */
@keyframes sa-cost-row {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .is_dashboard .create_invoice_form .invoice_row.invoice_content,
    .is_dashboard .create_invoice_form .invoice_data > span {
      animation: sa-cost-row linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}

/* ---------------------------------------------------------------
   10. Impression
   --------------------------------------------------------------- */


@page {
  size: A4;
  margin: 14mm;
}

body.print_body {
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}

body.print_body .create_invoice_form {
  max-width: none;
  margin: 0;
  border: 0;
}

/* ---------------------------------------------------------------
   11. Formulaire de creation de facture

   Ce n'est pas le document remis au client, c'est l'ecran de travail
   du proprietaire. Il ne recoit donc ni logo ni mention FACTURE : il
   est traite comme un formulaire, avec la meme grammaire visuelle.
   Le balisage differe de celui de la facture emise, d'ou les classes
   supplementaires ci-dessous.
   --------------------------------------------------------------- */

.create_invoice_form > h3 {
  order: 0;
  margin: 0;
  padding: var(--sa-3) var(--sa-pad);
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  font-family: var(--sa-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  border-radius: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Bloc d'ajout de frais et de remise. */
.create_invoice_form .invoice_actions {
  order: 4;
  padding: var(--sa-3) var(--sa-pad) var(--sa-pad) var(--sa-pad);
  border-top: 1px solid var(--sa-line);
  background-color: var(--sa-chaux);
}

.create_invoice_form .invoice_actions h4 {
  margin: 0 0 var(--sa-1) 0;
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sa-marine);
}

.create_invoice_form .invoice_actions h4 + input {
  margin-top: 0;
}

.create_invoice_form .invoice_actions input[type="text"] {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 0 var(--sa-1) 0;
  padding: 10px var(--sa-2);
  font-family: var(--sa-sans);
  font-size: 16px;
  color: var(--sa-marine);
  background-color: var(--sa-surface);
  border: 1px solid var(--sa-line);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.create_invoice_form .invoice_actions input[type="text"]::placeholder {
  color: var(--sa-muted);
  opacity: 1;
}

.create_invoice_form .invoice_actions input[type="text"]:focus {
  border-color: var(--sa-marine);
  outline: 2px solid var(--sa-marine);
  outline-offset: 0;
  box-shadow: none;
}

.create_invoice_form .invoice_actions h4:not(:first-child) {
  margin-top: var(--sa-3);
}

/* Boutons du theme : verts et arrondis a l'origine. */
.create_invoice_form .action1_booking {
  display: inline-block;
  padding: 10px var(--sa-3);
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  font-family: var(--sa-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 120ms linear;
}

.create_invoice_form .action1_booking:hover,
.create_invoice_form .action1_booking:focus-visible {
  background-color: var(--sa-marine-hover);
  color: var(--sa-chaux);
}

/* Action principale de l'ecran : seul aplat laterite. */
.create_invoice_form #invoice_submit {
  order: 3;
  display: block;
  margin: 0 var(--sa-pad) var(--sa-3) var(--sa-pad);
  padding: 14px var(--sa-3);
  background-color: var(--sa-laterite);
}

.create_invoice_form #invoice_submit:hover,
.create_invoice_form #invoice_submit:focus-visible {
  background-color: #7E3A19;
}

/* Total du formulaire de creation : le libelle n'y porte pas la classe
   inv_legend_total de la facture emise. */
.create_invoice_form .invoice_total_generate_invoice > .inv_legend,
.create_invoice_form .invoice_total_generate_invoice > .inv_legend strong {
  font-family: var(--sa-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
}

.create_invoice_form .invoice_row.invoice_total.invoice_total_generate_invoice {
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px) minmax(130px, auto);
}

.create_invoice_form .invoice_total.invoice_total_generate_invoice > .inv_legend,
.create_invoice_form .invoice_total.invoice_total_generate_invoice > #total_amm {
  grid-row: 2;
  background-color: var(--sa-marine);
  color: var(--sa-chaux);
  padding: var(--sa-2);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.create_invoice_form .invoice_total.invoice_total_generate_invoice > .inv_legend,
.create_invoice_form .invoice_total.invoice_total_generate_invoice > .inv_legend strong {
  grid-column: 2;
  color: var(--sa-chaux);
}

.create_invoice_form .invoice_total.invoice_total_generate_invoice > #total_amm {
  grid-column: 3;
  font-family: var(--sa-mono);
  font-size: 20px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

/* Acompte et solde du formulaire de creation. */
.create_invoice_form .invoice_total.invoice_total_generate_invoice > .total_inv_span {
  grid-row: 1;
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  gap: var(--sa-1) var(--sa-2);
  margin: 0;
  padding: 0 var(--sa-2) var(--sa-2) var(--sa-2);
  font-size: 16px;
}

.create_invoice_form .invoice_total.invoice_total_generate_invoice > .total_inv_span > div[style] {
  display: none;
}

.create_invoice_form .invoice_reseration_fee_req,
.create_invoice_form .invoice_balance_owed,
.create_invoice_form .invoice_legend_service_fee,
.create_invoice_form .invoice_legend_taxes {
  font-family: var(--sa-sans);
  font-weight: 500;
  color: var(--sa-muted);
}

.create_invoice_form #inv_depozit,
.create_invoice_form #inv_balance,
.create_invoice_form #inv_service_fee,
.create_invoice_form #inv_taxes,
.create_invoice_form .invoice_legend_service_fee_value,
.create_invoice_form .invoice_legend_taxes_value {
  font-family: var(--sa-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  color: var(--sa-marine);
}

@media (max-width: 720px) {
  .create_invoice_form .invoice_row.invoice_total.invoice_total_generate_invoice {
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  }

  .create_invoice_form .invoice_total.invoice_total_generate_invoice > .total_inv_span {
    grid-column: 1 / -1;
  }

  .create_invoice_form .invoice_total.invoice_total_generate_invoice > .inv_legend {
    grid-column: 1;
  }

  .create_invoice_form .invoice_total.invoice_total_generate_invoice > #total_amm {
    grid-column: 2;
  }
}

@media print {
  .create_invoice_form,
  .create_invoice_form *,
  .create_invoice_form *::before,
  .create_invoice_form *::after {
    animation: none !important;
    animation-timeline: auto !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .create_invoice_form {
    max-width: none;
    margin: 0;
    border: 0;
  }
  .create_invoice_form #print_invoice {
    display: none;
  }

  /* Le revenu proprietaire ne figure pas sur l'exemplaire remis au client. */
  .create_invoice_form .invoice_row.invoice_totalx {
    display: none;
  }

  .create_invoice_form .invoice_row,
  .create_invoice_form .sa-invoice-head,
  .create_invoice_form .sa-invoice-foot {
    break-inside: avoid;
  }

  .create_invoice_form a {
    border-bottom: 0;
  }

  .create_invoice_form .invoice_actions,
  .create_invoice_form #invoice_submit {
    display: none;
  }
}