/* ============================================================
   KEERA — COMPOSANTS MANQUANTS
   Style les classes que js/render/*.js émet déjà mais qu'aucune
   feuille ne définit : l'échelle d'escalade (suivi.js), la table
   du tableau de bord (dashboard.js) et la palette assureurs.

   À charger APRÈS app.css et tokens.css :
     <link rel="stylesheet" href="css/keera-components.css" />

   Aucun !important : ces sélecteurs n'existent nulle part ailleurs.
   ============================================================ */

/* ------------------------------------------------------------
   0. PALETTE ASSUREURS
   dashboard.js utilise var(--k-cat-1..4) — jamais définies.
   Cinq nuances d'une même famille, pas cinq couleurs.
------------------------------------------------------------ */
:root{
  --k-cat-1: var(--k-accent);
  --k-cat-2: var(--k-accent-2);
  --k-cat-3: var(--k-violet);
  --k-cat-4: #8FA7A0;
}
[data-theme="dark"]{
  --k-cat-4: #6B7F79;
}

/* ------------------------------------------------------------
   1. ÉCHELLE D'ESCALADE — suivi.js
   .c-esc > .c-esc__head (.c-esc__amt) + .c-ladder > .c-step
------------------------------------------------------------ */
.c-esc{
  background: var(--k-card);
  border: 1px solid var(--k-line);
  border-radius: var(--radius-xl, 18px);
  padding: 20px 22px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur, .28s) var(--ease-out, cubic-bezier(.2,.8,.3,1)),
              box-shadow var(--dur, .28s);
}
.c-esc:hover{ transform: translateY(-2px); box-shadow: var(--k-sh-card); }
/* Dossier en retard : liseré à gauche, gradué selon la gravité du geste en
   attente — ambre pour une relance, rouge à partir de la LRE. Pas de lavis de
   fond : il passait sous le texte et, sur cette page, la majorité des cartes
   est en retard, si bien qu'un fond teinté ne triait plus rien. */
.c-esc.esc-warn{ border-left: 3px solid var(--k-amber); }
.c-esc.esc-danger{ border-left: 3px solid var(--k-red); }

/* Le geste à poser, remonté en tête de carte. */
.c-esc__next{
  flex: 1;
  align-self: center;
  text-align: center;
  font-size: 11.5px;
  color: var(--k-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-esc__next::before{
  content: "";
  display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; border-radius: 50%; margin-right: 7px;
  background: var(--k-accent);
}
.c-esc.esc-warn .c-esc__next::before{ background: var(--k-amber); }
.c-esc.esc-danger .c-esc__next::before{ background: var(--k-red); }
@media (max-width: 880px){
  /* .c-esc__head n'autorise pas le retour à la ligne par défaut : sans ça le
     geste resterait coincé entre la référence et le montant. */
  .c-esc__head{ flex-wrap: wrap; }
  .c-esc__next{ flex: 0 0 100%; text-align: left; order: 3; margin-top: 4px; }
}

.c-esc__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.c-esc__head b{
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  letter-spacing: -.02em;
  display: block;
}
.c-esc__head span{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--label);
}
.c-esc__amt{ text-align: right; flex: 0 0 auto; }
.c-esc__amt b{
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.c-esc__amt span{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--label);
}
.c-esc.esc-warn .c-esc__amt span{ color: var(--k-amber); }
.c-esc.esc-danger .c-esc__amt span{ color: var(--k-red); }

/* --- Les crans --- */
.c-ladder{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-bottom: 4px;
}
.c-step{ position: relative; padding: 22px 10px 0 0; }
.c-step::before{
  content: "";
  position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: var(--k-line);
}
.c-step.is-done::before{ background: var(--k-accent); }
.c-step.is-now::before{ background: linear-gradient(90deg, var(--k-accent), var(--k-line)); }
.c-step > i{
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--k-card);
  box-shadow: inset 0 0 0 2px var(--k-line);
}
.c-step.is-done > i{
  background: var(--k-accent);
  box-shadow: inset 0 0 0 2px var(--k-accent);
}
.c-step.is-now > i{
  box-shadow: inset 0 0 0 3px var(--k-accent), 0 0 14px var(--k-accent);
  animation: vp-led 2s infinite;
}
.c-step b{
  display: block;
  font-size: 11.5px; font-weight: 600;
  color: var(--label);
  line-height: 1.35;
}
.c-step.is-done b{ color: var(--text-2); }
.c-step.is-now b{ color: var(--text); }
.c-step span{
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--label);
}
.c-step.is-now span{ color: var(--k-accent); }

@media (max-width: 880px){
  .c-ladder{ grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; }
  .c-step{ padding: 0 0 0 24px; }
  .c-step::before{ top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .c-step > i{ top: 2px; }
}

/* ------------------------------------------------------------
   2. TABLE DU TABLEAU DE BORD — dashboard.js (.tbl-dash)
------------------------------------------------------------ */
.tbl-dash{ width: 100%; border-collapse: collapse; }
.tbl-dash th{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--label);
  padding: 0 12px 12px;
  white-space: nowrap;
}
.tbl-dash th.col-num,
.tbl-dash td.num{ text-align: right; }
.tbl-dash td{
  padding: 13px 12px;
  border-top: 1px solid var(--k-line);
  font-size: 13px;
  vertical-align: middle;
}
.tbl-dash td.num{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.tbl-dash .cust{ font-weight: 600; }
.tbl-dash .muted{
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--label);
  margin-top: 2px;
}
.tbl-dash tbody tr{ transition: background var(--dur-fast, .18s); }
.tbl-dash .dash-ligne{ cursor: pointer; }
.tbl-dash .dash-ligne:hover{ background: var(--surface-sunken); }

