/*
 Phase 10.2.10 - Pixel Perfect Executive Dashboard Fix
 Purpose: fix the remaining visual issues highlighted in the latest screenshots:
 - Patient Flow overlap / clipped nodes
 - excessive blank panel space
 - confusing Total Beds label inside donut
 - over-wide finance/patient modules on laptop screens
 This is UI-only and does not call Oracle or change Summary Layer.
*/

.page-dashboard .cmdx {
  --panel-min: 0;
}

/* Stop dashboard panels from stretching into tall empty cards. */
.page-dashboard .cmdx-grid {
  align-items: start !important;
  grid-auto-rows: auto !important;
}

.page-dashboard .cmdx-panel {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 15px !important;
}

.page-dashboard .flow-panel,
.page-dashboard .capacity-panel,
.page-dashboard .finance-panel,
.page-dashboard .clinical-panel,
.page-dashboard .alerts-panel,
.page-dashboard .actions-panel {
  min-height: 0 !important;
}

/* Patient Flow: use clean step pills, not oversized circular nodes. */
.page-dashboard .cmdx-flow-line {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 8px 0 10px !important;
  overflow: hidden !important;
}

.page-dashboard .cmdx-flow-line > i {
  display: none !important;
}

.page-dashboard .cmdx-flow-line:before {
  top: 50% !important;
  left: 7% !important;
  right: 7% !important;
  height: 2px !important;
  opacity: .55 !important;
}

.page-dashboard .cmdx-flow-node,
.page-dashboard .cmdx-flow-node.primary {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 86px !important;
  max-height: 92px !important;
  aspect-ratio: auto !important;
  border-radius: 22px !important;
  padding: 9px 6px !important;
  transform: none !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  box-shadow:
    0 14px 30px rgba(17, 24, 39, .055),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.page-dashboard .cmdx-flow-node.primary {
  border-color: rgba(31,181,174,.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(31,181,174,.13), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,253,255,.95)) !important;
}

.page-dashboard .cmdx-flow-node span {
  width: 29px !important;
  height: 29px !important;
  margin: 0 !important;
  font-size: .82rem !important;
}

