/* ============================================================
   NUKUNTCHE — Styles des composants
   Toutes les classes consomment les tokens de styles.css.
   ============================================================ */

/* ============================ BUTTON ============================ */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:var(--radius-lg);
  font-family:var(--font-sans); font-size:var(--text-md); font-weight:var(--fw-semibold);
  line-height:1; letter-spacing:var(--tracking-snug); white-space:nowrap;
  border:1px solid transparent; cursor:pointer; user-select:none; text-decoration:none;
  transition:background var(--transition-fast), border-color var(--transition-fast),
             color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ds-btn:hover{ text-decoration:none; }
.ds-btn:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring-width) var(--color-focus-ring); }
.ds-btn:active{ transform:translateY(.5px); }
.ds-btn:disabled,.ds-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.ds-btn__icon{ display:inline-flex; flex:0 0 auto; }
.ds-btn__icon svg{ display:block; width:1.15em; height:1.15em; }

.ds-btn--xs{ height:28px; padding:0 10px; font-size:var(--text-xs); gap:5px; border-radius:var(--radius-md); }
.ds-btn--sm{ height:34px; padding:0 13px; font-size:var(--text-sm); gap:6px; border-radius:var(--radius-md); }
.ds-btn--lg{ height:46px; padding:0 22px; font-size:var(--text-base); }
.ds-btn--block{ display:flex; width:100%; }
.ds-btn--icon{ width:40px; padding:0; }
.ds-btn--xs.ds-btn--icon{width:28px} .ds-btn--sm.ds-btn--icon{width:34px} .ds-btn--lg.ds-btn--icon{width:46px}

.ds-btn--primary{ background:var(--color-accent); color:var(--color-accent-contrast); box-shadow:var(--shadow-accent); }
.ds-btn--primary:hover:not(:disabled){ background:var(--color-accent-hover); }
.ds-btn--primary:active:not(:disabled){ background:var(--color-accent-active); }

.ds-btn--neutral{ background:var(--color-primary); color:var(--color-primary-contrast); box-shadow:var(--shadow-primary); }
.ds-btn--neutral:hover:not(:disabled){ background:var(--color-primary-hover); }
.ds-btn--neutral:active:not(:disabled){ background:var(--color-primary-active); }

.ds-btn--secondary{ background:var(--color-surface); color:var(--color-text); border-color:var(--color-border-strong); box-shadow:var(--shadow-xs); }
.ds-btn--secondary:hover:not(:disabled){ background:var(--color-surface-2); border-color:var(--color-border-strong); color:var(--color-heading); }

.ds-btn--ghost{ background:transparent; color:var(--color-text); }
.ds-btn--ghost:hover:not(:disabled){ background:var(--color-surface-2); color:var(--color-heading); }

.ds-btn--soft{ background:var(--color-accent-subtle); color:var(--color-accent-subtle-contrast); }
.ds-btn--soft:hover:not(:disabled){ background:var(--c-coral-100); }

.ds-btn--danger{ background:var(--color-danger); color:#fff; box-shadow:0 6px 18px rgba(220,38,38,.25); }
.ds-btn--danger:hover:not(:disabled){ background:var(--c-danger-600); }

.ds-btn--link{ height:auto; padding:0; background:none; color:var(--color-accent-subtle-contrast); }
.ds-btn--link:hover:not(:disabled){ text-decoration:underline; }

.ds-btn.is-loading{ color:transparent !important; pointer-events:none; position:relative; }
.ds-btn.is-loading::after{
  content:""; position:absolute; width:1.1em; height:1.1em; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; opacity:1; color:#fff;
  animation:ds-spin .6s linear infinite;
}
.ds-btn--secondary.is-loading::after,.ds-btn--ghost.is-loading::after,.ds-btn--soft.is-loading::after{ color:var(--color-text); }

/* ============================ BADGE ============================ */
.ds-badge{
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 10px; border-radius:var(--radius-full);
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--fw-semibold);
  line-height:1; letter-spacing:.005em; white-space:nowrap; border:1px solid transparent;
}
.ds-badge--sm{ height:20px; padding:0 8px; font-size:var(--text-2xs); gap:5px; }
.ds-badge--lg{ height:28px; padding:0 12px; font-size:var(--text-sm); }
.ds-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.ds-badge__icon svg{ display:block; width:1em; height:1em; }

