/* assets/css/eco-calendar.css — calendrier économique (eco-calendar.php) */

.page-eco-calendar {
  --imp-l: #1a7f37; --imp-l-bg: rgba(26, 127, 55, .12);
  --imp-m: #b26a00; --imp-m-bg: rgba(234, 140, 0, .14);
  --imp-h: #cf222e; --imp-h-bg: rgba(207, 34, 46, .11);
  --ec-blue: #2f81f7;
}
:root[data-theme="dark"] .page-eco-calendar {
  --imp-l: #56d364; --imp-l-bg: rgba(86, 211, 100, .13);
  --imp-m: #f0a500; --imp-m-bg: rgba(240, 165, 0, .14);
  --imp-h: #ff7b72; --imp-h-bg: rgba(255, 123, 114, .14);
}

/* Écart sous la barre du haut en marge intérieure : la marge de .main-content
   traversait le body (100vh) et la page dépassait de 50 px, d'où une barre
   de défilement inutile. Visiteurs : le body porte déjà cet écart (index.css). */
.page-eco-calendar .main-content { margin-top: 0; padding: 50px 0 0; min-height: 0; }
.page-eco-calendar:not(.has-sidebar) .main-content { padding-top: 0; }
.ec-wrap { max-width: 1320px; margin: 0 auto; padding: 16px; }
.ec-card {
  /* Voile : le fond animé (bougies + stochastique) se devine à travers la carte */
  display: flex; flex-direction: column; background: color-mix(in srgb, var(--color-surface) 66%, transparent);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); border: 1px solid var(--color-border);
  border-radius: var(--radius-block, 12px); box-shadow: var(--shadow-sm); font-size: 13px; color: var(--color-text);
  height: calc(100vh - 82px); min-height: 520px;
}

/* En-tête : titre, semaine et flèches, lien à partager */
.ec-head { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--color-divider, var(--color-border)); }
.ec-title { display: flex; align-items: center; gap: 8px; margin: 0 10px 0 0; font-size: 16px; font-weight: 700; }
.ec-title svg { color: var(--ec-blue); flex-shrink: 0; }
.ec-weeknav { display: flex; align-items: center; gap: 8px; }
.ec-nb {
  height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid var(--color-border); background: var(--color-bg); border-radius: var(--radius);
  color: var(--color-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 600; font-family: inherit;
}
.ec-nb:hover:not(:disabled) { background: var(--color-bg-secondary); }
.ec-nb:disabled { opacity: .35; cursor: default; }
.ec-nb[hidden] { display: none; }
.ec-week { font-weight: 600; font-size: 13px; min-width: 240px; text-align: center; }
.ec-today { font-size: 12px; color: var(--color-primary); }
.ec-share { font-size: 12px; }

/* Alerte quotidienne : allumé = active ; point orange = filtres affichés
   différents de ceux de l'alerte */
.ec-alert { position: relative; margin-left: auto; font-size: 12px; }
.ec-alert.on { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }
.ec-alert.on svg { fill: currentColor; }
.ec-alert-dot { display: none; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--imp-m); box-shadow: 0 0 0 2px var(--color-surface); }
.ec-alert.on.diff .ec-alert-dot { display: block; }
.ec-alert:disabled { opacity: .6; cursor: wait; }
.ec-pop {
  position: absolute; top: calc(100% - 4px); right: 16px; z-index: 30; max-width: 340px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: var(--shadow-md);
}
.ec-pop[hidden] { display: none; }
.ec-pop a { color: var(--color-primary); font-weight: 600; }
.ec-share.done { color: var(--color-primary); border-color: var(--color-primary); }

/* Bandeau d'un lien partagé ouvert par un membre */
.ec-shared {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 16px; font-size: 12px;
  background: color-mix(in srgb, var(--ec-blue) 9%, var(--color-surface)); border-bottom: 1px solid var(--color-divider, var(--color-border));
}
.ec-shared[hidden] { display: none; }
.ec-link-btn { border: none; background: none; padding: 0; color: var(--color-primary); font: 600 12px/1.4 inherit; cursor: pointer; }
.ec-link-btn:hover { text-decoration: underline; }

