/* ==========================================================================
   kdOne — Variables CSS et fondations visuelles
   Chargé avant tous les autres kdo-*.css
   ========================================================================== */

:root {
  /* ── Couleurs de marque ───────────────────────────── */
  --kdo-primary:        #2563eb;
  --kdo-primary-dark:   #1e40af;
  --kdo-primary-light:  #dbeafe;

  /* ── Couleurs d'état ──────────────────────────────── */
  --kdo-success:        #16a34a;
  --kdo-success-light:  #dcfce7;
  --kdo-danger:         #dc2626;
  --kdo-danger-light:   #fee2e2;
  --kdo-warning:        #ea580c;
  --kdo-warning-light:  #fed7aa;
  --kdo-info:           #0891b2;
  --kdo-info-light:     #cffafe;

  /* ── Neutres (gris) ───────────────────────────────── */
  --kdo-gray-50:        #f9fafb;
  --kdo-gray-100:       #f3f4f6;
  --kdo-gray-200:       #e5e7eb;
  --kdo-gray-300:       #d1d5db;
  --kdo-gray-400:       #9ca3af;
  --kdo-gray-500:       #6b7280;
  --kdo-gray-600:       #4b5563;
  --kdo-gray-700:       #374151;
  --kdo-gray-800:       #1f2937;
  --kdo-gray-900:       #111827;

  /* ── Sémantiques ──────────────────────────────────── */
  --kdo-bg:             #ffffff;
  --kdo-bg-alt:         var(--kdo-gray-50);
  --kdo-border:         var(--kdo-gray-200);
  --kdo-text:           var(--kdo-gray-800);
  --kdo-text-mute:      var(--kdo-gray-500);

  /* ── Espacements ──────────────────────────────────── */
  --kdo-space-xs:       4px;
  --kdo-space-sm:       8px;
  --kdo-space-md:       16px;
  --kdo-space-lg:       24px;
  --kdo-space-xl:       32px;
  --kdo-space-2xl:      48px;

  /* ── Typographie ──────────────────────────────────── */
  --kdo-font-family:    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kdo-font-mono:      ui-monospace, "Cascadia Code", Menlo, monospace;
  --kdo-text-xs:        12px;
  --kdo-text-sm:        13px;
  --kdo-text-base:      14px;
  --kdo-text-lg:        16px;
  --kdo-text-xl:        18px;
  --kdo-text-2xl:       22px;
  --kdo-weight-normal:  400;
  --kdo-weight-medium:  500;
  --kdo-weight-semi:    600;
  --kdo-weight-bold:    700;
  --kdo-line-normal:    1.5;
  --kdo-line-tight:     1.25;

  /* ── Rayons ───────────────────────────────────────── */
  --kdo-radius-sm:      4px;
  --kdo-radius-md:      8px;
  --kdo-radius-lg:      12px;
  --kdo-radius-full:    9999px;
  --kdo-border-width:   1px;

  /* ── Ombres ───────────────────────────────────────── */
  --kdo-shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --kdo-shadow-md:      0 4px 8px rgba(0,0,0,0.08);
  --kdo-shadow-lg:      0 10px 20px rgba(0,0,0,0.10);
  --kdo-shadow-xl:      0 20px 40px rgba(0,0,0,0.15);

  /* ── Transitions ──────────────────────────────────── */
  --kdo-transition-fast: 150ms ease;
  --kdo-transition-base: 250ms ease;
  --kdo-transition-slow: 400ms ease;

  /* ── Z-index ──────────────────────────────────────── */
  --kdo-z-base:         0;
  --kdo-z-sticky:       100;
  --kdo-z-header:       200;
  --kdo-z-dropdown:     300;
  --kdo-z-modal:        1000;
  --kdo-z-toast:        9000;
}

/* ── Reset minimal ──────────────────────────────────── */
.kdo-scope *, .kdo-scope *::before, .kdo-scope *::after { box-sizing: border-box; }
.kdo-scope { font-family: var(--kdo-font-family); font-size: var(--kdo-text-base); line-height: var(--kdo-line-normal); color: var(--kdo-text); }

