/* ALH Care — clinical ledger UI */
:root {
  --bg: #f4f6f6;
  --panel: #ffffff;
  --ink: #1f2a2a;
  --muted: #6b7a7a;
  --line: #d9e1e1;
  --brand: #2c6e6a;
  --brand-dark: #235753;
  --brand-tint: #e6f0ef;
  --good: #2e7d52;
  --warn: #b26a00;
  --bad: #b3261e;
  --alert-bg: #fdecea;
  --clear-bg: #e7f4ec;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --radius: 10px;
  font-size: 15px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Login ─────────────────────────────────────────────── */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card {
  background: var(--panel); width: 100%; max-width: 360px; padding: 32px 28px;
  border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.login-logo {
  width: 52px; height: 52px; border-radius: 14px; background: var(--brand);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px;
  letter-spacing: .5px; margin-bottom: 16px;
}
.login-title { font-size: 22px; font-weight: 800; }
.login-sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.field-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 12px 0 5px; }
.field-input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 15px; background: #fbfdfd; outline: none;
}
.field-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.login-btn {
  width: 100%; margin-top: 18px; padding: 12px; border: none; border-radius: 9px;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
}
.login-btn:hover { background: var(--brand-dark); }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-error { color: var(--bad); font-size: 13px; margin-top: 12px; min-height: 16px; display: none; }
.login-error.show { display: block; }

