/* ============================================================
   AcuPath QS1 — Testing Bars hotfix (WIDER TUBES)
   ============================================================ */

/* Outer tile: no secondary trough */
.qs-tile{
  position:relative !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:18px !important;
}

/* TROUGH: tall + wide pill */
.qs-tile .sleeve{
  position:absolute !important;
  bottom:18px !important;
  left:50% !important;
  transform:translateX(-50%) !important;

  /* WIDER width (was narrower) ? now ~90% of tile width */
  width:90% !important;
  height:85% !important;

  border-radius:999px !important;
  overflow:hidden !important;

  background:linear-gradient(180deg,#323d4b,#0f151d) !important;
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,0.18),
    inset 0 -8px 12px rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

/* BAR: same width as widened trough */
.qs-tile .bar{
  position:absolute !important;
  bottom:4px !important;

  left:0 !important;
  right:0 !important;

  height:0%;
  border-radius:999px !important;

  /* Burnt-yellow gradient */
  background:linear-gradient(
    180deg,
    #ffe9aa 0%,
    #ffcf63 35%,
    #e69a29 100%
  ) !important;

  box-shadow:0 0 8px rgba(255,200,90,0.45) !important;
  transition:height .25s ease !important;
}

/* Percent number inside bar */
.qs-pct{
  position:absolute;
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,0.65),0 0 3px rgba(0,0,0,0.5);
  pointer-events:none;
  opacity:0;
  z-index:2;
}

/* Hide legacy percent widgets */
.qs-tile [class*="percent"]{
  display:none !important;
}

/* ============================================================
   Layout spacing below the Results Graph for Trends + future bars
   ============================================================ */

/* Give the Results Graph card extra breathing room below */
.qs-results-wrap{
  margin-top:16px;
  margin-bottom:100px !important; /* extra gap so Meridian Trends is ~0.5" lower */
}

/* Ensure whatever comes right after the Results Graph is pushed down */
.qs-results-wrap + *{
  margin-top:16px;
}

/* ===== QS1 HOTFIX: Results Graph card must grow to contain Testing Grid rows =====
   Symptom: bottom Testing Grid cells render "outside" the rounded card background.
   Fix: ensure the card/container is not height-capped and can expand with content.
   SAFE: layout only; no capture/FSM logic.
*/
#qsResultsGraphCard,
.qsResultsGraphCard,
.qsResultsGraph,
.qsGraphCard,
.qsCardResultsGraph,
.qsResultsCard {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 18px !important;
}

/* ===== QS1 HOTFIX: Make Testing Grid live inside its own rounded card (.qsMini) ===== */
.qsMini{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
  padding: 12px !important;
}

.qsMiniTop{ margin-bottom: 10px !important; }
.qsMiniGridWrap{ padding-bottom: 8px !important; }

/* ===== QS1 FIX: Results Graph container owns the card ===== */

/* Make Results Graph wrap its full contents */
.qs-results-wrap{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
}

/* Testing Grid becomes internal layout only */
.qsMini{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ===== QS1 POLISH: Testing Grid header + footer alignment (display-only) ===== */

/* Header: center the title while keeping meta right-aligned */
.qsMiniTop{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.qsMiniTitle{
  grid-column: 2 !important;
  text-align: center !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
}
.qsMiniMeta{
  grid-column: 3 !important;
  justify-self: end !important;
  text-align: right !important;
  opacity: .85 !important;
}

/* Footer/actions: tidy right-aligned button row */
.qsMiniActions{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
}
.qsMiniBtn{
  border-radius: 10px !important;
  padding: 7px 12px !important;
  font-weight: 800 !important;
}