/* ==========================================================================
   gyl/campaign-stats — démo de l'onglet Statistiques de la fiche campagne.
   CSS scoped sous .gyl-stats pour ne pas polluer le thème WP.
   ========================================================================== */

.gyl-stats { --gyl-bg: #f8fafc; --gyl-card: #ffffff; --gyl-border: #e5e7eb;
             --gyl-text: #0f172a; --gyl-muted: #64748b; --gyl-faint: #94a3b8;
             --gyl-primary: #0f766e; --gyl-primary-dark: #0d544f;
             --gyl-amber: #d97706; --gyl-green: #059669;
             --gyl-bl: #0f766e; --gyl-dup: #f59e0b; --gyl-fp: #94a3b8;
             color: var(--gyl-text); background: var(--gyl-bg);
             padding: 32px clamp(16px, 4vw, 48px); border-radius: 24px;
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
             box-sizing: border-box; }
.gyl-stats *, .gyl-stats *::before, .gyl-stats *::after { box-sizing: border-box; }
.gyl-stats__inner { max-width: 1200px; margin: 0 auto; }

/* Header */
.gyl-stats__hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.gyl-stats__hero-right { display: flex; align-items: center; gap: 10px; }
.gyl-stats__breadcrumb { font-size: 12px; color: var(--gyl-muted); margin: 0 0 4px; letter-spacing: .02em; }
.gyl-stats__title { font-size: 24px; font-weight: 700; margin: 0; color: var(--gyl-text); }
.gyl-stats__demo-badge { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
                         padding: 6px 12px; border-radius: 999px;
                         background: rgba(15, 118, 110, 0.1); color: var(--gyl-primary); }

/* Kebab menu */
.gyl-stats__kebab-wrap { position: relative; }
.gyl-stats__kebab { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
                    background: var(--gyl-card); border: 1px solid var(--gyl-border); border-radius: 10px;
                    color: var(--gyl-muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.gyl-stats__kebab:hover { background: rgba(15, 23, 42, 0.04); color: var(--gyl-text); }
.gyl-stats__kebab[aria-expanded="true"] { background: rgba(15, 118, 110, 0.08); color: var(--gyl-primary); border-color: rgba(15, 118, 110, 0.4); }
.gyl-stats__kebab-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px;
                         background: var(--gyl-card); border: 1px solid var(--gyl-border); border-radius: 12px;
                         box-shadow: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
                         padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 20; }
.gyl-stats__kebab-menu[hidden] { display: none; }
.gyl-stats__kebab-item { appearance: none; text-align: left; padding: 8px 12px; font-size: 13px;
                         color: var(--gyl-text); background: transparent; border: none; border-radius: 8px;
                         cursor: not-allowed; opacity: .55; }
.gyl-stats__kebab-item:hover { background: rgba(15,23,42,.03); opacity: .55; }

/* Filtres */
.gyl-stats__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.gyl-stats__presets { display: inline-flex; border: 1px solid var(--gyl-border); border-radius: 10px; overflow: hidden; background: var(--gyl-card); }
.gyl-stats__preset { appearance: none; background: transparent; border: none; padding: 6px 12px;
                     font-size: 12px; font-weight: 500; color: var(--gyl-muted); cursor: pointer;
                     border-right: 1px solid var(--gyl-border); transition: background .15s, color .15s; }
.gyl-stats__preset:last-child { border-right: none; }
.gyl-stats__preset:hover { background: rgba(15, 23, 42, 0.03); color: var(--gyl-text); }
.gyl-stats__preset.is-active { background: var(--gyl-primary); color: #fff; }
.gyl-stats__dates { display: inline-flex; align-items: center; gap: 6px; }
.gyl-stats__date { padding: 5px 8px; font-size: 12px; border: 1px solid var(--gyl-border); border-radius: 8px;
                   background: var(--gyl-card); color: var(--gyl-text); font-family: inherit; }
.gyl-stats__date:focus { outline: none; border-color: var(--gyl-primary); box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15); }
.gyl-stats__date-sep { font-size: 12px; color: var(--gyl-faint); }
.gyl-stats__date-apply { padding: 5px 12px; font-size: 12px; font-weight: 500; background: var(--gyl-primary);
                        color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background .15s; }
.gyl-stats__date-apply:hover { background: var(--gyl-primary-dark); }

/* Toggle */
.gyl-stats__toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gyl-muted); cursor: pointer; user-select: none; }
.gyl-stats__toggle-track { position: relative; display: inline-flex; align-items: center; width: 36px; height: 20px;
                           background: #cbd5e1; border-radius: 999px; transition: background .2s; }
.gyl-stats__toggle-track[data-active="true"] { background: var(--gyl-primary); }
.gyl-stats__toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.gyl-stats__toggle-thumb { display: inline-block; width: 16px; height: 16px; border-radius: 999px; background: #fff;
                           box-shadow: 0 1px 3px rgba(0,0,0,.2); transform: translateX(2px); transition: transform .2s; }
.gyl-stats__toggle-track[data-active="true"] .gyl-stats__toggle-thumb { transform: translateX(18px); }

/* Grid principale */
.gyl-stats__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) {
  .gyl-stats__grid[data-cols="both"] { grid-template-columns: 2fr 1fr; }
  .gyl-stats__grid[data-cols="chart"],
  .gyl-stats__grid[data-cols="tiles"] { grid-template-columns: 1fr; }
}
.gyl-stats__grid[data-cols="tiles"] .gyl-stats__tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.gyl-stats__chart-card,
.gyl-stats__tile,
.gyl-stats__donut-card,
.gyl-stats__bots-card,
.gyl-stats__pages-card { background: var(--gyl-card); border-radius: 18px; padding: 20px;
                        box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.02); }

