/* ============================================================
   JamDash — Composants
   Chaque composant : groupe .jd-<nom> + variables locales + classes.
   Unités rem/em uniquement.
   ============================================================ */

/* ---------- Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-med), color var(--t-med);
}
h1,h2,h3,h4,p { margin: 0; }
a { color: inherit; text-decoration: none; }
.jd-nav__item, .jd-subtab, [data-route], .jd-profile { cursor: pointer; }
button { cursor: pointer; border: none; background: none; color: inherit; }
::placeholder { color: var(--text-muted); opacity: 1; }
.jd-icon { width: 1.25em; height: 1.25em; stroke-width: 2; display: inline-block; vertical-align: middle; }

/* ============================================================
   LAYOUT
   ============================================================ */
.jd-layout { display: flex; min-height: 100vh; }
.jd-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-5) var(--space-6);
  width: var(--size-full);
}

/* ============================================================
   SIDEBAR (groupe navigation)
   ============================================================ */
.jd-sidebar {
  --sidebar-bg: var(--bg-sidebar);
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 0.0625rem solid var(--border);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: background var(--t-med), border-color var(--t-med);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.jd-logo { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2); position: relative; }
.jd-logo__mark { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; color: var(--color-accent); flex-shrink: 0; }
.jd-logo__mark img { max-width: var(--size-full); max-height: var(--size-full); }
.jd-logo__name { font-size: var(--fs-h2); font-weight: var(--fw-bold); white-space: nowrap; }

/* bouton repli/dépli : icône Lucide cercle+chevron */
.jd-collapse {
  margin-left: auto; flex-shrink: 0; padding: 0; border: 0; background: none;
  display: inline-grid; place-items: center;
  color: var(--color-accent); cursor: pointer;
  transition: filter var(--t-fast);
}
.jd-collapse:hover { filter: brightness(1.1); }
.jd-collapse .jd-icon { width: var(--collapse-size); height: var(--collapse-size); }

/* ===== état réduit : icônes seules (même taille qu'avant) ===== */
.jd-layout.is-collapsed .jd-sidebar { width: var(--sidebar-w-collapsed); overflow: visible; }
.jd-layout.is-collapsed .jd-logo__name { display: none; }
/* on masque le libellé texte SANS toucher à la taille des icônes */
.jd-layout.is-collapsed .jd-nav__item { justify-content: center; gap: 0; padding: 0.625rem 0; font-size: 0; }
/* icônes gardent leur taille normale (jd-icon est en em -> on repasse en rem) */
.jd-layout.is-collapsed .jd-nav__item .jd-icon { width: 1.25rem; height: 1.25rem; }
.jd-layout.is-collapsed .jd-logo { justify-content: center; }
/* en réduit, le bouton est centré SUR la ligne du bord droit (moitié dans la barre,
   moitié sur la page) — ancré au bord droit de la SIDEBAR, pas du logo */
.jd-layout.is-collapsed .jd-sidebar { position: sticky; }
.jd-layout.is-collapsed .jd-collapse {
  position: fixed; left: var(--sidebar-w-collapsed); top: 2.5rem;
  /* recentre le bouton sur la ligne : décalage d'une demi-taille */
  transform: translate(calc(var(--collapse-size) / -2), calc(var(--collapse-size) / -2));
  margin: 0; z-index: 20;
  background: var(--bg-card); border-radius: var(--radius-pill); box-shadow: var(--shadow-float);
}

.jd-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.jd-nav__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0.625em 0.75em;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  transition: background var(--t-fast), color var(--t-fast);
}
.jd-nav__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.jd-nav__item--active { background: var(--bg-active); color: var(--color-accent); font-weight: var(--fw-semibold); }
.jd-nav__item.jd-nav__item--danger { color: var(--color-danger); }
.jd-nav__item.jd-nav__item--danger:hover { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.jd-nav__item.jd-nav__item--danger .jd-icon { color: var(--color-danger); }
.jd-nav__sep { height: 0.0625rem; background: var(--border); margin: var(--space-2) var(--space-2); border: 0; }
.jd-nav--secondary { margin-top: auto; flex-shrink: 0; }
.jd-nav:not(.jd-nav--secondary) { flex-shrink: 0; }

/* ============================================================
   HEADER (groupe entête)
   ============================================================ */
.jd-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.jd-header__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
.jd-header__spacer { flex: 1; }

.jd-themetoggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--text-secondary);
}
.jd-themetoggle__switch {
  position: relative; width: 2.5rem; height: 1.375rem;
  background: var(--bg-active); border-radius: var(--radius-pill);
  transition: background var(--t-fast);
}
.jd-themetoggle__switch::after {
  content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem;
  width: 1rem; height: 1rem; border-radius: var(--radius-pill);
  background: var(--color-accent); transition: transform var(--t-fast);
}
:root[data-theme="dark"] .jd-themetoggle__switch::after { transform: translateX(1.125rem); }

.jd-profile { display: inline-flex; align-items: center; gap: var(--space-2); }
/* menu du profil (en haut à droite) */
.jd-profilemenu { position: relative; }
.jd-profilemenu .jd-profile { border: 0; background: transparent; color: inherit; font: inherit;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.jd-profilemenu .jd-profile:hover, .jd-profilemenu.is-open .jd-profile { background: var(--bg-active); }
.jd-profile__caret { transition: transform .15s ease; }
.jd-profilemenu.is-open .jd-profile__caret { transform: rotate(180deg); }
.jd-profilemenu__panel { display: none; position: absolute; right: 0; top: calc(100% + var(--space-1));
  min-width: 12rem; padding: var(--space-1); z-index: 50; background: var(--bg-card);
  border: 0.0625rem solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.12); }
