/* Dashboard-specific enhancements kept separate from the shared application shell. */
.situation-bar {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, 1fr);
  overflow: hidden;
  margin-bottom: 14px;
  color: #dce8ed;
  background: #0b1d2d;
  border: 1px solid #18384e;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.situation-bar > div {
  display: flex;
  min-height: 62px;
  padding: 12px 18px;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.situation-bar > div:last-child { border-right: 0; }
.situation-bar small {
  margin-bottom: 5px;
  color: #7895a3;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.situation-bar strong { font-size: 12px; letter-spacing: 0.04em; }
.situation-title {
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 12px;
}

.situation-title div { display: flex; flex-direction: column; }
.live-pulse {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #34d49b;
  box-shadow: 0 0 0 5px rgba(52, 212, 155, 0.12);
}

.readiness { color: #f0bb61; }
.bar-width-10 { width: 10%; }
.bar-width-20 { width: 20%; }
.bar-width-30 { width: 30%; }
.bar-width-40 { width: 40%; }
.bar-width-50 { width: 50%; }
.bar-width-60 { width: 60%; }
.bar-width-70 { width: 70%; }
.bar-width-80 { width: 80%; }
.bar-width-90 { width: 90%; }
.bar-width-100 { width: 100%; }

@media (max-width: 760px) {
  .situation-bar { grid-template-columns: 1fr 1fr; }
  .situation-bar > div { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .situation-bar > div:nth-child(2) { border-right: 0; }
}

@media (max-width: 430px) {
  .situation-bar { grid-template-columns: 1fr; }
  .situation-bar > div { border-right: 0; }
}