/* ------------------------------------------------------------
   3. LED — utilisée par .c-step.is-now et .dash-ticker .live .dot
   (définie ici au cas où motion.css ne serait pas chargé)
------------------------------------------------------------ */
@keyframes vp-led{
  0%  { box-shadow: inset 0 0 0 3px var(--k-accent), 0 0 0 0 color-mix(in srgb, var(--k-accent) 50%, transparent); }
  70% { box-shadow: inset 0 0 0 3px var(--k-accent), 0 0 0 7px transparent; }
  100%{ box-shadow: inset 0 0 0 3px var(--k-accent), 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce){
  .c-esc, .c-step.is-now > i{ animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------
   4. GRILLE DE FICHES PRODUIT — catalog.js (renderProduits)
   .c-pcard-grid > .c-pcard (référence, désignation, chips, prix HT,
   actions Modifier/Supprimer). Pas de jauge de marge ni d'état de
   stock : la table produits n'a ni coût d'achat ni quantité en stock.
------------------------------------------------------------ */
.c-pcard-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.c-pcard{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.c-pcard:hover{
  border-color: var(--input-border-hover);
  box-shadow: var(--shadow-sm);
}
.c-pcard__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.c-pcard__ref{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--label);
}
.c-pcard__title{
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 4px 0 9px;
}
.c-pcard__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.c-pcard__chips span{
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--label);
}
.c-pcard__foot{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.c-pcard__lbl{
  display: block;
  font-size: 10px;
  color: var(--label);
  margin-bottom: 3px;
}
.c-pcard__price{
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce){
  .c-pcard{ transition: none !important; }
}

/* ------------------------------------------------------------
   5. PALETTE DE COMMANDES — globalsearch.js
   S'ouvre au clic sur la recherche globale de la topbar. Le fond
   (.s-modal-scrim) et l'entrée (.s-modal) viennent de motion.css ;
   ici on ne style que l'intérieur du panneau .c-pal.
------------------------------------------------------------ */
.c-pal{
  width: min(560px, 92vw);
  border-radius: var(--r-lg);
  border: 1px solid var(--k-line-2);
  background: var(--k-panel);
  overflow: hidden;
  box-shadow: var(--k-sh-float);
}
.c-pal__input{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--k-line);
}
.c-pal__input svg{ flex: none; color: var(--k-text-3); }
.c-pal__input input{
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--k-text);
  font-family: var(--ff-ui);
  font-size: 15px;
}
.c-pal__input input::placeholder{ color: var(--k-text-3); }
.c-pal__input kbd{
  flex: none;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--k-text-3);
}
.c-pal__body{
  max-height: 46vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}
.c-pal__body .pal-group{
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--k-text-3);
  padding: 10px 12px 6px;
}
.c-pal__body .c-cmd{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out);
}
.c-pal__body .c-cmd:hover,
.c-pal__body .c-cmd.is-sel{ background: var(--k-accent-dim); }
.c-pal__body .c-cmd__icon{
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  background: var(--k-tile);
}
.c-pal__body .c-cmd__icon svg{ width: 15px; height: 15px; color: var(--k-text-2); }
.c-pal__body .c-cmd.is-sel .c-cmd__icon{ background: var(--k-accent); }
.c-pal__body .c-cmd.is-sel .c-cmd__icon svg{ color: #04140F; }
.c-pal__body .c-cmd__label{ font-family: var(--ff-ui); font-size: 13.5px; font-weight: 500; }
/* Résultats de recherche (factures) : réutilise .search-result/.sr-* d'app.css,
   ajuste juste l'état sélection au clavier (même logique que .c-cmd.is-sel). */
.c-pal__body .search-result{ border-radius: var(--r-sm); border-bottom: none; background: none; }
.c-pal__body .search-result:hover,
.c-pal__body .search-result.is-sel{ background: var(--k-accent-dim); }
.c-pal__empty{ padding: 14px 12px; font-size: 13px; color: var(--k-text-3); }
.c-pal__foot{
  display: flex;
  gap: 16px;
  padding: 11px 18px;
  border-top: 1px solid var(--k-line);
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--k-text-3);
}

@media (prefers-reduced-motion: reduce){
  .c-pal__body .c-cmd{ transition: none !important; }
}

/* ------------------------------------------------------------
   6. RÉGLAGES — sous-navigation verticale (settings.js)
   .reglages-layout > .c-subnav (sections) + .reglages-content
   (panneaux .reglages-panneau, un seul visible à la fois).
------------------------------------------------------------ */
.reglages-layout{
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.c-subnav{
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 210px;
  flex: none;
  position: sticky;
  top: 0;
}
.c-subnav__item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.c-subnav__item svg{
  width: 17px;
  height: 17px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.c-subnav__item:hover{ color: var(--text); background: var(--surface-sunken); }
.c-subnav__item.is-active{
  color: var(--primary);
  background: var(--primary-50);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  font-weight: 600;
}
.reglages-content{ flex: 1; min-width: 0; }

@media (max-width: 880px){
  .reglages-layout{ flex-direction: column; }
  .c-subnav{ flex-direction: row; width: 100%; overflow-x: auto; position: static; }
  .c-subnav__item{ white-space: nowrap; }
}