/* =====================================================================================================
   Shared page shell (24 Oct 2026) - IDENTICAL in Blueshade HPMS and VPMS; change both together.
   Environment banner, top bar, side menu, search box, the Search page, signed-in strip, page width and printing.
   Loaded after site.css, which keeps each product's own pages (planner, diary, housekeeping, clinical...).
   Fonts: Jost (--display) for the brand, headings and the menu's group names; the body face for everything you read.
   ===================================================================================================== */

/* ---- Environment banner (never in Production): Dev = amber stripes, Demo / free trial = navy stripes. ---- */
:root { --env-banner-h: 30px; --side-w: 288px; }
.env-banner { position: fixed; top: 0; left: 0; right: 0; height: var(--env-banner-h); z-index: 60; overflow: hidden;
  display: flex; align-items: center; white-space: nowrap; color: #fff; font-size: .8rem; letter-spacing: .03em;
  border-bottom: 2px solid #0b2a3c; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.env-banner.dev { background: repeating-linear-gradient(-45deg, #b7791f 0 14px, #a86c17 14px 28px); }
.env-banner.demo { background: repeating-linear-gradient(-45deg, #1d3a63 0 14px, #17305a 14px 28px); border-bottom-color: var(--bs-gold); }
.env-banner-track { display: flex; width: max-content; animation: env-banner-scroll 40s linear infinite; }
.env-banner:hover .env-banner-track { animation-play-state: paused; }
.env-banner-run { display: flex; flex-shrink: 0; }
.env-banner-item { white-space: nowrap; padding: 0 2.5rem; }
.env-banner-item strong { background: #0b2a3c; color: #e9cf8f; padding: .1rem .5rem; border-radius: 4px; margin-right: .35rem; letter-spacing: .06em; }
.env-banner.demo .env-banner-item strong { background: var(--bs-gold); color: #0b2a3c; }
@keyframes env-banner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.has-env-banner { padding-top: var(--env-banner-h); }
@media (prefers-reduced-motion: reduce) { .env-banner-track { animation: none !important; } }

/* ---- Top bar: Menu, brand, the search box (grows, centred), then the theme switch and who is signed in. ---- */
.topbar { display: flex; align-items: center; gap: .6rem 1.2rem; padding: .55rem clamp(1rem, 2.5vw, 3rem); flex-wrap: wrap;
  background: var(--bs-header-bg); color: var(--bs-header-text); border-bottom: 3px solid var(--brand-stripe, var(--bs-gold)); font-family: inherit; }
.topbar a { color: var(--bs-header-text); text-decoration: none; }
.brand { font-family: var(--display); font-weight: 700; font-size: 1.15rem; } .brand span { font-weight: 300; }
.who { margin-left: auto; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; min-width: 0; font-size: .9rem; }
.who small { opacity: .8; }
.who .site, .who .user { overflow-wrap: anywhere; min-width: 0; }
.who .theme-slot { display: inline-flex; }
.who .switch-link { font-size: .85rem; padding: .2rem .55rem; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; }
.who .switch-link:hover { background: rgba(255,255,255,.14); }

/* Menu button: the first thing in the top bar. */
.nav-toggle { display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; padding: .4rem .8rem; background: transparent;
  color: var(--bs-header-text); border: 1px solid rgba(255,255,255,.45); border-radius: 6px; font-family: var(--display); font-size: .95rem; cursor: pointer; }
.nav-toggle:hover, .nav-open .nav-toggle, .nav-docked .nav-toggle { background: rgba(255,255,255,.14); }
.nav-toggle:focus-visible { outline: 2px solid var(--bs-gold); outline-offset: 2px; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }

/* ---- Side menu: a drawer from the left over a dimmed page; off screen (and out of the tab order) until opened. ---- */
.sidebar { position: fixed; z-index: 81; top: 0; bottom: 0; left: 0; width: var(--side-w); max-width: 86vw; display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border-right: 1px solid var(--line); box-shadow: 0 0 24px rgba(0,0,0,.25);
  transform: translateX(-100%); visibility: hidden; overflow: hidden; }
.nav-ready .sidebar { transition: transform .2s ease, visibility 0s linear .2s; }
.nav-open .sidebar, .nav-docked .sidebar { transform: none; visibility: visible; }
.nav-ready.nav-open .sidebar, .nav-ready.nav-docked .sidebar { transition: transform .2s ease, visibility 0s; }
.side-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(6, 17, 31, .5); }
.side-backdrop[hidden] { display: none; }
html.nav-open { overflow: hidden; }   /* the page behind does not scroll while the drawer is open */

.side-head { display: flex; align-items: center; gap: .4rem; padding: .55rem .6rem .55rem 1rem; min-height: 3.4rem;
  background: var(--bs-header-bg); color: var(--bs-header-text); border-bottom: 3px solid var(--brand-stripe, var(--bs-gold)); }
.side-title { margin-right: auto; font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.side-head button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 2.5rem; min-height: 2.5rem; padding: .3rem .55rem;
  background: transparent; color: var(--bs-header-text); border: 1px solid transparent; border-radius: 6px; cursor: pointer; font: inherit; font-size: .85rem; }
.side-head button:hover { background: rgba(255,255,255,.14); }
.side-head button:focus-visible { outline: 2px solid var(--bs-gold); outline-offset: 1px; }
.side-head svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.side-pin { display: none !important; }
.side-pin[aria-pressed="true"] { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.14); }

.side-nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: .4rem 0 1.5rem; font-family: inherit; }
.side-group + .side-group { border-top: 1px solid var(--line-soft, var(--line)); }
.side-group-head { margin: 0; font-size: 1rem; }
.side-group-toggle { display: flex; align-items: center; width: 100%; min-height: 44px; padding: .55rem 1rem; background: transparent; color: var(--ink);
  border: 0; border-radius: 0; cursor: pointer; font-family: var(--display); font-size: 1rem; font-weight: 500; text-align: left; }
.side-group-toggle::after { content: "▾"; margin-left: auto; font-size: .8em; color: var(--muted); transition: transform .15s ease; }
.side-group-toggle[aria-expanded="false"]::after { transform: rotate(-90deg); }
.side-group-toggle:hover { background: var(--surface-2); }
.side-group-toggle:focus-visible, .side-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-links, .side-sublinks { list-style: none; margin: 0; padding: 0 0 .4rem; }
.side-links[hidden] { display: none; }
.side-links a { display: flex; flex-direction: column; justify-content: center; min-height: 40px; padding: .4rem 1rem .4rem 1.6rem; color: var(--ink); text-decoration: none;
  border-left: 3px solid transparent; font-size: .95rem; line-height: 1.3; }
.side-links a small { color: var(--muted); font-size: .78rem; }
.side-links a:hover { background: var(--accent-soft); }
.side-links a[aria-current="page"] { background: var(--accent-soft); border-left-color: var(--bs-gold); color: var(--accent); font-weight: 600; }
.side-sublinks { padding: 0; }
.side-sublinks a { padding-left: 2.5rem; font-size: .88rem; min-height: 36px; color: var(--muted); }
.side-heading { padding: .6rem 1rem .2rem 1.6rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .nav-ready .sidebar, .nav-ready.nav-open .sidebar, .nav-ready.nav-docked .sidebar { transition: none; }
  .side-group-toggle::after { transition: none; }
}

/* Wide screens: "Pin" keeps the menu docked; the page (bar, content and footer) starts after it. */
@media (min-width: 1400px) {
  .side-pin { display: inline-flex !important; }
  .side-pin[hidden] { display: none !important; }
  .nav-docked .side-backdrop { display: none; }
  .nav-docked .sidebar { box-shadow: none; z-index: 50; }
  html.nav-docked body { padding-left: var(--side-w); }
  .nav-docked .env-banner { left: var(--side-w); }   /* the Dev / Demo banner moves over with the page */
}

/* ---- Search box: centre of the bar, grows to fill it; suggestions are built by search.js with textContent only. ---- */
.global-search { position: relative; flex: 1 1 280px; min-width: 0; max-width: 760px; margin: 0 auto; }
.gs-icon { position: absolute; left: .7rem; top: 50%; width: 1.05rem; height: 1.05rem; transform: translateY(-50%); fill: var(--bs-header-muted); pointer-events: none; }
.global-search input { width: 100%; min-height: 40px; padding: .45rem 2.4rem .45rem 2.2rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12); color: var(--bs-header-text); font: inherit; font-size: .95rem; }
.global-search input::placeholder { color: var(--bs-header-muted); opacity: 1; }
.global-search input:focus { outline: 2px solid var(--bs-gold); outline-offset: 1px; background: var(--bs-field, var(--surface)); color: var(--ink); border-color: transparent; }
.global-search input:focus::placeholder { color: var(--muted); }
.global-search:focus-within .gs-icon { fill: var(--muted); }
.global-search input::-webkit-search-cancel-button { cursor: pointer; }
.gs-key { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); padding: 0 .4rem; border: 1px solid rgba(255,255,255,.4); border-radius: 4px;
  font: .75rem/1.4 var(--bs-font-mono, ui-monospace, SFMono-Regular, Consolas, monospace); color: var(--bs-header-muted); pointer-events: none; }
