/* ==========================================================================
   MasterSol UI (scoped) — compatible Divi
   Objectif : unifier l'esthétique de l'application sans impacter le reste du site.
   ========================================================================== */

/* Design tokens (scopés) */
.mastersol-app{
  --ms-primary: #014a97;
  --ms-primary-hover: #013a75;
  --ms-link: #014a97;

  --ms-text: #1f2937;
  --ms-muted: #6b7280;

  --ms-border: #d1d5db;
  --ms-bg: #ffffff;
  --ms-bg-soft: #f9fafb;
  --ms-addon-bg: var(--ms-bg-soft);

  --ms-radius: 6px;
  --ms-gap: 24px;

  --ms-font-size: 16px;

  /* Important : pas de padding "global" autour de l'app */
  padding: 0;
  margin: 0;
}

/* Typographie & liens */
.mastersol-app .mastersol-dashboard,
.mastersol-app .mastersol-form-container{
  font-size: var(--ms-font-size);
  color: var(--ms-text);
}

.mastersol-app .mastersol-dashboard a,
.mastersol-app .mastersol-form-container a{
  color: var(--ms-link);
  text-decoration: none;
}

.mastersol-app .mastersol-dashboard a:hover,
.mastersol-app .mastersol-form-container a:hover{
  text-decoration: underline;
}

/* Champs (inputs / selects) */
.mastersol-app .mastersol-form-container .form-control,
.mastersol-app .mastersol-form-container .form-select{
  border-radius: var(--ms-radius);
  border-color: var(--ms-border);
  background: var(--ms-bg);
  color: var(--ms-text);
}

.mastersol-app .mastersol-form-container .form-control:focus,
.mastersol-app .mastersol-form-container .form-select:focus{
  border-color: var(--ms-primary);
}

/* INPUT GROUP (icône dans le champ, style bootstrap-like) */
.mastersol-app .mastersol-form-container .input-group{
  display: flex;
  align-items: stretch;
  width: 100%;
}

.mastersol-app .mastersol-form-container .input-group-text{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  background-color: var(--ms-bg-soft);
  border: 1px solid var(--ms-border);
  border-right: 0;
  color: var(--ms-muted);
  white-space: nowrap;
  border-radius: var(--ms-radius) 0 0 var(--ms-radius);
}

.mastersol-app .mastersol-form-container .input-group > .form-control,
.mastersol-app .mastersol-form-container .input-group > .form-select{
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border: 1px solid var(--ms-border);
  border-left: 0;
  border-radius: 0 var(--ms-radius) var(--ms-radius) 0;
}

/* Boutons */
.mastersol-app .mastersol-form-container .btn,
.mastersol-app .mastersol-dashboard .btn{
  border-radius: var(--ms-radius);
}

.mastersol-app .mastersol-form-container .btn-primary,
.mastersol-app .mastersol-dashboard .btn-primary{
  background-color: var(--ms-primary);
  border-color: var(--ms-primary);
  padding: 8px 12px;
}

.mastersol-app .mastersol-form-container .btn-primary:hover,
.mastersol-app .mastersol-dashboard .btn-primary:hover{
  background-color: var(--ms-primary-hover);
  border-color: var(--ms-primary-hover);
}

.mastersol-app .mastersol-form-container .btn-outline-primary,
.mastersol-app .mastersol-dashboard .btn-outline-primary{
  color: var(--ms-primary);
  border-color: var(--ms-primary);
}

.mastersol-app .mastersol-form-container .btn-outline-primary:hover,
.mastersol-app .mastersol-dashboard .btn-outline-primary:hover{
  background-color: var(--ms-primary);
  color: #fff;
}

/* Layout formulaires : spacing (sans réécrire la grille) */
.mastersol-app .mastersol-rf-form.row,
.mastersol-app .mastersol-sr-form.row{
  column-gap: var(--ms-gap);
  row-gap: var(--ms-gap);
}

/* Actions de formulaire : aligner les boutons sur une ligne (desktop) */
.mastersol-app .mastersol-form-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mastersol-app .mastersol-form-actions .btn{
  flex: 0 0 auto;
}
@media (min-width: 992px){
  .mastersol-app .mastersol-form-actions{ flex-wrap: nowrap; }
}

/* Dashboard */
.mastersol-app .mastersol-dashboard-bloc{
  background: var(--ms-bg);
  border-radius: var(--ms-radius);
}

.mastersol-app .mastersol-table-wrapper .pagination .active .page-link{
  background-color: var(--ms-primary);
  border-color: var(--ms-primary);
}

/* Pagination dashboard : boutons plus grands (UX mobile) */
.mastersol-app .mastersol-table-wrapper .pagination .page-link{
  padding: .65rem .95rem;
  font-size: 1rem;
  line-height: 1.2;
}

/* Affichage RF/SR (single) */
.mastersol-app .mastersol-record,
.mastersol-app .mastersol-single,
.mastersol-app .mastersol-rf-single,
.mastersol-app .mastersol-sr-single{
  font-family: inherit;
  color: var(--ms-text);
}

/* Bouton imprimer : cohérent avec les autres CTA */
.mastersol-app .mastersol-print-btn{
  margin: 10px 0 !important;
  background-color: var(--ms-primary) !important;
  border-color: var(--ms-primary) !important;
  color: #fff !important;
}
.mastersol-app .mastersol-print-btn:hover{
  background-color: var(--ms-primary-hover) !important;
  border-color: var(--ms-primary-hover) !important;
  color: #fff !important;
}