.page-dashboard .cmdx-flow-node b {
  font-size: clamp(.98rem, 1.05vw, 1.22rem) !important;
  line-height: 1.05 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.page-dashboard .cmdx-flow-node small {
  max-width: 100% !important;
  font-size: .62rem !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* A small arrow hint between steps without wasting columns. */
.page-dashboard .cmdx-flow-node:not(:last-of-type)::after {
  content: "→";
  position: absolute;
  inset-inline-end: -9px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  color: #6d28d9;
  font-weight: 1000;
  font-size: 1rem;
  text-shadow: 0 1px 0 #fff;
}

[dir="rtl"] .page-dashboard .cmdx-flow-node:not(:last-of-type)::after {
  content: "←";
  inset-inline-end: auto;
  inset-inline-start: -9px;
}

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

/* Capacity donut: keep the Total Beds label centered and readable. */
.page-dashboard .cmdx-capacity-body {
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

.page-dashboard .cmdx-donut {
  width: 118px !important;
  height: 118px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.page-dashboard .cmdx-donut b {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  transform: none !important;
}

.page-dashboard .cmdx-donut small {
  display: block !important;
  position: static !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: .62rem !important;
  line-height: 1.1 !important;
  text-align: center !important;
  max-width: 70px !important;
  white-space: normal !important;
  transform: none !important;
  color: #66738a !important;
}

.page-dashboard .cmdx-units {
  gap: 10px !important;
}

.page-dashboard .cmdx-units div {
  grid-template-columns: 68px minmax(0,1fr) 24px !important;
  gap: 8px !important;
}

.page-dashboard .cmdx-soft-link {
  margin-top: 10px !important;
  padding: 9px 17px !important;
}

/* Finance cards: cleaner executive grid and no excessive lower blank space. */
.page-dashboard .cmdx-finance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.page-dashboard .cmdx-finance-grid div {
  min-height: 64px !important;
  padding: 11px 12px !important;
  align-content: center !important;
}

.page-dashboard .cmdx-finance-grid small {
  font-size: .68rem !important;
  line-height: 1.12 !important;
}

.page-dashboard .cmdx-finance-grid strong {
  font-size: .98rem !important;
  line-height: 1.16 !important;
}

/* More compact clinical and alert sections while preserving the premium look. */
.page-dashboard .cmdx-clinical-top {
  gap: 9px !important;
}

.page-dashboard .cmdx-clinical-top > div {
  min-height: 78px !important;
  padding: 11px 12px !important;
}

.page-dashboard .cmdx-specialties {
  gap: 8px !important;
}

.page-dashboard .cmdx-specialties li {
  min-height: 34px !important;
  padding-block: 6px !important;
}

.page-dashboard .cmdx-alert,
.page-dashboard .cmdx-action {
  min-height: 0 !important;
}

.page-dashboard .cmdx-alert {
  padding: 18px 16px !important;
}

.page-dashboard .cmdx-actions {
  gap: 10px !important;
}

.page-dashboard .cmdx-action {
  padding: 12px 13px !important;
}

/* Remove over-decorated lower glows that looked like empty panel blocks. */
.page-dashboard .cmdx-panel::after {
  width: 120px !important;
  height: 120px !important;
  right: -45px !important;
  bottom: -55px !important;
  opacity: .36 !important;
}

/* Laptop / medium screens: prevent horizontal crowding and clipping. */
@media (max-width: 1400px), (max-height: 820px) {
  .page-dashboard .cmdx-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr) minmax(300px, .88fr) !important;
    gap: 10px !important;
  }

  .page-dashboard .cmdx-panel {
    padding: 13px !important;
    border-radius: 18px !important;
  }

  .page-dashboard .cmdx-panel-title {
    margin-bottom: 10px !important;
  }

  .page-dashboard .cmdx-flow-line {
    gap: 7px !important;
  }

  .page-dashboard .cmdx-flow-node,
  .page-dashboard .cmdx-flow-node.primary {
    min-height: 75px !important;
    max-height: 82px !important;
    border-radius: 19px !important;
    padding: 7px 5px !important;
  }

  .page-dashboard .cmdx-flow-node span {
    width: 25px !important;
    height: 25px !important;
    font-size: .72rem !important;
  }

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

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

  .page-dashboard .cmdx-flow-node:not(:last-of-type)::after {
    inset-inline-end: -7px;
    font-size: .9rem;
  }

  [dir="rtl"] .page-dashboard .cmdx-flow-node:not(:last-of-type)::after {
    inset-inline-start: -7px;
  }

  .page-dashboard .cmdx-capacity-body {
    grid-template-columns: 106px minmax(0,1fr) !important;
    gap: 10px !important;
  }

  .page-dashboard .cmdx-donut {
    width: 98px !important;
    height: 98px !important;
  }

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

  .page-dashboard .cmdx-donut small {
    font-size: .56rem !important;
    max-width: 62px !important;
  }

  .page-dashboard .cmdx-units div {
    grid-template-columns: 60px minmax(0,1fr) 20px !important;
    gap: 6px !important;
  }

  .page-dashboard .cmdx-units span,
  .page-dashboard .cmdx-units em {
    font-size: .74rem !important;
  }

  .page-dashboard .cmdx-finance-grid {
    gap: 8px !important;
  }

  .page-dashboard .cmdx-finance-grid div {
    min-height: 58px !important;
    padding: 9px 10px !important;
  }

  .page-dashboard .cmdx-finance-grid strong {
    font-size: .91rem !important;
  }
}

@media (max-width: 1180px) {
  .page-dashboard .cmdx-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "flow flow"
      "capacity finance"
      "clinical alerts"
      "actions actions" !important;
    align-items: start !important;
  }

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

@media (max-width: 760px) {
  .page-dashboard .cmdx-flow-line {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

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

  .page-dashboard .cmdx-flow-node,
  .page-dashboard .cmdx-flow-node.primary {
    min-height: 70px !important;
    max-height: none !important;
  }

  .page-dashboard .cmdx-capacity-body,
  .page-dashboard .cmdx-finance-grid {
    grid-template-columns: 1fr !important;
  }
}