.global-search input:focus ~ .gs-key, .global-search input:not(:placeholder-shown) ~ .gs-key { display: none; }
.gs-panel { position: absolute; z-index: 70; top: calc(100% + .35rem); left: 0; right: 0; min-width: min(420px, calc(100vw - 2rem)); max-height: min(70vh, 560px);
  overflow-y: auto; padding: .3rem 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--bs-shadow), 0 8px 28px rgba(0,0,0,.18); }
.gs-panel[hidden] { display: none; }
.gs-group + .gs-group { border-top: 1px solid var(--line-soft, var(--line)); }
.gs-heading { padding: .5rem .9rem .2rem; font-family: var(--display); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.topbar .gs-option, .gs-option { display: flex; flex-direction: column; gap: .05rem; padding: .45rem .9rem; color: var(--ink); text-decoration: none; cursor: pointer; }
.gs-option[aria-selected="true"], .gs-option:hover { background: var(--accent-soft); }
.gs-option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--bs-gold); }
.gs-title { font-weight: 500; overflow-wrap: anywhere; }
.gs-sub { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.gs-all .gs-title { color: var(--accent); }
.gs-empty { padding: .7rem .9rem; color: var(--muted); }

/* ---- The full results page (/Search). ---- */
.search-jump { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .9rem; }
.search-result-list { list-style: none; margin: 0; padding: 0; }
.search-result-list li { display: flex; flex-direction: column; gap: .1rem; padding: .5rem 0; border-bottom: 1px solid var(--line-soft, var(--line)); }
.search-result-list li:last-child { border-bottom: 0; }
.search-results h2 { margin-bottom: .4rem; }
tr:target, tr:target td { background: var(--accent-soft); }   /* a result that points at a row (#pen-12, #room-3) */

/* ---- Page width: the whole window on wide monitors; narrow layouts (sign-in, invoices) keep their own caps. ---- */
.page, .site-footer { max-width: none; width: 100%; box-sizing: border-box; padding-inline: clamp(1rem, 2.5vw, 3rem); }

/* ---- Tablets in portrait and phones: Menu + brand + theme, then the search box, then who is signed in. ---- */
@media (max-width: 800px) {
  .topbar { padding: .45rem 1rem; gap: .45rem .8rem; }
  .global-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .global-search input { min-height: 44px; font-size: 16px; }
  .gs-key { display: none; }
  .gs-panel { position: fixed; left: .5rem; right: .5rem; top: auto; min-width: 0; max-height: 65vh; }
  .gs-option { padding: .6rem .9rem; min-height: 44px; justify-content: center; }
  /* The theme switch moves up beside the brand; the site, Switch, user and Sign out share one compact line. */
  .who { display: contents; }
  .who .theme-slot { order: 2; margin-left: auto; }
  .who .site, .who .switch-link, .who .user, .who form.inline { order: 4; font-size: .82rem; }
  .who .switch-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .55rem; }
  .who form.inline button.link { min-height: 36px; padding: 0 .3rem; }
  .who .user { flex: 1 1 auto; }
  .sidebar { width: min(360px, 88vw); }
  .side-links a, .side-sublinks a, .nav-toggle { min-height: 44px; }
  .nav-toggle-text { font-size: .9rem; }
  .site-footer { flex-direction: column; gap: .3rem; padding-block: 1rem; }
}
@media (hover: none), (pointer: coarse) {
  .side-links a, .side-sublinks a, .side-group-toggle { min-height: 44px; }
  .who button.link { min-height: 32px; padding: .3rem .2rem; }
}

