/* ============================================================
   Dashboard "Cockpit" — claude-health
   Layout : toolbar + hero + 3-col actions + 2-col état + host strip + timeline
   Glass dark, palette --p-* (jaune), VLAN colors --v1..v6
   ============================================================ */

.dashboard-tab { padding: 0; height: 100%; display: flex; flex-direction: column; }

/* ===== Toolbar ============================================== */
.dash-toolbar {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .55rem .9rem;
  background: rgba(24, 24, 27, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(24px) saturate(180%);
  flex-shrink: 0;
}
.dash-toolbar .dash-title { color: var(--p-base); font-weight: 600; font-size: .85rem; font-family: 'Menlo', 'Consolas', monospace; text-transform: uppercase; letter-spacing: .12em; }
.dash-toolbar .dash-generated { color: #64748b; font-size: .72rem; font-family: 'Menlo', 'Consolas', monospace; }
.dash-toolbar .dash-spacer { flex: 1; }
.dash-toolbar .dash-live-lbl { font-size: .78rem; color: #d4d4d8; display: flex; align-items: center; gap: .35rem; }
.dash-toolbar button { background: rgba(39, 39, 42, .45); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; padding: .22rem .55rem; font-size: .78rem; cursor: pointer; }
.dash-toolbar button:hover { background: rgba(63, 63, 70, .65); border-color: rgba(var(--p-base-rgb), .3); }

/* ===== Scrollable area ===================================== */
.dashboard-tab > *:not(.dash-toolbar) {
  /* containers all participate in flex flow */
}
.dashboard-tab {
  /* reserve scroll on body of section by wrapping content */
}

.dashboard-tab .dash-hero,
.dashboard-tab .dash-row,
.dashboard-tab .dash-card,
.dashboard-tab .dash-kpis {
  margin: 0 1rem;
}
.dashboard-tab .dash-kpis { margin-top: .9rem; }
.dashboard-tab .dash-hero { margin-top: .9rem; }
.dashboard-tab > .dash-card:last-child { margin-bottom: 1.5rem; }

/* Wrapper scroll */
.dashboard-tab {
  overflow-y: auto;
}

/* ===== KPI strip (cartes synthétiques par domaine) ========== */
/* 6 cards sur la largeur complète (1 ligne) — toujours afficher les 6 KPI alignés */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .55rem;
}
@media (max-width: 1400px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .6rem .7rem .55rem;
  background: linear-gradient(135deg, rgba(39, 39, 42, .35), rgba(24, 24, 27, .55));
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid #475569;
  border-radius: 8px;
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
  text-align: left;
  font-family: inherit;
  color: inherit;
  min-width: 0;
}
.kpi-card:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(63, 63, 70, .45), rgba(24, 24, 27, .65)); }
.kpi-card.lvl-ok   { border-left-color: #4ade80; }
.kpi-card.lvl-warn { border-left-color: #fb923c; background: linear-gradient(135deg, rgba(251, 146, 60, .08), rgba(24, 24, 27, .55)); }
.kpi-card.lvl-crit { border-left-color: #ef4444; background: linear-gradient(135deg, rgba(239, 68, 68, .12), rgba(24, 24, 27, .55)); }
.kpi-card.lvl-crit .kpi-value { color: #ef4444; }
.kpi-card.lvl-warn .kpi-value { color: #fb923c; }

.kpi-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  padding-bottom: .3rem;
}
.kpi-head .kpi-info-btn { margin: 0; }
.kpi-head .kpi-score { margin-left: auto; }
.kpi-icon { font-size: 1.4rem; flex-shrink: 0; color: var(--p-base); display: inline-flex; align-items: center; }
.kpi-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #e4e4e7;
  letter-spacing: .01em;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Menlo', 'Consolas', monospace;
}

.kpi-main {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  min-width: 0;
}
.kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #4ade80;
  line-height: 1;
  font-family: 'Menlo', 'Consolas', monospace;
  letter-spacing: -.02em;
}
.kpi-label {
  font-size: .62rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'Menlo', 'Consolas', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .12rem .55rem;
}
.kpi-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .65rem;
  color: #94a3b8;
}
.kpi-lines .kl-k { color: #64748b; text-transform: lowercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-lines .kl-v { color: #d4d4d8; font-weight: 600; }
.kpi-lines li.lvl-warn .kl-v { color: #fb923c; }
.kpi-lines li.lvl-crit .kl-v { color: #ef4444; }

/* ===== Score KPI cards (v.33+) — refonte pour 6 KPI domaine ===== */
.kpi-score-card { display: flex; flex-direction: column; }
.kpi-score {
  display: flex; align-items: baseline; gap: .05rem;
  font-family: 'Menlo','Consolas',monospace;
  line-height: 1;
  flex-shrink: 0;
}
.kpi-score .ks-value { font-size: 1.85rem; font-weight: 700; color: inherit; }
.kpi-score .ks-unit  { font-size: 1rem; font-weight: 600; color: inherit; opacity: .75; }
.kpi-score.score-ok   { color: #4ade80; }
.kpi-score.score-warn { color: #fb923c; }
.kpi-score.score-crit { color: #ef4444; }

/* Carte teintée selon score — bordure ENTIÈRE 4 côtés cohérente, dégradé glass, frosted blur */
.kpi-card.kpi-score-card {
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  transition: border .2s, background .2s, box-shadow .2s;
}

/* Score-OK (≥90) : vert + tranche de verre épaisse à gauche */
.kpi-score-card.score-ok {
  border-top: 1px solid rgba(74, 222, 128, .4) !important;
  border-right: 1px solid rgba(74, 222, 128, .4) !important;
  border-bottom: 1px solid rgba(74, 222, 128, .4) !important;
  border-left: 2px solid rgba(74, 222, 128, .85) !important;
  background:
    radial-gradient(circle at top right, rgba(74, 222, 128, .14), transparent 60%),
    linear-gradient(135deg, rgba(74, 222, 128, .1) 0%, rgba(74, 222, 128, .03) 50%, rgba(24, 24, 27, .5) 100%) !important;
  box-shadow:
    inset 8px 0 14px -8px rgba(74, 222, 128, .55),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 4px 18px rgba(0, 0, 0, .28);
}
.kpi-score-card.score-ok:hover {
  border-top: 1px solid rgba(74, 222, 128, .65) !important;
  border-right: 1px solid rgba(74, 222, 128, .65) !important;
  border-bottom: 1px solid rgba(74, 222, 128, .65) !important;
  border-left: 2px solid rgba(74, 222, 128, 1) !important;
  box-shadow:
    inset 8px 0 16px -8px rgba(74, 222, 128, .7),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 24px rgba(74, 222, 128, .25),
    0 4px 18px rgba(0, 0, 0, .3);
}

/* Score-WARN (60-89) : orange + tranche de verre épaisse à gauche */
.kpi-score-card.score-warn {
  border-top: 1px solid rgba(251, 146, 60, .45) !important;
  border-right: 1px solid rgba(251, 146, 60, .45) !important;
  border-bottom: 1px solid rgba(251, 146, 60, .45) !important;
  border-left: 2px solid rgba(251, 146, 60, .9) !important;
  background:
    radial-gradient(circle at top right, rgba(251, 146, 60, .16), transparent 60%),
    linear-gradient(135deg, rgba(251, 146, 60, .12) 0%, rgba(251, 146, 60, .04) 50%, rgba(24, 24, 27, .5) 100%) !important;
  box-shadow:
    inset 8px 0 14px -8px rgba(251, 146, 60, .6),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 4px 18px rgba(0, 0, 0, .28);
}
.kpi-score-card.score-warn:hover {
  border-top: 1px solid rgba(251, 146, 60, .7) !important;
  border-right: 1px solid rgba(251, 146, 60, .7) !important;
  border-bottom: 1px solid rgba(251, 146, 60, .7) !important;
  border-left: 2px solid rgba(251, 146, 60, 1) !important;
  box-shadow:
    inset 8px 0 16px -8px rgba(251, 146, 60, .75),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 24px rgba(251, 146, 60, .28),
    0 4px 18px rgba(0, 0, 0, .3);
}

/* Score-CRIT (<60) : rouge + tranche de verre épaisse à gauche */
.kpi-score-card.score-crit {
  border-top: 1px solid rgba(239, 68, 68, .5) !important;
  border-right: 1px solid rgba(239, 68, 68, .5) !important;
  border-bottom: 1px solid rgba(239, 68, 68, .5) !important;
  border-left: 2px solid rgba(239, 68, 68, .95) !important;
  background:
    radial-gradient(circle at top right, rgba(239, 68, 68, .2), transparent 60%),
    linear-gradient(135deg, rgba(239, 68, 68, .15) 0%, rgba(239, 68, 68, .05) 50%, rgba(24, 24, 27, .5) 100%) !important;
  box-shadow:
    inset 8px 0 14px -8px rgba(239, 68, 68, .65),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 4px 18px rgba(0, 0, 0, .28);
}
.kpi-score-card.score-crit:hover {
  border-top: 1px solid rgba(239, 68, 68, .75) !important;
  border-right: 1px solid rgba(239, 68, 68, .75) !important;
  border-bottom: 1px solid rgba(239, 68, 68, .75) !important;
  border-left: 2px solid rgba(239, 68, 68, 1) !important;
  box-shadow:
    inset 8px 0 16px -8px rgba(239, 68, 68, .8),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 24px rgba(239, 68, 68, .3),
    0 4px 18px rgba(0, 0, 0, .3);
}
/* Ligne de 5 badges fixes (crit/Alarm/Warn/ok/Info) — toujours affichés, grid 5 cols compact */
.kpi-badges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .2rem;
  margin: .35rem 0 0;
  width: 100%;
}
.kpi-badge {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: .2rem;
  background: rgba(0, 0, 0, .35);
  border: 1px solid;
  border-radius: 4px;
  padding: .12rem .15rem;
  font-family: 'Menlo','Consolas',monospace;
  cursor: pointer;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  transition: background .12s, transform .12s, opacity .12s;
}
.kpi-badge:hover:not(:disabled):not(.kb-empty) { transform: translateY(-1px); }
.kpi-badge .kb-v { font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.kpi-badge .kb-k { font-size: .52rem; text-transform: uppercase; letter-spacing: .03em; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-badge:disabled { cursor: default; }
.kpi-badge.kb-empty { opacity: .4; }

/* Couleurs par niveau (alignées sur badges sidebar tc-b) */
.kpi-badge.kb-crit  { color: var(--v2);   border-color: var(--v2);   background: rgba(var(--v2-rgb), .12); }
.kpi-badge.kb-alarm { color: #f87171;     border-color: #f87171;     background: rgba(248, 113, 113, .1); }
.kpi-badge.kb-warn  { color: #fb923c;     border-color: #fb923c;     background: rgba(251, 146, 60, .12); }
.kpi-badge.kb-ok    { color: var(--v4);   border-color: var(--v4);   background: rgba(var(--v4-rgb), .1); }
.kpi-badge.kb-info  { color: #94a3b8;     border-color: #475569;     background: rgba(100, 116, 139, .1); }

.kpi-foot {
  font-size: .6rem;
  color: #64748b;
  font-family: 'Menlo', 'Consolas', monospace;
  margin-top: auto;
  padding-top: .3rem;
  border-top: 1px solid rgba(255, 255, 255, .04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Hero (bandeau santé globale) ========================= */
.dash-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, rgba(39, 39, 42, .42), rgba(24, 24, 27, .55));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}
.hero-status { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.hero-led {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 12px rgba(74, 222, 128, .6), inset 0 1px 1px rgba(255,255,255,.3);
  flex-shrink: 0;
  transition: background .25s, box-shadow .25s;
}
.hero-led.lvl-warn { background: #fb923c; box-shadow: 0 0 14px rgba(251, 146, 60, .7), inset 0 1px 1px rgba(255,255,255,.3); }
.hero-led.lvl-crit { background: #ef4444; box-shadow: 0 0 16px rgba(239, 68, 68, .8), inset 0 1px 1px rgba(255,255,255,.3); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(239, 68, 68, .6), inset 0 1px 1px rgba(255,255,255,.3); }
  50%      { box-shadow: 0 0 22px rgba(239, 68, 68, 1),   inset 0 1px 1px rgba(255,255,255,.3); }
}
.hero-text { min-width: 0; }
.hero-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e4e4e7;
  line-height: 1.25;
  font-family: 'Menlo', 'Consolas', monospace;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.hero-sub {
  font-size: .72rem;
  color: #94a3b8;
  font-family: 'Menlo', 'Consolas', monospace;
  margin-top: .15rem;
}

/* Hero cluster strip (5 mini VMs) */
.hero-cluster { display: flex; gap: .35rem; flex-wrap: wrap; }
.cluster-vm {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .06);
  border-left: 3px solid #475569;
  border-radius: 5px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .7rem;
  color: #d4d4d8;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cluster-vm:hover { background: rgba(63, 63, 70, .55); }
.cluster-vm .cv-led { width: 7px; height: 7px; border-radius: 50%; background: #475569; flex-shrink: 0; }
.cluster-vm.st-up   .cv-led { background: #4ade80; box-shadow: 0 0 4px rgba(74, 222, 128, .8); }
.cluster-vm.st-down .cv-led { background: #ef4444; box-shadow: 0 0 4px rgba(239, 68, 68, .8); }
.cluster-vm.st-up.vlan-1 { border-left-color: var(--v1); }
.cluster-vm.st-up.vlan-2 { border-left-color: var(--v2); }
.cluster-vm.st-up.vlan-3 { border-left-color: var(--v3); }
.cluster-vm.st-up.vlan-4 { border-left-color: var(--v4); }
.cluster-vm.st-down { background: rgba(239, 68, 68, .08); border-left-color: #ef4444; }

/* Hero counter pills */
.hero-counters { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .65rem;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  color: #d4d4d8;
  font-size: .72rem;
  font-family: 'Menlo', 'Consolas', monospace;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hero-pill:hover { background: rgba(63, 63, 70, .65); }
.hero-pill.lvl-ok   { color: #4ade80; border-color: rgba(74, 222, 128, .3); }
.hero-pill.lvl-warn { color: #fb923c; border-color: rgba(251, 146, 60, .35); background: rgba(251, 146, 60, .06); }
.hero-pill.lvl-crit { color: #ef4444; border-color: rgba(239, 68, 68, .4);  background: rgba(239, 68, 68, .08); }

/* ===== Rows ================================================== */
.dash-row { display: grid; gap: .85rem; margin-top: .85rem; }
.dash-row-3 { grid-template-columns: repeat(3, 1fr); }
.dash-row-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .dash-row-3 { grid-template-columns: 1fr; }
  .dash-row-2 { grid-template-columns: 1fr; }
}

/* ===== Card générique ======================================== */
.dash-card {
  background: linear-gradient(135deg, rgba(39, 39, 42, .35), rgba(24, 24, 27, .5));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: .75rem .85rem .65rem;
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .85rem;
}
.dash-card .card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding-bottom: .4rem;
}
.dash-card .card-head h3 {
  margin: 0;
  font-size: .78rem;
  color: #e4e4e7;
  letter-spacing: .04em;
  font-weight: 600;
}
.dash-card .card-hint {
  font-size: .65rem;
  color: #64748b;
  font-family: 'Menlo', 'Consolas', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dash-card .card-hint.ok   { color: #4ade80; }
.dash-card .card-hint.warn { color: #fb923c; }
.dash-card .card-hint.crit { color: #ef4444; }

.dash-card .card-list { display: flex; flex-direction: column; gap: .25rem; }
.dash-card .card-section { display: flex; flex-direction: column; gap: .25rem; }
.dash-card .cs-label {
  font-size: .62rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: 'Menlo', 'Consolas', monospace;
  margin-top: .25rem;
}
.dash-card .cs-label.warn { color: #fb923c; }

.dash-card .card-empty {
  color: #64748b;
  font-size: .72rem;
  font-style: italic;
  text-align: center;
  padding: .8rem .4rem;
}
.dash-card .card-empty.crit { color: #ef4444; font-style: normal; }

.dash-card .card-foot {
  margin-top: auto;
  padding-top: .4rem;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.dash-card .card-foot a {
  color: #64748b;
  font-size: .68rem;
  font-family: 'Menlo', 'Consolas', monospace;
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .15s;
}
.dash-card .card-foot a:hover { color: var(--p-base); }

/* ===== Row wrapper + expand inline =========================== */
.row-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ===== Row item (cards alerts/findings/backlog/tasks) ======== */
.row-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .04);
  border-left: 3px solid #475569;
  border-radius: 5px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .72rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.row-item:hover { background: rgba(0, 0, 0, .32); }
.row-item.is-expanded {
  border-radius: 5px 5px 0 0;
  border-bottom-color: transparent;
}
.row-item.lvl-crit { border-left-color: #ef4444; background: rgba(239, 68, 68, .07); }
.row-item.lvl-warn { border-left-color: #fb923c; background: rgba(251, 146, 60, .05); }
.row-item.lvl-ok   { border-left-color: #4ade80; }
.row-item.crit     { border-left-color: #ef4444; }
.row-item.warn     { border-left-color: #fb923c; }

.row-item .ri-tag {
  font-size: .58rem;
  font-weight: 700;
  padding: .12rem .35rem;
  border-radius: 3px;
  letter-spacing: .04em;
  text-align: center;
  min-width: 38px;
  background: rgba(255, 255, 255, .06);
  color: #d4d4d8;
  border: 1px solid rgba(255, 255, 255, .08);
}
.row-item .ri-tag.tag-crit, .row-item .ri-tag.tag-critical { background: rgba(239, 68, 68, .25); color: #fecaca; border-color: rgba(239, 68, 68, .4); }
.row-item .ri-tag.tag-error                                 { background: rgba(239, 68, 68, .2);  color: #fecaca; border-color: rgba(239, 68, 68, .35); }
.row-item .ri-tag.tag-high                                  { background: rgba(251, 146, 60, .2);  color: #fed7aa; border-color: rgba(251, 146, 60, .4); }
.row-item .ri-tag.tag-warn, .row-item .ri-tag.tag-warning   { background: rgba(251, 146, 60, .18); color: #fed7aa; border-color: rgba(251, 146, 60, .35); }
.row-item .ri-tag.tag-medium                                { background: rgba(234, 179, 8, .18);  color: #fde68a; border-color: rgba(234, 179, 8, .35); }
.row-item .ri-tag.tag-low, .row-item .ri-tag.tag-info       { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
.row-item .ri-tag.tag-p0 { background: rgba(239, 68, 68, .25);   color: #fecaca; border-color: rgba(239, 68, 68, .4); }
.row-item .ri-tag.tag-p1 { background: rgba(251, 146, 60, .22); color: #fed7aa; border-color: rgba(251, 146, 60, .4); }
.row-item .ri-tag.tag-p2 { background: rgba(234, 179, 8, .18);   color: #fde68a; border-color: rgba(234, 179, 8, .35); }
.row-item .ri-tag.tag-p3 { background: rgba(148, 163, 184, .15); color: #cbd5e1; }
.row-item .ri-tag.tag-overdue { background: rgba(251, 146, 60, .25); color: #fed7aa; border-color: rgba(251, 146, 60, .45); }
.row-item .ri-tag.tag-task    { background: rgba(var(--p-base-rgb), .18); color: var(--p-base); border-color: rgba(var(--p-base-rgb), .3); }

.row-item .ri-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.row-item .ri-title { color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.row-item .ri-pin   { color: var(--p-base); display: inline-flex; align-items: center; vertical-align: middle; margin-right: .15rem; }
.row-item .ri-meta  { color: #64748b; font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item .ri-time  { color: #94a3b8; font-size: .65rem; white-space: nowrap; }

.row-item .ri-act {
  background: rgba(var(--p-base-rgb), .12);
  border: 1px solid rgba(var(--p-base-rgb), .35);
  color: var(--p-base);
  border-radius: 4px;
  padding: .15rem .45rem;
  font-size: .72rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.row-item .ri-act:hover { background: rgba(var(--p-base-rgb), .25); }
.row-item .ri-act:disabled { opacity: .55; cursor: not-allowed; }
.row-item .ri-act.ri-open {
  background: rgba(148, 163, 184, .12);
  border-color: rgba(148, 163, 184, .3);
  color: #cbd5e1;
}
.row-item .ri-act.ri-open:hover { background: rgba(148, 163, 184, .25); color: #fff; }

/* ===== Expand block (rx-*) ==================================== */
.row-expand {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .04);
  border-top: none;
  border-left: 3px solid rgba(var(--p-base-rgb), .35);
  border-radius: 0 0 5px 5px;
  padding: .55rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .7rem;
  margin-bottom: .25rem;
}
.row-wrap .row-item.lvl-crit + .row-expand { border-left-color: #ef4444; }
.row-wrap .row-item.lvl-warn + .row-expand { border-left-color: #fb923c; }
.row-wrap .row-item.warn + .row-expand     { border-left-color: #fb923c; }
.row-wrap .row-item.crit + .row-expand     { border-left-color: #ef4444; }

.rx-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: .5rem;
  align-items: start;
}
.rx-k {
  color: #64748b;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-top: .12rem;
}
.rx-v {
  color: #d4d4d8;
  font-size: .72rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.rx-v code {
  background: rgba(255, 255, 255, .06);
  padding: .04rem .25rem;
  border-radius: 3px;
  font-size: .68rem;
}
.rx-v .lvl-ok   { color: #4ade80; }
.rx-v .lvl-warn { color: #fb923c; }
.rx-v .lvl-crit { color: #ef4444; }
.rx-pre {
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 4px;
  padding: .35rem .5rem;
  margin: .15rem 0 0;
  font-size: .66rem;
  color: #cbd5e1;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}
.rx-output { max-height: 240px; }
.rx-empty { color: #64748b; font-style: italic; font-size: .7rem; }

/* Actions inside finding expand */
.rx-actions { display: flex; flex-direction: column; gap: .35rem; }
.rx-action {
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .05);
  border-left: 2px solid rgba(148, 163, 184, .4);
  border-radius: 4px;
  padding: .35rem .5rem;
}
.rx-action.risk-safe   { border-left-color: #4ade80; }
.rx-action.risk-low    { border-left-color: #4ade80; }
.rx-action.risk-medium { border-left-color: #fb923c; }
.rx-action.risk-high   { border-left-color: #ef4444; }
.rx-action.risk-destructive { border-left-color: #b91c1c; }
.rx-act-head { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }
.rx-act-label { color: #e4e4e7; font-size: .7rem; flex: 1 1 auto; min-width: 200px; }
.rx-act-risk {
  font-size: .56rem;
  padding: .08rem .3rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.rx-act-risk.r-safe, .rx-act-risk.r-low { background: rgba(74, 222, 128, .15); color: #86efac; border: 1px solid rgba(74, 222, 128, .35); }
.rx-act-risk.r-medium                   { background: rgba(251, 146, 60, .18); color: #fed7aa; border: 1px solid rgba(251, 146, 60, .35); }
.rx-act-risk.r-high                     { background: rgba(239, 68, 68, .18);  color: #fecaca; border: 1px solid rgba(239, 68, 68, .35); }
.rx-act-risk.r-destructive              { background: rgba(185, 28, 28, .25);  color: #fecaca; border: 1px solid rgba(185, 28, 28, .5); }
.rx-act-rev {
  font-size: .56rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rx-act-exec {
  margin-left: auto;
  font-size: .62rem;
  padding: .15rem .5rem;
  background: rgba(59, 130, 246, .15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, .4);
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background .12s, color .12s;
}
.rx-act-exec:hover:not(:disabled) {
  background: rgba(59, 130, 246, .3);
  color: #dbeafe;
}
.rx-act-exec:disabled {
  opacity: .6;
  cursor: wait;
}
.rx-act-cmd {
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 3px;
  padding: .3rem .45rem;
  margin: .25rem 0 0;
  font-size: .66rem;
  color: var(--p-light);
  white-space: pre-wrap;
  word-break: break-all;
}

@media (max-width: 700px) {
  .rx-row { grid-template-columns: 1fr; gap: .15rem; }
}

/* ===== VLAN grid ============================================ */
.vlan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .35rem; }
.vlan-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .35rem .55rem;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .05);
  border-left: 3px solid #475569;
  border-radius: 5px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .72rem;
}
.vlan-row.ok   { border-left-color: #4ade80; }
.vlan-row.warn { border-left-color: #fb923c; }
.vlan-row.crit { border-left-color: #ef4444; background: rgba(239, 68, 68, .06); }
.vlan-row .vl-tag {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 3px;
  padding: .1rem .35rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.vlan-row.vlan-1 .vl-tag { color: var(--v1); border-color: rgba(var(--v1-rgb), .4); }
.vlan-row.vlan-2 .vl-tag { color: var(--v2); border-color: rgba(var(--v2-rgb), .4); }
.vlan-row.vlan-3 .vl-tag { color: var(--v3); border-color: rgba(var(--v3-rgb), .4); }
.vlan-row.vlan-4 .vl-tag { color: var(--v4); border-color: rgba(var(--v4-rgb), .4); }
.vlan-row.vlan-5 .vl-tag { color: var(--v5); border-color: rgba(var(--v5-rgb), .4); }
.vlan-row.vlan-6 .vl-tag { color: var(--v6); border-color: rgba(var(--v6-rgb), .4); }
.vlan-row .vl-name { color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlan-row .vl-counts { display: inline-flex; gap: .3rem; align-items: baseline; }
.vlan-row .vc       { font-size: .72rem; }
.vlan-row .vc.up    { color: #4ade80; font-weight: 600; }
.vlan-row .vc-sep   { color: #64748b; }
.vlan-row .vc.tot   { color: #94a3b8; }
.vlan-row .vc.dn    { color: #ef4444; font-weight: 600; }
.vlan-row .vc.unk   { color: #64748b; }

/* ===== Host strip (CPU/RAM/Disk + meta) — card couleur principale --p-base ===== */
.dash-host {
  padding: .85rem 1rem !important;
  border-top: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-right: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-bottom: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-left: 2px solid rgba(var(--p-base-rgb), .9) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--p-base-rgb), .14), transparent 60%),
    linear-gradient(135deg, rgba(var(--p-base-rgb), .1) 0%, rgba(var(--p-base-rgb), .03) 50%, rgba(24, 24, 27, .55) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    inset 8px 0 14px -8px rgba(var(--p-base-rgb), .55),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 4px 18px rgba(0, 0, 0, .28);
  border-radius: 8px;
  min-height: auto;
  height: auto;
  overflow: visible;
}
.host-strip {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, 1fr);
  gap: 1.1rem;
  align-items: center;
}
@media (max-width: 1000px) {
  .host-strip { grid-template-columns: 1fr; }
}
.host-info { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.hi-name { color: var(--p-base); font-weight: 600; font-size: .85rem; font-family: 'Menlo', 'Consolas', monospace; }
.hi-meta { color: #94a3b8; font-size: .68rem; font-family: 'Menlo', 'Consolas', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-meta.sub { color: #64748b; font-size: .65rem; }
.hi-meta .lvl-ok   { color: #4ade80; }
.hi-meta .lvl-warn { color: #fb923c; }

.host-gauge { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.hg-line { display: flex; justify-content: space-between; align-items: baseline; }
.hg-name { color: #94a3b8; font-size: .7rem; font-family: 'Menlo', 'Consolas', monospace; letter-spacing: .04em; }
.hg-val  { color: var(--p-base); font-family: 'Menlo', 'Consolas', monospace; font-size: .82rem; font-weight: 600; }
.hg-val.warn { color: #fb923c; }
.hg-val.crit { color: #ef4444; }
.hg-bar  { height: 5px; background: rgba(0, 0, 0, .35); border-radius: 3px; overflow: hidden; }
.hg-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--p-base), var(--p-glow)); transition: width .4s; }
.hg-bar.warn > span { background: linear-gradient(90deg, #fb923c, #f97316); }
.hg-bar.crit > span { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.hg-detail { color: #64748b; font-size: .62rem; font-family: 'Menlo', 'Consolas', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Timeline (activité 6h) =============================== */
.dash-timeline { padding-bottom: .55rem; }
.timeline {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: .35rem;
}
.tl-row {
  display: grid;
  grid-template-columns: 48px 22px 64px 110px 1fr;
  gap: .5rem;
  align-items: center;
  padding: .25rem .45rem;
  border-left: 2px solid #475569;
  border-radius: 3px;
  background: rgba(0, 0, 0, .18);
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .68rem;
}
.tl-row.lvl-crit { border-left-color: #ef4444; background: rgba(239, 68, 68, .06); }
.tl-row.lvl-warn { border-left-color: #fb923c; background: rgba(251, 146, 60, .04); }
.tl-row.lvl-info { border-left-color: #22d3ee; }
.tl-time   { color: #94a3b8; font-size: .65rem; }
.tl-kind   { font-size: .9rem; text-align: center; }
.tl-tag    { font-size: .56rem; padding: .08rem .3rem; border-radius: 3px; text-align: center; letter-spacing: .04em; background: rgba(255,255,255,.06); color: #cbd5e1; border: 1px solid rgba(255,255,255,.08); text-transform: uppercase; }
.tl-tag.tag-crit, .tl-tag.tag-critical { background: rgba(239, 68, 68, .22); color: #fecaca; border-color: rgba(239, 68, 68, .4); }
.tl-tag.tag-error                       { background: rgba(239, 68, 68, .2);  color: #fecaca; border-color: rgba(239, 68, 68, .35); }
.tl-tag.tag-warn                        { background: rgba(251, 146, 60, .2); color: #fed7aa; border-color: rgba(251, 146, 60, .35); }
.tl-source { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; }
.tl-msg    { color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 800px) {
  .tl-row { grid-template-columns: 44px 20px 1fr; }
  .tl-row > .tl-tag, .tl-row > .tl-source { display: none; }
}

/* ===== Ping matrix (carte optionnelle) ====================== */
.dash-ping { padding-bottom: .65rem; }
.pingmatrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .35rem;
}
.pingcell {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem;
  align-items: center;
  padding: .35rem .55rem;
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .06);
  border-left: 3px solid #475569;
  border-radius: 5px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .72rem;
}
.pingcell .pc-info { min-width: 0; }
.pingcell .p-name { color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pingcell .p-ip { color: #64748b; font-size: .62rem; }
.pingcell .p-rtt { font-weight: 600; font-size: .76rem; }
.pingcell.up   { border-left-color: #4ade80; }
.pingcell.up   .p-rtt { color: #4ade80; }
.pingcell.down { border-left-color: #ef4444; background: rgba(239, 68, 68, .08); }
.pingcell.down .p-rtt { color: #ef4444; }
.pingcell.unknown { border-left-color: #64748b; }
.pingcell.unknown .p-rtt { color: #64748b; }
.pingcell.vlan-1 { background: linear-gradient(135deg, rgba(var(--v1-rgb), .1), rgba(0,0,0,.26)); border-left-color: var(--v1); }
.pingcell.vlan-2 { background: linear-gradient(135deg, rgba(var(--v2-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v2); }
.pingcell.vlan-3 { background: linear-gradient(135deg, rgba(var(--v3-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v3); }
.pingcell.vlan-4 { background: linear-gradient(135deg, rgba(var(--v4-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v4); }
.pingcell.vlan-5 { background: linear-gradient(135deg, rgba(var(--v5-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v5); }
.pingcell.vlan-6 { background: linear-gradient(135deg, rgba(var(--v6-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v6); }

/* Scrollbar du timeline (cohérent avec portal.css) */
.timeline::-webkit-scrollbar { width: 6px; }
.timeline::-webkit-scrollbar-track { background: rgba(24, 24, 27, .2); }
.timeline::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--p-base-rgb), .35), rgba(var(--p-glow-rgb), .35)); border-radius: 3px; }
.timeline::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(var(--p-base-rgb), .7), rgba(var(--p-glow-rgb), .5)); box-shadow: 0 0 10px rgba(var(--p-glow-rgb), .4); }

/* ============================================================
   KPI Explain — popup pédagogique au survol des cards Dashboard
   ============================================================ */
.kpi-explain-pop {
  position: fixed !important;
  z-index: 99999 !important;
  width: 420px; max-width: calc(100vw - 24px);
  padding: .85rem 1rem;
  background: rgba(20, 20, 23, .98);
  border: 1px solid rgba(var(--p-base-rgb), .5);
  border-radius: 8px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .7), 0 0 0 1px rgba(var(--p-glow-rgb), .15);
  color: #e4e4e7; font-size: .82rem; line-height: 1.5;
  animation: kep-in .18s ease-out;
  pointer-events: auto;
}
.kpi-explain-pop[hidden] { display: none !important; }
.kpi-explain-pop { overflow-y: auto; }

/* ============================================================
   Cards collapsibles + bouton pin (📌)
   Cards exclues : card-host, dash-kpis, dash-hero (toujours visibles)
   ============================================================ */
.dash-card > details.dash-collapse {
  margin: -.6rem -.85rem;     /* compense le padding du parent .dash-card */
  padding: .35rem .85rem;
  border-radius: 8px;
}
.dash-card > details.dash-collapse > summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem;
  border-radius: 6px;
  transition: background .12s;
}
.dash-card > details.dash-collapse > summary::-webkit-details-marker { display: none; }
.dash-card > details.dash-collapse > summary:hover { background: rgba(var(--p-base-rgb), .05); }
.dash-card > details.dash-collapse[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, .07); margin-bottom: .55rem; padding-bottom: .55rem; }
.dc-chev { color: var(--p-light); opacity: .55; font-size: .85rem; transition: transform .15s; flex-shrink: 0; width: 12px; }
.dash-card > details.dash-collapse[open] > summary .dc-chev { transform: rotate(90deg); color: var(--p-base); opacity: 1; }
.dc-title {
  color: var(--p-base); font-weight: 600; font-size: .95rem;
  flex-shrink: 0;
}
.dc-resume {
  display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  flex: 1; margin-left: .3rem;
}
.dc-resume .dc-b {
  font-size: .65rem; font-family: 'Menlo','Consolas',monospace; font-weight: 600;
  padding: .12rem .4rem; border-radius: 3px; border: 1px solid;
  text-transform: uppercase; letter-spacing: .04em;
  color: #94a3b8; border-color: rgba(148, 163, 184, .35);
  background: rgba(0, 0, 0, .15);
}
.dc-resume .dc-b.crit { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .12); }
.dc-resume .dc-b.warn { color: #fb923c; border-color: #fb923c; background: rgba(251, 146, 60, .12); }
.dc-resume .dc-b.ok   { color: var(--v4); border-color: var(--v4); background: rgba(var(--v4-rgb), .1); }

.dc-pin {
  background: transparent; border: none;
  color: var(--p-base);
  cursor: pointer;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 4px;
  flex-shrink: 0;
  opacity: .35;
  transition: opacity .15s, transform .15s, background .15s;
}
.dc-pin svg { display: block; }
.dc-pin:hover { opacity: .75; background: rgba(var(--p-base-rgb), .08); }
.dc-pin.pinned {
  opacity: 1;
  transform: rotate(-15deg);
  filter: drop-shadow(0 0 4px rgba(var(--p-glow-rgb), .55));
}
.dc-pin.pinned:hover { transform: rotate(-15deg) scale(1.08); }

/* Body de la card collapsible */
.dc-body { padding: 0; }

/* ============================================================
   Harmonisation pro du dashboard — alignements, paddings, typo
   ============================================================ */
/* Cards : padding cohérent */
.dash-card {
  padding: .85rem 1rem !important;
  border-radius: 8px !important;
  background: rgba(24, 24, 27, .42);
  border: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  display: flex; flex-direction: column;
  height: 100%;                  /* remplit la cell grid → hauteurs égales par row */
  box-sizing: border-box;
}
/* Marges entre éléments TOP-LEVEL du tab seulement (pas pour grid items) */
.dashboard-tab > .dash-card + .dash-card,
.dashboard-tab > .dash-card + .dash-row,
.dashboard-tab > .dash-row + .dash-card,
.dashboard-tab > .dash-row + .dash-row { margin-top: .65rem; }

/* Rows : gaps cohérents + stretch explicite (toutes cards = même hauteur) */
.dash-row {
  display: grid;
  gap: .65rem;
  align-items: stretch !important;
}
.dash-row.dash-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-row.dash-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .dash-row.dash-row-3, .dash-row.dash-row-2 { grid-template-columns: 1fr; } }

/* Le <details> remplit la card, le body remplit le reste */
.dash-card > details.dash-collapse {
  flex: 1; display: flex; flex-direction: column;
  margin: -.85rem -1rem;            /* compense le padding du parent */
  padding: 0 1rem;                  /* horizontal seulement */
}
.dash-card > details.dash-collapse > summary { flex-shrink: 0; }
.dash-card > details.dash-collapse > .dc-body { flex: 1; padding-bottom: .85rem; }
.dash-card > details.dash-collapse:not([open]) > .dc-body { display: none; }

/* Titres h3 dans cards : tous identiques */
.dash-card h3,
.dsy-head h3,
.dfb-head h3 {
  margin: 0 0 .55rem !important;
  padding: 0 !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  color: var(--p-base) !important;
  letter-spacing: .005em;
  line-height: 1.3;
}

/* Quand wrappé en collapsible, le h3 disparaît du body — on adapte */
.dash-card > details.dash-collapse .dc-body > h3:first-child { display: none; }
.dash-card > details.dash-collapse .dc-body > .dsy-head:first-child h3,
.dash-card > details.dash-collapse .dc-body > .dfb-head:first-child h3 { display: none; }

/* (v.46) Ancienne règle .dash-host { padding: 0 !important } neutralisée :
 * la card host a maintenant son propre padding/border/background couleur principale --p-base
 * (cf. bloc "Host strip" plus haut). */

/* Hero : alignement uniforme */
.dash-hero {
  padding: .85rem 1rem;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
}

/* KPIs strip : 6 cards sur 1 ligne (largeur complète) */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .55rem;
}
@media (max-width: 1400px) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* KPI card : padding et border cohérents */
.kpi-card {
  padding: .65rem .8rem !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(39, 39, 42, .35), rgba(24, 24, 27, .55));
  border: 1px solid rgba(255, 255, 255, .06);
  text-align: left;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s;
}
.kpi-card .kpi-head { padding-bottom: .35rem !important; margin-bottom: .35rem !important; }
.kpi-card .kpi-value { font-size: 1.6rem !important; font-weight: 700; line-height: 1; font-family: 'Menlo','Consolas',monospace; }
.kpi-card .kpi-label { font-size: .7rem !important; color: #94a3b8; margin-left: .35rem; }
.kpi-card .kpi-lines { margin: .35rem 0 0 !important; padding: 0 !important; list-style: none; display: grid; gap: .15rem; font-size: .7rem; font-family: 'Menlo','Consolas',monospace; }
.kpi-card .kpi-lines li { display: flex; justify-content: space-between; padding: .08rem 0; }
.kpi-card .kpi-lines li .kl-k { color: #94a3b8; }
.kpi-card .kpi-lines li .kl-v { color: #d4d4d8; font-weight: 600; }
.kpi-card .kpi-lines li.lvl-crit .kl-v { color: var(--v2); }
.kpi-card .kpi-lines li.lvl-warn .kl-v { color: #fb923c; }
.kpi-card .kpi-foot { margin-top: .4rem; font-size: .65rem; color: #94a3b8; font-family: 'Menlo','Consolas',monospace; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.05); }

/* Summary collapsible — flex avec calage strict :
   GAUCHE : [chev] [titre]
   DROITE  : [badges-resume] [score-bloc] [pin]
   Le titre est à gauche, tout le reste poussé à droite via margin-left:auto
   sur le premier élément à droite. Alignement vertical : flex-end (badges
   collés au bas du score). */
.dash-card > details.dash-collapse > summary {
  display: flex !important;
  align-items: flex-end !important;
  gap: .55rem;
  min-height: 50px;
  padding: .45rem .65rem !important;
}
.dc-chev { align-self: center !important; flex-shrink: 0; }
.dc-title {
  font-size: .92rem !important; line-height: 1.2;
  align-self: center !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.dc-resume {
  font-size: .75rem; line-height: 1.2;
  display: inline-flex; align-items: flex-end; gap: .3rem; flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;            /* PUSH everything droite */
  padding-bottom: .15rem;
  flex-shrink: 1; min-width: 0;
}
.dc-resume:empty { display: none; }
.dc-resume .dc-b { padding: .1rem .4rem !important; line-height: 1.4; white-space: nowrap; }

/* Bloc score à droite (avant le pin) — forme carrée mise en valeur */
.dc-score-slot {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center;
}
.dc-score-slot > * {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 70px; height: 38px;
  padding: 0 .55rem;
  border-radius: 6px; border: 1.5px solid;
  font-size: 1.15rem; font-weight: 700;
  font-family: 'Menlo','Consolas',monospace;
  letter-spacing: -.01em;
  white-space: nowrap; line-height: 1;
}
.dc-score-slot > * small {
  font-size: .55em; opacity: .65; margin-left: 1px; font-weight: 600;
  line-height: 1; align-self: center;
}
.dc-pin { align-self: center !important; }
/* Si pas de score, le resume est suivi directement du pin (gap normal) */
.dc-summary > .dc-resume + .dc-pin { margin-left: 0; }

/* Toolbar : aligné centré */
.dash-toolbar {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .9rem;
  background: rgba(24, 24, 27, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: .65rem;
}
.dash-toolbar .dash-title { font-size: 1rem; font-weight: 600; color: var(--p-base); }
.dash-toolbar .dash-generated { font-size: .72rem; color: #94a3b8; font-family: 'Menlo','Consolas',monospace; }
.dash-toolbar .dash-spacer { flex: 1; }
.dash-toolbar label { font-size: .78rem; color: #d4d4d8; display: flex; align-items: center; gap: .3rem; }

/* Boutons compacts (t-btn et icon-btn) tous alignés */
.dash-toolbar .t-btn,
.dash-toolbar .icon-btn {
  padding: .25rem .55rem;
  font-size: .78rem; line-height: 1.3;
  border-radius: 4px;
  background: rgba(39, 39, 42, .55); color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: pointer;
}
.dash-toolbar .t-btn:hover, .dash-toolbar .icon-btn:hover { background: rgba(63, 63, 70, .7); border-color: rgba(var(--p-base-rgb), .35); }

/* Synthèse / feedback : harmonisation interne */
.dsy-head, .dfb-head {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-bottom: .55rem;
}
.dsy-meta { font-size: .7rem; color: #94a3b8; font-family: 'Menlo','Consolas',monospace; flex: 1; }
.dsy-counts, .dsy-actions { gap: .35rem !important; }
.dfb-form textarea { font-size: .82rem; min-height: 56px; }
.dfb-actions button { padding: .35rem .9rem; font-size: .82rem; }

/* (v.42) Anciennes règles `.kpi-card.lvl-*` qui mettaient un border-left coloré selon le niveau d'alerte
 * supprimées : la coloration de la card KPI est désormais portée par `.kpi-score-card.score-*`
 * (bordure 4 côtés selon le score /100), évitant l'incohérence "bord-gauche rouge sur score orange". */

/* Container racine de l'onglet : padding interne propre */
section[data-tab="dashboard"].dashboard-tab,
.dashboard-tab { padding: 0 !important; overflow: auto; }
.dashboard-tab > .dash-toolbar { margin: 0; }
.dashboard-tab > *:not(.dash-toolbar) { margin-left: .8rem; margin-right: .8rem; }
.dashboard-tab > *:not(.dash-toolbar):first-of-type { margin-top: .65rem; }
.dashboard-tab > *:last-child { margin-bottom: .8rem; }
@keyframes kep-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kep-title {
  font-weight: 600; color: var(--p-base);
  font-size: .9rem; margin-bottom: .55rem;
  padding-bottom: .35rem; border-bottom: 1px solid rgba(var(--p-base-rgb), .25);
}
.kep-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: .5rem; padding: .25rem 0;
  font-size: .78rem;
}
.kep-w {
  color: var(--p-light); font-weight: 600; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .06em;
  padding-top: .12rem; font-family: 'Menlo','Consolas',monospace;
}
.kep-t { color: #d4d4d8; line-height: 1.45; }
.kep-row.kep-risk .kep-w { color: #fb923c; }
.kep-row.kep-risk .kep-t { color: #fed7aa; }
.kep-row.kep-enjeu .kep-w { color: var(--v4); }
.kep-row.kep-enjeu .kep-t { color: #bbf7d0; }

/* Hover halo (clic sur la card = navigation vers l'onglet cible) */
.kpi-card { position: relative; }
.kpi-card:hover { box-shadow: 0 0 0 1px rgba(var(--p-base-rgb), .35), 0 0 18px rgba(var(--p-glow-rgb), .25); }

/* Icône ⓘ collée à droite du titre dans le head (plus en absolute) */
.kpi-info-btn {
  position: relative;
  width: 18px; height: 18px;
  background: transparent; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; line-height: 1;
  color: var(--p-base); opacity: .55;
  cursor: pointer; user-select: none;
  border-radius: 50%; padding: 0;
  flex-shrink: 0;
  transition: background .12s, opacity .12s, color .12s;
}
.kpi-info-btn:hover { opacity: 1; color: var(--p-base); background: rgba(var(--p-base-rgb), .15); }

/* Score-card : badges poussés en bas (margin-top: auto sur kpi-badges) */
.kpi-score-card .kpi-badges { margin-top: auto; margin-bottom: 0; }
.kpi-score-card .kpi-foot { margin-top: 0; padding-top: 0; border-top: none; }

/* Bouton close du popup */
.kep-close {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px;
  background: transparent; border: none;
  color: #94a3b8; font-size: 1.1rem; cursor: pointer;
  line-height: 1; padding: 0; border-radius: 4px;
}
.kep-close:hover { color: #fecaca; background: rgba(255, 255, 255, .08); }
.kpi-explain-pop { position: relative; padding-right: 2rem !important; }

/* ============================================================
   Synthèse audit Claude (sous host card)
   ============================================================ */
/* Card synthèse audit Claude — pattern card host (couleur principale --p-base, glass épais, tranche gauche) */
.dash-synthesis {
  padding: .85rem 1rem !important;
  margin-top: .65rem !important;          /* espacement avec strip KPI au-dessus */
  border-top: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-right: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-bottom: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-left: 2px solid rgba(var(--p-base-rgb), .9) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--p-base-rgb), .14), transparent 60%),
    linear-gradient(135deg, rgba(var(--p-base-rgb), .1) 0%, rgba(var(--p-base-rgb), .03) 50%, rgba(24, 24, 27, .55) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    inset 8px 0 14px -8px rgba(var(--p-base-rgb), .55),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 4px 18px rgba(0, 0, 0, .28);
  border-radius: 8px;
  overflow: visible;
  min-height: auto; height: auto;
}

/* Score en grand à droite — pattern KPI (pas encadré, gros chiffre + % unit) */
/* Override .dc-score-slot > * (1.15rem + border + height fixe) qui écrasait la taille */
.dash-synthesis .dc-score-slot {
  margin-left: auto;
  align-self: flex-end;            /* aligne le bas du score avec le bas des badges */
  display: inline-flex; align-items: baseline;
}
.dash-synthesis .dc-score-slot > .dsy-score-big {
  display: inline-flex; align-items: baseline; gap: .05rem;
  font-family: 'Menlo','Consolas',monospace; line-height: 1;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  min-width: 0 !important;
  font-size: inherit !important;       /* neutralise .dc-score-slot > * (1.15rem) */
  letter-spacing: 0 !important;
}
.dash-synthesis .dsy-score-big .dsb-value { font-size: 1.85rem !important; font-weight: 700; line-height: 1; }
.dash-synthesis .dsy-score-big .dsb-unit  { font-size: 1rem !important; font-weight: 600; opacity: .75; }
.dash-synthesis .dsy-score-big.score-ok   { color: #4ade80; }
.dash-synthesis .dsy-score-big.score-warn { color: #fb923c; }
.dash-synthesis .dsy-score-big.score-crit { color: #ef4444; }

/* Alignement : titre + badges + score sur la MÊME baseline (ligne du titre) */
.dash-synthesis .dc-summary { align-items: baseline; }
.dash-synthesis .dc-summary .dc-resume { align-self: baseline; }
.dash-synthesis .dc-score-slot { align-self: baseline; }
.dash-synthesis .dc-score-slot > .dsy-score-big { align-items: baseline; line-height: 1; }
.dash-synthesis .dsy-score-big .dsb-value { line-height: 1; }
.dash-synthesis .dsy-score-big .dsb-unit { line-height: 1; }

/* Synthèse texte — pas de troncature CSS, Claude self-limite via le prompt
   (depth_summary_lines). -webkit-line-clamp casse le rendu markdown
   (paragraphes/bullets/bold prennent plus de lignes visuelles). */
.dash-synthesis .dsy-summary {
  display: block;
  overflow: visible;
  white-space: normal;            /* le markdownLite ajoute déjà <br>/<ul> structurés */
  margin-bottom: .55rem;
}

/* Mise en forme markdown du summary : bold, bullets, code inline */
.dash-synthesis .dsy-summary strong {
  color: var(--p-base);
  font-weight: 600;
}
.dash-synthesis .dsy-summary code {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(var(--p-base-rgb), .2);
  border-radius: 3px;
  padding: 0 .3rem;
  font-family: 'Menlo','Consolas',monospace;
  font-size: .82em;
  color: var(--p-light);
}
.dash-synthesis .dsy-summary .dsy-md-ul {
  margin: .25rem 0 .25rem 1.1rem;
  padding: 0;
  list-style: disc;
}
.dash-synthesis .dsy-summary .dsy-md-ul li {
  margin: .15rem 0;
  line-height: 1.5;
}
.dash-synthesis .dsy-summary .dsy-md-ul li::marker {
  color: var(--p-base);
}
/* Séparateur de paragraphe (ligne vide en entrée → demi-interligne d'air) */
.dash-synthesis .dsy-summary .dsy-md-para {
  height: .55rem;
}

/* Combo profondeur d'analyse */
.dash-synthesis .dsy-combo-row {
  display: flex; align-items: center; gap: .55rem;
  margin: .25rem 0 .55rem;
  font-size: .76rem; color: #94a3b8;
}
.dash-synthesis .dsy-depth {
  background: rgba(0, 0, 0, .35); color: #e4e4e7;
  border: 1px solid rgba(var(--p-base-rgb), .35);
  border-radius: 4px; padding: .2rem .5rem;
  font-size: .76rem; font-family: inherit; cursor: pointer;
}
.dash-synthesis .dsy-depth:focus { outline: none; border-color: var(--p-base); }

/* Bandeau d'erreur audit (timeout, parse fail, etc.) */
.dash-synthesis .dsy-error-banner {
  margin: .25rem 0 .55rem;
  padding: .5rem .75rem;
  background: rgba(var(--v2-rgb), .08);
  border: 1px solid rgba(var(--v2-rgb), .35);
  border-left: 3px solid var(--v2);
  border-radius: 5px;
  color: #fecaca;
  font-size: .82rem;
  line-height: 1.5;
  display: flex; align-items: center; gap: .4rem;
}
.dash-synthesis .dsy-error-banner strong { color: var(--v2); }

/* Bouton spinner — toujours visible, statique au repos (cliquable pour lancer audit), tournant si audit en cours */
@keyframes dsy-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.dash-synthesis .dsy-spinner {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: .45rem;
  background: transparent; border: none; padding: .15rem;
  color: var(--p-base);
  opacity: .45;                                /* éteint / au repos */
  cursor: pointer;
  border-radius: 50%;
  transition: opacity .15s, background .15s, transform .15s;
  vertical-align: middle;
}
.dash-synthesis .dsy-spinner:hover { opacity: 1; background: rgba(var(--p-base-rgb), .15); }
.dash-synthesis .dsy-spinner.is-running {
  opacity: 1;
  cursor: default;
  animation: dsy-spin 1.4s linear infinite;
}
.dash-synthesis .dsy-spinner.is-running:hover { background: transparent; }

/* Sous-section collapsable « Points d'attention » regroupant tous les findings */
.dash-synthesis .dsy-findings-block {
  margin-top: .35rem;
  border: 1px solid rgba(var(--p-base-rgb), .2);
  border-radius: 5px;
  background: rgba(0, 0, 0, .15);
}
.dash-synthesis .dsy-findings-summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .55rem;
  cursor: pointer;
  list-style: none;
  font-size: .8rem;
}
.dash-synthesis .dsy-findings-summary::-webkit-details-marker { display: none; }
.dash-synthesis .dsy-fb-chev {
  display: inline-block;
  color: var(--p-base);
  transition: transform .12s;
  font-size: .8rem;
}
.dash-synthesis .dsy-findings-block[open] .dsy-fb-chev { transform: rotate(90deg); }
.dash-synthesis .dsy-fb-title {
  font-weight: 600; color: var(--p-base);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .72rem;
}
.dash-synthesis .dsy-fb-counts { display: inline-flex; gap: .35rem; margin-left: auto; align-items: center; }
.dash-synthesis .dsy-fb-c {
  font-size: .65rem; padding: .08rem .4rem; border-radius: 3px; border: 1px solid;
  font-family: 'Menlo','Consolas',monospace; font-weight: 600;
}
.dash-synthesis .dsy-fb-c.open  { color: #fb923c; border-color: rgba(251, 146, 60, .4); background: rgba(251, 146, 60, .1); }
.dash-synthesis .dsy-fb-c.acc   { color: var(--v4); border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .08); }
.dash-synthesis .dsy-fb-c.total { color: #94a3b8; border-color: rgba(148, 163, 184, .3); background: rgba(100, 116, 139, .08); }

/* Liste findings dans la sous-section (ouverte) */
.dash-synthesis .dsy-findings-block[open] .dsy-top {
  display: block;
  padding: .25rem .55rem .55rem;
  border-top: 1px solid rgba(var(--p-base-rgb), .12);
}
.dash-synthesis .dsy-finding { margin-bottom: .25rem; padding: .25rem .55rem; }
.dash-synthesis .dsy-finding[open] { padding: .25rem .55rem .55rem; }
.dash-synthesis .dsy-finding.is-accepted { opacity: .55; }

/* Override : layout flex pour que le badge "accepté" reste sur la même ligne que axe/level/title */
.dash-synthesis .dsy-finding summary {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
}
.dash-synthesis .dsy-finding summary .dsf-axe { flex-shrink: 0; min-width: 90px; }
.dash-synthesis .dsy-finding summary .dsf-level { flex-shrink: 0; min-width: 60px; text-align: center; }
.dash-synthesis .dsy-finding summary .dsf-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-synthesis .dsf-acc-tag {
  flex-shrink: 0;
  margin-right: 1rem;       /* éviter chevauchement avec le chevron ▸ en absolute right .5rem */
  font-size: .6rem;
  color: var(--v4); border: 1px solid rgba(74, 222, 128, .35);
  padding: .05rem .35rem; border-radius: 3px;
  font-family: 'Menlo','Consolas',monospace;
}
.dash-synthesis .dsy-actions { padding-top: .55rem; margin-top: .35rem; border-top: 1px solid rgba(var(--p-base-rgb), .15); }

/* Badge target : système concerné par le finding (et per-action si différent) */
.dash-synthesis .dsf-target {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .65rem; font-family: 'Menlo','Consolas',monospace;
  color: var(--p-light); border: 1px solid rgba(var(--p-base-rgb), .35);
  background: rgba(var(--p-base-rgb), .08);
  padding: .08rem .4rem; border-radius: 3px;
  font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-synthesis .dsf-target svg { opacity: .9; }
.dash-synthesis .dsf-target-sec { color: #94a3b8; font-size: .55rem; margin-left: .15rem; }

.dash-synthesis .dsf-act-target {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .58rem; font-family: 'Menlo','Consolas',monospace;
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, .35);
  background: rgba(251, 146, 60, .08);
  padding: .05rem .3rem; border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}

/* Cycle de vie des actions : appliqué (grisé+badge OK) / échec (badge KO) */
.dsf-action.is-applied {
  opacity: .55;
  background: rgba(var(--v4-rgb), .04);
  border-left: 2px solid rgba(var(--v4-rgb), .35);
}

/* Finding où TOUTES les actions sont appliquées — bandeau de fin + tag */
.dsy-finding.is-all-applied .dsf-axe,
.dsy-finding.is-all-applied .dsf-title {
  /* léger surlignage vert pour signaler "presque résolu" */
}
.dsf-allapplied-tag {
  margin-left: auto; font-size: .6rem;
  color: var(--v4); border: 1px solid rgba(var(--v4-rgb), .45);
  padding: .05rem .35rem; border-radius: 3px;
  font-family: 'Menlo','Consolas',monospace;
  background: rgba(var(--v4-rgb), .1);
}
.dsf-allapplied-banner {
  margin: .5rem 0;
  padding: .5rem .75rem;
  background: rgba(var(--v4-rgb), .08);
  border: 1px solid rgba(var(--v4-rgb), .35);
  border-left: 3px solid var(--v4);
  border-radius: 5px;
  color: #d4d4d8;
  font-size: .82rem;
  line-height: 1.5;
}
.dsf-allapplied-banner strong { color: var(--v4); }
.t-btn.dsf-resolved.primary {
  background: rgba(var(--v4-rgb), .15) !important;
  color: var(--v4) !important;
  border-color: rgba(var(--v4-rgb), .5) !important;
  font-weight: 600;
}
.t-btn.dsf-resolved.primary:hover {
  background: rgba(var(--v4-rgb), .25) !important;
  box-shadow: 0 0 12px rgba(var(--v4-rgb), .3);
}
.dsf-action.is-failed {
  background: rgba(var(--v2-rgb), .04);
  border-left: 2px solid rgba(var(--v2-rgb), .35);
}
.dsf-act-state {
  font-size: .65rem; font-family: 'Menlo','Consolas',monospace;
  padding: .1rem .4rem; border-radius: 3px; border: 1px solid;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.dsf-act-state.ok { color: var(--v4); border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .1); }
.dsf-act-state.ko { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .12); }
.dsy-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; flex-wrap: wrap; }
.dsy-head h3 { margin: 0; font-size: .95rem; color: var(--p-base); flex: 1; }
.dsy-meta { color: #94a3b8; font-size: .72rem; font-family: 'Menlo','Consolas',monospace; }
.dsy-score {
  font-family: 'Menlo','Consolas',monospace; font-weight: 700; font-size: .9rem;
  padding: .2rem .55rem; border-radius: 4px; border: 1px solid; min-width: 70px; text-align: center;
}
.dsy-score.score-excellent { color: var(--v4); border-color: var(--v4); background: rgba(var(--v4-rgb), .1); }
.dsy-score.score-good      { color: #84cc16; border-color: #84cc16; background: rgba(132, 204, 22, .1); }
.dsy-score.score-medium    { color: #eab308; border-color: #eab308; background: rgba(234, 179, 8, .1); }
.dsy-score.score-poor      { color: #fb923c; border-color: #fb923c; background: rgba(251, 146, 60, .1); }
.dsy-score.score-bad       { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .1); }

.dsy-summary {
  color: #d4d4d8; font-size: .85rem; line-height: 1.55;
  padding: .5rem .75rem; background: rgba(0, 0, 0, .15);
  border-left: 2px solid rgba(var(--p-base-rgb), .35); border-radius: 0 4px 4px 0;
  margin-bottom: .55rem;
}
.dsy-counts { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.dsy-cnt {
  font-size: .68rem; padding: .12rem .45rem; border-radius: 3px; border: 1px solid;
  font-family: 'Menlo','Consolas',monospace; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.dsy-cnt.critical { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .12); }
.dsy-cnt.high     { color: #fb923c; border-color: #fb923c; background: rgba(251, 146, 60, .12); }
.dsy-cnt.medium   { color: #eab308; border-color: #eab308; background: rgba(234, 179, 8, .1); }
.dsy-cnt.low      { color: var(--v3); border-color: var(--v3); background: rgba(var(--v3-rgb), .1); }
.dsy-cnt.accepted { color: var(--v4); border-color: var(--v4); background: rgba(var(--v4-rgb), .08); }
.dsy-cnt.total    { color: #94a3b8; border-color: #64748b; }

.dsy-top { margin-top: .35rem; }
.dsy-top-h { font-size: .7rem; color: var(--p-light); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; font-weight: 600; }
.dsy-finding {
  background: rgba(0, 0, 0, .15); border-radius: 4px;
  border-left: 2px solid transparent;
  margin-bottom: .25rem;
  font-size: .8rem;
  transition: background .12s;
}
.dsy-finding[open] { background: rgba(var(--p-base-rgb), .04); }
.dsy-finding.lvl-critical { border-left-color: var(--v2); }
.dsy-finding.lvl-high     { border-left-color: #fb923c; }
.dsy-finding summary {
  display: grid; grid-template-columns: 90px 60px 1fr;
  gap: .5rem; padding: .35rem .55rem;
  cursor: pointer; user-select: none; list-style: none;
  align-items: center; position: relative; padding-right: 1.4rem;
}
.dsy-finding summary::-webkit-details-marker { display: none; }
.dsy-finding summary::after { content: '▸'; position: absolute; right: .5rem; top: .42rem; color: var(--p-light); opacity: .55; transition: transform .15s; }
.dsy-finding[open] summary::after { transform: rotate(90deg); }
.dsy-finding summary:hover { background: rgba(var(--p-base-rgb), .04); }
.dsy-finding .dsf-axe { color: var(--p-light); font-size: .68rem; font-family: 'Menlo','Consolas',monospace; text-transform: uppercase; letter-spacing: .04em; }
.dsy-finding .dsf-level {
  font-size: .6rem; padding: .05rem .3rem; border-radius: 3px;
  font-family: 'Menlo','Consolas',monospace; font-weight: 700; text-align: center;
}
.dsy-finding.lvl-critical .dsf-level { color: var(--v2); border: 1px solid var(--v2); background: rgba(var(--v2-rgb), .12); }
.dsy-finding.lvl-high     .dsf-level { color: #fb923c; border: 1px solid #fb923c; background: rgba(251, 146, 60, .12); }
.dsy-finding.lvl-medium   .dsf-level { color: #eab308; border: 1px solid #eab308; background: rgba(234, 179, 8, .1); }
.dsy-finding.lvl-low      .dsf-level { color: var(--v3); border: 1px solid var(--v3); background: rgba(var(--v3-rgb), .1); }
.dsy-finding .dsf-title { color: #e4e4e7; font-weight: 500; }

/* Détail expandé */
.dsf-body {
  padding: .55rem .85rem .65rem 1.1rem;
  border-top: 1px dashed rgba(255, 255, 255, .07);
  display: flex; flex-direction: column; gap: .5rem;
}
.dsf-row { display: grid; grid-template-columns: 75px 1fr; gap: .5rem; font-size: .78rem; line-height: 1.5; }
.dsf-w { color: var(--p-light); font-weight: 600; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .12rem; font-family: 'Menlo','Consolas',monospace; }
.dsf-t { color: #d4d4d8; }
.dsf-actions-wrap { display: flex; flex-direction: column; gap: .35rem; }
.dsf-action {
  background: rgba(0, 0, 0, .25);
  border-radius: 4px;
  padding: .35rem .55rem;
  border: 1px solid rgba(255, 255, 255, .05);
}
.dsf-act-head { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.dsf-act-label { color: #e4e4e7; font-size: .78rem; font-weight: 500; flex: 1; }
.dsf-act-risk {
  font-size: .58rem; padding: .05rem .3rem; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  font-family: 'Menlo','Consolas',monospace;
}
.dsf-act-risk.r-safe        { color: var(--v4); border: 1px solid var(--v4); background: rgba(var(--v4-rgb), .1); }
.dsf-act-risk.r-medium      { color: #fb923c; border: 1px solid #fb923c; background: rgba(251, 146, 60, .12); }
.dsf-act-risk.r-destructive { color: var(--v2); border: 1px solid var(--v2); background: rgba(var(--v2-rgb), .12); }
.dsf-act-rev { color: #94a3b8; font-size: .62rem; font-family: 'Menlo','Consolas',monospace; }
.dsf-act-cmd {
  margin: .2rem 0 0; padding: .35rem .5rem;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .06);
  color: #cbd5e1; font-family: 'Menlo','Consolas',monospace; font-size: .72rem;
  border-radius: 3px; white-space: pre-wrap; word-break: break-all;
}
.dsf-act-exec {
  background: linear-gradient(135deg, rgba(var(--p-base-rgb), .8), rgba(var(--p-glow-rgb), .65));
  color: var(--p-text-on); border: 1px solid rgba(var(--p-soft-rgb), .8);
  border-radius: 4px; padding: .15rem .55rem;
  font-size: .68rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.dsf-act-exec:hover:not(:disabled) { box-shadow: 0 0 8px rgba(var(--p-glow-rgb), .5); }
.dsf-act-exec:disabled { opacity: .5; cursor: not-allowed; }

.dsf-end-actions {
  display: flex; gap: .4rem; flex-wrap: wrap;
  padding-top: .45rem; border-top: 1px dashed rgba(255, 255, 255, .07);
}
.dsf-end-actions .t-btn {
  background: rgba(39, 39, 42, .55); color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px;
  padding: .25rem .6rem; font-size: .72rem; cursor: pointer;
}
.dsf-end-actions .t-btn:hover { background: rgba(var(--p-base-rgb), .12); border-color: rgba(var(--p-base-rgb), .35); }
.dsf-end-actions .dsf-help { background: linear-gradient(135deg, rgba(var(--p-base-rgb), .7), rgba(var(--p-glow-rgb), .5)); color: var(--p-text-on); }
.dsf-end-actions .dsf-help:hover { box-shadow: 0 0 8px rgba(var(--p-glow-rgb), .4); }

.dsy-empty { color: #64748b; font-style: italic; font-size: .82rem; padding: .5rem 0; }
.dsy-empty small { color: #94a3b8; }
.dsy-empty code { background: rgba(0,0,0,.4); padding: .05rem .3rem; border-radius: 3px; font-size: .75rem; color: var(--p-light); }
.dsy-actions { display: flex; gap: .45rem; margin-top: .5rem; flex-wrap: wrap; }
.dsy-actions .t-btn {
  background: rgba(39, 39, 42, .55); color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px;
  padding: .3rem .65rem; font-size: .76rem; cursor: pointer;
}
.dsy-actions .t-btn:hover:not(:disabled) { background: rgba(var(--p-base-rgb), .15); border-color: rgba(var(--p-base-rgb), .35); }

/* ============================================================
   Boîte feedback
   ============================================================ */
.dash-feedback {
  /* Design de référence = .dash-host / .kpi-score-card (couleur principale --p-base).
     Décision Vincent 2026-04-29 : 4 borders + double gradient + blur 28px +
     triple box-shadow (inset glow gauche + highlight haut + ombre extérieure). */
  padding: .85rem 1rem !important;
  border-top: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-right: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-bottom: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-left: 2px solid rgba(var(--p-base-rgb), .9) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--p-base-rgb), .14), transparent 60%),
    linear-gradient(135deg, rgba(var(--p-base-rgb), .1) 0%, rgba(var(--p-base-rgb), .03) 50%, rgba(24, 24, 27, .55) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    inset 8px 0 14px -8px rgba(var(--p-base-rgb), .55),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 4px 18px rgba(0, 0, 0, .28) !important;
}
.dfb-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; }
.dfb-head h3 { margin: 0; font-size: .95rem; color: var(--p-light); flex: 1; }
.dfb-info { color: #94a3b8; font-size: .68rem; font-style: italic; cursor: help; }
.dfb-form { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .65rem; }
.dfb-form textarea {
  width: 100%;
  background: rgba(39, 39, 42, .5); color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 5px;
  padding: .5rem .65rem; font-size: .85rem; font-family: inherit; line-height: 1.45;
  resize: vertical; min-height: 60px;
}
.dfb-form textarea:focus { outline: none; border-color: var(--v3); box-shadow: 0 0 0 2px rgba(var(--v3-rgb), .18); }
.dfb-form textarea:disabled { opacity: .6; cursor: not-allowed; }
.dfb-actions { display: flex; justify-content: flex-end; }
.dfb-actions button {
  background: linear-gradient(135deg, rgba(var(--p-base-rgb), .85), rgba(var(--p-glow-rgb), .75));
  color: var(--p-text-on); border: 1px solid rgba(var(--p-soft-rgb), .8);
  border-radius: 5px; padding: .35rem 1rem; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.dfb-actions button:disabled { opacity: .4; cursor: not-allowed; background: rgba(39,39,42,.55); }

.dfb-list { display: flex; flex-direction: column; gap: .4rem; max-height: 320px; overflow-y: auto; padding-right: .25rem; }
.dfb-item {
  padding: .45rem .6rem; background: rgba(0, 0, 0, .15); border-radius: 4px;
  border-left: 2px solid rgba(255, 255, 255, .08);
  font-size: .8rem;
}
.dfb-item.eval-actionable { border-left-color: var(--p-base); }
.dfb-item.eval-noted      { border-left-color: var(--v4); }
.dfb-item.eval-irrelevant { border-left-color: #64748b; opacity: .65; }
.dfb-item.eval-error      { border-left-color: var(--v2); }
.dfb-i-head { display: flex; gap: .4rem; align-items: center; margin-bottom: .25rem; flex-wrap: wrap; }
.dfb-when { color: #64748b; font-size: .7rem; font-family: 'Menlo','Consolas',monospace; }
.dfb-tag {
  font-size: .62rem; padding: .08rem .35rem; border-radius: 3px;
  font-family: 'Menlo','Consolas',monospace; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.dfb-tag.pending     { color: #eab308; border: 1px solid #eab308; background: rgba(234, 179, 8, .1); animation: dfb-pulse 1.4s ease-in-out infinite; }
.dfb-tag.actionable  { color: var(--p-base); border: 1px solid var(--p-base); background: rgba(var(--p-base-rgb), .12); }
.dfb-tag.noted       { color: var(--v4); border: 1px solid var(--v4); background: rgba(var(--v4-rgb), .1); }
.dfb-tag.irrelevant  { color: #64748b; border: 1px solid #64748b; }
.dfb-tag.error       { color: var(--v2); border: 1px solid var(--v2); background: rgba(var(--v2-rgb), .12); }
@keyframes dfb-pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.dfb-content { color: #d4d4d8; line-height: 1.5; }
.dfb-eval {
  margin-top: .25rem; padding-top: .25rem;
  border-top: 1px dashed rgba(255, 255, 255, .07);
  color: #94a3b8; font-size: .72rem; font-style: italic; line-height: 1.45;
}
.dfb-empty { color: #64748b; font-style: italic; font-size: .8rem; padding: .35rem 0; }

/* ===================================================================
   RESPONSIVE MOBILE (A3a) — strictement scope @media (max-width: 768px)
   AUCUN impact sur PC ≥ 769px.
   =================================================================== */
@media (max-width: 768px) {
  /* Dashboard tab : padding réduit (annulation du padding du PC) */
  .dashboard-tab { padding: .5rem .5rem 1rem; gap: .6rem; height: auto; }
  .dashboard-tab > * { margin: 0; }
  .dashboard-tab > .dash-card,
  .dashboard-tab > .dash-kpis,
  .dashboard-tab > .dash-hero { margin-top: .6rem; }

  /* Toolbar : compacte + wrap */
  .dash-toolbar {
    flex-wrap: wrap;
    padding: .4rem .55rem;
    gap: .5rem;
  }
  .dash-toolbar .dash-title { font-size: .72rem; letter-spacing: .08em; }
  .dash-toolbar .dash-generated { font-size: .65rem; }
  .dash-toolbar .dash-live-lbl { font-size: .7rem; }
  .dash-toolbar button { padding: .2rem .45rem; font-size: .7rem; }

  /* Strip 7 KPI cards : 1 colonne mobile */
  .dash-kpis {
    grid-template-columns: 1fr !important;
    gap: .55rem;
  }
  /* Tablette portrait/intermédiaire : 2 colonnes */
  /* (already handled by ≤700 → 2 cols dans le PC. Ici on force 1 col ≤480) */

  /* KPI cards : compact mobile */
  .kpi-card { padding: .5rem .6rem; }
  .kpi-head { gap: .35rem; padding-bottom: .25rem; }
  .kpi-icon { font-size: 1.1rem; }
  .kpi-title { font-size: .82rem; letter-spacing: .04em; }
  .kpi-score .ks-value { font-size: 1.4rem; }
  .kpi-score .ks-unit  { font-size: .8rem; }

  /* Badges 5 colonnes : OK en mobile (mini), juste réduire padding */
  .kpi-badges { gap: 3px; }
  .kpi-badge { padding: .04rem .25rem; font-size: .58rem; }
  .kpi-badge .kb-v { font-size: .68rem; }
  .kpi-badge .kb-k { font-size: .55rem; }

  /* Host strip : compact + déjà 1fr ≤1000px du PC */
  .host-strip { gap: .65rem; }
  .host-info .hi-name { font-size: .85rem; }
  .host-info .hi-meta { font-size: .65rem; white-space: normal; }

  /* Synthesis card (audit Claude) : compact */
  .dsy-empty { font-size: .8rem; }
  .dsy-combo-row { flex-wrap: wrap; gap: .35rem; }
  .dsy-counts { font-size: .72rem; }

  /* Synthesis fermée (collapsed) : summary line wrap + badges full-width */
  .dash-card > details.dash-collapse > summary {
    flex-wrap: wrap;
    gap: .4rem;
    padding: .45rem .4rem !important;
    min-width: 0;
  }
  .dc-title {
    font-size: .85rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dc-score-slot { font-size: .8rem; flex-shrink: 0; margin-left: auto; }
  .dc-score-slot .ks-value { font-size: 1.25rem; }
  .dc-score-slot .ks-unit  { font-size: .75rem; }
  .dc-pin { width: 22px; height: 22px; flex-shrink: 0; }
  /* Badges crit/warn/ok : passent à la ligne complète, scrollable horizontal si trop nombreux */
  .dc-resume {
    flex-basis: 100%;
    margin-left: 0;
    gap: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .dc-resume .dc-b {
    font-size: .6rem;
    padding: .1rem .35rem;
    flex-shrink: 0;
  }
  /* Body de l'audit ouvert : compact */
  .dash-card > details.dash-collapse > .dc-body { padding-bottom: .55rem; }

  /* Findings actionnables : full width sur mobile */
  .dsf-row { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .dsf-target, .dsf-target-sec { font-size: .7rem; }
  .dsf-actions-wrap { width: 100%; }
  .dsf-action { flex-wrap: wrap; gap: .3rem; }
  .dsf-act-cmd { font-size: .65rem; word-break: break-all; }

  /* Feedback box : compact */
  .dash-feedback { padding: .55rem .65rem; }
  #dfb-input { font-size: .85rem; min-height: 70px; }
}

/* Modal d edition synthesis */
.dsy-edit-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.dsy-edit-modal {
  width: 92vw; max-width: 520px;
  background: rgba(15,15,19,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  color: #e4e4e7;
  position: relative;
}
.dsy-edit-modal h3 { color: var(--p-base); margin: 0 0 .8rem; font-size: 1.05rem; }
.dsy-edit-modal .modal-close {
  position: absolute; top: .6rem; right: .8rem;
  background: transparent; border: 0; color: #94a3b8;
  font-size: 1.4rem; cursor: pointer;
}
.dsy-edit-modal .modal-close:hover { color: #fff; }
.dsy-edit-modal .std-help {
  font-size: .85rem; color: #cbd5e1; line-height: 1.55; margin: .4rem 0;
}
.dsy-edit-actions {
  display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem;
}

/* Bouton edit au-dessus du titre — standard bsc-edit */
.dsy-spinner, .dsy-kill, .dsy-edit { vertical-align: middle; margin-left: .15rem; }

/* Fix : la card host strict minimum height (compact, ~80px) */
.dashboard-tab .dash-host {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: max-content !important;
  padding: .7rem 1rem !important;
  display: block !important;
}
.dashboard-tab .dash-host .host-strip {
  align-items: center !important;
  min-height: 0 !important;
}
.dashboard-tab .dash-host .host-info {
  gap: .12rem !important;
}
.dashboard-tab .dash-host .host-gauge {
  gap: .2rem !important;
}

/* ============================================================================
   STANDARD TOOLBAR — uniforme reference Biometrie sante (Vincent 2026-05-10)
   Zone figee (min-height 3.15rem) + controls cohérents (bg .45, radius 6, h 28).
   ============================================================================ */
.dash-toolbar {
  min-height: 3.15rem !important;
  box-sizing: border-box !important;
}
.dash-toolbar input[type="search"],
.dash-toolbar input[type="text"],
.dash-toolbar input[type="date"],
.dash-toolbar input[type="number"],
.dash-toolbar select,
.dash-toolbar button.t-btn {
  background: rgba(39, 39, 42, .45);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  padding: .22rem .55rem;
  font-size: .82rem;
  font-family: 'Menlo','Consolas',monospace;
  height: 28px;
  box-sizing: border-box;
  line-height: 1.2;
}
.dash-toolbar button.t-btn:hover:not(:disabled) {
  background: rgba(var(--p-base-rgb), .18);
  color: var(--p-base);
  border-color: rgba(var(--p-base-rgb), .35);
}
.dash-toolbar label {
  font-size: .82rem;
  color: #d4d4d8;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  line-height: 1.2;
}