/* Filtres : devises | impact, sur une ligne */
.ec-filters { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 8px 16px; background: color-mix(in srgb, var(--color-bg) 70%, transparent); border-bottom: 1px solid var(--color-divider, var(--color-border)); }
.ec-fgroup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ec-flab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.ec-vsep { width: 1px; height: 22px; background: var(--color-border); margin: 0 4px; }
.ec-seg.seg-btn-group { height: 26px; background: var(--color-surface); }
.ec-seg .cgc-seg-btn { padding: 4px 9px; font-weight: 600; font-size: 12px; opacity: .5; font-family: inherit; }
.ec-seg .cgc-seg-btn.on { opacity: 1; color: var(--color-text); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); }
.ec-seg .cgc-seg-btn.imp-l.on { color: var(--imp-l); background: var(--imp-l-bg); }
.ec-seg .cgc-seg-btn.imp-m.on { color: var(--imp-m); background: var(--imp-m-bg); }
.ec-seg .cgc-seg-btn.imp-h.on { color: var(--imp-h); background: var(--imp-h-bg); }
.ec-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; }
.ec-allnone { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.ec-allnone a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.ec-allnone a:hover { text-decoration: underline; }

/* Semaine : cinq colonnes */
.ec-tabs { display: none; }
.ec-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: auto; flex: 1; min-height: 0; transition: opacity .15s; }
.ec-grid.ec-loading { opacity: .45; }
/* Barre de défilement fine et discrète, comme la sidebar (index.css) */
.ec-grid::-webkit-scrollbar { width: 8px; height: 8px; }
.ec-grid::-webkit-scrollbar-track { background: transparent; }
.ec-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-text) 22%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.ec-grid::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--color-text) 40%, transparent); }
@supports (-moz-appearance: none) {
  .ec-grid { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-text) 25%, transparent) transparent; }
}
.ec-day { border-right: 1px solid var(--color-divider, var(--color-border)); min-width: 0; }
.ec-day:last-child { border-right: none; }
.ec-dh {
  position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--color-surface) 90%, transparent); padding: 8px 10px; text-align: center;
  font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--color-border);
}
.ec-dh small { display: block; font-weight: 500; color: var(--color-text-muted); font-size: 11px; margin-top: 1px; }
.ec-day.today .ec-dh { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
.ec-day.today { background: color-mix(in srgb, var(--color-primary) 3%, transparent); }
.ec-list { padding: 6px 6px 10px; }
.ec-ev { display: grid; grid-template-columns: 40px 38px minmax(0, 1fr); align-items: start; gap: 6px; padding: 5px 6px; border-radius: 6px; outline: none; }
.ec-ev:hover, .ec-ev:focus-visible { background: var(--color-bg-secondary); }
.ec-tm { padding-top: 1px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; color: var(--color-text-secondary); }
.ec-cur { font-size: 10.5px; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 5px; letter-spacing: .02em; }
.ec-cur.l { color: var(--imp-l); background: var(--imp-l-bg); }
.ec-cur.m { color: var(--imp-m); background: var(--imp-m-bg); }
.ec-cur.h { color: var(--imp-h); background: var(--imp-h-bg); }
.ec-cur.x { color: var(--color-text-muted); border: 1px dashed var(--color-border); padding: 1px 0; }
.ec-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.3; }
.ec-ev.h .ec-nm { font-weight: 600; }
.ec-ev.x .ec-nm { font-style: italic; color: var(--color-text-muted); }
.ec-ev.past { opacity: .5; }
.ec-ev.past .ec-cur { color: var(--color-text-muted); background: var(--color-bg-secondary); }
.ec-ev.past .ec-nm { font-weight: 400; }
.ec-now { display: flex; align-items: center; gap: 6px; margin: 4px 2px; font-size: 10.5px; font-weight: 700; color: var(--imp-h); }
.ec-now::after { content: ""; flex: 1; height: 2px; background: var(--imp-h); border-radius: 2px; opacity: .7; }
.ec-empty { color: var(--color-text-muted); font-size: 12px; text-align: center; padding: 18px 0; }

