/* ================================================================
   STYLES.CSS, Nurse Crystal's Dashboard
   Real brand tokens: URW Classico Bold for headers, Geist for body,
   ivory and charcoal palette, blush for callouts and emphasis only.
   ================================================================ */

@font-face {
  font-family: 'URW Classico';
  src: url('../assets/fonts/URWClassico-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'URW Classico';
  src: url('../assets/fonts/URWClassico-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

:root {
  --ink: #343333;
  --ink-soft: #8A8078;
  --line: #E7D6CA;
  --blush: #E3C7B8;
  --ivory: #F6E9DF;
  --paper: #FFFFFF;
  --sidebar-bg: #FBF6F1;
  --gold: #B8A978;
  --font-display: 'URW Classico', Georgia, serif;
  --font-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
}
::selection { background: var(--blush); color: var(--ink); }

/* Branded scrollbars for the floating panels */
.app-sidebar, .page-body, .lt-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--blush) transparent;
}
.app-sidebar::-webkit-scrollbar, .page-body::-webkit-scrollbar, .lt-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.app-sidebar::-webkit-scrollbar-track, .page-body::-webkit-scrollbar-track, .lt-scroll::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb, .page-body::-webkit-scrollbar-thumb, .lt-scroll::-webkit-scrollbar-thumb { background: var(--blush); border-radius: 999px; }
.app-sidebar::-webkit-scrollbar-thumb:hover, .page-body::-webkit-scrollbar-thumb:hover, .lt-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

/* Consistent, calm transitions on anything interactive */
button, .nav-item, .bento-card, .staff-card, .calendar-card, .manual-cat, .checklist-card,
.entity-row, .entity-list, .lt-table tbody tr, input, .app-search, .cal-day, .clinic-switcher button,
.checklist-stage-toggle button, .share-btn, .quick-icon-btn, .sidebar-toggle-btn, .checklist-print-btn {
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

/* Branded focus ring for keyboard users, replacing invisible or default outlines */
button:focus-visible, .nav-item:focus-visible, input:focus-visible, .entity-row:focus-visible,
.staff-card:focus-visible, .manual-item-row:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- Shell ---------- */
.app-shell {
  display: flex;
  height: 100vh;
  background: transparent;
  padding: 16px;
  gap: 16px;
  box-sizing: border-box;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
  width: 252px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-radius: 20px;
  box-shadow: 0 2px 14px rgba(52,51,51,0.08);
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  overflow-y: auto;
  height: 100%;
  transition: width 0.18s ease, padding 0.18s ease;
}
.sidebar-brand { padding: 4px 8px 16px; border-bottom: 1px dashed var(--line); margin-bottom: 14px; }
.sidebar-brand img { height: 30px; width: auto; display: block; }
.sidebar-brand .brand-sub { font-size: 10px; color: var(--ink-soft); letter-spacing: 0.08em; margin-top: 4px; text-transform: uppercase; }

.sidebar-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: none; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; color: var(--ink); margin-bottom: 14px; padding: 0; flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: var(--ivory); }
.sidebar-toggle-btn svg { width: 15px; height: 15px; }

.nav-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft); margin: 16px 8px 6px;
}
.nav-group-label:first-of-type { margin-top: 0; }
.nav-subgroup-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); margin: 10px 8px 3px; opacity: 0.7;
}
.nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink); padding: 8px 9px; border-radius: 8px; cursor: pointer; margin-bottom: 1px;
}
.nav-item:hover { background: var(--ivory); }
.nav-item.active { background: var(--ink); color: var(--paper); box-shadow: inset 3px 0 0 var(--blush); }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; }
.nav-icon svg { width: 100%; height: 100%; }
.nav-label { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer { margin-top: auto; padding-top: 14px; font-size: 10px; color: var(--ink-soft); line-height: 1.5; }

.app-shell.sidebar-collapsed .app-sidebar { width: 62px; padding: 20px 10px; }
.app-shell.sidebar-collapsed .sidebar-brand img { height: 22px; }
.app-shell.sidebar-collapsed .sidebar-brand .brand-sub,
.app-shell.sidebar-collapsed .nav-group-label,
.app-shell.sidebar-collapsed .nav-subgroup-label,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .sidebar-footer { display: none; }
.app-shell.sidebar-collapsed .nav-item { justify-content: center; padding: 9px; }
.app-shell.sidebar-collapsed .sidebar-toggle-btn { align-self: center; }

/* ---------- Main / topbar ---------- */
.app-main { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; gap: 16px; overflow: hidden; }
.app-topbar {
  padding: 18px 32px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 2px 14px rgba(52,51,51,0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.app-topbar h1 { font-family: var(--font-display); font-weight: 700; font-size: 23px; margin: 0; letter-spacing: -0.01em; }
.clinic-switcher { display: flex; gap: 6px; }
.clinic-switcher button {
  font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
}
.clinic-switcher button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.search-wrap { position: relative; }
.app-search {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-family: inherit; font-size: 12.5px;
  background: var(--sidebar-bg); width: 190px;
}
.app-search:focus { outline: none; border-color: var(--ink); }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; width: 260px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(52,51,51,0.14);
  overflow: hidden; z-index: 50;
}
.search-result {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: none; background: none; padding: 9px 14px; font-family: inherit; font-size: 12.5px; color: var(--ink);
  cursor: pointer; text-align: left; border-bottom: 1px solid var(--line);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--sidebar-bg); }
.search-result-title { font-weight: 600; }
.search-result-section { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.quick-icons { display: flex; gap: 3px; border-left: 1px dashed var(--line); padding-left: 14px; }
.quick-icon-btn {
  background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 6px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.quick-icon-btn:hover { background: var(--ivory); color: var(--ink); }
.quick-icon-btn svg { width: 17px; height: 17px; }
.crystal-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: var(--font-display);
  flex-shrink: 0; overflow: hidden;
}
.crystal-avatar img { width: 100%; height: 100%; object-fit: cover; }

.page-body {
  flex-grow: 1;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 2px 14px rgba(52,51,51,0.08);
  padding: 32px 36px 48px;
}

/* ---------- Overview: greeting + bento ---------- */
.greeting { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 32px; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em; }
.greeting-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 24px; }

.ask-box { max-width: 640px; margin: 0 0 24px; }
.ask-row { display: flex; gap: 8px; }
.ask-row input {
  flex-grow: 1; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px;
  font-family: inherit; font-size: 13.5px; background: var(--paper);
}
.ask-row input:focus { outline: none; border-color: var(--ink); }
.ask-row button {
  background: var(--ink); color: var(--paper); border: none; border-radius: 10px;
  padding: 0 20px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ask-row button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52,51,51,0.18); }
