/* ==========================================================
   JARVIS STEP 9K-D
   CORE OS OPERATOR OBSERVABILITY PANEL
   ========================================================== */

.step9k-core-os-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}

.step9k-core-os-head b{
  display:block;
  font-size:15px;
}

.step9k-core-os-head small{
  display:block;
  margin-top:4px;
  opacity:.62;
}

.step9k-core-os-head button{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  padding:8px 12px;
  background:rgba(255,255,255,.045);
  color:inherit;
  font:inherit;
  cursor:pointer;
}

.step9k-core-os-head button:disabled{
  cursor:wait;
  opacity:.55;
}

.step9k-core-os-summary{
  display:grid;
  grid-template-columns:
    repeat(
      4,
      minmax(125px,1fr)
    );
  gap:9px;
  margin-bottom:12px;
}

.step9k-core-os-summary>div,
.step9k-core-os-card>div{
  min-width:0;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.025);
}

.step9k-core-os-summary span,
.step9k-core-os-card span{
  display:block;
  margin-bottom:5px;
  font-size:9px;
  letter-spacing:.07em;
  text-transform:uppercase;
  opacity:.52;
}

.step9k-core-os-summary b,
.step9k-core-os-card b{
  display:block;
  overflow:hidden;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.step9k-core-os-summary .good{
  color:#63e6a5;
}

.step9k-core-os-summary .bad{
  color:#ff7b86;
}

.step9k-core-os-summary .neutral{
  opacity:.68;
}

.step9k-core-os-grid{
  display:grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
  gap:10px;
}

.step9k-core-os-grid section{
  min-width:0;
}

.step9k-core-os-grid h4{
  margin:0 0 7px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.66;
}

.step9k-core-os-card{
  display:grid;
  gap:7px;
}

.step9k-core-os-lock{
  display:grid;
  grid-template-columns:
    repeat(
      7,
      minmax(100px,1fr)
    );
  gap:7px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
}

.step9k-core-os-lock span{
  display:block;
  font-size:8px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.48;
}

.step9k-core-os-lock b{
  display:block;
  margin-top:3px;
  font-size:9px;
}

.step9k-core-os-loading,
.step9k-core-os-error,
.step9k-core-os-warning{
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
}

.step9k-core-os-error{
  color:#ff98a0;
  background:rgba(255,60,80,.06);
}

.step9k-core-os-warning{
  margin-top:12px;
  color:#ffc978;
  background:rgba(255,184,55,.055);
}

#step9kCoreOsDot[data-state="healthy"]{
  color:#63e6a5;
}

#step9kCoreOsDot[data-state="degraded"],
#step9kCoreOsDot[data-state="error"]{
  color:#ff7b86;
}

#step9kCoreOsDot[data-state="loading"]{
  color:#ffc978;
}

@media (max-width:1100px){
  .step9k-core-os-grid{
    grid-template-columns:1fr;
  }

  .step9k-core-os-lock{
    grid-template-columns:
      repeat(
        3,
        minmax(110px,1fr)
      );
  }
}

@media (max-width:720px){
  .step9k-core-os-head{
    flex-direction:column;
  }

  .step9k-core-os-summary,
  .step9k-core-os-lock{
    grid-template-columns:1fr;
  }
}