/* Jake Core — Conçu et développé par Jonathan Cyr-Morin avec assistance IA — Tous droits réservés © 2025-2026 */

/* ============================================================
   MODULE-HEADER.CSS — Standard d'en-tête module Jake (2026-05-12)
   ============================================================

   Pattern de référence : peak-events (Gestion HQ) sur Jake Energy. Tous
   les modules Jake doivent utiliser cette structure pour leur en-tête.

   STRUCTURE HTML
   ──────────────
   <header class="jake-module-header">
     <div class="jake-module-header-left">
       <a href="/launcher/" class="jake-module-header-back" aria-label="Retour">←</a>
       <div class="jake-module-header-icon" aria-hidden="true">🎛️</div>
       <div class="jake-module-header-titles">
         <h1 class="jake-module-header-title">Nom du module</h1>
         <span class="jake-module-header-subtitle">Description courte</span>
       </div>
     </div>

     <div class="jake-module-header-center">
       <!-- COMPLICATIONS — KPIs, statut, sélecteurs, compteurs… -->
       <div class="jake-module-kpi">
         <span class="jake-module-kpi-label">Label</span>
         <span class="jake-module-kpi-value">42</span>
         <span class="jake-module-kpi-unit">unit</span>
       </div>
       <div class="jake-module-kpi-divider"></div>
       …
     </div>

     <div class="jake-module-header-right">
       <!-- Boutons custom + ⚙️ JakeNav injecté ici -->
     </div>
   </header>

   Tabs optionnels (juste après le header) :
   <nav class="jake-module-tabs" role="tablist">
     <button class="jake-module-tab is-active">Label 1</button>
     <button class="jake-module-tab">Label 2</button>
   </nav>

   RÈGLES
   ──────
   - Sticky top + blur glassmorphism (cohérent avec sidebar).
   - Grid 3-col : minmax(280px,1fr) | auto | minmax(220px,1fr).
   - L'icône module (.jake-module-header-icon) est 40x40 avec emoji/image.
   - Le titre est gros (20px, 700) — c'est le nom du MODULE.
   - Le slot center est OPTIONNEL : si vide, le grid reste équilibré.
   - Le ⚙️ JakeNav s'auto-injecte dans .jake-module-header-right (margin-left:auto
     + order:999 garantissent l'extrême droite).
   ============================================================ */

.jake-module-header {
  display: grid;
  /* Standard uniforme (2026-05-12) :
     - LEFT  : auto (largeur naturelle icône + nom, ne déborde pas)
     - CENTER: 1fr  (occupe TOUT l'espace disponible — barre de recherche
                     et complications s'étalent au lieu d'être tassées)
     - RIGHT : auto (gear ⚙️ seul, largeur naturelle)
     Pattern figé : 3 colonnes identiques peu importe le module pour
     un effet « rail latéral fixe » côté gauche / centre extensible
     uniforme / gear droite. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--glass, rgba(255,255,255,0.05));
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jake-module-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.jake-module-header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text, #e4e8f0);
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.jake-module-header-back:hover {
  background: var(--glass-active, rgba(255,255,255,0.12));
}

.jake-module-header-icon {
  font-size: 32px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.jake-module-header-titles {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centré vertical si subtitle absent */
  gap: 2px;
  min-width: 0;
}

.jake-module-header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #e4e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jake-module-header-subtitle {
  font-size: 13px;
  color: var(--text-secondary, #9ca3b4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jake-module-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  /* Le slot occupe toute la largeur du grid (1fr). Si un élément
     flex-grow est présent (.jake-module-header-search), il s'étend
     pour remplir. Sinon les complications restent centrées. */
}

.jake-module-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* KPI — Complication standard pour le slot center.
   Exemple : peak-events affiche « Demande Qc 50 MW · Production Qc 60 MW ». */