.ask-hint { font-size: 11px; color: var(--ink-soft); margin-top: 6px; }

.stat-pill-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-pill { background: var(--ivory); border-radius: 999px; padding: 6px 14px; font-size: 12px; box-shadow: 0 1px 4px rgba(52,51,51,0.06); }
.stat-pill.emphasis { background: var(--blush); color: var(--ink); font-weight: 600; }

.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
.bento-card { border-radius: 20px; padding: 22px 24px; box-shadow: 0 2px 12px rgba(52,51,51,0.07); }
.bento-card.paper { background: var(--paper); }
.bento-card.ink { background: var(--ink); color: var(--paper); }
.bento-card.blush { background: var(--blush); }
.bento-card.span2 { grid-column: span 2; }
.bento-card.span3 { grid-column: span 3; }
.bento-card.paper:hover, .bento-card.blush:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(52,51,51,0.1); }
.bento-card.ink:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(52,51,51,0.2); }

/* ---------- Overview mosaic (CSS-only re-layout, markup and JS untouched) ----------
   Both .bento-grid rows collapse into one grid so the calendar can anchor as a tall
   block on the left, with stock watch and the suppliers chart stacked beside it. */
#overviewNormal { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 18px; }
#overviewNormal .stat-pill-row { grid-column: 1 / -1; margin-bottom: 0; }
#overviewNormal .bento-grid { display: contents; }
#overviewNormal .bento-grid { margin-bottom: 0; }
#overviewNormal .bento-card.span2 { grid-row: span 2; }
#overviewNormal .bento-card.span2 .calendar-card { height: 100%; display: flex; flex-direction: column; }
#overviewNormal .bento-card.span2 .cal-day-detail { margin-top: auto; }
#overviewNormal .bento-card.blush { grid-column: span 2; }
.bento-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.bento-card.ink .bento-title { color: var(--paper); }
.bento-sub { font-size: 11px; color: var(--ink-soft); margin-bottom: 12px; }
.bento-card.ink .bento-sub { color: #C7BCAE; }
.bento-big-num { font-size: 32px; font-weight: 700; font-family: var(--font-display); }

.dashed-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.dashed-row:last-child { border-bottom: none; }
.dashed-row .muted { color: var(--ink-soft); }
.bento-card.blush .dashed-row { border-bottom-color: rgba(52,51,51,0.25); }

/* ---------- Calendar month view ---------- */
.calendar-card { background: var(--paper); border-radius: 20px; padding: 22px 24px; box-shadow: 0 2px 12px rgba(52,51,51,0.07); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar-head .cal-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.calendar-nav { display: flex; gap: 4px; align-items: center; }
.calendar-nav button { background: none; border: 1px solid var(--line); border-radius: 8px; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.calendar-nav button:hover { background: var(--ivory); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); text-align: center; padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11.5px; cursor: pointer; border: 1px solid transparent; gap: 2px; color: var(--ink);
}
.cal-day:hover { background: var(--ivory); }
.cal-day.empty { cursor: default; }
.cal-day.today { border-color: var(--ink); font-weight: 700; }
.cal-day.selected { background: var(--ink); color: var(--paper); }
.cal-day .dot-row { display: flex; gap: 2px; }
.cal-day .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--blush); }
.cal-day.selected .dot { background: var(--paper); }
.cal-day-detail { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }

/* ---------- Entity list + profile ---------- */
.entity-layout { max-width: 100%; }
.entity-stat-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.entity-stat { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; }
.entity-stat.emphasis { background: var(--blush); border-color: var(--blush); }
.entity-stat-num { font-size: 19px; font-weight: 700; font-family: var(--font-display); }
.entity-stat-label { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.entity-search-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.entity-search-row .count { font-size: 12px; color: var(--ink-soft); }
.entity-search-row input { flex: 1; max-width: 280px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-family: inherit; font-size: 12.5px; background: var(--sidebar-bg); }
.entity-search-row input:focus { outline: none; border-color: var(--ink); }
.entity-list { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.entity-row {
  width: 100%; text-align: left; background: none; border: none; border-bottom: 1px dashed var(--line);
  padding: 14px 18px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-family: inherit;
}
.entity-row:last-child { border-bottom: none; }
.entity-row:hover { background: var(--sidebar-bg); padding-left: 22px; }
.entity-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--blush); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0;
}
.entity-row-title { flex: 1; font-size: 13px; color: var(--ink); }
.entity-row-meta { font-size: 11px; color: var(--ink-soft); }
.entity-row .chev { color: var(--ink-soft); }

.entity-profile-back { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 12px; background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 14px; font-family: inherit; }
.entity-profile-back svg { width: 14px; height: 14px; }
.entity-profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.entity-profile-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; }
.entity-profile-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.entity-profile-meta { font-size: 12px; color: var(--ink-soft); }
.linked-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 6px; }
.linked-unavailable { background: var(--sidebar-bg); border-radius: 12px; padding: 12px 16px; color: var(--ink-soft); font-size: 12px; }

/* ---------- Assistants ---------- */
.assistant-cards { display: flex; gap: 12px; margin-bottom: 20px; }
.assistant-card { flex: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.assistant-card .name { font-weight: 600; font-size: 13.5px; }
.assistant-card .role { font-size: 11px; color: var(--ink-soft); }

/* ---------- Entity cards (Staff, Suppliers, etc, same look as Assistants) ---------- */
.staff-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.staff-card {
  text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 18px; cursor: pointer; font-family: inherit; box-shadow: 0 1px 2px rgba(52,51,51,0.04);
}
.staff-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(52,51,51,0.08); }
.staff-card .name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.staff-card .role { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- Manual (native Clinical Protocol and Policy Manual) ---------- */
.manual-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.manual-cat { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(52,51,51,0.04); }
.manual-cat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(52,51,51,0.08); }
.manual-cat-title { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 14.5px; margin-bottom: 6px; }
.manual-item-row {
  display: block; width: 100%; text-align: left; background: none; border: none; font-family: inherit;
  font-size: 12.5px; color: var(--ink); padding: 6px 0; border-bottom: 1px dashed var(--line); cursor: pointer;
}
.manual-item-row:last-child { border-bottom: none; }
.manual-item-row:hover { color: var(--ink-soft); }

