/* Scenario Dashboard readiness grid */

.bbi-rd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 78px;
  padding: 0 18px;
}

.bbi-rd-title b { display: block; font-size: 15px; font-weight: 800; color: var(--bbi-ink); }

.bbi-rd-title small {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-muted);
  transition: color 0.4s ease;
}

.bbi-rd-title small svg { width: 12px; height: 12px; }
.bbi-rd-title small.is-good { color: var(--bbi-good); }

.bbi-rd-key {
  display: flex;
  gap: 14px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-muted);
}

.bbi-rd-key span { display: inline-flex; align-items: center; gap: 6px; }
.bbi-rd-key i { width: 10px; height: 10px; border-radius: 50%; background: #dfe4f0; }
.bbi-rd-key i.is-done { background: var(--bbi-good); }
.bbi-rd-key i.is-partial { background: var(--bbi-warn); }

.bbi-rd-ring {
  --bbi-ring-color: var(--bbi-indigo);
  width: 54px;
  height: 54px;
  margin: -6px 0 0 14px;
  transition: --bbi-ring-color 0.4s ease;
}

.bbi-rd-ring::after { inset: 6px; }
.bbi-rd-ring.is-complete { --bbi-ring-color: var(--bbi-good); }

.bbi-rd-ring .bbi-ring__value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.bbi-rd-ring .bbi-ring__value small { margin: 0 0 0 1px; font-size: 11px; letter-spacing: 0; color: var(--bbi-ink); }

.bbi-rd-cols {
  position: absolute;
  top: 78px;
  left: 0;
  width: 720px;
  height: 34px;
  background: var(--bbi-surface-2);
  border-top: 1px solid var(--bbi-line);
  border-bottom: 1px solid var(--bbi-line);
}

.bbi-rd-col {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bbi-muted);
  white-space: nowrap;
}

.bbi-rd-col.is-left { justify-content: flex-start; }
.bbi-rd-col--icon { color: #9ba7bf; }
.bbi-rd-col--icon svg { width: 16px; height: 16px; }

.bbi-rd-row {
  position: absolute;
  border-bottom: 1px solid var(--bbi-line);
  transition: background-color 0.3s ease;
}

.bbi-rd-row:last-child { border-bottom: 0; }
.bbi-rd-row.is-focus { background: #fffaf2; }

.bbi-rd-seg {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  font-size: 15px;
  font-weight: 800;
  color: var(--bbi-ink);
  white-space: nowrap;
}

.bbi-rd-seg i { width: 12px; height: 12px; border-radius: 4px; }

.bbi-rd-num {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bbi-ink);
  font-variant-numeric: tabular-nums;
}

.bbi-rd-num.is-zero { color: #b8c1d6; }

.bbi-rd-flag,
.bbi-rd-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 9px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
}

.bbi-rd-flag { background: #fff1db; color: #d97706; box-shadow: inset 0 0 0 1px #ffd28a; }
.bbi-rd-ok { background: var(--bbi-good-bg); color: var(--bbi-good); }
.bbi-rd-flag svg,
.bbi-rd-ok svg { width: 13px; height: 13px; }
.bbi-rd-flag.is-busy { animation: bbi-rd-busy 0.35s ease-in-out infinite alternate; }

@keyframes bbi-rd-busy {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

.bbi-rd-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: #eef1f7;
  color: #b3bdd2;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.bbi-rd-row .bbi-rd-dot { position: absolute; }
.bbi-rd-dot svg { width: 14px; height: 14px; }
.bbi-rd-dot.is-done { background: var(--bbi-good); color: #fff; }
.bbi-rd-dot.is-partial { background: var(--bbi-warn); color: #fff; }
.bbi-rd-dot.is-hover { box-shadow: 0 0 0 4px rgba(30, 42, 74, 0.14); }

.bbi-rd-tip {
  position: absolute;
  z-index: 20;
  padding: 9px 14px 10px;
  border-radius: 12px;
  background: var(--bbi-navy-deep);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 16px 30px -12px rgba(30, 42, 74, 0.6);
  transition: opacity 0.25s ease;
}

.bbi-rd-tip b { display: block; font-size: 13px; font-weight: 800; }
.bbi-rd-tip span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }

.bbi-rd-tip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: var(--arrow-x, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 2px;
  background: var(--bbi-navy-deep);
  transform: rotate(45deg);
}

.bbi-rd-legend { padding: 14px 18px; }

.bbi-rd-chain {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--bbi-ink);
  white-space: nowrap;
}

.bbi-rd-chain__step { display: inline-flex; align-items: center; gap: 8px; }
.bbi-rd-chain .bbi-rd-dot { width: 26px; height: 26px; }
.bbi-rd-chain .bbi-rd-dot svg { width: 13px; height: 13px; }
.bbi-rd-chain__arrow svg { display: block; width: 14px; height: 14px; color: var(--bbi-faint); }