.jake-module-kpi {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.jake-module-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #9ca3b4);
  margin-right: 4px;
}
.jake-module-kpi-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #e4e8f0);
}
.jake-module-kpi-unit {
  font-size: 12px;
  color: var(--text-secondary, #9ca3b4);
}
.jake-module-kpi-divider {
  width: 1px;
  height: 28px;
  background: var(--glass-border, rgba(255,255,255,0.08));
}

/* Bouton générique header — utilisable dans le slot center (action primaire
   « + Nouveau X ») ou right (à côté du ⚙️ auto-injecté). Style cohérent. */
.jake-module-header-btn,
.jake-module-header-center button:not(.jake-page-settings-btn),
.jake-module-header-right button:not(.jake-page-settings-btn) {
  background: var(--glass-hover, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  color: var(--text, #e4e8f0);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.jake-module-header-btn:hover,
.jake-module-header-center button:not(.jake-page-settings-btn):hover,
.jake-module-header-right button:not(.jake-page-settings-btn):hover {
  background: var(--glass-active, rgba(255,255,255,0.12));
  border-color: var(--glass-border-strong, rgba(255,255,255,0.16));
}

/* Variante "primary" — accent color, action principale du module
   (ex: « + Nouveau client » dans Clients). */
.jake-module-header-btn.is-primary,
.jake-module-header-center button.is-primary {
  background: var(--accent, #4a6fa5);
  border-color: var(--accent, #4a6fa5);
  color: #fff;
}
.jake-module-header-btn.is-primary:hover,
.jake-module-header-center button.is-primary:hover {
  background: var(--accent-hover, #5e83bb);
  border-color: var(--accent-hover, #5e83bb);
}

/* Slot search dans le header — input qui s'étire pour occuper le
   center slot (uniformité cross-module : la barre fait visuellement
   la même largeur d'un module à l'autre). max-width évite que ça
   devienne trop large sur grand écran. */
.jake-module-header-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--glass, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 8px;
  flex: 1 1 auto;
  min-width: 240px;
  max-width: 600px;
}
.jake-module-header-search:focus-within {
  border-color: var(--accent, #4a6fa5);
}
.jake-module-header-search svg {
  width: 14px;
  height: 14px;
  color: var(--text-secondary, #9ca3b4);
  flex-shrink: 0;
}
.jake-module-header-search input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text, #e4e8f0);
  font-size: 13px;
  flex: 1;
  min-width: 0;
}
.jake-module-header-search input::placeholder {
  color: var(--text-secondary, #9ca3b4);
}

/* Responsive — mobile : grid passe en flex column compact */
@media (max-width: 768px) {
  .jake-module-header {
    grid-template-columns: 1fr;
    padding: 10px 14px;
    gap: 8px;
  }
  .jake-module-header-icon { width: 32px; height: 32px; font-size: 24px; }
  .jake-module-header-title { font-size: 17px; }
  .jake-module-header-subtitle { display: none; }
  .jake-module-header-center { display: none; }
}

/* ============================================================
   TABS — Standard d'onglets sous le header (2026-05-12)
   ============================================================
   Structure HTML attendue, directement APRÈS .jake-module-header :

   <nav class="jake-module-tabs" role="tablist" aria-label="Sections">
     <button class="jake-module-tab is-active" type="button">Label 1</button>
     <button class="jake-module-tab" type="button">Label 2</button>
   </nav>
   ============================================================ */
.jake-module-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  background: var(--glass, rgba(255,255,255,0.03));
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  position: sticky;
  top: 66px; /* hauteur du header (14+40+14 ≈ 68px) */
  z-index: 49;
  overflow-x: auto;
  scrollbar-width: thin;
}

.jake-module-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #9ca3b4);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.jake-module-tab:hover { color: var(--text, #e4e8f0); }
.jake-module-tab.is-active,
.jake-module-tab[aria-selected="true"] {
  color: var(--accent, #4a6fa5);
  border-bottom-color: var(--accent, #4a6fa5);
}

@media (max-width: 768px) {
  .jake-module-tabs { padding: 0 10px; top: auto; }
  .jake-module-tab { padding: 8px 10px; font-size: 12px; }
}

/* ============================================================
   CONTENT WRAPPERS — utilitaires pour le corps de page sous le header
   ============================================================

   Problème résolu : sur fond sombre, le texte gris des descriptions de
   section (« Canaux de notification — Sorties réutilisables… ») était
   illisible parce qu'il flottait directement sur la page sans card.

   Pattern : utiliser .jake-module-content comme conteneur de page,
   et .jake-module-card pour chaque section logique (h2 + description
   + contenu). Une grosse card par section, OU des micro-cards en
   grille selon le module. */

.jake-module-content {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.jake-module-card {
  background: var(--glass, #1a1f2e);
  border: 1px solid var(--glass-border, #2a3142);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.jake-module-card:last-child {
  margin-bottom: 0;
}

.jake-module-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.jake-module-card-titles {
  flex: 1;
  min-width: 0;
}

.jake-module-card-title {
  margin: 0 0 4px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text, #e4e8f0);
  line-height: 1.3;
}

.jake-module-card-desc {
  margin: 0;
  color: var(--text-secondary, #9ca3b4);
  font-size: 13px;
  line-height: 1.5;
  max-width: 720px;
}

.jake-module-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Responsive — mobile : cards prennent toute la largeur */
@media (max-width: 768px) {
  .jake-module-content { padding: 14px; }
  .jake-module-card { padding: 16px; border-radius: 8px; }
  .jake-module-card-header { flex-direction: column; }
}

/* ============================================================
   ALIASES LEGACY — applique le style standard aux anciens patterns
   sans toucher leur HTML. Migration progressive.
   ============================================================ */

/* Clients ERP : .header-tabs > .header-tab.active */
.header-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.header-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #9ca3b4);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.header-tab:hover { color: var(--text, #e4e8f0); }
.header-tab.active {
  color: var(--accent, #4a6fa5);
  border-bottom-color: var(--accent, #4a6fa5);
}