/* ============================================================
   SAVIO — BACK-OFFICE DESIGN TOKENS (source unique, ne pas redéfinir)
   Marino structurel, naranja rationné (60/30/10), états clairs.
   ============================================================ */
:root {
  --sv-bg:            #f7f9fb;
  --sv-surface:       #ffffff;
  --sv-surface-alt:   #f1f4f8;
  --sv-border:        #e3e8ee;
  --sv-text:          #1c2a40;
  --sv-text-muted:    #5a6472;

  --sv-navy:          #14243f;
  --sv-navy-2:        #1d3454;
  --sv-on-navy:       #c3ccd9;

  --sv-accent:        #e8632a;
  --sv-accent-hover:  #cf5523;
  --sv-accent-soft:   #fdeee7;

  --sv-teal:          #2aa3a3;

  --sv-success: #2f8f5b;  --sv-success-soft: #eaf5ef;
  --sv-warning: #d68910;  --sv-warning-soft: #fdf3e3;
  --sv-error:   #c0392b;  --sv-error-soft:   #fdeceb;
  --sv-info:    #2c6cb0;  --sv-info-soft:    #eaf1f9;

  --sv-chart-1:#14243f; --sv-chart-2:#2aa3a3; --sv-chart-3:#e8632a;
  --sv-chart-4:#d68910; --sv-chart-5:#2c6cb0; --sv-chart-6:#7a5ea8;

  --sv-shadow-sm: 0 1px 3px rgba(20,36,63,.05);
  --sv-shadow-md: 0 4px 14px rgba(20,36,63,.10);
  --sv-radius: 8px;
}

:root[data-theme="dark"] {
  --sv-bg:          #0e1a2c;
  --sv-surface:     #14243f;
  --sv-surface-alt: #1a2c46;
  --sv-border:      #29415f;
  --sv-text:        #e6ebf2;
  --sv-text-muted:  #93a3b8;
  --sv-navy:        #0a1422;
  --sv-navy-2:      #1d3454;
  --sv-on-navy:     #c3ccd9;
  --sv-accent:      #f0743d;
  --sv-accent-hover:#e8632a;
  --sv-accent-soft: #3a2418;
  /* Couleurs sémantiques éclaircies pour contraste sur fond sombre */
  --sv-success:#4ba76f; --sv-success-soft:#16301f;
  --sv-warning:#e8a035; --sv-warning-soft:#322306;
  --sv-error:  #e05545; --sv-error-soft:  #331313;
  --sv-info:   #3d8ec7; --sv-info-soft:   #122538;
  --sv-teal:   #3bbebe;
  --sv-shadow-sm: 0 1px 3px rgba(0,0,0,.30);
  --sv-shadow-md: 0 4px 14px rgba(0,0,0,.40);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ----- Base ----- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--sv-bg);
  color: var(--sv-text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.sv-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ----- Badges (états) ----- */
.sv-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 9px;
  border-radius:20px; text-transform:uppercase; letter-spacing:.3px; line-height:1.6; }
.sv-badge--ok   { background:var(--sv-success-soft); color:var(--sv-success); }
.sv-badge--warn { background:var(--sv-warning-soft); color:var(--sv-warning); }
.sv-badge--err  { background:var(--sv-error-soft);   color:var(--sv-error); }
.sv-badge--info { background:var(--sv-info-soft);    color:var(--sv-info); }
.sv-badge--muted{ background:var(--sv-surface-alt);  color:var(--sv-text-muted); }

/* ----- Boutons ----- */
.sv-btn { border:none; border-radius:var(--sv-radius); padding:8px 16px; font-weight:600;
  font-size:13px; cursor:pointer; font-family:inherit; transition:background .15s, box-shadow .15s, transform .05s;
  display:inline-flex; align-items:center; gap:6px; }
.sv-btn:active { transform: translateY(1px); }
.sv-btn--primary { background:var(--sv-accent); color:#fff; }
.sv-btn--primary:hover { background:var(--sv-accent-hover); }
.sv-btn--ghost { background:var(--sv-surface); color:var(--sv-text); border:1px solid var(--sv-border); }
.sv-btn--ghost:hover { background:var(--sv-surface-alt); }
.sv-btn--dark { background:var(--sv-navy); color:#fff; }
.sv-btn--sm { padding:5px 10px; font-size:12px; }
.sv-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ----- Champs ----- */
.sv-input, .sv-select, .sv-textarea {
  width:100%; background:var(--sv-surface); color:var(--sv-text);
  border:1px solid var(--sv-border); border-radius:var(--sv-radius);
  padding:8px 10px; font-size:13px; font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
.sv-input:focus, .sv-select:focus, .sv-textarea:focus {
  outline:none; border-color:var(--sv-accent);
  box-shadow:0 0 0 3px var(--sv-accent-soft);
}
.sv-label { display:block; font-size:11px; font-weight:600; color:var(--sv-text-muted);
  text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px; }
/* En-tête de tableau : même look que sv-label MAIS reste une cellule (pas display:block) */
.sv-th { font-size:11px; font-weight:600; color:var(--sv-text-muted);
  text-transform:uppercase; letter-spacing:.3px; }

/* ----- Cartes / surfaces ----- */
.sv-card { background:var(--sv-surface); border:1px solid var(--sv-border);
  border-radius:var(--sv-radius); box-shadow:var(--sv-shadow-sm); }

/* ----- Scrollbars discrètes ----- */
.sv-scroll { scrollbar-width: thin; scrollbar-color: var(--sv-border) transparent; }
.sv-scroll::-webkit-scrollbar { width:8px; height:8px; }
.sv-scroll::-webkit-scrollbar-thumb { background:var(--sv-border); border-radius:8px; }

[x-cloak] { display:none !important; }

/* ----- Accessibilité : anneau de focus clavier ----- */
:focus-visible { outline:2px solid var(--sv-accent); outline-offset:2px; }
button:focus:not(:focus-visible) { outline:none; }

/* ----- Drag & drop (SortableJS) ----- */
.sv-ghost { opacity:.4; }
.sv-drag  { background:var(--sv-accent-soft) !important; }
.sv-handle{ cursor:grab; color:var(--sv-text-muted); }
.sv-handle:active { cursor:grabbing; }