/* Pied : fuseau, enregistrement, source */
.ec-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 7px 16px; font-size: 12px; color: var(--color-text-muted); border-top: 1px solid var(--color-divider, var(--color-border)); }
.ec-tz { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ec-tz b { color: var(--color-text); font-weight: 600; }
.ec-off { display: inline-flex; align-items: center; height: 24px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); }
.ec-off button { width: 24px; height: 100%; border: none; background: var(--color-bg); color: var(--color-text-secondary); cursor: pointer; font: 700 13px/1 inherit; }
.ec-off button:hover { background: var(--color-bg-secondary); }
.ec-off input {
  width: 50px; height: 100%; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
  text-align: center; font: 600 12px/1 inherit; font-variant-numeric: tabular-nums; color: var(--color-text); background: var(--color-surface); outline: none; padding: 0;
}
.ec-off input:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent); }
.ec-tz-auto { font-size: 11px; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.ec-tz-auto[hidden] { display: none; }
.ec-save { font-size: 11px; }
.ec-save a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.ec-src { margin-left: auto; font-size: 11px; }

/* Infobulle d'une annonce */
.ec-tip {
  position: fixed; z-index: 2100; background: #1e293b; color: #fff; border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none; max-width: 280px;
}
.ec-tip[hidden] { display: none; }
.ec-tip b { display: block; margin-bottom: 3px; }
.ec-tip span { color: #cbd5e1; }
.ec-tip.ec-tip-wide { max-width: 320px; }
.ec-tip-warn { color: #fbbf24; font-style: normal; }

/* Écran moyen : la page défile, les colonnes gardent leur hauteur naturelle */
@media (max-width: 1100px) {
  .ec-card { height: auto; min-height: 0; }
  .ec-grid { overflow: visible; }
  .ec-dh { top: 0; }
}

/* Mobile : un jour à la fois, onglets lundi → vendredi */
@media (max-width: 760px) {
  .ec-wrap { padding: 8px; }
  .ec-head { padding: 10px 12px; }
  .ec-title { font-size: 15px; width: 100%; margin: 0; }
  .ec-weeknav { flex: 1; min-width: 0; }
  .ec-week { min-width: 0; flex: 1; font-size: 12.5px; }
  .ec-share span, .ec-alert span { display: none; }
  .ec-alert { margin-left: 0; }
  .ec-pop { left: 12px; right: 12px; max-width: none; }
  .ec-filters { padding: 8px 12px; }
  .ec-vsep { display: none; }
  .ec-seg .cgc-seg-btn { padding: 4px 6px; font-size: 11.5px; }
  .ec-fgroup { gap: 6px 8px; }
  .ec-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--color-border); }
  .ec-tab {
    border: none; background: none; padding: 7px 0 6px; font: 700 12.5px/1.2 inherit; color: var(--color-text-secondary); cursor: pointer;
    border-bottom: 2px solid transparent;
  }
  .ec-tab small { display: block; font-weight: 500; font-size: 10.5px; color: var(--color-text-muted); }
  .ec-tab.today { color: var(--color-primary); }
  .ec-tab.on { border-bottom-color: var(--color-primary); color: var(--color-text); background: var(--color-bg); }
  .ec-grid { display: block; }
  .ec-day { display: none; border-right: none; }
  .ec-day.on { display: block; }
  .ec-dh { display: none; }
  .ec-ev { grid-template-columns: 42px 40px minmax(0, 1fr); padding: 7px 6px; }
  .ec-nm { font-size: 13px; -webkit-line-clamp: 3; }
  .ec-foot { padding: 8px 12px; }
  .ec-src { margin-left: 0; width: 100%; }
}