/*
 * Placeholder visual design for the therapist-facing UI.
 *
 * All colours, spacing, and typography are expressed as CSS custom
 * properties (below) specifically so this can be re-skinned once the
 * client supplies real branding guidelines - swapping the values in
 * `:root` is enough to restyle every screen consistently, without
 * touching any markup or the values scattered through it.
 */

:root {
  /*
   * Provisional brand tokens, matched to the client's provisional
   * "Therapist Work Notes" logo (the green book-and-leaf mark in the
   * header). Still provisional in the sense that final guidelines have
   * not arrived - but coordinated to that logo rather than arbitrary.
   */
  --color-primary: #4f6b45;
  --color-primary-dark: #35492e;
  --color-primary-light: #a9bb9f;
  --color-primary-contrast: #ffffff;
  --color-accent: #b97a4e;
  --color-bg: #f7f5ef;
  --color-surface: #ffffff;
  --color-text: #2f2a22;
  --color-text-muted: #6b6153;
  --color-border: #e2dbc9;
  --color-ring-hover: #cfc6ac;
  --color-error: #a4373a;
  --color-error-bg: #fbeaea;
  --color-success: #3f7a4f;
  --color-warning: #8a5a0b;
  --color-warning-bg: #fdf3df;
  --color-warning-border: #edc981;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(30, 40, 38, 0.06), 0 8px 24px rgba(30, 40, 38, 0.08);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/*
 * A quiet, permanent reminder of the platform's core promise, kept small
 * and out of the way on purpose: shown above the header on every screen,
 * not just after login. Also carries the clock, which for the same reason
 * (always visible, not just once logged in) lives here rather than in the
 * dashboard-only nav. A second row, added once logged in, carries a subtle
 * "who's logged in" indicator and Log out - kept in this same dark strip
 * rather than the header, which is now reserved for the centred logo.
 */
.security-strip {
  margin: 0;
  width: 100%;
  padding: 0.32rem 1rem;
  background: var(--color-primary-dark);
  color: #f3f1ea;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.security-strip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.security-strip .header-clock {
  color: #c9c4b8;
}

.security-strip .header-clock-time {
  color: #f3f1ea;
}

.security-strip-account {
  justify-content: flex-end;
  gap: 0.9rem;
  padding-top: 0.2rem;
  border-top: 1px solid rgba(243, 241, 234, 0.12);
}
/* Same [hidden]-vs-class-display specificity fix used elsewhere. */
.security-strip-account[hidden] {
  display: none;
}

.security-strip-account .dash-account-user {
  color: #c9c4b8;
}
.security-strip-account .dash-account-user strong {
  color: #f3f1ea;
  font-weight: 600;
}

.security-strip-account .dash-logout-btn,
.security-strip-account .dash-account-settings-btn {
  border-color: rgba(243, 241, 234, 0.35);
  color: #f3f1ea;
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
}
.security-strip-account .dash-logout-btn:hover,
.security-strip-account .dash-account-settings-btn:hover {
  background: rgba(243, 241, 234, 0.1);
}

/*
 * A "sticky footer" layout: body is a full-height flex column, .page grows
 * to fill the available space (flex: 1) and the site footer sits right
 * below it - visible without scrolling on short screens, pushed down
 * naturally when the dashboard content is taller than the viewport.
 */
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
 * The header now holds nothing but the logo, centred - account info and
 * Log out moved into the black security strip above, so there is no longer
 * anything to balance the logo against on either side.
 */
.brand {
  width: 100%;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--color-primary-dark);
}

/*
 * Below the header: the sidebar (nav) and the main content side by side,
 * each stretching to fill the remaining page height.
 */
.dash-body {
  width: 100%;
  display: flex;
  flex: 1;
  align-items: stretch;
}

/*
 * Logo: icon above wordmark, in a softly-framed neutral panel - close to
 * white but not pure white, so it stands out from the page background
 * rather than blending into it - deliberately a decorative element rather
 * than a functional top-left "home" link, the nav menu owns the left.
 * Sized up a little from the first pass so it reads clearly as the
 * centrepiece of the header now that it sits on its own, centred.
 */
.brand-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 1.5rem;
  background: #fbfaf6;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  flex-shrink: 0;
}

.brand-logo-card .brand-name {
  color: #5c4a37;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/*
 * Left sidebar navigation, replacing the old top menu bar - a deliberate
 * layout change so the app reads distinctly from the Fortuna reference.
 * A fixed-width column, full height, sitting to the left of the content.
 */
.dash-sidebar-nav {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  padding: 1.25rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow-y: auto;
}
/*
 * A class selector setting `display` beats the UA stylesheet's low-
 * specificity `[hidden] { display: none }`, so the hidden attribute alone
 * would not actually hide this once .dash-sidebar-nav applies display:
 * flex. This restates it with enough specificity to win.
 */
.dash-sidebar-nav[hidden] {
  display: none;
}

/*
 * Phone/tablet nav: hamburger toggle, dimmed backdrop, and the sidebar
 * itself becoming an off-canvas slide-in panel instead of a static column -
 * see setMobileNavOpen in app.js. Kept as one breakpoint shared with the
 * list-table collapse below, so both change together: below it there is
 * rarely enough width for the old fixed-width sidebar column plus content,
 * or for a many-column table, at the same time.
 */
.brand {
  position: relative;
}
.nav-menu-toggle {
  display: none;
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-primary-dark);
  cursor: pointer;
}
.nav-menu-toggle svg {
  width: 22px;
  height: 22px;
}
.nav-backdrop {
  display: none;
}
.nav-close-btn {
  display: none;
}

