/* Almarai: one family for Arabic and Latin. Files are vendored; no network fetches. */
@font-face { font-family: "Almarai"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/almarai-arabic-300-normal.7b61ce4a4e28.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Almarai"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/almarai-latin-300-normal.d29d06c276fe.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Almarai"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/almarai-arabic-400-normal.4756b35de4e7.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Almarai"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/almarai-latin-400-normal.967e63e5eb1f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Almarai"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/almarai-arabic-700-normal.ab3bd5595755.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Almarai"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/almarai-latin-700-normal.268e4ca2833e.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Almarai"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/almarai-arabic-800-normal.5a12448ef4b1.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Almarai"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/almarai-latin-800-normal.0242684a2b85.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bs-body-font-family: "Almarai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --app-sidebar-width: 16.5rem;
  --app-topbar-height: 3.5rem;
}

/* Logical properties only: the same stylesheet serves LTR and RTL. */
[x-cloak] { display: none !important; }
.app-topbar { min-block-size: var(--app-topbar-height); }
.brand-logo { block-size: 1.75rem; inline-size: auto; }
.app-body { min-block-size: 0; }
.app-sidebar { --bs-offcanvas-width: var(--app-sidebar-width); background: var(--bs-body-bg); }
@media (min-width: 992px) {
  .app-sidebar { inline-size: var(--app-sidebar-width); flex: 0 0 var(--app-sidebar-width); }
}
.app-main { min-inline-size: 0; }
.nav-section { padding-inline-start: .5rem; text-transform: uppercase; letter-spacing: .04em; list-style: none; }
.auth-card { max-inline-size: 26rem; }
.form-narrow { max-inline-size: 36rem; }
.qr-code { inline-size: 12rem; block-size: 12rem; }
.module-planned { opacity: .65; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
input[dir="ltr"], textarea[dir="ltr"] { text-align: start; }

/* Patient registry */
.patient-photo { inline-size: 6rem; block-size: 6rem; object-fit: cover; border-radius: .5rem; }
.patient-photo-sm { inline-size: 2.5rem; block-size: 2.5rem; object-fit: cover; border-radius: 50%; }
.patient-photo-empty { display: inline-flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.chart-tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
.mrn { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.slot-grid .btn { inline-size: 100%; }
.appt-status-booked { border-inline-start: .25rem solid var(--bs-primary); }
.appt-status-checked_in { border-inline-start: .25rem solid var(--bs-success); }
.appt-status-completed { border-inline-start: .25rem solid var(--bs-secondary); }
.appt-status-no_show { border-inline-start: .25rem solid var(--bs-danger); }
.appt-status-cancelled { border-inline-start: .25rem solid var(--bs-gray-400); opacity: .7; }

/* Triage categories and bed / MEOWS colours */
.triage-red, .meows-red { background: var(--bs-danger); color: #fff; }
.triage-orange { background: #fd7e14; color: #000; }
.triage-yellow, .meows-yellow { background: #ffc107; color: #000; }
.triage-green, .meows-green { background: var(--bs-success); color: #fff; }
.bed-card { border-inline-start: .35rem solid var(--bs-secondary); min-block-size: 6.5rem; }
.bed-available { border-inline-start-color: var(--bs-success); }
.bed-occupied { border-inline-start-color: var(--bs-primary); }
.bed-cleaning { border-inline-start-color: var(--bs-warning); }
.bed-out_of_service { border-inline-start-color: var(--bs-secondary); opacity: .7; }
.bed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; }
.meows-cell { text-align: center; min-inline-size: 3.2rem; }
.meows-chart-wrap { block-size: 16rem; position: relative; }
.table .meows-cell.meows-red { --bs-table-bg: var(--bs-danger); --bs-table-color: #fff; background: var(--bs-danger); color: #fff; }
.table .meows-cell.meows-yellow { --bs-table-bg: #ffc107; --bs-table-color: #000; background: #ffc107; color: #000; }
.table .meows-cell.meows-green { --bs-table-bg: var(--bs-success); --bs-table-color: #fff; background: var(--bs-success); color: #fff; }

/* Labour Care Guide grid and board */
.lcg-wrap { overflow-x: auto; }
.lcg-grid { border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.lcg-grid th, .lcg-grid td { border: 1px solid var(--bs-border-color); padding: .15rem .3rem; text-align: center; min-inline-size: 2.1rem; white-space: nowrap; }
.lcg-grid .lcg-label { position: sticky; inset-inline-start: 0; background: var(--bs-body-bg); text-align: start; min-inline-size: 9.5rem; z-index: 1; font-weight: 500; }
.lcg-grid .lcg-section th { background: var(--bs-tertiary-bg); text-align: start; }
.lcg-grid td.lcg-alert { background: #ffc107; color: #000; font-weight: 700; }
.lcg-grid td.lcg-urgent { background: var(--bs-danger); color: #fff; font-weight: 700; }
/* two readings in one cell: the earlier stays visible with its time, the latest is emphasised */
.lcg-grid .lcg-earlier { font-size: .75em; font-weight: 400; opacity: .8; white-space: nowrap; }
.lcg-grid .lcg-latest { font-weight: 700; white-space: nowrap; }
.lcg-grid td.lcg-half { background: var(--bs-body-bg); }
.labour-card { border-inline-start: .35rem solid var(--bs-success); }
.labour-card.labour-alert { border-inline-start-color: #ffc107; }
.labour-card.labour-urgent { border-inline-start-color: var(--bs-danger); }
.cm-badge { font-size: 1.6rem; font-weight: 700; line-height: 1; }

/* Label/value pairs. The bootstrap RTL sheet resets only the physical end margin of dd: an element whose direction differs
   from the page got the browser's 40px inline-start margin back and its value wrapped onto the next line. */
dd { margin-inline-start: 0; }
dl.row > dt, dl.row > dd { overflow-wrap: anywhere; }
/* compact label/value grid (cards on phones): the label and its value always stay on one row */
.kv-grid { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); column-gap: .75rem; row-gap: .25rem; }
.kv-grid > dt { font-weight: 500; color: var(--bs-secondary-color); }
.kv-grid > dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.min-w-0 { min-inline-size: 0; }
.board-cards .card-body { overflow-wrap: anywhere; }
bdi { unicode-bidi: isolate; }

/* Wide tables on phones: each row becomes a card, each cell a "label  value" line (data-label on the cell). */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; inline-size: 100%; }
  .table-stack tr { border: 1px solid var(--bs-border-color); border-radius: .5rem; margin-block-end: .5rem; padding: .25rem .5rem; }
  .table-stack td { display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); column-gap: .75rem; border: 0; padding: .2rem 0; overflow-wrap: anywhere; }
  .table-stack td::before { content: attr(data-label); font-weight: 500; color: var(--bs-secondary-color); }
  .table-stack td:not([data-label])::before { content: none; }
  .table-stack td:not([data-label]) { display: block; }
}
.free-text p { margin-block-end: .25rem; }
.free-text p:last-child { margin-block-end: 0; }
/* Page headers (title on one side, actions on the other) and other "between" rows: children keep their own
   height instead of stretching to the tallest one (buttons and badges were as tall as the title block). An
   explicit .align-items-* utility still wins (it is !important). */
.d-flex.justify-content-between { align-items: flex-start; }
.d-flex.justify-content-between > .d-flex { align-items: flex-start; }
/* Toasts have their own area in the page flow, at the top of the content: they push the page down while shown
   and never cover a button, a field or the top bar, at any width or scroll position. */
.toast-area { display: flex; flex-direction: column; gap: .5rem; }
.toast-area:has(.toast.show) { margin-block-end: .75rem; }
.toast-area .toast { inline-size: 100%; max-inline-size: 40rem; box-shadow: none; }
.med-line + .med-line { margin-block-start: .15rem; }
/* A badge in a row of buttons or forms keeps its own height (it was stretched to the tallest neighbour,
   its text at the top). */
.d-flex > .badge { align-self: center; }