.gyl-stats__chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.gyl-stats__chart-head h3 { font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--gyl-text); margin: 0; }
.gyl-stats__chart-sub { font-size: 12px; color: var(--gyl-muted); margin: 0; }
.gyl-stats__scales { display: inline-flex; border: 1px solid var(--gyl-border); border-radius: 10px; overflow: hidden; background: var(--gyl-card); }
.gyl-stats__scale { appearance: none; background: transparent; border: none; padding: 5px 10px;
                    font-size: 11px; font-weight: 500; color: var(--gyl-muted); cursor: pointer;
                    border-right: 1px solid var(--gyl-border); transition: background .15s, color .15s; }
.gyl-stats__scale:last-child { border-right: none; }
.gyl-stats__scale:hover { background: rgba(15, 23, 42, 0.03); color: var(--gyl-text); }
.gyl-stats__scale.is-active { background: var(--gyl-primary); color: #fff; }
.gyl-stats__chart-body { width: 100%; min-height: 220px; }
.gyl-stats__chart-body svg { width: 100%; height: 220px; display: block; }
.gyl-stats__chart-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--gyl-muted); }
.gyl-stats__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.gyl-stats__legend-item.is-filtered { display: none; }
.gyl-stats[data-show-filtered="true"] .gyl-stats__legend-item.is-filtered { display: inline-flex; }
.gyl-stats__dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--gyl-primary); }
.gyl-stats__dot.is-valid { background: var(--gyl-primary); }
.gyl-stats__dot.is-filtered { background: var(--gyl-amber); }
.gyl-stats__dot.is-bl { background: var(--gyl-bl); }
.gyl-stats__dot.is-dup { background: var(--gyl-dup); }
.gyl-stats__dot.is-fp { background: var(--gyl-fp); }

/* Tiles */
.gyl-stats__tiles { display: grid; gap: 12px; grid-auto-rows: min-content; }
.gyl-stats__tile { text-align: center; position: relative; }
.gyl-stats__tile-help { position: absolute; top: 10px; right: 10px;
                        display: inline-flex; align-items: center; justify-content: center;
                        width: 18px; height: 18px; border-radius: 999px;
                        border: 1px solid var(--gyl-border); color: var(--gyl-faint);
                        font-size: 11px; font-weight: 600; cursor: help;
                        transition: color .15s, border-color .15s; }
.gyl-stats__tile-help:hover, .gyl-stats__tile-help:focus { color: var(--gyl-text); border-color: var(--gyl-faint); outline: none; }
.gyl-stats__tooltip { position: absolute; top: calc(100% + 6px); right: -4px; min-width: 200px; max-width: 240px;
                      padding: 8px 10px; background: #1f2937; color: #fff; font-size: 11px; font-weight: 400;
                      line-height: 1.4; text-align: left; border-radius: 8px;
                      box-shadow: 0 6px 16px rgba(0,0,0,.18);
                      opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .15s, transform .15s;
                      z-index: 30; }