@media (max-width: 900px) {
  body.dashboard-active .nav-menu-toggle {
    display: flex;
  }

  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30, 26, 18, 0.4);
    z-index: 150;
  }
  .nav-backdrop.open {
    display: block;
  }

  /* Same element, same markup as the desktop static column - only its
     positioning changes here, so nothing about the accordion groups, the
     active-page highlight, or icons needs to change for this mode. */
  .dash-sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 82vw;
    z-index: 200;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .dash-sidebar-nav.mobile-open {
    transform: translateX(0);
  }

  .nav-close-btn {
    display: flex;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.4rem;
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--color-text-muted);
    cursor: pointer;
  }
  .nav-close-btn:hover {
    color: var(--color-primary-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-sidebar-nav {
    transition: none;
  }
}

.side-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.side-icon path,
.side-icon circle {
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.side-link:hover {
  background: #eee9db;
}
/*
 * The darker green, not the mid-tone primary - so the hierarchy reads
 * clearly top to bottom: darker for the top-level item, the mid-tone
 * primary for its own group toggle, lighter for the sub-items nested
 * under it (see .side-sublink.active) and the footer that matches them.
 */
.side-link.active {
  background: var(--color-primary-dark);
  color: var(--color-primary-contrast);
}
.side-link.active .side-icon {
  color: var(--color-primary-contrast);
}

.side-caret {
  margin-left: auto;
  font-size: 0.6rem;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.side-group.open .side-caret {
  transform: rotate(180deg);
}

/*
 * Accordion sub-list: collapsed (height 0, clipped) by default, expanded
 * by adding .open to the parent .side-group (see toggleSidebarGroup in
 * app.js) - suits a vertical list better than the old floating dropdown.
 */
.side-subgroup {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.2s ease;
  margin-left: 2.05rem;
}
.side-subgroup > * {
  min-height: 0;
}
.side-subgroup-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* A little breathing room so the first sub-item doesn't sit flush
     against the parent group's own button. */
  padding-top: 0.35rem;
}
.side-group.open .side-subgroup {
  grid-template-rows: 1fr;
}

.side-sublink {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.side-sublink:hover {
  background: #eee9db;
  color: var(--color-text);
}
/*
 * A lighter tint of the primary green, rather than the same solid green as
 * the parent group button - keeps the hierarchy readable (parent vs. child)
 * while still clearly matching the rest of the palette.
 */
.side-sublink.active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.dash-logout-btn,
.dash-account-settings-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
}
.dash-logout-btn:hover,
.dash-account-settings-btn:hover { background: var(--color-bg); }

.header-clock {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.header-clock-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.brand-mark {
  display: inline-block;
  width: 3.7rem;
  height: 3.7rem;
  object-fit: contain;
}

.brand-mark-lg { width: 2.8rem; height: 2.8rem; }

.card-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/*
 * The auth cards want centring, but the dashboard wants the opposite: a
 * full-width area that starts right under the header rather than floating
 * in the middle of the viewport. Toggled by setDashboardChromeVisible in
 * app.js.
 */
body.dashboard-active .card-wrap {
  align-items: stretch;
  padding: 0;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 400px;
}

.card-wide { max-width: 480px; }

h1 {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.subtitle {
  margin: 0 0 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.field { margin-bottom: 1.1rem; }

/* Reports: a small "count summary" table (Clients by Status / Clients by
   Therapy Type) and any report with a totals row (Sessions in a Month) both
   reuse .contacts-table, with a real <tfoot> row for the total - bolded and
   set off with a top border so it doesn't read as just another data row. */
.report-summary-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--color-border);
}

/* The month picker on "Clients in a Month"/"Sessions in a Month" (see
   buildMonthReportPage in app.js) sits in its own toolbar rather than
   stretching full width like a form field normally does. */
.report-month-field {
  margin-bottom: 0;
  max-width: 220px;
}

/* Expandable report rows ("Clients in a Month" / "Sessions in a Month"):
   clicking a row reveals that client's individual session notes for the
   month, each with its own inline Print/Save as PDF buttons. Unlike
   .contacts-detail-row this must work at every screen width, not just the
   mobile collapse breakpoint, so it is not gated behind a media query. */
.report-row-toggle {
  display: inline-block;
  width: 0.9em;
  margin-right: 0.4em;
  transition: transform 0.15s ease;
}

.report-row-toggle::before {
  content: '\25B8';
}

tr.report-row-expanded .report-row-toggle {
  transform: rotate(90deg);
}

.report-detail-row {
  display: none;
}

.report-detail-row:not([hidden]) {
  display: table-row;
}

.report-detail-row td {
  background: var(--color-bg);
  padding: 0.7rem 0.9rem;
}

.report-session-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.report-session-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.report-session-list-date {
  font-size: 0.88rem;
  color: var(--color-text);
  min-width: 160px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--color-text);
}

.field input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 107, 69, 0.15);
}

.field textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-size: 0.9rem;
  font-family: var(--font-mono);
  resize: vertical;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 107, 69, 0.15);
}

