/* =========================================================
   MSI — Dashboard étudiant (SCOPED)
   Tout est encapsulé sous .msi-dashboard pour ne pas impacter
   le reste du site vitrine.
   ========================================================= */


/* ---------------------------------------------------------
   0) Base dashboard
   --------------------------------------------------------- */

.msi-dashboard{
  margin-bottom: 0 !important;
  padding-bottom: 32px;
}

.msi-dashboard a{
  text-decoration: none !important;
  color: inherit;
}


/* ---------------------------------------------------------
   1) Cartes dashboard
   Profil / Documents / Paiement / Notifications
   --------------------------------------------------------- */

.msi-dashboard .msi-card{
  background: #fff;
  border: 1px solid rgba(20,30,50,.10);
  border-radius: 16px;
  padding: 22px 28px;
  min-height: 120px;
  box-shadow: 0 10px 26px rgba(20,30,50,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.msi-dashboard .msi-card:hover{
  transform: translateY(-3px);
  border-color: rgba(11,31,58,.22);
  box-shadow: 0 14px 32px rgba(20,30,50,.10);
}

.msi-dashboard .msi-card-link{
  display: block;
}

.msi-dashboard .msi-card-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.msi-dashboard .msi-card-title{
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px 0;
}

.msi-dashboard .msi-card-desc{
  font-size: 14px;
  opacity: .75;
  margin: 0;
}


/* ---------------------------------------------------------
   2) Badges dashboard
   --------------------------------------------------------- */

.msi-dashboard .msi-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(20,30,50,.12);
  background: rgba(20,30,50,.03);
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.msi-dashboard .msi-card:hover .msi-badge{
  transform: translateX(2px);
  background: rgba(11,31,58,.06);
  border-color: rgba(11,31,58,.18);
}


/* Notification point rouge*/

.msi-card-notifications{
  position:relative;
}

.msi-notif-dot{
  position:absolute;
  top:14px;
  right:14px;
  width:10px;
  height:10px;
  background:#dc3545;
  border-radius:50%;
  box-shadow:0 0 0 3px #fff;
}

/* ---------------------------------------------------------
   3) Pipeline phases
   Nouvelle logique :
   - locked
   - in_progress
   - approved
   - rejected
   --------------------------------------------------------- */

.msi-dashboard .msi-pipeline-wrap{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 22px auto;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid rgba(20,30,50,.10);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(20,30,50,.06);
}

.msi-dashboard .msi-pipeline{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.msi-dashboard .msi-pipeline::-webkit-scrollbar{
  height: 6px;
}

.msi-dashboard .msi-pipeline::-webkit-scrollbar-thumb{
  background: rgba(20,30,50,.15);
  border-radius: 999px;
}

.msi-dashboard .msi-step{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  border: 1px solid rgba(20,30,50,.12);
  background: #f4f6f9;
  color: #0b1f3a;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

/* Phase verrouillée */
.msi-dashboard .msi-step--locked{
  background: #f4f6f9;
  color: #7a8594;
  border-color: rgba(20,30,50,.10);
  opacity: .65;
}

/* Phase en cours */
.msi-dashboard .msi-step--in_progress{
  background: #ffb020;
  color: #fff;
  border-color: #ffb020;
  opacity: 1;
}

/* Phase validée */
.msi-dashboard .msi-step--approved{
  background: #1fbf75;
  color: #fff;
  border-color: #1fbf75;
  opacity: 1;
}

/* Phase bloquée / refusée */
.msi-dashboard .msi-step--rejected{
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
  opacity: 1;
}


/* ---------------------------------------------------------
   4) Badges documents
   --------------------------------------------------------- */

.msi-dashboard .msi-doc-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(20,30,50,.12);
  background: rgba(20,30,50,.04);
  color: #0b1f3a;
}

.msi-dashboard .msi-doc-badge--pending{
  background: rgba(108,117,125,.10);
  border-color: rgba(108,117,125,.25);
  color: #495057;
}

.msi-dashboard .msi-doc-badge--approved{
  background: rgba(31,191,117,.12);
  border-color: rgba(31,191,117,.30);
  color: #0f6b43;
}

.msi-dashboard .msi-doc-badge--rejected{
  background: rgba(220,53,69,.10);
  border-color: rgba(220,53,69,.28);
  color: #b02a37;
}


/* ---------------------------------------------------------
   5) Responsive
   --------------------------------------------------------- */

@media (max-width: 767px){

  .msi-dashboard .msi-card{
    padding: 16px 16px;
    min-height: auto;
    border-radius: 14px;
  }

  .msi-dashboard .msi-card-title{
    font-size: 16px;
  }

  .msi-dashboard .msi-card-desc{
    font-size: 13px;
  }

  .msi-dashboard .msi-pipeline-wrap{
    padding: 14px 14px;
    border-radius: 14px;
  }

  .msi-dashboard .msi-step{
    font-size: 11px;
    padding: 9px 12px;
  }
}

/* =========================================================
   MSI — Documents page
   ========================================================= */

.msi-doc-replace-box,
.msi-doc-upload-box,
.msi-doc-list-box{
  background:#fff;
  border:1px solid rgba(20,30,50,.10);
  border-radius:18px;
  padding:22px 24px;
  box-shadow:0 10px 26px rgba(20,30,50,.06);
  margin-bottom:20px;
}

.msi-doc-replace-box{
  border-color:rgba(220,53,69,.18);
  background:linear-gradient(180deg, rgba(220,53,69,.04), #fff 55%);
}

.msi-doc-replace-eyebrow{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#b02a37;
  margin-bottom:8px;
}

.msi-doc-replace-title,
.msi-doc-section-title{
  font-size:22px;
  font-weight:700;
  color:#0b1f3a;
  margin:0 0 6px 0;
}

.msi-doc-replace-desc,
.msi-doc-section-desc{
  font-size:14px;
  color:#5b6573;
}

.msi-doc-success{
  margin-top:14px;
  margin-bottom:4px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(31,191,117,.10);
  border:1px solid rgba(31,191,117,.22);
  color:#0f6b43;
  font-size:14px;
}

.msi-doc-replace-form,
.msi-doc-upload-form{
  margin-top:16px;
}

.msi-doc-select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(20,30,50,.14);
  background:#fff;
  font-size:14px;
  margin-bottom:12px;
}

.msi-doc-upload-row,
.msi-doc-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.msi-doc-file-input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(20,30,50,.14);
  background:#fff;
}

.msi-doc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.msi-doc-btn:hover{
  transform:translateY(-1px);
}

.msi-doc-btn--primary{
  background:#0b1f3a;
  color:#fff !important;
  border:1px solid #0b1f3a;
  box-shadow:0 8px 18px rgba(11,31,58,.14);
}

.msi-doc-btn--ghost{
  background:#fff;
  color:#0b1f3a !important;
  border:1px solid rgba(20,30,50,.14);
}

.msi-doc-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:16px;
}

.msi-doc-card{
  border:1px solid rgba(20,30,50,.08);
  border-radius:16px;
  padding:16px 18px;
  background:#fff;
}

.msi-doc-card--rejected{
  border-color:rgba(220,53,69,.20);
}

.msi-doc-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.msi-doc-card-title{
  font-size:18px;
  font-weight:700;
  color:#0b1f3a;
}

.msi-doc-card-status{
  margin-top:8px;
}

.msi-doc-comment{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(220,53,69,.08);
  border:1px solid rgba(220,53,69,.18);
  font-size:14px;
}

.msi-doc-tip{
  padding-top:14px;
  font-size:13px;
  color:#6a7380;
}

@media (max-width: 767px){
  .msi-doc-replace-box,
  .msi-doc-upload-box,
  .msi-doc-list-box{
    padding:18px 16px;
    border-radius:16px;
  }

  .msi-doc-replace-title,
  .msi-doc-section-title{
    font-size:18px;
  }

  .msi-doc-card-top{
    flex-direction:column;
  }

  .msi-doc-upload-row,
  .msi-doc-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .msi-doc-btn{
    width:100%;
  }
}

/* =========================================================
   MSI — Admin dashboard
   ========================================================= */

.msi-admin-dashboard{
  width: 100%;
}

.msi-admin-summary{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.msi-admin-summary-card{
  min-width:180px;
  padding:18px 20px;
  border-radius:16px;
  color:#fff;
  box-shadow:0 10px 26px rgba(20,30,50,.08);
}

.msi-admin-summary-card--rejected{
  background:#dc3545;
}

.msi-admin-summary-card--progress{
  background:#ffb020;
}

.msi-admin-summary-card--approved{
  background:#1fbf75;
}

.msi-admin-summary-number{
  font-size:28px;
  font-weight:700;
  line-height:1;
}

.msi-admin-summary-label{
  font-size:14px;
  margin-top:8px;
  opacity:.95;
}

.msi-admin-table-wrap{
  width:100%;
  overflow-x:auto;
  background:#fff;
  border:1px solid rgba(20,30,50,.10);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(20,30,50,.06);
}

.msi-admin-table{
  width:100%;
  min-width:980px;
  border-collapse:collapse;
}

.msi-admin-table th,
.msi-admin-table td{
  padding:16px 18px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid rgba(20,30,50,.08);
}

.msi-admin-table th{
  font-size:13px;
  font-weight:700;
  color:#0b1f3a;
  background:rgba(20,30,50,.03);
}

.msi-admin-table tr:last-child td{
  border-bottom:none;
}

.msi-admin-student-name{
  font-weight:700;
  font-size:14px;
}

.msi-admin-student-email{
  font-size:13px;
  opacity:.7;
  margin-top:4px;
}

.msi-admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.msi-admin-phase{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid rgba(20,30,50,.12);
  white-space:nowrap;
}

.msi-admin-phase--locked{
  background:#f4f6f9;
  color:#7a8594;
  border-color:rgba(20,30,50,.10);
}

.msi-admin-phase--in_progress{
  background:#ffb020;
  color:#fff;
  border-color:#ffb020;
}

.msi-admin-phase--approved{
  background:#1fbf75;
  color:#fff;
  border-color:#1fbf75;
}

.msi-admin-phase--rejected{
  background:#dc3545;
  color:#fff;
  border-color:#dc3545;
}

/* Highlight lignes */
.msi-row-rejected{
  background:rgba(220,53,69,.06);
}

.msi-row-progress{
  background:rgba(255,176,32,.06);
}

@media (max-width: 767px){
  .msi-admin-summary-card{
    min-width:unset;
    width:100%;
  }
}

/* Compteurs cliquables */
.msi-admin-summary-card{
  border:none;
  cursor:pointer;
  text-align:left;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.msi-admin-summary-card:hover{
  transform:translateY(-2px);
}

.msi-admin-summary-card.is-active{
  box-shadow:0 0 0 3px rgba(11,31,58,.16), 0 10px 26px rgba(20,30,50,.08);
}

.msi-admin-summary-card--all{
  background:#0b1f3a;
  color:#fff;
}



/* =========================================================
   MSI — Admin fiche étudiant
   ========================================================= */

.msi-admin-student-detail{
  width:100%;
}

.msi-admin-phase-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.msi-admin-phase-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(20,30,50,.08);
}

.msi-admin-phase-item:last-child{
  border-bottom:none;
}

.msi-admin-phase-item-label{
  font-weight:600;
  color:#0b1f3a;
}

.msi-admin-docs-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.msi-admin-doc-item{
  border:1px solid rgba(20,30,50,.08);
  border-radius:14px;
  padding:14px 16px;
}

.msi-admin-doc-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.msi-admin-doc-title{
  font-weight:700;
  font-size:14px;
}

.msi-admin-doc-comment{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(220,53,69,.08);
  border:1px solid rgba(220,53,69,.18);
  font-size:13px;
}

@media (max-width: 767px){
  .msi-admin-doc-main{
    flex-direction:column;
  }

  .msi-admin-phase-item{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Infos étudiant */

.msi-admin-info-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 20px;
}

.msi-admin-info-label{
  font-size:12px;
  text-transform:uppercase;
  font-weight:600;
  color:#6a7380;
  margin-bottom:4px;
}

.msi-admin-info-value{
  font-size:14px;
  font-weight:600;
  color:#0b1f3a;
}

.msi-admin-info-notes{
  margin-top:6px;
  padding:12px;
  border-radius:10px;
  background:#f4f6f9;
  font-size:14px;
}

@media (max-width:767px){
  .msi-admin-info-grid{
    grid-template-columns:1fr;
  }
}

/* MSI — Profile completion */
   
.msi-profile-progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.msi-profile-progress-percent{
  font-size:34px;
  font-weight:700;
  line-height:1;
  color:#0b1f3a;
}

.msi-profile-progress-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid rgba(20,30,50,.12);
}

.msi-profile-progress-badge--low{
  background:rgba(220,53,69,.10);
  border-color:rgba(220,53,69,.22);
  color:#b02a37;
}

.msi-profile-progress-badge--medium{
  background:rgba(255,176,32,.12);
  border-color:rgba(255,176,32,.30);
  color:#9a6500;
}

.msi-profile-progress-badge--high{
  background:rgba(31,191,117,.12);
  border-color:rgba(31,191,117,.30);
  color:#0f6b43;
}

.msi-profile-progress-bar{
  width:100%;
  height:12px;
  border-radius:999px;
  background:#eef2f6;
  overflow:hidden;
}

.msi-profile-progress-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #0b1f3a 0%, #1fbf75 100%);
}

/* =========================================================
   MSI — Profil
   ========================================================= */

.msi-profile-form{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:20px;
}

.msi-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.msi-section-title{
  font-weight:700;
  font-size:16px;
  margin-bottom:6px;
}

.msi-profile input,
.msi-profile textarea{
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:14px;
}

.msi-profile textarea{
  min-height:100px;
}

.msi-success{
  background:#e6f9f0;
  color:#1f7a4d;
  padding:10px 14px;
  border-radius:10px;
  margin-top:10px;
}

.msi-btn-primary{
  background:#0b1f3a;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}

.msi-profile-form label{
  font-size:13px;
  font-weight:600;
  color:#0b1f3a;
  margin-top:4px;
  margin-bottom:-2px;
}

/* =========================================================
   MSI — Notifications
   ========================================================= */

.msi-notif-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.msi-notif-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(20,30,50,.08);
  background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}

.msi-notif-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(20,30,50,.06);
}