/* ---- Paper: no bar, menu, search or theme switch; nothing shifted for a docked menu. ---- */
@media print {
  .env-banner, .nav-toggle, .global-search, .sidebar, .side-backdrop, .bs-theme-toggle { display: none !important; }
  body.has-env-banner { padding-top: 0; }
  html.nav-docked body { padding-left: 0; }
}

/* =====================================================================================================
   Phones, tablets and paper for the parts every page shares (cards, tables, forms, tiles) - also identical in both
   products. Product-only screens (planner bars, the diary, clinical notes...) keep their own rules in site.css.
   ===================================================================================================== */
body { overflow-wrap: break-word; }
img, svg, video { max-width: 100%; }
img, video { height: auto; }
.search { min-width: min(260px, 100%); }
.facts dd, .notice, .kpi .sub, .col-note { overflow-wrap: anywhere; }
.pill { white-space: nowrap; }
.inline-menu input { width: min(14rem, 70vw); }
.inline-menu[open] form { max-width: calc(100vw - 2rem); }
.planner-label { position: sticky; left: 0; z-index: 4; background: var(--surface); }
.planner-head .planner-label { background: var(--surface-2); }
.hk-assign select { flex: 1 1 auto; min-width: 0; }
.hk-assign button { flex: none; white-space: nowrap; }
.card .row-actions { flex-wrap: wrap; }
.grid .col-unit { position: sticky; left: 0; z-index: 1; background: var(--surface); }   /* room / pen column stays put */
[hidden] { display: none !important; }