.field-hint {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* Marks a field label (or the small legend under a form's subtitle) as
   required, alongside the existing JS validation that already blocks
   submission when one of these is left empty. */
.required-mark {
  color: var(--color-error);
  margin-left: 0.15rem;
}

.required-note {
  margin: -0.7rem 0 1.3rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

/*
 * Screen-switch transition: a brief fade + rise, applied by app.js's
 * showScreen() whenever it swaps which of the login/register/recovery/
 * forgot-password/welcome sections is visible (see SCREEN_ANIM_OUT_MS and
 * SCREEN_ANIM_IN_MS there). Kept subtle and short so it reads as a
 * deliberate, polished hand-off rather than a distraction, and respects
 * prefers-reduced-motion below.
 */
@keyframes screen-fade-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes screen-fade-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.screen-anim-out {
  animation: screen-fade-out 0.15s ease forwards;
}

.screen-anim-in {
  animation: screen-fade-in 0.22s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .screen-anim-out,
  .screen-anim-in {
    animation: none;
  }
}

.btn-primary, .btn-secondary {
  display: inline-block;
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg); }

/*
 * Same [hidden]-vs-display specificity fix as .dash-sidebar-nav[hidden]
 * above: .btn-primary/.btn-secondary set `display: inline-block`, which
 * otherwise wins over the UA stylesheet's `[hidden] { display: none }` and
 * leaves a hidden button visible (e.g. the Edit button on a contact or
 * session note that isn't in view mode, or Save while it is).
 */
.btn-primary[hidden],
.btn-secondary[hidden] {
  display: none;
}

.button-row { display: flex; gap: 0.7rem; }
.button-row > * { flex: 1; }
.button-row + .button-row { margin-top: 0.7rem; }

.switch-link {
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.switch-link a { color: var(--color-primary-dark); font-weight: 600; text-decoration: none; }
.switch-link a:hover { text-decoration: underline; }

.error-message {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.success-message {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.recovery-box {
  background: var(--color-bg);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-align: center;
  margin-bottom: 1.2rem;
}

.recovery-box-label {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.recovery-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  word-break: break-all;
  color: var(--color-primary-dark);
}

.recovery-meta {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.recovery-box-footnote {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: left;
}

.warning-box {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.3rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-warning);
}

.warning-box p { margin: 0 0 0.7rem; }
.warning-box p:last-child { margin-bottom: 0; }

.warning-title {
  font-weight: 700;
  color: var(--color-warning);
}

.instructions-box {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.3rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-text);
}

.instructions-title {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.instructions-list {
  margin: 0;
  padding-left: 1.2rem;
}
.instructions-list li { margin-bottom: 0.4rem; }
.instructions-list li:last-child { margin-bottom: 0; }

.instructions-note {
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 1.3rem;
  font-size: 0.88rem;
}
.checkbox-row input { margin-top: 0.2rem; }

/*
 * Dashboard content area (the screen-welcome section): a full-width click-
 * through template, not a centred auth card. Selecting a menu item swaps
 * the contents of .dash-page in here; see renderDashboardPage in app.js.
 * No page title or breadcrumb is shown here by design - the nav above
 * already indicates where you are, so the space goes to content instead.
 */
.dash-main {
  width: 100%;
  padding: 1.25rem 0;
}

.dash-page {
  width: 100%;
  padding: 0 1.25rem;
}

.dash-page-note {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text);
}
.dash-page-note strong { color: var(--color-primary-dark); }

.dash-home-preview {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 1rem;
}

.dash-home-preview-search {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
}
.dash-home-preview-search-row {
  display: flex;
  gap: 0.6rem;
}

/*
 * Search field group: icon inset into the field itself, a soft ring
 * instead of a hard border, tightened on hover, a focus ring in the brand
 * colour - the same interaction language as the nav pills above.
 */
.dash-home-preview-search-group {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.dash-home-preview-search-icon {
  position: absolute;
  left: 0.85rem;
  width: 1rem;
  height: 1rem;
  fill: var(--color-text-muted);
  pointer-events: none;
}
.dash-home-preview-search input {
  width: 100%;
  height: 42px;
  padding-left: 2.4rem;
  padding-right: 0.7rem;
  border: 0;
  box-shadow: 0 0 0 1.5px var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  outline: none;
  transition: box-shadow 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}
.dash-home-preview-search input::placeholder {
  color: var(--color-text-muted);
}
.dash-home-preview-search input:hover {
  box-shadow: 0 0 0 2.5px var(--color-ring-hover);
}
.dash-home-preview-search input:focus {
  box-shadow: 0 0 0 2.5px var(--color-primary);
}
.dash-home-preview-search button {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.dash-home-preview-search button:hover {
  background: var(--color-primary-dark);
}

.dash-home-preview-empty {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 1.2rem 0;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}

.dash-home-preview-results {
  margin-top: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.home-search-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--color-text);
  background: var(--color-surface);
}
.home-search-result + .home-search-result {
  border-top: 1px solid var(--color-border);
}
.home-search-result strong {
  color: var(--color-primary-dark);
}
.home-search-result span {
  color: var(--color-text-muted);
}

.dash-home-preview-stats {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dash-stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.dash-stat-tile strong {
  display: block;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
}
.dash-stat-tile.placeholder {
  border-style: dashed;
  color: var(--color-text-muted);
  font-style: italic;
}

/*
 * Two-column layout used inside a form for closely-related short fields
 * (e.g. a parent's first/last name, or email/mobile side by side), and a
 * bordered sub-section ("Parent 1", "Parent 2") that groups a set of fields
 * belonging to one person within a larger form.
 */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.field-row .field { margin-bottom: 1.1rem; }

.field-group {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 0.1rem;
  margin-bottom: 1.3rem;
}

.field-group-title {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
}

/*
 * Account settings: logo upload. A fixed-size preview box (transparent
 * background patterned as a light checkerboard, so a logo with a
 * transparent background - the norm, see logo-mark.png - is easy to tell
 * apart from one that accidentally has a solid one) beside Upload/Remove
 * buttons.
 */
.acct-logo-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 0.9rem;
}

.acct-logo-preview {
  /* min- rather than a fixed width/height: this box doubles as a true-size
   * preview of the Logo size slider (see applyPreviewScale in app.js), so it
   * needs to grow with the image rather than clipping it as the slider
   * scales it up towards LOGO_SCALE_PERCENT_MAX. */
  min-width: 96px;
  min-height: 96px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: #fff;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.acct-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.acct-logo-preview-empty {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.3;
}

/* Highlighted while a dragged file is over the preview box (see the
 * dragenter/dragover/drop handlers in app.js) - the dashed border and tint
 * signal it will accept a drop, matching the usual drag-and-drop convention. */
.acct-logo-preview-dragover {
  border: 2px dashed var(--color-primary);
  background-color: var(--color-primary-light);
}

.acct-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}

.acct-logo-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/*
 * "Contacts page order" in Account settings (renderContactsOrderEditor in
 * app.js) - a plain up/down reorder control for the three Contacts page
 * sections, rather than drag-and-drop.
 */
.contacts-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 360px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.contacts-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: var(--color-surface);
}
.contacts-order-item + .contacts-order-item {
  border-top: 1px solid var(--color-border);
}
.contacts-order-label {
  font-size: 0.9rem;
}
.contacts-order-buttons {
  display: flex;
  gap: 0.3rem;
}
.contacts-order-move-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}
.contacts-order-move-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.contacts-order-move-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Only shown once a logo is set (see showPreview/clearPreview in app.js) -
 * scaling an absent logo makes no sense. */
.acct-logo-scale-row {
  margin-top: 0.7rem;
  max-width: 360px;
}
.acct-logo-scale-row label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.acct-logo-scale-row input[type='range'] {
  width: 100%;
}
.acct-logo-scale-row .field-hint {
  margin-top: 0.3rem;
}

.acct-logo-position-row {
  margin-top: 1rem;
  max-width: 420px;
}
.acct-logo-position-row > .field-group-title {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
}
.acct-logo-position-row > .field-hint {
  margin: 0 0 0.5rem;
}
.acct-logo-position-row label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.acct-logo-position-row input[type='range'] {
  width: 100%;
  margin-bottom: 0.6rem;
}

/* A miniature stand-in for a real document header (see
 * .session-note-document-header-with-logo/-logo-band in the "Document view"
 * rules further down), so moving the X/Y sliders shows, in real time,
 * roughly where the chosen spot sits relative to the title text. This
 * mock-up is intentionally simple and does NOT itself reflow to avoid
 * overlap - but the real document does: see avoidHeaderImageTextOverlap in
 * app.js (its on-screen counterpart to resolveHeaderTextLayout in
 * pdfExport.js), which narrows or moves the real title/subtitle/meta text
 * out of the way of wherever the account has placed its logo or badge row,
 * so a spot that looks tight here can never actually overlap on the real
 * document or its PDF. */
.acct-logo-position-preview {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 0.75rem 1rem 0.6rem;
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.acct-logo-position-preview-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 95px;
}
.acct-logo-position-preview-band img {
  position: absolute;
  max-width: 120px;
  max-height: 40px;
  object-fit: contain;
}
.acct-logo-position-preview-title {
  margin: 0 0 0.1rem;
  font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
}
.acct-logo-position-preview-subtitle {
  margin: 0;
  font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/*
 * Contacts page: three add buttons above a single sortable table listing
 * every client/supervisor/supervisee added so far. See buildContactsPage
 * and renderContactsTable in app.js.
 */
.contacts-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.contacts-add-btn {
  width: auto;
}

.contacts-table-wrap {
  margin-top: 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow-x: auto;
}

.contacts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  white-space: nowrap;
}

.contacts-table th,
.contacts-table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.contacts-table thead th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.contacts-table thead th:hover {
  color: var(--color-primary-dark);
}
.contacts-table thead th.sorted {
  color: var(--color-primary-dark);
}
.contacts-table thead th.sorted::after {
  content: '\25B2';
  font-size: 0.6rem;
  margin-left: 0.4rem;
  display: inline-block;
}
.contacts-table thead th.sorted.desc::after {
  content: '\25BC';
}

.contacts-table tbody tr:last-child td {
  border-bottom: none;
}
.contacts-table tbody tr:hover {
  background: var(--color-bg);
}

/*
 * The Contacts page shows Clients/Supervisors/Supervisees as three separate
 * sections (see buildContactsPage/CONTACTS_KIND_SECTIONS in app.js) rather
 * than one shared table with a Type column - each section is its own
 * heading, its own "search anything" box, and its own .contacts-table.
 */
.contacts-kind-section {
  margin-top: 1.6rem;
}
.contacts-kind-section:first-of-type {
  margin-top: 1.1rem;
}
.contacts-kind-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.contacts-kind-heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.contacts-kind-count {
  font-weight: 400;
  color: var(--color-text-muted);
}
.contacts-kind-search-group {
  position: relative;
  display: flex;
  align-items: center;
}
.contacts-kind-search-icon {
  position: absolute;
  left: 0.6rem;
  width: 16px;
  height: 16px;
  fill: var(--color-text-muted);
  pointer-events: none;
}
.contacts-kind-search-input {
  width: 220px;
  max-width: 100%;
  padding: 0.4rem 0.6rem 0.4rem 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 0.86rem;
  color: var(--color-text);
}
.contacts-kind-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/*
 * An email address rendered as a mailto: link inside a contacts-style
 * table (Contacts, and the Supervisor/Supervisee overview pages). Its own
 * click handler stops the click reaching the row, so it opens the mail
 * client instead of the row's own View-details click - see
 * renderContactsTable/renderSupervisionRoleTable in app.js.
 */
.contact-email-link {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
.contact-email-link:hover {
  color: var(--color-accent);
}

/*
 * A row that opens straight to View on click (currently just Client's
 * Session Notes - see renderSessionNotesTable in app.js), as a shortcut
 * alongside its right-click/"..." menu. The "..." button itself stops its
 * click from reaching the row, so it still opens the full menu.
 */
.contacts-table tbody tr.row-clickable {
  cursor: pointer;
}

.contacts-empty {
  margin: 1.4rem 0 0;
  padding: 1.4rem;
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

/*
 * Clients page: a read-only overview of client contacts split into four
 * status sections (Current/Closed/Waiting list/Pending), each its own
 * small sortable table reusing .contacts-table/.contacts-table-wrap/
 * .contacts-empty as-is. See buildClientsPage in app.js.
 */
.clients-status-section {
  margin-top: 1.6rem;
}
.clients-status-section:first-of-type {
  margin-top: 1.1rem;
}

.clients-status-heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.clients-status-count {
  font-weight: 400;
  color: var(--color-text-muted);
}

/*
 * Each status section is its own separate <table>, so left to the browser's
 * default auto column-sizing every section would size its own columns from
 * only its own content - the Name/Client ID/etc. columns would then land at
 * a different x-position in every section depending on what happens to be
 * in it. Fixed, identical column widths keep all four sections' columns
 * lined up with each other. Wrapping (rather than the nowrap the plain
 * Contacts table uses) keeps a long Intervention value from being clipped
 * at a narrower fixed width.
 */
.clients-status-section .contacts-table {
  table-layout: fixed;
  white-space: normal;
}
.clients-status-section .contacts-table th:nth-child(1),
.clients-status-section .contacts-table td:nth-child(1) {
  width: 20%;
}
.clients-status-section .contacts-table th:nth-child(2),
.clients-status-section .contacts-table td:nth-child(2) {
  width: 13%;
}
.clients-status-section .contacts-table th:nth-child(3),
.clients-status-section .contacts-table td:nth-child(3) {
  width: 17%;
}
.clients-status-section .contacts-table th:nth-child(4),
.clients-status-section .contacts-table td:nth-child(4) {
  width: 26%;
}
.clients-status-section .contacts-table th:nth-child(5),
.clients-status-section .contacts-table td:nth-child(5) {
  width: 17%;
}
/* The 6th, unlabelled column holding the "..." row-actions button - see
   the comment above this block: every column needs an explicit width
   under table-layout: fixed, or the table renders wider than its
   container and this column (being last) is clipped off entirely. */
.clients-status-section .contacts-table th:nth-child(6),
.clients-status-section .contacts-table td:nth-child(6) {
  width: 7%;
}

/*
 * Phone/tablet: every list table in the app (".contacts-table", shared by
 * Contacts, Clients, Supervisor/Supervisee, Supervision, Supervision
 * Evaluation Report, Client's Session Notes, Parent Interviews, SDQ - see
 * enhanceResponsiveTable in app.js) collapses down to just its first two
 * (already the identifying) data columns plus the actions cell; the rest
 * move into a per-row detail panel opened by a small toggle placed inside
 * the existing actions cell, right next to the "..." menu button. This is
 * pure CSS column-hiding plus the toggle/detail markup enhanceResponsiveTable
 * adds - no column is actually added or removed, so it can never disturb
 * the nth-child width rules above. Above this breakpoint none of it
 * applies and every table renders exactly as it always has.
 */
.contacts-row-toggle-btn {
  display: none;
}
.contacts-detail-row {
  display: none;
}

@media (max-width: 900px) {
  .contacts-table thead th:nth-child(n + 3):not(:last-child),
  .contacts-table tbody > tr:not(.contacts-detail-row) > td:nth-child(n + 3):not(:last-child) {
    display: none;
  }

  /* The Clients page's fixed percentage widths above assume all six
     columns are visible - with only Name/Client ID/actions left on show,
     let them size naturally instead, same as the plain (non-fixed)
     .contacts-table already does everywhere else. */
  .clients-status-section .contacts-table {
    table-layout: auto;
    white-space: nowrap;
  }

  .contacts-row-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-right: 0.2rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .contacts-row-toggle-btn:hover {
    background: var(--color-bg);
    color: var(--color-primary-dark);
  }
  .contacts-row-toggle-btn::after {
    content: '\25B8'; /* ▸ */
  }
  .contacts-row-toggle-btn[aria-expanded='true'] {
    transform: rotate(90deg);
  }

  .contacts-detail-row:not([hidden]) {
    display: table-row;
  }
  .contacts-detail-row > td {
    background: var(--color-bg);
    padding: 0.7rem 0.9rem 0.9rem;
    white-space: normal;
  }
  .contacts-detail-list {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.9rem;
  }
  .contacts-detail-list dt {
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .contacts-detail-list dd {
    margin: 0;
    font-size: 0.86rem;
    color: var(--color-text);
  }
}

@media (max-width: 480px) {
  .contacts-detail-list {
    grid-template-columns: 1fr;
    gap: 0.1rem 0;
  }
  .contacts-detail-list dd {
    margin: 0 0 0.4rem;
  }
}

.contacts-loading {
  margin: 1.4rem 0 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/*
 * Add-contact modal: a fixed, dimmed backdrop centring the same .card
 * styling used for the auth screens, so a new client/supervisor/supervisee
 * form feels consistent with the rest of the app rather than a bolt-on
 * widget. Scrolls internally on short viewports rather than overflowing.
 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(47, 42, 34, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
  overflow-y: auto;
  z-index: 100;
}
.modal-backdrop[hidden] {
  display: none;
}

.modal-box {
  position: relative;
  max-width: 520px;
}

.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.btn-danger {
  display: inline-block;
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--color-error);
  color: #ffffff;
  transition: opacity 0.15s ease;
}
.btn-danger:hover:not(:disabled) { opacity: 0.88; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/*
 * Actions column at the end of a table row (Contacts, Client's Session
 * Notes): a small "..." button that opens the same context menu a
 * right-click on the row does (see openContextMenu in app.js) -
 * discoverable without needing to know right-click works, for anyone who
 * does not try it.
 */
.row-actions-cell {
  text-align: right;
  white-space: nowrap;
}
.row-actions-btn {
  width: 2rem;
  height: 2rem;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
}
.row-actions-btn:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-primary-dark);
}

/*
 * Row action menu (right-click on a table row, or its "..." button):
 * View details / Edit / Delete, fixed-positioned at the cursor/button by
 * app.js. Reuses the app's card surface/border tokens for a floating menu
 * consistent with the rest of the UI, rather than a plain browser context
 * menu look.
 */
.context-menu {
  position: fixed;
  z-index: 200;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(47, 42, 34, 0.18);
}
.context-menu[hidden] {
  display: none;
}
.context-menu li + li {
  margin-top: 0.15rem;
}
.context-menu button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
.context-menu button:hover {
  background: var(--color-bg);
  color: var(--color-primary-dark);
}
.context-menu button.context-menu-danger {
  color: var(--color-error);
}
.context-menu button.context-menu-danger:hover {
  background: var(--color-error-bg);
}

/*
 * Client's Session Notes: the list page reuses .contacts-toolbar,
 * .contacts-table-wrap, .contacts-table and .contacts-empty as-is (see
 * renderSessionNotesList/renderSessionNotesTable in app.js). What follows is
 * only for the full-page add/edit/view form (renderSessionNoteForm), which
 * replaces the list in place rather than opening in a modal.
 */
.session-note-form {
  max-width: 760px;
}

.session-note-form-title {
  margin: 0 0 0.3rem;
}

.session-note-section-title {
  margin: 1.6rem 0 0.9rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.field-row-3 {
  grid-template-columns: 2fr 1fr 1fr;
}

.field-row-4 {
  grid-template-columns: 1.4fr 0.9fr 0.9fr 1fr;
}

/* SDQ's five subscale score inputs plus the auto-calculated Total
 * difficulties field, all in one row of equal-width columns. */
.field-row-6 {
  grid-template-columns: repeat(6, 1fr);
}

.field-session-minutes {
  max-width: 220px;
}

/*
 * A field that is never typed into directly - its value is worked out
 * automatically from other fields (Session No, worked out from Client and
 * Episode - see renderSessionNoteForm in app.js). The dashed border marks it
 * as computed rather than editable, alongside its `readonly` attribute.
 */
.field input[readonly] {
  color: var(--color-text-muted);
  border-style: dashed;
  cursor: default;
}

/*
 * Running total shown above the activities table: how many of the session's
 * minutes have been allocated so far, and whether that already adds up to
 * the required 100%. Reuses the same success/warning tokens as the rest of
 * the app (see .warning-box above) rather than introducing new colours.
 */
.session-activities-summary {
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 600;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.session-activities-summary-complete {
  background: #eef5f0;
  border-color: var(--color-success);
  color: var(--color-success);
}
.session-activities-summary-incomplete {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.session-activities-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: 0.9rem;
}

.session-activities-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.session-activities-table th,
.session-activities-table td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.session-activities-table thead th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.session-activities-table tbody tr:last-child td {
  border-bottom: none;
}

.session-activity-percent-input {
  width: 5rem;
}
.session-activity-minutes {
  font-weight: 600;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.session-activity-comment-input {
  width: 100%;
  min-width: 160px;
}
.session-activity-percent-input,
.session-activity-comment-input {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.86rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.session-activity-percent-input:focus,
.session-activity-comment-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.session-activity-remove-btn {
  width: 1.7rem;
  height: 1.7rem;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
}
.session-activity-remove-btn:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.session-activities-add-row {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 1.6rem;
}
.session-activities-add-row select {
  flex: 1;
  max-width: 320px;
}
.session-activities-add-row .btn-secondary {
  width: auto;
}

@media (max-width: 900px) {
  .field-row-4 { grid-template-columns: 1fr 1fr; }
  .field-row-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .field-row-3 { grid-template-columns: 1fr; }
  .field-row-4 { grid-template-columns: 1fr; }
  .field-row-6 { grid-template-columns: 1fr 1fr; }
  .session-activities-add-row { flex-wrap: wrap; }
  .session-activities-add-row select { max-width: none; width: 100%; }
}

/*
 * The read-only "View" for a session note (renderSessionNoteDocument in
 * app.js): a print-style document rather than the add/edit form with its
 * fields disabled, laid out to resemble the original paper "Client's
 * Session Notes" form this feature is based on. Its own Print/Save as PDF
 * buttons (see .no-print below, the @media print block, and
 * buildSessionNotePdfBlob in pdfExport.js) let this be printed or saved
 * without the surrounding dashboard chrome.
 *
 * Deliberately plain rather than decorative: a simple, narrow system
 * sans-serif, modest type sizes and tight spacing, so a typical note reads
 * as one clean single-page document rather than spreading across pages.
 * No webfont download either way, so this renders identically offline.
 */
.session-note-document {
  --doc-font: 'Arial Narrow', Arial, Helvetica, sans-serif;
  max-width: 740px;
  margin: 0 auto;
  padding: 1.5rem 1.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--doc-font);
  color: var(--color-text);
  line-height: 1.35;
  font-size: 0.92rem;
}

.session-note-document-header {
  position: relative;
  /* Establishes its own block-formatting context so a top margin
   * avoidHeaderImageTextOverlap (app.js) sets on its first text child
   * (h2, when it needs to push the whole title/subtitle/meta block down
   * below an overlapping logo/badge row) can never collapse through into
   * this element's own box - which would otherwise silently cancel that
   * push and leave the text right back under the image, since this header
   * itself has no top padding/border of its own to stop that collapse.
   * flow-root has no other visible effect versus the plain block layout
   * this already used (it doesn't clip overflow the way overflow:hidden
   * would, so a logo/badge row taller than the header's own text still
   * shows in full, exactly as before), and doesn't move the positioning
   * origin the absolutely-positioned logo/badge row resolves its own
   * left/top percentages against, since that was already this element's
   * padding box via position:relative above. */
  display: flow-root;
  margin-bottom: 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
/* Only reserved when a logo is actually shown (see documentLogoHtml in
 * app.js), so an account with no logo set keeps the header's full height.
 * A minimum only - the header still grows to fit its title/subtitle/meta
 * text, which in every document type is already taller than the logo band
 * below. */
.session-note-document-header-with-logo {
  min-height: 95px;
}
/* A fixed-height strip pinned across the top of the header, independent of
 * how tall the header's own text content is - this is what the logo's own
 * left/top percentages (set inline by documentLogoHtml() in app.js)
 * resolve against, so a given X/Y position looks the same regardless of
 * document type. Matches HEADER_LOGO_BAND_HEIGHT_PT in pdfExport.js, which
 * reserves the same fixed band for the PDF. */
.session-note-document-logo-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 95px;
}
/* Matches the PDF's own header logo placement (see LOGO_MAX_WIDTH_PT /
 * LOGO_MAX_HEIGHT_PT, HEADER_LOGO_BAND_HEIGHT_PT and drawHeaderLogo in
 * pdfExport.js) so the on-screen View document looks the same as what
 * Print/Save as PDF produce. `left`/`top` are set inline per-account by
 * documentLogoHtml() in app.js from the stored X/Y position percentages;
 * the paired `translate(-X%, -Y%)` it also sets keeps the image fully
 * inside this band at every position, from flush top-left (0, 0) to flush
 * bottom-right (100, 100), regardless of the image's own rendered size. */
.session-note-document-logo {
  position: absolute;
  max-width: 120px;
  max-height: 40px;
  object-fit: contain;
}
.session-note-document-header h2 {
  margin: 0 0 0.1rem;
  font-family: var(--doc-font);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.session-note-document-subtitle {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.session-note-document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.5rem;
  margin-bottom: 0.7rem;
  font-size: 0.86rem;
}
.session-note-document-meta span {
  white-space: nowrap;
}
/* A Supervisor/Supervisee identity line (see formatIdentityLine in app.js)
 * can now run to a full name plus status plus one or more organisation
 * memberships - far longer than the short Type/Date/Length values the
 * plain nowrap rule above was written for - so it wraps onto multiple
 * lines within the header instead of overflowing the document's own
 * width. Used on Supervision and Supervision Evaluation Report documents
 * only (the two document types with identities that can carry
 * organisations); every other span here (short, fixed-format values) keeps
 * the single-line nowrap behaviour above. */
.session-note-document-meta span.session-note-document-meta-identity {
  white-space: normal;
  /* A flex item's default min-width is `auto` (i.e. its content's own
   * unbroken width), which overrides white-space: normal and forces the
   * browser to size the item to fit the whole line rather than wrap it -
   * this overrides that so the long text above actually wraps within the
   * document's own width instead of overflowing it. */
  min-width: 0;
  flex: 1 1 100%;
}
.session-note-document-meta strong {
  display: block;
  margin-bottom: 0.05rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.session-note-document-concerns {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  text-align: justify;
}

.session-note-document-ptdm {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.35rem;
  font-size: 0.86rem;
}
/* Same grey chip treatment as the reflective field labels below (matching
   the table's own header-row shading) - bold text alone, at this small
   uppercase letter-spaced size, was reported as hard to tell apart from
   the surrounding text; a background band settles it visually rather than
   relying on weight alone. inline-block keeps the band hugging just the
   label text, the same reasoning as the field labels. */
.session-note-document-ptdm strong {
  display: inline-block;
  margin-bottom: 0.05rem;
  padding: 0.1rem 0.4rem;
  background: #e6e6e6;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.session-note-document h3 {
  margin: 0 0 0.3rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--doc-font);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.session-note-document-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 0.4rem;
  font-size: 0.86rem;
}
/* Fixed column proportions (rather than auto-sizing to content) so Percent
   and Minutes stay narrow - sized for values like "100%"/"120 min", not
   stretched to match Activity - and Comment, the column that actually needs
   the room, always gets what is left over. */
.session-note-document-table th:nth-child(1),
.session-note-document-table td:nth-child(1) {
  width: 26%;
}
.session-note-document-table th:nth-child(2),
.session-note-document-table td:nth-child(2) {
  width: 9%;
}
.session-note-document-table th:nth-child(3),
.session-note-document-table td:nth-child(3) {
  width: 13%;
}
.session-note-document-table th,
.session-note-document-table td {
  padding: 0.3rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: break-word;
}
.session-note-document-table th:nth-child(2),
.session-note-document-table td:nth-child(2),
.session-note-document-table th:nth-child(3),
.session-note-document-table td:nth-child(3) {
  text-align: right;
}
/* Comment, like the document's other free-text fields, is justified rather
   than left-ragged - a browser never stretches a genuinely one-line cell,
   matching the same "never stretch a short line" rule used elsewhere. */
.session-note-document-table td:nth-child(4) {
  text-align: justify;
}
.session-note-document-table thead th {
  background: #e6e6e6;
  border-bottom: 1px solid var(--color-text-muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
/* A light, purely neutral grey (not the app's cream/green palette) banding
   every other data row - the same reason a spreadsheet bands its rows,
   here especially useful once a comment wraps across several lines. */
.session-note-document-table tbody tr:nth-child(even) {
  background: #f2f2f2;
}

.session-note-document-empty {
  color: var(--color-text-muted);
  font-size: 0.86rem;
}

.session-note-document-total {
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: right;
}

.session-note-document-field {
  margin-bottom: 0.6rem;
}
/* Shaded the same neutral grey as the activities table's header row, so
   these four labels read as clearly as the table's own column headings -
   a background band is unambiguous even where bold text alone (at this
   small, uppercase, letter-spaced size) can be hard to tell apart from the
   surrounding text. inline-block keeps the band hugging just the label
   text (like a small tag) rather than stretching across the full content
   width - a lone short word in a full-width grey bar looked odd, unlike
   the table's own header row where the band is genuinely justified by
   spanning several column headings. */
.session-note-document-field h4 {
  display: inline-block;
  margin: 0 0 0.15rem;
  padding: 0.15rem 0.4rem;
  background: #e6e6e6;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
}
.session-note-document-field p {
  margin: 0;
  font-size: 0.86rem;
  white-space: pre-wrap;
  text-align: justify;
}
.session-note-document-field-empty {
  text-align: left;
  color: var(--color-text-muted, #767676);
}

/* The CPD Course View's uploaded certificate (renderCpdCourseDocument in
   app.js) - shown here at up to roughly half a page tall, matching the same
   "half a page" ceiling buildCpdCoursePdfBlob applies in the generated PDF
   (see CPD_CERTIFICATE_MAX_HEIGHT_PT in pdfExport.js), so the on-screen
   preview and the printed/PDF document never disagree on scale. Only shown
   for a certificate uploaded as an image - a PDF certificate has no
   thumbnail here, just its filename and an "Open certificate" button. */
.cpd-course-document-certificate {
  display: block;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-top: 0.3rem;
}

/*
 * The read-only "View" for a parent interview (renderParentInterviewDocument
 * in app.js) reuses .session-note-document for its overall page look (font,
 * width, header, meta line) but layers its own section/field/table classes
 * on top, since an ~11-section, ~50-field form needs its own spacing and
 * table rules rather than the 4-column activities table Session Notes uses.
 */
.parent-interview-document-section {
  margin-bottom: 1.1rem;
}
.parent-interview-document-section h3 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--doc-font);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.parent-interview-document-field {
  margin-bottom: 0.6rem;
}
/* Plain bold labels, not the grey "chip" treatment used for Session Notes'
   four short reflective-field captions - applied to dozens of full-sentence
   questions here, a background band on every one would look heavy, and
   plain bold text also matches the original paper form's own style, which
   reserves shading for table headers only (see .parent-interview-document-
   table thead th below). */
.parent-interview-document-field h4 {
  margin: 0 0 0.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
}
.parent-interview-document-field .field-hint {
  margin: 0 0 0.15rem;
}
.parent-interview-document-field p {
  margin: 0;
  font-size: 0.86rem;
  white-space: pre-wrap;
  text-align: justify;
}

.parent-interview-document-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  margin-bottom: 0.2rem;
  font-size: 0.86rem;
}
.parent-interview-document-table th,
.parent-interview-document-table td {
  padding: 0.3rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: break-word;
}
.parent-interview-document-table thead th {
  background: #e6e6e6;
  border-bottom: 1px solid var(--color-text-muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.parent-interview-document-table tbody tr:nth-child(even) {
  background: #f2f2f2;
}

/*
 * Radio/checkbox option groups used throughout the Parent Interview add/edit
 * form (see parentInterviewFieldHtml in app.js) - a plain stacked list of
 * labelled inputs, consistent with the rest of the form's fields rather than
 * a button-like or card-like treatment, since several of these groups run to
 * six or more options.
 *
 * Each option is itself a <label> (so clicking the option text toggles the
 * input) sitting inside a .field, and each input is a plain <input> inside
 * that same .field - so without the extra ".field" in every selector below,
 * the earlier, more general ".field label { display: block }" and ".field
 * input { width: 100% }" rules (each already one class + one type = the same
 * specificity as a lone class) would win by simply appearing later in this
 * file's normal cascade, leaving every checkbox stretched to the full row
 * width and every option label forced onto its own block. Prefixing with
 * ".field" here raises the specificity above those rules so this styling
 * reliably wins regardless of source order.
 */
.field .checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.field .checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
}
.field .checkbox-option input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

/* A single row of options (e.g. Client's Session Notes' "Session type")
 * rather than checkbox-group's default stacked list - wraps onto a second
 * row itself once the options no longer fit across the available width, so
 * no separate narrow-viewport override is needed. */
.field .checkbox-group-inline {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
}

/* End of Therapy Reports (see the "End of Therapy Reports" section in
 * app.js) - form/editor/document layout on top of the generic
 * .session-note-form/.session-note-document/.session-activities-table
 * styling above; only the bits those don't already cover. */
.eot-outcome-index {
  width: 1.8rem;
  text-align: right;
  vertical-align: top;
  padding-top: 0.75rem;
  color: var(--color-text-muted);
}
.eot-outcomes-table .eot-outcome-description,
.eot-outcomes-table .eot-outcome-review {
  min-width: 200px;
}
.eot-sdq-respondent {
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed var(--color-border);
}
.eot-sdq-respondent:last-child {
  border-bottom: none;
}
.eot-sdq-table-wrap {
  overflow-x: auto;
}
/* Total Difficulties is never typed in directly - always the sum of the
 * four subscales above it, kept live by app.js's wireSdqTotals - so it
 * gets the same "computed, not editable" dashed-border treatment as the
 * Session No field elsewhere in this file (.field input[readonly]), which
 * does not reach into a plain table cell like this one. */
.eot-sdq-table-wrap input[readonly] {
  color: var(--color-text-muted);
  border-style: dashed;
  cursor: default;
  background: var(--color-bg);
}
/* Also add a repeatable-row layout for the "Parent/guardian meetings -
 * dates" list (see eotMeetingDateRowHtml in app.js) - one date input per
 * meeting rather than one free-text field, same idea as the outcomes table
 * above but simple enough not to need a full table. */
.eot-repeatable-date-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.eot-repeatable-date-row .eot-meeting-date-input {
  flex: 0 0 auto;
}
.eot-report-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--doc-font, inherit);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-surface);
  resize: vertical;
}
.eot-report-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.eot-report-body p {
  margin: 0 0 0.7rem;
}
.eot-report-body h3 {
  margin-top: 1.1rem;
}
.eot-report-body h3:first-child {
  margin-top: 0;
}

/*
 * A slim, unobtrusive footer naming the software vendor - always at the
 * bottom of the page (see the sticky-footer setup on body/.page above).
 * Background matches the lighter green tint used for the active sidebar
 * sub-items, tying it back to the rest of the palette rather than sitting
 * in plain neutral grey/white; text switches to the dark green used
 * elsewhere against that same tint, for the same contrast pairing.
 */
.site-footer {
  width: 100%;
  flex-shrink: 0;
  text-align: center;
  padding: 0.8rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #000000;
  background: var(--color-primary-light);
}

@media (max-width: 640px) {
  .dash-home-preview { grid-template-columns: 1fr; }
  .dash-sidebar-nav { width: 200px; }
  .brand-logo-card .brand-name { display: none; }
  .security-strip-row { flex-wrap: wrap; row-gap: 0.2rem; }
}

/*
 * Signature capture (Supervision Evaluation Report): "Upload image" and
 * "Draw signature" as two switchable panels sharing one preview box (reuses
 * .acct-logo-preview/.acct-logo-preview-empty from Account settings above -
 * a signature is stored and previewed exactly like a logo, so it gets the
 * same chequered transparent-background box).
 */
.signature-tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.signature-panel {
  margin-bottom: 0.7rem;
}

.signature-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 160px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

/* A fixed-height strip pinned across the top of the header, independent of
 * how tall the header's own text content is - exactly like
 * .session-note-document-logo-band above, but for the accreditation badge
 * row (see below) instead of the account's own logo. This is what the
 * row's own left/top percentages (set inline by accreditationBadgesHtml()
 * in app.js) resolve against, so a given X/Y position looks the same
 * regardless of document type. Matches HEADER_LOGO_BAND_HEIGHT_PT in
 * pdfExport.js, which reserves the same fixed band for the PDF. */
.session-note-document-badge-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 95px;
}
/* Accreditation badge row on a Supervision / Supervision Evaluation
 * Report's header (see renderSupervisionDocument/
 * renderSupervisionEvaluationDocument in app.js) - one small logo per
 * recognised organisation membership found on the Supervisor and/or
 * Supervisee identity (see collectAccreditationOrganisations in app.js).
 * These two document types show no account logo at all - this badge row is
 * the only image in their header, and sits in the account logo's usual
 * band instead of beside it, unlike every other document type here.
 *
 * Positioned the same way the account's own logo is (see
 * .session-note-document-logo below and drawAccreditationBadges in
 * pdfExport.js): `left`/`top` are set inline per-account by
 * accreditationBadgesHtml() in app.js from the stored X/Y position
 * percentages (defaulting to the row's original flush top-right spot), and
 * the paired `translate(-X%, -Y%)` it also sets keeps the whole row fully
 * inside the band at every position, treating the row's own rendered
 * width/height as one unit the same way a single logo image would be -
 * every badge inside it moves together. Also wraps onto a second line,
 * rather than overflowing, if an account ever holds enough memberships to
 * need it. Each badge's own size is set inline (see
 * .supervision-accreditation-badge below), scaled by the "Accreditation
 * badge size" slider in Account settings. */
.supervision-accreditation-badges {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.supervision-accreditation-badge {
  object-fit: contain;
}
/* Account settings' own live preview (see
 * refreshAccreditationPreview/applyAccreditationPreviewStyle in app.js)
 * shows this in place of a real badge when the account has not added any
 * organisation membership yet, purely so the position sliders still have
 * something visible to move - sized exactly like a real badge (see
 * applyAccreditationPreviewStyle), never shown in an actual document. */
.acct-accred-preview-placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/* The Supervisor's captured signature (upload or freehand drawing - see
 * renderSignatureField) shown inline in the document body, matching the
 * PDF's own SIGNATURE_MAX_WIDTH_PT/HEIGHT_PT box in pdfExport.js. */
.supervision-eval-signature-preview {
  display: block;
  max-width: 220px;
  max-height: 75px;
  object-fit: contain;
}

/*
 * Printing the Recovery Key: hide everything else on the page and lay the
 * recovery box out as a clean, standalone printable slip.
 */
@media print {
  .brand,
  .security-strip,
  .site-footer,
  .dash-sidebar-nav,
  .no-print {
    display: none !important;
  }
  body, .page, .card-wrap {
    background: #fff;
    display: block;
  }
  .card {
    box-shadow: none;
    border: none;
    max-width: none;
    padding: 0;
  }
  .recovery-box {
    border: 2px solid #000;
  }
  .warning-box {
    background: #fff;
    border: 1px solid #000;
    color: #000;
  }
  .warning-title {
    color: #000;
  }
  .instructions-box {
    background: #fff;
    border: 1px solid #000;
    color: #000;
  }
  .instructions-title {
    color: #000;
  }
  /*
   * Client's Session Notes View, printed (see .session-note-document above
   * and the Print button in renderSessionNoteDocument, app.js): the on-screen
   * card border is dropped since the physical page is already the sheet of
   * paper. A tight page margin keeps a typical note on a single sheet. Note
   * the browser's own print dialog may still add its own page header/footer
   * (URL, date, page number) - that is a browser setting outside this page's
   * control, which is why "Save as PDF" (buildSessionNotePdfBlob in
   * pdfExport.js) exists as a separate, clean alternative to printing.
   */
  @page {
    margin: 1.1cm;
  }
  .session-note-document {
    max-width: none;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }
}