/* =====================================================
   Traçabilité PC — système de classes porté depuis la référence
   "KIDVIE — Module Traçabilité (charte marque blanche).html"
   (fichiers _files/system.css + le <style> de l'écran).
   =====================================================
   Toutes les règles sont scopées sous .trac-ref pour ne JAMAIS entrer en
   collision avec des classes génériques déjà prises ailleurs dans l'app
   (grep confirmé : .btn/.card/.pill/.row/.field/.seg/.tog/.tbl/.pager/.kpi
   existent déjà ~145 fois dans styles.css/styles-pilotage-suivi.css —
   cf. feedback_css_class_name_collision_pf_page).

   Les rôles de couleur de la référence (--brand/--brand-2/--ink/--line…)
   sont ALIASÉS vers les tokens KIDVIE existants plutôt que dupliqués :
   --brand suit l'accent du MODULE courant (--accent-600, posé par
   app.jsx selon le marque-blanche du tenant), jamais une couleur figée.
   --brand-2 (badges "Écran"/info) reste le ciel sémantique fixe, comme le
   reste de la charte (familles de couleur réservées aux badges d'état,
   jamais à un CTA). */
.trac-ref {
  --brand: var(--accent-600, var(--menthe-600));
  --brand-action: var(--brand);
  --brand-ink: var(--accent-800, var(--menthe-800));
  --brand-50: var(--accent-50, var(--menthe-50));
  --brand-200: var(--accent-200, color-mix(in srgb, var(--brand) 34%, #fff));
  --brand-2: var(--ciel-600);
  --brand-2-50: var(--ciel-50);
  --brand-2-ink: var(--ciel-800);
  --hdr-bg: linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 100%);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-tertiary, #8C8A82);
  --bg: var(--bg-secondary, #F7F6F2);
  --card: var(--bg-primary);
  --line: var(--border-tertiary);
  --line-2: var(--border-tertiary);
  --danger: var(--framboise-800);
  --danger-50: var(--framboise-50);
  --warn: var(--soleil-800);
  --warn-50: var(--soleil-50);
  --ok: var(--menthe-800);
  --ok-50: var(--menthe-50);
  --neutral: var(--text-secondary);
  --neutral-50: var(--bg-tertiary, #F1EFE8);
  --on-brand: #fff;
  --r-card: 12px;
  --r-el: 8px;
  --r-pill: 999px;
  --tap: 44px;
  color: var(--ink);
  font-size: 14px;
}

/* ───────── boutons ───────── */
.trac-ref .icon-btn { width: var(--tap); height: var(--tap); border-radius: var(--r-el); border: 0.5px solid var(--line); background: var(--card); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* ───────── badges ───────── */
.trac-ref .bdg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.trac-ref .bdg--brand { background: var(--brand-2-50); color: var(--brand-2-ink); }
.trac-ref .bdg--danger { background: var(--danger-50); color: var(--danger); }
.trac-ref .bdg--warn { background: var(--warn-50); color: var(--warn); }
.trac-ref .bdg--ok { background: var(--ok-50); color: var(--ok); }
.trac-ref .bdg--neutral { background: var(--neutral-50); color: var(--neutral); }

/* ───────── pills / segmented ───────── */
.trac-ref .pill { min-height: 36px; padding: 0 13px; border-radius: var(--r-pill); border: 0.5px solid var(--line); background: var(--card); font: inherit; font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.trac-ref .pill.on { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-ink); font-weight: 500; }
.trac-ref .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.trac-ref .seg { display: inline-flex; border: 0.5px solid var(--line); border-radius: var(--r-el); overflow: hidden; background: var(--card); }
.trac-ref .seg button { all: unset; cursor: pointer; padding: 0 12px; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.trac-ref .seg button.on { background: var(--brand-50); color: var(--brand-ink); font-weight: 500; }
.trac-ref .seg .n { font-size: 11px; background: var(--neutral-50); border-radius: 999px; padding: 0 6px; }
.trac-ref .cbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trac-ref .cbar .sp { flex: 1; }
.trac-ref .cbar .note { font-size: 12px; color: var(--ink-3); }

/* ───────── champs ───────── */
.trac-ref .field { display: flex; flex-direction: column; gap: 6px; }
.trac-ref .field label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.trac-ref .input { min-height: var(--tap); border: 0.5px solid var(--line); border-radius: var(--r-el); padding: 0 12px; font: inherit; background: var(--card); color: var(--ink); width: 100%; }
.trac-ref .input:focus { outline: 2px solid var(--brand-200); border-color: var(--brand); }
.trac-ref .field .help { font-size: 12px; color: var(--ink-3); }

/* ───────── cartes / KPI ───────── */
.trac-ref .card { background: var(--card); border: 0.5px solid var(--line); border-radius: var(--r-card); }
.trac-ref .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trac-ref .kpi { padding: 16px; }
.trac-ref .kpi .k { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.trac-ref .kpi .v { font-size: 26px; font-weight: 500; margin-top: 4px; }
.trac-ref .kpi .s { font-size: 12px; color: var(--ink-3); }
.trac-ref .kpi.k0 { background: color-mix(in srgb, var(--bg) 55%, var(--card)); }

/* ───────── bandeau clair à bulles ───────── */
.trac-ref .ban { position: relative; overflow: hidden; border-radius: var(--r-card); padding: 16px 22px; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 12%, var(--card)) 0%, color-mix(in srgb, var(--brand-2) 18%, var(--card)) 100%); border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--card)); }
.trac-ref .ban h2 { font-size: 19px; font-weight: 500; color: var(--ink); position: relative; z-index: 1; }
.trac-ref .ban p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); position: relative; z-index: 1; }
.trac-ref .ban .bb { position: absolute; border-radius: 50%; pointer-events: none; }

