/* Shared work surfaces; clinical data and permission visibility remain unchanged. */
:root { --muted: #526170; --shadow: none; }
body { font-size: 14px; line-height: 1.45; background: #f5f7f8; }
.app { grid-template-columns: 224px minmax(0, 1fr); }
.app > aside { padding: 14px 10px; gap: 8px; height: 100dvh; }
.app > aside nav { align-content: start; gap: 2px; }
.app > aside nav button { border-radius: 4px; padding: 8px 12px; }
.app > aside nav button.active { border-left: 3px solid var(--teal); padding-left: 9px; }
.app > aside .brand { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
.app > aside .mark { width: 36px; height: 36px; }
#userLabel { overflow-wrap: anywhere; }
main { padding: 16px 20px 28px; }
main > header { margin-bottom: 14px; }
h1 { font-size: 22px; line-height: 1.25; }
h2 { font-size: 16px; line-height: 1.35; }
h3 { font-size: 14px; }
.title { margin-bottom: 12px; }
.title p { margin: 4px 0 0; }
.page > .panel, .page > .card, .split > .panel, .split > .card {
  box-shadow: none; border-radius: 0; border-left: 0; border-right: 0;
}
.panel .panel, .card .panel, .card .card { box-shadow: none; }
button, input, select, textarea { letter-spacing: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: 2px solid #1768a5; outline-offset: 2px; }
.patient-contact-details { margin: 6px 0 12px; }
.patient-contact-details summary { cursor: pointer; color: var(--teal); font-size: 12px; }
.clinical-patient-banner { padding: 10px 12px; gap: 8px; }
.clinical-patient-identification strong { font-size: 15px; }
.workspace-sections { display: flex; flex: none; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.workspace-sections a { color: #285b7c; font-size: 13px; text-decoration: none; padding: 4px 0; }
.workspace-sections a:hover { text-decoration: underline; }
.workspace-table { overflow-x: auto; max-width: 100%; min-width: 0; }
.workspace-table table { margin: 0; }
.page, .split > *, .panel, .card { min-width: 0; }
.page h2, .page h3 { scroll-margin-top: 16px; overflow-wrap: anywhere; }
.clinical-continuous-entry[hidden] { display: none !important; }
.record-filters { margin: 12px 0; }
.page .panel-head { flex-wrap: wrap; gap: 6px; }
.billing-worklist-toolbar { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
@media (max-width: 900px) {
  .app { grid-template-columns: 190px minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .app { display: block; }
  .app > aside { position: relative; height: auto; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; }
  .app > aside .brand { margin: 0; grid-column: 1 / -1; }
  .app > aside nav { grid-column: 1 / -1; display: flex; overflow-x: auto; overflow-y: hidden; max-width: 100%; }
  .app > aside nav button { flex: 0 0 auto; min-height: 44px; }
  .app > aside > .btn { min-height: 44px; }
  main { padding: 12px; }
  main > header { grid-template-columns: minmax(0, 1fr) auto; }
  h1 { font-size: 20px; }
  .workspace-sections { gap: 4px 12px; }
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 44px; }
  #inventory .toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
  #inventory .toolbar > label { min-width: 0; }
}
@media print { .workspace-sections { display: none; } }

/* Keep dense operational tables readable inside their own scroll area. */
.workspace-table table { min-width: 640px; }
.workspace-table th { overflow-wrap: normal; }
.workspace-table td { overflow-wrap: anywhere; }
.workspace-table td .btn { min-width: 64px; white-space: normal; }
.workspace-table th, .workspace-table td { padding: 9px 10px; font-size: 13px; }
#ward > .split { grid-template-columns: minmax(0, 1fr); }
label, .toolbar > *, .actions > *, .panel-head > * { min-width: 0; }
label, .tag, .workspace-sections a { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .app > aside { height: auto; position: static; }
  .app > aside nav { max-width: 100%; min-width: 0; }
  .app > aside nav button { flex: 0 0 140px; white-space: normal; }
  main > header { grid-template-columns: minmax(0, 1fr); }
}
.card { grid-template-columns: minmax(0, 1fr); }
.card > *, .panel > *, .side-stack > *, .table-wrap > *, .workspace-table { min-width: 0; max-width: 100%; }
.clinical-home-toolbar, .theatre-filter-bar {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}