.msi-notif-resent .msi-notif-dot-inline{
  background:#0b1f3a;
}

.msi-notif-payment_unlocked .msi-notif-dot-inline{
  background:#1fbf75;
}

.msi-notif-date{
  font-size:12px;
  color:#9aa3af;
  white-space:nowrap;
  margin-left:auto;
}



/* Petit indicateur visuel */
.msi-notif-dot-inline{
  width:8px;
  height:8px;
  border-radius:50%;
  margin-top:6px;
  flex-shrink:0;
}

/* Couleurs selon type */
.msi-notif-approved .msi-notif-dot-inline{
  background:#1fbf75;
}

.msi-notif-rejected .msi-notif-dot-inline{
  background:#dc3545;
}

.msi-notif-content{
  flex:1;
}

.msi-notif-title{
  font-weight:600;
  font-size:14px;
  color:#0b1f3a;
  margin-bottom:4px;
}

.msi-notif-desc{
  font-size:13px;
  color:#6a7380;
}

/* état vide */
.msi-notif-empty{
  padding:16px;
  border-radius:14px;
  background:#f4f6f9;
  font-size:14px;
  color:#6a7380;
  text-align:center;
}

/* =========================================================
   MSI — Pipeline CRM V1 additions
   ========================================================= */

.msi-dashboard .msi-card-disabled,
.msi-card-disabled{
  opacity:.62;
  cursor:not-allowed;
}

