@import url('/css/csp-utilities.css');

/* ── Espace client — tokens partagés Atelier + Dashboard ───────────
   Source de vérité charte beige/chaleureuse (espace.html).
───────────────────────────────────────────────────────────────────── */

:root,
body.dash-shell {
  /* Couleurs Atelier */
  --esp-accent:       #1a3cff;
  --esp-accent-dark:  #0f2adb;
  --esp-surface:      #ffffff;
  --esp-surface-2:    #f7f6f3;
  --esp-border:       #e8e6e0;
  --esp-text:         #1a1a18;
  --esp-text-2:       #4a4840;
  --esp-muted:        #7a7870;
  --esp-green:        #0a8c4a;
  --esp-radius:       14px;
  --esp-radius-sm:    8px;
  --esp-shadow:       0 2px 12px rgba(0, 0, 0, 0.07);
  --esp-shadow-md:    0 4px 24px rgba(0, 0, 0, 0.10);
  --esp-font-serif:   'Fraunces', Georgia, serif;
  --esp-font-sans:    'DM Sans', system-ui, sans-serif;

  /* Alias → tokens globaux dashboard (héritage Atelier) */
  --bg:           var(--esp-surface-2);
  --surface:      var(--esp-surface);
  --border:       var(--esp-border);
  --border-light: #f0eeea;
  --text:         var(--esp-text);
  --muted:        var(--esp-muted);
  --accent:       var(--esp-accent);
  --accent-hover: var(--esp-accent-dark);
  --accent-light: rgba(26, 60, 255, 0.08);
  --font-body:    var(--esp-font-sans);
  --font-title:   var(--esp-font-serif);
  --radius-sm:    var(--esp-radius-sm);
  --radius-md:    10px;
  --radius-lg:    var(--esp-radius);
  --shadow-sm:    var(--esp-shadow);
  --shadow-md:    var(--esp-shadow-md);
}

/* Segmented control — nav zones + onglets dashboard */
.esp-segmented {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  background: var(--esp-surface-2);
  border: 1px solid var(--esp-border);
  border-radius: 10px;
  padding: 3px;
}

.esp-segmented__item {
  flex-shrink: 0;
  font-family: var(--esp-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--esp-text-2);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--esp-radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.esp-segmented__item:hover {
  color: var(--esp-text);
  background: rgba(0, 0, 0, 0.04);
}

.esp-segmented__item.active,
.esp-segmented__item[aria-selected="true"] {
  color: var(--esp-accent);
  background: var(--esp-surface);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Chip contrôle header (mois, diagnostic, compte) */
.esp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--esp-border);
  border-radius: var(--esp-radius-sm);
  background: var(--esp-surface);
  color: var(--esp-text-2);
  font-family: var(--esp-font-sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.esp-chip:hover:not(:disabled) {
  color: var(--esp-text);
  border-color: #d8d4cc;
  background: var(--esp-surface-2);
}

.esp-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.esp-chip select {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
  outline: none;
}