/* Couche « sobre », chargée en dernier : moins de couleurs, badges et boutons discrets, pages qui tiennent dans l'écran.
   Règle de couleur : le texte reste neutre (slate) ; la couleur ne sert qu'à un point d'état (vert, jaune, rouge) ou à l'action principale. */

/* ---------- Badges : texte neutre + point d'état ---------- */
.badge{height:20px;padding:0 7px;border-radius:5px;font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;gap:6px;
  background:rgba(148,163,184,.08);color:var(--slate-300);border:1px solid rgba(148,163,184,.14)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--slate-500)}
.badge.ok,.badge.warn,.badge.bad,.badge.info,.badge.vio,.badge.grey,.badge.run{background:rgba(148,163,184,.08);color:var(--slate-300)}
.badge.ok::before{background:var(--ok)}
.badge.warn::before{background:var(--warn)}
.badge.bad::before{background:var(--danger)}
.badge.bad{color:#fca5a5}
.badge.info::before{background:var(--brand-400)}
.badge.vio::before,.badge.grey::before{background:var(--slate-500)}
.badge.run::before{background:var(--brand-400)}
.badge.run{animation:none}.badge.run::before{animation:pulse 1.6s ease-in-out infinite}
.badge.saas::before{background:var(--c,var(--slate-500))}
.badge.nodot::before{display:none}

/* ---------- Évolution (▲ ▼) : simple texte coloré, sans pastille ---------- */
.dl{height:auto;padding:0;border-radius:0;background:none!important;font-size:12px;font-weight:600}
.dl.flat{color:var(--slate-400)}

/* ---------- Boutons : plats, compacts ---------- */
button{height:32px;padding:0 12px;font-size:13px;border-radius:6px;border-color:var(--slate-700);background:transparent}
button:hover{background:rgba(148,163,184,.1)}
button.primary,.primary{background:var(--brand-600);border-color:var(--brand-600)}
button svg{width:15px;height:15px}
.dd-btn{height:32px;font-size:13px;border-radius:6px;background:transparent}
.dd-btn .count{background:var(--slate-800);color:var(--slate-200)}

/* ---------- Onglets et puces : soulignés et neutres, pas de pilules colorées ---------- */
.ws-tabs,.us-tabs,.sec-tabs{gap:0!important;border-bottom:1px solid var(--cx-border);flex-wrap:nowrap!important;overflow-x:auto}
.ws-tab{height:36px;padding:0 14px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--slate-400);font-weight:500;margin-bottom:-1px}
.ws-tab:hover{background:none;color:var(--slate-100)}
.ws-tab.on{background:none;border-color:var(--slate-100);color:#fff}
.ws-chip,.nw-chip{height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--slate-800);background:transparent;color:var(--slate-400);font-weight:500;font-size:12.5px}
.ws-chip:hover,.nw-chip:hover{background:rgba(148,163,184,.08);color:var(--slate-100)}
.ws-chip.on,.nw-chip.on{background:var(--slate-800);border-color:var(--slate-700);color:#fff}
.cx-seg button[aria-pressed=true],.cx-seg button.on{background:var(--slate-700);color:#fff}

/* ---------- Titres de section : sans point bleu ---------- */
.sec-h h2::before,.sc-head h2::before,h3.sc-h::before,#view>h2::before{display:none}
.sec-h{margin:20px 0 10px}

/* ---------- KPI compacts ---------- */
.metric{padding:12px 16px;gap:0}
.metric .l{font-size:12px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--slate-400)}
.metric .v{font-size:22px;margin-top:2px}
.metric.kpi-main .v{font-size:24px}
.metric .d{min-height:18px;margin-top:2px}
/* La mini-courbe a sa propre ligne : elle ne recouvre plus la note. */
.metric .spark{position:static;display:block;width:100%;height:22px;margin-top:6px;opacity:.7}
.card{padding:16px 18px}

/* ---------- Encadrés d'information : neutres ---------- */
.note,.ws-note{background:transparent;border:1px solid var(--cx-border);color:var(--slate-300)}
.note.warn{background:transparent;border-color:rgba(234,179,8,.3);color:var(--slate-200)}

/* ---------- Mise en page « tient dans l'écran » (ordinateur) ----------
   .fit : la page occupe exactement la hauteur visible ; .fit-fill prend le reste ; .pane défile en interne. */
.pane{background:var(--card);border:1px solid var(--cx-border);border-radius:10px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pane-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--cx-border);flex:none;min-height:44px}
.pane-h h2{margin:0;font-size:13.5px;font-weight:600;color:var(--slate-100);text-transform:none;letter-spacing:0}
.pane-h span,.pane-h small{color:var(--slate-500);font-size:12px}
.pane-b{padding:12px 14px;min-height:0}
.pane-b.flush{padding:0}
.pane table th{position:sticky;top:0;z-index:1;background:var(--nw-solid-2)}
.kstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--cx-border);border:1px solid var(--cx-border);border-radius:10px;overflow:hidden}
.kstrip>div{background:var(--card);padding:10px 14px;min-width:0;display:flex;flex-direction:column;gap:2px}
.kstrip small{color:var(--slate-400);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kstrip b{font-size:20px;font-weight:650;color:#fff;font-variant-numeric:tabular-nums;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kstrip em{font-style:normal;color:var(--slate-500);font-size:12px;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kstrip .up{color:#4ade80}.kstrip .down{color:#f87171}

@media (min-width:1024px) and (min-height:620px){
  #view:has(> .fit){padding-top:16px;padding-bottom:16px}
  .fit{height:calc(100dvh - var(--hdr) - 32px);display:flex;flex-direction:column;gap:12px;min-height:0}
  .fit>*{flex:none;margin:0!important}
  .fit .ph{margin-bottom:0}
  .fit>.fit-fill{flex:1 1 0;min-height:0}
  .fit .pane-b{overflow:auto;flex:1}
  .fit-cols{display:grid;gap:12px;min-height:0}
  .fit-cols>*{min-height:0}
}

/* ---------- Palette « entreprise » : graphite neutre, accent bleu acier réservé à l'action principale ---------- */
.brand{color:var(--slate-100)}
.side a.on{background:rgba(148,163,184,.12)!important;color:#fff!important;box-shadow:inset 2px 0 0 var(--brand-500)}
.side a.on svg{color:#fff}
.side a:hover:not(.on){background:rgba(148,163,184,.07)}
a{color:var(--brand-300)}
:focus-visible{outline-color:var(--brand-400)}

/* Actions destructives : bordure neutre, texte rouge atténué (la couleur ne crie plus). */
button.danger, .ws-btn.ws-danger { background: transparent !important; border-color: #2a2f36 !important; color: #e08a8a !important; }
button.danger:hover, .ws-btn.ws-danger:hover { border-color: rgba(224,138,138,.45) !important; background: rgba(224,138,138,.06) !important; }
.acct-btn.danger { background: transparent !important; border-color: #2a2f36 !important; color: var(--slate-300, #cbd5e1) !important; }
.acct-btn.danger:hover { color: #e08a8a !important; }

/* ---------- Dashboard ---------- */
.hm-kpis{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px}
.hm-kpis .nw-kpi{border-radius:10px;padding:10px 14px;grid-column:auto!important;grid-row:auto!important}
.hm-kpis .nw-kpi-l{text-transform:none;letter-spacing:0;font-size:12px;color:var(--slate-400)}
.hm-kpis .nw-kpi-v{font-size:20px;font-weight:650}
.hm-kpis .nw-kpi-d{margin-top:2px}
.hm-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:12px}
.hm-grid .nw-chart{border-radius:10px;display:flex;flex-direction:column;min-height:0;padding:12px 14px}
.hm-grid .nw-chart .nw-card-h{margin-bottom:6px}
.hm-grid .nw-chart .nw-card-h h3{font-size:13.5px;font-weight:600}
.hm-grid .nw-chip{height:26px;border-radius:6px;font-size:12px;padding:0 10px}
.hm-grid .nw-chip.on{background:rgba(148,163,184,.14);border-color:var(--slate-600);color:#fff}
.hm-side{display:flex;flex-direction:column;gap:12px;min-height:0}
.hm-side .hm-act{flex:1 1 0;min-height:0}
.hm-side .nw-rev-list{margin:0;padding:0;border:0;gap:8px}
.hm-act .nw-table{min-width:0;font-size:12.5px}
.hm-act .nw-table th{padding:8px 10px;font-size:12px;background:var(--nw-solid-2)}
.hm-act .nw-table td{padding:6px 10px}
.hm-act .nw-table td:nth-child(4) .badge{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
.hm-act .nw-table td:nth-child(3){max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-act .nw-table th:nth-child(2),.hm-act .nw-table td:nth-child(2){display:none}
@media (min-width:1024px) and (min-height:620px){
  .hm-grid .chart-wrap{flex:1 1 0;min-height:0}
  .hm-grid .chart{height:100%}
}
@media (max-width:1100px){.hm-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hm-grid{grid-template-columns:1fr}}
@media (max-width:640px){.hm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ---------- Clients ---------- */
.cu-page .cu-kpis{grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:var(--cx-border);border:1px solid var(--cx-border);border-radius:10px;overflow:hidden;margin:0}
.cu-page .cu-kpis .metric{border:0;border-radius:0;padding:10px 14px;box-shadow:none}
.cu-page .cu-kpis .metric .l{text-transform:none;letter-spacing:0;font-size:12px;color:var(--slate-400)}
.cu-page .cu-kpis .metric .v{font-size:20px;font-weight:650;margin-top:2px}
.cu-page .cu-kpis .metric .d{font-size:11.5px;color:var(--slate-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cu-page .cu-kpis .cu-kpi-warn .v{color:#e8b04f}
.cu-page .cu-tools{padding:10px 12px;border-radius:10px}
.cu-page .cu-res{border-radius:10px}
.cu-page .cu-count{padding:8px 14px}
.cu-page .cu-row td{padding:6px 12px}
.cu-page .cu-av{flex-basis:28px;width:28px;height:28px;font-size:11px}
.cu-page button.cu-sort{text-transform:none;letter-spacing:0;height:34px}
.cu-page .cu-pager{padding:8px 14px}
@media (min-width:1024px) and (min-height:620px){
  .cu-page .cu-res{display:flex;flex-direction:column}
  .cu-page .cu-tw{flex:1 1 0;min-height:0;overflow:auto}
  .cu-page .cu-table thead th{position:sticky;top:0;z-index:1;background:var(--nw-solid-2)}
}
@media (max-width:1100px){.cu-page .cu-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.cu-page .cu-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .cu-page .cu-row td{padding:5px 12px;white-space:nowrap;line-height:1.3}
  .cu-page .cu-nm small{font-size:11.5px}
}
@media (min-width:1024px){
  .cu-page .cu-table{min-width:0}
  .cu-page .cu-av{display:none}
  .cu-page .cu-c-name{min-width:170px}
  .cu-page .cu-row td{padding:4px 12px}
  .cu-page .cu-nm{line-height:1.25}
}
@media (min-width:1024px){.cu-page .cu-row td{padding:4px 8px}.cu-page button.cu-sort{padding:0 8px}}