.msi-dashboard .msi-step--in_progress{
  box-shadow:0 8px 18px rgba(255,176,32,.18);
}

.msi-admin-summary--pipeline{
  gap:10px;
}

.msi-admin-summary--pipeline .msi-admin-summary-card{
  min-width:138px;
  padding:14px 16px;
}

.msi-admin-summary-card--locked{
  background:#6a7380;
}

.msi-admin-summary-card--in_progress{
  background:#ffb020;
}

.msi-admin-pipeline-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.msi-admin-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 18px;
}

.msi-admin-pipeline-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  font-weight:700;
  color:#0b1f3a;
}

.msi-admin-pipeline-form select,
.msi-admin-pipeline-form input[type="date"],
.msi-admin-pipeline-form textarea{
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid rgba(20,30,50,.14);
  background:#fff;
  font-size:14px;
  font-weight:500;
}

.msi-admin-pipeline-form textarea{
  min-height:88px;
  resize:vertical;
}

.msi-admin-checkbox{
  justify-content:center;
  flex-direction:row !important;
  align-items:center;
  gap:10px !important;
  padding:12px;
  border-radius:10px;
  background:#f4f6f9;
}

.msi-admin-checkbox input{
  width:18px;
  height:18px;
}

.msi-admin-full-field{
  width:100%;
}