/* Touch screens: comfortable tap targets (44px is the aim; small in-table buttons at least 32px). */
@media (hover: none), (pointer: coarse) {
  button, .btn { min-height: 44px; }
  .hk-actions button, .inline-form.compact button, .hk-assign button, .table button, .table .btn { min-height: 32px; }
  .tabs a { padding: .7rem .9rem; }
}

/* Tablets and small laptops: small buttons stay tappable; wide tables scroll inside their own box, never the page. */
@media (max-width: 1100px) {
  button.link { padding: .3rem .25rem; }
  .hk-actions button, .hk-assign button, .inline-form.compact button { min-height: 2rem; min-width: 2.2rem; }
  .hk-assign select, .inline-form.compact input, .inline-form.compact select { min-height: 2rem; }
  .card:has(> .table), .card:has(> table), section:has(> .table), .card:has(> form > .table) { overflow-x: auto; }
  .page > .table, .page > table, .page > form > .table { display: block; overflow-x: auto; }
  /* A scrolling box would clip a floating pop-up, so in-table pop-ups open in place. */
  .inline-menu[open] form { position: static; box-shadow: none; padding: .4rem 0 0; border: none; background: transparent; }
}

/* Tablets in portrait and phones. */
@media (max-width: 800px) {
  .page { margin-top: 1rem; }
  .page-head h1 { font-size: 1.35rem; }
  h1 small, .page-head h1 small { display: block; margin-left: 0; }
  .search { min-width: 0; flex: 1 1 100%; }
  .datebar input[type="search"] { width: 100%; }
  .inline-form.compact { flex-wrap: wrap; }
  .login { margin: 1.5rem auto; gap: 1.5rem; }
  .login-brand img { width: 220px; }
}

