/* ==========================================================================
   Base
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background-color: #f8fafe; /* fond premium */
  color: #1e1e1e;
}

/* Conteneur principal */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Header & Nav
   ========================================================================== */

.app-header {
  padding: 1.2rem 2rem 0.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.app-main {
  flex: 1;
  padding: 0 2rem 2rem 2rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 2rem; /* espace vertical entre les sections (cards) */
}


/* Top nav */

.top-nav {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 2rem 1.5rem 2rem;
}

.top-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  background: #ffffff;
  color: #545454;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease,
    box-shadow 0.15s ease;
}

.top-nav a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.top-nav a.active {
  background: #306bff;
  color: #ffffff;
}

/* Header utilisateur*/

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem 0.5rem 2rem;
}

.app-header-left h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.header-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  background: #ffffff;
  padding: 0.6rem 0.9rem 0.7rem 1rem;
  border-radius: 18px; /* comme les cards */
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  min-width: 260px;
}

.header-user-email {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e1e1e;
}

.header-user-role {
  font-size: 0.8rem;
  color: #545454;
}

.header-user .btn {
  padding: 0.3rem 0.9rem;
  margin-top: 0.25rem;
  align-self: flex-end;
}


/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: #ffffff;
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06);
  margin-bottom: 2.5rem;
}

.card-full {
  width: 100%;
}

.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.card h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
}


/* ==========================================================================
   KPI Cards
   ========================================================================== */

.kpi-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.kpi-filters-row .form-row {
  flex: 1 1 180px; /* grandit, min ~180px */
}

.kpi-filters-button {
  flex: 0 0 220px;
}

.kpi-filters-button .btn {
  width: 100%;
}

.kpi-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.kpi-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
  border: 1px solid #eef2ff;
}

.kpi-card h3 {
  margin: 0 0 0.3rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: #545454;
}

.kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.15rem 0;
  color: #1e1e1e;
}

.kpi-subtitle {
  margin: 0;
  font-size: 0.8rem;
}

.kpi-target-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kpi-target-year-select {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.kpi-target-year-select label {
  color: #545454;
}

.kpi-target-year-select select {
  border-radius: 999px;
  border: 1px solid #dde3f0;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  background: #f9fbff;
}

/* ==========================================================================
   Charts (layout)
   ========================================================================== */

.kpi-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.kpi-chart-block {
  background: #ffffff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
  border: 1px solid #eef2ff;
}

/* ==========================================================================
   Formulaires
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.form-row label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #545454;
}

.form-row input,
.form-row select,
.form-row textarea {
  border-radius: 12px;
  border: 1px solid #dde3f0;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  outline: none;
  background: #f9fbff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: #306bff;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(48, 107, 255, 0.15);
}

.form-block-title h3 {
  margin: 0 0 0.5rem 0;
}

/* Grilles de formulaires pour minifier l’affichage */
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

/* Bloc central pour limiter la largeur des pages de gestion */
.page-section {
  max-width: 1400px;
  margin: 0 auto;
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  border: none;
  background: #306bff;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 8px 20px rgba(48, 107, 255, 0.25);
}

.btn:hover {
  background: #2550cc;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(48, 107, 255, 0.35);
}

.btn-secondary {
  background: #f0f3ff;
  color: #306bff;
  box-shadow: none;
}

.btn-secondary:hover {
  background: #e2e7ff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.btn-small {
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.table thead tr {
  background: #f2f4ff;
}

.table th,
.table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #edf1fc;
  text-align: left;
}

.table th {
  font-weight: 600;
  color: #545454;
}

.table tbody tr:hover {
  background: #f8faff;
}

/* ==========================================================================
   Textes utilitaires
   ========================================================================== */

.muted {
  color: #7a8193;
  font-size: 0.8rem;
}

/* API debug (index ancien) */

.api-response {
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 0.8rem;
  max-height: 240px;
  overflow: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .app-main {
    padding: 0 1rem 1.5rem 1rem;
  }

  .top-nav {
    padding: 0.5rem 1rem 1.2rem 1rem;
    overflow-x: auto;
  }

  .kpi-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-charts-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .form-grid-2,
  .form-grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .kpi-cards-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .app-header,
  .top-nav {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.form-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.form-grid-5 .form-row input,
.form-grid-5 .form-row select {
  width: 100%;
}

/* ==========================================================================
   Modules dans le tableau des opportunités
   ========================================================================== */
/* Les modules sont affichés sous forme de petites pastilles (tags) afin de
   gagner de la place et d'améliorer la lisibilité. La cellule utilise
   flex-wrap pour répartir les tags sur plusieurs lignes si nécessaire
   sans trop d'espace vertical. */
.modules-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.module-tag {
  background-color: #eef4ff; /* léger bleu de fond pour rappeler la marque */
  color: #306bff;           /* couleur primaire pour le texte */
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid #d6e4ff;
}

/* ==========================================================================
   Sélecteur de tags (modules OVIEPRO)
   --------------------------------------------------------------------------
   Permet à l'utilisateur de sélectionner plusieurs modules via une zone de
   saisie avec suggestions et tags affichés. S'inspire des sélecteurs de
   tags modernes comme HubSpot/Notion. Le conteneur est en flex-wrap pour
   permettre aux tags de passer à la ligne. Le champ de saisie grandit pour
   occuper l'espace restant. Les suggestions apparaissent dans une liste
   déroulante sous le champ.
*/
.tag-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid #dde3f0;
  border-radius: 12px;
  padding: 0.4rem 0.5rem;
  background: #f9fbff;
  position: relative;
  min-height: 2.6rem;
}

.tag-selector input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  font-size: 0.9rem;
  padding: 0.25rem 0.3rem;
  background: transparent;
}

.tag-selector .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tag-selector .tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #306bff;
  color: #ffffff;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.tag-selector .tag .remove-btn {
  cursor: pointer;
  font-weight: bold;
  line-height: 1;
}

/* Suggestions dropdown for tag selector */
.suggestions {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
  border: 1px solid #dde3f0;
  border-radius: 8px;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.suggestions div {
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.suggestions div:hover {
  background: #f2f4ff;
}

/* ==========================================================================
   Sélecteur des modules dans le formulaire opportunité
   --------------------------------------------------------------------------
   Le select multiple des modules OVIEPRO peut rapidement devenir très haut si
   l'on a de nombreux modules. On fixe ici une hauteur maximale et on active
   le défilement vertical pour qu'il n'occupe pas tout l'espace. La hauteur
   minimale est conservée pour que le champ reste visible même lorsqu'il n'y a
   qu'un seul module dans la liste.
*/
#opp-modules {
  height: auto;
  min-height: 2.4rem;
  max-height: 8rem;
  overflow-y: auto;
}