/* ───────── pane (panneau à en-tête, ex. Rappels/Sieste/Sourdine/Catégories) ───────── */
.trac-ref .pane .ph { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 0.5px solid var(--line-2); }
.trac-ref .pane .ph b { font-size: 14px; }
.trac-ref .pane .pb { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

/* ───────── liste de pièces ───────── */
.trac-ref .lst a { all: unset; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 0.5px solid var(--line-2); font-size: 13.5px; cursor: pointer; }
.trac-ref .lst a:first-child { border-top: 0; }
.trac-ref .lst a.on { background: var(--brand-50); color: var(--brand-ink); font-weight: 500; box-shadow: inset 3px 0 0 var(--brand); }
.trac-ref .lst a .n { margin-left: auto; font-size: 12px; color: var(--ink-3); }

/* ───────── toggle ───────── */
.trac-ref .tog { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 38px; height: 22px; min-height: 0; min-width: 0; border-radius: 999px; background: var(--line); position: relative; flex: none; border: none; cursor: pointer; padding: 0; margin: 0; font-size: 0; line-height: 0; }
.trac-ref .tog::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.trac-ref .tog.on { background: var(--brand-action); }
.trac-ref .tog.on::after { left: 18px; }
.trac-ref .tog:disabled { opacity: .45; cursor: not-allowed; }
.trac-ref .kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; border-top: 0.5px solid var(--line-2); }
.trac-ref .kv:first-of-type { border-top: 0; }

/* ───────── aperçu A4 ───────── */
.trac-ref .a4 { background: var(--card); border: 0.5px solid var(--line); border-radius: 6px; aspect-ratio: 1.414; padding: 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 14px rgba(31, 30, 26, .06); }
.trac-ref .a4 .top { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--ink-2); }
.trac-ref .a4 .lg { width: 22px; height: 22px; border-radius: 5px; background: var(--brand); color: var(--on-brand); font-size: 9px; display: flex; align-items: center; justify-content: center; }
.trac-ref .a4 .g2 { flex: 1; display: grid; grid-template-columns: 42px repeat(16, 1fr); gap: 1px; background: var(--line-2); border: 0.5px solid var(--line-2); }
.trac-ref .a4 .g2 i { background: var(--card); font-style: normal; }
.trac-ref .a4 .g2 i.h { background: color-mix(in srgb, var(--brand) 12%, var(--card)); }
.trac-ref .a4 .qr { width: 32px; height: 32px; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--ink) 0 3px, var(--card) 3px 6px); border: 1px solid var(--ink); flex: none; }

