/*
 Phase 10.2.9 - Clean Executive Visual Refinement
 Purpose: remove visual noise, improve hierarchy, and make the Command Center closer to a refined executive cockpit.
 This file is CSS-only and does not trigger any Oracle queries.
*/

/* 1) Reduce decorative visual noise that appeared as repeated mini bar charts. */
.page-dashboard .cmdx-card-spark,
.page-dashboard .cmdx-mini-tile.revenue-tile .cmdx-spark {
  display: none !important;
}

/* 2) Make the pulse cards cleaner and more executive. */
.page-dashboard .cmdx-pulse-row {
  gap: 12px !important;
}

.page-dashboard .cmdx-pulse-card {
  min-height: 82px !important;
  padding: 12px 13px !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,253,255,.96)) !important;
  box-shadow:
    0 14px 34px rgba(17, 24, 39, .06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.page-dashboard .cmdx-pulse-card:after {
  right: -34px !important;
  bottom: -42px !important;
  width: 88px !important;
  height: 88px !important;
  opacity: .42 !important;
}

.page-dashboard .cmdx-pulse-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
}

.page-dashboard .cmdx-pulse-card small {
  font-size: .74rem !important;
  line-height: 1.15 !important;
  color: #1f2a44 !important;
}

.page-dashboard .cmdx-pulse-card strong {
  margin-top: 4px !important;
  font-size: clamp(1.15rem, 1.2vw, 1.42rem) !important;
}

.page-dashboard .cmdx-pulse-card em {
  margin-top: 4px !important;
  font-size: .68rem !important;
  white-space: normal !important;
}

/* 3) Make the Situation Bar less decorative and more command-oriented. */
.page-dashboard .cmdx-situation {
  box-shadow:
    0 24px 70px rgba(10, 13, 35, .18),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.page-dashboard .cmdx-situation article:after {
  opacity: .56 !important;
  transform: scale(.86) !important;
}

.page-dashboard .cmdx-mini-tile.revenue-tile strong {
  margin-top: 2px !important;
}

/* 4) Convert Patient Flow from bulky circles into a clean executive flow track. */
.page-dashboard .cmdx-flow-line {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px 4px 18px !important;
  isolation: isolate !important;
}

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

.page-dashboard .cmdx-flow-line:before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31,181,174,.18), rgba(119,54,226,.45), rgba(31,181,174,.18));
  transform: translateY(-50%);
  z-index: 0;
}

.page-dashboard .cmdx-flow-node {
  position: relative !important;
  z-index: 1 !important;
  min-height: 96px !important;
  max-height: 112px !important;
  aspect-ratio: 1 / .88 !important;
  border-radius: 28px !important;
  padding: 10px 8px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(249,253,255,.94)) !important;
  box-shadow:
    0 17px 34px rgba(17, 24, 39, .06),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.page-dashboard .cmdx-flow-node span {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 2px !important;
}

.page-dashboard .cmdx-flow-node b {
  font-size: clamp(1.08rem, 1.25vw, 1.42rem) !important;
}

.page-dashboard .cmdx-flow-node small {
  font-size: .68rem !important;
  line-height: 1.1 !important;
}

.page-dashboard .cmdx-flow-node.primary {
  min-height: 106px !important;
  transform: scale(1.04) !important;
  box-shadow:
    0 24px 52px rgba(31,181,174,.13),
    inset 0 0 0 10px rgba(31,181,174,.045) !important;
}

/* 5) Clean up the capacity and finance blocks: better spacing, less cramped text. */
.page-dashboard .cmdx-capacity-body {
  gap: 18px !important;
}

.page-dashboard .cmdx-finance-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.page-dashboard .cmdx-finance-grid div {
  min-height: 70px !important;
  padding: 13px 14px !important;
  border-radius: 17px !important;
  display: grid !important;
  align-content: center !important;
}

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

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

/* 6) Make panels feel premium but calmer. */
.page-dashboard .cmdx-panel {
  box-shadow:
    0 18px 45px rgba(17, 24, 39, .055),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.page-dashboard .cmdx-panel:after {
  opacity: .72 !important;
}

.page-dashboard .cmdx-alert.severity-summary,
.page-dashboard .cmdx-alert.severity-low,
.page-dashboard .cmdx-alert.severity-good {
  border-color: rgba(20,184,166,.22) !important;
  background: linear-gradient(145deg, #f6fffd, #ffffff) !important;
}

/* 7) Laptop fit: preserve the clean look on the exact kind of screen shown in screenshots. */
@media (max-width: 1400px), (max-height: 780px) {
  .page-dashboard .cmdx-pulse-row {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .page-dashboard .cmdx-pulse-card {
    min-height: 72px !important;
    padding: 10px 10px !important;
    grid-template-columns: 34px minmax(0,1fr) !important;
  }

  .page-dashboard .cmdx-pulse-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px !important;
  }

  .page-dashboard .cmdx-pulse-card strong {
    font-size: 1.12rem !important;
  }

  .page-dashboard .cmdx-pulse-card small {
    font-size: .68rem !important;
  }

  .page-dashboard .cmdx-pulse-card em {
    font-size: .62rem !important;
  }

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

  .page-dashboard .cmdx-flow-node {
    min-height: 82px !important;
    border-radius: 24px !important;
  }

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

  .page-dashboard .cmdx-finance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

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

@media (max-width: 1180px) {
  .page-dashboard .cmdx-pulse-row {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }

  .page-dashboard .cmdx-finance-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

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

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

  .page-dashboard .cmdx-flow-node,
  .page-dashboard .cmdx-flow-node.primary {
    aspect-ratio: auto !important;
    min-height: 82px !important;
    transform: none !important;
  }
}
