/* HMS 0124: additive computer-width layout; keep earlier per-page styles intact. */
:root { --hms-desktop-max: 2200px; }

/* Flexible content must shrink instead of creating a page-wide scrollbar. */
#workspace, #desk, main, aside, section, article, .card, .panels,
.staffLayout, .billingColumns, .layout, .grid, .row, .medicine {
  min-width: 0;
}
input, select, textarea, img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }
.tableScroll, .tableWrap, .reportTableWrap { max-width: 100%; overflow-x: auto; }
dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
dialog .tableScroll { overflow-x: auto; }

/* Doctor Desk: the appointment heading must stay inside its scrollable card. */
#workspace > aside.card { min-width: 0; padding-top: 22px; }
#workspace > aside.card > h2:first-child {
  position: static;
  inset: auto;
  transform: none;
  float: none;
  line-height: 1.35;
  margin: 0 0 14px;
}

/* Keep desktop and external-monitor working views recognisably the same. */
@media (min-width: 1024px) {
  #workspace:has(> aside.card) {
    width: 100%;
    max-width: var(--hms-desktop-max);
    grid-template-columns: clamp(300px, 24vw, 390px) minmax(0, 1fr);
    gap: clamp(16px, 1.6vw, 28px);
  }
  #workspace:has(> aside.card) > main { min-width: 0; }
  #workspace:has(> aside.card) > aside.card {
    align-self: start;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Reception: navigation plus patient-search and booking panels. */
  #workspace.layout:has(> aside > a) {
    grid-template-columns: clamp(165px, 14vw, 205px) minmax(0, 1fr);
    align-items: start;
  }
  #workspace.layout > main { width: 100%; max-width: var(--hms-desktop-max); }
  .panels { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .panels > section { min-width: 0; }

  /* Admin staff directory, invoice desk, and follow-up call lists. */
  .staffLayout { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.45fr); }
  .staffLayout > section { min-width: 0; }
  .billingWrap { width: 100%; max-width: var(--hms-desktop-max); }
  .billingColumns { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); }
  .billingColumns > section { min-width: 0; }
  main:has(> .layout) { width: 100%; max-width: var(--hms-desktop-max); }
  main > .layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  main > .layout > section { min-width: 0; }
}

/* Tablet, phone and narrow windows stack because two usable panes cannot fit. */
@media (max-width: 1023px) {
  #workspace:has(> aside.card), .panels, .staffLayout,
  .billingColumns, main > .layout { grid-template-columns: minmax(0, 1fr); }
  #workspace > aside.card { position: static; max-height: min(46vh, 440px); }
}

@media (max-width: 600px) {
  #workspace:has(> aside.card) { padding-left: 10px; padding-right: 10px; }
  #workspace > aside.card > h2:first-child { font-size: 20px; }
  .card, article { max-width: 100%; }
  .row > button, .chips > button { white-space: normal; }
}