.mastersol-app .mastersol-record .card,
.mastersol-app .mastersol-single .card{
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  box-shadow: none;
}

.mastersol-app .mastersol-record .ms-row,
.mastersol-app .mastersol-single .ms-row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--ms-border);
}
.mastersol-app .mastersol-record .ms-row:last-child,
.mastersol-app .mastersol-single .ms-row:last-child{
  border-bottom: 0;
}

.mastersol-app .mastersol-record .ms-label,
.mastersol-app .mastersol-single .ms-label{
  min-width: 180px;
  color: var(--ms-muted);
  font-weight: 600;
}

.mastersol-app .mastersol-record .ms-value,
.mastersol-app .mastersol-single .ms-value{
  flex: 1;
  color: var(--ms-text);
}

.mastersol-app .mastersol-record .ms-ico,
.mastersol-app .mastersol-single .ms-ico{
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ms-addon-bg);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  flex: 0 0 34px;
}

@media (max-width: 767px){
  .mastersol-app .mastersol-record .ms-row,
  .mastersol-app .mastersol-single .ms-row{
    flex-direction: column;
  }
  .mastersol-app .mastersol-record .ms-label,
  .mastersol-app .mastersol-single .ms-label{
    min-width: auto;
  }
}

/* PJ : lien en “bouton” */
.mastersol-app .mastersol-sr-form a.mastersol-attachment-link,
.mastersol-app .mastersol-record a.mastersol-attachment-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--ms-primary);
  background: var(--ms-primary);
  color: #fff !important;
  text-decoration: none;
  border-radius: var(--ms-radius);
}

/* Classes de personnalisation “commercial” */
.mastersol-app .mastersol-commercial-title-text{ font-weight: 600; }
.mastersol-app .mastersol-commercial-name-text{
  font-weight: 600;
  font-size: 20px;
  color: var(--ms-primary);
  padding-bottom: 10px;
}
.mastersol-app .mastersol-commercial-links a{}

/* Alertes (Bootstrap-like) */
.mastersol-app .alert{
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--ms-radius);
  margin-bottom: 1rem;
}
.mastersol-app .alert-danger{
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.mastersol-app .is-invalid{
  border-color: #dc3545 !important;
}

/* ============================================================
   VUES (lecture seule) RF/SR — réutilise la grammaire visuelle des formulaires
   ============================================================ */

.mastersol-app .mastersol-record-view .mastersol-readonly{
  background-color: #fff;
}

.mastersol-app .mastersol-record-view .form-control.mastersol-readonly{
  cursor: default;
}

/* ============================================================
   RF FORM — LAYOUT (2 colonnes desktop) + icônes
   ============================================================ */

/* Retire toute ombre éventuelle du conteneur formulaire */
.mastersol-app .mastersol-form-container{
  box-shadow: none !important;
}

/* Passe le formulaire RF en grid pour un alignement parfait */
.mastersol-app .mastersol-form-container .mastersol-rf-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Neutralise les contraintes bootstrap (row/col) sans toucher au HTML du thème */
.mastersol-app .mastersol-form-container .mastersol-rf-form.row{
  margin: 0;
}
.mastersol-app .mastersol-form-container .mastersol-rf-form > .ms-field{
  padding: 0;
}

/* 2 colonnes dès le desktop */
@media (min-width: 768px){
  .mastersol-app .mastersol-form-container .mastersol-rf-form{
    grid-template-columns: 1fr 1fr;
  }
  .mastersol-app .mastersol-form-container .mastersol-rf-form > .ms-span-2{
    grid-column: 1 / -1;
  }
}

/* Labels */
.mastersol-app .mastersol-form-container .mastersol-rf-form .form-label{
  margin-bottom: .35rem;
}

/* Groupe radio : intégré dans un input-group (pour garder la zone icône grise) */
.mastersol-app .mastersol-form-container .mastersol-rf-form .mastersol-radio-group{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  background: var(--ms-bg);
}
.mastersol-app .mastersol-form-container .mastersol-rf-form .mastersol-radio-group .form-check{
  margin-bottom: 0;
}

/* Radio : garde les options côte à côte et alignées */
.mastersol-app .mastersol-form-container .mastersol-rf-form .form-check.ms-inline{
  margin-right: 1rem;
}

/* ============================================================
   SR FORM — LAYOUT (2 colonnes desktop) + icônes
   ============================================================ */

.mastersol-app .mastersol-form-container .mastersol-sr-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.mastersol-app .mastersol-form-container .mastersol-sr-form.row{
  margin: 0;
}
.mastersol-app .mastersol-form-container .mastersol-sr-form > .ms-field{
  padding: 0;
}

@media (min-width: 768px){
  .mastersol-app .mastersol-form-container .mastersol-sr-form{
    grid-template-columns: 1fr 1fr;
  }
  .mastersol-app .mastersol-form-container .mastersol-sr-form > .ms-span-2{
    grid-column: 1 / -1;
  }
}

.mastersol-app .mastersol-form-container .mastersol-sr-form .form-label{
  margin-bottom: .35rem;
}