/*
  Projets de collecte, portail Pro.
  Le module reprend les formes de mon-compte-refonte.css (.card, .card-head, .card-body)
  et n'ajoute que ce qui est propre à la gestion des projets.
  Couleurs, bordures et rayons exprimés avec les jetons du module .se2
  (mon-compte-refonte.css / se-tokens) plutôt qu'en valeurs codées en dur.
*/

/* Textes d'appoint (hints .muted des .aspx et du JS): même ton que les
   libellés secondaires du module. Aucune autre feuille ne définit .muted. */
.se2 .muted {
  color: var(--fg-muted);
  font-size: 13.5px;
}

/* Titres de section à l'intérieur des cartes (Documents demandés, Options...):
   même gabarit que les têtes de carte du module (.card-head h3). */
.se2 .card-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--se-navy-800);
  margin-bottom: 4px;
}

/* Badge « Bêta » dans le titre de page. Pastille aux couleurs d'avertissement
   du module; le h1 est en Bebas, le badge revient à la police de labeur. */
.se2 .se-badge-beta {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--se-warning-50);
  color: var(--se-warning-700);
  border: 1px solid var(--se-warning-500);
  border-radius: 0.25rem;
}

/* Phrase complète de la période d'essai, rendue dans .acct-head-meta sous le h1. */
.se2 .collect-beta-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--se-warning-700);
}

.se2 .collect-project-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.se2 .collect-project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.se2 .collect-project-main h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--se-navy-800);
}

.se2 .collect-project-meta {
  color: var(--fg-muted);
  font-size: 13px;
}

.se2 .collect-project-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Statut du projet: même gabarit que les .badge du module (badge-success /
   badge-muted); la classe reste posée par CollectProjects.js. */
.se2 .collect-status {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 0.25rem;
  margin-right: 6px;
}

.se2 .collect-status.is-active {
  background: var(--se-success-50);
  color: var(--se-success-700);
}

.se2 .collect-status.is-paused {
  background: var(--se-gray-100);
  color: var(--se-navy-600);
}

/* Éditeur de documents demandés -------------------------------------- */

.se2 .collect-slot-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.se2 .collect-slot-row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.se2 .collect-slot-row .field {
  margin: 0;
}

.se2 .collect-slot-toggles {
  display: flex;
  gap: 14px;
  white-space: nowrap;
}

.se2 .collect-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

.se2 .collect-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.se2 .collect-options .field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.se2 .collect-options .field-inline input {
  width: 90px;
}

/* Lien public --------------------------------------------------------- */

.se2 .collect-link-line {
  display: flex;
  gap: 10px;
  align-items: center;
}

.se2 .collect-link-line input {
  flex: 1 1 auto;
}

/* Ligne des boutons d'import: collage et fichier CSV cote a cote ------ */

.se2 .collect-import-line {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.se2 .collect-rejected {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--se-warning-50);
  border-left: 3px solid var(--se-warning-500);
}

/* Suivi --------------------------------------------------------------- */

.se2 .collect-followup-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider);
}

.se2 .collect-followup-row.is-revoked {
  opacity: 0.55;
}

.se2 .collect-followup-state {
  color: var(--fg-muted);
  font-size: 13px;
}

.se2 .hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .se2 .collect-slot-row,
  .se2 .collect-context-row,
  .se2 .collect-followup-row {
    grid-template-columns: 1fr;
  }

  .se2 .collect-project-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Fenetre des journaux d'un client -----------------------------------
   Ces blocs vivent dans les modales, dont le dialog porte la classe .se2:
   les jetons du module y sont donc résolus. */

.collect-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collect-log-item {
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.collect-log-head {
  font-weight: 600;
  color: var(--se-navy-800);
}

.collect-log-status {
  margin-top: 4px;
  font-size: 13px;
}

.collect-log-status.is-read { color: var(--se-success-700); }
.collect-log-status.is-unread { color: var(--se-warning-700); }
.collect-log-status.is-unknown { color: var(--fg-muted); }

.se2 .collect-progress-complete {
  color: var(--se-success-700);
  font-weight: 700;
}

/* Cles de contexte SESAR ---------------------------------------------- */

.se2 .collect-context-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.se2 .collect-context-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.se2 .collect-context-row .field { margin: 0; }

/* Jokers de domaine dans le suivi ------------------------------------- */

.se2 .collect-wildcard-icon {
  color: var(--primary, var(--se-orange-500));
  font-size: 10px;
  margin-right: 6px;
  vertical-align: middle;
}

.se2 .collect-wildcard-row {
  font-weight: 600;
}

.collect-log-item.is-clickable { cursor: pointer; transition: border-color 0.2s ease; }
.collect-log-item.is-clickable:hover { border-color: var(--primary, var(--se-orange-500)); }

.collect-log-open {
  margin-top: 6px;
  font-size: 13px;
  color: var(--primary, var(--se-orange-600));
  font-weight: 600;
}

/* Modales des journaux: pleine largeur utile ---------------------------
   Les tables de fichiers et d'activités portent beaucoup de colonnes; les
   largeurs bootstrap standard les etranglent. Le detail prend presque tout
   l'ecran, la liste des depots une largeur confortable. */

.collect-activity-dialog {
  max-width: min(980px, 94vw);
  width: min(980px, 94vw);
}

.collect-logdetails-dialog {
  max-width: min(1560px, 96vw);
  width: min(1560px, 96vw);
}

.collect-logdetails-dialog .modal-body {
  max-height: calc(100vh - 170px);
  overflow-y: auto;
}

.collect-logdetails-dialog .modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.collect-logdetails-dialog .modal-header .modal-title {
  flex: 1 1 auto;
}

.collect-log-back {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Champs par langue ---------------------------------------------------- */

.se2 .collect-lang-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}

.se2 .collect-lang-group {
  position: relative;
  padding: 16px 14px 10px 14px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.se2 .collect-lang-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--se-navy-700);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.se2 .collect-lang-badge-small {
  position: static;
  flex: 0 0 auto;
  align-self: center;
}

.se2 .collect-slot-row-localized {
  grid-template-columns: 1fr auto auto;
}

.se2 .collect-slot-texts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.se2 .collect-slot-lang-line {
  display: grid;
  grid-template-columns: auto 1fr 1.4fr;
  gap: 8px;
  align-items: center;
}

@media (max-width: 900px) {
  .se2 .collect-slot-lang-line {
    grid-template-columns: 1fr;
  }
}

/* Ligne des types de fichiers acceptés d'une boîte: saisie libre plus raccourcis. */
.se2 .collect-slot-ext-line {
  grid-template-columns: auto 1.4fr 1fr;
}

.se2 .collect-ext-badge i {
  font-size: 12px;
}

.se2 .collect-ext-preset {
  min-width: 0;
}

@media (max-width: 900px) {
  .se2 .collect-slot-ext-line {
    grid-template-columns: 1fr;
  }
}

.se2 .collect-link-line + .collect-link-line { margin-top: 8px; }
.se2 .collect-link-line .collect-lang-badge-small { flex: 0 0 auto; }