/*
 Phase 10.2.11 — Patient Flow No-Overlap Fix
 Purpose: final visual fix for the Patient Flow module on laptop/medium screens.
 UI-only patch: no Oracle, no Summary Layer, no backend changes.
*/

.page-dashboard .flow-panel {
  overflow: hidden !important;
}

.page-dashboard .flow-panel .cmdx-flow-line {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 10px 0 12px !important;
  overflow: visible !important;
}

/* Remove old connectors and pseudo arrows which caused overlap on compact widths. */
.page-dashboard .flow-panel .cmdx-flow-line > i,
.page-dashboard .flow-panel .cmdx-flow-line::before,
.page-dashboard .flow-panel .cmdx-flow-node::after,
.page-dashboard .flow-panel .cmdx-flow-node:not(:last-of-type)::after {
  display: none !important;
  content: none !important;
}

/* Convert circular flow nodes into compact executive step cards. */
.page-dashboard .flow-panel .cmdx-flow-node,
.page-dashboard .flow-panel .cmdx-flow-node.primary {
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 76px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 18px !important;
  padding: 10px 9px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 7px !important;
  row-gap: 2px !important;
  align-items: center !important;
  justify-items: start !important;
  place-items: unset !important;
  text-align: start !important;
  overflow: hidden !important;
  transform: none !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,252,255,.96)) !important;
  box-shadow:
    0 16px 30px rgba(17, 24, 39, .055),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.page-dashboard .flow-panel .cmdx-flow-node.primary {
  border-color: rgba(31, 181, 174, .22) !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(31,181,174,.13), transparent 45%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,252,255,.96)) !important;
}

.page-dashboard .flow-panel .cmdx-flow-node span {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  font-size: .78rem !important;
}

.page-dashboard .flow-panel .cmdx-flow-node b {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(.98rem, 1.05vw, 1.16rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.page-dashboard .flow-panel .cmdx-flow-node small {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: .58rem !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Add a clean track under the steps instead of arrows inside the nodes. */
.page-dashboard .flow-panel .cmdx-flow-line::after {
  content: "" !important;
  position: absolute !important;
  left: 5% !important;
  right: 5% !important;
  bottom: 2px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(31,181,174,.42), rgba(109,40,217,.35), rgba(31,181,174,.22)) !important;
  display: block !important;
  pointer-events: none !important;
}

.page-dashboard .flow-panel footer {
  margin-top: 8px !important;
  padding-top: 9px !important;
  line-height: 1.25 !important;
}

/* Keep the Total Beds donut centered and never let text sit on the ring. */
.page-dashboard .capacity-panel .cmdx-donut,
.page-dashboard .cmdx-donut {
  overflow: hidden !important;
  text-align: center !important;
}

.page-dashboard .capacity-panel .cmdx-donut small,
.page-dashboard .cmdx-donut small {
  background: transparent !important;
  color: #66738a !important;
  text-shadow: none !important;
  box-decoration-break: clone !important;
}

/* Laptop widths: make the flow panel use enough room and keep all nodes readable. */
@media (max-width: 1500px), (max-height: 850px) {
  .page-dashboard .flow-panel .cmdx-flow-line {
    gap: 7px !important;
  }

  .page-dashboard .flow-panel .cmdx-flow-node,
  .page-dashboard .flow-panel .cmdx-flow-node.primary {
    min-height: 68px !important;
    border-radius: 16px !important;
    padding: 8px 7px !important;
    grid-template-columns: 27px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  .page-dashboard .flow-panel .cmdx-flow-node span {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    border-radius: 10px !important;
    font-size: .68rem !important;
  }

  .page-dashboard .flow-panel .cmdx-flow-node b {
    font-size: .96rem !important;
  }

  .page-dashboard .flow-panel .cmdx-flow-node small {
    font-size: .52rem !important;
  }
}

/* If the grid becomes too narrow, allow flow to span the first row. */
@media (max-width: 1320px) {
  .page-dashboard .cmdx-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "flow flow"
      "capacity finance"
      "clinical alerts"
      "actions actions" !important;
  }

  .page-dashboard .flow-panel .cmdx-flow-line {
    grid-template-columns: repeat(5, minmax(86px, 1fr)) !important;
  }
}

@media (max-width: 780px) {
  .page-dashboard .flow-panel .cmdx-flow-line {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .page-dashboard .flow-panel .cmdx-flow-line::after {
    display: none !important;
  }

  .page-dashboard .flow-panel .cmdx-flow-node,
  .page-dashboard .flow-panel .cmdx-flow-node.primary {
    min-height: 64px !important;
  }
}