/* ───────── tuiles catégorie (icône sur fond pastel, 6 familles KIDVIE) ───────── */
.trac-ref .tile { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid; }
.trac-ref .t-soleil { background: var(--soleil-50); border-color: color-mix(in srgb, var(--soleil-600) 34%, #fff); color: var(--soleil-800); }
.trac-ref .t-ciel { background: var(--ciel-50); border-color: color-mix(in srgb, var(--ciel-600) 34%, #fff); color: var(--ciel-800); }
.trac-ref .t-menthe { background: var(--menthe-50); border-color: color-mix(in srgb, var(--menthe-600) 34%, #fff); color: var(--menthe-800); }
.trac-ref .t-framb { background: var(--framboise-50); border-color: color-mix(in srgb, var(--framboise-600) 34%, #fff); color: var(--framboise-800); }
.trac-ref .t-sable { background: var(--sable-50); border-color: color-mix(in srgb, var(--sable-600) 34%, #fff); color: var(--sable-800); }
.trac-ref .t-lavande { background: var(--lavande-50); border-color: color-mix(in srgb, var(--lavande-600) 34%, #fff); color: var(--lavande-800); }

/* ───────── tableau trié + paginé ───────── */
.trac-ref .tbl { width: 100%; border-collapse: collapse; }
.trac-ref .tbl th { font-size: 12px; color: var(--ink-2); text-align: left; padding: 10px 12px; border-bottom: 0.5px solid var(--line); white-space: nowrap; }
.trac-ref .tbl th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.trac-ref .tbl th.sorted { color: var(--brand-ink); }
.trac-ref .tbl td { padding: 10px 12px; border-bottom: 0.5px solid var(--line-2); vertical-align: middle; font-size: 13px; }
.trac-ref .tbl tbody tr:last-child td { border-bottom: 0; }
.trac-ref .tbl tbody tr:hover { background: var(--neutral-50); cursor: pointer; }
.trac-ref .pager { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 10px 12px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.trac-ref .pager .pg { display: flex; gap: 4px; }
.trac-ref .pager .pg button { min-width: 36px; height: 36px; border-radius: var(--r-el); border: 0.5px solid var(--line); background: var(--card); font: inherit; cursor: pointer; }
.trac-ref .pager .pg button.on { background: var(--brand-action); color: var(--on-brand); border-color: var(--brand-action); }

/* ───────── état vide ───────── */
.trac-ref .empty { background: var(--card); border: 0.5px dashed var(--line); border-radius: 12px; padding: 40px 20px; text-align: center; color: var(--ink-2); }
.trac-ref .empty h4 { margin: 8px 0 4px; color: var(--ink); font-size: 15px; }

/* ───────── Fiches : liste des pièces | fiches | aperçu A4 ───────── */
.trac-ref .trac-pf-cols { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 16px; align-items: start; }
/* Fiches | séparateur | Aperçu du relevé : la part de l'aperçu (--trac-pf-apercu) est posée par le séparateur glissable. */
.trac-ref .trac-pf-main { display: grid; grid-template-columns: minmax(0, 1fr) 16px var(--trac-pf-apercu, 34%); align-items: start; }
.trac-ref .trac-pf-main > * { min-width: 0; }
/* Zone fiches + aperçu : l'empilement dépend de SA largeur (menu latéral ouvert ou non), pas de celle de la fenêtre. */
.trac-ref .trac-pf-zone { container-type: inline-size; min-width: 0; }
.trac-ref .trac-pf-sep { align-self: stretch; min-height: 160px; display: flex; justify-content: center; cursor: col-resize; touch-action: none; user-select: none; border-radius: 6px; }
.trac-ref .trac-pf-sep::before { content: ""; width: 2px; height: 100%; border-radius: 2px; background: var(--line); }
.trac-ref .trac-pf-sep:hover::before, .trac-ref .trac-pf-sep.is-drag::before { width: 4px; background: var(--accent-600, var(--menthe-600)); }
.trac-ref .trac-pf-sep:focus-visible { outline: 2px solid var(--accent-600, var(--menthe-600)); outline-offset: 1px; }
.trac-ref .trac-pf-sep:focus-visible::before { background: var(--accent-600, var(--menthe-600)); }
.trac-ref .trac-pf-cols > * { min-width: 0; }
.trac-ref .trac-pf-apercu { position: sticky; top: 16px; }
.trac-ref .trac-pf-cols .pane .ph { flex-wrap: wrap; row-gap: 8px; }
.trac-ref .trac-pf-cols .kv span { min-width: 0; overflow-wrap: anywhere; }
/* Ligne de fiche sur 2 niveaux : nom (retour à la ligne propre) / méta / pastilles ; interrupteur fixe à droite, jamais recouvert. */
.trac-ref .trac-pf-fiche { display: grid; grid-template-columns: 15px minmax(0, 1fr) 38px; align-items: start; column-gap: 8px; padding: 8px 0; font-size: 13.5px; border-top: 0.5px solid var(--line-2); cursor: pointer; color: var(--ink); font-weight: 400; }
.trac-ref .trac-pf-fiche:first-of-type { border-top: 0; }
.trac-ref .trac-pf-fiche.is-sel { color: var(--brand-ink); font-weight: 500; }
.trac-ref .trac-pf-fiche > i { margin-top: 2px; }
.trac-ref .trac-pf-fiche > .tog { margin-top: 1px; justify-self: end; }
.trac-ref .trac-pf-fiche__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trac-ref .trac-pf-fiche__nom, .trac-ref .trac-pf-fiche__meta { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.trac-ref .trac-pf-fiche__tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin-top: 2px; }
/* .card (styles.css) coupe son contenu (overflow: hidden) : sans cette ligne la barre collante ne se colle jamais au bas de l'écran. */
.trac-ref .trac-pf-cols .card.pane { overflow: visible; }
/* Barre d'actions (Enregistrer · Valider la pièce) collée en bas du panneau : visible pendant tout le défilement. */
.trac-ref .trac-pf-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; background: var(--card); border-top: 0.5px solid var(--line); border-radius: 0 0 var(--r-card) var(--r-card); }
/* Étroit / mobile : une seule colonne, aperçu sous les fiches, pas de séparateur. */
@media (max-width: 819px) {
  .trac-ref .trac-pf-cols { grid-template-columns: minmax(0, 1fr); }
  .trac-ref .trac-pf-main { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .trac-ref .trac-pf-sep { display: none; }
  .trac-ref .trac-pf-apercu { position: static; }
}

@container (max-width: 479px) {
  .trac-ref .trac-pf-main { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .trac-ref .trac-pf-sep { display: none; }
  .trac-ref .trac-pf-apercu { position: static; }
}

@media (max-width: 1023px) {
  .trac-ref .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}