.ds-badge--neutral{ background:var(--color-surface-sunken); color:var(--color-text-muted); }
.ds-badge--primary{ background:var(--color-primary-subtle); color:var(--color-primary-subtle-contrast); }
.ds-badge--accent{ background:var(--color-accent-subtle); color:var(--color-accent-subtle-contrast); }
.ds-badge--success{ background:var(--color-success-subtle); color:var(--color-success-text); }
.ds-badge--warning{ background:var(--color-warning-subtle); color:var(--color-warning-text); }
.ds-badge--danger{ background:var(--color-danger-subtle); color:var(--color-danger-text); }
.ds-badge--info{ background:var(--color-info-subtle); color:var(--color-info-text); }
/* variante contour */
.ds-badge--outline{ background:transparent; border-color:var(--color-border-strong); color:var(--color-text-muted); }

/* ============================ CARD ============================ */
.ds-card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; min-width:0;
}
.ds-card--elevated{ box-shadow:var(--shadow-md); border-color:var(--color-border-subtle); }
.ds-card--flat{ box-shadow:none; }
.ds-card--sunken{ background:var(--color-surface-2); box-shadow:none; }
.ds-card--interactive{ transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition); cursor:pointer; }
.ds-card--interactive:hover{ box-shadow:var(--shadow-md); border-color:var(--color-border-strong); transform:translateY(-1px); }
.ds-card__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--color-border-subtle); }
.ds-card__title{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--fw-bold); color:var(--color-heading); letter-spacing:var(--tracking-tight); }
.ds-card__subtitle{ font-size:var(--text-sm); color:var(--color-text-muted); margin-top:3px; }
.ds-card__body{ padding:var(--space-6); }
.ds-card__footer{ padding:var(--space-4) var(--space-6); border-top:1px solid var(--color-border-subtle); display:flex; align-items:center; gap:var(--space-3); }
.ds-card--pad-sm .ds-card__body{ padding:var(--space-4); }
.ds-card--pad-lg .ds-card__body{ padding:var(--space-8); }

/* KPI helper (réutilisé dans les écrans) */
.ds-kpi{ gap:var(--space-3); }
.ds-kpi__top{ display:flex; align-items:center; justify-content:space-between; }
.ds-kpi__icon{ width:38px; height:38px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; background:var(--color-accent-subtle); color:var(--color-accent-subtle-contrast); }
.ds-kpi__icon svg{ width:20px; height:20px; }
.ds-kpi__value{ font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--fw-bold); color:var(--color-heading); letter-spacing:var(--tracking-tight); font-variant-numeric:tabular-nums; }
.ds-kpi__label{ font-size:var(--text-sm); color:var(--color-text-muted); }

