/*
 * PRESTKA V15 — Dashboard /pilotage (FRONT_PAGE_pilotage, sketch 01 Variant B
 * « Stripe » retenu DG). Extrait du sketch — l'ancienne page portait un <style>
 * inline (dette CSP, AUDIT-04 §7.5).
 */

.pilotage {
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pilotage__head { display: grid; gap: var(--space-2); }
.pilotage__eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--prestka-light); margin: 0;
}
.pilotage__title {
  font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl);
  line-height: var(--leading-tight); margin: 0;
}

/* ===== Tuiles KPI (sketch 01, verbatim) ===== */
.kpi-up   { --kpi-stat: var(--status-booking-accepte); --kpi-stat-fg: #5BC25B; }
.kpi-down { --kpi-stat: var(--priority-urgent);        --kpi-stat-fg: #E2696F; }
.kpi-flat { --kpi-stat: var(--prestka-light);          --kpi-stat-fg: var(--prestka-light); }
/* Contraste des badges en Cloud Dancer */
[data-theme="light"] .kpi-up   { --kpi-stat-fg: #1d7a1d; }
[data-theme="light"] .kpi-down { --kpi-stat-fg: var(--priority-urgent); }

.kpi {
  position: relative; padding: var(--space-5); border-radius: var(--radius-xl);
  overflow: hidden; isolation: isolate;
  transition: transform var(--dur-normal) var(--ease-silk),
              border-color var(--dur-normal) var(--ease-silk),
              box-shadow var(--dur-normal) var(--ease-silk);
}
.kpi:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--kpi-stat) 45%, transparent);
  box-shadow: var(--shadow-xl), 0 24px 50px -28px color-mix(in srgb, var(--kpi-stat) 65%, transparent);
}

.kpi__halo { position: absolute; top: -55%; right: -25%; width: 240px; height: 240px;
  background: radial-gradient(circle, color-mix(in srgb, var(--kpi-stat) 26%, transparent), transparent 70%);
  pointer-events: none; opacity: 0; z-index: -1; transition: opacity var(--dur-slow) var(--ease-silk); }
.kpi:hover .kpi__halo { opacity: 1; }
.kpi--watch .kpi__halo { background: radial-gradient(circle, var(--gold-soft), transparent 70%); }
.kpi--watch:hover { border-color: var(--gold-stroke); box-shadow: var(--shadow-xl), var(--shadow-glow); }

.kpi__label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; margin: 0 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-2); }
.kpi__label .icon { width: 14px; height: 14px; color: var(--text-mute); }
.kpi__watch-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--space-2); border-radius: var(--radius-full); font-size: 9px; letter-spacing: 0.08em;
  color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-stroke); }
.kpi__value { font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: -0.025em;
  line-height: 1; margin: 0; color: var(--text-primary); }
/* margin-left en em (relatif au grand chiffre) : un vrai espace de mot pour « bookings »
   / « events », sans coller le « % » / « h » / « min » (demande DG). */
.kpi__value .unit { font-size: 0.42em; color: var(--text-tertiary); margin-left: 0.4em; }

/* LOT 5 — flex column : permet d'ANCRER la sparkline en bas de la tuile (margin-top:auto),
   pour que toutes les courbes d'une même ligne s'alignent quelle que soit la hauteur du
   contenu au-dessus (les tuiles à sous-label « +N ce mois » décalaient sinon la courbe). */
.kpi--stripe { padding-bottom: 0; display: flex; flex-direction: column; }
.kpi--stripe .kpi__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.kpi--stripe .kpi__value { font-size: var(--text-3xl); line-height: 1.1; }
.kpi--stripe .kpi__sublabel { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-2); }
.kpi--stripe .kpi__delta-badge { display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 2px var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  background: color-mix(in srgb, var(--kpi-stat) 18%, transparent); color: var(--kpi-stat-fg);
  border: 1px solid color-mix(in srgb, var(--kpi-stat) 30%, transparent); }
.kpi--stripe .kpi__delta-badge .icon { width: 12px; height: 12px; }
.kpi--stripe .kpi__spark-area { margin-top: auto; margin-inline: calc(-1 * var(--space-5)); margin-bottom: 0; height: 84px; width: calc(100% + 2 * var(--space-5)); display: block; flex: none; }
/* Tuile sans sparkline : restaure le padding bas mangé par .kpi--stripe */
.kpi--stripe.kpi--flatfoot { padding-bottom: var(--space-5); }

/* ===== Sparkline (trait toujours visible, tracé à l'apparition) ===== */
.spark-line {
  stroke: var(--kpi-stat); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--spark-len, 600);
  stroke-dashoffset: 0;
}
.reveal.in .spark-line { animation: spark-draw var(--dur-reveal) var(--ease-silk) both; }
@keyframes spark-draw { from { stroke-dashoffset: var(--spark-len, 600); } to { stroke-dashoffset: 0; } }
.spark-area-fill { opacity: 1; }
.spark-dot { fill: var(--kpi-stat); opacity: 1; }
.kpi--stripe:hover .spark-line { animation: spark-redraw var(--dur-slow) var(--ease-silk); }
@keyframes spark-redraw { from { stroke-dashoffset: var(--spark-len, 600); } to { stroke-dashoffset: 0; } }
.kpi--stripe:hover .spark-dot { animation: spark-dot-pulse 1.3s var(--ease-silk) infinite; }
@keyframes spark-dot-pulse { 0%, 100% { r: 3; } 50% { r: 5.5; } }
@media (prefers-reduced-motion: reduce) {
  .kpi--stripe:hover .spark-line, .kpi--stripe:hover .spark-dot { animation: none; }
  .reveal.in .spark-line { animation: none; }
}

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }

