/*
 * Plain (unlayered) CSS served by Propshaft, loaded AFTER tailwind.css.
 *
 * Trix toolbar overrides live here on purpose: actiontext.css (Trix defaults)
 * is also unlayered and loaded before this file, so its rules beat anything in
 * the Tailwind `@layer components` block. Unlayered rules declared here load
 * last and reclaim control over the editorial toolbar look. These selectors
 * only match the admin rich-text editor (no <trix-toolbar> on public pages).
 */

trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem;
  overflow-x: visible;
}

trix-toolbar .trix-button-group {
  margin-bottom: 0;
  border: none;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0;
}

trix-toolbar .trix-button {
  float: none;
  font-size: 0.875rem;
  color: #475569;
  border-bottom: none;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: none;
}
trix-toolbar .trix-button.trix-active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--color-accent);
}

/* Dark mode — Trix ships black SVG icons, so invert them for visibility */
.dark trix-toolbar .trix-button {
  color: #e2e8f0;
}
.dark trix-toolbar .trix-button.trix-active {
  background: rgba(96, 165, 250, 0.16);
  color: var(--color-accent-light);
}
.dark trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

/*
 * Editor surface. actiontext.css sets `trix-editor { border / padding /
 * min-height / border-radius }` (unlayered) AND no `display`, so the custom
 * element falls back to `display: inline` and collapses to a tiny box when
 * empty (e.g. a brand-new analysis). These unlayered rules reclaim the block
 * layout and editorial surface that the @layer styles can't enforce.
 */
trix-editor.admin-richtext {
  display: block;
  /* Hauteur figée dans le formulaire : l'éditeur ne grandit plus avec le
     contenu, il défile en interne. Le mode plein écran prend le relais pour
     les contenus longs. */
  height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 1rem 1.125rem;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
}
trix-editor.admin-richtext:focus {
  border-color: var(--color-accent);
}
.dark trix-editor.admin-richtext {
  border-color: #334155;
  border-top: none;
}
.dark trix-editor.admin-richtext:focus {
  border-color: var(--color-accent-light);
}

/* En plein écran, l'éditeur reprend une hauteur flexible pour remplir l'overlay
   (l'override doit être unlayered pour battre la hauteur figée ci-dessus). */
.admin-richtext-wrapper.is-fullscreen trix-editor.admin-richtext {
  height: auto;
  flex: 1;
  min-height: 50vh;
}

/*
 * Aperçu admin : la modale de prévisualisation rend le contenu avec
 * `class="trix-content prose-premium"` (rich_text_controller.js). Sur les pages
 * admin, actiontext.css (unlayered) impose `.trix-content h1 { line-height: 1.2 }`
 * et `h3 { 1.3 }`, qui battent les règles `.prose-premium` (layered) quelle que
 * soit la spécificité. On reprend la main en unlayered (chargé en dernier) pour
 * que l'interligne des titres de l'aperçu soit fidèle au rendu public (1.3).
 */
.prose-premium h1,
.prose-premium h2,
.prose-premium h3,
.prose-premium h4 {
  line-height: 1.3;
}

/*
 * Carte du monde interactive (chart_map_controller.js). Styles unlayered : ils
 * habillent des éléments injectés en JS (piste de lecture, repères de millésimes,
 * boutons lecture / zoom) que Tailwind ne voit pas au build.
 */
.chart-map-canvas {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

/* Contrôles de zoom — superposés en haut à droite de la carte. */
.chart-map-zoom {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 1;
}
.chart-map-zoom-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: #334155;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 0.375rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.chart-map-zoom-btn:hover { background: #fff; border-color: var(--color-accent); }
.dark .chart-map-zoom-btn {
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
}
.dark .chart-map-zoom-btn:hover { background: #1e293b; border-color: var(--color-accent-light); }

/* Barre de lecture des périodes. */
.chart-map-period-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.chart-map-play {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--color-accent, #1f4e79);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.chart-map-play:hover { filter: brightness(1.1); }
.chart-map-play.is-playing { background: #64748b; }

.chart-map-slider {
  flex: 1;
  height: 0.375rem;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(100, 116, 139, 0.25);
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
}
.chart-map-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--color-accent, #1f4e79);
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.chart-map-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--color-accent, #1f4e79);
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.dark .chart-map-slider { background: rgba(148, 163, 184, 0.3); }
.dark .chart-map-slider::-webkit-slider-thumb { border-color: #0f172a; }
.dark .chart-map-slider::-moz-range-thumb { border-color: #0f172a; }

.chart-map-period-badge {
  flex: none;
  min-width: 3.5rem;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent, #1f4e79);
}
.dark .chart-map-period-badge { color: var(--color-accent-light, #93c5fd); }

/* Repères de millésimes sous la piste. */
.chart-map-ticks {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 0.4rem;
}
.chart-map-tick {
  flex: 1;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.25rem 0.125rem;
  color: #64748b;
  background: none;
  border: none;
  border-top: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.chart-map-tick:hover { color: #334155; }
.chart-map-tick.is-active {
  color: var(--color-accent, #1f4e79);
  font-weight: 600;
  border-top-color: var(--color-accent, #1f4e79);
}
.dark .chart-map-tick { color: #94a3b8; }
.dark .chart-map-tick:hover { color: #e2e8f0; }
.dark .chart-map-tick.is-active {
  color: var(--color-accent-light, #93c5fd);
  border-top-color: var(--color-accent-light, #93c5fd);
}