.msi-notif-pipeline_updated .msi-notif-dot-inline{
  background:#ffb020;
}

.msi-resources-box{
  background:#fff;
  border:1px solid rgba(20,30,50,.10);
  border-radius:18px;
  padding:22px 24px;
  box-shadow:0 10px 26px rgba(20,30,50,.06);
  margin-bottom:20px;
}

.msi-resource-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.msi-resource-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(20,30,50,.10);
  color:#0b1f3a !important;
  text-decoration:none !important;
  background:#fff;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.msi-resource-item:hover{
  transform:translateY(-2px);
  border-color:rgba(11,31,58,.22);
  box-shadow:0 10px 24px rgba(20,30,50,.08);
}

.msi-resource-item span{
  font-weight:700;
}

.msi-resource-item strong{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  color:#fff;
  background:#0b1f3a;
}

@media (max-width:767px){
  .msi-admin-form-grid,
  .msi-resource-list{
    grid-template-columns:1fr;
  }
}

@media (max-width:1500px){
  .msi-admin-summary--pipeline{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .msi-admin-summary--pipeline .msi-admin-summary-card{
    width:100%;
    min-width:0;
  }

  .msi-admin-table{
    min-width:860px;
  }

  .msi-admin-table th,
  .msi-admin-table td{
    padding:14px 16px;
  }
}

@media (max-width:1100px){
  .msi-admin-summary--pipeline{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .msi-admin-summary--pipeline .msi-admin-summary-number{
    font-size:24px;
  }

  .msi-admin-summary--pipeline .msi-admin-summary-label{
    font-size:13px;
  }

  .msi-admin-table{
    min-width:780px;
  }

  .msi-admin-table th,
  .msi-admin-table td{
    padding:12px 14px;
  }
}

@media (max-width:767px){
  .msi-admin-summary--pipeline{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}