/* =========================================================
   ADMIN AUDIT — MANUAL RUNTIME CONTROL
========================================================= */

.audit-runtime-section {

  position:
    relative;

  overflow:
    hidden;

  margin:
    6px 0 20px;

  border:
    1px solid
    rgba(
      99,
      151,
      255,
      0.24
    );

  border-left:
    4px solid
    rgba(
      77,
      141,
      255,
      0.82
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        24,
        42,
        68,
        0.96
      ),
      rgba(
        12,
        28,
        49,
        0.98
      )
    );

  box-shadow:
    0 14px 34px
    rgba(
      0,
      0,
      0,
      0.16
    );

}

.audit-runtime-section::before {

  content:
    "";

  position:
    absolute;

  top:
    -140px;

  right:
    -90px;

  width:
    280px;

  height:
    280px;

  border-radius:
    999px;

  background:
    radial-gradient(
      circle,
      rgba(
        77,
        141,
        255,
        0.18
      ),
      transparent 68%
    );

  pointer-events:
    none;

}

.audit-runtime-section summary::-webkit-details-marker {

  display:
    none;

}

.audit-runtime-section-summary {

  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    14px;

  min-height:
    76px;

  padding:
    16px 18px;

  cursor:
    pointer;

  list-style:
    none;

}

.audit-runtime-section-summary:hover {

  background:
    rgba(
      77,
      141,
      255,
      0.055
    );

}

.audit-runtime-step-number {

  display:
    grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

  border:
    1px solid
    rgba(
      99,
      151,
      255,
      0.40
    );

  border-radius:
    13px;

  background:
    rgba(
      77,
      141,
      255,
      0.16
    );

  color:
    #d8e4ff;

  font-size:
    11px;

  font-weight:
    900;

  box-shadow:
    0 0 26px
    rgba(
      77,
      141,
      255,
      0.14
    );

}

.audit-runtime-section-copy {

  min-width:
    0;

}

.audit-runtime-section-copy strong {

  display:
    block;

  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    15px;

  font-weight:
    880;

  letter-spacing:
    -0.015em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}

.audit-runtime-section-copy small {

  display:
    block;

  overflow:
    hidden;

  margin-top:
    5px;

  color:
    rgba(
      195,
      210,
      232,
      0.72
    );

  font-size:
    11px;

  line-height:
    1.45;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}

.audit-runtime-section-summary em {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    28px;

  padding:
    6px 11px;

  border:
    1px solid
    rgba(
      148,
      176,
      213,
      0.20
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.045
    );

  color:
    rgba(
      184,
      204,
      236,
      0.76
    );

  font-size:
    9px;

  font-style:
    normal;

  font-weight:
    900;

  line-height:
    1;

  white-space:
    nowrap;

}

.audit-runtime-section-summary em.is-ready {

  border-color:
    rgba(
      79,
      211,
      155,
      0.34
    );

  background:
    rgba(
      79,
      211,
      155,
      0.11
    );

  color:
    #baf4d8;

}

.audit-runtime-section-summary em.is-locked {

  border-color:
    rgba(
      240,
      107,
      120,
      0.24
    );

  background:
    rgba(
      240,
      107,
      120,
      0.075
    );

  color:
    #ffc4ca;

}

.audit-runtime-section-body {

  position:
    relative;

  z-index:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  padding:
    0 18px 18px 70px;

}

.audit-runtime-status-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

}

.audit-runtime-status-pill {

  min-width:
    0;

  min-height:
    86px;

  padding:
    13px 14px;

  border:
    1px solid
    rgba(
      148,
      176,
      213,
      0.14
    );

  border-radius:
    14px;

  background:
    rgba(
      255,
      255,
      255,
      0.030
    );

}

.audit-runtime-status-pill span {

  display:
    block;

  overflow:
    hidden;

  color:
    rgba(
      176,
      194,
      221,
      0.70
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.045em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;

}

.audit-runtime-status-pill strong {

  display:
    block;

  margin-top:
    8px;

  color:
    #ffffff;

  font-size:
    18px;

  font-weight:
    920;

  letter-spacing:
    -0.025em;

  line-height:
    1;

}

.audit-runtime-status-pill small {

  display:
    block;

  overflow:
    hidden;

  margin-top:
    8px;

  color:
    rgba(
      176,
      194,
      221,
      0.62
    );

  font-size:
    10px;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}

.audit-runtime-status-pill.is-safe {

  border-color:
    rgba(
      79,
      211,
      155,
      0.24
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        79,
        211,
        155,
        0.09
      ),
      rgba(
        255,
        255,
        255,
        0.024
      )
    );

}

.audit-runtime-status-pill.is-safe strong {

  color:
    #baf4d8;

}

.audit-runtime-status-pill.is-locked {

  border-color:
    rgba(
      148,
      176,
      213,
      0.12
    );

  background:
    rgba(
      255,
      255,
      255,
      0.024
    );

}

.audit-runtime-status-pill.is-locked strong {

  color:
    rgba(
      196,
      213,
      238,
      0.78
    );

}

.audit-runtime-command-bar {

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    18px;

  padding:
    14px;

  border:
    1px solid
    rgba(
      77,
      141,
      255,
      0.18
    );

  border-radius:
    15px;

  background:
    linear-gradient(
      90deg,
      rgba(
        77,
        141,
        255,
        0.08
      ),
      rgba(
        6,
        20,
        38,
        0.24
      )
    );

}

.audit-runtime-command-bar strong {

  display:
    block;

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    860;

}

.audit-runtime-command-bar span {

  display:
    block;

  margin-top:
    5px;

  color:
    rgba(
      176,
      194,
      221,
      0.70
    );

  font-size:
    10px;

  line-height:
    1.45;

}

.audit-runtime-command-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

}

.audit-runtime-command-actions .btn {

  min-height:
    39px;

  padding:
    9px 13px;

  border-radius:
    10px;

  font-size:
    10px;

  font-weight:
    850;

  white-space:
    nowrap;

}

.audit-runtime-run-btn:disabled,
.audit-runtime-stop-btn:disabled {

  opacity:
    0.42;

  cursor:
    not-allowed;

}

@media (
  max-width:
  1100px
) {

  .audit-runtime-section-body {

    padding-left:
      18px;

  }

  .audit-runtime-status-grid,
  .audit-runtime-command-bar {

    grid-template-columns:
      1fr;

  }

  .audit-runtime-command-actions {

    justify-content:
      flex-start;

  }

}

@media (
  max-width:
  720px
) {

  .audit-runtime-section-summary {

    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );

  }

  .audit-runtime-section-summary em {

    grid-column:
      1 / -1;

    justify-self:
      flex-start;

  }

  .audit-runtime-command-actions {

    align-items:
      stretch;

    flex-direction:
      column;

  }

  .audit-runtime-command-actions .btn {

    width:
      100%;

  }

}