.jd-profilemenu.is-open .jd-profilemenu__panel { display: block; }
.jd-profilemenu__item { display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-2) var(--space-3); border: 0; background: transparent; color: inherit; font: inherit;
  font-size: var(--fs-label); text-align: left; border-radius: var(--radius-sm); cursor: pointer; }
.jd-profilemenu__item:hover { background: var(--bg-hover); }
.jd-profilemenu__item--danger { color: var(--color-danger); }
.jd-profilemenu__item--danger:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.jd-profile__name { font-size: var(--fs-label); font-weight: var(--fw-medium); }

/* ============================================================
   CARD (groupe conteneur)
   ============================================================ */
.jd-card {
  --card-bg: var(--bg-card);
  --card-pad: 1.25em;
  --card-radius: var(--radius-lg);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
  border: 0.0625rem solid var(--border);
  transition: background var(--t-med), border-color var(--t-med);
}
.jd-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.jd-card__title { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }

/* ============================================================
   KPI (groupe indicateur)
   ============================================================ */
.jd-kpi { display: flex; flex-direction: column; gap: var(--space-2); }
.jd-kpi__top { display: flex; align-items: flex-start; justify-content: space-between; }
.jd-kpi__label { font-size: var(--fs-label); color: var(--text-secondary); font-weight: var(--fw-medium); }
.jd-kpi__icon { color: var(--text-muted); }

/* ============================================================
   BUTTON (groupe bouton)
   ============================================================ */
.jd-btn {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-pad: 0.625em 1em;
  --btn-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--btn-bg); color: var(--btn-fg);
  padding: var(--btn-pad); border-radius: var(--btn-radius);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  transition: filter var(--t-fast), background var(--t-fast);
}
.jd-btn:hover { filter: brightness(1.05); }
.jd-btn:disabled, .jd-btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; pointer-events: none; }
.jd-btn--primary { --btn-bg: var(--color-accent); }
.jd-btn--ghost   { --btn-bg: transparent; --btn-fg: var(--text-secondary); border: 0.0625rem solid var(--border); }
.jd-btn--ghost:hover { background: var(--bg-hover); }
.jd-btn--icon    { --btn-pad: 0.5em; --btn-bg: transparent; --btn-fg: var(--text-secondary); }
.jd-btn--danger  { --btn-bg: var(--color-danger); --btn-fg: var(--color-on-accent); }
.jd-btn--icon:hover { background: var(--bg-hover); }

/* ============================================================
   FORM (groupe formulaire) — inputs / select / textarea
   ============================================================ */
.jd-field { display: flex; flex-direction: column; gap: var(--space-2); }
.jd-field__label { font-size: var(--fs-label); color: var(--text-secondary); font-weight: var(--fw-medium); }
.jd-input, .jd-textarea {
  --field-bg: var(--bg-card);
  --field-border: var(--border);
  --field-radius: var(--radius-md);
  --field-pad: 0.625em 0.875em;
  width: var(--size-full);
  background: var(--field-bg);
  color: var(--text-primary);
  border: 0.0625rem solid var(--field-border);
  border-radius: var(--field-radius);
  padding: var(--field-pad);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.jd-input:focus, .jd-textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.jd-textarea { resize: vertical; min-height: 5rem; }

/* ============================================================
   TABLE (groupe tableau)
   ============================================================ */
.jd-table { width: var(--size-full); border-collapse: collapse; font-size: var(--fs-body); }
.jd-table__head th {
  text-align: left; font-size: var(--fs-label); font-weight: var(--fw-medium);
  color: var(--text-muted); padding: 0 var(--space-3) var(--space-3);
}
.jd-table__row td { padding: 0.75em var(--space-3); }
.jd-table__row { border-radius: var(--radius-md); }

/* lignes teintées selon statut (fond de ligne) */


/* badge de statut */


/* ============================================================
   CHART (groupe graphe) — conteneurs pour ECharts
   ============================================================ */
.jd-chart {
  --chart-accent: var(--color-accent);
  --chart-ghost:  var(--bg-ghost);
  --chart-grid:   var(--border);
  --chart-line:   var(--color-purple);
  --donut-yellow: var(--color-warning);
  --donut-blue:   var(--color-accent);
  width: var(--size-full);
}

/* ============================================================
   DROPDOWN (groupe filtre) — sélecteurs dans les titres de cards
   ============================================================ */


/* ============================================================
   GRID dashboard
   ============================================================ */
.jd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }
.jd-grid > .col-1 { grid-column: span 1; }
.jd-grid > .col-2 { grid-column: span 2; }
.jd-grid > .col-3 { grid-column: span 3; }
.jd-grid > .col-4 { grid-column: span 4; }

@media (max-width: 64rem) {
  .jd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jd-grid > .col-3, .jd-grid > .col-4 { grid-column: span 2; }
}
@media (max-width: 40rem) {
  .jd-grid { grid-template-columns: 1fr; }
  .jd-grid > * { grid-column: span 1 !important; }
  .jd-sidebar { display: none; }
}