/* ── Utilitaires ────────────────────────────────────── */
.kdo-flex          { display: flex; }
.kdo-flex-col      { flex-direction: column; }
.kdo-flex-center   { align-items: center; justify-content: center; }
.kdo-flex-between  { justify-content: space-between; align-items: center; }
.kdo-gap-xs        { gap: var(--kdo-space-xs); }
.kdo-gap-sm        { gap: var(--kdo-space-sm); }
.kdo-gap-md        { gap: var(--kdo-space-md); }
.kdo-gap-lg        { gap: var(--kdo-space-lg); }
.kdo-text-center   { text-align: center; }
.kdo-text-right    { text-align: right; }
.kdo-text-mute     { color: var(--kdo-text-mute); }
.kdo-text-bold     { font-weight: var(--kdo-weight-semi); }
.kdo-hidden        { display: none !important; }
.kdo-sr-only       { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Loader ciblé (réutilisé partout) ──────────────── */
.kdo-loader {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--kdo-gray-200);
  border-top-color: var(--kdo-primary);
  border-radius: var(--kdo-radius-full);
  animation: kdo-spin 800ms linear infinite;
}
.kdo-loader-zone {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  z-index: var(--kdo-z-sticky);
}
@keyframes kdo-spin {
  to { transform: rotate(360deg); }
}

/* ── Layout fiche 2 colonnes (gauche fixe, droite flexible) ── */
.kdo-fiche-layout {
  display: flex;
  gap: var(--kdo-space-lg);
  align-items: flex-start;
}
.kdo-fiche-col--left {
  width: 600px;
  flex-shrink: 0;
  min-width: 0;
}
.kdo-fiche-col--right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kdo-space-lg);
}
@media (max-width: 1100px) {
  .kdo-fiche-layout { flex-direction: column; }
  .kdo-fiche-col--left,
  .kdo-fiche-col--right { width: 100%; }
}

.kdo-fiche-header {
  display: flex;
  align-items: center;
  gap: var(--kdo-space-md);
  margin-bottom: var(--kdo-space-md);
}
.kdo-fiche-titre {
  font-size: var(--kdo-text-xl);
  font-weight: var(--kdo-weight-semi);
  color: var(--kdo-text);
  flex: 1;
}