/* Phones: one column, 16px fields (smaller ones make iPhones zoom in), tiles two across. */
@media (max-width: 767px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  .form .two, .two, .three, .four { grid-template-columns: 1fr; gap: 0 1rem; }
  .inline-form > div { flex-basis: 100%; }
  .card { padding: 1rem; }
  .inline-menu input, form.inline.reset input, form.inline.role-form select { width: 100%; max-width: 100%; }
  form.inline { flex-wrap: wrap; }
  .datebar input, .datebar select, form.inline input { max-width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.compact { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .kpi .value { font-size: 1.35rem; }
  .welcome { padding: 1rem 1.1rem; gap: 1rem; }
  .welcome h1 { font-size: 1.5rem; }
  .ring { width: 104px; height: 104px; } .ring > div { width: 82px; height: 82px; }
  .tile { min-width: 0; flex: 1 1 100px; padding: .45rem .7rem; overflow-wrap: anywhere; }
  .tile strong { font-size: 1.3rem; margin-right: .3rem; }
  .facts { grid-template-columns: 1fr; gap: 0 1rem; }
  .facts dt { margin-top: .4rem; }
  .form-actions { flex-wrap: wrap; }
  .invoice { padding: 1rem; }
  .hotel-doc { text-align: left; margin-left: 0; }
  .wx-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .segmented { flex-wrap: wrap; }
  .perm-grid, .role-cards, .provider-cards, .hotel-choices, .report-tiles, .hk-grid { grid-template-columns: 1fr; }
}

/* Paper is always light: bills, invoices, histories and reports print with the light palette even when the screen is dark. */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light;
    --bs-bg: #ffffff; --bs-surface: #ffffff; --bs-surface-2: #f7f9fc; --bs-field: #ffffff; --bs-code-bg: #edf1f6;
    --bs-text: #142033; --bs-muted: #5d6b80; --bs-border: #d9dfe8; --bs-border-strong: #b6c1d1; --bs-field-border: #7d8a9e;
    --bs-link: #24588f; --bs-primary: #0d2240; --bs-primary-hover: #163156; --bs-primary-text: #ffffff;
    --bs-accent: #c8a24c; --bs-accent-soft: #f4ead2; --bs-accent-text: #7a5d17;
    --bs-ok: #276b48; --bs-ok-soft: #e2f2e9; --bs-warn: #8a5a0f; --bs-warn-soft: #fbefd6;
    --bs-bad: #b23a33; --bs-bad-soft: #f8e1df; --bs-info: #24588f; --bs-info-soft: #e1ecf8;
    --waiting: #6a4fb0;
  }
  html, body { background: #fff !important; color: #142033; }
}

/* ---- Signature pad (wwwroot/js/signature-pad.js): registration cards, consent forms, the controlled drugs register. ---- */
.sig-pad { position: relative; max-width: 640px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; }
.sig-pad canvas { display: block; width: 100%; border-radius: 8px; cursor: crosshair; }
.sig-pad::after { content: "Sign here"; position: absolute; left: 1rem; bottom: .6rem; color: #8a96a8; font-size: .8rem; pointer-events: none; }
.sig-pad.signed::after { content: ""; }
.sig-pad .sig-clear { position: absolute; right: .6rem; top: .4rem; }
.signed-doc { white-space: pre-wrap; max-height: 22rem; overflow: auto; padding: .8rem 1rem; background: var(--surface-2); border-radius: 6px; font-size: .9rem; }
.signature-image { max-width: 320px; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; }