/* JamDash — composants faits maison (select, datepicker) — 100% tokens */

/* ===== SELECT maison — largeur ADAPTATIVE au contenu ===== */
.jd-cselect { position: relative; display: inline-block; width: max-content; font-size: var(--fs-body); }
/* mesure : options empilées invisibles fixent la largeur du composant */
.jd-cselect__sizer { visibility: hidden; height: 0; overflow: hidden; display: flex; flex-direction: column; }
.jd-cselect__panel { min-width: var(--size-full); }
.jd-cselect__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: var(--size-full); padding: var(--field-pad, 0.5rem 0.75rem);
  background: var(--bg-card); color: var(--text-primary);
  border: 0.0625rem solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.jd-cselect__trigger:hover { border-color: var(--color-accent-soft); }
.jd-cselect.is-open .jd-cselect__trigger {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.jd-cselect__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-cselect__caret { color: var(--text-muted); transition: transform var(--t-fast); flex-shrink: 0; }
.jd-cselect.is-open .jd-cselect__caret { transform: rotate(180deg); }

.jd-cselect__panel {
  position: fixed; min-width: var(--size-full); z-index: 300;
  background: var(--bg-card); border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-1); max-height: 16rem; overflow-y: auto;
  display: none; flex-direction: column; gap: 0.125rem;
}
.jd-cselect.is-open .jd-cselect__panel { display: flex; }
.jd-cselect__opt {
  display: flex; align-items: center; gap: var(--space-2);
  width: var(--size-full); text-align: left; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  font-size: var(--fs-body); transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.jd-cselect__opt:hover { background: var(--bg-hover); color: var(--text-primary); }
/* option cochée : PAS de fond, juste la coche + texte normal */
.jd-cselect__opt.is-active { color: var(--text-primary); font-weight: var(--fw-medium); }
.jd-cselect__reset { font-weight: var(--fw-semibold); color: var(--color-danger);
  border-bottom: 0.0625rem solid var(--border); border-radius: 0; margin-bottom: 0.125rem; }
.jd-cselect__reset:hover { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.jd-cselect__reset .jd-icon { color: var(--color-danger); }
.jd-cselect__check { width: 1rem; display: inline-flex; color: var(--color-accent); }
.jd-cselect__check .jd-icon { width: 1rem; height: 1rem; }

/* ===== PERIODE maison (semaine/mois) ===== */
.jd-period { position: relative; display: inline-block; }
.jd-period__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card); color: var(--text-primary);
  border: 0.0625rem solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
}
.jd-period__trigger:hover { border-color: var(--color-accent-soft); }
.jd-period__caret { color: var(--text-muted); transition: transform var(--t-fast); }
.jd-period.is-open .jd-period__caret { transform: rotate(180deg); }
.jd-period__pop {
  position: absolute; top: calc(var(--size-full) + 0.375rem); right: 0; z-index: 50;
  width: max-content; min-width: var(--size-full); max-width: 90vw; box-sizing: border-box;
  background: var(--bg-card); border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4);
  display: none;
}
.jd-period.is-open .jd-period__pop { display: block; }
.jd-period__modes { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap;
  white-space: nowrap; margin-bottom: var(--space-3); padding-bottom: var(--space-3);
  border-bottom: 0.0625rem solid var(--border); }
.jd-period__mode { white-space: nowrap; flex-shrink: 0; }
.jd-period__mode { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--text-secondary); background: var(--bg-hover); }
.jd-period__mode.is-active { background: var(--color-accent); color: var(--color-on-accent); }
.jd-period__clear { font-size: var(--fs-label); color: var(--color-accent); font-weight: var(--fw-semibold);
  margin-left: auto; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.jd-period__clear:hover { background: var(--bg-hover); }
.jd-period__clear--reset { color: var(--color-danger); }
.jd-period__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jd-period__chips--sm { margin-bottom: var(--space-3); }
.jd-period__chip { padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  background: var(--bg-hover); color: var(--text-primary); font-size: var(--fs-label);
  font-weight: var(--fw-medium); transition: all var(--t-fast); }
.jd-period__chip:hover { background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
.jd-period__chip.is-active { background: var(--color-accent); color: var(--color-on-accent); }
.jd-period__weeks { display: flex; flex-direction: column; gap: var(--space-1); }
.jd-period__week { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--text-primary); font-size: var(--fs-body); transition: background var(--t-fast); }
.jd-period__week:hover { background: var(--bg-hover); }
.jd-period__weeknum { font-weight: var(--fw-semibold); }
.jd-period__weeksub { font-size: var(--fs-small); color: var(--text-muted); }

/* ===== DATEPICKER maison ===== */
.jd-datepicker { position: relative; display: inline-block; }
.jd-datepicker__trigger {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--field-pad, 0.5rem 0.75rem);
  background: var(--bg-card); color: var(--text-primary);
  border: 0.0625rem solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
}
.jd-datepicker__trigger:hover { border-color: var(--color-accent-soft); }
.jd-datepicker__cal {
  position: absolute; top: calc(var(--size-full) + 0.375rem); left: 0; z-index: 50;
  background: var(--bg-card); border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-3); display: none; width: 16rem;
}
.jd-datepicker.is-open .jd-datepicker__cal { display: block; }
.jd-datepicker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.jd-datepicker__title { font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.jd-datepicker__nav { display: inline-flex; padding: var(--space-1); border-radius: var(--radius-sm); color: var(--text-secondary); }
.jd-datepicker__nav:hover { background: var(--bg-hover); }
.jd-datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.125rem; }
.jd-datepicker__dow { text-align: center; font-size: var(--fs-small); color: var(--text-muted); padding: var(--space-1) 0; }
.jd-datepicker__day {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-sm);
  font-size: var(--fs-label); color: var(--text-primary); transition: background var(--t-fast);
}
.jd-datepicker__day:hover { background: var(--bg-hover); }
.jd-datepicker__day.is-muted { color: var(--text-muted); }
.jd-datepicker__day.is-selected { background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--fw-semibold); }
.jd-datepicker__day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 0.0625rem var(--color-accent); color: var(--color-accent); font-weight: var(--fw-semibold); }

/* ===== BOUTON RÉINITIALISER DES FILTRES DE TABLEAU ===== */
.jd-tblreset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-danger);
  border: 0.0625rem solid color-mix(in srgb, var(--color-danger) 30%, var(--border));
  background: var(--bg-card);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.jd-tblreset:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border-color: var(--color-danger);
}
.jd-tblreset .jd-icon {
  color: var(--color-danger);
  width: 1rem;
  height: 1rem;
}