/* ── Topbar ────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
/* flex-shrink 0 + nowrap: the title carries the stage + version beside
   "ALH Care" and must never fold under the other topbar items. */
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand .title { white-space: nowrap; }
/* The stage + version beside the name: small and quiet, never bold. */
.brand .title-ver { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 7px; }
.brand .mark {
  width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.brand .title { font-weight: 800; font-size: 16px; line-height: 1.1; }
.brand .sub { color: var(--muted); font-size: 12px; }
.monthnav { display: flex; align-items: center; gap: 8px; margin: 0 auto; }
.monthlabel { font-weight: 700; min-width: 150px; text-align: center; }
.chev {
  width: 32px; height: 32px; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink);
}
.chev:hover { background: var(--brand-tint); }
.chev:disabled { opacity: .4; cursor: default; }
.rightside { display: flex; align-items: center; gap: 12px; }
.status { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.status-good { background: var(--clear-bg); color: var(--good); }
.status-warn { background: #fff3e0; color: var(--warn); }
.status-bad { background: var(--alert-bg); color: var(--bad); }
.status-muted { background: #eef2f2; color: var(--muted); }
.user-menu {
  display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.user-menu:hover { background: var(--brand-tint); }
/* ⚙ My Profile — the quiet gear after the name (photo + signature live there). */
.gear-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  width: 32px; height: 32px; font-size: 15px; line-height: 1; cursor: pointer; color: var(--muted);
}
.gear-btn:hover { background: var(--brand-tint); color: var(--ink); }
.prof-modal { width: 560px; max-width: 94vw; }
.prof-photo-wrap { margin: 4px 0 8px; }
.prof-photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.prof-photo-empty { display: flex; align-items: center; justify-content: center; font-size: 30px; background: #f2f4f4; }
.prof-sig-wrap { margin: 4px 0 8px; }
.prof-sig-img { max-height: 80px; max-width: 320px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; padding: 4px 8px; }
.prof-btnrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.prof-pad-box { margin-top: 8px; }
/* The pad draws with mouse, finger or pencil — touch-action:none keeps an
   iPad from scrolling instead of signing. */
.prof-pad {
  width: 460px; max-width: 100%; height: 140px; border: 2px dashed var(--line);
  border-radius: 10px; background: #fff; cursor: crosshair; touch-action: none; display: block; margin: 6px 0;
}
.role-pill {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; background: #eef2f2; color: var(--muted);
}
.role-superadmin { background: #ede7f6; color: #5e35b1; }
.role-admin { background: var(--brand-tint); color: var(--brand-dark); }
.role-staff { background: #e3f2fd; color: #1565c0; }
.facpick { display: flex; align-items: center; gap: 7px; }
.facpick-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.fac-select { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 9px; font-size: 13px; font-weight: 600; color: var(--ink); max-width: 220px; cursor: pointer; }
.fac-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

/* ── Sidebar: the ten categories A–J ───────────────────── */
.shell { display: flex; align-items: stretch; min-height: calc(100vh - 57px); }
.contentbg { flex: 1; min-width: 0; }
.sidebar { width: 226px; flex: 0 0 226px; background: var(--panel); border-right: 1px solid var(--line); padding: 10px 8px 24px; position: sticky; top: 57px; height: calc(100vh - 57px); overflow-y: auto; }
.side-cat { margin-bottom: 2px; }
/* Every headline is a soft band in its family color (set inline from
   CAT_COLORS); the letter sits on a white chip so it stays crisp. */
.side-head { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; padding: 7px 8px; margin-bottom: 2px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink); text-align: left; font-family: inherit; }
.side-chip { background: #fff; box-shadow: 0 1px 1px rgba(40,50,45,.08); }
.side-letter { min-width: 20px; width: auto; height: 20px; padding: 0 5px; border-radius: 6px; color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.side-name { flex: 1; line-height: 1.2; }
.side-caret { font-size: 10px; color: var(--muted); }
.side-items { padding: 2px 0 6px 30px; display: flex; flex-direction: column; gap: 1px; }
/* Items hang on their family's rail (rail color set inline per category). */
.side-items.side-rail { margin: 2px 0 8px 18px; padding: 2px 0 2px 10px; border-left: 3px solid var(--line); border-radius: 1px; }
.side-item { border: none; background: none; text-align: left; font-size: 12.5px; font-weight: 600; color: #3c4f4d; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.side-item:hover { background: #eef4f3; }
.side-item.active { background: var(--brand-tint); color: var(--brand-dark); }
.side-soon { font-size: 11px; color: var(--muted); padding: 4px 8px 2px; font-style: italic; line-height: 1.4; }
.side-sep { border-top: 1px solid var(--line); margin: 10px 6px; }
.side-setting { margin-left: 8px; color: #8a6d3b; }
/* A not-yet-built category's page: its plan from the poster. */
.catpage { max-width: 560px; }
.catpage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.catpage-letter { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; }
.catpage-name { font-size: 19px; font-weight: 800; }
.catpage-item { font-size: 14px; padding: 7px 4px; color: #3c4f4d; border-bottom: 1px solid var(--line); }
.catpage-item:last-child { border-bottom: none; }
.catpage-soon { font-size: 12.5px; padding: 7px 4px 2px; }

/* ── Content / subbar ──────────────────────────────────── */
.content { padding: 18px; max-width: 1500px; margin: 0 auto; }
/* Page theme: the accent (headers, buttons, highlights) matches the current tab group.
   Care pages keep the default teal; BP pages go soft blue; admin pages soft gold. */
/* Vitals follows its family (Care Documentation) like every other page now;
   only the settings screens keep a theme of their own. */
.content.theme-admin { --brand: #8a6d3b; --brand-dark: #6c5430; --brand-tint: #f3ecdc; --brand-faint: #f9f5ec; --brand-hover: #f6f0e3; --brand-zebra: #faf7f0; --brand-zebra2: #f6f1e6; --brand-paper: #fdfcf8; }
/* Medication pages wear category C's soft purple — headers, buttons, table
   header, focus rings. Written without .content so the Medication windows
   (modals live on <body>, outside .content) can wear it too. */
.subbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nav { display: flex; align-items: center; gap: 8px; }
.navlabel { font-weight: 700; min-width: 150px; text-align: center; }
.navlabel.mlabel { min-width: 110px; }
.monthnav-inline { display: flex; align-items: center; gap: 8px; }
.month-label-btn { border: none; background: none; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 8px; }
.month-label-btn:hover { color: var(--brand-dark); background: var(--brand-tint); }
.monthlabel.month-label-btn { min-width: 150px; justify-content: center; }
.mp-caret { font-size: 10px; color: var(--muted); }
.mp-overlay { position: fixed; inset: 0; z-index: 60; }
.mp-pop { position: absolute; width: 236px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 12px; }
.mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-year { font-weight: 800; font-size: 15px; }
.mp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mp-month { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 0; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.mp-month:hover { background: var(--brand-tint); }
.mp-month.cur { border-color: var(--brand); color: var(--brand-dark); }
.mp-month.sel { background: var(--brand); color: #fff; border-color: var(--brand); }
.hint { color: var(--muted); font-size: 13px; }
.btn {
  border: 1px solid var(--line); background: #fff; padding: 8px 13px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink);
}
.btn:hover { background: var(--brand-tint); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: #fff; }
.btn-sm { padding: 5px 9px; font-size: 12px; }
.btn-danger { color: var(--bad); border-color: #f0c8c5; }
.btn-danger:hover { background: var(--alert-bg); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
/* System / backups tab */
.sys-bar { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.sys-status { font-size: 13px; color: var(--muted); }
.sys-status.good { color: var(--good); font-weight: 600; }
.sys-status.bad { color: var(--bad); font-weight: 600; }
.sys-section { margin-top: 18px; }
.sys-row { display: grid; grid-template-columns: 1fr 90px auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: var(--panel); }
.sys-when { font-size: 13px; font-weight: 600; }
.sys-size { font-size: 12px; color: var(--muted); }

/* ── Tables ────────────────────────────────────────────── */
/* A plain tablewrap grows with its table, so it never truly needs a vertical
   scrollbar — a few phantom pixels used to conjure one anyway. Only the
   height-capped .tall variant may scroll vertically. */
.tablewrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow); }
.tablewrap.tall { overflow-y: auto; }
/* Alternating light rows so the eye can follow a resident across the table. */
.grid.zebra tbody tr:nth-child(even) td { background: var(--brand-zebra, #f2f8f7); }
.grid.zebra tbody tr:nth-child(even) td.col-first { background: var(--brand-zebra2, #eef5f4); }
/* The previous-day gate. */
.gate-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff9dc; border: 1px solid #e3cf7e; color: #4a3f10; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.grid td.gated { cursor: not-allowed; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 130; background: #2c3b3a; color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 90vw; }
.tablewrap.tall { max-height: calc(100vh - 200px); }
/* Groceries: room for the toolbar above and the submit bar below. */
.tablewrap.sup-tablewrap { max-height: calc(100vh - 260px); }
/* The filter group rides the same row as the admin tools — one bar, no
   wasted height. The QR button pushes itself (and the import) to the right. */
.sup-topbar { flex-wrap: wrap; }
.sup-topbar .sup-import-open { margin-left: auto; }
.sup-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.sup-filter-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.sup-filter-sel { min-width: 130px; }
.sup-low-btn.on { background: var(--warn); border-color: var(--warn); color: #fff; font-weight: 700; }
.sup-filter-count { font-size: 12px; color: var(--muted); font-weight: 600; }
table.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 4px 6px; text-align: center; }
table.grid thead th {
  position: sticky; top: 0; background: var(--brand-tint); color: var(--brand-dark);
  z-index: 2; padding: 7px 6px;
}
table.grid thead .ht { display: block; font-weight: 800; font-size: 12px; }
table.grid thead .hb { display: block; font-weight: 600; font-size: 10px; color: var(--muted); }
.col-first { text-align: left !important; font-weight: 700; white-space: nowrap; background: var(--brand-paper, #fbfdfd); position: sticky; left: 0; z-index: 1; }
.col-first.date { font-weight: 600; color: var(--muted); }
.grp-b { background: #fcfdff; }
.grp-l { background: #fbfffc; }
.grp-d { background: #fffefb; }
.inp { width: 100%; border: 1px solid transparent; background: transparent; padding: 4px; border-radius: 6px; font-size: 13px; text-align: center; }
.inp:focus { border-color: var(--brand); background: #fff; outline: none; }
.inp.oz, .inp.vital { max-width: 64px; }
.inp.pct, .inp.bm { min-width: 64px; }
.col-appt, .col-obs { min-width: 200px; }
.note-cell { position: relative; }
/* No scrollbar ever — the box itself grows to show all the text on click.
   Both note cells wear a corner 📅 button, so typing keeps clear of it. */
.note-cell .inp.note { overflow-y: hidden; padding-right: 22px; }
.note-expand { position: absolute; top: 3px; right: 3px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 3px; border-radius: 4px; opacity: .45; font-family: "Segoe UI Symbol","Apple Symbols",sans-serif; }
.note-cell:hover .note-expand, .note-cell:focus-within .note-expand { opacity: 1; }
.note-expand:hover { background: var(--brand-tint); color: var(--brand-dark); }
.modal.modal-note { max-width: 640px; }
/* Appointment form */
.note-appt-btn { font-size: 12px; }
.modal.modal-appt { max-width: 560px; }
.appt-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; }
.appt-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: #fbfdfd; }
.appt-row-text { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-empty { color: var(--muted); font-size: 13px; padding: 4px 0; }
.appt-form-grid { display: grid; grid-template-columns: 110px 110px 1fr; gap: 10px; align-items: end; }
.appt-field-place { grid-column: 1 / -1; }
.appt-field-prov { grid-column: 1 / 3; }
.appt-field-prov2 { grid-column: 3; }
.appt-field-addr { grid-column: 1 / -1; }
.dir-prov { font-size: 12px; font-weight: 600; color: var(--brand-dark); background: var(--brand-tint); border-radius: 10px; padding: 1px 8px; margin-left: 8px; }
.appt-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.appt-time { text-align: center; font-family: inherit; letter-spacing: 1px; }
.appt-time.bad { border-color: var(--bad); box-shadow: 0 0 0 3px var(--alert-bg); }
.appt-place-line { display: flex; gap: 6px; align-items: center; }
.appt-place-line .field-input { flex: 1; min-width: 0; }
/* Agency/Clinic smart search: the saved-places list drops right under the
   box (never at the bottom of the window), filtered live while typing. */
.appt-combo { position: relative; flex: 1; min-width: 0; }
.appt-combo .field-input { width: 100%; }
.appt-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 26px rgba(20,40,40,.16); max-height: 230px; overflow: auto; }
.appt-drop .appt-empty { padding: 10px 12px; }
.appt-place-pick { display: flex; width: 100%; align-items: baseline; gap: 8px; border: none; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; padding: 8px 10px; min-width: 0; }
.appt-place-pick:last-child { border-bottom: none; }
.appt-place-pick:hover { background: var(--brand-tint); }
/* Required fields wear a small red star on the label. */
.req-star { color: #e24b4a; font-weight: 800; }
/* Repeating bookings: the custom panel (every N weeks · weekday chips ·
   end date · live count) and the three-way series-delete choices. */
.rep-panel { background: #f6f8f8; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.rep-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; flex-wrap: wrap; margin-bottom: 8px; }
.rep-every { width: 52px; text-align: center; }
.rep-until { width: 160px; font-family: inherit; }
.rep-days { display: flex; gap: 5px; flex-wrap: wrap; }
.rep-day { min-width: 40px; padding: 7px 4px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; }
.rep-day.on { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.rep-count { font-size: 12.5px; font-weight: 700; color: #33591b; background: #eaf3de; border-radius: 6px; padding: 6px 10px; }
.rep-count.bad { color: #7a2222; background: #fcebeb; }
.rep-count:empty { display: none; }
.rep-del-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 7px 2px; cursor: pointer; }
.appt-place-pick:hover .appt-place-name { color: var(--brand-dark); }
.appt-place-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
/* Appointments tab: month calendar */
.sched-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-bottom: 16px; }
.sched-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sched-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; padding: 2px 0; }
.sched-cell { border: 1px solid var(--line); border-radius: 8px; min-height: 74px; padding: 4px; cursor: pointer; overflow: hidden; }
.sched-cell:hover { background: var(--brand-tint); }
.sched-cell.blank { border: none; cursor: default; }
.sched-cell.blank:hover { background: transparent; }
.sched-cell.today { box-shadow: inset 0 0 0 2px var(--brand); }
.sched-daynum { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.sched-chip { background: var(--brand-tint); color: var(--brand-dark); border-radius: 5px; padding: 1px 5px; margin-top: 2px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sched-chip:hover { background: var(--brand); color: #fff; }
/* Plain-clock echo under the military time inputs: "= 2:30 PM". */
.mil-hint { min-height: 15px; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center; }
/* Appointments tab: directory */
.dir-card { margin-top: 4px; }
.dir-bar { display: flex; gap: 8px; margin: 10px 0; align-items: center; }
.dir-bar .field-input { flex: 1; padding: 8px 10px; }
.dir-list { display: flex; flex-direction: column; }
.dir-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.dir-row:last-child { border-bottom: none; }
.dir-main { flex: 1; min-width: 0; }
.dir-name { font-size: 13.5px; font-weight: 700; }
.dir-addr { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-phone { font-size: 13px; font-weight: 600; color: var(--brand-dark); text-decoration: none; white-space: nowrap; }
.dir-phone:hover { text-decoration: underline; }
.dir-phone.none { color: var(--muted); font-weight: 400; font-style: italic; }
/* Profile photos: the little round face in the users list and the top bar. */
.user-thumb { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; border: 1px solid var(--line); }
span.user-thumb-empty { display: inline-flex; align-items: center; justify-content: center; background: #eef1f1; font-size: 13px; }
.user-photo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; border: 1px solid var(--line); }

/* Supplies — the inventory table */
.sup-table td { padding: 4px 6px; }
.sup-item-cell { text-align: left !important; min-width: 260px; }
.sup-item-link { color: var(--brand-dark); font-weight: 600; font-size: 13px; text-decoration: underline; text-decoration-color: #b9d4d2; }
.sup-item-link:hover { text-decoration-color: var(--brand-dark); }
.sup-item-plain { font-weight: 600; font-size: 13px; }
.sup-edit { position: static; opacity: .55; font-size: 12px; margin-left: 6px; vertical-align: middle; }
.sup-edit:hover { opacity: 1; }
.sup-cat-cell { text-align: left !important; font-size: 11px; font-weight: 800; color: #1f2a2a; letter-spacing: .4px; padding: 5px 10px; }
/* A row with no price wears the soft gate-yellow all the way across, so the
   holes the export gate will name are visible from the doorway. (The pinned
   ✕ cell paints its own copy inline — it must stay opaque.) */
.sup-table tr.sup-noprice > td { background: #fff6d8; }

/* The recall eraser wears a soft warning red — it undoes a whole export. */
.sup-recall-btn { border-color: #e0b3b3; color: #a32d2d; }
.sup-recall-btn:hover { background: #fcebeb; }
/* The quiet row number runs down the far left, before the neon bar — the
   last number is the whole table's item count. The 8px of right padding is
   the owner's ask: even a 3-digit number never touches the vertical line. */
.sup-table th.sup-num-cell, .sup-table td.sup-num-cell { width: 38px; min-width: 38px; text-align: right; color: var(--muted); font-size: 11px; padding-right: 8px; }
/* The "on the list" marker: a slim rounded accent bar in light neon green,
   inset from the row's edges — quieter than the old hard stripe. It rides
   the ITEM cell's left edge (the number sits before it), and the item cell
   keeps a constant left padding so text and photos never touch the bar
   (and never jump when a row joins or leaves the list). */
.sup-table td.sup-item-cell { padding-left: 14px; }
.sup-table tr.on-list td.sup-item-cell { position: relative; }
.sup-table tr.on-list td.sup-item-cell::before {
  content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 3.5px;
  border-radius: 999px; background: #6ee7a8; opacity: .9;
}
.inp.sup-num { max-width: 64px; }
.inp.sup-qty { font-weight: 700; }
.sup-table tr.on-list .inp.sup-qty { color: var(--brand-dark); }
.inp.sup-notes { text-align: left; min-width: 170px; }
.sup-notes-cell { min-width: 180px; }
/* ── Groceries Dashboard (owner-approved design): icon cards, a trend line,
   a category donut, alert tiles, ranked rows — all drawn in-house. ──────── */
.supdash-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.supdash-viewing { font-size: 11px; font-weight: 700; color: #8a6a3d; background: #eee0cd; border-radius: 999px; padding: 2px 10px; }
.supdash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.supdash-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; position: relative; }
.supdash-ico { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; margin-top: 2px; }
.supdash-body { min-width: 0; display: flex; flex-direction: column; }
.supdash-lbl { font-size: 11.5px; color: var(--muted); }
.supdash-big { font-size: 20px; font-weight: 800; margin-top: 1px; }
.supdash-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.supdash-sub.good { color: #2f7d46; font-weight: 600; }
.supdash-sub.bad { color: var(--bad); font-weight: 600; }
.supdash-setbud { position: absolute; right: 10px; bottom: 8px; border: none; background: transparent; color: var(--brand-dark); font-size: 11px; font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 5px; font-family: inherit; }
.supdash-setbud:hover { background: var(--brand-tint); }
.supdash-title { font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.supdash-trendhead { display: flex; align-items: center; margin-bottom: 4px; }
.supdash-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 12px; font-size: 11.5px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; margin-left: 4px; }
.supdash-chip.on { background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand-tint); }
.supdash-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-bottom: 12px; }
.supdash-donutrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.supdash-legend { font-size: 12px; line-height: 1.9; min-width: 0; }
.supdash-legrow { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.supdash-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.supdash-legval { color: var(--muted); }
.supdash-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 12px; }
.supdash-alert { border-radius: 10px; padding: 9px 12px; }
.supdash-alert.red { background: #fcebeb; }
.supdash-alert.red .supdash-alerthead { color: #791f1f; }
.supdash-alert.red .supdash-alertsub { color: #a32d2d; }
.supdash-alert.red[role="button"] { cursor: pointer; }
.supdash-alert.blue { background: #e6f1fb; }
.supdash-alert.blue .supdash-alerthead { color: #0c447c; }
.supdash-alert.blue .supdash-alertsub { color: #185fa5; }
.supdash-alert.green { background: #eaf3de; }
.supdash-alert.green .supdash-alerthead { color: #27500a; }
.supdash-alert.green .supdash-alertsub { color: #3b6d11; }
.supdash-alerthead { display: block; font-size: 12.5px; font-weight: 700; }
.supdash-alertsub { display: block; font-size: 11.5px; margin-top: 1px; }
.supdash-rows { display: flex; flex-direction: column; gap: 7px; }
.supdash-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.supdash-rowl { width: 150px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.supdash-track { flex: 1; height: 12px; background: var(--brand-faint); border-radius: 3px; overflow: hidden; }
.supdash-fill { height: 12px; background: var(--brand); border-radius: 3px; }
.supdash-rowv { min-width: 30px; text-align: right; font-weight: 700; font-size: 12.5px; flex: none; }
.supdash-thumb { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: none; border: 1px solid var(--line); background: #fff; }
.supdash-thumb-empty { display: inline-block; background: #f1f3f2; border: 1px solid var(--line); }
.supdash-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.supdash-table td { padding: 5px 4px; border-top: 1px solid var(--line); }
.supdash-table td + td { text-align: right; }
.supdash-table tr.supdash-th td { border-top: none; color: var(--muted); font-size: 11px; padding-top: 0; }
.supdash-note { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
/* The + beside the "Store" header opens the store manager — it sits on the
   word's RIGHT (the header label is block by default, which dropped it). */
.sup-table th.sup-store-th { white-space: nowrap; }
.sup-table th.sup-store-th .ht { display: inline-block; vertical-align: middle; }
.sup-store-add { margin-left: 6px; vertical-align: middle; }
/* Ext. price: bold when the row carries dollars, quiet when it's zero. */
.sup-ext { font-weight: 700; white-space: nowrap; }
.sup-ext.zero { color: var(--muted); font-weight: 400; }
/* The Stores window: one row per store — swatch, name, use count, delete. */
.store-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.store-swatch { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; flex: none; font-size: 11px; color: var(--muted); }
.store-swatch.cur { outline: 2px solid var(--brand); outline-offset: 1px; }
.store-name { flex: 1; }
.store-use { font-size: 11.5px; color: var(--muted); min-width: 56px; text-align: right; }
.store-add-row { display: flex; gap: 8px; margin-top: 10px; }
.store-color-row { display: flex; gap: 6px; flex-wrap: wrap; max-width: 230px; padding: 4px 0; }
/* The Item Details picture box (paste or pick). */
.sup-photo-box { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; display: flex; gap: 12px; align-items: center; }
.sup-photo-prev { max-width: 110px; max-height: 82px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.sup-photo-none { font-size: 12.5px; color: var(--muted); font-style: italic; min-width: 90px; }
.sup-photo-hint { font-size: 12px; color: var(--muted); margin-bottom: 6px; }

/* Admin delete (✕) column pinned to the right edge so it never scrolls off
   small screens. Body-cell background is set inline per row (JS) to match tint. */
.sup-table th.sup-del-cell, .sup-table td.sup-del-cell {
  position: sticky; right: 0;
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .14);
}
.sup-table td.sup-del-cell { background: var(--panel); z-index: 2; }
.sup-table th.sup-del-cell { z-index: 3; }
.sup-status { font-size: 10.5px; font-weight: 800; border-radius: 8px; padding: 3px 8px; text-align: center; background: #eaf3de; color: #3b6d11; white-space: nowrap; }
.sup-status.order { background: #fcebeb; color: #a32d2d; }
/* The category chip in each row: wears its category color, doubles as the picker. */
.sup-cat-chip { display: inline-block; border: 1px solid rgba(0,0,0,.18); border-radius: 999px; padding: 2px 9px; font-size: 10px; font-weight: 700; color: #1f2a2a; white-space: nowrap; }
button.sup-cat-chip { cursor: pointer; font-family: inherit; }
button.sup-cat-chip:hover { border-color: rgba(0,0,0,.5); }
.sup-cat-menu { display: flex; flex-direction: column; gap: 3px; max-height: 60vh; overflow: auto; }
.sup-cat-opt { text-align: left; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #1f2a2a; cursor: pointer; font-family: inherit; }
.sup-cat-opt:hover { border-color: rgba(0,0,0,.4); }
/* The current category: a soft ring drawn INSIDE the pill (can't be cut
   off by the menu edge) and a small checkmark, instead of a harsh outline. */
.sup-cat-opt.cur { border-color: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.22); }
.sup-cat-opt.cur::after { content: "✓"; float: right; margin-left: 10px; }
/* The + on every color band — it opens the New Item window for that band. */
.sup-cat-head { display: flex; align-items: center; gap: 10px; }
.sup-band-add { width: 20px; height: 20px; padding: 0; line-height: 17px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); background: rgba(255,255,255,.6); font-size: 14px; font-weight: 800; color: #1f2a2a; cursor: pointer; }
.sup-band-add:hover { background: #fff; }
/* QTY is locked — a computed number, never typed. */
.sup-qty-lock { font-weight: 800; font-size: 13px; }
.sup-qty-lock.zero { color: var(--muted); font-weight: 400; }
/* Order type + Frequency: a Recurring item's On hand box sleeps (grayed);
   the Frequency box holds its weeks, with a small "wk" tag beside it. */
.inp.sup-freq { max-width: 44px; }
.inp.sup-price { max-width: 78px; }
.sup-total { font-weight: 800; font-size: 14px; white-space: nowrap; }
/* ORDERED: on its way — amber, tappable ("this one arrived"). */
.sup-status.ordered { background: #fff9dc; color: #8a6d1a; border: 1px solid #e3cf7e; cursor: pointer; }
.sup-arrived-btn { background: #fff9dc; border-color: #e3cf7e; color: #8a6d1a; font-weight: 700; }
/* The Groceries-arrived window: store groups with per-item rows. */
.sup-arrive-store { display: flex; align-items: center; gap: 10px; background: #f4f8f8; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-weight: 700; font-size: 13.5px; margin-top: 8px; cursor: pointer; }
.sup-arrive-items { padding-left: 12px; }
.sup-arrive-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.sup-arrive-row:last-child { border-bottom: none; }
.sup-arrive-name { flex: 1; }
.sup-arrive-hint { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sup-arrive-back { border: none; background: none; color: #a32d2d; font-size: 11.5px; cursor: pointer; padding: 2px 4px; }
.sup-arrive-row.back .sup-arrive-name { text-decoration: line-through; color: var(--muted); }
.sup-arrive-row.back .sup-arrive-hint { color: #a32d2d; }
.sup-freq-unit { font-size: 10.5px; color: var(--muted); margin-left: 3px; }
.sup-freq-cell { white-space: nowrap; }
.inp:disabled { opacity: .35; cursor: not-allowed; }
.sup-freq-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 14px; }
/* The grocery-list bar stays glued to the bottom of the screen, so the
   count and the send buttons are in reach however long the table grows. */
.sup-submit-bar { position: sticky; bottom: 0; z-index: 15; background: var(--panel); border: 1px solid var(--line); border-radius: 12px 12px 0 0; box-shadow: 0 -6px 18px rgba(0,0,0,.10); padding: 10px 14px; margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.sup-submit-bar .mdash-sub { margin: 0; flex: 1 1 220px; font-size: 13px; }
.sup-submit-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-submit-bar .sys-status { flex-basis: 100%; }
.sup-submit-bar .sys-status:empty { display: none; }
/* "Import master sheet…" sits at the right end of the top bar. */
.sup-import-open { margin-left: auto; white-space: nowrap; }
/* Product photo behind the link: small in the row, big while hovered. */
.sup-thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); background: #fff; margin-right: 7px; vertical-align: middle; }
.sup-photo-pop { position: fixed; z-index: 120; width: 190px; height: 190px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); pointer-events: none; }
/* Reorder + On hand side by side in the New Item window. */
.sup-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sys-bar .field-input { flex: 1; padding: 8px 10px; }
.gcal-card { margin-top: 16px; }
.gcal-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.gcal-connected { font-size: 13.5px; font-weight: 700; color: var(--good); }
.appt-place-addr { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-editor-hint { font-size: 12px; color: var(--muted); margin: -2px 0 10px; }
.note-big { width: 100%; height: 320px; resize: vertical; border: 1px solid var(--line); border-radius: 9px; padding: 12px; font-size: 14px; font-family: inherit; line-height: 1.5; box-sizing: border-box; }
.note-big:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.inp.appt, .inp.obs { text-align: left; }
.col-na { width: 72px; white-space: nowrap; }
/* Plain weight on purpose (the owner's ask) — only the chosen letter in the
   middle of the box is bold, never the switches. */
.na-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 6px; font-size: 11px;
  font-weight: 400; padding: 3px 6px; cursor: pointer; color: var(--muted); margin: 0 1px;
}
.na-btn.active { background: var(--warn); color: #fff; border-color: var(--warn); }
.na-btn.r-btn.active { background: var(--bad); color: #fff; border-color: var(--bad); }
.na-btn.na-mini { font-size: 10px; padding: 1px 4px; border-radius: 5px; }
.col-first.vacant { color: var(--muted); font-style: italic; font-weight: 600; }
/* Daily Notes: the green check in front of a name = that day is complete. */
.dn-mark { display: inline-block; width: 14px; margin-right: 4px; text-align: center; }
.dn-mark.done { color: #2f7d46; font-weight: 800; }
/* A former resident's past-day row — visible because they were there, gray
   because the folder is closed: look, don't touch. Same cells as the live
   rows (chips, boxes) so the table's rhythm never breaks; just quieter. */
/* (Named past-row, not former-row — that class is the Former residents
   LIST's flex row and would break the table layout.) */
.grid tr.past-row td, .grid.zebra tbody tr.past-row td { background: #f2f1ec; }
tr.past-row .col-first { font-style: italic; color: #5f5c55; }
tr.past-row .chip, tr.past-row .bm-btn, tr.past-row .inp.note, tr.past-row .oz-out { pointer-events: none; opacity: .75; }
tr.past-row .inp.note:disabled, tr.past-row .bm-btn:disabled { background: transparent; color: inherit; cursor: default; }
.former-tag { font-size: 10px; font-weight: 700; color: #6b675e; background: #e9e7e2; border-radius: 8px; padding: 1px 7px; margin-left: 7px; white-space: nowrap; }
/* The Export screen's plain-words notice about who changed beds this month. */
.former-notice { background: #eef3fb; border: 1px solid #c9d8ef; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 13px; color: #2f4a6b; }
.former-notice .fn-head { font-weight: 800; margin-bottom: 4px; }
.former-notice .fn-foot { margin-top: 4px; font-size: 12px; color: #5c7697; }
.prow.former-prow .pno { font-style: italic; }
.vacant-cell { text-align: center; color: var(--muted); font-style: italic; background: #fafbfb; }
.vacant-panel { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); }
/* Fast tooltip (data-tip): a light yellow note that appears in ~150 ms */
.tip { position: fixed; z-index: 120; background: #fff9dc; color: #4a3f10; border: 1px solid #e3cf7e; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; max-width: 260px; box-shadow: 0 4px 12px rgba(0,0,0,.12); pointer-events: none; line-height: 1.35; }
.inp.pct.is-out { color: var(--warn); font-weight: 700; }
.oz-out { color: var(--muted); }
/* Fast tap/keystroke meal controls (%, fluids, bowel) */
.seg { display: inline-flex; gap: 2px; align-items: center; justify-content: center; }
.cell-pct, .cell-bm { outline: none; border-radius: 8px; padding: 1px; }
.cell-pct:focus, .cell-bm:focus { box-shadow: 0 0 0 2px var(--brand); }
.seg-btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; padding: 3px 6px; cursor: pointer; color: var(--ink); line-height: 1.15; }
.seg-btn:hover { background: var(--brand-tint); }
.seg-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cell-oz .inp.oz { width: 42px; max-width: 42px; flex: 0 0 auto; }
.inp.oz:focus { box-shadow: 0 0 0 2px var(--brand); }
/* Value chips (meal % and fluids) + their click-popup */
.chip { display: inline-flex; align-items: center; gap: 4px; min-width: 46px; justify-content: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; outline: none; white-space: nowrap; }
.chip:hover { background: var(--brand-tint); }
.chip:focus { box-shadow: 0 0 0 2px var(--brand); border-color: var(--brand); }
.chip.set { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-tint); }
.chip.out { color: var(--warn); border-color: #e6c893; background: #fdf6e9; }
.chip-caret { font-size: 9px; color: var(--muted); }
.chip.set .chip-caret { color: var(--brand); }
.chip.out .chip-caret { color: var(--warn); }
.meal-pop-overlay { position: fixed; inset: 0; z-index: 70; }
.meal-pop { position: absolute; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px; z-index: 71; }
.meal-pop-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.meal-pop-grid.pct { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.meal-pop-oz { display: flex; gap: 5px; align-items: center; }
.pop-btn { border: 1px solid var(--line); background: #fff; border-radius: 7px; font-size: 13px; font-weight: 600; padding: 8px 12px; cursor: pointer; color: var(--ink); min-width: 42px; }
.pop-btn:hover { background: var(--brand-tint); }
.pop-btn:focus { outline: none; box-shadow: 0 0 0 2px var(--brand); border-color: var(--brand); }
.pop-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.oz-other { width: 62px; border: 1px solid var(--line); background: #fff; text-align: center; padding: 7px 8px; border-radius: 7px; font-size: 13px; color: var(--ink); }
.oz-other:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); outline: none; }
/* Read-only month summary cells (Monthly Notes) */
.sumcell { color: var(--muted); font-size: 13px; }
.sumcell.set { color: var(--ink); font-weight: 600; }
.sumtext { text-align: left !important; font-size: 12px; font-weight: 400 !important; }
.modal.modal-wide { max-width: 460px; }
.res-hint { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.res-list { display: flex; flex-direction: column; gap: 7px; max-height: 52vh; overflow: auto; }
.res-bedbar { display: flex; gap: 8px; margin-top: 10px; }
.res-row { display: flex; align-items: center; gap: 10px; }
.res-bed { width: 60px; font-size: 13px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.res-row .field-input { flex: 1; }
.modal.modal-xwide { max-width: 1000px; }
.res-page-card { max-width: 1000px; }
.res-row2 { display: grid; grid-template-columns: 56px minmax(110px, 1fr) 264px minmax(150px, auto); gap: 8px; align-items: center; }
.res-head-row { display: grid; grid-template-columns: 56px minmax(110px, 1fr) 264px minmax(150px, auto); gap: 8px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.res-row2 .field-input { width: 100%; }
.res-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.res-mini-sel { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 6px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.former-list { display: flex; flex-direction: column; gap: 6px; max-height: 24vh; overflow: auto; }
.former-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: #fbfdfd; }
.former-main { flex: 1; min-width: 0; }
.former-name { font-size: 13px; font-weight: 700; }
.former-reason { font-size: 12px; font-style: italic; color: #5f5c55; margin-top: 2px; }
/* A former resident's archived sheets: gray paper, read-only. */
table.adl-former td.adl-cell { background: #f7f6f2; }
.adl-former .adl-task { font-style: italic; color: #5f5c55; }
.left-why { width: 100%; resize: vertical; font-family: inherit; }
.former-meta { font-size: 12px; color: var(--muted); }
.former-meta.soon { color: var(--bad); font-weight: 600; }
.dob-picker { display: flex; gap: 6px; }
.dob-picker .field-input { width: auto; padding: 9px 8px; }
.dob-picker .dob-mon { flex: 3; min-width: 0; }
.dob-picker .dob-day { flex: 1.5; min-width: 0; }
.dob-picker .dob-year { flex: 2; min-width: 0; text-align: center; }
.homes-list { display: flex; flex-direction: column; gap: 10px; }
.home-row { display: flex; align-items: flex-start; gap: 10px; }
.home-idx { width: 20px; font-weight: 700; color: var(--muted); padding-top: 8px; }
.home-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.home-fields textarea.field-input { resize: vertical; font-family: inherit; }
textarea.inp { resize: none; overflow: hidden; font-family: inherit; min-height: 26px; line-height: 1.3; }
textarea.inp.appt, textarea.inp.obs { text-align: left; }
.btn.has-sig { color: var(--good); border-color: #bfe3cf; }
.sig-thumb-wrap { margin: 10px 0; min-height: 30px; }

/* ── Medications (Category C) ──────────────────────────── */
/* The red count on the sidebar's C tile: bottles that need attention. */
.side-badge { background: #e24b4a; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; flex: 0 0 auto; }
.med-name-cell { text-align: left !important; min-width: 180px; }
.med-name { font-weight: 700; font-size: 13px; }
.med-note { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.med-dir { white-space: nowrap; color: var(--muted); font-size: 12.5px; }
/* One little square per time of day (M N E B), in the category's soft purple. */
.med-slot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: #e4dbf5; color: #6f4fae; font-size: 10.5px; font-weight: 800; margin: 0 1px; }
/* Status pills: pastel green (fine) / amber (a week) / red (3 days or PRN low),
   purple = med set (the pharmacy's job), gray = PRN just counting along. */
.med-pill { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 8px; padding: 3px 8px; white-space: nowrap; background: #eaf3de; color: #3b6d11; }
.med-pill.warn { background: #fff9dc; color: #8a6d1a; }
.med-pill.bad { background: #fcebeb; color: #a32d2d; }
.med-pill.medset { background: #e4dbf5; color: #6f4fae; }
.med-pill.prn { background: #eef2f2; color: #5f5e5a; }
.med-acts { white-space: nowrap; }
.med-date { white-space: nowrap; }
/* The "needs attention" card on top: soft red/amber rows, click = jump to that resident. */
.med-alert-card { margin-bottom: 14px; }
/* The one loud thing on the page: only while alerts exist, the card wears a
   soft red wash, a red frame (survives black-and-white printing), and a red
   title. Tables sit on white strips inside so the rows stay crisp. */
/* When something needs action the card raises a SOLID RED BANNER - white
   title on true red, impossible to mistake for a family pastel. The body
   stays calm white; the card is quiet again when nothing needs action. */
.med-alert-card.med-alert-hot { border: 1px solid #dcc9c9; overflow: hidden; }
.med-alert-card.med-alert-hot .dash-card-head {
  background: #c0392b; color: #fff; font-size: 15px;
  margin: -14px -16px 10px; padding: 9px 16px;
}
.med-alert-card.med-alert-hot .dash-card-head .dash-dot { background: #fff; }
.med-alert-card.med-alert-hot .dash-card-head .btn { background: rgba(255,255,255,.94); }
.med-alert-card.med-alert-hot .med-sect { color: #a32d2d; }
/* Action Required's scope dropdown, next to the title. */
.med-scope-sel { margin-left: 12px; font-size: 12.5px; }
/* Action Required is a table: Resident · Medication · Depleted · Supply. */
.med-alert-tr { cursor: pointer; }
.med-alert-tr:hover td { background: var(--brand-tint); }
.med-alert-table td { padding: 7px 8px; }
.med-alert-text { flex: 1; min-width: 0; }
/* The add/edit window: quick 1x–4x buttons + the four time-of-day toggles. */
.med-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.med-slot-toggle { min-width: 74px; padding: 7px 8px; text-align: center; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; }
.med-slot-toggle:hover { background: #f2eefa; }
.med-slot-toggle.on { background: #e4dbf5; border-color: #b9a5e3; color: #4f3a80; }
.med-day-toggle { min-width: 42px; padding: 6px 4px; font-size: 12px; }
/* Weekday-only medicines show their days in the Directions column. */
.med-days { font-size: 11px; color: var(--muted); font-weight: 700; }
/* The frequency button lights while the chips match its pattern. */
.med-quick-btn.on { background: #e4dbf5; border-color: #b9a5e3; color: #4f3a80; font-weight: 700; }
.med-hint { font-size: 12px; color: var(--muted); margin: 6px 0 2px; line-height: 1.45; }
/* Medicine boxes: two Sunday–Saturday grids, four compartments per day. */
.box-card { margin-bottom: 14px; }
.box-title { font-weight: 800; font-size: 14px; margin: 14px 0 6px; }
.box-title .sub { font-weight: 600; font-size: 12px; color: var(--muted); }
.box-grid { display: grid; grid-template-columns: 66px repeat(7, minmax(52px, 1fr)); gap: 3px; }
.box-dayhead { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 3px 0; border-radius: 6px; }
.box-dayhead.today { background: #ffe8cc; color: #b06614; }
.box-rowlab { font-size: 11px; font-weight: 700; color: var(--muted); align-self: center; }
/* Each compartment shows its pills (name + strength), like the real box.
   Rows wear the real boxes' colors: baby yellow Morning, baby pink Noon,
   baby blue Evening, baby purple Bedtime. A shorted medicine is struck
   through in red right inside its container. */
.box-cell { min-height: 30px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px 3px; font-size: 12.5px; font-weight: 700; min-width: 0; }
.box-cell.sM { background: #fff7d1; color: #8a6d1a; }
.box-cell.sN { background: #fde5ee; color: #a04a6e; }
.box-cell.sE { background: #e3f0fb; color: #2c5885; }
.box-cell.sB { background: #e9e2f7; color: #59418c; }
.box-cell-med { font-size: 10.5px; font-weight: 700; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box-cell-med.short { color: #a32d2d; text-decoration: line-through; }
/* Empty and already-passed compartments keep their row's color — just quieter. */
.box-cell.off { font-weight: 400; opacity: .65; }
.box-cell.past { opacity: .45; }
/* The quiet camera button: saves a picture of the whole page. */
.med-snap { margin-left: auto; opacity: .55; font-size: 14px; }
.med-snap:hover { opacity: 1; }
/* The privacy eye: toggled on, resident names become bed numbers. */
.med-eye { margin-left: auto; opacity: .55; font-size: 14px; }
.med-eye:hover { opacity: 1; }
.med-eye.on { opacity: 1; background: #e4dbf5; border-color: #b9a5e3; }
/* The printed-report button (📄), between the eye and the camera. */
.med-form { opacity: .55; font-size: 14px; }
.med-form:hover { opacity: 1; }
.med-eye + .med-form, .med-form + .med-snap, .med-eye + .med-snap { margin-left: 6px; }
/* The Pharmacy block in Action Required: name on top, address · phone under. */
.med-pharm-cell { text-align: left !important; min-width: 200px; }
.med-pharm-name { font-weight: 700; font-size: 12.5px; }
.med-pharm-sub { font-size: 11.5px; color: var(--muted); }
/* Section labels inside the med cards: Scheduled Medication / PRN. */
.med-sect { font-weight: 800; font-size: 13px; margin: 12px 0 6px; }
/* PRN tables wear the page's family color like every table on the screen —
   never pink, which belongs to Billing. The "Scheduled Medication"
   and "PRN" section labels carry the distinction instead. */
/* The medications editing table folds shut; its header is the switch. */
.med-edit-card { margin-bottom: 14px; }
.med-edit-head { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; color: var(--ink); padding: 2px 0; text-align: left; }
.med-edit-head:hover { color: var(--brand-dark); }
.med-edit-head .side-caret { margin-left: auto; font-size: 12px; }
.med-edit-bar { margin: 10px 0; }

.badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.badge-alert { background: var(--alert-bg); color: var(--bad); }
.badge-clear { background: var(--clear-bg); color: var(--good); }
.badge-low { background: #e3f2fd; color: #1565c0; }
.badge-high { background: var(--alert-bg); color: var(--bad); }

/* ── Dashboards ────────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.dash-card-head { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 10px; }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: var(--bad); }
.dot-green { background: var(--good); }
.dash-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }
.alert-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.alert-row:last-child { border-bottom: none; }
/* Monthly Dashboard — ranked bars */
.mdash-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.mdash-sub { font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.mdash-grid { display: grid; grid-template-columns: minmax(120px, 170px) 1fr minmax(90px, auto); gap: 7px 10px; align-items: center; font-size: 13px; }
.mdash-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mdash-track { background: #eef3f3; border-radius: 5px; height: 16px; overflow: hidden; }
.mdash-bar { height: 16px; border-radius: 5px; min-width: 2px; }
.mdash-bar.food { background: #5dcaa5; }
.mdash-bar.fluid { background: #85b7eb; }
.mdash-bar.bm { background: #afa9ec; }
.mdash-bar.alert { background: #e24b4a; }
.mdash-val { text-align: right; color: var(--muted); font-weight: 600; white-space: nowrap; }
.mdash-val.alert { color: var(--bad); }
.alert-name { font-weight: 700; font-size: 14px; }
.alert-detail { color: var(--muted); font-size: 12px; }

/* ── Export view ───────────────────────────────────────── */
.exportview .lead { color: var(--muted); }
.section-heading { font-weight: 800; font-size: 15px; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--brand-tint); }
.plist { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.prow { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: none; }
.pno { font-weight: 700; width: 90px; }
.pcount { color: var(--good); font-size: 13px; flex: 1; }
.pcount.empty { color: var(--muted); }
.allrow { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.callout { margin-top: 18px; background: var(--brand-tint); color: var(--brand-dark); padding: 12px 14px; border-radius: 9px; font-size: 13px; }

/* ── Admin tables ──────────────────────────────────────── */
.admin-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.admin-title { font-weight: 800; font-size: 16px; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th { text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--line); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
table.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.td-actions { text-align: right; }
.status-active { color: var(--good); font-weight: 700; font-size: 13px; }
.status-inactive { color: var(--muted); font-weight: 700; font-size: 13px; }
.action-tag { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.action-login { background: var(--clear-bg); color: var(--good); }
.action-logout { background: #eef2f2; color: var(--muted); }

/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,30,30,.45); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal { background: var(--panel); border-radius: 14px; padding: 22px; width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal-title { font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-error { color: var(--bad); font-size: 13px; margin-top: 10px; min-height: 16px; display: none; }
.modal-error.show { display: block; }

/* ── Monthly Report designer ───────────────────────────── */
.report-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } }
.editor-head { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.block-list { display: flex; flex-direction: column; gap: 8px; }
.block-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.block-head { display: flex; align-items: center; justify-content: space-between; background: var(--brand-tint); padding: 6px 10px; }
.block-type { font-weight: 700; font-size: 12px; color: var(--brand-dark); }
.block-actions { display: flex; gap: 4px; }
.mini { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: 13px; line-height: 1; color: var(--ink); }
.mini.danger { color: var(--bad); border-color: #f0c8c5; }
.mini:disabled { opacity: .4; cursor: default; }
.block-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.block-note { font-size: 12px; color: var(--muted); font-style: italic; }
.add-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.taghelp { margin-top: 10px; font-size: 11px; color: var(--muted); line-height: 1.8; }
.taghelp code { background: var(--brand-tint); color: var(--brand-dark); padding: 1px 5px; border-radius: 5px; font-size: 11px; }
.labeled { display: flex; flex-direction: column; gap: 3px; }
.mini-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.inline-field { display: flex; align-items: center; gap: 8px; }
.img-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.img-thumb { max-width: 100px; max-height: 54px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 2px; }
textarea.field-input { resize: vertical; font-family: inherit; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn { border: none; background: #fff; padding: 7px 12px; font-size: 13px; color: var(--muted); cursor: pointer; }
.seg-btn.on { background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; }
.prev-head { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.docprev-box { background: #e9edee; border: 1px solid var(--line); border-radius: 10px; padding: 14px; max-height: calc(100vh - 240px); overflow: auto; min-height: 320px; }
.prev-empty, .prev-loading { color: var(--muted); font-size: 13px; text-align: center; padding: 48px 12px; }
.docprev-box .docxprev { box-shadow: var(--shadow); }

/* ── Vitals Weekly (the paper Blood Pressure Log on screen) ───────────────── */
.bpw-table th { text-align: center; }
.bpw-hd { font-weight: 800; font-size: 12px; }
.bpw-hdate { font-weight: 400; font-size: 11px; }
.bpw-cell { text-align: center; white-space: nowrap; min-width: 172px; }
.inp.bpw { max-width: 42px; padding: 5px 1px; font-size: 12.5px; }
.bpw-slash { color: var(--muted); }
/* Each box's tiny NA / R switches sit PINNED at the right edge; the middle
   (the number boxes or the chosen letter) centers itself — the switches
   never move, whatever the box shows. */
.bpw-cellwrap { display: flex; align-items: center; gap: 4px; }
.bpw-mid { flex: 1 1 auto; text-align: center; white-space: nowrap; }
.bpw-flags { display: inline-flex; flex-direction: column; gap: 2px; flex: none; }
.bpw-state { font-weight: 700; font-size: 12px; color: var(--warn); }
.bpw-state-r { color: var(--bad); }
/* A month-marked resident's row: one solid band, MAR strike colors. */
td.bpw-band-r { background: #fcebeb; color: #a32d2d; font-weight: 700; font-size: 12.5px; text-align: center; }
td.bpw-band-na { background: #eef1f1; color: #5f5e5a; font-weight: 700; font-size: 12.5px; text-align: center; }
/* Empty vitals boxes only whisper their hints — the sys / dia / P
   placeholders (and the slash beside an empty box) go faint so a hint
   never reads as a real reading. */
.inp.vital::placeholder { color: #c9d0ce; }
.inp.bpw:placeholder-shown + .bpw-slash { color: #d6dcda; }
/* Days that belong to the month next door are dead gray boxes — the sheet
   never mixes two months (the owner's rule). Today's column glows soft
   orange like the MAR's today row; a reading that would alert wears the
   alert wash instead (red high, blue low) — all of these must also outrank
   the zebra stripe. */
.bpw-table th.bpw-off { background: #e6eaea; color: #8b9391; }
.bpw-table td.bpw-off, .bpw-table.grid.zebra tbody tr:nth-child(even) td.bpw-off { background: #e6eaea; color: #9aa19f; }
.bpw-table th.bpw-today { background: #ffe8cc; color: #8a5a1c; }
.bpw-table td.bpw-today, .bpw-table.grid.zebra tbody tr:nth-child(even) td.bpw-today { background: #fff4e5; }
.bpw-table td.bpw-high, .bpw-table.grid.zebra tbody tr:nth-child(even) td.bpw-high { background: #fcebeb; }
.bpw-table td.bpw-low, .bpw-table.grid.zebra tbody tr:nth-child(even) td.bpw-low { background: #e3f2fd; }

/* ── Medication Record (the paper MAR on screen) ──────────────────────────── */
/* Slot headers wear the medicine-box baby colors; today's row glows soft
   orange; R is red, NA gray, and a missed (empty, past, due) box soft yellow. */
.mar-table { table-layout: fixed; }
.mar-table th.mar-h-date { width: 44px; }
.mar-table th.mar-h-m, .mar-table th.mar-h-n, .mar-table th.mar-h-e, .mar-table th.mar-h-b { width: 84px; }
.mar-table th.mar-h-m { background: #fff7d1; } .mar-table th.mar-h-m .ht, .mar-table th.mar-h-m .hb { color: #7a6a1c; }
.mar-table th.mar-h-n { background: #fde5ee; } .mar-table th.mar-h-n .ht, .mar-table th.mar-h-n .hb { color: #8f3d62; }
.mar-table th.mar-h-e { background: #e3f0fb; } .mar-table th.mar-h-e .ht, .mar-table th.mar-h-e .hb { color: #1f5787; }
.mar-table th.mar-h-b { background: #e9e2f7; } .mar-table th.mar-h-b .ht, .mar-table th.mar-h-b .hb { color: #59418c; }
.mar-table th.mar-h-prn { background: #fbe7f0; } .mar-table th.mar-h-prn .ht, .mar-table th.mar-h-prn .hb { color: #8f3d62; }
.mar-table td { text-align: center; font-weight: 700; font-size: 13px; color: #3f4c4c; }
.mar-table td.mar-date { font-weight: 700; color: var(--muted); width: 44px; }
.mar-table td.mar-prn-cell, .mar-table td.mar-note-cell { text-align: left; font-weight: 400; font-size: 12px; }
.mar-cell.mar-open { cursor: pointer; }
.mar-cell.mar-open:hover, .mar-cell.mar-open:focus-visible { outline: 2px solid #b9a6dd; outline-offset: -2px; border-radius: 6px; }
.mar-cell.mar-r { background: #fcebeb; color: #a32d2d; }
.mar-cell.mar-na { background: #eef1f1; color: #5f5e5a; }
.mar-cell.mar-miss { background: #fff6d8; color: #9b8a3a; font-weight: 400; font-size: 11px; }
tr.mar-today td { background: #fff4e5; }
tr.mar-today td.mar-date { background: #ffe8cc; color: #8a5a1c; }
tr.mar-today td.mar-cell.mar-r { background: #fcebeb; }
tr.mar-today td.mar-cell.mar-na { background: #eef1f1; }
tr.mar-future td { opacity: .45; }
.mar-prn-entry, .mar-note-text { padding: 1px 2px; }
.mar-banner { background: #fff6d8; border: 1px solid #ecd489; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: #7a6a1c; margin-bottom: 8px; font-weight: 600; }
/* The medicine notebook: supply gaps under the name, the manager's card, the
   count-window question, and the MAR notes explanation. History, not alarm. */
.med-gap-line { display: block; font-size: 11px; font-weight: 700; color: #a32d2d; margin-top: 2px; cursor: pointer; }
.med-gap-line:hover { text-decoration: underline; }
.gap-card .gap-line { font-size: 13px; padding: 3px 0; color: #5f5e5a; }
.mar-gap-note { font-size: 11px; font-style: italic; color: #9b3535; padding: 1px 2px; }
.gap-panel { background: #fff6d8; border: 1px solid #ecd489; border-radius: 10px; padding: 10px 12px; margin: 10px 0 6px; }
.gap-panel .gap-q { font-size: 13px; font-weight: 700; color: #7a6a1c; margin-bottom: 8px; }
.gap-dates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #7a6a1c; margin-bottom: 8px; }
.gap-dates .field-input { width: 150px; }
.gap-days { font-weight: 700; }
.gap-story-row { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.gap-story-range { font-weight: 700; font-size: 13px; }
.gap-story-meta { font-size: 12px; color: var(--muted); }
/* The stamp key (Resident Service): hold I — the tag and crosshair say it's on. */
.adl-stamp-pill { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--brand-dark, #2f6f63); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 300; pointer-events: none; }
body.adl-stamping .adl-cell.adl-open, body.adl-stamping .mar-cell.mar-open { cursor: crosshair; }
/* The bare quick-pick: a tiny button row beside the tapped cell, each
   hotkey letter underlined; one quiet line says so. */
.quickpick { position: fixed; z-index: 60; background: #fff; border: 1px solid #cfd9d3; border-radius: 10px; box-shadow: 0 6px 18px rgba(30,50,40,.18); padding: 6px; }
.qp-row { display: flex; gap: 4px; }
.qp-hint { font-size: 11px; color: var(--muted); text-align: center; padding-top: 5px; }
.qp-btn u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.qp-btn { min-width: 40px; padding: 6px 10px; border-radius: 8px; font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; }
.qp-ini { border: 1.5px solid #97c459; background: #eaf3de; color: #3b6d11; }
.qp-r { border: 1px solid #f09595; background: #fcebeb; color: #a32d2d; }
.qp-na { border: 1px solid #c9d3d3; background: #eef1f1; color: #5f5e5a; }
.qp-clear { border: 1px solid #e0b3b3; background: #fff; color: #a32d2d; }
.qp-btn.qp-cur { outline: 2.5px solid currentColor; outline-offset: 1px; }
.mar-modal { min-width: 340px; }
.mar-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mar-chip { background: #fbe7f0; color: #8f3d62; border: 1px solid #edb8cf; border-radius: 8px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mar-prn-list { margin-bottom: 10px; }
.mar-prn-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.mar-note-input { min-height: 72px; width: 100%; }
.mar-legend { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--muted); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.mar-legend-label { font-weight: 700; color: var(--ink); }
.mar-legend-ini { font-weight: 800; color: #8a5c0d; }
.mar-footnote { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* Whole-month strike: the R / NA buttons at the table's top right, and the
   Word-style watermark that lies diagonally across a struck form. */
.mar-strike-btns { margin-left: auto; display: flex; gap: 8px; }
.mar-strike-btn { border-radius: 8px; padding: 6px 16px; font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; }
.mar-strike-r { border: 1px solid #f09595; background: #fcebeb; color: #a32d2d; }
.mar-strike-na { border: 1px solid #c9d3d3; background: #eef1f1; color: #5f5e5a; }
.mar-strike-btn.on { outline: 2.5px solid currentColor; outline-offset: 1px; }
.mar-struckwrap { position: relative; }
.mar-watermark { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; align-items: center; pointer-events: none; z-index: 3; overflow: hidden; }
.mar-watermark span { transform: rotate(-28deg); font-size: 92px; font-weight: 800; letter-spacing: 8px; opacity: .13; white-space: nowrap; }
.mar-watermark.wm-r span { color: #a32d2d; }
.mar-watermark.wm-na span { color: #5f5e5a; }
table.mar-struck td { opacity: .55; }

/* House rule: every window fits the screen � tall ones scroll inside, so the
   Save and Cancel buttons can never fall below a small screen's edge. */
.modal { max-height: calc(100vh - 40px); overflow-y: auto; }

/* Pharmacy smart list rows: the pick fills the fields, the X forgets a typo. */
.ph-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.ph-row:last-child { border-bottom: none; }
.ph-row .appt-place-pick { border-bottom: none; flex: 1; min-width: 0; }
.ph-row .ph-del { margin: 0 8px; flex: none; }

/* Discontinued medicines: visible but clearly asleep � gray pill with the
   stop date, dimmed row, and a Resume button instead of Refilled/Stop. */
.med-pill.disc { background: #eef1f1; color: #5f5e5a; }
tr.med-disc-row td { opacity: .55; }
tr.med-disc-row td.med-acts { opacity: 1; }

/* The app-styled confirmation window - short question, quiet explanation,
   the verb on a red button when it deletes. Replaces the browser popup. */
.confirm-modal { max-width: 340px; }
.confirm-msg { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 6px 0 2px; white-space: pre-line; }

/* In-page tabs: the active tab wears a soft wash AND an underline stroke.
   Green here (Care Documentation); future categories bring their own tint. */
/* Tabs follow their page's family: unselected tabs wear a FAINT family tint
   (so they read as tabs at a glance), the active one the full wash + stroke. */
.pagetabs-row { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; border-bottom: 1px solid var(--brand-tint, #e6f0ef); margin-bottom: 14px; }
/* The Medications family's ONE resident picker rides the tab strip, right
   after Controlled Substance (the owner's ask) — aligned with the tabs. */
.med-tab-pick { align-self: center; margin-left: -8px; margin-bottom: 4px; }

/* ── Controlled Substance: the paper log's two halves, side by side ── */
.cs-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; margin-bottom: 12px; }
.cs-head-l { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.cs-head-v { font-size: 13.5px; font-weight: 600; }
.cs-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 980px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-rem { font-weight: 700; }
.cs-badge { font-size: 11.5px; font-weight: 800; border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.cs-ok { background: #eaf3de; color: #3b6d11; }
.cs-short { background: #fcebeb; color: #a32d2d; }
.cs-over { background: #faeeda; color: #854f0b; }
.pagetabs-title { font-size: 16px; font-weight: 700; color: var(--brand, #2c6e6a); padding-bottom: 10px; }
.pagetabs { display: flex; gap: 4px; }
.pagetab { position: relative; border: none; background: var(--brand-faint, #f0f6f5); border-radius: 8px 8px 0 0; padding: 7px 14px 12px; font-size: 13px; color: var(--muted); cursor: pointer; font-family: inherit; transition: background .15s; }
.pagetab:hover { background: var(--brand-hover, #e9f2f1); }
.pagetab.on { background: var(--brand-tint, #e6f0ef); color: var(--brand-dark, #235753); font-weight: 700; }
.pagetab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--brand, #2c6e6a); }

/* Medications lives under Care Documentation now - its tab strip wears the
   same amber as its siblings (the pages keep their purple accents inside). */

/* ADL sheet: the paper grid on screen - tasks down, days 1-31 across. */
.adl-table { border-collapse: collapse; }
.adl-table th.adl-h-task { min-width: 210px; text-align: left; background: #f4f6f6; color: #5f6f6f; padding: 5px 10px; }
.adl-table th.adl-h-day { min-width: 32px; background: #f4f6f6; color: #5f6f6f; padding: 5px 2px; text-align: center; font-size: 11px; }
.adl-table th.adl-h-day.adl-today { background: #ffe8cc; color: #8a5a1c; }
.adl-table td.adl-band { background: #f7e8cd; color: #96660f; font-weight: 700; font-size: 11px; padding: 3px 10px; }
.adl-table td.adl-task { font-size: 12px; padding: 4px 10px; white-space: nowrap; }
.adl-table td.adl-cell { text-align: center; font-weight: 700; font-size: 12px; color: #3f4c4c; padding: 3px 2px; min-width: 32px; }
.adl-cell.adl-open { cursor: pointer; }
.adl-cell.adl-open:hover, .adl-cell.adl-open:focus-visible { outline: 2px solid #d9b26a; outline-offset: -2px; border-radius: 5px; }
.adl-cell.adl-today { background: #fff4e5; }
.adl-cell.adl-future { opacity: .4; }
.adl-cell.adl-auto { background: #f2f7fc; color: #1f5787; font-weight: 600; }
.adl-cell.adl-auto.adl-today { background: #fff4e5; }
/* The on/off switch gutter: visually OUTSIDE the sheet's frame. One flip
   sleeps or wakes a row for this resident - no window, no extra clicks. */
.adl-table th.adl-tgl, .adl-table td.adl-tgl { border: none; background: transparent; width: 42px; min-width: 42px; padding: 0 8px 0 4px; text-align: right; }
.adl-switch { width: 28px; height: 16px; border-radius: 999px; border: 1px solid #c9d3d3; background: #e7ecec; position: relative; cursor: pointer; padding: 0; vertical-align: middle; }
.adl-switch .adl-knob { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: left .12s; }
.adl-switch.on { background: #edc57f; border-color: #cfa14e; }
.adl-switch.on .adl-knob { left: 13px; }
tr.adl-off td.adl-tgl { opacity: 1; }

/* The paper reads left to right: task names and group bands hug the left. */
.adl-table td.adl-band, .adl-table td.adl-task { text-align: left; }

/* Rows turned off for a resident: visible like the paper, but asleep. */
tr.adl-off td { opacity: .38; }
tr.adl-off td.adl-cell { background: #f6f8f7; }
.adl-cell.mar-r { background: #fcebeb; color: #a32d2d; }
.adl-cell.mar-na { background: #eef1f1; color: #5f5e5a; }

/* The ADL bar lines up with the sheet's bordered edge; the printer sits far right. */
.adl-subbar { margin-left: 31px; }
.adl-print { margin-left: auto; font-size: 16px; }

/* Plain printing of the sheet: no app chrome, no switches; sleeping rows
   print visible but blank, like the paper. */
@media print {
  .topbar, .sidebar, .subbar, .adl-tgl, .mar-footnote { display: none !important; }
  .contentbg { background: #fff !important; }
  .content { padding: 0 !important; }
  .tablewrap { overflow: visible !important; max-height: none !important; }
  tr.adl-off td { opacity: 1 !important; }
  tr.adl-future td, .adl-cell.adl-future { opacity: 1 !important; }
}

/* The Word · PDF · Print icon trio riding the right end of a subbar.
   Word wears Word's blue, PDF wears PDF's red, the printer stays an emoji —
   quiet icon buttons in the 📷/🖨 family. */
.subbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.doc-ic { font-weight: 800; min-width: 42px; font-size: 13px; letter-spacing: 0.3px; }
.doc-ic-word { color: #2b579a; }
.doc-ic-pdf { color: #b30b00; }

/* Printing the Word DOCUMENT (not the screen): the docx renderer draws the
   file into this parked host; while body.doc-printing, print shows ONLY it.
   print-color-adjust keeps the document's own ink — the black title band,
   the yellow month line — even when the browser's "Background graphics"
   print setting is off (it is, by default). */
.print-host { position: absolute; left: -12000px; top: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-host section { box-shadow: none !important; margin: 0 auto !important; }
/* What actually prints: one full-sheet PICTURE per page (the same captures
   the PDF uses), so the browser's print engine can never re-cut a row. */
.docprint-sheet { display: block; width: 11in; height: 8.5in; }
/* The Resident Service sheet's dense grid: the preview renderer packs rows
   a hair looser than Word — enough to push the one-page paper form onto a
   second page. Scoped to the GRID alone — the 3rd table in the body
   (letterhead, name line, then the grid); the letterhead and legend keep
   their natural line heights. */
.print-host .adlprint article table:nth-of-type(3) td p { line-height: 9px !important; min-height: 9px !important; }
.print-host .adlprint article table:nth-of-type(3) td { padding-top: 0 !important; padding-bottom: 0 !important; }
@media print {
  body.doc-printing { margin: 0 !important; }
  body.doc-printing #app { display: none !important; }
  body.doc-printing .print-host { position: static; left: auto; }
  /* One sheet image = one sheet of paper. */
  .print-host .docprint-sheet { page-break-after: always; break-after: page; }
  .print-host .docprint-sheet:last-of-type { page-break-after: auto; break-after: auto; }
}

/* The bowel cell: one small box; Yes carries its size ("Yes - M"). */
.bm-btn { width: 100%; min-height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; color: var(--muted); cursor: pointer; font-family: inherit; padding: 4px 6px; }
.bm-btn.set { color: var(--ink); font-weight: 700; }
.bm-btn.bm-yes { color: #2f7d46; }
.bm-btn.bm-no { color: #a32d2d; }