/* ============================ FIELD ============================ */
.ds-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ds-field__label{ font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--color-heading); display:flex; align-items:center; gap:6px; }
.ds-field__req{ color:var(--color-accent); }
.ds-field__optional{ font-weight:var(--fw-regular); color:var(--color-text-subtle); font-size:var(--text-xs); }
.ds-field__control{ position:relative; display:flex; align-items:center; }
.ds-input{
  width:100%; height:42px; padding:0 13px; border-radius:var(--radius-lg);
  background:var(--color-surface); border:1px solid var(--color-border-strong); color:var(--color-heading);
  font-family:var(--font-sans); font-size:var(--text-md); line-height:1.4;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
textarea.ds-input{ height:auto; min-height:96px; padding:11px 13px; resize:vertical; }
select.ds-input{ appearance:none; padding-right:38px; cursor:pointer; }
.ds-input::placeholder{ color:var(--color-text-subtle); }
.ds-input:hover:not(:disabled):not(:focus){ border-color:var(--c-slate-400); }
.ds-input:focus{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 var(--ring-width) var(--color-focus-ring); }
.ds-input:disabled{ background:var(--color-surface-2); color:var(--color-text-muted); cursor:not-allowed; }
.ds-input--sm{ height:34px; font-size:var(--text-sm); border-radius:var(--radius-md); }
.ds-input--lg{ height:48px; font-size:var(--text-base); }
.ds-field__control--has-prefix .ds-input{ padding-left:40px; }
.ds-field__control--has-suffix .ds-input{ padding-right:40px; }
.ds-field__affix{ position:absolute; display:flex; align-items:center; justify-content:center; color:var(--color-text-subtle); pointer-events:none; }
.ds-field__affix svg{ width:18px; height:18px; display:block; }
.ds-field__affix--prefix{ left:12px; } .ds-field__affix--suffix{ right:12px; }
.ds-field__chevron{ position:absolute; right:13px; pointer-events:none; color:var(--color-text-muted); display:flex; }
.ds-field__hint{ font-size:var(--text-xs); color:var(--color-text-muted); }
.ds-field__error{ font-size:var(--text-xs); color:var(--color-danger-text); display:flex; align-items:center; gap:5px; }
.ds-field__error svg{ width:14px; height:14px; flex:0 0 auto; }
.ds-field.is-invalid .ds-input{ border-color:var(--color-danger); }
.ds-field.is-invalid .ds-input:focus{ box-shadow:0 0 0 var(--ring-width) rgba(220,38,38,.22); }

/* ============================ TABLE ============================ */
.ds-table-wrap{ width:100%; overflow:auto; border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface); }
.ds-table{ width:100%; border-collapse:collapse; font-size:var(--text-md); }
.ds-table thead th{
  text-align:left; padding:12px 16px; background:var(--color-surface-2);
  font-size:var(--text-xs); font-weight:var(--fw-semibold); color:var(--color-text-muted);
  text-transform:uppercase; letter-spacing:var(--tracking-wide); white-space:nowrap;
  border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:1;
}
.ds-table tbody td{ padding:14px 16px; border-bottom:1px solid var(--color-border-subtle); color:var(--color-text); vertical-align:middle; }
.ds-table tbody tr:last-child td{ border-bottom:none; }
.ds-table tbody tr{ transition:background var(--transition-fast); }
.ds-table--hover tbody tr:hover{ background:var(--color-surface-2); }
.ds-table--striped tbody tr:nth-child(even){ background:var(--color-bg-subtle); }
.ds-table--compact thead th{ padding:9px 14px; }
.ds-table--compact tbody td{ padding:9px 14px; }
.ds-table .num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-mono); font-size:var(--text-sm); }
.ds-table .cell-strong{ color:var(--color-heading); font-weight:var(--fw-semibold); }
.ds-table th.num{ text-align:right; }