.gyl-stats__tile-help:hover .gyl-stats__tooltip,
.gyl-stats__tile-help:focus .gyl-stats__tooltip { opacity: 1; transform: translateY(0); }
.gyl-stats__tile-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gyl-faint); margin: 0 0 4px; }
.gyl-stats__tile-value { font-size: 24px; font-weight: 700; color: var(--gyl-text); margin: 0; }
.gyl-stats__tile-value--green { color: var(--gyl-green); }
.gyl-stats__tile-value--amber { color: var(--gyl-amber); }
.gyl-stats__tile-sub { font-size: 11px; color: var(--gyl-faint); margin: 4px 0 0; }

/* Donut + Bots */
.gyl-stats__filtered { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
@media (min-width: 768px) { .gyl-stats__filtered { grid-template-columns: 1fr 1fr; } }
.gyl-stats__card-title { font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--gyl-text); margin: 0 0 18px; }
.gyl-stats__donut-wrap { position: relative; display: flex; justify-content: center; }
.gyl-stats__donut { transform: rotate(-1deg); }
.gyl-stats__donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.gyl-stats__donut-rate { font-size: 28px; font-weight: 700; color: var(--gyl-text); }
.gyl-stats__donut-label { font-size: 11px; color: var(--gyl-faint); text-transform: uppercase; letter-spacing: .06em; }
.gyl-stats__donut-legend { display: grid; gap: 8px; margin-top: 16px; }
.gyl-stats__legend-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 13px; color: var(--gyl-text); }
.gyl-stats__legend-row span:last-child { font-weight: 600; color: var(--gyl-muted); font-variant-numeric: tabular-nums; }

.gyl-stats__bots-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gyl-stats__bot-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 8px; transition: background .15s; }
.gyl-stats__bot-row:nth-child(odd) { background: rgba(15,23,42,.025); }
.gyl-stats__bot-name { font-size: 13px; color: var(--gyl-text); }
.gyl-stats__bot-count { font-size: 12px; color: var(--gyl-muted); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pages consultées (accordion) */
.gyl-stats__pages-card { margin-top: 16px; padding: 0; }
.gyl-stats__accordion { overflow: hidden; }
.gyl-stats__accordion-summary { list-style: none; cursor: pointer; padding: 18px 20px;
                                display: flex; align-items: center; justify-content: space-between; gap: 12px;
                                user-select: none; transition: background .15s; }
.gyl-stats__accordion-summary::-webkit-details-marker { display: none; }
.gyl-stats__accordion-summary:hover { background: rgba(15, 23, 42, 0.02); }
.gyl-stats__accordion-title { margin: 0; }
.gyl-stats__accordion-chevron { color: var(--gyl-muted); transition: transform .2s ease; }
.gyl-stats__accordion[open] .gyl-stats__accordion-chevron { transform: rotate(180deg); }
.gyl-stats__accordion-body { padding: 0 20px 20px; }
.gyl-stats__pages-table-wrap { overflow-x: auto; }
.gyl-stats__pages-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gyl-stats__pages-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gyl-faint);
                             text-align: left; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--gyl-border); }
.gyl-stats__pages-table td { padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,.04); color: var(--gyl-text); }
.gyl-stats__pages-table .gyl-stats__num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.gyl-stats__pages-table tbody tr:last-child td { border-bottom: none; }
.gyl-stats__pages-table .gyl-stats__editor-cell { font-weight: 600; }

.gyl-stats__editor-note { margin-top: 16px; padding: 12px 16px; background: rgba(15, 118, 110, 0.06);
                         border-radius: 12px; font-size: 12px; color: var(--gyl-primary); }

/* Actions */
.gyl-stats__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.gyl-stats__btn { padding: 8px 16px; font-size: 13px; font-weight: 500; border-radius: 10px;
                  border: 1px solid var(--gyl-border); background: var(--gyl-card); color: var(--gyl-text);
                  cursor: not-allowed; opacity: .55; transition: opacity .15s; }
.gyl-stats__btn--primary { background: var(--gyl-primary); color: #fff; border-color: var(--gyl-primary); }
.gyl-stats__btn:hover { opacity: .55; /* on garde l'aspect grisé même au hover */ }

/* Bar chart SVG */
.gyl-stats__bar { fill: var(--gyl-primary); transition: fill .15s; }
.gyl-stats__bar.is-filtered { fill: var(--gyl-amber); }
.gyl-stats__bar:hover { filter: brightness(.92); }
.gyl-stats__axis-label { font-size: 10px; fill: var(--gyl-faint); }
.gyl-stats__axis-tick { stroke: rgba(15,23,42,.06); }