/* ── Cartes de stats ────────────────────────────────── */
.kdo-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--kdo-space-sm);
  margin-bottom: var(--kdo-space-lg);
}
.kdo-stat-card {
  padding: var(--kdo-space-sm) var(--kdo-space-md);
  border-radius: var(--kdo-radius-md);
  border: var(--kdo-border-width) solid var(--kdo-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kdo-stat-label {
  font-size: var(--kdo-text-xs);
  font-weight: var(--kdo-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kdo-stat-value {
  font-size: var(--kdo-text-xl);
  font-weight: var(--kdo-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kdo-stat-detail {
  font-size: var(--kdo-text-xs);
  color: var(--kdo-gray-500);
}

.kdo-stat-card--blue   { background: #eff6ff; border-color: #bfdbfe; }
.kdo-stat-card--blue   .kdo-stat-label { color: #1d4ed8; }
.kdo-stat-card--blue   .kdo-stat-value { color: #1e40af; }
.kdo-stat-card--green  { background: #f0fdf4; border-color: #bbf7d0; }
.kdo-stat-card--green  .kdo-stat-label { color: #15803d; }
.kdo-stat-card--green  .kdo-stat-value { color: #166534; }
.kdo-stat-card--orange { background: #fff7ed; border-color: #fed7aa; }
.kdo-stat-card--orange .kdo-stat-label { color: #c2410c; }
.kdo-stat-card--orange .kdo-stat-value { color: #9a3412; }
.kdo-stat-card--red    { background: #fef2f2; border-color: #fecaca; }
.kdo-stat-card--red    .kdo-stat-label { color: #b91c1c; }
.kdo-stat-card--red    .kdo-stat-value { color: #991b1b; }
.kdo-stat-card--purple { background: #faf5ff; border-color: #e9d5ff; }
.kdo-stat-card--purple .kdo-stat-label { color: #7e22ce; }
.kdo-stat-card--purple .kdo-stat-value { color: #6b21a8; }
.kdo-stat-card--grey   { background: var(--kdo-gray-50); border-color: var(--kdo-border); }
.kdo-stat-card--grey   .kdo-stat-label { color: var(--kdo-gray-600); }
.kdo-stat-card--grey   .kdo-stat-value { color: var(--kdo-gray-800); }

/* ── Blocs commerce (devis / commandes / factures / avoirs) ── */
.kdo-commerce-count {
  font-size: 11px;
  font-weight: var(--kdo-weight-semi);
  padding: 2px 8px;
  border-radius: var(--kdo-radius-full);
  margin-left: 4px;
}
.kdo-commerce-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kdo-text-sm);
}
.kdo-commerce-row {
  cursor: pointer;
  border-bottom: var(--kdo-border-width) solid var(--kdo-border);
  transition: background var(--kdo-transition-fast);
}
.kdo-commerce-row:last-child { border-bottom: 0; }
.kdo-commerce-row:hover { background: var(--kdo-bg-alt); }
.kdo-commerce-row td { padding: 6px 8px; vertical-align: middle; }
.kdo-commerce-ref     { font-weight: var(--kdo-weight-semi); white-space: nowrap; }
.kdo-commerce-date    { color: var(--kdo-text-mute); white-space: nowrap; }
.kdo-commerce-objet   { color: var(--kdo-text); overflow: hidden; text-overflow: ellipsis; max-width: 250px; white-space: nowrap; }
.kdo-commerce-montant { font-weight: var(--kdo-weight-semi); text-align: right; white-space: nowrap; }
.kdo-commerce-statut  { text-align: center; white-space: nowrap; }
.kdo-commerce-badge {
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--kdo-radius-full);
  font-size: var(--kdo-text-xs);
  font-weight: var(--kdo-weight-medium);
}

/* ── Sélecteur de tags à 2 colonnes (classification, etc.) ── */
.kdo-classif-selected {
  display: flex;
  flex-direction: column;
}
.kdo-classif-item {
  display: flex;
  align-items: center;
  gap: var(--kdo-space-sm);
  padding: 6px var(--kdo-space-sm);
  border-bottom: var(--kdo-border-width) solid var(--kdo-border);
  font-size: var(--kdo-text-sm);
}
.kdo-classif-item:last-child { border-bottom: 0; }
.kdo-classif-item i { color: var(--kdo-success); }

.kdo-classif-grid {
  display: flex;
  gap: 0;
  min-height: 200px;
}
.kdo-classif-col {
  flex: 1;
  padding: var(--kdo-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--kdo-space-sm);
}
.kdo-classif-col + .kdo-classif-col { border-left: var(--kdo-border-width) solid var(--kdo-border); }
.kdo-classif-col-titre {
  font-weight: var(--kdo-weight-semi);
  font-size: var(--kdo-text-sm);
  color: var(--kdo-gray-500);
  display: flex;
  align-items: center;
  gap: var(--kdo-space-xs);
  margin-bottom: var(--kdo-space-xs);
}
.kdo-classif-col-titre--actifs { color: var(--kdo-primary); }

.kdo-classif-chips {
  display: flex;
  flex-direction: column;
  gap: var(--kdo-space-xs);
}
.kdo-classif-chip {
  background: var(--kdo-gray-100);
  border: var(--kdo-border-width) solid var(--kdo-border);
  color: var(--kdo-text);
  padding: 8px 12px;
  border-radius: var(--kdo-radius-sm);
  font-size: var(--kdo-text-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: all var(--kdo-transition-fast);
}
.kdo-classif-chip:hover { background: var(--kdo-gray-200); }
.kdo-classif-chip--active {
  background: var(--kdo-primary);
  border-color: var(--kdo-primary);
  color: #fff;
  font-weight: var(--kdo-weight-medium);
}
.kdo-classif-chip--active:hover { background: var(--kdo-primary-dark); }

.kdo-classif-empty {
  padding: var(--kdo-space-md);
  color: var(--kdo-text-mute);
  font-size: var(--kdo-text-sm);
  text-align: center;
  font-style: italic;
}

/* ── État vide (pour kdo-list, kdo-tabs, etc.) ────── */
.kdo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--kdo-space-sm) var(--kdo-space-md);
  color: var(--kdo-text-mute);
  gap: var(--kdo-space-xs);
}
.kdo-empty i, .kdo-empty svg {
  font-size: 18px;
  opacity: 0.4;
}
.kdo-empty-message {
  font-size: var(--kdo-text-sm);
}

/* Ingredient picker (modal grid groupé par catégorie) */
.kdo-ingr-picker { display: flex; flex-direction: column; gap: 16px; }
.kdo-ingr-picker-header {
  padding: 8px 12px;
  background: var(--kdo-bg-alt);
  border-radius: var(--kdo-radius-sm);
  font-size: var(--kdo-text-sm);
  color: var(--kdo-text);
}
.kdo-ingr-picker-list { color: var(--kdo-primary); font-weight: var(--kdo-weight-semi); }
.kdo-ingr-groupe { border-top: 1px solid var(--kdo-border); padding-top: 8px; }
.kdo-ingr-groupe h4 {
  margin: 0 0 8px 0;
  font-size: var(--kdo-text-base);
  font-weight: var(--kdo-weight-semi);
  color: var(--kdo-gray-700);
}
.kdo-ingr-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.kdo-ingr-btn {
  padding: 6px 14px;
  border: 1px solid var(--kdo-gray-200);
  border-radius: var(--kdo-radius-sm);
  background: var(--kdo-bg);
  color: var(--kdo-text);
  font-size: var(--kdo-text-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kdo-ingr-btn:hover { background: var(--kdo-bg-alt); }
.kdo-ingr-btn--on {
  background: var(--kdo-primary);
  color: white;
  border-color: var(--kdo-primary);
}