/* ============================ MODAL ============================ */
.ds-modal-overlay{
  position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center;
  padding:var(--space-6); background:rgba(11,18,32,.45); backdrop-filter:blur(3px);
  animation:ds-fade .15s ease;
}
.ds-modal{
  background:var(--color-surface); border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-xl);
  width:100%; max-width:520px; max-height:calc(100vh - 96px); display:flex; flex-direction:column;
  animation:ds-pop .18s cubic-bezier(.2,.8,.3,1);
}
.ds-modal--sm{ max-width:400px; } .ds-modal--lg{ max-width:680px; } .ds-modal--xl{ max-width:880px; }
.ds-modal__header{ display:flex; align-items:flex-start; gap:var(--space-4); padding:var(--space-6) var(--space-6) var(--space-4); }
.ds-modal__heading{ flex:1; min-width:0; }
.ds-modal__title{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--fw-bold); color:var(--color-heading); letter-spacing:var(--tracking-tight); }
.ds-modal__desc{ font-size:var(--text-sm); color:var(--color-text-muted); margin-top:4px; line-height:var(--leading-normal); }
.ds-modal__close{ flex:0 0 auto; width:34px; height:34px; border-radius:var(--radius-md); border:none; background:transparent; color:var(--color-text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--transition-fast),color var(--transition-fast); }
.ds-modal__close:hover{ background:var(--color-surface-2); color:var(--color-heading); }
.ds-modal__body{ padding:0 var(--space-6); overflow:auto; }
.ds-modal__icon{ flex:0 0 auto; width:44px; height:44px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; }
.ds-modal__icon--danger{ background:var(--color-danger-subtle); color:var(--color-danger-text); }
.ds-modal__icon--accent{ background:var(--color-accent-subtle); color:var(--color-accent-subtle-contrast); }
.ds-modal__icon svg{ width:22px; height:22px; }
.ds-modal__footer{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-3); padding:var(--space-5) var(--space-6) var(--space-6); margin-top:var(--space-2); }

/* ============================ EMPTY STATE ============================ */
.ds-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--space-12) var(--space-6); gap:var(--space-2); }
.ds-empty--sm{ padding:var(--space-8) var(--space-5); }
.ds-empty__art{ width:64px; height:64px; border-radius:var(--radius-2xl); display:flex; align-items:center; justify-content:center; background:var(--color-surface-2); color:var(--color-text-subtle); margin-bottom:var(--space-3); border:1px solid var(--color-border-subtle); }
.ds-empty__art svg{ width:30px; height:30px; }
.ds-empty__title{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--fw-bold); color:var(--color-heading); }
.ds-empty__desc{ font-size:var(--text-md); color:var(--color-text-muted); max-width:380px; line-height:var(--leading-normal); }
.ds-empty__actions{ display:flex; gap:var(--space-3); margin-top:var(--space-4); flex-wrap:wrap; justify-content:center; }

/* ============================ SPINNER / SKELETON ============================ */
.ds-spinner{ display:inline-block; border-radius:50%; border:2.5px solid var(--color-border-strong); border-top-color:var(--color-accent); animation:ds-spin .65s linear infinite; width:22px; height:22px; }
.ds-spinner--sm{ width:16px; height:16px; border-width:2px; }
.ds-spinner--lg{ width:32px; height:32px; border-width:3px; }
.ds-spinner--neutral{ border-top-color:var(--color-primary); }

.ds-skeleton{ display:block; border-radius:var(--radius-md); background:linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-sunken) 37%, var(--color-surface-2) 63%); background-size:400% 100%; animation:ds-shimmer 1.4s ease infinite; height:14px; }
.ds-skeleton--text{ height:12px; border-radius:var(--radius-sm); }
.ds-skeleton--circle{ border-radius:50%; }

.ds-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); padding:var(--space-12) var(--space-6); color:var(--color-text-muted); font-size:var(--text-sm); }

@keyframes ds-spin{ to{ transform:rotate(360deg); } }
@keyframes ds-shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@keyframes ds-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ds-pop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

/* ============================ LOGO ============================ */
.ds-logo{ display:inline-flex; align-items:center; gap:11px; }
.ds-logo__mark{ display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--c-midnight-700); position:relative; flex:0 0 auto; box-shadow:var(--shadow-sm); }
.ds-logo__text{ display:flex; flex-direction:column; line-height:1; }
.ds-logo__word{ font-family:var(--font-display); font-weight:var(--fw-bold); color:var(--color-heading); letter-spacing:var(--tracking-tight); }
.ds-logo__word b{ color:var(--color-accent); font-weight:var(--fw-bold); }
.ds-logo__tag{ font-family:var(--font-sans); color:var(--color-text-muted); font-weight:var(--fw-medium); margin-top:4px; }
.ds-logo--inverse .ds-logo__word{ color:#fff; }
.ds-logo--inverse .ds-logo__tag{ color:var(--c-midnight-200); }