.manual-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.manual-article-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-bottom: 18px; max-width: 720px; }
.manual-article-body { max-width: 720px; font-size: 13.5px; line-height: 1.7; }
.manual-article-body h1, .manual-article-body h2, .manual-article-body h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 24px 0 10px;
}
.manual-article-body h1.unnumbered { font-size: 17px; }
.manual-article-body h2 { font-size: 15px; }
.manual-article-body p { margin: 0 0 12px; }
.manual-article-body ul, .manual-article-body ol { padding-left: 20px; margin: 0 0 12px; }
.manual-article-body li { margin-bottom: 4px; }
.manual-article-body .dash-list { list-style: none; padding-left: 0; }
.manual-article-body .dash-list li::before { content: "\2013\00A0\00A0"; color: var(--ink-soft); }
.manual-article-body .check-item { list-style: none; margin-bottom: 6px; }
.manual-article-body .check-item label { display: flex; align-items: flex-start; gap: 8px; }
.manual-article-body .check-item input[type=checkbox] { margin-top: 3px; accent-color: var(--ink); }
.manual-article-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 12.5px; }
.manual-article-body th, .manual-article-body td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.manual-article-body thead th, .manual-article-body tr.header th { background: var(--sidebar-bg); font-weight: 700; }
.manual-article-body tr.odd { background: var(--ivory); }
.manual-article-body img { max-width: 100%; border-radius: 10px; margin: 10px 0; }
.manual-article-body a { color: var(--ink); }
.manual-article-body .callout {
  display: flex; gap: 12px; background: var(--blush); border-radius: 12px; padding: 12px 16px; margin: 16px 0;
}
.manual-article-body .callout-icon {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.manual-article-body .callout-content { font-size: 12.5px; }
.manual-article-body .callout-content p { margin: 0; }

.manual-prevnext { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--line); max-width: 720px; }
.manual-nav-btn {
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; padding: 0; max-width: 45%;
}
.manual-nav-btn.right { text-align: right; margin-left: auto; }
.manual-nav-btn .pn-label { display: block; font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.manual-nav-btn .pn-title { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }

/* ---------- Checklists (native Reception and Onboarding) ---------- */
.checklist-print-btn {
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.checklist-print-btn:hover { background: var(--sidebar-bg); transform: translateY(-1px); }
.checklist-stage-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.checklist-stage-toggle button {
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
}
.checklist-stage-toggle button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.checklist-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 700px; margin-bottom: 20px; }
.checklist-meta label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.checklist-meta input { width: 100%; border: none; border-bottom: 1px dashed var(--line); background: transparent; font-family: inherit; font-size: 13px; padding: 4px 2px 7px; color: var(--ink); }
.checklist-meta input:focus { outline: none; border-bottom-color: var(--ink); }
.checklist-sections { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.checklist-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; box-shadow: 0 1px 2px rgba(52,51,51,0.04); }
.checklist-card-title { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 15px; margin-bottom: 10px; }
.checklist-item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.checklist-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.checklist-item input { margin-top: 2px; accent-color: var(--ink); }
.mini-input { width: 100%; border: none; border-bottom: 1px dashed var(--line); background: transparent; font-family: inherit; font-size: 12px; padding: 3px 2px; color: var(--ink); }
.mini-input:focus { outline: none; border-bottom-color: var(--ink); }
.sig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.sig-block { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; }
.sig-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sig-block-head label { font-size: 11px; font-weight: 600; }
.sig-block-head button { background: none; border: none; font-size: 10.5px; color: var(--ink-soft); cursor: pointer; text-decoration: underline; }
.sig-pad { width: 100%; height: 110px; background: var(--sidebar-bg); border-radius: 8px; touch-action: none; cursor: crosshair; }

/* ---------- Line-item builder (used by the Invoice, reusable for future tools) ---------- */
.li-grid-order {
  display: grid;
  grid-template-columns: 2.6fr 0.8fr 1fr 1fr 1fr 34px;
  gap: 10px;
  align-items: center;
}
.li-header {
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px 10px 0 0;
  padding: 10px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.li-rows-box { border: 1px solid var(--line); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; }
.li-row { padding: 10px 14px; border-bottom: 1px dashed var(--line); background: var(--paper); }
.li-row:last-child { border-bottom: none; }
.li-row .amount-display { font-weight: 700; text-align: right; font-size: 13px; }
.li-row .box-field {
  width: 100%; border: none; border-radius: 6px; background: var(--sidebar-bg);
  font-family: inherit; font-size: 12.5px; color: var(--ink); padding: 8px 10px;
}
.li-row input[type=number].box-field { text-align: right; }
.li-row .box-field:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.remove-btn {
  background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 18px; line-height: 1;
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.remove-btn:hover { background: var(--sidebar-bg); color: var(--ink); }
.add-line-btn {
  display: inline-block; margin-top: 12px; background: none; border: none; border-bottom: 1px dashed var(--ink);
  color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 0;
}
.totals-block { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.totals-row { display: flex; justify-content: space-between; width: 260px; font-size: 13px; }
.totals-row.grand { font-size: 17px; font-weight: 700; font-family: var(--font-display); border-top: 1px solid var(--ink); padding-top: 8px; margin-top: 2px; }

/* ---------- Widget states ---------- */
.widget-loading, .widget-empty, .widget-error { font-size: 12.5px; color: var(--ink-soft); padding: 8px 0; line-height: 1.55; }
.cal-jump-prompt:hover { color: var(--ink); }
.cal-jump-prompt:hover strong { text-decoration: underline; }
.widget-error { color: #A85D45; }
.status-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.status-live { background: var(--ink); color: var(--paper); }
.status-ongoing { background: var(--gold); color: var(--ink); }
.status-open { background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.status-planned { background: var(--sidebar-bg); border: 1px solid var(--line); color: var(--ink-soft); }
.status-badge-clickable { cursor: pointer; }
.status-badge-clickable:hover { filter: brightness(0.93); }

/* ---------- Live table ---------- */
.lt-search { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-family: inherit; font-size: 12.5px; background: var(--sidebar-bg); margin-bottom: 10px; }
.lt-search:focus { outline: none; border-color: var(--ink); }
.lt-scroll { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.lt-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lt-table th { position: sticky; top: 0; background: var(--sidebar-bg); text-align: left; padding: 8px 10px; font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; }
.lt-table td { padding: 7px 10px; border-bottom: 1px dashed var(--line); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-table tbody tr:hover td { background: var(--ivory); }
.lt-empty { text-align: center; color: var(--ink-soft); padding: 16px !important; }
.lt-count { font-size: 10.5px; color: var(--ink-soft); margin-top: 6px; text-align: right; }

/* ---------- Embed / iframe pages ---------- */
.embed-frame { width: 100%; height: calc(100vh - 150px); border: 1px solid var(--line); border-radius: 12px; display: block; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.page-title { font-family: var(--font-display); font-weight: 700; font-size: 21px; }

/* ---------- Share button ---------- */
.share-wrap { position: relative; display: inline-block; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.share-btn:hover { background: var(--sidebar-bg); transform: translateY(-1px); }
.share-btn svg { width: 14px; height: 14px; }
.share-menu {
  position: absolute; top: calc(100% + 6px); right: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; min-width: 170px; z-index: 20; display: none;
}
.share-menu.open { display: block; }
.share-menu button {
  width: 100%; text-align: left; background: none; border: none; padding: 8px 10px; border-radius: 7px;
  font-family: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.share-menu button:hover { background: var(--sidebar-bg); }
.share-menu button svg { width: 14px; height: 14px; color: var(--ink-soft); }

/* ---------- Request tracker (Assistants page) ---------- */
.tracker-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tracker-group { margin-bottom: 18px; }
.tracker-group-head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.tracker-card { margin-bottom: 10px; max-width: 640px; }
.tracker-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tracker-card-title { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.tracker-card-title input { margin-top: 3px; accent-color: var(--ink); }
.tracker-card-title.checked span { color: var(--ink-soft); text-decoration: line-through; }
.tracker-card-note { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0 26px; }
.tracker-subtask-list { margin: 8px 0 0 26px; display: flex; flex-direction: column; gap: 4px; }
.tracker-subtask { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; cursor: pointer; }
.tracker-subtask input { margin-top: 2px; accent-color: var(--ink); }
.tracker-subtask.checked span { color: var(--ink-soft); text-decoration: line-through; }

/* ---------- Responsive ---------- */
.mobile-nav-toggle-btn { display: none; }
.mobile-nav-backdrop { display: none; }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; height: auto; min-height: 100vh; padding: 10px; gap: 10px; }

  /* Sidebar becomes a full off-canvas drawer, hidden by default and
     slid in from the left when #appShell has .mobile-nav-open, instead
     of the old cramped horizontal-scroll strip. */
  .app-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: min(78vw, 300px);
    flex-direction: column; align-items: stretch; overflow-x: visible; overflow-y: auto;
    padding: 20px 16px !important; border-radius: 0 20px 20px 0;
    transform: translateX(-105%); transition: transform 0.25s ease;
    z-index: 1001; box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  }
  #appShell.mobile-nav-open .app-sidebar { transform: translateX(0); }

  .mobile-nav-backdrop {
    position: fixed; inset: 0; background: rgba(20,20,20,0.45);
    z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  #appShell.mobile-nav-open .mobile-nav-backdrop { display: block; opacity: 1; pointer-events: auto; }
  body.mobile-nav-open { overflow: hidden; }

  .mobile-nav-toggle-btn {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink);
    cursor: pointer; flex-shrink: 0; padding: 0;
  }
  .mobile-nav-toggle-btn svg { width: 18px; height: 18px; }

  .sidebar-toggle-btn { display: none; }
  .app-main { height: auto; }
  .app-topbar { border-radius: 16px; padding: 14px 18px; }
  .topbar-left { gap: 10px; }
  .page-body { border-radius: 16px; padding: 20px 18px 32px; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card.span2, .bento-card.span3 { grid-column: span 1; }
  #overviewNormal { grid-template-columns: 1fr; }
  #overviewNormal .bento-card.span2, #overviewNormal .bento-card.blush { grid-column: span 1; grid-row: span 1; }
  #overviewNormal .bento-card.span2 .calendar-card { height: auto; }
  .embed-frame { height: calc(100vh - 260px); }
}

@media print {
  .app-sidebar, .app-topbar, .share-wrap { display: none; }
  .app-shell { height: auto; }
}

/* ---------- Session fixes layered on top of the design above ----------
   The uploaded file above predates the tracker's inline-edit rebuild and
   the full-width pass on the tracker cards, so both are re-applied here
   (later rules win the cascade). The old .tracker-card-title/.tracker-
   subtask rules further up are dead code now: current tracker.js markup
   uses the classes below instead, left in place rather than hunted down
   and deleted, since they don't match anything and cause no harm. */
.tracker-card { max-width: 100%; }
.tracker-card-title-row { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; }
.tracker-card-title-row input { margin-top: 4px; accent-color: var(--ink); cursor: pointer; }
.tracker-card-title-row.checked .tracker-editable { color: var(--ink-soft); text-decoration: line-through; }
.tracker-card-note { margin: 4px 0 0 26px; }
.tracker-subtask-row { display: flex; align-items: flex-start; gap: 8px; }
.tracker-subtask-row input[type=checkbox] { margin-top: 3px; accent-color: var(--ink); cursor: pointer; }
.tracker-subtask-row.checked .tracker-editable { color: var(--ink-soft); text-decoration: line-through; }
.tracker-subtask-add { margin-top: 4px; margin-left: 24px; }
.tracker-subtask-add input { font-size: 12px; border: none; background: transparent; border-bottom: 1px solid transparent; font-family: inherit; color: var(--ink-soft); padding: 2px 0; width: 100%; }
.tracker-subtask-add input:hover, .tracker-subtask-add input:focus { border-bottom-color: var(--line); outline: none; }
.tracker-subtask-add input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.tracker-card-head-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tracker-card-head-right .remove-btn { width: 22px; height: 22px; font-size: 15px; }
.tracker-subtask-row .remove-btn { width: 20px; height: 20px; font-size: 13px; flex-shrink: 0; margin-left: auto; }
.tracker-subtask-toggle {
  display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; color: var(--ink-soft); padding: 2px 0; margin-bottom: 2px;
}
.tracker-subtask-toggle:hover { color: var(--ink); }
.tracker-subtask-toggle .chev { font-size: 9px; }
.tracker-progress-bar { width: 46px; height: 4px; background: var(--sidebar-bg); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.tracker-progress-fill { display: block; height: 100%; background: var(--ink-soft); border-radius: 999px; }
.tracker-subtask-toggle:hover .tracker-progress-fill { background: var(--ink); }
.tracker-progress-label { font-size: 10.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.tracker-editable {
  display: inline-block; min-width: 20px; outline: none; cursor: text;
  border-bottom: 1px dashed transparent; padding-bottom: 1px;
}
.tracker-editable:hover { border-bottom-color: var(--line); }
.tracker-editable:focus { border-bottom-color: var(--ink); }
.tracker-card-title-row .tracker-editable { font-weight: 600; font-size: 13.5px; }
.tracker-card-note .tracker-editable { font-size: 12px; color: var(--ink-soft); display: block; }
.tracker-subtask-row .tracker-editable { font-size: 12px; }
.tracker-editable:empty:before { content: attr(data-placeholder); color: var(--ink-soft); opacity: 0.7; }

/* ---------- Calendar (People > Calendar) ---------- */
.calendar-filter-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.calendar-entry-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.calendar-entry-row:last-child { border-bottom: none; }
.calendar-date-input, .calendar-time-input {
  font-family: inherit; font-size: 12px; color: var(--ink-soft); border: none; background: transparent;
  border-bottom: 1px dashed transparent; padding: 2px 0; flex-shrink: 0;
}
.calendar-date-input { width: 108px; }
.calendar-time-input { width: 130px; }
.calendar-date-input:hover, .calendar-time-input:hover,
.calendar-date-input:focus, .calendar-time-input:focus { border-bottom-color: var(--line); outline: none; }
.calendar-entry-body { flex: 1; min-width: 0; }
.calendar-entry-body .tracker-editable { font-weight: 600; font-size: 13px; }
.calendar-source-editable {
  font-weight: 400 !important; font-size: 10.5px !important; margin-left: 8px;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft) !important;
}
.calendar-entry-note .tracker-editable { font-size: 12px; color: var(--ink-soft); display: block; margin-top: 2px; }
.calendar-entry-row .remove-btn { flex-shrink: 0; }
/* The five rules above styled the old flat-list inline-edit row layout
   for the Calendar page. Superseded by the time-grid view below (clicking
   an event now opens a modal instead of editing inline), left in place
   since nothing currently matches those selectors, causing no harm. */

/* ---------- Calendar grid view (People > Calendar) ---------- */
.cal-nav-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cal-legend { display: flex; gap: 16px; margin-bottom: 12px; font-size: 11.5px; color: var(--ink-soft); }
.cal-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.cal-half-hour-label { position: absolute; left: 0; right: 8px; transform: translateY(-50%); font-size: 9px; color: var(--ink-soft); opacity: 0.6; text-align: right; }
.cal-nav-controls { display: flex; align-items: center; gap: 6px; }
.cal-nav-controls .remove-btn { border: 1px solid var(--line); }
.cal-range-label { font-size: 12.5px; color: var(--ink-soft); margin-left: 8px; white-space: nowrap; }
.cal-grid-card { overflow-x: auto; }
.cal-header-row { display: flex; }
.cal-hour-gutter-spacer { width: 56px; flex-shrink: 0; }
.cal-day-heads { display: flex; flex: 1; min-width: 0; border-left: 1px solid var(--line); }
.cal-grid-wrap { display: flex; min-width: 640px; }
.cal-hour-gutter { position: relative; width: 56px; flex-shrink: 0; }
.cal-hour-label { position: absolute; left: 0; right: 8px; transform: translateY(-50%); font-size: 10.5px; color: var(--ink-soft); text-align: right; }
.cal-day-cols { display: flex; flex: 1; min-width: 0; border-left: 1px solid var(--line); }
.cal-day-col { flex: 1; min-width: 90px; border-right: 1px solid var(--line); }
.cal-day-head {
  flex: 1; min-width: 90px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  padding: 6px 4px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.cal-day-head span { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px; text-transform: none; letter-spacing: normal; }
.cal-day-head-today { background: var(--sidebar-bg); }
.cal-day-head-today span { color: var(--gold); }
.cal-day-body {
  position: relative;
  background-image:
    repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--sidebar-bg) 47px, var(--sidebar-bg) 49px, transparent 49px, transparent 96px);
  cursor: pointer;
}
.cal-day-col-weekend, .cal-day-head-weekend { background: var(--sidebar-bg); }
.cal-day-head-weekend { opacity: 0.85; }
.cal-now-line {
  position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #C0392B; z-index: 4; pointer-events: none;
}
.cal-now-line::before {
  content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #C0392B;
}
.cal-untimed-header-row { margin-bottom: 2px; }
.cal-untimed-cell {
  flex: 1; min-width: 90px; display: flex; flex-direction: column; gap: 2px;
  padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px dashed var(--line);
}
.cal-event-chip {
  position: relative; border-radius: 6px; padding: 3px 7px;
  font-size: 10.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-event-chip:hover { filter: brightness(1.08); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.cal-event-block {
  position: absolute; border-radius: 6px;
  padding: 3px 6px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
.cal-event-block:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(0,0,0,0.3); transform: translateY(-1px); z-index: 5; }
.cal-event-title { font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cal-event-notes { font-size: 9.5px; color: var(--ink-soft); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cal-dup-flag {
  display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 50%;
  background: #C0392B; color: #fff; font-size: 8.5px; font-weight: 700; margin-right: 3px; flex-shrink: 0; vertical-align: middle;
}
.cal-legend-dup { display: flex; align-items: center; }
.cal-dup-flag-demo {
  display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 50%;
  background: #C0392B; color: #fff; font-size: 8.5px; font-weight: 700; margin-right: 5px;
}
.cal-search { display: flex; gap: 6px; }
.cal-search input {
  font-family: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; background: var(--paper); min-width: 160px;
}
.cal-search input:focus { outline: none; border-color: var(--ink); }
.cal-totals { font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }

.cal-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,20,20,0.45); z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cal-modal { width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }

@media (max-width: 900px) {
  .cal-grid-wrap { min-width: 0; }
  .cal-day-col, .cal-day-head, .cal-untimed-cell { min-width: 70px; }
}

/* ---------- Shared/standalone view (?share=1 links) ----------
   Someone sent a link to one page shouldn't be able to browse into
   the rest of the dashboard from it. Hides the sidebar and everything
   in the topbar except the page's own heading. This is a UI-level
   restriction, not real access control, there's no backend/auth in
   this app, so it stops casual browsing rather than a determined edit
   of the URL, see the comment on initFromUrl() in app.js. */
#appShell.shared-view .app-sidebar,
#appShell.shared-view .clinic-switcher,
#appShell.shared-view .mobile-nav-toggle-btn,
#appShell.shared-view .topbar-right { display: none; }
#appShell.shared-view .app-main { width: 100%; }

/* ---------- Full-bleed embedded pages (Renaissance Protocol Manual) ---------- */
.page-body.full-bleed { padding: 0; overflow: hidden; position: relative; }
.page-body.full-bleed #dynamicPageContent { height: 100%; }
.embed-frame.bleed { width: 100%; height: 100%; min-height: 70vh; border: 0; border-radius: 0; }
.bleed-share { position: absolute; right: 18px; bottom: 18px; z-index: 5; }
.bleed-share .share-wrap { box-shadow: 0 6px 20px rgba(52,51,51,0.16); border-radius: 999px; }
@media (max-width: 900px) {
  .page-body.full-bleed { padding: 0; }
  .embed-frame.bleed { height: calc(100dvh - 110px); }
  .bleed-share { bottom: 84px; }
}
.bleed-share .share-menu { top: auto; bottom: calc(100% + 8px); right: 0; left: auto; }