/* ===========================================================
   CALENDRIER (bouton 📅 + panneau calendrier + liste + modal)
   Fichier: static/css/calendrier_eco.css
   =========================================================== */
/* -----------------------------------------------------------
   1) Bouton 📅 dans la barre du haut
   ----------------------------------------------------------- */
#btn_calendar{
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.15);
  background:#fff;
}
#btn_calendar:hover{ background:#f3f3f3; }


/* -----------------------------------------------------------
   2) Onglets PRINCIPAUX du panneau Calendrier
   ----------------------------------------------------------- */
:is(#calendarPanel,#earningsPanel) .calMainTabs{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:nowrap;

  /* ✅ marge interne uniquement pour la zone des onglets */
  padding: 0 10px;
  box-sizing: border-box;
}

:is(#calendarPanel,#earningsPanel) .calMainTab{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 0;
  font-size:13px;
  font-weight:700;
  text-align:center;
  border-radius:4px;
  border:1px solid rgba(0,0,0,0.20);
  background:#fff;
}
:is(#calendarPanel,#earningsPanel) .calMainTab:hover{ background:#f3f3f3; }
:is(#calendarPanel,#earningsPanel) .calMainTab.active{
  background:#e6e6e6;
  border-color:#cfcfcf;
}


/* -----------------------------------------------------------
   3) Sous-onglets (Hier / Aujourd’hui / Semaine ...)
   ----------------------------------------------------------- */
:is(#calendarPanel,#earningsPanel) .calSubTab.active{
  background:#e6e6e6;
  border-color:#cfcfcf;
}

/* ✅ marge interne uniquement pour la zone des sous-onglets */
:is(#calendarPanel,#earningsPanel) .calSubTabs{
  padding: 0 10px;
  box-sizing: border-box;
}

/* -----------------------------------------------------------
   4) Liste macro (header + rows + séparateurs jours)
   ----------------------------------------------------------- */
/* Grille commune : Heure | Pays | Titre | Impact */
.calHeader,
.calRow{
  display:grid;
  grid-template-columns: 50px 48px minmax(0, 1fr) 55px;
  gap:10px;
  align-items:center;
}

/* Header sticky */
.calHeader{
  padding:8px 10px;
  font-weight:700;
  font-size:12px;
  color:#333;

  background:#f6f6f6;
  border-bottom:1px solid #eee;

  position:sticky;
  top:0;
  z-index:2;

  white-space:nowrap;
  line-height:1.1;
}

.calHeader > div{
  min-width:0;
  justify-self:start; /* aligné à gauche dans sa colonne */
  text-align:left;
}

.calHeader > div:nth-child(3){
  overflow:hidden;
  text-overflow:ellipsis;
}
.calHeader > div:nth-child(4){
  justify-self:end;
  text-align:right;
}

/* Rows */
.calRow{
  padding:8px 10px;
  border-bottom:1px solid #f2f2f2;
}

.calTime{ font-weight:700; }

/* Pays = drapeau + code */
.calCountry{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  justify-content:flex-start;
}

.calCountry .code{
  font-weight:600;
  letter-spacing:0.4px;
  font-size:0.9em;
  opacity:0.85;
  white-space:nowrap;
}

/* Drapeaux */
.flagWrap{
  width:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}
.flagImg{
  width:16px;
  height:12px;
  display:block;
  border-radius:2px;
}
.flagEmoji{
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  font-size:14px;
  line-height:1;
}

/* Colonne titre */
.calTitle{
  min-width:0; /* IMPORTANT pour que 1fr puisse shrink */
}
.calTitle a{
  display:block;
  color:#111;
  text-decoration:none;
}
.calTitle a:hover{ text-decoration:underline; }

/* Impact */
.calImpact{
  justify-self:end;
  text-align:right;
  white-space:nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:0.5px;
}

/* Séparateurs jours + label top */
.calDaySep{
  margin-top:0;
  padding:8px 10px 6px; /* petit décalage du bord (comme tu veux) */
  font-weight:700;
  font-size:12px;
  color:#111;
}
.calTopLabel{
  margin:0;
  padding:8px 10px;
  font-weight:700;
  font-size:12px;
  color:#111;
}


/* -----------------------------------------------------------
   5) Fonts emoji (utile pour drapeaux dans selects/options)
   ----------------------------------------------------------- */
/* APRÈS: limité au calendrier */
:is(#calendarPanel,#earningsPanel) .flag,
:is(#calendarPanel,#earningsPanel) select,
:is(#calendarPanel,#earningsPanel) option{
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
}

/* -----------------------------------------------------------
   6) MODAL "Annonce économique"
   ----------------------------------------------------------- */
.ecoModalOverlay{
  display:none;
  position:static;
  background: transparent;
  pointer-events:none;
}
.ecoModalOverlay.open{
  display:block;
}

.ecoModal{
  position:fixed;
  top:120px;
  left:80px;
  transform:none;
  width:min(720px, calc(100vw - 24px));
  min-width:260px;
  min-height:320px;
  max-height:none;
  background: var(--ia-panels-body-bg);
  color: var(--ia-panels-body-fg);
  border:1px solid var(--pm-ui-border);
  border-radius:1px;
  box-shadow:none;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  pointer-events:auto;
}

.ecoModal.pmPanel,
.ecoModal.pmFloat{
  transform:none !important;
}

.ecoModalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:8px var(--pm-pad-x, 10px);
  background: var(--ia-panels-active-bg, var(--pm-frame, #d9d9d9));
  color: var(--ia-panels-active-fg, var(--pm-text, #111));
  border-bottom:1px solid var(--pm-ui-border);
  cursor:move;
  user-select:none;
}

.ecoModalTitle{
  font-weight:800;
  font-size:13px;
  line-height:1.2;
  margin:0;
  color:inherit;
}

.ecoModalMeta{
  margin-top:4px;
  font-size:12px;
  color:inherit;
  opacity:0.82;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.ecoCloseBtn{
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid color-mix(in srgb, var(--pm-close-fg, #111) 30%, transparent);
  background: var(--pm-close-bg, #fff);
  color: var(--pm-close-fg, #111);
  cursor:pointer;
  font-size:16px;
  line-height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ecoCloseBtn:hover{
  background: var(--pm-close-bg-hover, #f0f0f0);
  color: var(--pm-close-fg-hover, #111);
}

.ecoModalBody{
  padding:12px;
  font-size:var(--ia-typo-text-size, 12px);
  line-height:var(--ia-typo-line, 1.25);
  font-weight:var(--ia-typo-text-weight, 400);
  color:inherit;
  background: var(--ia-panels-body-bg);
  overflow:auto;
  min-height:0;
  flex:1 1 auto;
}

.ecoModalBody h1,
.ecoModalBody h2{
  font-size:var(--ia-typo-h2-size, 13px);
  font-weight:var(--ia-typo-h2-weight, 800);
  line-height:var(--ia-typo-line, 1.25);
  margin:0 0 8px 0;
}

.ecoModalBody h3{
  font-size:var(--ia-typo-h3-size, 13px);
  font-weight:var(--ia-typo-h3-weight, 700);
  line-height:var(--ia-typo-line, 1.25);
  margin:0 0 8px 0;
}

.ecoModalBody p{
  margin:0 0 10px 0;
  font-size:var(--ia-typo-text-size, 12px);
  line-height:var(--ia-typo-line, 1.25);
}

.ecoModalBody .muted{
  color: color-mix(in srgb, var(--ia-panels-body-fg) 65%, transparent);
  font-size:var(--ia-typo-text-size, 12px);
}
.ecoKey{ font-weight:700; }

.ecoModalActions{
  padding:10px 12px 12px 12px;
  border-top:1px solid var(--pm-ui-border);
  background: var(--ia-panels-body-bg);
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.ecoHistoryBox{
  margin-top:12px;
  border-top:1px solid var(--pm-ui-border);
  padding-top:10px;
}
.ecoHistoryTitle{
  font-weight:var(--ia-typo-h3-weight, 700);
  font-size:var(--ia-typo-h3-size, 13px);
  line-height:var(--ia-typo-line, 1.25);
  margin-bottom:8px;
}
.ecoHistoryRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  border-bottom:1px solid color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent);
  font-size:var(--ia-typo-text-size, 12px);
  line-height:var(--ia-typo-line, 1.25);
}
.ecoHistoryRow .k{
  color: color-mix(in srgb, var(--ia-panels-body-fg) 70%, transparent);
}
.ecoHistoryRow .v{
  font-weight:700;
  color:var(--ia-panels-body-fg);
  white-space:nowrap;
}
.ecoHistoryMuted{
  color: color-mix(in srgb, var(--ia-panels-body-fg) 70%, transparent);
  font-size:var(--ia-typo-text-size, 12px);
}
.ecoHistoryTable td{
  padding:6px 0;
  border-bottom:1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent);
}

/* -----------------------------------------------------------
   6) MODAL "résultat actuel, précèdent,etc sous le graphique historique"
   ----------------------------------------------------------- */
.ecoNextBox{
  margin-top:10px;
  border-top:1px solid var(--pm-ui-border);
  padding-top:10px;
}

.ecoNextRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:var(--ia-typo-text-size, 12px);
  line-height:var(--ia-typo-line, 1.25);
  margin-bottom:8px;
}

.ecoNextRow .k{
  color: color-mix(in srgb, var(--ia-panels-body-fg) 70%, transparent);
}
.ecoNextRow .v{
  font-weight:800;
  color:var(--ia-panels-body-fg);
}

.ecoPills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ecoPill{
  border:1px solid color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent);
  background:color-mix(in srgb, var(--ia-panels-body-bg) 92%, #000 8%);
  border-radius:1px;
  padding:6px 8px;
  min-width:110px;
}

.ecoPill .k{
  color: color-mix(in srgb, var(--ia-panels-body-fg) 70%, transparent);
  font-size:11px;
}
.ecoPill .v{
  font-weight:800;
  font-size:var(--ia-typo-text-size, 12px);
  color:var(--ia-panels-body-fg);
  margin-top:2px;
}

/* ===========================
   PanelManager: structure
   =========================== */
:is(#calendarPanel,#earningsPanel){
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}

/* header (barre titre PanelManager) */
:is(#calendarPanel,#earningsPanel) .pmHeader{
  flex:0 0 auto;
}

/* ✅ le contenu devient un flex column contraint */
:is(#calendarPanel,#earningsPanel) .pmContent{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;       /* empêche le scroll du panel entier */
  display:flex;
  flex-direction:column;
}

/* ✅ seul calendarBody scrolle */
:is(#calendarBody,#earningsBody){
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;       /* ou scroll si tu veux scrollbar toujours visible */
  overflow-x:hidden;
}
/* ===========================================================
   FIX SCROLL CALENDRIER AVEC PanelManager (robuste)
   =========================================================== */

/* Le panel doit être un conteneur "contraint" */
/* Base */
:is(#calendarPanel,#earningsPanel){
  box-sizing:border-box;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Dock uniquement */
:is(#calendarPanel,#earningsPanel).pmDock{
  height:100vh;
}

/* Float uniquement */
:is(#calendarPanel,#earningsPanel).pmFloat{
  height:auto;
}

/* PanelManager peut injecter un wrapper: pmContent / pmBody / pmInner / pmMain...
   On les force tous à être flex column + contraints */
:is(#calendarPanel,#earningsPanel) > .pmContent,
:is(#calendarPanel,#earningsPanel) > .pmBody,
:is(#calendarPanel,#earningsPanel) > .pmInner,
:is(#calendarPanel,#earningsPanel) > .pmMain,
:is(#calendarPanel,#earningsPanel) > .pmWrap{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* IMPORTANT :
   Peu importe où PanelManager a déplacé calendarBody, il doit scroller */
:is(#calendarPanel,#earningsPanel) :is(#calendarBody,#earningsBody){
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;     /* scrollbar */
  overflow-x: hidden !important;
}

/* Les éléments "au-dessus" de calendarBody ne shrink pas */
:is(#calendarPanel,#earningsPanel) :is(#calendarBody,#earningsBody) ~ *{ /* sécurité si jamais */
  flex: 0 0 auto !important;
}

/* ===========================================================
   Titre du panneau calendrier sur UNE seule ligne (FORCÉ)
   =========================================================== */

/* 1) Force le conteneur de gauche (qui contient les 2 lignes) à être en ligne */
:is(#calendarPanel,#earningsPanel) .panelHeader > div{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:6px !important;
  white-space:nowrap !important;
}

/* 2) Force les 2 div à se comporter comme du texte (sinon elles cassent la ligne) */
:is(#calendarPanel,#earningsPanel) :is(#calendarPanelTitle,#earningsPanelTitle),
:is(#calendarPanel,#earningsPanel) :is(#calendarTitle,#earningsTitle){
  display:inline !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.2 !important;
}

/* 3) Styles (le inline-style HTML est écrasé grâce à !important) */
:is(#calendarPanel,#earningsPanel) :is(#calendarPanelTitle,#earningsPanelTitle){
  font-weight:700 !important;
}

:is(#calendarPanel,#earningsPanel) :is(#calendarTitle,#earningsTitle){
  font-weight:400 !important;
  font-size:12px !important;
  color:#666 !important;
}

/* ✅ La box (coins arrondis) CLIPPE le contenu */
.calList{
  border:1px solid #eee;
  border-radius:10px;
  background:#fff;

  overflow:hidden;              /* ✅ IMPORTANT: empêche de voir derrière */
  display:flex;
  flex-direction:column;
  height:100%;                  /* prend toute la hauteur dispo */
}

/* ✅ L’entête n’a PLUS besoin d’être sticky */
:is(#calendarBody,#earningsBody) .calHeader{
  position:relative;            /* ou static */
  top:auto;
  z-index:auto;
}

/* ✅ Zone scrollable sous l’entête */
:is(#calendarBody,#earningsBody) .calScroll{
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  flex:1 1 auto;
}

/* ✅ le conteneur principal ne scrolle plus (c’est calScroll qui scrolle) */
:is(#calendarPanel,#earningsPanel) :is(#calendarBody,#earningsBody){
  overflow:hidden !important;
  display:flex;                 /* pour que .calList puisse faire height:100% */
  flex-direction:column;
}
/* ✅ VERSION "HEADER FIXE + SCROLL INTERNE" => AUCUN sticky */
:is(#calendarBody,#earningsBody){ --calHeaderH: 0px; } /* (inutile maintenant, mais safe) */

:is(#calendarBody,#earningsBody) .calHeader,
:is(#calendarBody,#earningsBody) .calDaySep,
:is(#calendarBody,#earningsBody) .calTopLabel{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* ===========================================================
   ✅ THEME calendrier : suit le corps des pancartes
   - fond = --ia-panels-body-bg
   - texte = --ia-panels-body-fg
   - bordures = mix fg / transparent
   - NE TOUCHE PAS aux boutons/champs
   =========================================================== */

:root{
  /* bordure “couleur texte mais douce” */
  --ia-panels-body-border: color-mix(in srgb, var(--ia-panels-body-fg) 22%, transparent);
  --ia-panels-body-border-soft: color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent);

  /* léger contraste interne (header list) */
  --ia-panels-body-surface: color-mix(in srgb, var(--ia-panels-body-bg) 92%, #000 8%);
}

/* 1) Le conteneur calendrier hérite */
:is(#calendarBody,#earningsBody){
  background: var(--ia-panels-body-bg) !important;
  color: var(--ia-panels-body-fg) !important;
}

/* 2) La “box” qui crée le grand rectangle blanc */
:is(#calendarBody,#earningsBody) .calList{
  background: var(--ia-panels-body-bg) !important;
  border-color: var(--ia-panels-body-border) !important;
}

/* 3) Header de la liste (ligne Heure/Pays/Annonce/Impact) */
:is(#calendarBody,#earningsBody) .calHeader{
  background: var(--ia-panels-body-surface) !important;
  color: var(--ia-panels-body-fg) !important;
  border-bottom-color: var(--ia-panels-body-border-soft) !important;
}

/* 4) Lignes + séparateurs (enlève le blanc/gris dur) */
:is(#calendarBody,#earningsBody) .calRow{
  background: transparent !important;
  border-bottom-color: var(--ia-panels-body-border-soft) !important;
}
:is(#calendarBody,#earningsBody) .calDaySep,
:is(#calendarBody,#earningsBody) .calTopLabel{
  background: transparent !important;
  color: var(--ia-panels-body-fg) !important;
}

/* 5) Liens du titre : suivent le texte (pas noir fixe) */
:is(#calendarBody,#earningsBody) .calTitle a{
  color: inherit !important;
}

/* 6) Détails/secondaires : un peu plus doux mais cohérent */
:is(#calendarBody,#earningsBody) .calCountry .code{
  color: color-mix(in srgb, var(--ia-panels-body-fg) 75%, transparent) !important;
}