/* ===== LOT D : mode personnalisation des KPI (DnD grille + activer/désactiver) ===== */
.kpi-editbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl);
  margin-bottom: var(--space-5);
}
.kpi-editbar__title { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--text-primary); margin: 0; }
.kpi-editbar__hint  { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); margin: 2px 0 0; }

/* En édition : liseré interactif + cartes désactivées grisées + carte en cours de drag.
   padding-top réserve une bande pour l'overlay (poignée + interrupteur) → plus de
   collision avec le badge « Surveillé » / le badge de delta en haut-droite. */
.kpi-row--editing .kpi { outline: 1px dashed color-mix(in srgb, var(--brand-primary) 45%, transparent); outline-offset: 3px; padding-top: calc(var(--space-5) + 34px); }
.kpi-row--editing .kpi[data-kpi-off] { opacity: 0.45; }
.kpi.is-dragging { opacity: 0.5; }

/* Overlay d'édition (poignée de drag + interrupteur) au coin haut-droit de la carte */
.kpi-edit { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 3; display: inline-flex; align-items: center; gap: var(--space-2); }
.kpi-edit__grip {
  display: grid; place-items: center; width: 28px; height: 28px;
  font-size: 16px; line-height: 1; color: var(--text-secondary); user-select: none; cursor: grab;
  border-radius: var(--radius-sm); background: var(--glass-subtle-bg); border: 1px solid var(--line-strong);
}
.kpi-edit__grip:active { cursor: grabbing; }
.kpi-edit__toggle { cursor: pointer; margin: 0; }

/* ===== Différentiel événements (barre empilée par statut) ===== */
.kpi__stack { display: flex; height: 10px; border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-4); border: 1px solid var(--line); }
.kpi__stack-seg { height: 100%; }
.kpi__stack-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.kpi__stack-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); }
.kpi__stack-chip i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--seg-color, var(--text-tertiary)); }

/* ===== Graphiques sous la grille ===== */
.pilotage__charts { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 1023px) { .pilotage__charts { grid-template-columns: 1fr; } }

.pilot-chart { padding: var(--space-5); border-radius: var(--radius-xl); }
.pilot-chart__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-tertiary); margin: 0 0 var(--space-1); }
.pilot-chart__title { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg);
  color: var(--text-primary); margin: 0 0 var(--space-4); }
.trend-chart { width: 100%; height: 150px; display: block; }
.trend-chart rect { fill: var(--brand-primary); }
.trend-chart rect:hover { fill: var(--prestka-light); }
.trend-chart__axis { display: flex; justify-content: space-between; align-items: center; color: var(--text-tertiary);
  font-size: var(--text-xs); font-family: var(--font-mono); margin-top: var(--space-2); }
.trend-chart__hint { font-style: italic; }

/* ===== Top profils ===== */
.top-profiles__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.top-profiles__row { display: grid; grid-template-columns: 24px 34px 1fr auto; align-items: center; gap: var(--space-3); }
.top-profiles__rank { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.top-profiles__main { min-width: 0; }
.top-profiles__name { display: block; font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--weight-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-profiles__bar { display: block; height: 4px; border-radius: var(--radius-full); margin-top: 4px;
  background: linear-gradient(90deg, var(--prestka-light), var(--prestka-primary)); }
.top-profiles__hours { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.top-profiles__empty { display: flex; align-items: center; gap: var(--space-3); color: var(--text-tertiary);
  font-size: var(--text-sm); font-style: italic; }
.top-profiles__empty .icon { width: 18px; height: 18px; flex: none; }

/* ===== Alertes actionnables (LOT 6) ===== */
.pilot-alerts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pilot-alert { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--priority-urgent) 28%, transparent); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--priority-urgent) 8%, transparent); }
.pilot-alert__icon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-full); display: grid; place-items: center;
  background: color-mix(in srgb, var(--priority-urgent) 16%, transparent); color: var(--priority-urgent); }
.pilot-alert__icon .icon { width: 17px; height: 17px; }
.pilot-alert__body { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; flex: 1; }
.pilot-alert__count { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--text-primary); }
.pilot-alert__label { font-size: var(--text-sm); color: var(--text-secondary); }
.pilot-alert__cta { flex: none; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--brand-primary); text-decoration: none; padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
.pilot-alert__cta:hover { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.pilot-alerts__ok { display: flex; align-items: center; gap: var(--space-3); color: var(--status-booking-accepte);
  font-size: var(--text-sm); font-style: italic; }
.pilot-alerts__ok .icon { width: 18px; height: 18px; flex: none; }